/* ============================================================
   Wikibook V2 — 페이지별 스타일
   (카탈로그 / 도서 상세 / 블로그 / 검색 / 고정 페이지 / 폼 / 404)
   시안 wikibook-b의 인라인 스타일을 클래스로 변환.
   ============================================================ */

/* --- 페이지 공통 헤더 영역 --------------------------------- */
.wb-page-head { padding: 40px 32px 20px; border-bottom: 1px solid var(--wb-line); }
.wb-page-head__kicker { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-accent); letter-spacing: 2px; font-weight: 700; }
.wb-page-head__title { font-size: 48px; font-weight: 800; letter-spacing: -1.5px; margin: 8px 0 6px; }
.wb-page-head__desc { font-size: 14px; color: var(--wb-mute); }

.wb-archive-head { padding: 20px 32px 8px; border-bottom: 1px solid var(--wb-line); }
.wb-archive-head__row { display: flex; align-items: baseline; gap: 16px; margin-top: 12px; margin-bottom: 16px; }
.wb-archive-head__download { margin-left: auto; align-self: center; }
.wb-archive-head__title { font-size: 36px; font-weight: 800; letter-spacing: -1.2px; margin: 0; }
.wb-archive-head__count { font-family: var(--wb-mono); font-size: 13px; color: var(--wb-mute); }
/* 시리즈 페이지 소개 글 — 도서 상세 부제(.wb-book-hero__sub) 스타일 */
.wb-archive-head__intro { font-size: 16px; color: var(--wb-mute); line-height: 1.5; word-break: keep-all; margin-top: 4px; max-width: 820px; }
.wb-archive-head .wb-breadcrumb { padding: 0; border-bottom: none; }

/* --- 페이지네이션 ------------------------------------------- */
.wb-pagination {
  display: flex; justify-content: center; align-items: center; gap: 4px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--wb-line); flex-wrap: wrap;
}
.wb-pagination__btn, .wb-pagination__num {
  padding: 8px 14px; font-size: 12px; border: 1px solid var(--wb-line);
  background: #fff; color: var(--wb-ink); letter-spacing: 1px;
}
.wb-pagination__num { padding: 8px 12px; min-width: 36px; text-align: center; }
.wb-pagination__num.is-current { background: var(--wb-ink); color: #fff; border-color: var(--wb-ink); font-weight: 700; }
.wb-pagination__btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
.wb-pagination__btn:not(.is-disabled):hover, .wb-pagination__num:not(.is-current):hover { border-color: var(--wb-ink); }
.wb-pagination__ellipsis { padding: 0 6px; color: var(--wb-mute); font-size: 12px; }
.wb-pagination__count { margin-left: 16px; font-size: 11px; color: var(--wb-mute); }

/* --- 범용 탭 패널 -------------------------------------------- */
[data-tab-pane] { display: none; }
[data-tab-pane].is-active { display: block; animation: wb-fadeIn 0.2s ease; }
.wb-home-best__list[data-tab-pane].is-active { display: grid; }

/* --- 빈 결과 ------------------------------------------------- */
.wb-empty { padding: 80px 0; text-align: center; color: var(--wb-mute); }
.wb-empty__icon { font-size: 48px; margin-bottom: 16px; }
.wb-empty__title { font-size: 15px; font-weight: 600; color: var(--wb-ink); }
.wb-empty__desc { font-size: 12px; margin-top: 6px; }

/* --- 카탈로그 (전체도서/카테고리) ---------------------------- */
.wb-catalog { display: grid; grid-template-columns: 240px 1fr; gap: 0; }
.wb-catalog__sidebar { border-right: 1px solid var(--wb-line); padding: 24px 24px 40px; min-height: 70vh; }
.wb-filter-group { margin-bottom: 28px; }
.wb-filter-group__label { font-family: var(--wb-font); font-size: 14px; letter-spacing: 0; font-weight: 700; margin-bottom: 10px; }
.wb-filter-group__list { } /* 시리즈 전체 표시 — 스크롤 없음 */
.wb-filter-link {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 0;
  font-size: 15px; color: var(--wb-ink);
}
.wb-filter-link:hover { color: var(--wb-accent); }
.wb-filter-link.is-active { font-weight: 700; color: var(--wb-accent); }
.wb-filter-link__code { font-family: var(--wb-mono); font-size: 9px; color: var(--wb-mute); margin-right: 6px; }
.wb-filter-link__count { color: var(--wb-mute); font-size: 13px; }
.wb-filter-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 15px; cursor: pointer; }
.wb-filter-check input { accent-color: var(--wb-accent); }
.wb-filter-price__label { font-size: 12px; color: var(--wb-mute); margin-bottom: 8px; font-family: var(--wb-mono); }
.wb-filter-price input[type="range"] { width: 100%; accent-color: var(--wb-accent); }

