/*
Theme Name: Wise Income
Theme URI: https://wiseincome.kr
Author: SL
Description: 와이즈인컴 — 무자본 단계부터 실전 수익화 기록을 담는 경량 커스텀 워드프레스 테마. 상단 메뉴, 굵은 타이포그래피, 라이트/다크 모드, 콘텐츠 우선 구조.
Version: 1.5.0
Requires PHP: 7.4
Text Domain: smart-income
*/

/* ==========================================================================
   0. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--si-bg);
  color: var(--si-text);
  font-family: var(--si-font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Surfaces (light, default) */
  --si-bg: #FBFAF7;
  --si-surface: #FFFFFF;
  --si-surface-muted: #F3F1EA;

  /* Text */
  --si-text: #24231F;
  --si-text-secondary: #6B6A62;
  --si-text-muted: #9B9A90;

  /* Borders */
  --si-border: rgba(36,35,31,0.12);
  --si-border-strong: rgba(36,35,31,0.22);

  /* Accent (teal — 1단계/애드센스·제휴 focus) */
  --si-accent: #0F6E56;
  --si-accent-bg: #E1F5EE;

  /* Stage colors */
  --si-stage1: #0F6E56;
  --si-stage2: #854F0B;
  --si-stage3: #993C1D;

  /* Dark block (used for tables / callouts only, light mode) */
  --si-dark-bg: #171714;
  --si-dark-text: #F5F4EF;
  --si-dark-text-secondary: #B7B6AC;
  --si-dark-border: rgba(255,255,255,0.12);

  /* Type — Noto Sans KR 전용, 굵기·사이즈로 위계를 만든다 (자체호스팅 예정) */
  --si-font-sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --si-font-serif: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;

  --si-radius: 8px;
  --si-radius-lg: 12px;
  --si-sidebar-w: 148px;
}

/* 블랙 모드 — body[data-theme="dark"] (기본값) */
body[data-theme="dark"] {
  --si-bg: #0A0A0B;
  --si-surface: #141416;
  --si-surface-muted: #1C1C1F;

  --si-text: #F7F7F5;
  --si-text-secondary: #B8B8B4;
  --si-text-muted: #7C7C78;

  --si-border: rgba(255,255,255,0.12);
  --si-border-strong: rgba(255,255,255,0.24);

  /* 비비드 포인트 컬러 — 강조가 필요한 곳에만 선명하게 */
  --si-accent: #4CFF8E;
  --si-accent-bg: rgba(76,255,142,0.14);

  --si-stage1: #4CFF8E;
  --si-stage2: #FFB93D;
  --si-stage3: #FF5C8A;

  /* 카테고리·태그용 비비드 팔레트 (5색) */
  --si-vivid-green: #4CFF8E;
  --si-vivid-cyan: #35E0FF;
  --si-vivid-pink: #FF4FA3;
  --si-vivid-amber: #FFB93D;
  --si-vivid-purple: #B47CFF;

  /* 다크 모드에서는 "강조 블록"이 반전되어 밝은 카드가 됨 */
  --si-dark-bg: #F5F4EF;
  --si-dark-text: #171714;
  --si-dark-text-secondary: #55534C;
  --si-dark-border: rgba(0,0,0,0.12);
}

/* 라이트 모드에서도 동일한 이름으로 접근 가능하도록 (톤을 살짝 낮춰서) */
:root {
  --si-vivid-green: #0F9D57;
  --si-vivid-cyan: #0891B2;
  --si-vivid-pink: #C2286B;
  --si-vivid-amber: #B5760C;
  --si-vivid-purple: #7C4FD4;
}

/* 카테고리별 비비드 컬러 유틸리티 — 글 안에서 si-eyebrow/si-post-cat 등에 조합해 사용 */
.si-vivid-green { color: var(--si-vivid-green) !important; }
.si-vivid-cyan { color: var(--si-vivid-cyan) !important; }
.si-vivid-pink { color: var(--si-vivid-pink) !important; }
.si-vivid-amber { color: var(--si-vivid-amber) !important; }
.si-vivid-purple { color: var(--si-vivid-purple) !important; }

