/*! onae-seo-page.css v1.0.0 — AI교과서 정적 SEO 페이지 전용 레이아웃
 * ==========================================================================
 * 왜 만들었나 (2026-08-02)
 *   p/*.html 과 p/chapters/*.html 90장은 이 사이트 검색 유입의 전부인데,
 *   스타일시트가 공통 레이어(반응형·테마·타이포)만 걸려 있고
 *   **레이아웃 규칙이 한 줄도 없었다.**
 *   실제로 그려 보면 브라우저 기본값 그대로다 —
 *     · 본문이 화면 폭 전체(1180px)로 늘어난다. 한 줄이 90자를 넘는다.
 *     · 링크가 기본 파란색 밑줄. 우리 브랜드색이 아니다.
 *     · 카드도 여백도 없어서 '문서'가 아니라 '원고'처럼 보인다.
 *   사람 방문자는 곧바로 /#/... 로 튕기지만, 크롤러와 자바스크립트가
 *   막힌 방문자, 그리고 SNS 미리보기는 이 화면을 그대로 본다.
 *
 * 원칙 — 이 파일이 지키는 것
 *   ① 색을 새로 만들지 않는다. 전부 --onae-* 토큰만 쓴다.
 *      그 토큰들은 onae-themes.css 에서 default/inverse/cute 세 테마 모두
 *      AA 이상으로 이미 검증돼 있다. 내가 색을 고르면 그 검증이 깨진다.
 *      (2026-08-02 이전에 내가 색을 직접 골랐다가 세 번 사고를 냈다.)
 *   ② 크기도 새로 만들지 않는다. --onae-fs-* / --onae-lh-* 를 쓴다.
 *   ③ 이 90장에만 있는 클래스에만 붙인다. 추측 선택자([class*=...])는 쓰지 않는다.
 *      실제로 세어 본 클래스 목록 :
 *        chapter-page 82 · book-page 8 · crumb 82 · intro 82 · tier-tag 90
 *        objectives 82 · sections 82 · section 452 · section-free 153
 *        section-locked 299 · locked-note 299 · deep-link 90 · interactive-link 90
 *        audience 8 · cover 8 · summary 8 · chapters 8 · chapter-list 8
 *        excerpt 55 · back-link 8
 *
 * 로드 위치 : onae-typo.css / onae-pro.css **뒤**.
 * 되돌리려면 : 각 페이지의 이 <link> 한 줄만 지우면 원래대로 돌아간다.
 * ========================================================================== */

/* ══ 1. 판 — 읽는 폭을 잡는다 ══════════════════════════════════════════════
 * 한 줄이 길수록 다음 줄 첫 글자를 찾기 어려워진다. 한글은 45~50자가 편하다.
 * 760px 이 그 폭이다. 지금은 제한이 없어 90자가 넘는다. */
