/* ─────────────────────────────────────────────────────────────
   프론트 화면
   Modern Editorial — 표지가 색을 담당하고 UI 는 무대가 된다.

   활기를 만드는 네 가지 장치:
     1) 표지를 크게 쓴다
     2) 섹션 배경을 흰색 ↔ 웜화이트로 교차시킨다
     3) CTA 한 곳만 브랜드 색으로 반전시켜 낙차를 만든다
     4) 타이포 크기 대비를 크게 둔다
   ───────────────────────────────────────────────────────────── */

/* ── 브랜드 색 변형 ──────────────────────────────────────
   브랜드 색은 무채색(먹색)으로 확정했다. 로고가 단색이고, 표지 30종이
   노랑·주황·청록·빨강으로 색상환 전체에 퍼져 있어 UI 가 색을 쓰면 표지와 부딪힌다.
   바꿔야 할 일이 생기면 tokens.css 의 --color-brand 한 줄만 고치면 된다.

   브랜드 색이 드러나는 자리:
     · 기본 버튼 (출간 도서 보기 · 출간 문의)
     · CTA 밴드 배경
     · 신간 배지 / 목록 필터 활성 / 판형 탭 활성
     · 한 줄 소개의 세로 강조선 / Hero 뱃지
     · 현재 메뉴 밑줄 / 포커스 링
   기본값(mono)에서는 --color-brand 가 먹색이므로 무채색 그대로다.        */
/* ── 표지 경계선 ─────────────────────────────────────────
   흰 배경 표지는 페이지 배경과 구분되지 않아 책이 떠 보이지 않는다.
   그림자를 키우면 요구사항 34번(과도한 그림자)에 걸리고 표지를 방해하므로,
   서점들이 쓰는 방식대로 머리카락 굵기의 선을 이미지 위에 얹는다.
   ::after 로 덮어 이미지 색과 무관하게 경계가 보이고, 크기도 변하지 않는다. */
.book-card__cover,
.hero__cover,
.feature__cover,
.detail-head__cover,
.cover-frame {
    position: relative;
}

.book-card__cover::after,
.hero__cover::after,
.feature__cover::after,
.detail-head__cover::after,
.cover-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.12);
    pointer-events: none;
}

/* ── 레이아웃 뼈대 ───────────────────────────────────────── */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main { flex: 1; }

/* 구역의 위아래 여백. 히어로(64px)와 같은 값으로 맞춘다.
   96px 일 때는 한 화면에 한 덩어리밖에 안 들어와 스크롤이 길었다. */
.section { padding: var(--space-8) 0; }

/* 바닥색이 생겼으므로 흰 구역은 흰색이라고 적어 준다.
   적지 않으면 body 를 물려받아 홈의 흰색/웜화이트 교차 리듬이 사라진다. */
/* ── 바닥색을 쓰는 곳과 쓰지 않는 곳 ─────────────────────
   목록 페이지는 카드가 늘어서는 자리다. 바닥색이 있어야 카드가 떠 보인다.
   상세 페이지는 긴 글을 읽는 자리다. 회색 위에 본문을 얹으면 눈이 쉽게 지친다.

   흰색은 페이지 전체에 건다. .detail-body 같은 컨테이너에 걸면 폭이 제한되어
   가운데만 흰 박스가 되고 좌우에 회색이 남는다. 실제로 그렇게 만들어 봤는데
   본문이 어긋난 판처럼 보였다. */
/* body 가 흰색이 되면서 이 규칙은 할 일이 없어졌다.
   그래도 남겨 둔다 — 상세는 반드시 흰 종이여야 한다는 뜻이 여기 적혀 있다. */
.page--detail { background: var(--color-white); }

/* 상세 화면의 머리 부분(표지·제목)에만 색을 얹는다.
   본문은 흰 종이로 두어야 긴 글이 편하고, 머리에 색이 있으면
   '여기까지가 소개, 여기부터가 본문' 이 눈으로 갈린다.
   두 요소 모두 화면 끝까지 닿는 블록이라 좌우에 띠가 남지 않는다. */
.page--detail .detail-band { padding-top: var(--space-6); }

.page--detail .detail-head,
.page--detail .detail-band {
    /* 목록 페이지의 바닥색과 같은 색을 쓴다.
       warm-white(#fafaf8) 는 흰색과 대비가 1.045 라 또 안 보인다. */
    background: var(--color-page);
    border-bottom: 1px solid var(--color-border);
}

/* 카드는 흰 섹션 위에도 놓이고 바닥색 위에도 놓인다.
   칠 색으로 나누려 하면 놓이는 자리마다 색을 달리해야 해서 금방 어긋난다.
   그래서 칠은 흰색으로 두고 테두리(--color-border)와 아주 옅은 그림자로 구분한다.
   테두리는 #e5e5e3 → #dfdfdb 로 한 단계 진하게 했다. */
.section { background: var(--color-white); }

.section--alt {
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

/* ── 영문 라벨 (EYEBROW) ─────────────────────────────────
   제목 위에 작게 얹는 표기. 이 페이지가 무엇을 다루는지 먼저 알려 주고,
   큰 제목과 크기 대비를 만들어 준다.
   화면마다 따로 정의하면 반드시 어긋나므로 여기 한 곳에 모은다.
   색은 --color-accent 하나만 바꾸면 전 페이지가 함께 바뀐다. */
.eyebrow,
.section__label,
.page-head__label,
.article__type,
.detail-head__category,
.buy-panel__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.section__title {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

/* 구역 제목 아래 한 줄. 곁말(.section__note)보다 앞자리에 오므로 조금 진하다. */
.section__desc {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.section__more {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
}

.section__more:hover { color: var(--color-accent); }
.section__more span { transition: transform var(--duration) var(--ease); }
.section__more:hover span { transform: translateX(4px); }

/* ── 스크롤 등장 ─────────────────────────────────────────
   감추는 일은 .has-motion 이 붙었을 때만 한다. 그 클래스는 head 의 인라인
   스크립트가 붙이므로, 스크립트가 막히면 아래 규칙이 아예 적용되지 않고
   내용은 처음부터 보인다. 이 순서를 뒤집으면 JS 가 죽는 순간 페이지가 빈다.

   움직임을 줄여 달라는 설정에서도 클래스가 붙지 않아 그냥 보인다. */
.has-motion [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.has-motion [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* 카드가 한꺼번에 뜨면 덜컥거린다. 앞에서부터 조금씩 늦춰 흐르게 한다. */
.has-motion [data-reveal] > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.has-motion [data-reveal].is-visible > * {
    opacity: 1;
    transform: none;
}

.has-motion [data-reveal].is-visible > *:nth-child(1) { transition-delay: 0.04s; }
.has-motion [data-reveal].is-visible > *:nth-child(2) { transition-delay: 0.10s; }
.has-motion [data-reveal].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.has-motion [data-reveal].is-visible > *:nth-child(4) { transition-delay: 0.22s; }
.has-motion [data-reveal].is-visible > *:nth-child(5) { transition-delay: 0.28s; }

/* 숫자가 올라가는 동안 폭이 흔들리면 옆 항목이 밀린다. */
.hero__stat dd [data-count] { font-variant-numeric: tabular-nums; }

/* ── 헤더 ────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    /* 완전한 흰색. 반투명(0.94)일 때는 아래로 지나가는 표지 색이 비쳐
       메뉴 글자의 바탕이 스크롤에 따라 조금씩 달라졌다.
       불투명하게 두면 글자가 놓이는 바탕이 늘 같다. */
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 76px;
}

.site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__logo img {
    height: 32px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.site-nav__link {
    position: relative;   /* 현재 메뉴의 밑줄 막대가 이 상자를 기준으로 놓인다 */
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    min-height: 48px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    /* 밑줄이나 배경 박스를 두지 않는다. 글자 색만 바뀌는 편이 조용하다. */
    transition: color var(--duration-fast) var(--ease);
}

/* 세 가지 상태.
     그냥      진한 회색      #55554f  7.50:1
     올렸을 때 포인트 컬러    #b93f36  5.49:1
     지금 여기 포인트 컬러 + 밑줄

   호버와 현재 위치가 같은 색이어도 헷갈리지 않는다. 밑줄이 갈라 주기 때문이다.
   색만으로 나누려 했을 때는 옅게 갈수록 안 읽히고 진하게 갈수록 구별이 안 돼서
   양쪽을 다 만족시킬 수 없었다(#c4453b 4.93 · #cb5046 4.40 · #d15a50 3.97).
   구별을 색이 아니라 밑줄에 맡기니 색은 가장 잘 읽히는 것을 쓸 수 있다.

   색맹·색약인 사람에게도 '지금 어디'가 전해진다는 뜻이기도 하다. */
.site-nav__link:hover {
    color: var(--color-accent);
}

.site-nav__link[aria-current="page"] {
    color: var(--color-accent);
}

/* 밑줄은 text-decoration 이 아니라 막대를 직접 그린다.
   이 링크는 flex 상자다. 그 안의 글자는 '익명 flex 항목'이 되는데,
   거기에는 text-decoration 이 전해지지 않는다. 선언은 되지만 그려지지 않아
   개발자 도구에서는 underline 이라고 나오면서 화면에는 아무것도 안 보인다.

   자리는 글자를 기준으로 잡았다 — 링크는 48px, 글자는 17px 이고
   아래 여백이 16px 이라, 바닥에서 9px 이면 글자에서 7px 아래가 된다. */
.site-nav__link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 9px;
    height: 2px;
    background: currentColor;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.site-header__toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.site-header__bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-black);
    transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.site-header__toggle[aria-expanded="true"] .site-header__bar:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__bar:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

/* ── 모바일 메뉴 ─────────────────────────────────────────── */
.mobile-nav {
    display: none;
    flex-direction: column;
    padding: var(--space-3) var(--gutter) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
}

.mobile-nav[hidden] { display: none; }

.mobile-nav__link {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-light-gray);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

/* 위쪽 메뉴와 같은 규칙. 지금 보고 있는 곳이 포인트 컬러다.
   휴대폰에서는 메뉴를 열었을 때 내가 어디 있는지가 더 헷갈린다. */
.mobile-nav__link[aria-current="page"] {
    color: var(--color-accent);
}

/* 모바일 메뉴도 영문만 쓰므로 링크 자체에 서체를 준다 */

.mobile-nav__cta {
    margin-top: var(--space-4);
    padding: var(--space-4);
    text-align: center;
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background-color var(--duration-fast) var(--ease);
}

.mobile-nav__cta:hover {
    background: var(--color-accent);
}

/* ── HERO ────────────────────────────────────────────────── */
.hero {
    /* 위아래를 같게. 예전에는 아래가 96px 로 32px 더 두꺼워서
       히어로가 아래로 처져 보였다. */
    padding: var(--space-8) 0;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* 가로(글 ↔ 표지)는 넓게, 세로(내용 ↔ 통계 띠)는 좁게.
       통계가 글 칸 안에 있던 시절에는 세로 간격이 쓰일 일이 없어
       가로와 같은 64px 로 두었는데, 띠를 밖으로 빼고 나니 너무 벌어졌다. */
    column-gap: var(--space-8);
    row-gap: var(--space-6);
    align-items: center;
}

.hero__eyebrow {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-brand);
    border-radius: 999px;
    background: var(--color-white);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-brand);
    margin-bottom: var(--space-5);
}

/* 첫 화면의 한 문장이다. 여기서 힘이 빠지면 그 아래가 다 밋밋해진다.
   Pretendard 를 실제로 불러오면서 800 굵기를 쓸 수 있게 됐다.
   자간을 더 좁히고 줄간을 붙이면 한 덩어리로 읽혀 문장이 단단해진다. */
.hero__title {
    font-size: var(--text-hero);
    font-weight: var(--weight-black);
    letter-spacing: -0.04em;
    line-height: 1.08;
    margin-bottom: var(--space-5);
}

.hero__subtitle {
    font-size: var(--text-lg);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    max-width: 44ch;
    margin-bottom: var(--space-6);
}

.hero__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    /* 아래 여백을 두지 않는다. 통계 띠가 이 칸 안에 있을 때는 둘을 떼어 놓는
       역할을 했지만, 띠가 밖으로 나간 지금은 간격만 두 번 더해질 뿐이다. */
}

/* 숫자를 한 줄로 흘려 두니 그냥 글자처럼 읽혔다.
   흰 카드 띠에 담고 세로 구분선을 넣으면 '실적' 으로 읽힌다. */
/* 히어로 아래를 가로지르는 한 줄.
   글 칸(왼쪽) 안에 있던 것을 두 칸 전체로 넓혔다. 세로로 쌓인 상자일 때는
   왼쪽 아래에 뭉쳐 있어 표지와 무게가 맞지 않았다. */
.hero__stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: var(--space-4) 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

/* 이름과 숫자를 한 줄에 나란히 — '출간 도서 31권'.
   dl 의 뜻(이름 → 값) 순서가 보이는 순서와 같아져서 뒤집을 필요도 없어졌다. */
.hero__stat {
    position: relative;   /* 아래 링크가 이 칸 전체로 늘어난다 */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
}

/* 링크 글자는 숫자뿐이지만, 눌리는 자리는 칸 전체여야 한다.
   ::after 를 칸에 꽉 채워 손이 닿는 넓이를 넓힌다. */
.hero__stat-link { display: inline-block; }

.hero__stat-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
}