/* 카테고리 자동 색상 매핑 (사이트 전역: 태그·활성메뉴 등에서 사용) */
.si-cat-adsense { color: var(--si-vivid-green) !important; }
.si-cat-affiliate { color: var(--si-vivid-cyan) !important; }
.si-cat-wordpress { color: var(--si-vivid-pink) !important; }
.si-cat-growth { color: var(--si-vivid-amber) !important; }


   2. Layout shell — 상단 메뉴 스타일
   ========================================================================== */
body { transition: background .15s ease, color .15s ease; }

.si-topbar {
  border-bottom: 1px solid var(--si-border);
  background: var(--si-bg);
  position: sticky;
  top: 0;
  z-index: 30;
}
.si-topbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.si-logo {
  font-family: var(--si-font-sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.si-logo a { color: var(--si-text); }

.si-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.si-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--si-text-secondary);
  padding: 8px 12px;
  border-radius: var(--si-radius);
}
.si-nav a:hover { background: var(--si-surface-muted); color: var(--si-text); }
.si-nav a.is-active { color: var(--si-text); font-weight: 700; }

.si-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* 라이트/다크 토글 */
.si-theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--si-text-secondary);
  background: var(--si-surface-muted);
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
}
.si-theme-toggle svg { width: 13px; height: 13px; }
.si-theme-toggle:hover { color: var(--si-text); }

.si-sidebar-toggle {
  display: none;
  border: 1px solid var(--si-border);
  background: var(--si-surface);
  border-radius: var(--si-radius);
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
}

/* 모바일 드롭다운 메뉴 (기본 숨김) */
.si-nav-mobile {
  display: none;
  flex-direction: column;
  padding: 4px 20px 16px;
  border-top: 1px solid var(--si-border);
}
.si-nav-mobile a {
  font-size: 14px;
  font-weight: 500;
  color: var(--si-text-secondary);
  padding: 10px 4px;
}
.si-nav-mobile a.is-active { color: var(--si-text); font-weight: 700; }
.si-nav-mobile.is-open { display: flex; }

.si-main { flex: 1; min-width: 0; padding: 48px 40px 100px; max-width: 1200px; }

/* 우측 광고 레일 — 넓은 화면에서만 표시 */
.si-content-area {
  display: flex;
  justify-content: center;
  gap: 32px;
  max-width: 1440px;
  margin: 0 auto;
}
.si-rail {
  width: 200px;
  flex-shrink: 0;
  padding: 48px 24px 100px 0;
  display: none;
}
.si-rail-slot {
  position: sticky;
  top: 72px;
}
.si-rail-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--si-text-muted);
  margin-bottom: 8px;
}
.si-rail-placeholder {
  width: 100%;
  min-height: 480px;
  border: 1px dashed var(--si-border-strong);
  border-radius: var(--si-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--si-text-muted);
  line-height: 1.6;
}

@media (min-width: 1650px) {
  .si-rail { display: block; }
}

/* ==========================================================================
   3. Typography — 크고 대범하게, 굵기와 사이즈로 위계를 표현
   ========================================================================== */
h1, .si-headline {
  font-family: var(--si-font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
h2 {
  font-family: var(--si-font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  font-size: 26px;
}
h3 {
  font-family: var(--si-font-sans);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  font-size: 18px;
}
.si-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--si-accent);
  margin-bottom: 10px;
  display: block;
}
.si-lede { color: var(--si-text-secondary); font-size: 15px; line-height: 1.75; font-weight: 400; }

.si-hero h1 { font-size: 52px; max-width: 640px; margin-bottom: 22px; }
.si-hero-desc { max-width: 480px; margin-bottom: 28px; font-size: 16px; }

/* 히어로 배경 — 은은하게 움직이는 라인 (가벼운 CSS 애니메이션, 무거운 JS 없음) */
.si-hero-wrap { position: relative; padding-top: 4px; }
.si-hero-bg {
  position: absolute;
  inset: -20px -40px auto -40px;
  height: 340px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.si-hero-bg svg { width: 100%; height: 100%; }
.si-hero-line {
  stroke: var(--si-accent);
  stroke-width: 1;
  opacity: 0.35;
  stroke-dasharray: 6 10;
  animation: si-line-drift 14s linear infinite;
}
.si-hero-line.l2 { stroke: var(--si-vivid-cyan); animation-duration: 18s; animation-direction: reverse; opacity: 0.28; }
.si-hero-line.l3 { stroke: var(--si-vivid-pink); animation-duration: 22s; opacity: 0.22; }
.si-hero-line.l4 { stroke: var(--si-vivid-amber); animation-duration: 16s; animation-direction: reverse; opacity: 0.2; }

@keyframes si-line-drift {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -200; }
}

.si-hero-wrap > *:not(.si-hero-bg) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .si-hero-line { animation: none; }
}