.wb-catalog__toolbar {
  display: flex; align-items: center; gap: 12px; padding: 16px 32px;
  border-bottom: 1px solid var(--wb-line); background: var(--wb-panel); flex-wrap: wrap;
}
.wb-chips { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.wb-chips__hint { flex: 1; font-size: 12px; color: var(--wb-mute); }
.wb-chip {
  padding: 4px 8px 4px 10px; font-size: 11px; background: #fff;
  border: 1px solid var(--wb-ink); display: inline-flex; align-items: center; gap: 6px; color: var(--wb-ink);
}
.wb-chip__x { color: var(--wb-mute); }
.wb-chip--clear { border: none; background: none; color: var(--wb-mute); font-family: var(--wb-mono); }
.wb-catalog__sort { padding: 6px 10px; font-size: 12px; border: 1px solid var(--wb-line); background: #fff; }
.wb-view-toggle { display: flex; border: 1px solid var(--wb-line); }
.wb-view-toggle a {
  padding: 6px 10px; font-size: 11px; font-family: var(--wb-mono);
  background: #fff; color: var(--wb-ink);
}
.wb-view-toggle a.is-active { background: var(--wb-ink); color: #fff; }

.wb-catalog__body { padding: 24px 32px; }
.wb-catalog__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wb-catalog__grid .wb-book-card { border: 1px solid var(--wb-line); padding: 14px; background: #fff; }
.wb-catalog__grid .wb-book-card:hover { border-color: var(--wb-ink); }

/* 카드 내부 */
.wb-book-card { display: flex; flex-direction: column; gap: 0; }
.wb-book-card__coverwrap { position: relative; display: block; }
/* 책 목록 카드 표지: 188×240 고정 박스로 통일(이미지는 박스를 가득 채움). */
.wb-book-card__cover { width: 100% !important; max-width: 188px; margin: 0 auto; aspect-ratio: 188 / 240; height: auto; }
.wb-book-card__cover.is-fallback .wb-cover__img { display: none; }
.wb-book-card__tag { position: absolute; top: 0; left: 0; z-index: 3; }
/* 카드 하단: 시리즈명 + 전자책 배지 (Pretendard, 키움) */
.wb-book-card__meta {
  font-family: var(--wb-font); font-size: 13px; letter-spacing: 0; color: var(--wb-mute);
  margin-top: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wb-book-card__series { font-weight: 400; color: var(--wb-ink); word-break: keep-all; }
.wb-book-card__ebook {
  font-size: 11px; font-weight: 400; color: var(--wb-accent);
  border: 1px solid var(--wb-accent); padding: 1px 6px; line-height: 1.5; flex-shrink: 0;
}
.wb-book-card__title { font-size: 16px; font-weight: 700; margin-top: 4px; letter-spacing: -0.3px; line-height: 1.3; word-break: keep-all; min-height: 34px; }
.wb-book-card__author { font-size: 14px; color: var(--wb-mute); margin-top: 4px; }
.wb-book-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wb-line);
}
.wb-book-card__price { font-size: 13px; font-weight: 700; color: var(--wb-accent); }
.wb-book-card__level { font-size: 12px; color: var(--wb-mute); }

/* 리스트 뷰 행 */
.wb-book-row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 20px;
  padding: 5px; border-bottom: 1px solid var(--wb-line); align-items: center;
}
.wb-book-row:hover { background: var(--wb-panel); }
/* 리스트 뷰 표지: 폭만 좁히고 188:240 비율 유지(이미지는 박스를 가득 채움). */
.wb-book-row__cover { width: 70px !important; aspect-ratio: 188 / 240; height: auto; }
.wb-book-row__cover.is-fallback .wb-cover__img { display: none; }
.wb-book-row__body { min-width: 0; display: block; }
/* 좌측 텍스트 약 10% 확대 (우측 가격 제외) */
.wb-book-row__meta { font-size: 11px; color: var(--wb-mute); display: block; }
.wb-book-row__title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin-top: 4px; display: block; }
.wb-book-row__sub { font-size: 13px; color: var(--wb-mute); margin-top: 4px; display: block; }
.wb-book-row__info { font-size: 13px; margin-top: 8px; display: block; }
.wb-book-row__right { text-align: right; }
.wb-book-row__price { font-size: 16px; font-weight: 800; color: var(--wb-accent); display: block; margin-bottom: 6px; }

/* --- 도서 상세 ----------------------------------------------- */
.wb-book-hero {
  display: grid; grid-template-columns: 340px 1fr; gap: 24px;
  padding: 40px 32px; border-bottom: 1px solid var(--wb-line);
}
.wb-book-hero__left { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 38px; }
/* 도서 상세 표지: 실제 이미지 비율 그대로 온전하게 표시(상하 여백·크롭 없음).
   폭만 320px로 고정하고 높이는 이미지에 맞춰 자동. 이미지가 없을 때만 3:4 그래픽 커버. */
.wb-book-hero__cover { width: 320px !important; aspect-ratio: auto; height: auto; }
.wb-book-hero__cover .wb-cover__img { position: static; width: 100%; height: auto; object-fit: initial; display: block; }
.wb-book-hero__cover.is-fallback { aspect-ratio: 3 / 4; }
.wb-book-hero__cover.is-fallback .wb-cover__img { display: none; }
.wb-book-hero__cat { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-mute); margin-top: 10px; letter-spacing: 1px; }
.wb-book-hero__title { font-size: 38px; font-weight: 800; letter-spacing: -1.2px; margin: 8px 0 6px; line-height: 1.15; word-break: keep-all; }
.wb-book-hero__sub { font-size: 16px; color: var(--wb-mute); line-height: 1.5; word-break: keep-all; margin-bottom: 20px; }
.wb-book-hero__people { font-size: 14px; margin-bottom: 4px; }
.wb-book-hero__people .role { color: var(--wb-mute); margin-right: 4px; }
.wb-book-hero__people .name { font-weight: 700; }
.wb-book-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.wb-book-tags a { font-size: 11px; color: var(--wb-mute); border: 1px solid var(--wb-line); padding: 3px 8px; }
.wb-book-tags a:hover { border-color: var(--wb-ink); color: var(--wb-ink); }
/* 표지 하단 이벤트/수상 배너(🏆 …) 글자 크기 */
.wb-book-hero__left .wb-book-tags a { font-size: 14px; }

.wb-book-info { margin-top: 24px; padding: 18px; background: var(--wb-panel); border: 1px solid var(--wb-line); }
.wb-book-info__label { font-size: 14px; color: var(--wb-ink); letter-spacing: 0; margin-bottom: 10px; font-family: var(--wb-font); font-weight: 700; }
.wb-book-info__grid {
  display: grid; grid-template-columns: 84px 1fr 84px 1fr;
  gap: 10px 16px; font-size: 16px; align-items: baseline;
}
.wb-book-info__grid dt { color: var(--wb-mute); margin: 0; }
.wb-book-info__grid dd { margin: 0; }
.wb-book-info__section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wb-line); }

