/* 검색용 정적 페이지 전용 (2026-09-12, tools/build_seo_pages.py 가 찍는 쪽)
   앱 화면(style.css)의 색·서체·카드를 그대로 물려 쓰고, 여기서는 정적 페이지에만
   필요한 것만 얹는다 — 상단 차림표, 책 목록, 시작 단추 줄.
   앱을 안 부르는 쪽이라 style.css 가 #app 에 걸어 둔 규칙은 닿지 않는다. */

body.pg { background: var(--paper); color: var(--ink); min-height: 100vh; }

.pg-main { padding: 34px 0 12px; }
.pg-main h1.page { margin-bottom: 6px; }
.pg-main .sub { color: var(--ink-soft); margin: 0 0 22px; }
.pg-main .card { margin-bottom: 18px; }
.pg-main .card h2 { margin-top: 0; }
.pg-main p { line-height: 1.75; }
/* 카드 안 문단은 서로 떨어뜨린다 — 붙어 있으면 두 문단이 한 덩이로 읽힌다 */
.pg-main .card > p + p, .pg-main .guide-sec > p + p { margin-top: 14px; }

/* 상단 차림표 — 앱 상단바에는 없는, 정적 페이지끼리 오가는 줄 */
.pg-nav { display: flex; gap: 18px; align-items: center; margin-left: auto; }
.pg-nav a {
  color: var(--ink); text-decoration: none; font-size: 15px;
  padding: 4px 2px; border-bottom: 1px solid transparent;
}
.pg-nav a:hover { border-bottom-color: var(--line); }
.pg-nav a:last-child {
  border: 1px solid var(--line); border-radius: 3px; padding: 5px 12px;
}
.pg-nav a:last-child:hover { background: var(--ewha); color: var(--paper); border-color: var(--ewha); }

/* 읽는 책 — 권 차례가 그대로 보이는 목록 */
.pg-books { list-style: none; margin: 8px 0 22px; padding: 0; counter-reset: bk; }
.pg-books > li {
  counter-increment: bk;
  border-top: 1px solid var(--line-soft);
  padding: 14px 0 14px 46px; position: relative;
}
.pg-books > li:last-child { border-bottom: 1px solid var(--line-soft); }
.pg-books > li::before {
  content: counter(bk) "권"; position: absolute; left: 0; top: 15px;
  font-size: 13px; color: var(--ink-soft); letter-spacing: -.02em;
}
.pg-books b { font-size: 17px; }
.pg-books .pg-au { color: var(--ink-soft); font-size: 14px; margin-left: 8px; }
.pg-books .pg-en { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; font-style: italic; }
.pg-books p { margin: 8px 0 0; font-size: 15px; }
.pg-books .pg-learn { color: var(--ink-soft); }
.pg-books .pg-learn b { font-size: 14px; }
.pg-main h3 { margin: 18px 0 0; font-size: 15px; letter-spacing: .06em; color: var(--ink-soft); }

/* 시작 단추 줄 */
.pg-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; }

@media (max-width: 640px) {
  .pg-main { padding-top: 22px; }
  .pg-nav { gap: 12px; }
  .pg-nav a { font-size: 14px; }
  .pg-books > li { padding-left: 0; padding-top: 30px; }
  .pg-books > li::before { top: 12px; }
}