.hero__stat:hover dt,
.hero__stat:focus-within dt { color: var(--color-text); }

.hero__stat:hover dd,
.hero__stat:focus-within dd { text-decoration: underline; text-underline-offset: 4px; }

.hero__stat + .hero__stat { border-left: 1px solid var(--color-border); }

.hero__stat dt {
    font-size: var(--text-body);
    color: var(--color-text-muted);
}

.hero__stat dd {
    margin: 0;
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    color: var(--color-accent);
}

/* 단위는 숫자보다 작게. 31 이 주인공이고 '권' 은 거들 뿐이다. */
.hero__stat dd span {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    margin-left: 2px;
}

/* 표지 모음. 기울이지 않고 격자에 얹어 겹침으로만 리듬을 만든다. */
.hero__covers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    /* 위를 기준으로 세운다. 가운데 정렬로 두면 비율이 다른 표지끼리
       위아래가 어긋나 보인다. */
    align-items: start;
}

.hero__cover {
    position: relative;
    display: block;   /* <a> 라서 기본이 inline 이다 */
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--color-light-gray);
    aspect-ratio: var(--cover-ratio);
}

.hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 세 표지를 한 줄로 세운다.
   예전에는 -16 / +14 / -6px 씩 어긋나게 두었는데, 표지마다 비율이 조금씩
   달라서 그 어긋남이 '의도한 리듬'이 아니라 '안 맞은 것'처럼 보였다.

   마우스를 올리면 그 표지만 살짝 떠오른다. 셋 다 같은 자리에 서 있으니
   움직임이 더 잘 보인다. */
.hero__cover {
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.hero__covers:hover .hero__cover:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(23, 23, 23, 0.16);
}

/* ── 대표 신간 ───────────────────────────────────────────── */
/* 표지 380px 에 좌우 여백까지 더하니 화면 한 판을 통째로 썼다.
   대표 신간은 '이 책 하나만 보라'는 자리이지 화면을 다 쓰라는 자리가 아니다.
   카드로 묶고 표지를 240px 로 줄여 한눈에 들어오게 한다. */
.feature {
    display: grid;
    /* 표지 200px. 240px 은 카드 안에서 혼자 너무 컸다.
       옆의 글과 무게가 비슷해야 제목이 눈에 먼저 들어온다. */
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.feature__badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1;
    padding: 3px 8px;
    background: var(--color-accent);
    color: var(--color-brand-contrast);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
}

.feature__cover {
    position: relative;
    display: block;
    aspect-ratio: var(--cover-ratio);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-light-gray);
    box-shadow: var(--cover-edge), var(--shadow);
    transition: transform var(--duration) var(--ease);
}

.feature__cover:hover { transform: translateY(-4px); }

.feature__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature__category {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-3);
}

.feature__title {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

/* 부제와 지은이가 한 줄에 나란히 선다.
   좁아지면 지은이가 아랫줄로 내려간다 — 억지로 한 줄에 붙들지 않는다. */
.feature__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-5);
    margin-bottom: var(--space-5);
}

.feature__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

.feature__author {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.feature__desc {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    max-width: 52ch;
    margin-bottom: var(--space-6);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-brand);
}

/* ── 도서 그리드 · 카드 ──────────────────────────────────── */
/* 열 수를 고정하지 않고 표지 한 장의 최대 폭을 정한다.
   화면이 넓어지면 표지가 커지는 대신 열이 늘어난다. */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-6) var(--space-5);
}

/* 도서 목록은 한 줄 5권으로 고정한다.
   auto-fill 로 두면 화면이 넓을 때 6~7열까지 늘어나 한눈에 들어오지 않는다. */
.book-grid--list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
}

.book-card__link { display: block; }

.book-card__cover {
    position: relative;
    aspect-ratio: var(--cover-ratio);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-light-gray);
    margin-bottom: var(--space-3);
    box-shadow: var(--cover-edge);
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.book-card__link:hover .book-card__cover,
.book-card__link:focus-visible .book-card__cover {
    box-shadow: var(--cover-edge), var(--shadow);
    transform: translateY(-2px);
}

.book-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-card__cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    color: var(--color-text-subtle);
}

.book-card__new {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    padding: 3px 8px;
    background: var(--color-accent);
    color: var(--color-brand-contrast);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
}

/* 절판은 알리되 붉게 외치지 않는다. 신간과 같은 자리, 같은 크기,
   회색으로. 「지금은 살 수 없다」 는 사실이지 나쁜 소식이 아니다. */
.book-card__new--gone {
    background: var(--color-gray);
    color: var(--color-white);
}

/* 하단 정보 패널 — 아래에서 부드럽게 올라온다 (요구사항 19번) */
.book-card__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-4);
    /* 불투명에 가까우면 표지를 완전히 덮어 답답해진다.
       투명도를 낮추고 블러를 얹으면 표지가 비치면서도 글자는 읽힌다. */
    background: rgba(23, 23, 23, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-white);
    transform: translateY(101%);
    transition: transform var(--duration) var(--ease);
}

.book-card__link:hover .book-card__panel,
.book-card__link:focus-visible .book-card__panel {
    transform: translateY(0);
}

.book-card__field {
    display: block;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-2);
}

.book-card__panel .book-card__desc {
    font-size: var(--text-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-card__formats {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

.book-card__formats span {
    font-size: var(--text-2xs);
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sm);
}

.book-card__meta-line {
    display: block;
    font-size: var(--text-2xs);
    color: rgba(255, 255, 255, 0.75);
}

.book-card__title {
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    margin-bottom: var(--space-1);
}

.book-card__author {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.book-card__mobile-meta { display: none; }

/* 대표 신간처럼 크게 쓰는 카드 */
.book-card--large .book-card__title { font-size: var(--text-h3); }

/* ── 작가 카드 ───────────────────────────────────────────── */
.author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
}

/* 홈은 한 줄만 보여주는 자리다. auto-fill 로 두면 칸은 5개가 생기는데
   작가는 4명만 들어와 오른쪽이 비었다. 칸 수를 명시해 수와 맞춘다. */
.author-grid--home { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.author-card {
    display: block;
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: border-color var(--duration) var(--ease),
                background-color var(--duration) var(--ease),
                transform var(--duration) var(--ease);
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

/* 테두리 색과 살짝 떠오르는 것까지만. 바탕까지 옅은 포인트 색으로 물들여
   봤는데, 카드가 크다 보니 사진과 글자를 덮은 분홍이 너무 세게 읽혔다.
   떠오르는 움직임이 있어 1px 선만으로도 어디에 있는지 알 수 있다. */
.author-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
}

.author-card__photo {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    color: var(--color-text-subtle);
}

.author-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-card__name {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
}

/* 항목 설명은 어디서나 14px 다. 여기만 13px 이라, 작가 카드의 직함과
   대표 저서가 인사이트 요약·출간 유형 설명보다 한 눈금 작아 보였다. */
.author-card__job {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.author-card__count {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-light-gray);
}

/* ── 콘텐츠 카드 ─────────────────────────────────────────── */
.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    /* 유형마다 썸네일 비율이 달라 카드 높이가 제각각이다.
       기본값(stretch)이면 같은 줄의 낮은 카드가 늘어나 제목 위에 빈 자리가 생긴다. */
    align-items: start;
}

/* ── 인사이트 썸네일 ─────────────────────────────────────
   한 프레임에 성격이 다른 세 가지가 들어온다.
     · 보도사진·카드뉴스  가로 1.64:1 부터 정사각형까지 제각각
     · 책 표지            2:3 세로. 연결된 도서에서 빌려 온다
     · 작가 사진          1:1
   그래서 프레임 비율은 4:3 하나로 고정하고, 채우는 방식만 다르게 한다.
   4:3 은 가로 사진과 정사각형 사이에 있어 어느 쪽도 크게 낭비하지 않는다. */
.insight-card__image {
    /* 기본은 16:9. 사진과 영상 섬네일이 대개 이 비율로 만들어진다.
       카드뉴스처럼 다른 비율이 필요한 유형은 관리자에서 정한다. */
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    /* 흰색이라야 카드가 바닥색 위에 놓인 한 장으로 읽힌다.
       바닥과 같은 색이면 표지만 덩그러니 떠 있는 것처럼 보인다.
       표지를 통째로 담느라 생기는 좌우 여백도 흰 바탕이 자연스럽다. */
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.07);
    margin-bottom: var(--space-4);
}

/* 유형별 비율. content_types.thumb_ratio 가 정한다. */
.insight-card__image--wide    { aspect-ratio: 16 / 9; }
.insight-card__image--square  { aspect-ratio: 1 / 1; }
.insight-card__image--photo43 { aspect-ratio: 4 / 3; }

.insight-card__image img {
    width: 100%;
    height: 100%;
    transition: transform var(--duration) var(--ease);
}

/* 카드뉴스는 글자가 그림의 일부다. 잘라내면 문장이 끊긴다.
   그래서 채우지 않고 통째로 담는다. 정사각형이 들어와도 안전하다. */
.insight-card__image--photo img { object-fit: contain; }

/* 책 표지는 세로로 길다. 가로 프레임을 채우면 가운데 띠만 남아 제목이 사라진다.
   작게 세워 두면 '이 책에 관한 글' 이라는 것이 한눈에 읽힌다. */
.insight-card__image--cover,
.insight-card__image--portrait {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.insight-card__image--cover img,
.insight-card__image--portrait img {
    width: auto;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 12px rgba(23, 23, 23, 0.16);
}

.insight-card__image--portrait img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

.insight-card:hover .insight-card__image img { transform: scale(1.03); }

.insight-card__type {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-2);
}

.insight-card__title {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    margin-bottom: var(--space-2);
}

.insight-card__date {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* ── 출간 과정 ───────────────────────────────────────────── */
.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

/* 이 상자는 흰 구역 위에 놓인다. 바탕과 같은 흰색이라 테두리와 그림자가
   상자의 윤곽을 통째로 맡는다. 기본 테두리(#dfdfdb, 흰 바탕에서 1.34:1)와
   거의 없는 그림자로는 네 단계가 그냥 글 네 덩어리로 읽혔다.

   바닥을 회색으로 바꾸는 방법도 있었지만, 그러면 아래 CTA 까지 회색이 이어져
   페이지 끝이 통째로 회색 덩어리가 된다. 상자 쪽을 또렷하게 하는 편이 낫다. */
.step {
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 10px rgba(23, 23, 23, 0.06);
}

.step__num {
    display: block;
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    color: var(--color-brand);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-3);
}

/* 단계 이름에 포인트 컬러를 준다. 상자 안이 먹색 하나뿐이라 밋밋했다.
   번호(01)는 먹색 그대로 둔다. 둘 다 색을 주면 무엇을 먼저 볼지 흐려진다.
   흰 바탕에서 5.49:1 이라 읽는 데 문제가 없다. */
.step__title {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

/* 설명에 옅은 띠를 깔아 보았지만 상자 안이 복잡해졌다.
   흰 상자 하나에 색 면을 또 넣으면 층이 둘로 갈리면서, 네 단계를 훑는
   눈이 매번 한 번씩 멈춘다. 상자는 비워 두고 이름의 색으로만 구분한다. */
.step__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

/* ── CTA (먹색 반전) ─────────────────────────────────────── */
/* CTA 는 먹색을 쓰지 않는다. 바로 아래 푸터가 먹색이라
   둘이 붙으면 한 덩어리로 보여 '문의하세요' 가 푸터의 일부처럼 읽힌다.
   밝은 회색으로 두면 본문과 푸터 사이에서 스스로 한 구역이 된다. */
.cta {
    padding: var(--space-9) 0;
    background: var(--color-page);
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
}

.cta__inner { text-align: center; }

/* 독자에게는 책으로, 저자에게는 문의로. 두 사람이 오는 화면이라 문이 둘이다. */
.cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.cta__title {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-4);
}

.cta__desc {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

/* 밝아진 CTA 위에서는 흰 버튼이 사라진다. 먹색 버튼이 눈에 띈다. */
.btn--invert {
    background: var(--color-brand);
    color: var(--color-brand-contrast);
}

/* 채운 버튼은 모두 같게 — 마우스를 올리면 포인트 컬러가 된다.
   목록 바닥 위에서도 흰 글씨가 5.49:1 로 또렷하다. */
.btn--invert:hover { background: var(--color-accent); }

/* ── 목록 페이지 공통 ────────────────────────────────────── */
/* 목록 화면의 머리. 홈의 히어로, 상세의 머리와 같은 회색을 쓴다.
   어느 화면에 들어와도 '회색 머리 아래 흰 본문' 이라는 순서가 같다. */
.page-head { background: var(--color-page); }

.page-head {
    padding: var(--space-8) 0 var(--space-6);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}


/* 40px 는 목록 페이지 제목치고 컸다. 한 단계 줄이고 굵기로 힘을 준다.
   Pretendard 를 실제로 불러오면서 800 이 살아났다. */
.page-head__title {
    font-size: var(--text-h1);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-3);
}

.page-head__desc {
    font-size: var(--text-body);
    color: var(--color-text-muted);
}

/* 고르는 줄과 결과 사이는 넉넉히 띄운다.
   16px 이었을 때는 위(머리에서 32px)보다 아래가 좁아, 필터가 표지에
   달라붙고 오히려 제목 쪽에서 떨어져 보였다. 필터는 결과를 고르는
   손잡이이므로 위쪽 제목에 붙고, 결과와는 확실히 갈라져야 한다. */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-7);
}