@media (max-width: 860px) {
  .si-hero-bg { display: none; }
}

@media (max-width: 860px) {
  .si-hero h1 { font-size: 34px; }
}

/* ==========================================================================
   4. Stage progress bar
   ========================================================================== */
.si-stages { display: flex; gap: 20px; margin: 0 0 32px; }
.si-stage { flex: 1; text-align: center; }
.si-stage-label { font-size: 11px; font-weight: 500; }
.si-stage-sub { font-size: 11px; color: var(--si-text-muted); margin-top: 2px; }
.si-stage-bar { height: 3px; border-radius: 2px; margin-top: 8px; background: var(--si-border); }
.si-stage.is-active .si-stage-label { color: var(--si-stage1); }
.si-stage.is-active .si-stage-bar { background: var(--si-stage1); }

/* ==========================================================================
   5. Post list (home / category)
   ========================================================================== */
.si-section-label { font-size: 12px; color: var(--si-text-muted); margin-bottom: 12px; }

.si-post-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--si-border);
}
.si-post-row .si-post-cat { font-size: 11px; color: var(--si-accent); display: block; margin-bottom: 4px; }
.si-post-row .si-post-title { font-family: var(--si-font-serif); font-size: 16px; }
.si-post-row .si-post-excerpt { font-size: 12px; color: var(--si-text-secondary); margin-top: 5px; }
.si-post-row .si-post-date { font-size: 12px; color: var(--si-text-muted); white-space: nowrap; }

/* ==========================================================================
   6. Post detail (single.php)
   ========================================================================== */
.si-post-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--si-border); }
.si-post-header h1 { font-size: 26px; max-width: 760px; margin-bottom: 14px; }
.si-post-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--si-text-muted); }

/* 본문 컨테이너는 1200px까지 넓게.
   [좁은 트랙 760px] 순수 읽는 텍스트: 문단, 리스트, 헤딩, 인용구, 라벨류
   [넓은 트랙 1200px] 시각 블록: 이미지, TL;DR/다크블록/패널/콜아웃/효과요약 박스 등 */
.si-post-content { max-width: 1200px; font-size: 15px; line-height: 1.85; }