body.onae-themed{
  background:var(--onae-bg-soft, #f5f7fb);
  color:var(--onae-text, #14181f);
  margin:0;
  padding:0 16px 72px;
}

article.chapter-page,
article.book-page{
  max-width:760px;
  margin:28px auto 0;
  padding:38px clamp(20px, 4vw, 46px) 46px;
  background:var(--onae-bg-elev, #fff);
  border:1px solid var(--onae-border, #dde3ec);
  border-radius:var(--onae-radius-card, 14px);
  box-shadow:var(--onae-shadow, 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08));
}

/* 위쪽 브랜드 띠 — 종이 한 장이 아니라 '우리 사이트의 문서'로 보이게 한다 */
article.chapter-page::before,
article.book-page::before{
  content:"";
  display:block;
  height:3px; width:64px;
  margin:0 0 22px;
  border-radius:99px;
  background:var(--onae-brand, #1b4fd8);
}

/* ══ 2. 맨 위 인터랙티브 링크 — 맨 앞에 놓인 유일한 행동 유도다 ══════════ */
a.interactive-link{
  display:block;
  max-width:760px;
  margin:20px auto 0;
  padding:11px 18px;
  border-radius:var(--onae-radius-btn, 10px);
  background:var(--onae-brand, #1b4fd8);
  color:var(--onae-on-brand, #fff);
  font-size:var(--onae-fs-sm, 13.5px);
  font-weight:700;
  letter-spacing:var(--onae-ls-body, -.011em);
  text-decoration:none;
  text-align:center;
  box-shadow:var(--onae-shadow);
}
a.interactive-link:hover{ background:var(--onae-brand-strong, #143da8); }

/* ══ 3. 머리 ══════════════════════════════════════════════════════════════ */
.crumb{
  margin:0 0 14px;
  font-size:var(--onae-fs-xs, 12.5px);
  color:var(--onae-text-muted, #55606f);
}
.crumb a{ color:var(--onae-text-muted, #55606f); text-decoration:none; }
.crumb a:hover{ color:var(--onae-brand, #1b4fd8); text-decoration:underline; }

article.chapter-page > h1,
article.book-page > h1{
  margin:0 0 12px;
  font-size:var(--onae-fs-h1, 30px);
  line-height:var(--onae-lh-tight, 1.28);
  letter-spacing:var(--onae-ls-title, -.022em);
  font-weight:800;
  text-wrap:balance;
}

/* 등급 꼬리표 · 대상 — 제목 바로 아래 한 줄
 * ★ .tier-tag 는 두 자리에서 쓰인다(먼저 세어 봤다) :
 *     ① 챕터 페이지의 <p class="tier-tag">챕터 등급: 무료</p>  — 블록, 아래 여백 필요
 *     ② 책 페이지 목차의 <h3>… <span class="tier-tag">[무료]</span></h3> — 인라인, 여백 금지
 *   같은 값을 주면 ②의 줄 간격이 벌어진다. 아래에서 ②를 따로 잡는다. */
.tier-tag,
.audience{
  display:inline-block;
  margin:0 0 18px;
  padding:4px 11px;
  border-radius:99px;
  background:var(--onae-bg-soft, #f5f7fb);
  border:1px solid var(--onae-border, #dde3ec);
  color:var(--onae-text-muted, #55606f);
  font-size:var(--onae-fs-xs, 12.5px);
  font-weight:700;
}

/* 들머리 글 — 왼쪽 브랜드 선으로 '요약'임을 표시 */
.intro,
.summary{
  margin:0 0 30px;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--onae-brand, #1b4fd8);
  font-size:var(--onae-fs-lead, 17px);
  line-height:var(--onae-lh-normal, 1.65);
  color:var(--onae-text, #14181f);
}

/* ══ 4. 학습 목표 ═════════════════════════════════════════════════════════ */
.objectives{
  margin:0 0 30px;
  padding:20px 22px 18px;
  border-radius:12px;
  background:var(--onae-bg-soft, #f5f7fb);
  border:1px solid var(--onae-border, #dde3ec);
}
.objectives > h2,
.sections > h2,
.chapters > h2,
article.book-page > h2{
  margin:0 0 12px;
  font-size:var(--onae-fs-h3, 19px);
  line-height:var(--onae-lh-snug, 1.45);
  letter-spacing:var(--onae-ls-title, -.022em);
  font-weight:800;
}
.objectives ul{ margin:0; padding-left:0; list-style:none; }
.objectives li{
  position:relative;
  margin:0 0 7px;
  padding-left:22px;
  font-size:var(--onae-fs-body, 15px);
  line-height:var(--onae-lh-snug, 1.45);
}
.objectives li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--onae-accent, #0f766e);
  font-weight:800;
}

/* ══ 5. 학습 내용 — 절 하나가 카드 하나 ═══════════════════════════════════ */
.sections{ margin:0; }
.section{
  margin:0 0 14px;
  padding:20px 22px;
  border-radius:12px;
  border:1px solid var(--onae-border, #dde3ec);
  background:var(--onae-bg-elev, #fff);
}
.section > h3{
  margin:0 0 10px;
  font-size:var(--onae-fs-h4, 16px);
  line-height:var(--onae-lh-snug, 1.45);
  letter-spacing:var(--onae-ls-title, -.022em);
  font-weight:750;
}
.section p{
  margin:0 0 11px;
  font-size:var(--onae-fs-body, 15px);
  line-height:var(--onae-lh-normal, 1.65);
  letter-spacing:var(--onae-ls-body, -.011em);
}
.section p:last-child{ margin-bottom:0; }

/* 무료 절 — 왼쪽에 액센트 한 줄만. 색을 채우면 잠긴 절과 구분이 흐려진다. */
.section-free{ border-left:3px solid var(--onae-accent, #0f766e); }

/* 잠긴 절 — 흐리게 만들지 않는다. 흐리면 '고장'처럼 보인다.
 * 바탕을 한 단계 낮추고 자물쇠 배지로 상태를 말한다. */
.section-locked{
  background:var(--onae-bg-soft, #f5f7fb);
  border-style:dashed;
}
.locked-note{
  display:inline-block;
  margin:0;
  padding:4px 11px;
  border-radius:99px;
  background:var(--onae-bg-elev, #fff);
  border:1px solid var(--onae-border, #dde3ec);
  color:var(--onae-text-muted, #55606f);
  font-size:var(--onae-fs-xs, 12.5px);
  font-weight:700;
}

/* ══ 6. 책 페이지 ═════════════════════════════════════════════════════════ */
.cover{
  display:block;
  max-width:220px; width:100%; height:auto;
  margin:0 0 26px;
  border-radius:10px;
  border:1px solid var(--onae-border, #dde3ec);
  box-shadow:var(--onae-shadow);
}
.chapter-list{ margin:0; padding-left:0; list-style:none; counter-reset:ch; }
.chapter-list > li{
  counter-increment:ch;
  position:relative;
  margin:0 0 12px;
  padding:18px 22px 18px 56px;
  border-radius:12px;
  border:1px solid var(--onae-border, #dde3ec);
  background:var(--onae-bg-elev, #fff);
}
.chapter-list > li::before{
  content:counter(ch);
  position:absolute; left:20px; top:19px;
  min-width:24px; height:24px;
  display:grid; place-items:center;
  border-radius:7px;
  background:var(--onae-brand, #1b4fd8);
  color:var(--onae-on-brand, #fff);
  font-size:12px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.chapter-list > li > h3{
  margin:0 0 10px;
  font-size:var(--onae-fs-h4, 16px);
  line-height:var(--onae-lh-snug, 1.45);
  letter-spacing:var(--onae-ls-title, -.022em);
  font-weight:750;
}
.chapter-list > li > h3 > a{
  color:var(--onae-text, #14181f);
  text-decoration:none;
}
.chapter-list > li > h3 > a:hover{ color:var(--onae-brand, #1b4fd8); text-decoration:underline; }
/* 목차 안의 등급 꼬리표 — 인라인. 위 규칙의 아래 여백을 여기서 지운다. */
.chapter-list > li > h3 > .tier-tag{
  margin:0 0 0 6px;
  padding:2px 8px;
  font-size:11.5px;
  vertical-align:2px;
}
.chapter-list > li > p{
  margin:0 0 10px;
  font-size:var(--onae-fs-body, 15px);
  line-height:var(--onae-lh-normal, 1.65);
}
.excerpt{
  margin:0 0 10px;
  font-size:var(--onae-fs-sm, 13.5px);
  line-height:var(--onae-lh-normal, 1.65);
  color:var(--onae-text-muted, #55606f);
}

/* ══ 7. 맨 아래 이동 ══════════════════════════════════════════════════════ */
.deep-link,
.back-link{ margin:26px 0 0; }
.deep-link a,
.back-link a,
.section .deep-link a{
  display:inline-block;
  padding:10px 18px;
  border-radius:var(--onae-radius-btn, 10px);
  border:1px solid var(--onae-border, #dde3ec);
  background:var(--onae-bg-soft, #f5f7fb);
  color:var(--onae-brand, #1b4fd8);
  font-size:var(--onae-fs-sm, 13.5px);
  font-weight:700;
  text-decoration:none;
}
.deep-link a:hover,
.back-link a:hover{
  background:var(--onae-brand, #1b4fd8);
  color:var(--onae-on-brand, #fff);
  border-color:var(--onae-brand, #1b4fd8);
}

/* 챕터 목록 안쪽의 '인터랙티브로 열기'는 작은 글자 링크로 둔다 —
 * 카드마다 큰 버튼이 붙으면 목록이 버튼밭이 된다. */
.chapter-list .deep-link{ margin:0; }
.chapter-list .deep-link a{
  padding:0; border:0; background:none;
  font-size:var(--onae-fs-xs, 12.5px);
  text-decoration:underline;
}
.chapter-list .deep-link a:hover{ background:none; color:var(--onae-brand-strong, #143da8); }

/* ══ 8. 좁은 화면 ═════════════════════════════════════════════════════════ */
@media (max-width:600px){
  body.onae-themed{ padding:0 12px 56px; }
  article.chapter-page,
  article.book-page{ margin-top:16px; padding:26px 18px 34px; border-radius:12px; }
  .section{ padding:16px 16px; }
  .chapter-list > li{ padding:16px 16px 16px 50px; }
  .chapter-list > li::before{ left:14px; top:17px; }
}

/* ══ 9. 인쇄 — 배경이 안 찍히면 흰 바탕에 흰 글자가 된다(AI교과서에서 실제로 겪음) ══ */
@media print{
  body.onae-themed{ background:#fff; padding:0; }
  article.chapter-page,
  article.book-page{ box-shadow:none; border:0; max-width:none; padding:0; }
  a.interactive-link,
  .deep-link, .back-link{ display:none; }
  .section{ break-inside:avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * ⑩ 원작 도서 안내 — 2026-08-02 사장님 지시
 *
 *   이 사이트의 글은 타 출판사 출간 도서의 **응용판(새 원고)** 이다.
 *   원작은 우리가 팔지 않는다. 그런데 그 사실이 흐릿하면
 *   독자가 '구독하면 그 책을 본다'고 오해하고, 그 피해는 구매자와 출판사에게 간다.
 *
 *   그래서 이 블록은 **눈에 띄어야 한다.** 본문에 스며들면 안 된다.
 *   경고처럼 보이지 않으면서도 분명히 구분되도록, 테두리와 바탕을 한 단계 달리 준다.
 *   색은 여기서도 새로 만들지 않는다 — --onae-* 토큰만 쓴다.
 * ══════════════════════════════════════════════════════════════════════════ */
aside.origin-book{
  margin:34px 0 0;
  padding:24px 26px 22px;
  border-radius:14px;
  border:1.5px solid var(--onae-border, #dde3ec);
  background:var(--onae-bg-soft, #f5f7fb);
}
.origin-badge{
  display:inline-block;
  margin:0 0 12px;
  padding:4px 12px;
  border-radius:99px;
  background:var(--onae-bg-elev, #fff);
  border:1px solid var(--onae-border, #dde3ec);
  color:var(--onae-text-muted, #55606f);
  font-size:var(--onae-fs-xs, 12.5px);
  font-weight:800;
  letter-spacing:.02em;
}
.origin-title{
  margin:0 0 4px !important;
  font-size:var(--onae-fs-h3, 19px) !important;
  line-height:var(--onae-lh-snug, 1.45);
  letter-spacing:var(--onae-ls-title, -.022em);
  font-weight:800;
}
.origin-pub{
  margin:0 0 16px;
  font-size:var(--onae-fs-sm, 13.5px);
  color:var(--onae-text-muted, #55606f);
}
/* ★ 가장 중요한 한 줄. 왼쪽 굵은 선으로 눈이 먼저 가게 한다. */
.origin-notice{
  margin:0 0 14px;
  padding:12px 16px;
  border-left:4px solid var(--onae-brand, #1b4fd8);
  border-radius:0 9px 9px 0;
  background:var(--onae-bg-elev, #fff);
  font-size:var(--onae-fs-body, 15px);
  line-height:var(--onae-lh-normal, 1.65);
}
.origin-what{
  margin:0 0 18px;
  font-size:var(--onae-fs-sm, 13.5px);
  line-height:var(--onae-lh-normal, 1.65);
  color:var(--onae-text-muted, #55606f);
}
.origin-links{ margin:0 0 14px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.origin-links li{ margin:0; }
.origin-links a{
  display:inline-block;
  padding:9px 16px;
  border-radius:var(--onae-radius-btn, 10px);
  background:var(--onae-brand, #1b4fd8);
  color:var(--onae-on-brand, #fff);
  font-size:var(--onae-fs-sm, 13.5px);
  font-weight:700;
  text-decoration:none;
}
.origin-links a:hover{ background:var(--onae-brand-strong, #143da8); }
.origin-cite{
  margin:0;
  padding-top:12px;
  border-top:1px solid var(--onae-border, #dde3ec);
  font-size:var(--onae-fs-xs, 12.5px);
  color:var(--onae-text-muted, #55606f);
}

/* 챕터 페이지의 한 줄 고지 — 짧지만 빠지면 안 된다 */
.origin-mini{
  margin:28px 0 0 !important;
  padding:13px 16px;
  border-radius:11px;
  border:1px dashed var(--onae-border, #dde3ec);
  background:var(--onae-bg-soft, #f5f7fb);
  font-size:var(--onae-fs-xs, 12.5px) !important;
  line-height:var(--onae-lh-snug, 1.45) !important;
  color:var(--onae-text-muted, #55606f);
}
.origin-mini a{ color:var(--onae-brand, #1b4fd8); font-weight:700; }

@media print{
  /* 인쇄물에도 이 고지는 남아야 한다 */
  aside.origin-book, .origin-mini{ border:1px solid #999; background:#fff; }
}