/* 주제어 태그와 같은 처리다.
   배경이 없으면 바닥색 위에서 테두리만 뜬 것처럼 보인다.
   흰 알약이라야 '눌러 고르는 것' 으로 읽힌다. */
.filters__item {
    padding: var(--space-2) var(--space-4);
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: border-color var(--duration-fast) var(--ease),
                background-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

.filters__item:hover { border-color: var(--color-accent); color: var(--color-accent); }

.filters__item--active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-brand-contrast);
}

/* :hover 가 --active 보다 우선순위가 높아 글자색이 덮인다.
   선택된 칩은 배경이 먹색이므로 글자까지 먹색이 되면 보이지 않는다. */
.filters__item--active:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-brand-contrast);
}

.filters__divider {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 var(--space-2);
}

/* 목록 아래에 둔다. 위에 있으면 제목과 카드 사이에 숫자가 끼어들어
   시선이 한 번 끊긴다. 세어 보고 싶은 사람은 다 보고 난 뒤에 찾는다. */
.list-total {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-light-gray);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.list-total strong { color: var(--color-black); }

.empty-state {
    padding: var(--space-9) 0;
    text-align: center;
    color: var(--color-text-muted);
}

.empty-state p { margin-bottom: var(--space-4); }

/* ── 도서 상세 ───────────────────────────────────────────── */
.breadcrumb {
    padding: var(--space-4) 0;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.breadcrumb a:hover { color: var(--color-black); text-decoration: underline; text-underline-offset: 3px; }

/* 마지막 칸은 지금 보고 있는 글의 제목이다.
   빵부스러기는 '어디에 있는지' 알려주는 줄이지 제목을 다시 읽히는 줄이 아니다.
   제목은 바로 아래 큰 글씨로 또 나온다.

   길면 말줄임으로 자른다. 글자는 그대로 있으므로 검색엔진과 화면낭독기는 전부 읽는다.
   BreadcrumbList 구조화 데이터에도 온전한 제목이 나간다. */
.breadcrumb [aria-current="page"] {
    min-width: 0;
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* 좁은 화면에서는 앞의 칸들이 이미 한 줄을 다 쓴다.
       고정 폭을 두면 잘리지 않고 넘쳐 흐른다. */
    .breadcrumb [aria-current="page"] { max-width: 100%; }
}

.detail-head {
    /* 위쪽 여백이 없어 빵부스러기 바로 아래에 표지가 붙어 있었다.
       머리 띠에 색이 생기면서 그 답답함이 더 눈에 띈다.

       위아래를 같게 둔다. 48 / 64 로 달랐을 때는 표지 위가 48px, 아래가
       69px 이라 표지가 위로 딸려 올라간 것처럼 보였다. */
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
    border-bottom: 1px solid var(--color-border);
}

.detail-head__inner {
    display: grid;
    /* 표지 280px. 340px 은 화면의 4분의 1을 넘게 차지해, 옆의 제목·소개·
       '책 속의 한 줄' 이 그 아래로 눌려 보였다. 표지는 무엇을 보고 있는지
       알려 주는 표지판이지 그 자체가 읽을 거리는 아니다. */
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.detail-head__cover {
    position: relative;
    aspect-ratio: var(--cover-ratio);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-light-gray);
    box-shadow: var(--cover-edge), var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-head__cover img { width: 100%; height: 100%; object-fit: cover; }

.detail-head__cover-empty {
    font-size: 64px;
    font-weight: var(--weight-bold);
    color: var(--color-text-subtle);
}


/* 표지 옆은 글이 네 덩이 잇달아 온다 — 제목 · 부제 · 지음 · 한 줄 소개.
   제목을 40px 로 두었더니 그 아래가 다 같이 커 보여 덩어리가 무거웠다.
   40 → 32px 로 낮추고, 본문 구역 제목(24px)과의 차이는 남겨 둔다. */
.detail-head__title {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.detail-head__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

/* 지은이 줄은 본문과 같은 크기일 필요가 없다. 이름을 찾는 줄이지 읽는 줄이 아니다.
   16px 먹색이면 바로 아래 한 줄 소개와 무게가 같아 어느 쪽을 먼저 볼지 헷갈린다. */
.detail-head__authors {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.detail-head__authors a {
    color: var(--color-text);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-border);
}

.detail-head__authors a:hover { text-decoration-color: var(--color-black); }

/* 한 줄 소개와 '책 속의 한 줄' 은 늘 같은 크기를 쓴다.
   둘이 잇달아 오는데 하나만 크면 어느 쪽을 먼저 읽어야 할지 헷갈린다.
   15px — 본문(16px)보다 반 칸 작다. 표지 옆 덩어리가 무거워 한 칸 낮췄다. */
.detail-head__short {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-brand);
    margin-bottom: var(--space-6);
}

.detail-head__nostock {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.detail-head__gone {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-light-gray);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
}

.topic-tags {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    /* 바로 위 문장과 붙어 있으면 문장의 꼬리처럼 보인다. 떼어 놓되,
       24px 은 너무 벌어져 키워드만 아래로 처져 보였다. 16px 이 알맞다. */
    margin-top: var(--space-4);
}

/* 회색으로 칠하면 머리 띠(#f3f3f0) 위에서 경계가 흐려진다.
   흰 알약에 테두리를 두르면 어느 배경 위에서도 또렷하다. */
.topic-tag {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: border-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

/* 이제 누르면 주제 페이지로 간다. 눌리는 것처럼 보여야 한다. */
.topic-tag:hover,
.topic-tag:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ── 상세 본문 ───────────────────────────────────────────── */
.detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-8);
    padding: var(--space-8) var(--gutter) var(--space-9);
    align-items: start;
}

/* 본문 속 링크.
   긴 주소가 한 덩어리로 붙어 있으면 모바일에서 가로 스크롤이 생긴다.
   anywhere 를 줘야 한글 문장 사이의 URL 도 알아서 끊긴다. */
.faq__a a,
.prose a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
    transition: opacity var(--duration) var(--ease);
}

.faq__a a:hover,
.prose a:hover { opacity: 0.7; }

.prose-block {
    padding-bottom: var(--space-7);
    margin-bottom: var(--space-7);
    border-bottom: 1px solid var(--color-light-gray);
}

.prose-block:last-child { border-bottom: 0; }

/* 제목과 '전체 보기' 를 한 줄에 놓는다. */
.prose-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.prose-block__head .prose-block__title { margin-bottom: var(--space-5); }

/* 구역 제목 위에 포인트 컬러 짧은 선을 둔다.
   한 상세페이지에 제목이 열한 개까지 나온다. 그걸 전부 빨갛게 하면
   화면이 온통 포인트 컬러가 되고, 그러면 표지의 색과 싸운다.
   선은 '여기서 새 구역이 시작한다' 만 말하고 글자는 먹색으로 남는다. */
.prose-block__title {
    position: relative;
    padding-top: var(--space-4);
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-5);
}

.prose-block__title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-accent);
}

.prose-block__empty {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-4);
}

/* 읽는 글의 폭은 한 곳에서 정한다.
   한글 본문은 한 줄 35~45자가 편하다. 그보다 길면 다음 줄 첫 글자를 놓친다.
   도서 상세 본문이 56자까지 늘어나 있었다. */
.prose {
    max-width: var(--measure-body);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

/* 목차는 '읽는 글' 이 아니라 '훑는 목록' 이다.
   .prose 의 720px 읽기 폭은 긴 문장이 한 줄에 너무 길어지지 않게 하려는
   것인데, 목차는 줄마다 짧아서 그 제한이 필요 없다. 오히려 옆의 추천사·
   미리 읽어보기 상자(870px)보다 좁아 혼자 덜 만든 것처럼 보였다. */
.prose--toc {
    max-width: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: var(--space-5);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.check-list { display: grid; gap: var(--space-3); }

.check-list li {
    position: relative;
    padding-left: var(--space-6);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand);
}

.author-brief {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.author-brief__photo {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text-subtle);
}

.author-brief__photo img { width: 100%; height: 100%; object-fit: cover; }

.author-brief__name {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-1);
}

.author-brief__name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.author-brief__job {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.author-brief__bio {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

.link-list { display: grid; gap: var(--space-1); }

.link-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius);
    transition: border-color var(--duration-fast) var(--ease),
                background-color var(--duration-fast) var(--ease);
}

/* 작가 카드와 같은 방식 — 테두리와 바탕이 함께 바뀐다.
   한 화면에서 어떤 상자는 면이 바뀌고 어떤 상자는 선만 바뀌면 그게 더 어색하다. */
.link-list a:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.link-list__type {
    flex: 0 0 auto;
    font-size: var(--text-2xs);
    padding: 2px 8px;
    background: var(--color-light-gray);
    border-radius: 999px;
    color: var(--color-text-muted);
}

/* 사진도 설명도 없이 제목만 있는 한 줄. 16px 이다.
   14px 였다가 20px 로 올렸는데, 폭 1232px 짜리 줄에 20px 굵은 글씨가
   가로지르니 목록이 아니라 제목처럼 읽혔다. 작가 화면에서는 위의
   저서 카드(16px)보다 아래 콘텐츠 줄이 커 보이기까지 했다.
   사진과 설명을 거느린 카드는 20px, 제목만 있는 줄은 16px 이다. */