/* 난이도 슬라이더 (도서 정보 항목, 하나의 dd 안에 컴팩트하게 — 현재 단계 한 지점만 강조) */
.wb-level {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 52px);
  width: max-content;            /* dd 전체 폭을 채우지 않고 내용만큼만 → 좌측 정렬 */
  margin: 2px 0;
}
/* 트랙: 첫 dot 중심(7px)에서 마지막 dot 중심(3×52+7=163px)까지 */
.wb-level::before {
  content: ''; position: absolute; left: 7px; width: 156px; top: 4px;
  height: 2px; background: var(--wb-line);
}
.wb-level__step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}
.wb-level__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--wb-line);
  margin-left: 5px;
}
.wb-level__name { font-size: 11px; color: var(--wb-mute); white-space: nowrap; }
.wb-level__step.is-active .wb-level__dot {
  background: var(--wb-accent); border-color: var(--wb-accent);
  outline: 3px solid var(--wb-accent); outline-offset: 2px;
}
.wb-level__step.is-active .wb-level__name { color: var(--wb-accent); font-weight: 700; }
.wb-book-oop { padding: 12px 14px; background: #fff; border: 1px solid var(--wb-line); color: var(--wb-mute); font-size: 13px; }

.wb-book-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wb-book-action {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 10px; border: 1px solid var(--wb-line); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--wb-ink); cursor: pointer; font-family: inherit;
}
.wb-book-action:hover { border-color: var(--wb-ink); }
.wb-book-action__code { font-family: var(--wb-mono); font-size: 10px; color: var(--wb-accent); letter-spacing: 0.5px; font-weight: 700; }

/* 표지 하단 액션 줄: 미리보기 · 전자책/종이책 보기 */
.wb-book-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wb-preview-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border: 1px solid var(--wb-ink); background: #fff; font-size: 13px; font-weight: 700; color: var(--wb-ink);
}
.wb-preview-btn:hover { background: var(--wb-panel); }
.wb-preview-btn__code { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-accent); letter-spacing: 1px; }

/* 탭 콘텐츠 */
/* overflow-x:auto 는 탭이 많아 가로폭을 넘칠 때(특히 모바일) 가로 스크롤을 위해 유지.
   단, overflow-x 를 지정하면 overflow-y 가 자동으로 auto 가 되어(CSS 사양),
   서브픽셀 세로 넘침에 세로 스크롤바가 잠깐 생기며 회색 음영처럼 보인다.
   overflow-y:hidden 으로 세로 스크롤바만 억제한다(가로 스크롤은 그대로). */