/* 좁은 트랙 */
.si-post-content > p,
.si-post-content > ul,
.si-post-content > ol,
.si-post-content > h2,
.si-post-content > h3,
.si-post-content > blockquote,
.si-post-content > .si-tight,
.si-post-content > .si-editorial-sub,
.si-post-content > .si-footnote,
.si-post-content > .si-pullquote,
.si-post-content > .si-bigquote,
.si-post-content > .si-num-heading,
.si-post-content > .si-lead-caps,
.si-post-content > .si-tracked-heading {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.si-post-content > .si-tracked-heading,
.si-post-content > .si-lead-caps {
  margin-bottom: 0;
}

/* 넓은 트랙 — 컨테이너 폭(최대 1200px) 그대로 */
.si-post-content > img,
.si-post-content > .si-callout,
.si-post-content > .si-tldr,
.si-post-content > .si-aside,
.si-post-content > .si-dark-block,
.si-post-content > .si-panel,
.si-post-content > .si-inline-steps,
.si-post-content > .si-effect-summary {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.si-post-content p { margin: 0 0 18px; }
.si-post-content h2 {
  font-size: 18px;
  margin: 32px 0 12px;
}
/* 이미지는 좁히지 않고 본문 컨테이너 폭(최대 1200px) 그대로 표시 */
.si-post-content img {
  border-radius: var(--si-radius-lg);
  margin: 20px 0;
  display: block;
}

/* ---- Dark callout / table block: high-contrast for key data ---- */
.si-dark-block {
  background: var(--si-dark-bg);
  color: var(--si-dark-text);
  border-radius: var(--si-radius-lg);
  padding: 20px 22px;
  margin: 24px 0;
}
.si-dark-block table { width: 100%; border-collapse: collapse; font-size: 13px; }
.si-dark-block th, .si-dark-block td {
  text-align: left;
  padding: 10px 4px;
  border-bottom: 1px solid var(--si-dark-border);
}
.si-dark-block th { color: var(--si-dark-text-secondary); font-weight: 500; font-size: 12px; }
.si-dark-block tr:last-child th, .si-dark-block tr:last-child td { border-bottom: none; }
.si-dark-block .si-dark-label { font-size: 11px; color: var(--si-dark-text-secondary); margin-bottom: 10px; }

/* ==========================================================================
   7. Category header
   ========================================================================== */
.si-cat-header { margin-bottom: 32px; }
.si-cat-header h1 { font-size: 26px; margin-bottom: 10px; }

/* ==========================================================================
   8. About page
   ========================================================================== */
.si-quote { font-family: var(--si-font-serif); font-size: 22px; line-height: 1.5; max-width: 440px; margin-bottom: 14px; }
.si-quote-by { font-size: 12px; color: var(--si-text-secondary); }

.si-timeline { max-width: 520px; margin-top: 28px; }
.si-timeline-item { display: flex; gap: 14px; padding-bottom: 22px; }
.si-timeline-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.si-timeline-stage { font-size: 11px; font-weight: 500; margin-bottom: 2px; }
.si-timeline-title { font-family: var(--si-font-serif); font-size: 15px; margin-bottom: 4px; }
.si-timeline-desc { font-size: 12px; color: var(--si-text-secondary); line-height: 1.6; }

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .si-nav { display: none; }
  .si-sidebar-toggle { display: flex; }
  .si-main { padding: 24px 20px 60px; }
  .si-topbar-inner { padding: 14px 20px; gap: 16px; }
  .si-stages { flex-direction: column; gap: 10px; }
}

/* ==========================================================================
   10. 포스트 디자인 효과 실험용 유틸리티 클래스
   — 글마다 다르게 적용해보는 "시안" 모음. 확정되면 이 섹션만 정리하면 됨.
   ========================================================================== */

/* 드롭캡: 첫 글자를 크게 */
.si-dropcap::first-letter {
  font-family: var(--si-font-serif);
  font-size: 52px;
  font-weight: 500;
  float: left;
  line-height: 0.85;
  padding: 4px 8px 0 0;
  color: var(--si-accent);
}

/* 하이라이터: 형광펜 느낌 (일반 에디터에서 적용 어려운 효과) */
.si-mark {
  background: linear-gradient(to bottom, transparent 60%, var(--si-accent-bg) 60%);
  padding: 0 2px;
}

/* 자간 넓은 라벨형 헤딩 */
.si-tracked-heading {
  font-family: var(--si-font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--si-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

/* 풀쿼트: 큰 인용구 블록 */
.si-pullquote {
  font-family: var(--si-font-serif);
  font-size: 24px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--si-text);
  border-left: 3px solid var(--si-accent);
  padding: 4px 0 4px 24px;
  margin: 28px 0;
}

/* 넘버링 헤딩: 큰 숫자 + 제목 */
.si-num-heading { display: flex; align-items: baseline; gap: 14px; margin: 32px 0 14px; }
.si-num-heading .num {
  font-family: var(--si-font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--si-border-strong);
  line-height: 1;
}
.si-num-heading .txt {
  font-family: var(--si-font-serif);
  font-size: 19px;
  font-weight: 500;
}

/* 타이트 리딩(행간 좁힘) 문단 */
.si-tight p { line-height: 1.55; }

/* 교차 배경 패널 */
.si-panel {
  background: var(--si-surface-muted);
  border-radius: var(--si-radius-lg);
  padding: 20px 24px;
  margin: 24px 0;
}
.si-panel h3 { margin-bottom: 10px; }

/* 체크/엑스 비교 리스트 */
.si-check-list, .si-x-list { list-style: none; margin: 0; padding: 0; }
.si-check-list li, .si-x-list li {
  padding: 8px 0 8px 26px;
  position: relative;
  font-size: 14px;
}
.si-check-list li::before {
  content: "✓"; position: absolute; left: 0; color: var(--si-stage1); font-weight: 700;
}
.si-x-list li::before {
  content: "✕"; position: absolute; left: 0; color: var(--si-stage3); font-weight: 700;
}

/* TL;DR 요약 박스 (글 최상단용) */
.si-tldr {
  background: var(--si-surface);
  border: 1px solid var(--si-border-strong);
  border-radius: var(--si-radius-lg);
  padding: 18px 22px;
  margin: 0 0 28px;
}
.si-tldr .si-tracked-heading { margin-bottom: 10px; }
.si-tldr ul { margin: 0; padding-left: 18px; }
.si-tldr li { font-size: 14px; line-height: 1.7; margin-bottom: 4px; }

/* 에디토리얼 이탤릭 서브헤딩 */
.si-editorial-sub {
  font-family: var(--si-font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--si-text-secondary);
  margin: -6px 0 20px;
}

/* 각주형 참고 노트 */
.si-footnote {
  font-size: 12px;
  color: var(--si-text-muted);
  border-top: 1px dashed var(--si-border-strong);
  padding-top: 8px;
  margin-top: 8px;
}

/* 효과 정리 박스 (글 하단, 시안 비교용) */
.si-effect-summary {
  margin-top: 40px;
  padding: 18px 22px;
  border-radius: var(--si-radius-lg);
  background: var(--si-dark-bg);
  color: var(--si-dark-text);
}
.si-effect-summary .si-dark-label { color: var(--si-dark-text-secondary); margin-bottom: 8px; }
.si-effect-summary ul { margin: 0; padding-left: 18px; }
.si-effect-summary li { font-size: 13px; line-height: 1.8; color: var(--si-dark-text); }

/* ==========================================================================
   11. 추가 디자인 효과 (2차 시안 확장분)
   ========================================================================== */

/* 인라인 큰 숫자 강조 */
.si-stat-inline {
  font-family: var(--si-font-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--si-accent);
}

/* 질문형 콜아웃 박스 — 독자에게 직접 묻는 문장을 담는 박스 */
.si-callout {
  background: var(--si-accent-bg);
  border-radius: var(--si-radius-lg);
  padding: 18px 22px;
  margin: 26px 0;
  font-family: var(--si-font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--si-text);
}

/* 밑줄 악센트 헤딩 */
.si-underline {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--si-accent);
}

/* 큰 장식용 인용부호 + 풀쿼트 */
.si-bigquote { position: relative; margin: 30px 0; padding-left: 36px; }
.si-bigquote::before {
  content: "“";
  font-family: var(--si-font-serif);
  font-size: 64px;
  color: var(--si-border-strong);
  position: absolute;
  left: -6px;
  top: -18px;
  line-height: 1;
}
.si-bigquote p {
  font-family: var(--si-font-serif);
  font-size: 20px;
  line-height: 1.55;
  font-weight: 500;
  margin: 0;
}

/* 사이드 노트 / 팁 박스 */
.si-aside {
  border: 1px solid var(--si-border-strong);
  border-left: 3px solid var(--si-accent);
  border-radius: 0 var(--si-radius-lg) var(--si-radius-lg) 0;
  padding: 14px 18px;
  margin: 22px 0;
  font-size: 13.5px;
  color: var(--si-text-secondary);
}
.si-aside strong { color: var(--si-text); }

/* 본문 내 미니 스텝 인디케이터 */
.si-inline-steps { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.si-inline-steps span {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--si-surface-muted);
  color: var(--si-text-secondary);
}
.si-inline-steps span.on { background: var(--si-accent-bg); color: var(--si-accent); font-weight: 500; }

/* 도입부 자간 넓은 캡스 라인 */
.si-lead-caps {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--si-text-muted);
  margin-bottom: 14px;
}

/* ==========================================================================
   12. 디자인 효과 모음 페이지
   ========================================================================== */
.si-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
  margin-bottom: 12px;
}
.si-effect-card {
  border: 1px solid var(--si-border);
  border-radius: var(--si-radius-lg);
  padding: 20px 22px;
  background: var(--si-surface);
}
.si-effect-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--si-border);
}
.si-effect-name { font-size: 14px; font-weight: 700; }
.si-effect-class {
  font-size: 11px;
  color: var(--si-accent);
  background: var(--si-accent-bg);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: monospace;
}
.si-effect-demo { font-size: 14px; }
.si-effect-demo p { margin: 0 0 10px; }
.si-effect-demo h2 { font-size: 16px; }

@media (max-width: 860px) {
  .si-effects-grid { grid-template-columns: 1fr; }
}