.link-list__title {
    flex: 1;
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    min-width: 0;
    word-break: keep-all;
}

.link-list__date {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.errata { margin-bottom: var(--space-5); }

/* 정오 한 줄: 쪽 · 틀린 말 → 고친 말.
   틀린 말 아래에 고친 말을 쌓아 두었더니 두 말이 위아래로 떨어져,
   어디가 어떻게 달라졌는지 눈으로 맞대 보기 어려웠다.
   화살표에 제 칸을 주어 여러 줄일 때 고친 말들이 세로로 나란히 선다. */
.errata__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 1.5rem minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
}

.errata__page {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.errata__wrong {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: line-through;
    word-break: keep-all;
}

.errata__arrow {
    justify-self: center;
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.errata__right {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    word-break: keep-all;
}

/* 덧말은 쪽 칸을 비우고 아래에 붙는다 — 고친 말 아래가 제자리다. */
.errata__note {
    grid-column: 2 / -1;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* ── 구매 패널 (EDITION) ─────────────────────────────────
   본문 옆에 세워 두고 스크롤을 따라오게 한다. 상세페이지에서 가장 많이
   눌리는 것이 서점 버튼인데, 예전처럼 표지 옆에만 두면 본문을 읽는 동안
   화면 밖으로 사라진다.
   판형이 늘어나면 이 안에 세로로 쌓인다. 전자책이 추가돼도 구조가 그대로다. */
.buy-panel {
    position: sticky;
    top: 5.5rem;                      /* sticky 헤더(약 72px) 아래 */
    padding-top: var(--space-4);
    padding-bottom: var(--space-5);
    border-top: 2px solid var(--color-black);
    margin-bottom: var(--space-6);

    /* 배경이 없으면 아래로 스크롤할 때 '저자의 다른 책' 이 버튼 사이로 비쳐 보인다.
       고정되어 떠 있는 요소는 제 배경을 가져야 한다. */
    background: var(--color-white);
}

.buy-panel__label { margin-bottom: var(--space-5); }

.buy-edition + .buy-edition {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.buy-edition__format {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
}

.buy-edition__badge {
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border-strong, var(--color-border));
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

/* 이름과 값을 양 끝으로 벌린다. 값이 오른쪽에 모여야 눈으로 훑기 쉽다. */
.buy-edition__specs { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }

.buy-edition__specs > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    font-size: var(--text-sm);
}

.buy-edition__specs dt { color: var(--color-text-muted); white-space: nowrap; }
.buy-edition__specs dd { text-align: right; }

.buy-edition__stores { display: grid; gap: var(--space-2); }

.buy-store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-brand);
    color: var(--color-brand-contrast);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-align: center;
    transition: background-color var(--duration) var(--ease);
}

.buy-store span { opacity: 0.7; }
.buy-store:hover { background: var(--color-accent); }

/* 아직 살 수 없는 판형. 서점 단추가 놓일 자리에 옅은 회색 칸을 둔다.
   글자만 덩그러니 두면 위의 사양 목록에 딸린 한 줄로 읽혀, '이 판형은
   지금 살 수 없다' 는 말이 눈에 걸리지 않는다. */
.buy-edition__note {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-alt);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

/* 절판 판형은 사양만 남기고 눌러 둔다. 지우지는 않는다.
   "이 책이 몇 년에 몇 쪽으로 나왔나" 는 절판된 뒤에도 찾는 정보다. */
.buy-edition--gone .buy-edition__format,
.buy-edition--gone .buy-edition__specs { opacity: 0.55; }

.side-block {
    padding: var(--space-5);
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.side-block__title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
}

.mini-books { display: grid; gap: var(--space-3); }

.mini-books a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.mini-books img {
    flex: 0 0 56px;
    width: 56px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-light-gray);
    box-shadow: var(--cover-edge);
}

/* 본문 아래로 옮긴 관련 도서. 사이드보다 폭이 넓으니 가로로 늘어놓는다. */
.mini-books--row {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.mini-books a:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ── 정오표 게시판 ───────────────────────────────────────
   책 한 권이 한 줄이고, 누르면 그 책의 정오 내용이 열린다.
   전부 펼쳐 두면 자기 책을 찾는 데 한참 걸린다. details 라서 JS 가 필요 없다. */
.errata-list { display: grid; gap: var(--space-3); }

.errata-book {
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.errata-book__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
}

.errata-book__head::-webkit-details-marker { display: none; }

/* 자료실 줄의 표지와 같은 크기(56x80). 48x68 은 제목 20px 옆에서 너무
   작아 보였고, 같은 자리를 하는 두 목록이 표지 크기만 달랐다. */
.errata-book__cover {
    flex: 0 0 56px;
    width: 56px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-light-gray);
    box-shadow: var(--cover-edge);
}

.errata-book__cover img { width: 100%; height: 100%; object-fit: cover; }

.errata-book__title {
    flex: 1 1 auto;
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    word-break: keep-all;
}

/* 열림 표시. 세모 대신 십자와 빼기로 FAQ 와 같은 인상을 준다. */
.errata-book__toggle {
    flex-shrink: 0;
    font-size: var(--text-h3);
    font-weight: var(--weight-normal);
    color: var(--color-text-subtle);
}

.errata-book__toggle::before { content: "+"; }
.errata-book[open] .errata-book__toggle::before { content: "−"; }

.errata-book[open] .errata-book__head { border-bottom: 1px solid var(--color-light-gray); }

.errata-book .errata { padding: var(--space-5); }

.errata__edition {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--color-text-subtle);
}

.errata-book__link {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--text-sm);
}

.errata-book__link a { color: var(--color-accent); }
.errata-book__link a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 제보는 정오표를 다 훑어본 뒤에 권한다. */
.errata-report {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.errata-report p {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
}

.empty-state__sub {
    max-width: 46ch;
    margin: var(--space-3) auto 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* ── 안내 바로가기 ───────────────────────────────────────
   NOTICE 는 답을 찾으러 온 사람의 자리다. 무엇이 어디 있는지 먼저 보여준다. */
/* ── 안내 탭 ─────────────────────────────────────────────
   다섯 카드는 탭이다. 눌러도 페이지를 떠나지 않고 아래 내용만 바뀐다.
   그러니 아래로 내려가도 계속 보여야 한다 — 탭이 화면 밖으로 사라지면
   다른 묶음으로 넘어가려고 다시 맨 위까지 올라가야 한다.
   그래서 화살표 줄을 없애고 키를 절반으로 줄여 머리글 아래에 붙여 둔다. */
.notice-links {
    position: sticky;
    top: var(--header-height);
    z-index: 20;
    display: grid;
    /* 160px 이면 넷이 한 줄에 남는다. 180px 로 두었더니 800px 안팎에서만
       넷째가 아래로 떨어져, 줄 높이가 갑자기 두 배가 되었다. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);

    /* 머리글이 아래에 남긴 32px 를 지우고, 이 줄이 제 위아래 여백을 직접
       똑같이 갖는다. 그러지 않으면 위는 32+24, 아래는 24 가 되어 카드가
       띠 안에서 아래로 처져 보인다. */
    /* 머리글이 남긴 32px 중 24px 만 지운다. 그래야 카드 윗선이 다른
       페이지의 첫 내용과 같은 32px 자리에 온다(8 + 제 여백 24). */
    margin-top: calc(var(--space-5) * -1);
    padding: var(--space-5) 0;
    margin-bottom: var(--space-6);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

/* 탭 넷은 바깥 격자에 그대로 놓이되, '문의하기'(페이지를 떠나는 링크)와
   한 묶음으로 읽히지는 않는다. */
.notice-links__group { display: contents; }

.notice-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease),
                background-color var(--duration) var(--ease);
}

.notice-link:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }

.notice-link.is-active {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.notice-link.is-active .notice-link__label { color: var(--color-accent); }

.notice-link__label {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    word-break: keep-all;
}

.notice-link__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    word-break: keep-all;
}

/* 건수는 적지 않는다. 1건·2건 같은 숫자가 나란히 보이면
   내용보다 '아직 별로 없구나' 가 먼저 읽힌다. */

/* 책 고르개. 친 글자에 맞는 책이 그 자리에 펼쳐진다.
   고르개를 열어야 보이면 걸러 준 보람이 없다. */
.combo { position: relative; }

.combo__list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: var(--space-1);
    padding: var(--space-1);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(23, 23, 23, 0.12);
}

.combo__item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    text-align: left;
    color: var(--color-text);
    word-break: keep-all;
}

.combo__item:hover,
.combo__item.is-here,
.combo__item:focus-visible {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    outline: none;
}

/* 오탈자 제보 머리말. 폼 바로 위에 놓이는 글이라 본문처럼 읽히게 둔다. */
.report-lead {
    margin-bottom: var(--space-6);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    word-break: keep-all;
}

.report-lead p + p { margin-top: var(--space-3); }

/* 꼬리말은 선 없이 사이만 띄운다.

   정오표도 자주 묻는 질문도 마지막 항목이 이미 아래 테두리로 끝난다.
   거기서 조금 떨어진 곳에 선을 하나 더 그으면 두 줄이 나란히 뜬다.
   특히 항목이 하나뿐일 때는 그 선이 허공에 뜬 것처럼 보인다.

   글자가 작고 흐려 이미 꼬리말로 읽힌다. 선이 없어도 갈린다. */
.notice-panel__foot {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.notice-panel__foot a {
    margin-left: var(--space-2);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
}

/* ── 자료실 ──────────────────────────────────────────────
   표지를 작게 붙여 어느 책의 자료인지 한눈에 알게 한다.
   자료 이름만 늘어놓으면 '이게 무슨 책 부록이지' 를 매번 눌러 봐야 한다. */
.resource-list { display: grid; gap: var(--space-4); }

.resource {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.resource__cover { flex: 0 0 56px; }

.resource__cover img {
    width: 56px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-light-gray);
    box-shadow: var(--cover-edge);
}

.resource__body { flex: 1 1 auto; min-width: 0; }

/* 항목 제목은 어디서나 같은 크기다.
   안내 묶음에서 공지 카드와 자주 묻는 질문은 20px 인데 자료와 정오표만
   16px 이라, 탭만 바꿔도 제목이 커졌다 작아졌다 했다. 같은 자리에서
   같은 일을 하는 글자다. */
.resource__title {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    margin-bottom: var(--space-2);
    word-break: keep-all;
}

/* 설명은 두 줄까지 보이고, 긴 것은 눌러서 펼친다.
   자료실 설명 칸에 700자짜리 안내문이 들어 있는 자료가 있는데, 그대로
   펼쳐 두면 자료 목록이 아니라 편지가 된다. 그렇다고 잘라 버리면 읽을
   길이 아예 없어진다. */
.resource__desc-box { margin-bottom: var(--space-2); }

.resource__desc-box > summary {
    cursor: pointer;
    list-style: none;
}

.resource__desc-box > summary::-webkit-details-marker { display: none; }

.resource__desc-box > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.resource__desc-box .resource__desc { margin-bottom: 0; }

/* 펼치면 자른 곳이 풀린다. */
.resource__desc-box[open] .resource__desc { -webkit-line-clamp: unset; }

.resource__more {
    display: inline-block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
}

/* 두 줄 안에 다 들어간 글은 여닫이를 거둔다. 눌러도 나올 것이 없다. */
.resource__desc-box.is-short > summary { cursor: default; }
.resource__desc-box.is-short .resource__more { display: none; }

/* 공지로 잇는 줄. 여닫이 대신 이쪽이 나오는 자료도 있다. */
.resource__link {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.resource__link a { color: var(--color-accent); }

.resource__more::after { content: "더 보기 ↓"; }
.resource__desc-box[open] .resource__more::after { content: "접기 ↑"; }

.resource__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-2);
}

.resource__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.resource__meta a { text-decoration: underline; text-underline-offset: 3px; }
.resource__meta a:hover { color: var(--color-accent); }