.wb-book-tabs-wrap { position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--wb-line); z-index: 10; padding: 0 32px; display: flex; overflow-x: auto; overflow-y: hidden; }
/* 도서 상세 탭(도서 소개/저자 소개 등) 글자 20% 확대 */
.wb-book-tabs-wrap .wb-tab { font-size: 16px; }
.wb-book-panes { padding: 40px 32px; border-bottom: 1px solid var(--wb-line); min-height: 400px; }
/* 본문 좌측 여백 — 탭 라벨('도서 소개')의 시작 위치(탭 내부 18px 패딩)와 일직선 정렬 */
.wb-book-pane { display: none; max-width: 880px; padding-left: 18px; }
.wb-book-pane.is-active { display: block; animation: wb-fadeIn 0.2s ease; }
.wb-book-pane h3.wb-pane-title { font-size: 22px; font-weight: 800; letter-spacing: -0.6px; margin-top: 0; }
.wb-prose { font-size: 17px; line-height: 1.85; color: #2a2a2a; word-break: keep-all; }
.wb-prose h1, .wb-prose h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin-top: 32px; }
.wb-prose h3 { font-size: 18px; font-weight: 700; margin-top: 24px; }
.wb-prose ul, .wb-prose ol { padding-left: 18px; line-height: 1.9; }
.wb-prose img { max-width: 100%; height: auto; }
.wb-prose pre { background: var(--wb-ink); color: #f0f0f0; padding: 20px; font-size: 12px; overflow: auto; font-family: var(--wb-mono); line-height: 1.6; }
.wb-prose code { font-family: var(--wb-mono); font-size: 0.92em; }
.wb-prose table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wb-prose table th { background: var(--wb-panel); padding: 10px; text-align: left; }
.wb-prose table td { padding: 10px; border-bottom: 1px solid var(--wb-line); }
.wb-prose blockquote { margin: 16px 0; padding: 14px 18px; border-left: 3px solid var(--wb-accent); background: var(--wb-panel); }
/* 목차 탭: 리스트 불릿(•/번호) 숨김 */
.wb-book-pane[data-tab-pane="toc"] ul,
.wb-book-pane[data-tab-pane="toc"] ol { list-style: none; padding-left: 0; margin-left: 0; }
.wb-book-pane[data-tab-pane="toc"] li { padding: 2px 0; }

/* 정오표 탭: 코드는 0.9rem·옅은 회색 음영·테두리 없음 (github.css보다 우선) */
.wb-book-pane[data-tab-pane="errata"] pre,
.wb-book-pane[data-tab-pane="errata"] code {
  background: var(--wb-panel); color: inherit; border: none;
  font-size: 0.9rem; font-family: var(--wb-mono);
}
/* MathJax 디스플레이 수식 왼쪽 정렬 (CSS 폴백) */
.wb-prose mjx-container[display="true"] { text-align: left !important; margin-left: 0 !important; }
.wb-book-pane[data-tab-pane="errata"] pre {
  padding: 12px 14px; margin: 10px 0; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word; overflow: auto;
}
.wb-book-pane[data-tab-pane="errata"] code { padding: 1px 5px; }
.wb-book-pane[data-tab-pane="errata"] pre code { padding: 0; background: none; }

.wb-collapse .wb-collapse__body { max-height: 480px; overflow: hidden; position: relative; }
.wb-collapse.is-open .wb-collapse__body { max-height: none; }
.wb-collapse__btn { margin-top: 16px; }

/* 관련 도서 */
.wb-related { padding: 40px 32px; }
.wb-related__title { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 20px; }
.wb-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wb-related__grid .wb-book-card { border: 1px solid var(--wb-line); padding: 14px; background: #fff; }
.wb-related__grid .wb-book-card:hover { border-color: var(--wb-ink); }

/* 공유 모달 */
.wb-share-modal {
  position: fixed; inset: 0; background: rgba(17,17,17,0.55); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.wb-share-modal.is-open { display: flex; }
.wb-share-modal__box { background: #fff; width: 100%; max-width: 460px; border: 1px solid var(--wb-ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: wb-fadeIn 0.2s ease; }
.wb-share-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--wb-line); }
.wb-share-modal__kicker { font-family: var(--wb-mono); font-size: 10px; color: var(--wb-accent); font-weight: 700; letter-spacing: 1.5px; }
.wb-share-modal__title { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; margin-top: 3px; }
.wb-share-modal__close { width: 32px; height: 32px; border: 1px solid var(--wb-line); background: #fff; font-family: var(--wb-mono); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.wb-share-modal__body { padding: 8px 20px 16px; }
.wb-share-modal__url { font-size: 12px; color: var(--wb-mute); padding: 6px 0 12px; word-break: break-all; font-family: var(--wb-mono); }
.wb-share-modal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wb-share__btn { background: #fff; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--wb-line); cursor: pointer; font-family: inherit; }
.wb-share__btn:hover { border-color: var(--wb-ink); }
.wb-share__code { width: 36px; height: 36px; background: var(--wb-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: var(--wb-mono); }
/* 이미지 아이콘(/images/icons/*.png) 사용 시: 흰 배경 + 테두리로 어두운 로고도 보이게 */
.wb-share__code--img { background: #fff; }
.wb-share__code--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wb-share__btn.is-copied .wb-share__code { background: var(--wb-accent); }
.wb-share__name { font-size: 12px; font-weight: 600; color: var(--wb-ink); white-space: nowrap; }

/* 라이트박스 */
.wb-lightbox {
  position: fixed; inset: 0; background: rgba(17,17,17,0.85); z-index: 110;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 32px;
}
.wb-lightbox img { max-width: 90vw; max-height: 90vh; box-shadow: 0 20px 80px rgba(0,0,0,.5); }

/* --- 블로그 -------------------------------------------------- */
.wb-blog-featured { padding: 28px 32px; border-bottom: 1px solid var(--wb-line); }
.wb-blog-featured__card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  background: var(--wb-ink); color: #fff; padding: 32px;
}
.wb-blog-featured__kicker { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-accent); letter-spacing: 2px; font-weight: 700; }
.wb-blog-featured__title { font-size: 36px; font-weight: 800; letter-spacing: -1px; margin: 12px 0; line-height: 1.15; word-break: keep-all; }
.wb-blog-featured__excerpt { font-size: 14px; color: #ccc; line-height: 1.7; word-break: keep-all; }
.wb-blog-featured__meta { font-family: var(--wb-mono); font-size: 12px; margin-top: 20px; color: var(--wb-accent); font-weight: 700; }
.wb-blog-featured__icon { display: flex; align-items: center; justify-content: center; font-size: 96px; opacity: 0.4; }

/* overflow-x:auto(가로 스크롤 유지)는 overflow-y를 auto로 만들어 세로 스크롤바(회색 음영)를
   유발하므로 overflow-y:hidden으로 억제한다. (도서 상세 .wb-book-tabs-wrap와 동일 처리) */
.wb-filter-tabs { display: flex; padding: 0 32px; border-bottom: 1px solid var(--wb-line); overflow-x: auto; overflow-y: hidden; }
.wb-filter-tabs a {
  padding: 14px 18px; font-size: 13px; font-weight: 500; color: var(--wb-ink);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.wb-filter-tabs a.is-active { font-weight: 700; color: var(--wb-accent); border-bottom-color: var(--wb-accent); }

.wb-blog-grid-wrap { padding: 32px 32px 48px; }
.wb-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.wb-post-card { border: 1px solid var(--wb-line); padding: 22px; background: #fff; display: block; }
.wb-post-card:hover { border-color: var(--wb-ink); }
.wb-post-card__cat { font-size: 10px; color: var(--wb-accent); letter-spacing: 1px; font-weight: 700; display: block; }
.wb-post-card__title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.3; margin-top: 8px; word-break: keep-all; display: block; }
.wb-post-card--sm .wb-post-card__title { font-size: 16px; font-weight: 700; }
.wb-post-card__excerpt { font-size: 13px; color: var(--wb-mute); margin-top: 10px; line-height: 1.6; word-break: keep-all; display: block; }
.wb-post-card__meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--wb-mute); margin-top: 16px; }

/* 블로그 글 상세 */
.wb-article { max-width: 760px; margin: 0 auto; padding: 48px 32px 32px; }
.wb-article__cat { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-accent); letter-spacing: 2px; font-weight: 700; }
.wb-article__title { font-size: 44px; font-weight: 800; letter-spacing: -1.2px; margin: 12px 0 16px; line-height: 1.15; word-break: keep-all; }
.wb-article__byline { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--wb-line); }
.wb-article__avatar { width: 44px; height: 44px; background: var(--wb-panel); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.wb-article__author { font-size: 13px; font-weight: 700; }
.wb-article__date { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-mute); }
.wb-article__byline-spacer { flex: 1; }
.wb-article__content { font-size: 16px; line-height: 1.85; color: #1a1a1a; margin-top: 28px; word-break: keep-all; }
.wb-article__content h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; margin-top: 40px; }
.wb-article__content h3 { font-size: 20px; font-weight: 700; margin-top: 32px; }
.wb-article__content pre { background: var(--wb-ink); color: #f0f0f0; padding: 20px; font-size: 12px; overflow: auto; font-family: var(--wb-mono); line-height: 1.6; margin-top: 16px; }
.wb-article__content img { max-width: 100%; height: auto; }
.wb-article__content blockquote { margin: 24px 0; padding-left: 16px; border-left: 3px solid var(--wb-accent); color: #2a2a2a; }

.wb-article-book {
  margin-top: 40px; padding: 24px; background: var(--wb-panel);
  display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: center;
}
.wb-article-book__label { font-family: var(--wb-mono); font-size: 10px; color: var(--wb-accent); letter-spacing: 1.5px; font-weight: 700; }
.wb-article-book__title { font-size: 16px; font-weight: 800; margin-top: 4px; }
.wb-article-book__title a { color: var(--wb-ink); text-decoration: underline; text-decoration-color: var(--wb-accent); }
.wb-article-book__meta { font-size: 12px; color: var(--wb-mute); margin-top: 6px; }

.wb-article-nav { max-width: 760px; margin: 0 auto; padding: 0 32px 32px; display: flex; justify-content: space-between; gap: 16px; }
.wb-article-nav a { font-size: 13px; color: var(--wb-mute); max-width: 45%; }
.wb-article-nav a:hover { color: var(--wb-accent); }

.wb-related-posts { padding: 32px 32px 48px; border-top: 1px solid var(--wb-line); margin-top: 40px; }
.wb-related-posts__title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 16px; }

/* --- 검색 결과 ------------------------------------------------ */
.wb-search-head { padding: 32px 32px 20px; border-bottom: 1px solid var(--wb-line); }
.wb-search-head__label { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-mute); }
.wb-search-head__row { display: flex; align-items: baseline; gap: 16px; margin-top: 8px; }
.wb-search-head__q { font-size: 36px; font-weight: 800; letter-spacing: -1.2px; margin: 0; }
.wb-search-head__count { font-family: var(--wb-mono); font-size: 14px; color: var(--wb-mute); }
.wb-search-head__form { margin-top: 14px; display: flex; gap: 8px; max-width: 520px; }
.wb-search-head__input { flex: 1; padding: 10px; border: 1px solid var(--wb-ink); font-size: 14px; }
.wb-search-section { margin-bottom: 40px; }
.wb-search-section__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.wb-search-section__title { font-size: 18px; font-weight: 800; margin: 0; }
.wb-search-section__count { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-mute); }
.wb-search-section__more { margin-left: auto; font-family: var(--wb-mono); font-size: 11px; color: var(--wb-accent); }
.wb-search-section__more:hover { text-decoration: underline; }
.wb-search-body { padding: 32px 32px 40px; }
.wb-search-postrow { display: block; padding: 16px 0; border-bottom: 1px solid var(--wb-line); }
.wb-search-postrow__meta { font-family: var(--wb-mono); font-size: 10px; color: var(--wb-accent); letter-spacing: 1px; font-weight: 700; }
.wb-search-postrow__title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin-top: 4px; }
.wb-search-postrow__excerpt { font-size: 13px; color: var(--wb-mute); margin-top: 4px; line-height: 1.6; }
mark.wb-hl { background: var(--wb-accent); color: #fff; padding: 1px 2px; }

/* --- 다크 히어로 (회사/집필 제안) ----------------------------- */
.wb-dark-hero { background: var(--wb-ink); color: #fff; padding: 80px 32px 60px; }
.wb-dark-hero__inner { max-width: 1100px; }
.wb-dark-hero__kicker { font-family: var(--wb-mono); font-size: 11px; letter-spacing: 2px; color: var(--wb-accent); font-weight: 700; }
.wb-dark-hero__title { font-size: 64px; font-weight: 800; letter-spacing: -2px; margin: 16px 0 20px; line-height: 1.05; word-break: keep-all; }
.wb-dark-hero__desc { font-size: 17px; color: #ccc; line-height: 1.7; max-width: 720px; word-break: keep-all; }
.wb-dark-hero__aside { border-left: 2px solid var(--wb-accent); padding-left: 20px; font-size: 13px; line-height: 1.9; color: #ddd; }
.wb-dark-hero--split .wb-dark-hero__inner { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: end; }

/* 회사 소개 */
.wb-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--wb-line); }
.wb-about-stat { padding: 32px 28px; border-left: 1px solid var(--wb-line); }
.wb-about-stat:first-child { border-left: none; }
.wb-about-stat__n { font-family: var(--wb-mono); font-size: 44px; font-weight: 800; letter-spacing: -1.5px; }
.wb-about-stat__l { font-size: 13px; color: var(--wb-mute); margin-top: 4px; }

.wb-mission { padding: 60px 32px; border-bottom: 1px solid var(--wb-line); }
.wb-mission__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; max-width: 1200px; }
.wb-mission__title { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; margin: 8px 0 0; line-height: 1.1; }
.wb-mission__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.wb-mission-card { padding: 20px; border: 1px solid var(--wb-line); background: #fff; }
.wb-mission-card__n { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-accent); font-weight: 700; }
.wb-mission-card__t { font-size: 20px; font-weight: 800; letter-spacing: -0.6px; margin-top: 6px; }
.wb-mission-card__d { font-size: 13px; color: var(--wb-mute); margin-top: 8px; line-height: 1.7; word-break: keep-all; }

.wb-timeline { padding: 60px 32px; border-bottom: 1px solid var(--wb-line); background: var(--wb-panel); }
.wb-timeline__title { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; margin: 8px 0 32px; }
.wb-timeline__list { max-width: 800px; }
.wb-timeline__row { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--wb-line); }
.wb-timeline__year { font-family: var(--wb-mono); font-size: 20px; font-weight: 800; color: var(--wb-accent); }
.wb-timeline__event { font-size: 15px; }

