/* ==========================================
   전국러닝협회 — 공통 스타일
   베이스: White / Dark Gray
   포인트: Red (#c0392b)
   ========================================== */

* { box-sizing: border-box; }

body {
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #1a1a1a;
  background: #ffffff;
}

/* ── 유틸리티 ─────────────────────────── */
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 헤더 ─────────────────────────────── */
#main-header.scrolled nav {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.nav-link.active {
  color: #c0392b;
  border-bottom-color: #c0392b !important;
}

/* ── 히어로 슬라이더 ──────────────────── */
.hero-slide { transition: opacity 1s ease-in-out; }
.hero-slide.active { opacity: 1; }
.hero-dot { cursor: pointer; transition: all 0.3s; }
.hero-dot.active { width: 2rem; background: white; }

.scroll-line { animation: scrollDown 1.5s ease-in-out infinite; }
@keyframes scrollDown {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(400%);  }
}

/* ── 페이지 히어로 (내부 페이지 상단 배너) ─ */
.page-hero {
  background: #111111;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 48px;
  background: #f9fafb;          /* 아래 배경색과 맞춤 */
  clip-path: ellipse(55% 100% at 50% 100%);
}
/* 활동 목록은 흰 배경 */
.page-hero-white::after { background: #ffffff; }

/* ── 섹션 구분선 (레드 포인트) ─────────── */
.section-divider {
  width: 36px; height: 3px;
  background: #c0392b; border-radius: 2px;
  margin-top: 10px;
}
.section-divider-center {
  width: 36px; height: 3px;
  background: #c0392b; border-radius: 2px;
  margin: 10px auto 0;
}

/* ── 빵 부스러기 ──────────────────────── */
.breadcrumb a        { color: rgba(255,255,255,0.55); }
.breadcrumb a:hover  { color: #fff; }
.breadcrumb span     { color: rgba(255,255,255,0.35); }

/* ── 카드 호버 ────────────────────────── */
.activity-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.activity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* ── 타임라인 ─────────────────────────── */
.timeline-item { position: relative; padding-left: 2.5rem; }
.timeline-item::before {
  content: ''; position: absolute; left: 0.55rem; top: 0.3rem;
  width: 10px; height: 10px;
  background: #c0392b; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #c0392b;
}
.timeline-item::after {
  content: ''; position: absolute; left: 0.98rem; top: 1.2rem; bottom: -0.5rem;
  width: 1px; background: #e5e7eb;
}
.timeline-item:last-child::after { display: none; }

/* ── 조직도 카드 ──────────────────────── */
.org-card { transition: transform 0.2s, box-shadow 0.2s; }
.org-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* ── 스피너 ───────────────────────────── */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid #e5e7eb;
  border-top-color: #c0392b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 토스트 ───────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: #1a1a1a; color: #fff;
  padding: 12px 20px; border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  transform: translateY(80px); opacity: 0;
  transition: all 0.3s ease;
}
.toast.show  { transform: translateY(0); opacity: 1; }
.toast.success { background: #166534; }
.toast.error   { background: #c0392b; }

/* ── Quill 에디터 ─────────────────────── */
.ql-container        { min-height: 300px; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; }
.ql-toolbar          { border-radius: 8px 8px 0 0 !important; border-color: #e5e7eb !important; }
.ql-container.ql-snow{ border-radius: 0 0 8px 8px !important; border-color: #e5e7eb !important; }

/* ── 리치텍스트 본문 렌더링 ────────────── */
.prose-content h2 { font-size: 1.2rem; font-weight: 700; color: #111; margin: 1.5rem 0 0.6rem; }
.prose-content h3 { font-size: 1.05rem; font-weight: 600; color: #374151; margin: 1.2rem 0 0.5rem; }
.prose-content p  { margin: 0.7rem 0; line-height: 1.9; color: #4b5563; }
.prose-content ul { list-style: disc;    padding-left: 1.4rem; margin: 0.7rem 0; }
.prose-content ol { list-style: decimal; padding-left: 1.4rem; margin: 0.7rem 0; }
.prose-content li { margin: 0.35rem 0; color: #4b5563; line-height: 1.75; }
.prose-content strong { color: #111; }
.prose-content blockquote {
  border-left: 3px solid #c0392b; padding-left: 1rem;
  color: #6b7280; font-style: italic; margin: 1rem 0;
}
.prose-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose-content th { background: #f3f4f6; color: #111; font-weight: 600; padding: 8px 12px; border: 1px solid #e5e7eb; text-align: left; }
.prose-content td { padding: 8px 12px; border: 1px solid #e5e7eb; color: #4b5563; }

/* ── 갤러리 ───────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 10px; }
.gallery-item { aspect-ratio: 4/3; overflow: hidden; border-radius: 8px; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.gallery-item:hover img { transform: scale(1.05); }

/* ── 라이트박스 ───────────────────────── */
#lightbox {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.92); z-index: 1000;
  align-items: center; justify-content: center;
}
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 6px; }

/* ── 관리자 사이드바 ──────────────────── */
.admin-sidebar-link.active {
  background: rgba(255,255,255,0.12);
  color: #fff; font-weight: 600;
}

/* ── 통계 숫자 ────────────────────────── */
.stat-number { color: #c0392b; }

/* ── 스크롤 탑 ────────────────────────── */
#scroll-top { transition: opacity 0.3s, transform 0.3s; }

/* ── 모바일 메뉴 ──────────────────────── */
#mobile-menu { transition: all 0.3s ease; }

/* ── 반응형 보조 ──────────────────────── */
@media (max-width: 640px) {
  .page-hero { padding-top: 5.5rem !important; padding-bottom: 3.5rem !important; }
}

@media print {
  header, footer, .no-print { display: none !important; }
}