.resource__action { flex-shrink: 0; }

/* ── 자료 띠 ─────────────────────────────────────────────
   책에서 이어지는 무료 자료를 알리는 자리. 표지 · 글 · 단추 한 줄이다.
   바닥색을 옅게 깔아 앞뒤 구역과 갈라 놓되, 바로 아래 검은 CTA 와
   힘을 다투지 않도록 단추 하나만 둔다. */
.promo { background: var(--color-accent-soft); }

.promo__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.promo__cover { flex: 0 0 auto; }

.promo__cover img {
    width: 120px;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--cover-edge);
}

.promo__body { flex: 1 1 auto; min-width: 0; }

.promo__title {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin-top: var(--space-2);
    word-break: keep-all;
}

.promo__desc {
    margin-top: var(--space-3);
    font-size: var(--text-body);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    word-break: keep-all;
}

/* 어느 책에서 나왔는지. 이 한 줄이 '무료 배포' 를 '이 책의 도구' 로 바꾼다. */
.promo__from {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}

.promo__from a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.promo__from a:hover { color: var(--color-accent); }

.promo__action { flex: 0 0 auto; }

/* ── 푸터 ────────────────────────────────────────────────── */
/* ── 출판사 소개 ─────────────────────────────────────────
   '어떤 출판사인가' 에 네 걸음으로 답하는 화면.
   왜 → 어떻게 → 무엇을 → 누구와. 각 걸음은 왼쪽에 제목, 오른쪽에 설명이라
   훑어 내려가면 제목만으로도 줄거리가 잡힌다. */
.about-hero {
    padding: var(--space-9) 0 0;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.about-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

.about-hero__title {
    font-size: var(--text-hero);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    letter-spacing: var(--tracking-tight);
    word-break: keep-all;
}

.about-hero__aside { padding-top: var(--space-6); }

.about-hero__lead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    word-break: keep-all;
}

/* 왼쪽 선 하나로 '이건 우리가 하는 약속' 이라고 표시한다. */
.about-hero__quote {
    margin-top: var(--space-5);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-relaxed);
    word-break: keep-all;
}

/* 이름 세 조각. 읽는 글이 아니라 바탕이라 아주 흐리게 깐다. */
.about-mark {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
    font-size: clamp(3rem, 11vw, 9rem);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: rgba(23, 23, 23, 0.08);
    user-select: none;
}

.about-mark__and {
    font-size: clamp(1rem, 2.2vw, 1.75rem);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
}

/* ── 왜 ─────────────────────────────────────────────────
   검은 바탕. 홈페이지에서 검은 구역은 여기와 맨 아래 CTA 뿐이라,
   '이 출판사가 무엇을 더하는 곳인가' 한 대목만 또렷하게 남는다. */
.about-why {
    background: var(--color-black);
    color: var(--color-white);
}

/* 먹색 위의 작은 라벨. 강조색(#b93f36)은 검정 위에서 3.27:1 이라 글자로
   쓸 수 없다. 그렇다고 새 색을 만들지는 않는다 — 강조색의 옅은 짝인
   accent-soft 를 그대로 쓴다. 이미 이 홈페이지의 색이고 대비도 넉넉하다. */
.eyebrow--invert { color: var(--color-accent-soft); }

.about-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

.about-split__title {
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    letter-spacing: var(--tracking-tight);
    word-break: keep-all;
}

.about-split__title--dark { color: var(--color-text); }

.about-split__text {
    padding-top: var(--space-3);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.72);
    word-break: keep-all;
}

.about-split__text.prose { color: var(--color-text-muted); }
.about-split__text.prose p + p { margin-top: var(--space-4); }

/* 회사 이름을 풀어 쓴 식: 저자의 지식 + 우리가 더하는 것 = 독자가 쓰는 지식 */
.about-sum {
    display: grid;
    /* 셋으로 고르게 나눈다. 아래 세 기둥(01·02·03)과 같은 짜임이라
       왼쪽 끝과 오른쪽 끝이 나란히 선다. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    margin-top: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.about-sum__cell { padding: var(--space-5) var(--space-4); }

.about-sum__cell--result {
    background: var(--color-accent);
    margin: -1px 0;
}

.about-sum__label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-2);
}

.about-sum__cell--result .about-sum__label { color: rgba(255, 255, 255, 0.85); }

.about-sum__value {
    display: flex;
    align-items: baseline;
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    word-break: keep-all;
}

/* 부호는 제 항과 다음 항 사이 한가운데 선다.
   글자에 바짝 붙이면 왼쪽 항에만 달라붙고, 칸 경계에 두면 오른쪽 항에만
   붙는다. 남은 자리를 다 차지하게 하고 그 안에서 가운데로 보낸다 —
   글자 길이가 달라져도 늘 가운데다. */
.about-sum__sign {
    flex: 1;
    text-align: center;
    font-weight: var(--weight-normal);
    color: rgba(255, 255, 255, 0.4);
}

.about-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7);
    margin-top: var(--space-8);
}

.about-step { padding-left: var(--space-5); border-left: 1px solid rgba(255, 255, 255, 0.2); }
.about-steps > .about-step:first-child { padding-left: 0; border-left: 0; }

.about-step__num {
    display: block;
    margin-bottom: var(--space-5);
    font-size: var(--text-display);
    font-weight: var(--weight-normal);
    color: rgba(255, 255, 255, 0.38);
    line-height: 1;
}

.about-step__title {
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
    word-break: keep-all;
}

.about-step__text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.72);
    word-break: keep-all;
}

/* 이 화면에서 가장 하고 싶은 한 마디. */
.about-pull {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    letter-spacing: var(--tracking-tight);
    word-break: keep-all;
}

/* ── 무엇을 ──────────────────────────────────────────── */
.about-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.about-check {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.about-check__num {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: var(--tracking-tight);
}

/* 번호와 제목 사이를 넉넉히 띄워, 세 물음이 하나씩 서 있게 한다. */
.about-check__title {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    word-break: keep-all;
}

.about-check__text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    word-break: keep-all;
}

/* ── 작가 알약 ───────────────────────────────────────── */
.author-chip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.author-chip__name { font-weight: var(--weight-semibold); }

.author-chip__role {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* ── 검색 ────────────────────────────────────────────────
   머리 줄의 돋보기. 메뉴 일곱과 단추로 이미 꽉 찬 줄이라 아이콘 하나만 둔다. */
.site-header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    color: var(--color-text-muted);
    transition: color var(--duration-fast) var(--ease),
                background-color var(--duration-fast) var(--ease);
}

.site-header__search:hover {
    color: var(--color-accent);
    background: var(--color-surface-alt);
}

.search-form {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.search-form__input { flex: 1 1 auto; }

.search-note {
    margin-bottom: var(--space-6);
    color: var(--color-text-muted);
}

.search-note strong { color: var(--color-text); }

.search-elsewhere {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.site-footer {
    padding: var(--space-8) 0 var(--space-7);
    background: var(--color-black);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
}

.site-footer__logo {
    height: 28px;
    width: auto;
    filter: invert(1);
    margin-bottom: var(--space-3);
}

.site-footer__slogan {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.5);
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}

.site-footer__social a {
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--duration) var(--ease);
}

.site-footer__social a:hover { color: var(--color-white); }
.site-footer__social span { margin-left: 2px; opacity: 0.6; }

.site-footer__nav {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    align-items: flex-start;
}

.site-footer__nav a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

.site-footer__nav a:hover { color: var(--color-white); }

.site-footer__info {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.45);
}

.site-footer__copy { margin-left: auto; }

/* ── 오류 화면 ───────────────────────────────────────────── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-10) var(--gutter);
}

.error-page__code {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-4);
}

.error-page__title { font-size: var(--text-h1); margin-bottom: var(--space-4); }

.error-page__message {
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    max-width: 40ch;
}

/* ── 태블릿 ──────────────────────────────────────────────── */


/* ── 모바일 ──────────────────────────────────────────────── */


/* ── PHASE 4 추가 화면 ───────────────────────────────────── */

.container--narrow { max-width: var(--container-narrow); }

/* 목록 페이지는 콘텐츠가 끝나면 곧바로 푸터가 붙는다.
   CTA 로 끝나는 페이지와 달리 숨 쉴 여백이 필요하다. */
.page-body { padding-bottom: var(--space-9); }

/* 머리글과 첫 내용 사이는 어느 페이지에서나 32px 이다.
   목록 페이지는 .page-body 를 써서 머리글의 아래 여백 32px 만 받는데,
   출간 안내와 출판사 소개는 .section 으로 시작해 제 윗여백 64px 을 더했다.
   같은 자리인데 한쪽만 세 배로 벌어져 있었다.
   바닥색이 있는 구역(--alt)은 그대로 둔다. 그쪽은 여백이 아니라 띠의 두께다. */
.page-head + .section:not(.section--alt) { padding-top: 0; }

/* 넓은 머리글도 아래 여백은 같은 32px 이다.
   64px 을 따로 준 적이 있었는데, 그러면 출간 안내·출판사 소개만 설명(또는
   버튼) 아래가 두 배로 벌어져 다른 페이지와 나란히 놓고 보면 어긋난다.
   제목 줄간격만 넓은 머리글의 몫으로 남긴다. */
.page-head--wide .page-head__title { line-height: 1.25; }

.page-head__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

.section__note {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
}


.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-7);
}

/* 쪽 번호. 지금 쪽은 검게 채워 어디에 있는지 한눈에 보이게 한다. */
.pager__nums {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
}

.pager__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

a.pager__num:hover { background: var(--color-surface-alt); color: var(--color-text); }

.pager__num--here {
    background: var(--color-black);
    color: var(--color-white);
    font-weight: var(--weight-semibold);
}

.pager__current {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
}

.author-grid--list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.author-card__book {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* 아래 여백을 따로 두지 않는다. 감싸는 회색 띠(.detail-head)가
   위아래로 48px 씩 이미 갖고 있어서, 여기에 48px 을 더하면
   사진 위는 48px 인데 아래만 97px 이 된다 — 사진이 위로 붙어 보였다. */
.author-head {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
}

/* 작가 상세에서만 사각형이다. 여기서는 사진이 크게 들어가는데 원형으로
   자르면 어깨와 배경까지 잘려 인물 사진이 상한다.
   목록 카드와 썸네일은 작아서 원형이 더 정돈돼 보이므로 그대로 둔다. */
.author-head__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-weight: var(--weight-bold);
    color: var(--color-text-subtle);
}

.author-head__photo img { width: 100%; height: 100%; object-fit: cover; }

.author-head__name {
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-2);
}

.author-head__job {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.author-head__bio {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-brand);
    margin-bottom: var(--space-4);
}

/* ── 작가 채널 링크 ────────────────────────────────────
   '외부 링크' 하나가 아니라 '홈페이지' '인스타그램' 처럼 어디로 가는지 적어 둔다.

   바로 위 주제 꼬리표와 일부러 다르게 그린다. 꼬리표는 흰 알약이고 이것은
   각진 먹색 단추다. 꼬리표는 사이트 안으로 들어가지만 이것은 밖으로 나간다 —
   가는 곳이 다르면 생김새도 달라야 누르기 전에 알 수 있다. */
.author-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.author-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    /* 얇게 둔다. 주제 꼬리표(40px)보다 낮아야 '읽는 것' 이 아니라
       '누르는 것' 으로 보인다. 위에 이미 세 덩이가 쌓여 있는 자리다. */
    padding: var(--space-1) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--color-black);
    font-size: var(--text-xs);
    color: var(--color-white);
    transition: background-color var(--duration-fast) var(--ease);
}

/* 마우스를 올리면 포인트 컬러가 된다. 흰 글씨 위 포인트 컬러는 5.49:1 로
   읽는 데 문제가 없다 — 주요 단추(.btn--primary)와 같은 방식이다. */
.author-link:hover {
    background: var(--color-accent);
}

.detail-body--single { grid-template-columns: minmax(0, 1fr); }