.wb-cta-cards { padding: 60px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1264px; }
.wb-cta-card { padding: 32px; border: 1px solid var(--wb-ink); background: #fff; display: block; }
.wb-cta-card__kicker { font-family: var(--wb-mono); font-size: 11px; color: var(--wb-accent); letter-spacing: 1.5px; font-weight: 700; }
.wb-cta-card__title { font-size: 28px; font-weight: 800; letter-spacing: -0.8px; margin-top: 8px; }
.wb-cta-card__desc { font-size: 14px; color: var(--wb-mute); margin-top: 10px; line-height: 1.7; }
.wb-cta-card__link { font-size: 13px; font-weight: 700; margin-top: 18px; color: var(--wb-accent); }

/* --- 고객센터 / 폼 ------------------------------------------- */
.wb-contact-channels { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--wb-line); }
.wb-contact-channel { padding: 28px; border-left: 1px solid var(--wb-line); }
.wb-contact-channel:first-child { border-left: none; }
.wb-contact-channel__icon { font-size: 28px; }
.wb-contact-channel__title { font-size: 18px; font-weight: 800; margin-top: 8px; }
.wb-contact-channel__desc { font-size: 12px; color: var(--wb-mute); margin-top: 4px; }
.wb-contact-channel__value { font-family: var(--wb-mono); font-size: 14px; font-weight: 700; color: var(--wb-accent); margin-top: 10px; }

