/*! onae-seo-doc.css v1.0.0 — 학교생활끝판왕 /c/ 정적 콘텐츠 페이지 레이아웃
 * ==========================================================================
 * 왜 만들었나 (2026-08-02)
 *   /c/ 1,166장은 이 사이트 검색 유입의 전부인데, 셋 다 안 되고 있었다.
 *     ① 자바스크립트가 켜져 있으면 곧바로 앱으로 튕겨서 이 페이지 자체가 안 보였다
 *     ② 본문이 <noscript> 안에만 있어서, 켜져 있는 화면에는 그려지지도 않았다
 *     ③ CSS 링크가 한 줄도 없어 서식이 아예 없었다
 *   자료가 좋은데 아무도 못 보는 상태였다. 그래서 '보이는 페이지'로 바꾸고
 *   이 파일이 그 페이지의 서식을 맡는다.
 *
 * 원칙
 *   ① 색과 크기를 새로 만들지 않는다. onae-themes.css / onae-typo.css 의
 *      --onae-* 토큰만 쓴다. 그 토큰들은 default·inverse·cute 세 테마 모두
 *      AA 이상으로 이미 검증돼 있다. 내가 색을 고르면 그 검증이 깨진다.
 *   ② 추측 선택자를 쓰지 않는다. 이 페이지들에만 붙이는 클래스만 적는다.
 *
 * 되돌리려면 : 각 페이지의 이 <link> 한 줄만 지우면 서식만 사라진다.
 * ========================================================================== */

body.onae-themed{
  background:var(--onae-bg-soft, #f5f7fb);
  color:var(--onae-text, #14181f);
  margin:0;
  padding:0 16px 72px;
}

/* ══ 맨 위 — 앱으로 가는 길을 가장 먼저 보여준다 ══════════════════════════
 * 이 페이지는 검색으로 들어오는 입구다. 읽고 끝나면 안 되고 앱으로 이어져야 한다.
 * 예전에는 '즉시 이동'으로 이었는데, 그 방식은 페이지 자체를 사라지게 했다.
 * 이제는 글을 보여주고, 그 위에 눈에 띄는 버튼을 둔다. */
a.seo-app-top{
  display:block;
  max-width:720px;
  margin:20px auto 0;
  padding:12px 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-align:center;
  text-decoration:none;
  box-shadow:var(--onae-shadow);
}
a.seo-app-top:hover{ background:var(--onae-brand-strong, #143da8); }

/* ══ 본문 판 ══════════════════════════════════════════════════════════════
 * 한 줄이 길수록 다음 줄 첫 글자를 찾기 어렵다. 한글은 45~50자가 편하다. */
article.seo-doc{
  max-width:720px;
  margin:24px auto 0;
  padding:36px clamp(20px, 4vw, 44px) 40px;
  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.seo-doc::before{
  content:"";
  display:block;
  height:3px; width:60px;
  margin:0 0 20px;
  border-radius:99px;
  background:var(--onae-brand, #1b4fd8);
}

article.seo-doc > h1{
  margin:0 0 14px;
  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;
}

/* 계열·유형 꼬리표 (「예체능 · 활동」) */
.seo-doc-tag{
  display:inline-block;
  margin:0 0 20px;
  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;
  text-decoration:none;
}
a.seo-doc-tag:hover{ border-color:var(--onae-brand, #1b4fd8); color:var(--onae-brand, #1b4fd8); }

/* 본문 — 이 페이지의 알맹이 */
article.seo-doc > p{
  margin:0 0 14px;
  font-size:var(--onae-fs-body, 15px);
  line-height:var(--onae-lh-normal, 1.65);
  letter-spacing:var(--onae-ls-body, -.011em);
}
article.seo-doc > p.seo-doc-body{
  padding:2px 0 2px 16px;
  border-left:3px solid var(--onae-brand, #1b4fd8);
  font-size:var(--onae-fs-lead, 17px);
}

/* 맨 아래 안내 + 앱 버튼 */
.seo-doc-more{
  margin:28px 0 0;
  padding:18px 20px;
  border-radius:12px;
  background:var(--onae-bg-soft, #f5f7fb);
  border:1px solid var(--onae-border, #dde3ec);
  font-size:var(--onae-fs-sm, 13.5px);
  color:var(--onae-text-muted, #55606f);
}
.seo-doc-more a{
  display:inline-block;
  margin-top:12px;
  padding:10px 18px;
  border-radius:var(--onae-radius-btn, 10px);
  background:var(--onae-brand, #1b4fd8);
  color:var(--onae-on-brand, #fff);
  font-weight:700;
  text-decoration:none;
}
.seo-doc-more a:hover{ background:var(--onae-brand-strong, #143da8); }

/* ══ 모음(허브) 페이지 — 같은 판 위에 목록만 다르다 ══════════════════════ */
article.seo-doc > ul{
  margin:0; padding-left:0; list-style:none;
}
article.seo-doc > ul > li{
  margin:0 0 10px;
  padding:14px 18px;
  border-radius:11px;
  border:1px solid var(--onae-border, #dde3ec);
  background:var(--onae-bg-elev, #fff);
}
article.seo-doc > ul > li > a{
  font-size:var(--onae-fs-body, 15px);
  font-weight:650;
  line-height:var(--onae-lh-snug, 1.45);
  letter-spacing:var(--onae-ls-title, -.022em);
  color:var(--onae-text, #14181f);
  text-decoration:none;
}
article.seo-doc > ul > li > a:hover{ color:var(--onae-brand, #1b4fd8); text-decoration:underline; }

/* ══ 좁은 화면 ═══════════════════════════════════════════════════════════ */
@media (max-width:600px){
  body.onae-themed{ padding:0 12px 56px; }
  article.seo-doc{ margin-top:14px; padding:26px 18px 32px; border-radius:12px; }
  article.seo-doc > ul > li{ padding:13px 15px; }
}

/* ══ 인쇄 — 배경이 안 찍히면 흰 바탕에 흰 글자가 된다(AI교과서에서 실제로 겪음) ══ */
@media print{
  body.onae-themed{ background:#fff; padding:0; }
  article.seo-doc{ box-shadow:none; border:0; max-width:none; padding:0; }
  a.seo-app-top, .seo-doc-more a{ display:none; }
}