/* 인사이트·공지 글 아래에 오는 구역. 본문과 같은 폭·같은 왼쪽 끝에 선다.
   글을 읽다 내려왔을 때 줄 길이가 갑자기 두 배가 되면 눈이 다시 적응해야 한다. */
.detail-body--article .detail-body__main { max-width: var(--measure-body); }

.prose-block__count {
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text-subtle);
    margin-left: var(--space-2);
}

.book-grid--author { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.insight-grid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── 갈래별 한 줄 ──────────────────────────────────────
   갈래를 고르지 않고 들어왔을 때, 시간 순으로 죽 늘어놓는 대신
   갈래마다 최근 세 건씩 보여준다. 그때그때 많이 올라온 갈래가
   화면 위를 다 차지하는 것을 막는다. */
.insight-grid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.insight-section { margin-bottom: var(--space-8); }

.insight-section:last-child { margin-bottom: 0; }

.insight-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.insight-section__title {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

.insight-section__more {
    flex: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: color var(--duration-fast) var(--ease);
}

.insight-section__more:hover { color: var(--color-accent); }

@media (max-width: 767px) {
    .insight-grid--row { grid-template-columns: 1fr; }
    .insight-section__title { font-size: var(--text-h3); }
}

.insight-card__summary {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 그림이 없는 글은 회색 네모 대신 글 종류를 크게 적어 둔다.
   빈 상자가 늘어서면 목록 전체가 미완성처럼 보인다. */
.insight-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* 이 자리는 그림이 없는 곳이다. 흰색으로 두면 '아직 안 불러왔나' 로 보인다. */
    background: var(--color-light-gray);
    box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.08);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
}

.article { padding-bottom: var(--space-7); }

/* ── 본문 옆에 관련 도서 ───────────────────────────────────
   본문 폭 720px 은 맞다(한글 한 줄 35~45자). 문제는 오른쪽 536px 이
   비어 있었다는 것이다.

   가운데로 모으는 방법은 쓰지 않는다 — 목록 페이지와 왼쪽 끝이 어긋나
   메뉴를 옮겨 다닐 때 글이 좌우로 흔들린다. 비우는 대신 채운다. */
.article__layout {
    /* 머리 띠에 붙지 않게 숨 쉴 자리를 준다. 두 칸이 같은 줄에서 시작해야
       사진 윗줄과 표지 윗줄이 맞는다. */
    padding-top: var(--space-7);
    display: grid;
    /* 옆칸은 오른쪽 끝에 붙인다.
       남은 자리를 통째로 주면(1fr) 표지 180px 오른쪽에 234px 이 비어,
       옆칸이 화면 가운데에 어정쩡하게 떠 있었다. */
    grid-template-columns: var(--measure-body) auto;
    justify-content: space-between;
    gap: var(--space-7);
    align-items: start;
}

/* 관련 도서가 없는 글은 예전처럼 본문만 놓는다 */
.article__layout--wide { grid-template-columns: minmax(0, 1fr); }

.article__main { min-width: 0; }

.article__aside {
    /* 표지 240px + 안쪽 여백 48px + 세로선 2px */
    width: 340px;
    position: sticky;
    /* 머리 메뉴가 화면에 고정돼 있다. 48px 만 내리면 메뉴(77px) 아래로
       파고들어 표지 윗부분이 잘린다. */
    top: calc(var(--header-height) + var(--space-4));
    /* 여기서 굴리지 않는다.
       예전에는 max-height 와 overflow-y:auto 를 두어 옆칸 안에서 굴리게 했는데,
       창 높이가 옆칸 높이와 엇비슷해지는 순간(대략 780px 아래)부터 회색 굴림막대가
       글 옆에 세로로 그어졌다. 어떤 글에서는 보이고 어떤 글에서는 안 보여
       더 눈에 걸렸다 — 옆칸 높이가 작가 직함 줄 수와 다른 책 수에 따라 달라진다.

       대신 창이 낮을 때는 붙이는 것을 그만둔다(아래 max-height 규칙).
       그러면 옆칸이 글과 함께 흘러가 아랫부분까지 닿는다. */
    padding-left: var(--space-7);
    border-left: 2px solid var(--color-border);
}

/* 창이 낮으면 붙이지 않는다. 옆칸이 화면보다 길어지면 붙어 있는 채로는
   아랫부분에 닿을 길이 없다. 그냥 글과 함께 흘려보낸다. */
@media (max-height: 800px) {
    .article__aside { position: static; }
}

/* 이름표는 '작가의 다른 책' 에만 남긴다. 표지와 얼굴은 그 자체로 무엇인지
   말하지만, 제목만 줄지어 있는 목록은 무엇의 목록인지 적어 주어야 한다. */
.article__aside-title {
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
}

.aside-book {
    display: block;
    max-width: 240px;
    margin-bottom: var(--space-5);
}

.aside-book:last-child { margin-bottom: 0; }

.aside-book__cover {
    display: block;
    aspect-ratio: 300 / 426;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-light-gray);
    box-shadow: var(--cover-edge), 0 1px 3px rgba(23, 23, 23, 0.12);
    transition: transform var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
}

.aside-book__cover img { width: 100%; height: 100%; object-fit: cover; }

.aside-book:hover .aside-book__cover {
    transform: translateY(-3px);
    box-shadow: var(--cover-edge), var(--shadow);
}

.aside-book__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    color: var(--color-text-subtle);
}

.aside-book__title {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
    word-break: keep-all;
}

.aside-book:hover .aside-book__title { color: var(--color-accent); }

.article__aside-title--second { margin-top: var(--space-6); }

/* 표지 묶음과 작가 사이를 벌린다. 예전에는 이름표가 이 자리를 만들어 줬다. */
.aside-book + .aside-author,
.aside-book__title + .aside-author { margin-top: var(--space-6); }

.aside-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.aside-author:last-child { margin-bottom: 0; }

.aside-author__photo {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    color: var(--color-text-subtle);
}

.aside-author__photo img { width: 100%; height: 100%; object-fit: cover; }

.aside-author__name {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.aside-author:hover .aside-author__name { color: var(--color-accent); }

/* 작가의 다른 책.
   처음에는 제목만 줄로 세웠는데 너무 약했다 — 회색 글씨 두 줄은 눈에 걸리지 않는다.
   작은 표지를 붙이고 작가 줄과 같은 모양으로 맞춘다. 옆칸 전체가 한 결이 된다.
   그래도 이 글이 다룬 책(180px)보다는 훨씬 작아 무엇이 주인공인지는 그대로다. */
.aside-more {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.aside-more:last-child { margin-bottom: 0; }

.aside-more__cover {
    flex: none;
    width: 44px;
    aspect-ratio: 300 / 426;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-light-gray);
    box-shadow: var(--cover-edge), 0 1px 2px rgba(23, 23, 23, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    color: var(--color-text-subtle);
    transition: transform var(--duration) var(--ease);
}

.aside-more__cover img { width: 100%; height: 100%; object-fit: cover; }

.aside-more:hover .aside-more__cover { transform: translateY(-2px); }

.aside-more__title {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
    word-break: keep-all;
    transition: color var(--duration-fast) var(--ease);
}

.aside-more:hover .aside-more__title { color: var(--color-accent); }

.aside-author__job {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    word-break: keep-all;
}

/* 좁은 화면에서는 도서가 본문 아래로 내려간다.
   그때는 세로선이 뜻을 잃으므로 위쪽 가로선으로 바꾼다. */
@media (max-width: 1199px) {
    .article__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }

    .article__aside { width: auto; }

    .article__aside {
        position: static;
        max-height: none;
        overflow: visible;
        padding-left: 0;
        padding-top: var(--space-6);
        border-left: 0;
        border-top: 1px solid var(--color-border);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-5);
    }

    .article__aside-title { flex-basis: 100%; margin-bottom: 0; }
}

/* 본문 페이지도 다른 페이지와 같은 컨테이너를 쓴다.
   여기만 760px 로 좁히고 가운데 정렬하면 왼쪽 끝이 목록 페이지와 어긋나,
   메뉴를 눌러 옮겨 다닐 때마다 글이 좌우로 흔들린다.
   대신 읽는 폭은 제목·요약·본문에 따로 걸어 한 줄이 길어지지 않게 한다. */
.article__head {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}


/* ch 은 영문 '0' 자 폭 기준이라 한글에서는 절반으로 줄어든다.
   24ch 로 잡았더니 한글 16자밖에 안 되어 제목이 엉뚱한 데서 끊겼다.
   한글 제목은 em 으로 잡는다. 20em ≈ 한글 20자. */
.article__title {
    /* 머리 부분은 훑어보는 자리라 본문보다 넓게 잡는다.
       제목이 한두 줄로 떨어져야 한 문장으로 읽힌다. */
    max-width: var(--measure-head);
    font-size: var(--text-h1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
    margin-bottom: var(--space-4);
}

.article__summary {
    max-width: var(--measure-head);
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-5);
}

.article__meta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.article__meta a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article__image {
    max-width: var(--measure-body);
    margin: 0 0 var(--space-7);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-light-gray);
}

/* ── 인터뷰 문답 ─────────────────────────────────────────
   질문도 답도 같은 글씨면 어디가 질문인지 눈으로 찾아야 한다.
   묻고 답하는 글은 그 구조가 보여야 읽힌다. */
.qa {
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.qa:last-child { border-bottom: 0; }

/* 질문은 굵게, 조금 크게, 왼쪽에 표시선. 훑을 때 질문만 눈에 걸린다. */
.qa__q {
    position: relative;
    padding-left: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.qa__q::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.35em;
    width: 3px;
    border-radius: 2px;
    background: var(--color-accent);
}

/* 답은 읽는 글이다. 줄간을 넉넉히 주고 색은 본문과 같게 둔다.
   회색으로 눌렀더니 도입부 문단보다 흐려 보였다. 인터뷰에서 정작 읽어야 할
   알맹이는 답변 쪽이다. 질문은 굵기·크기·왼쪽 선만으로도 충분히 도드라진다. */
.qa__a {
    padding-left: var(--space-4);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
}

/* 답이 여러 문단일 때. 문단 사이가 붙으면 한 덩어리로 읽힌다 */
.qa__a p { margin: 0 0 var(--space-4); }
.qa__a p:last-child { margin-bottom: 0; }

.qa__plain {
    margin-bottom: var(--space-5);
    line-height: var(--leading-relaxed);
}

/* 폭은 본문과 맞춘다. 사진만 넓으면 글의 기준선이 흐트러진다.
   머리 띠와의 사이는 .article__layout 이 갖는다 — 사진에만 주면
   옆칸의 표지가 사진보다 48px 위에서 시작해 윗줄이 어긋난다. */

/* 영상·기사의 출처. 본문을 다 읽은 뒤 밝힌다.
   단추 바로 아래 두었더니 본문 첫 줄과 붙어, 글을 읽기 전에
   먼저 걸렸다. 밝히는 것이 목적이지 눈에 띄는 것이 목적이 아니다. */
.article__source {
    margin: var(--space-6) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.article__source a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article__source a:hover { color: var(--color-accent); }

.article__video { margin-bottom: var(--space-6); }
.article__video iframe, .article__video video { max-width: var(--measure-body); }


.article__topics { margin-top: var(--space-6); }

.type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    /* 카드마다 제 높이를 갖게 한다. 기본값(stretch)이면 셋이 같은 높이로 묶여,
       하나를 펴는 순간 나머지 둘도 같이 늘어나 속이 텅 빈 채로 길어졌다. */
    align-items: start;
}

/* 흰 바탕 위의 흰 상자다. 카드용 테두리를 써야 가장자리가 보인다. */
.type-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

/* 번호가 갈래의 순서를 말한다. 포인트 컬러 짧은 선이 하던 일을 번호가 하므로
   선은 두지 않는다 — 둘 다 두면 같은 말을 두 번 하게 된다. */
.type-card__no {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-2);
}

.type-card__name {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-3);
}

.type-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

