/* ============================================================
   에듀팡 액티북 테마 — "스터디노트" (C안)
   재사용 디자인 시스템. 새 책/샘플 = 이 CSS 링크 + 구조만 채우면 됨.
   특징: 크림 종이 · 초록/골드 포인트 · 세리프 제목 · 노트줄 · 차분/집중
   저장: E:\영어\_책HTML\_템플릿\스터디노트\theme.css
   ============================================================ */
/* 폰트 self-host: Pretendard는 index.html의 @font-face(fonts/)로 로컬 로드.
   Gowun Batang(제목 세리프)은 시스템 세리프(Batang/바탕/serif)로 폴백 — CDN 차단 환경 대응. */

:root{
  --edu:#1f8a70;        /* 메인 초록 (에듀팡 포인트 — 정확한 브랜드색 주면 교체) */
  --edu-d:#166b56;
  --gold:#c8912a;       /* 강조 골드 */
  --ink:#33322c;        /* 본문 */
  --soft:#726d61;       /* 보조 텍스트 */
  --paper:#faf6ec;      /* 종이 배경 */
  --card:#fffdf7;       /* 카드 */
  --line:#e7e0cf;       /* 선/테두리 */
  --note-line:#efe9d8;  /* 노트 줄 */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard','Malgun Gothic','맑은 고딕','Apple SD Gothic Neo',-apple-system,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}

/* 페이지 폭 컨테이너 (반응형) */
.sn-wrap{max-width:640px;margin:0 auto;padding:22px 14px 60px}

/* 상단 브랜드 바 */
.sn-top{display:flex;align-items:center;gap:10px;margin-bottom:15px;border-bottom:1px solid var(--line,#cfe4f0);padding-bottom:9px}
.sn-logo{font-family:'Pretendard','Malgun Gothic',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.2px;color:var(--edu-d)}
.sn-chip{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--soft,#6a8290)}

/* 섹션/챕터 헤더 */
.sn-hero{margin-bottom:20px}
.sn-hero .k{font-size:12px;letter-spacing:3px;color:var(--gold);font-weight:800}
.sn-hero h1{font-family:'Gowun Batang','Batang','바탕',serif;font-size:27px;font-weight:700;margin-top:4px;color:var(--ink)}
.sn-hero .rule{height:6px;width:60px;background:var(--edu);border-radius:3px;margin-top:10px}

/* 챕터 표지 변형 */
.sn-chapter{background:var(--edu);color:#fff;border-radius:16px;padding:52px 28px;text-align:center;margin-bottom:20px}
.sn-chapter .lab{font-size:13px;letter-spacing:4px;opacity:.85;font-weight:800}
.sn-chapter h1{font-family:'Gowun Batang','Batang','바탕',serif;font-size:34px;font-weight:700;margin-top:12px;line-height:1.25}

/* 학습 카드 (패턴/표현 공용) */
.sn-card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--edu);border-radius:4px 14px 14px 4px;padding:18px 20px;margin-bottom:15px;box-shadow:0 3px 10px rgba(80,70,40,.05)}
.sn-card .head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.sn-card .num{font-family:'Gowun Batang','Batang','바탕',serif;color:var(--edu);font-weight:700;font-size:22px}
.sn-card .pat{font-weight:700;font-size:16px;color:var(--soft)}
.sn-card .pat em{font-style:normal;color:var(--edu-d);border-bottom:2px solid var(--gold)}
.sn-card .play{margin-left:auto;background:none;border:1.5px solid var(--edu);color:var(--edu);border-radius:999px;width:32px;height:32px;font-size:13px;cursor:pointer}
.sn-card .en{font-size:18px;font-weight:700;line-height:1.55}
.sn-card .en .hl{color:var(--edu-d);background:#e8f4ee;padding:0 4px;border-radius:4px}
.sn-card .ko{color:var(--soft);font-size:14px;margin-top:6px}

/* 예문(노트줄) */
.sn-ex{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.sn-ex .line{font-size:15px;font-weight:600;padding:4px 0;background:repeating-linear-gradient(transparent,transparent 1.85em,var(--note-line) 1.85em,var(--note-line) calc(1.85em + 1px))}
.sn-ex .line .hl{color:var(--gold);font-weight:800}
.sn-ex .kt{display:block;color:#9a9280;font-size:12.5px;margin-top:0}

/* 2단 병기(홍보/도입 변형) */
.sn-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.sn-two{grid-template-columns:1fr}}
.sn-two .col{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.sn-two .col .h{font-weight:800;color:var(--edu-d);font-size:15px;margin-bottom:6px}
.sn-two .col .b{font-size:14px;color:var(--ink);line-height:1.6}

/* TIP 박스 */
.sn-tip{background:#f4efe2;border:1px solid var(--line);border-radius:12px;padding:15px 18px;margin-top:6px}
.sn-tip .t{color:var(--gold);font-weight:800;font-size:14px;margin-bottom:5px}
.sn-tip p{font-size:14px;color:var(--soft);line-height:1.65}