.wb-faq { max-width: 800px; }
.wb-faq-q__label { font-family: var(--wb-mono); color: var(--wb-accent); margin-right: 14px; }

.wb-form { max-width: 640px; }
.wb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wb-form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
.wb-form__field { margin-top: 16px; }
.wb-form__field label { font-size: 12px; font-weight: 600; display: block; margin-bottom: 6px; }
.wb-form__field input[type="text"], .wb-form__field input[type="email"], .wb-form__field input[type="tel"],
.wb-form__field select, .wb-form__field textarea {
  width: 100%; padding: 10px; border: 1px solid var(--wb-line); font-size: 13px;
  font-family: inherit; background: #fff; box-sizing: border-box;
}
.wb-form__field textarea { resize: vertical; }
.wb-form__field textarea.wb-mono-input { font-family: var(--wb-mono); }
.wb-form__submit { margin-top: 20px; padding: 12px 28px; }

/* ============================================================
   본문 글자 확대 — 오탈자 신고 / 고객문의 / 집필 제안 (.wb-page-lg)
   도서 상세 페이지의 본문(라벨 14 / 입력·본문 16~17) 수준으로 키운다.
   고객문의·집필 제안은 페이지 전체 텍스트를 약 20% 확대.
   ============================================================ */
.wb-page-lg .wb-page-head__desc { font-size: 17px; }
/* 고객문의 — 채널 / FAQ / 탭 */
.wb-page-lg .wb-contact-channel__title { font-size: 22px; }
.wb-page-lg .wb-contact-channel__desc  { font-size: 14px; }
.wb-page-lg .wb-contact-channel__value { font-size: 17px; }
.wb-page-lg .wb-filter-tabs a { font-size: 16px; }
.wb-page-lg .wb-faq-q { font-size: 17px; }
.wb-page-lg .wb-faq-a { font-size: 16px; }
/* 집필 제안 — 히어로 / 프로세스 */
.wb-page-lg .wb-dark-hero__desc  { font-size: 20px; }
.wb-page-lg .wb-dark-hero__aside { font-size: 16px; }
.wb-page-lg .wb-process-card__t  { font-size: 19px; }
.wb-page-lg .wb-process-card__d  { font-size: 14px; }
/* 폼 (세 페이지 공통) */
.wb-page-lg .wb-form__field label { font-size: 14px; }
.wb-page-lg .wb-form__field input,
.wb-page-lg .wb-form__field select,
.wb-page-lg .wb-form__field textarea { font-size: 16px; }
.wb-page-lg .wb-form__notice { font-size: 15px; }
.wb-page-lg .wb-form__agree  { font-size: 14px; }
.wb-page-lg .wb-form__submit { font-size: 15px; }
.wb-form__agree { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: 12px; cursor: pointer; }
.wb-form__agree input { margin-top: 2px; accent-color: var(--wb-accent); }
.wb-form__notice { margin-top: 16px; padding: 14px 16px; font-size: 13px; }
.wb-form__notice--ok { background: #e8f5ee; border: 1px solid var(--wb-success); color: #1c6b41; }
.wb-form__notice--error { background: #fdeeec; border: 1px solid var(--wb-accent); color: var(--wb-accent-hover); }
.wb-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wb-form__checks { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-form__checks label { padding: 6px 12px; border: 1px solid var(--wb-line); font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.wb-form__nav { display: flex; justify-content: space-between; margin-top: 20px; }
.wb-form__nav--end { justify-content: flex-end; }

/* 집필 제안 스텝 */
.wb-steps { display: flex; margin-bottom: 24px; }
.wb-step-tab {
  flex: 1; text-align: center; padding: 12px 8px; cursor: pointer;
  border-bottom: 2px solid var(--wb-line); color: var(--wb-mute); font-size: 13px; font-weight: 500;
}
.wb-step-tab.is-active, .wb-step-tab.is-done { border-bottom-color: var(--wb-accent); color: var(--wb-ink); }
.wb-step-tab.is-active { font-weight: 700; }
.wb-step-tab__n { font-family: var(--wb-mono); color: var(--wb-mute); margin-right: 6px; }
.wb-step-tab.is-active .wb-step-tab__n, .wb-step-tab.is-done .wb-step-tab__n { color: var(--wb-accent); }
[data-step-pane] { display: none; }
[data-step-pane].is-active { display: block; animation: wb-fadeIn 0.2s ease; }

.wb-process { padding: 50px 32px; border-bottom: 1px solid var(--wb-line); }
.wb-process__title { font-size: 32px; font-weight: 800; letter-spacing: -1px; margin: 6px 0 28px; }
.wb-process__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wb-process-card { padding: 18px; border: 1px solid var(--wb-line); background: #fff; position: relative; }
.wb-process-card__step { font-family: var(--wb-mono); font-size: 10px; color: var(--wb-accent); font-weight: 700; }
.wb-process-card__t { font-size: 16px; font-weight: 800; margin-top: 6px; }
.wb-process-card__d { font-size: 12px; color: var(--wb-mute); margin-top: 6px; line-height: 1.6; }
/* 카드 사이 간격(16px) 정중앙에 배치 — 박스와 겹치지 않도록 */
.wb-process-card__arrow { position: absolute; right: -8px; top: 50%; transform: translate(50%, -50%); font-size: 14px; line-height: 1; color: var(--wb-accent); z-index: 2; }

/* --- 404 ------------------------------------------------------ */
.wb-404 { padding: 80px 32px 60px; border-bottom: 1px solid var(--wb-line); }
.wb-404__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1000px; align-items: center; }
.wb-404__label { font-family: var(--wb-mono); font-size: 12px; color: var(--wb-accent); letter-spacing: 2px; font-weight: 700; }
.wb-404__code { font-size: 180px; font-weight: 800; letter-spacing: -8px; line-height: 0.9; font-family: var(--wb-mono); color: var(--wb-ink); }
.wb-404__bar { height: 4px; background: var(--wb-accent); width: 80px; margin-top: 12px; }
.wb-404__title { font-size: 40px; font-weight: 800; letter-spacing: -1.2px; margin: 0; word-break: keep-all; line-height: 1.1; }
.wb-404__desc { font-size: 14px; color: var(--wb-mute); line-height: 1.7; margin-top: 16px; word-break: keep-all; }
.wb-404__actions { display: flex; gap: 8px; margin-top: 24px; }
.wb-404__suggest { padding: 40px 32px; }
.wb-404__suggest-title { font-size: 22px; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 20px; }

/* --- 일반 페이지 (개인정보처리방침 등) ------------------------ */
.wb-page-content { max-width: 880px; margin: 0 auto; padding: 48px 32px 64px; }
.wb-page-content .wb-prose h2 { border-bottom: 1px solid var(--wb-line); padding-bottom: 8px; }

/* --- 약관/개인정보처리방침 (legal) ----------------------------- */
.wb-legal { display: grid; grid-template-columns: 240px 1fr; gap: 48px; max-width: 1100px; padding: 40px 32px 60px; align-items: start; }
.wb-legal__toc { position: sticky; top: 20px; border-left: 2px solid var(--wb-ink); padding-left: 18px; }
.wb-legal__toc-label { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; margin-bottom: 12px; }
.wb-legal__toc a { display: block; font-size: 13px; color: var(--wb-mute); line-height: 1.9; }
.wb-legal__toc a:hover { color: var(--wb-accent); }
.wb-legal__toc a.wb-legal__toc-ch { font-weight: 700; color: var(--wb-ink); margin-top: 8px; }
.wb-legal__sec { margin-bottom: 36px; scroll-margin-top: 110px; }
.wb-legal__h { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--wb-line); }
.wb-legal__ch-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--wb-ink); padding-bottom: 10px; margin-bottom: 20px; }
.wb-legal__ch-no { font-size: 11px; letter-spacing: 1.5px; color: var(--wb-accent); font-weight: 700; }
.wb-legal__h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin: 0; }
.wb-legal__art { margin-bottom: 24px; }
.wb-legal__art-t { font-size: 16px; font-weight: 800; margin: 0 0 10px; }
.wb-legal__p { font-size: 15px; color: #2a2a2a; line-height: 1.9; margin: 0 0 12px; word-break: keep-all; }
.wb-legal__table { border: 1px solid var(--wb-line); background: var(--wb-panel); margin-top: 6px; }
.wb-legal__row { display: grid; grid-template-columns: 200px 1fr; }
.wb-legal__row + .wb-legal__row { border-top: 1px solid var(--wb-line); }
.wb-legal__k { padding: 12px 16px; font-size: 13px; font-weight: 700; background: #fff; border-right: 1px solid var(--wb-line); word-break: keep-all; }
.wb-legal__v { padding: 12px 16px; font-size: 14px; color: #2a2a2a; line-height: 1.7; word-break: keep-all; }
.wb-legal__note { margin-top: 36px; padding: 20px; background: var(--wb-ink); color: #fff; line-height: 1.7; font-size: 14px; }
.wb-legal__note-label { font-size: 11px; letter-spacing: 1.5px; color: var(--wb-accent); font-weight: 700; margin-bottom: 6px; }

/* 개인정보처리방침 — 좌측 목차 + 마크다운 본문(.wb-prose) */
.wb-legal__prose { min-width: 0; }
.wb-legal__prose h2,
.wb-legal__prose h3 { scroll-margin-top: 110px; padding-bottom: 8px; border-bottom: 1px solid var(--wb-line); }
.wb-legal__prose > :first-child { margin-top: 0; }

/* --- 사이트맵 ------------------------------------------------- */
.wb-sitemap { padding: 40px 32px 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.wb-sitemap__group h3 { font-size: 15px; font-weight: 800; border-bottom: 1px solid var(--wb-ink); padding-bottom: 8px; }
.wb-sitemap__group ul { list-style: none; padding: 0; margin: 12px 0 0; }
.wb-sitemap__group li { padding: 5px 0; font-size: 13px; }
.wb-sitemap__group a:hover { color: var(--wb-accent); }

/* --- book-info 단축코드 -------------------------------------- */
.wb-bookinfo { display: flex; gap: 16px; padding: 16px; border: 1px solid var(--wb-line); background: var(--wb-panel); margin: 16px 0; }
.wb-bookinfo__cover { width: 100px; height: auto; display: block; }
.wb-bookinfo__title a { font-size: 15px; font-weight: 800; color: var(--wb-ink); }
.wb-bookinfo__sub { font-size: 12px; color: var(--wb-mute); margin-top: 4px; }
.wb-bookinfo__preview { margin-top: 10px; font-size: 12px; }

/* --- 반응형 --------------------------------------------------- */
@media (max-width: 1100px) {
  .wb-catalog__grid, .wb-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wb-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wb-grid-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wb-process__grid { grid-template-columns: repeat(3, 1fr); }
  .wb-process-card__arrow { display: none; }
}

@media (max-width: 900px) {
  /* 시안 mobile.html 헤더: 로고 + 검색 한 줄, 아래 가로 스크롤 메뉴 */
  .site-header__top { gap: 12px; padding: 10px 16px; }
  .wb-search { max-width: none; }
  .site-nav { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-nav__spacer { flex: 0 0 8px; }
  .wb-dropdown { position: static; }
  .wb-dropdown__menu { left: 16px; right: 16px; min-width: 0; max-width: none; }
  .wb-dropdown__series { grid-template-columns: 1fr; }

  .wb-section, .wb-page-head, .wb-archive-head, .wb-search-head, .wb-search-body,
  .wb-blog-grid-wrap, .wb-blog-featured, .wb-related, .wb-book-panes,
  .wb-mission, .wb-timeline, .wb-process, .wb-404, .wb-404__suggest { padding-left: 16px; padding-right: 16px; }
  .wb-breadcrumb, .wb-filter-tabs, .wb-book-tabs-wrap { padding-left: 16px; padding-right: 16px; }
  .wb-dark-hero, .wb-cta-cards { padding: 48px 16px; }
  .wb-dark-hero__title { font-size: 42px; }

  .wb-catalog { grid-template-columns: 1fr; }
  .wb-catalog__sidebar { border-right: none; border-bottom: 1px solid var(--wb-line); min-height: 0; padding: 16px; }
  .wb-catalog__body { padding: 16px; }
  .wb-catalog__grid, .wb-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 시리즈 목록은 모바일에서도 전체 표시 */

  .wb-book-hero { grid-template-columns: 1fr; padding: 24px 16px; }
  .wb-book-hero__left { padding-top: 0; }
  .wb-book-hero__cover { width: 220px !important; }
  .wb-book-hero__title { font-size: 28px; }
  .wb-book-info__grid { grid-template-columns: 84px 1fr; }
  .wb-retailers { grid-template-columns: repeat(2, 1fr); }
  .wb-book-actions { grid-template-columns: 1fr 1fr; }

  .wb-blog-featured__card { grid-template-columns: 1fr; }
  .wb-blog-featured__icon { display: none; }
  .wb-blog-grid { grid-template-columns: 1fr; }
  .wb-article__title { font-size: 30px; }
  /* (홈 화면 .wb-home-* 모바일 규칙은 캐스케이드 순서상 home.css 하단에 위치) */
  .wb-grid-5, .wb-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wb-mission__grid, .wb-cta-cards, .wb-404__grid { grid-template-columns: 1fr; }
  .wb-mission__cards { grid-template-columns: 1fr; }
  .wb-about-stats, .wb-contact-channels { grid-template-columns: 1fr 1fr; }
  .wb-contact-channel, .wb-about-stat { border-left: none; border-top: 1px solid var(--wb-line); }
  .wb-process__grid { grid-template-columns: 1fr 1fr; }
  .wb-sitemap { grid-template-columns: 1fr; }
  .wb-form__row, .wb-form__row--3 { grid-template-columns: 1fr; }
  .wb-404__code { font-size: 110px; letter-spacing: -4px; }

  .wb-book-row { grid-template-columns: 70px 1fr; }
  .wb-book-row__right { grid-column: 2; text-align: left; }
}

/* ============================================================
   모바일 대응 보강 — 푸터 / 마키 / 헤더 / 구매 바 / 필터 토글
   ============================================================ */

/* 카탈로그 사이드바 필터 토글 버튼 (데스크톱에서는 숨김) */
.wb-filter-toggle { display: none; }

/* 도서 상세 하단 고정 구매 바 (시안 mobile.html — 데스크톱에서는 숨김) */
.wb-mobile-buybar { display: none; }

@media (max-width: 900px) {
  /* --- 마키 공지 --- */
  .wb-marquee { padding: 7px 16px; font-size: 11px; gap: 28px; white-space: nowrap; }

  /* --- 헤더 --- */
  .site-brand__name { font-size: 15px; }
  .wb-search__icon { display: none; }
  .site-nav__item { padding: 11px 12px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }

  /* --- 푸터 --- */
  .site-footer { padding: 40px 16px 24px; margin-top: 48px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer__grid > div:first-child { grid-column: 1 / -1; }
  .site-footer__legal { flex-direction: column; gap: 6px; margin-top: 32px; }

  /* --- 페이지 헤더/본문 타이포 --- */
  .wb-page-head__title { font-size: 32px; }
  .wb-archive-head__title { font-size: 26px; }
  .wb-breadcrumb { white-space: nowrap; overflow-x: auto; }
  .wb-article { padding: 28px 16px 24px; }
  .wb-article-nav { padding: 0 16px 24px; }
  .wb-page-content { padding: 28px 16px 40px; }
  .wb-prose table { display: block; overflow-x: auto; }
  .wb-blog-featured__title { font-size: 24px; }
  .wb-timeline__title, .wb-mission__title { font-size: 28px; }
  .wb-cta-card__title { font-size: 22px; }
  .wb-share-modal__grid { grid-template-columns: repeat(2, 1fr); }

  /* --- 카탈로그: 사이드바 필터를 토글로 --- */
  .wb-filter-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 16px; background: #fff;
    border: none; border-bottom: 1px solid var(--wb-line);
    font-size: 13px; font-weight: 700; font-family: inherit; color: var(--wb-ink);
    cursor: pointer;
  }
  .wb-filter-toggle__icon { font-family: var(--wb-mono); color: var(--wb-accent); }
  .wb-catalog__sidebar { display: none; }
  .wb-catalog__sidebar.is-open { display: block; }
  .wb-catalog__toolbar { padding: 12px 16px; }

  /* --- 도서 상세: 하단 고정 구매 바 --- */
  .wb-mobile-buybar {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--wb-ink);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .wb-mobile-buybar__label {
    font-size: 9px; color: var(--wb-mute); font-family: var(--wb-mono);
    letter-spacing: 1px; font-weight: 700; margin-bottom: 6px;
  }
  .wb-mobile-buybar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .wb-mobile-buybar__btn {
    padding: 9px 4px; border: 1px solid currentColor;
    font-size: 11px; font-weight: 700; text-align: center; background: #fff;
  }
  /* 구매 바가 본문/푸터를 가리지 않도록 여백 확보 */
  body.single-post.has-buybar { padding-bottom: 84px; }

  /* 도서 상세 히어로/탭 */
  .wb-book-hero__sub { font-size: 14px; }
  .wb-book-panes { min-height: 0; }
}

/* 약관/개인정보 — 모바일: 목차 숨김, 1열 */
@media (max-width: 900px) {
  .wb-legal { grid-template-columns: 1fr; gap: 0; padding: 24px 16px 40px; }
  .wb-legal__toc { display: none; }
  .wb-legal__row { grid-template-columns: 1fr; }
  .wb-legal__k { border-right: none; border-bottom: 1px solid var(--wb-line); }
}

@media (max-width: 560px) {
  /* 시안 모바일 헤더: 로고 박스 + 검색만 */
  .site-brand__name { display: none; }
  .wb-catalog__grid, .wb-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* (표지 높이는 188:240 비율로 자동 계산) */
  .wb-retailers { grid-template-columns: repeat(2, 1fr); }
  .wb-about-stats, .wb-contact-channels { grid-template-columns: 1fr; }
  .wb-process__grid { grid-template-columns: 1fr; }
  .wb-pagination__count { flex-basis: 100%; text-align: center; margin: 8px 0 0; }
  .wb-dark-hero__title { font-size: 34px; }
  .wb-404__code { font-size: 90px; }
}