/* 세 갈래를 견줄 때 사람이 실제로 보는 한 줄이다.
   가장 쓸모 있는 말이 가장 작은 회색 글씨였다.
   맨 아래로 밀어 세 카드의 이 줄이 같은 높이에서 만나게 한다. */
/* 핵심 한 줄과 펼침 단추를 한 줄에 놓는다.
   단추를 아래에 따로 두면 카드가 한 줄 더 길어지는데, 그 자리가 이미 비어 있었다. */
.type-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-light-gray);
}

.type-card__point {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    word-break: keep-all;
}

/* ── 눌러서 펴 보는 자세한 내용 ────────────────────────── */
.type-card__head {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    /* 브라우저가 붙이는 삼각형은 지운다. '자세히 보기' 가 그 일을 한다. */
    list-style: none;
}

.type-card__head::-webkit-details-marker { display: none; }

/* 상자를 두르지 않는다.
   카드 머리 전체가 이미 눌리는 자리다. 상자를 그리면 '여기만 눌러야 한다' 는
   뜻이 되어 실제와 어긋난다. 게다가 이 페이지의 먹색 단추는
   '원고 투고하기' 하나여야 한다 — 카드마다 단추를 놓으면 그것이 흐려진다.
   화살표가 '펼친다' 는 것을 말해 주므로 글자만으로 충분하다. */
.type-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: color var(--duration-fast) var(--ease);
}

.type-card__more::after {
    content: '↓';
    display: inline-block;
    transition: transform var(--duration) var(--ease);
}

.type-card__head:hover .type-card__more { color: var(--color-accent); }

.type-card[open] .type-card__more::after { transform: rotate(180deg); }

.type-detail {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-light-gray);
}

/* 줄 사이에 가는 선을 둔다. 여섯 문장을 그냥 쌓아 두면 한 덩어리로 보여
   어디까지가 한 항목인지 눈으로 끊어 읽어야 했다. */
.type-detail__row {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.type-detail__row:first-child { border-top: 0; padding-top: 0; }

.type-detail__row:last-child { padding-bottom: 0; }

/* 항목 이름과 값을 위아래로 쌓는다. 카드가 좁아 좌우로 놓으면
   값이 두세 글자마다 접힌다. */
/* 항목 이름은 굵게, 조금 진하게. 여섯 줄을 훑을 때 걸리는 것이 이 이름들이다.
   그래도 값보다 작게 둔다(13px 대 14px) — 이름은 이정표이고 값이 내용이다. */
.type-detail__row dt {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.type-detail__row dd {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
    word-break: keep-all;
}



/* 그 갈래에만 해당하는 맺음말. 항목들과 무게가 달라야 한다 —
   위는 조건을 늘어놓은 것이고, 이건 지키겠다고 적은 약속이다. */
.type-detail__note {
    margin-top: var(--space-5);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    word-break: keep-all;
}

/* 출간 과정.
   두 줄에 셋씩. 여섯 단계를 두 열로 놓으면 한 단계가 화면을 가로질러
   설명을 한 줄 넘게 적을 수 없었다 — 그래서 단계마다 제목 한 줄뿐이었다.
   칸을 좁히면 설명이 세 줄까지 들어간다. */
.process {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-7);
}

/* 줄은 칸마다 긋는다. 한 줄을 통째로 그으면 열 사이 빈 곳까지 이어져,
   여섯 칸이 아니라 두 덩어리로 보인다. */
.process__item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* 번호는 동그라미 안에. 흐린 큰 숫자로 두면 제목과 크기를 다투는데,
   번호는 차례를 보여줄 뿐 읽을 것이 아니다. */
.process__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.process__body { min-width: 0; }

.process__title {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    word-break: keep-all;
}

/* 제목만으로는 무엇을 하는 단계인지 알기 어렵다. 한마디를 덧붙이되
   본문보다 작고 붉게 두어, 읽는 차례가 제목 → 한마디 → 설명이 되게 한다. */
.process__point {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
    letter-spacing: var(--tracking-tight);
    word-break: keep-all;
}

.process__text {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    word-break: keep-all;
}

.faq__item { border-bottom: 1px solid var(--color-border); }

.faq__q {
    padding: var(--space-5) var(--space-6) var(--space-5) 0;
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    position: relative;
    list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-h2);
    font-weight: var(--weight-normal);
    color: var(--color-text-subtle);
}

.faq__item[open] .faq__q::after { content: "−"; }

.faq__a {
    /* 한 줄이 너무 길면 읽기 어렵다. 컨테이너는 넓게 두고 문단만 좁힌다. */
    max-width: 68ch;
    padding: 0 var(--space-6) var(--space-5) 0;
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

.stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    margin: 0;
    text-align: center;
}

.stat-row__item {
    position: relative;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration) var(--ease),
                background-color var(--duration) var(--ease);
}

/* 카드 전체를 누를 수 있게 한다. dl 안에서는 dt·dd 를 a 로 감쌀 수 없어,
   dd 안의 링크를 카드 넓이만큼 늘여 덮는다. */
.stat-row__item--link dd a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.stat-row__item--link:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

.stat-row__item--link:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.stat-row__item dt {
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-3);
}

.stat-row__item dd {
    margin: 0;
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}

.stat-row__item dd span {
    font-size: var(--text-h3);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
    margin-left: var(--space-1);
}

.prose--lead p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-5);
}

.prose--lead p:first-child {
    font-weight: var(--weight-semibold);
    color: var(--color-black);
}

.value-list { display: grid; gap: var(--space-5); }

.value-list li {
    padding-left: var(--space-5);
    border-left: 3px solid var(--color-brand);
}

.value-list h3 {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}

.value-list p {
    font-size: var(--text-body);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

.author-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.author-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-sm);
    min-height: 44px;
    transition: border-color var(--duration-fast) var(--ease);
    box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.author-chip:hover { border-color: var(--color-accent); }

.author-chip img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.contact { padding-bottom: var(--space-9); }
.contact-form { margin-top: var(--space-6); }
.contact-form fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.contact-form legend { padding: 0; }

/* 봇만 보는 칸. 화면 밖으로 밀어낸다. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact__book {
    padding: var(--space-4);
    background: var(--color-surface-alt);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
}

.privacy {
    padding: var(--space-5);
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
}

.privacy__detail { margin-top: var(--space-3); }

.privacy__detail summary {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    cursor: pointer;
}

.privacy__body {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

.privacy__body p { margin-bottom: var(--space-2); }
.privacy__body strong { color: var(--color-black); margin-right: var(--space-2); }

.contact__actions { margin-top: var(--space-6); }
.contact__actions .btn { width: 100%; }

.notice-box {
    padding: var(--space-5);
    background: var(--color-success-bg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-success);
}

.notice-box__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }

.contact__direct {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.contact__direct-label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-subtle);
    margin-bottom: var(--space-2);
}

.contact__direct a { text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────────────────────────────────────────
   반응형
   미디어쿼리는 파일 맨 끝에 모아 둔다.
   기본 규칙을 뒤에 이어붙이면 같은 특이도라도 나중 것이 이겨서
   반응형이 조용히 무력화된다. 실제로 작가 목록이 그렇게 깨졌었다.
   ───────────────────────────────────────────────────────────── */

/* ── 태블릿 ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 로고 + 메뉴 5개 + 버튼이 768px 에 들어가지 않아 버튼이 화면 밖으로 밀렸다.
       로고와 메뉴 여백을 줄여 한 줄에 담는다. */
    .site-header__inner { gap: var(--space-3); }
    .site-header__logo img { height: 26px; }
    .site-nav { min-width: 0; }
    /* 메뉴 5개 + 로고 + 버튼이 한 줄에 들어가야 한다.
       여기서는 글자를 키우지 않는다. 예전에 버튼이 화면 밖으로 밀린 적이 있다. */
    .site-nav__link { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
    .site-header__actions { flex-shrink: 0; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .feature { grid-template-columns: 300px minmax(0, 1fr); }
    .detail-head__inner { grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); }

    /* 한 단으로 접히면 aside 가 본문 뒤로 가서 구매 버튼이 맨 아래로 밀린다.
       aside 의 상자를 없애(display: contents) 자식들을 직접 세운 뒤 순서를 준다.
       구매 패널은 본문 위, 관련 도서는 본문 아래. */
    /* 격자에서 쓰던 align-items: start 가 세로 흐름에서는 가로 방향이 된다.
       그대로 두면 본문이 제 내용만큼 넓어져 화면 밖으로 나간다.
       (책 속의 한 줄은 접혀 있을 때 한 줄로 두느라 줄바꿈을 막아 두었다.) */
    .detail-body { display: flex; flex-direction: column; align-items: stretch; }
    .detail-body__side { display: contents; }
    .buy-panel { order: 1; position: static; margin-bottom: var(--space-7); }
    .detail-body__main { order: 2; }
    .side-block { order: 3; }

    .site-nav { gap: 0; }
    .insight-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .type-grid { grid-template-columns: 1fr; }

    /* 좁아지면 5열은 표지가 너무 작아진다 */
    .book-grid--list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }

    /* 홈은 한 줄만 보여주는 자리다. 칸이 4개로 줄면 5번째가 혼자 남아
       줄이 비어 보이므로 그 하나는 감춘다. 전체는 '전체 …' 로 넘긴다. */
    .author-grid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .book-grid--home > *:nth-child(n + 5),
    .author-grid--home > *:nth-child(n + 5) { display: none; }
}

/* ── 모바일 ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .site-nav { display: none; }
    .site-header__toggle { display: flex; }
    .site-header__actions .btn { display: none; }
    .mobile-nav:not([hidden]) { display: flex; }

    .hero { padding: var(--space-7) 0; }
    .hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
    .hero__covers { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
    .hero__cover { transform: none !important; }
    /* 좁은 화면에서 셋을 한 줄에 두면 '함께한 작가 26명' 이 접힌다.
       세로로 쌓고, 이름과 숫자는 한 줄에 붙여 둔다. */
    .hero__stats { grid-template-columns: 1fr; padding: var(--space-2) 0; }
    .hero__stat { justify-content: space-between; padding: var(--space-3) var(--space-5); }
    .hero__stat + .hero__stat {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }
    .hero__stat dd { font-size: var(--text-h1); }

    .section { padding: var(--space-7) 0; }
    .section__title { font-size: var(--text-h2); }

    .feature { grid-template-columns: 1fr; gap: var(--space-5); }
    .feature__cover { max-width: 240px; }
    .feature__title { font-size: var(--text-h2); }

    /* 모바일은 기본 2열. Hover 가 없으므로 패널 대신 정보를 그대로 노출한다. */
    .book-grid,
    .book-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }

    /* 모바일은 2열이므로 4개가 두 줄로 딱 맞는다 */
    .book-grid--home > *:nth-child(n + 5),
    .author-grid--home > *:nth-child(n + 5) { display: none; }

    .book-card__panel { display: none; }
    .book-card__mobile-meta { display: block; margin-top: var(--space-2); }

    .book-card__mobile-meta .book-card__desc {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        line-height: 1.5;
        margin-bottom: var(--space-2);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .book-card__mobile-meta .book-card__formats span {
        border-color: var(--color-border);
        color: var(--color-text-muted);
    }

    .author-grid, .author-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

    /* 좁은 화면에서는 세로로 쌓는다. 가로로 두면 내려받기 버튼이 눌려 찌그러진다. */
    .notice-links { grid-template-columns: 1fr; }

    .resource { flex-wrap: wrap; }
    .resource__body { flex: 1 1 100%; order: 2; }
    .resource__action { order: 3; width: 100%; justify-content: center; }
    .author-card { padding: var(--space-4); }
    .author-card__photo { max-width: 140px; }

    .insight-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .steps { grid-template-columns: 1fr; }

    .detail-head__inner { grid-template-columns: 1fr; gap: var(--space-5); }
    .detail-head__cover { max-width: 200px; }
    .detail-head__title { font-size: var(--text-h2); }
    .detail-body { padding: var(--space-6) var(--gutter) var(--space-8); }
    .prose-block__title { font-size: var(--text-h3); }


    .cta__title { font-size: var(--text-h2); }
    .cta__desc { font-size: var(--text-body); }

    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__copy { margin-left: 0; }
    .book-grid--author { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insight-grid--list { grid-template-columns: 1fr; }

    .author-head { grid-template-columns: 1fr; gap: var(--space-5); text-align: center; }
    .author-head__photo { max-width: 220px; margin: 0 auto; }
    .author-head__bio { text-align: left; }
    .author-head__name { font-size: var(--text-h2); }
    .topic-tags { justify-content: center; }

    .article__title { font-size: var(--text-h2); }
    .article__summary { font-size: var(--text-body); }

    /* 좁은 화면에서는 설명을 접고 이름만 남긴다.
       옆으로 밀어 보게 해 봤더니, 창을 조금만 줄인 노트북에서도 가로 스크롤
       막대가 나타나 고장 난 것처럼 보였다. 카드를 낮추면 밀 것도 없이
       네 개가 그대로 들어간다 — 375px 에서는 두 줄, 그보다 넓으면 한 줄이다.
       설명은 처음 한 번만 필요한 안내이고, 위에 붙어 있는 줄은 얇아야 한다. */
    .notice-links { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }

    .notice-link { padding: var(--space-3) var(--space-4); }
    .notice-link__desc { display: none; }

    /* 좁은 화면에서는 쪽수를 제 줄에 올리고, 틀린 말 → 고친 말만 나란히 둔다.
       네 칸을 그대로 두면 한 칸이 두 글자 폭이 된다. */
    .errata__row { grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr); }
    .errata__page { grid-column: 1 / -1; }
    .errata__note { grid-column: 1 / -1; }

    /* 출판사 소개 — 두 칸짜리는 모두 한 줄로 내려 쌓는다. */
    .about-hero__inner,
    .about-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .about-hero__aside { padding-top: 0; }
    .about-hero__title { font-size: var(--text-h1); }
    .about-split__title { font-size: var(--text-h1); }
    .about-mark { margin-top: var(--space-6); }

    .about-sum { grid-template-columns: minmax(0, 1fr); }
    .about-sum__cell--result { margin: 0; }
    .about-sum__sign { justify-content: center; padding: 0 0 var(--space-2); }

    .about-steps,
    .about-checks { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

    .about-step { padding-left: 0; border-left: 0; }

    .about-step__num { margin-bottom: var(--space-3); font-size: var(--text-h1); }
    .about-check__title { margin-top: var(--space-5); }
    .about-pull { font-size: var(--text-h3); }

    .promo__inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
    .promo__title { font-size: var(--text-h3); }
    .promo__action { align-self: stretch; text-align: center; }

    .process { grid-template-columns: 1fr; gap: var(--space-5); }
    .stat-row { grid-template-columns: 1fr; gap: var(--space-3); }
    .stat-row__item { padding: var(--space-5); }
    .stat-row__item dd { font-size: var(--text-h1); }

    .prose--lead p { font-size: var(--text-body); }
    .faq__q { font-size: var(--text-body); }
}

/* 질문을 다 읽고도 답이 없을 때 갈 곳을 알려 준다. */
.faq-more {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.faq-more p {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
}

/* ── 주제 페이지 ─────────────────────────────────────────── */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-4);
}

.topic-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius);
    transition: border-color var(--duration-fast) var(--ease),
                background-color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
}

.topic-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    background: var(--color-accent-soft);
}

.topic-card__name {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.topic-card__count {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* 한 화면에 도서·작가·콘텐츠가 이어 나온다.
   구획 사이가 넉넉해야 어디까지가 한 묶음인지 읽힌다. */
.topic-section { margin-bottom: var(--space-9); }
.topic-section:last-child { margin-bottom: 0; }

.topic-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.topic-section__title {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
}

.topic-section__title span {
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
}

.topic-section__more {
    flex: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.topic-section__more:hover { color: var(--color-black); }

.topic-authors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.topic-author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: border-color var(--duration-fast) var(--ease);
}

.topic-author:hover { border-color: var(--color-accent); }

.topic-author__photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.topic-author__photo--empty { background: var(--color-light-gray); }

@media (max-width: 767px) {
    .topic-grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
    .topic-section__head { flex-wrap: wrap; }
}

/* ── 책 속 문장 ─────────────────────────────────────────
   책이 스스로 하는 말이라 본문과 다르게 보여야 한다.
   따옴표를 크게 두고 명조로 조판해 '인용' 이라는 것을 형태로 알린다. */
/* 표지 옆 대표 문장.
   바로 위 한 줄 소개도 왼쪽에 선이 있어서, 선만으로는 둘이 구별되지 않았다.
   여기는 선을 빼고 '책 속의 한 줄' 이라는 이름을 붙인다 —
   소개는 우리가 하는 말이고 이건 책이 하는 말이라는 것이 이름으로 갈린다.

   쪽수는 뺐다. 이 자리는 출처를 밝히는 자리가 아니라 책의 목소리를
   들려주는 자리다. 몇 쪽인지는 읽는 마음에 보탬이 되지 않는다. */
.detail-head__quote {
    margin: var(--space-5) 0 var(--space-6);
}

.detail-head__quote-label {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
}

/* 글자 크기는 바로 위 한 줄 소개와 같게 둔다.
   18px 로 키워 두었더니 표지 옆에서 이 문장만 튀어, 정작 책을 파는 말인
   한 줄 소개보다 먼저 읽혔다. 크기로 눈길을 끌 필요가 없다 —
   포인트 컬러 라벨('책 속의 한 줄')이 이미 그 일을 한다. */
.detail-head__quote blockquote {
    margin: 0;
    font-size: var(--text-md);   /* 한 줄 소개와 같은 크기 */
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    word-break: keep-all;
}

/* 책 속 문장 · 추천사.
   '미리 읽어보기' 상자와 같은 모양으로 맞춘다 — 흰 바탕, 얇은 테두리,
   포인트 컬러 라벨이 위, 글이 아래. 한 화면에 세 종류가 잇달아 나오는데
   생김새가 제각각이면 같은 책의 이야기로 안 읽힌다.

   왼쪽 굵은 선과 큰 따옴표 장식은 뺐다. 상자마다 장식이 다르면
   그 차이가 '무슨 뜻이 있나' 싶게 만드는데, 실제로는 아무 뜻도 없었다. */
.book-quote {
    margin: 0 0 var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.book-quote:last-child { margin-bottom: 0; }

/* 쪽수 또는 추천한 사람의 이름. '미리 읽어보기' 의 쪽수와 같은 모양이다. */
.book-quote__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
}

.book-quote__title {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

.book-quote__text {
    margin: var(--space-3) 0 0;
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    word-break: keep-all;
}

/* ── 미리 읽어보기 ─────────────────────────────────────
   장면이 있는 글이라 인용 카드로 그리면 카드가 문단이 된다.
   접었다 펴는 묶음으로 두어 읽고 싶은 사람만 펴 보게 한다. */
.excerpt {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
}

.excerpt:last-child { margin-bottom: 0; }

.excerpt__head {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    /* 오른쪽은 +/− 자리로 비워 둔다 */
    padding: var(--space-4) var(--space-8) var(--space-4) var(--space-5);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.excerpt__head::-webkit-details-marker { display: none; }

.excerpt__head::after {
    content: "+";
    position: absolute;
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-h3);
    font-weight: var(--weight-normal);
    line-height: 1;
    color: var(--color-text-subtle);
}

.excerpt[open] .excerpt__head::after { content: "−"; }

.excerpt__head:hover { color: var(--color-text); }

.excerpt__page {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    color: var(--color-accent);
}

/* 접혀 있을 때 첫머리를 한 줄로 보여준다. 무엇이 든 묶음인지 알아야 펼 마음이 생긴다. */
/* 쪽 번호는 머리글이라 작게 두되, 본문 첫머리는 펼쳤을 때와 같은 크기로 둔다.
   추천사와 같은 이유다 — 누른다고 글자가 커지면 안 된다. */
.excerpt__lead {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: var(--text-body);
    color: var(--color-text);
}

.excerpt[open] .excerpt__lead { display: none; }

.excerpt__body {
    padding: 0 var(--space-5) var(--space-5);
    line-height: var(--leading-relaxed);
    word-break: keep-all;
}

/* ── 필터 칩의 권수와 '없음' 표시 ─────────────────────────────
   필터가 겹치면 결과가 0인 조합이 생긴다(42가지 중 10가지였고 전부 '신간'
   이 낀 것이었다). 눌러 본 뒤에 '없습니다' 를 만나는 것보다, 누르기 전에
   몇 권인지 보이는 편이 낫다. 0인 칩은 아예 누르지 못하게 한다. */
.filters__count {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
}

.filters__item--active .filters__count { opacity: 0.75; }

/* 0인 칩. 흐리게 두되 글자는 읽히는 선(4.6:1)을 지킨다 —
   '왜 못 누르는지' 를 읽을 수 있어야 하기 때문이다. */
.filters__item--empty {
    color: var(--color-text-subtle);
    border-color: var(--color-border);
    background: var(--color-page);
    cursor: not-allowed;
}

.filters__item--empty .filters__count { opacity: 0.8; }

/* ── 긴 추천사는 접어 둔다 ────────────────────────────────────
   추천사는 남이 써 준 글이라 우리가 줄일 수 없다. 여섯 편이 각각 대여섯
   문단이면 이 구역 하나가 책 소개보다 길어져, 정작 읽어야 할 것이 뒤로 밀린다.
   이름은 늘 보이고 글만 접힌다 — 누가 추천했는지는 접어도 남아야 하기 때문이다. */
.book-quote__by {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

/* 접었다 펴는 것에는 자주 묻는 질문과 같은 +/− 를 쓴다.

   접힌 첫머리를 본문과 같은 크기·색으로 맞추고 나니 「눌러서 펼 수 있다」는
   표시가 사라졌다. 끝의 말줄임표만으로는 알 수 없다. 브라우저 기본 삼각형은
   summary 를 flex 로 두면 사라지기도 해서 믿을 수 없다.

   홈페이지 안에서 접었다 펴는 자리는 모두 같은 표시를 쓴다 —
   자주 묻는 질문 · 추천사 · 미리 읽어보기. */
.book-quote--long > summary {
    position: relative;
    padding-right: var(--space-6);
    cursor: pointer;
    list-style: none;
}

.book-quote--long > summary::-webkit-details-marker { display: none; }

.book-quote--long > summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-size: var(--text-h3);
    font-weight: var(--weight-normal);
    line-height: 1;
    color: var(--color-text-subtle);
}

.book-quote--long[open] > summary::after { content: "−"; }

/* 접혀 있을 때만 보이는 첫머리 두 줄. 펼치면 본문과 겹치므로 감춘다.

   한 줄일 때는 첫 문장이 끝나기도 전에 잘렸다 —
   "서로의 손을 꼭 잡고 도란도란 이야기 나누며, 산책하는 노부부의 모습이 …"
   여기서 멈추면 무슨 이야기인지 알 수 없어 펼 마음이 생기지 않는다.

   글자 수가 아니라 줄 수로 자른다. 화면 폭이 달라져도 늘 두 줄이다.
   -webkit-line-clamp 는 이름과 달리 크롬·사파리·파이어폭스·엣지가 모두 안다. */
.book-quote__lead {
    flex-basis: 100%;
    margin-top: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 펼친 본문과 같은 크기·색으로 둔다.
       작게 두었더니 같은 문장이 누르는 순간 커지고 검어져, 미리 읽은 두 줄이
       딴 글처럼 보였다. 접힘은 「덜 보인다」이지 「다른 글」이 아니다. */
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    /* 줄 수로 자르는 것을 모르는 옛 브라우저를 위한 빗장.
       없으면 첫머리가 통째로 펼쳐져 접은 뜻이 사라진다. */
    max-height: calc(var(--leading-relaxed) * 2em);
}

.book-quote--long[open] .book-quote__lead { display: none; }