/* ==========================================================================
   ai-theme.css — "AI 미래형" 오버레이 테마 (app.css 뒤에 로드)
   추가 레이어 방식: 기존 구조를 건드리지 않고 위에 덧입힘. 되돌리려면 이 링크만 제거.
   컨셉: 딥스페이스 그라디언트 + 글래스모피즘 + 네온 글로우 + 3D 모션
   ========================================================================== */

:root {
  --ai-cyan: #22d3ee;
  --ai-violet: #a855f7;
  --ai-indigo: #6366f1;
  --ai-blue: #3b82f6;
  --ai-glow: 0 0 24px rgba(99, 102, 241, 0.45);
  --ai-glow-cyan: 0 0 22px rgba(34, 211, 238, 0.40);
  --font-tech: "Space Grotesk", "Pretendard", system-ui, sans-serif;

  /* 페이퍼 카드(하이브리드 밝은 표면): 다크 배경 위에 놓이는 장문 읽기 표면용 */
  --paper-bg: #fffdf8;
  --paper-bg-alt: #faf5e9;
  --paper-ink: #1c2032;
  --paper-ink-soft: #454b63;
  --paper-muted: #767d94;
  --paper-border: #e7dfca;
  --paper-border-glow: rgba(212, 168, 67, 0.35);
  --paper-shadow: 0 22px 60px rgba(3, 6, 18, 0.55), 0 2px 0 rgba(255,255,255,0.6) inset;
  --paper-radius: 18px;
}

/* ---------------- 1. AI 딥스페이스 배경 ---------------- */
body { background: #070b16; }

/* 고정 애니메이션 그라디언트 메시 + 글로우 blob + 그리드 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(99,102,241,0.28), transparent 60%),
    radial-gradient(900px 500px at 95% 8%, rgba(34,211,238,0.18), transparent 55%),
    radial-gradient(1000px 700px at 70% 100%, rgba(168,85,247,0.22), transparent 60%),
    linear-gradient(135deg, #070b16 0%, #0b1024 40%, #0a1230 70%, #070b16 100%);
  background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%;
  animation: aiMeshDrift 26s ease-in-out infinite;
}
/* 미세 그리드 오버레이 (AI/기술 느낌) */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(120,140,220,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,220,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}
@keyframes aiMeshDrift {
  0%,100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
  50%     { background-position: 30% 20%, 60% 30%, 40% 70%, 100% 50%; }
}
/* ai-fx.js 파티클(별자리) 캔버스 */
#aiParticles { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55; }

/* ---------------- 2. 타이포그래피 (AI/미래형) ---------------- */
body { color: #e7ecf6; }
h1, h2, h3, h4 { color: #f4f7ff; letter-spacing: -0.02em; }
.hero-eyebrow, .section-sub, .stat-badge small, .role-badge, .tier-badge, .chapter-no {
  font-family: var(--font-tech); letter-spacing: 0.04em;
}
/* 히어로 대제목: 네온 그라디언트 텍스트 */
.hero h1, .page-hero h1 {
  background: linear-gradient(100deg, #ffffff 0%, #c7d2fe 40%, #67e8f9 75%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  background-size: 220% auto; animation: aiTextShine 8s linear infinite;
}
@keyframes aiTextShine { to { background-position: 220% center; } }
/* 섹션 제목 앞 네온 바 */
.section-head h2 { position: relative; padding-left: 0.9rem; }
.section-head h2::before {
  content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px;
  border-radius: 4px; background: linear-gradient(180deg, var(--ai-cyan), var(--ai-violet));
  box-shadow: var(--ai-glow-cyan);
}

/* ---------------- 3. 프리미엄 글래스 헤더 ---------------- */
.site-header {
  background: rgba(10, 15, 32, 0.62) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(140, 160, 240, 0.16);
  box-shadow: 0 8px 40px rgba(2, 6, 20, 0.55);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ai-indigo), var(--ai-cyan), transparent);
  opacity: 0.8;
}
.logo-text { color: #f4f7ff; }
.logo-mark {
  background: linear-gradient(135deg, var(--ai-indigo), var(--ai-cyan)) !important;
  color: #fff !important; box-shadow: var(--ai-glow);
  border-radius: 12px;
}
/* 내비게이션: 언더라인 글로우 애니메이션 */
.main-nav a { color: #cdd6ee !important; position: relative; font-weight: 600; }
.main-nav a::after {
  content: ""; position: absolute; left: 10%; right: 90%; bottom: -6px; height: 2px;
  background: linear-gradient(90deg, var(--ai-cyan), var(--ai-violet));
  border-radius: 2px; transition: right 0.32s var(--ease-premium), left 0.32s var(--ease-premium);
  box-shadow: var(--ai-glow-cyan);
}
/* 호버백화 버그 수정: app.css의 .main-nav a:hover가 밝은 라벤더 배경(--color-indigo-light)을
   깔기 때문에, 여기서 흰 글씨(#fff)만 !important로 얹으면 흰 배경 위 흰 글씨가 되어 텍스트가
   사라져 보였다. 배경을 다크 글래스 톤으로 함께 지정해 항상 대비를 유지한다. */
.main-nav a:hover, .main-nav a.active, .main-nav a.is-active {
  color: #ffffff !important;
  background: rgba(99, 102, 241, 0.22) !important;
  border-radius: 999px;
}
.main-nav a:hover::after, .main-nav a.active::after, .main-nav a.is-active::after { left: 10%; right: 10%; }
.role-badge {
  background: rgba(99,102,241,0.16) !important; color: #c7d2fe !important;
  border: 1px solid rgba(140,160,240,0.28);
}
.role-switcher-btn {
  background: rgba(255,255,255,0.06) !important; color: #e7ecf6 !important;
  border: 1px solid rgba(140,160,240,0.22) !important;
}
.role-switcher-btn:hover { border-color: var(--ai-cyan) !important; box-shadow: var(--ai-glow-cyan); }

/* ---------------- 4. 콘텐츠 표면: 다크 글래스 카드 ---------------- */
.section-head h2, .section-head { color: #f4f7ff; }
/* "흰 박스에 흰 글씨" 전수 점검: app.css가 var(--color-surface)(흰색)를 배경으로 쓰는
   컴포넌트는 전부 여기에 포함시켜 다크 글래스 표면 + 밝은 텍스트로 통일한다.
   (gate-box·subject-method-item이 누락되어 있어 흰 배경에 밝은 본문 글씨가 겹쳐 보이지 않던 버그) */
.card, .book-card, .chapter-card, .news-item, .subject-card, .pricing-card,
.detail-hero, .sources-box, .accordion, .stat-badge,
.gate-box, .subject-method-item, .tab-btn, .accordion-item, .role-dropdown {
  background: rgba(18, 24, 46, 0.55) !important;
  border: 1px solid rgba(140, 160, 240, 0.16) !important;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #e7ecf6;
}
.card *, .book-card *, .chapter-card *, .news-item *, .subject-card *,
.gate-box *, .subject-method-item *, .accordion-item * { color: inherit; }
.book-card:hover, .chapter-card:hover, .card:hover, .news-item.is-clickable:hover {
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow: 0 18px 50px rgba(4, 8, 24, 0.6), 0 0 0 1px rgba(34,211,238,0.25), var(--ai-glow) !important;
  transform: translateY(-4px);
}
.text-muted, .muted, .card-sub, .news-date, .footer-desc { color: #c2cfe8 !important; }

/* 게이트/잠금 박스: 다크 글래스 표면 위 골드 아이콘 강조 + 밝은 본문 텍스트 */
.gate-box h3 { color: #ffd97a !important; }
.gate-box p { color: #c2cfe8 !important; }
.gate-box .gate-icon { filter: drop-shadow(0 0 10px rgba(212,168,67,0.55)); }

/* 탭 버튼(뉴스 태그 필터 등): 기본 상태도 다크 글래스로 통일, 활성/호버 시에만 강조색 */
.tab-btn { color: #cdd6ee !important; }
.tab-btn:hover { border-color: var(--ai-cyan) !important; color: #ffffff !important; background: rgba(34,211,238,0.14) !important; }
.tab-btn.active {
  background: linear-gradient(120deg, var(--ai-indigo), var(--ai-violet)) !important;
  border-color: transparent !important; color: #fff !important;
}

/* 과목별 활용법 카드 */
.subject-method-item .method-source { color: #9aa6c8 !important; }

/* 역할 전환 드롭다운(다크 글래스 통일) */
.role-dropdown li button { color: #e7ecf6 !important; }
.role-dropdown li button:hover { background: rgba(99,102,241,0.18) !important; }

/* 도서 상세 히어로: .detail-hero는 다크 글래스지만 자식 요소는 .card *류 상속 목록에
   없어 app.css의 어두운 회색(--color-ink-soft/--color-muted)이 그대로 남아 저대비였다. */
.detail-hero .detail-audience { color: #a9b6d6 !important; }
.detail-hero .detail-summary { color: #e8ecf7 !important; }
/* .upgrade-badge-note는 자체 라이트 골드 배경(--color-gold-light) + 다크 골드 텍스트 조합이라
   이미 대비가 확보되어 있으므로 별도 오버라이드하지 않는다. */

/* ---------------- 4.5 뉴스 카드: 골드 제목 · 밝은 본문 · 은은한 날짜 ---------------- */
.news-item h3 { color: #ffd97a !important; font-weight: 800; }
.news-item p { color: #e8ecf7 !important; }
.news-item .news-date { color: #a9b6d6 !important; }
.news-item .chip { color: var(--paper-ink) !important; }

/* ---------------- 4.6 요금제 카드: 다크 글래스 위 밝은 텍스트 (자식 요소는 .card * 상속 대상이
   아니므로 app.css의 어두운 잉크색이 그대로 남아 다크 카드 위에서 안 보이던 문제를 개별 지정으로 해결) */
.pricing-card h3 { color: #f4f7ff !important; }
.pricing-card .pricing-price { color: #ffd97a !important; }
.pricing-card .pricing-price span { color: #a9b6d6 !important; }
.pricing-card .pricing-features li { color: #e8ecf7 !important; }
.pricing-card .pricing-features li.unavailable { color: #7c88ab !important; }
.pricing-card .pricing-features li.unavailable::before { color: #7c88ab !important; }

/* ---------------- 5. 대상별 바로가기: 3D 네온 글래스 타일 ---------------- */
.quicklink-grid { perspective: 1000px; gap: 1.1rem; }
.quicklink-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(30,38,74,0.75), rgba(12,18,40,0.75)) !important;
  border: 1px solid rgba(140,160,240,0.22) !important;
  border-radius: 20px; padding: 1.6rem 1rem !important;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  color: #eaf0ff !important; font-weight: 700;
  transform-style: preserve-3d; transition: transform 0.18s var(--ease-premium), box-shadow 0.3s, border-color 0.3s;
  will-change: transform;
}
/* 회전 그라디언트 테두리 광선 */
.quicklink-card::before {
  content: ""; position: absolute; inset: -40%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(34,211,238,0.35) 60deg, transparent 140deg, rgba(168,85,247,0.35) 220deg, transparent 300deg);
  animation: aiSpin 6s linear infinite; opacity: 0; transition: opacity 0.35s;
}
.quicklink-card:hover::before { opacity: 1; }
.quicklink-card > * { position: relative; z-index: 1; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
.quicklink-card:hover {
  border-color: rgba(34,211,238,0.7) !important;
  box-shadow: 0 22px 60px rgba(4,8,24,0.7), var(--ai-glow) !important;
}
/* 아이콘을 발광 오브로 */
.qc-icon {
  font-size: 1.9rem; width: 66px; height: 66px; display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.55), rgba(12,18,40,0.4));
  box-shadow: inset 0 0 18px rgba(34,211,238,0.35), 0 0 26px rgba(99,102,241,0.4);
  border: 1px solid rgba(140,160,240,0.3);
}
/* 대상별 바로가기 카드 표지 썸네일: qc-icon과 동일한 원형 프레임에 실제 표지 이미지를 담는다.
   래퍼가 원형 프레임(사이즈·발광 보더)을 소유하고, 이미지는 object-fit:cover로 꽉 채운다.
   onerror 시 img를 숨기고 형제 qc-icon(이모지)을 노출하는 구조라 래퍼 크기가 둘 다에 맞아야 한다. */
.qc-thumb-wrap {
  position: relative;
  width: 66px; height: 66px; display: grid; place-items: center;
  border-radius: 50%; overflow: visible;
}
.qc-thumb {
  width: 66px; height: 66px; object-fit: cover; object-position: top center;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,0.55), rgba(12,18,40,0.4));
  box-shadow: inset 0 0 18px rgba(34,211,238,0.35), 0 0 26px rgba(99,102,241,0.4);
  border: 1px solid rgba(140,160,240,0.3);
}
.qc-thumb-wrap .qc-icon { position: absolute; inset: 0; }

/* ---------------- 6. 버튼: 네온 그라디언트 ---------------- */
.btn-primary, .btn-solid {
  background: linear-gradient(120deg, var(--ai-indigo), var(--ai-violet)) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 8px 24px rgba(99,102,241,0.4);
}
.btn-primary:hover, .btn-solid:hover {
  box-shadow: 0 10px 30px rgba(99,102,241,0.6), var(--ai-glow-cyan) !important;
  transform: translateY(-2px) !important;
}
.btn-outline {
  border: 1px solid rgba(140,160,240,0.4) !important; color: #dbe3ff !important;
  background: rgba(255,255,255,0.04) !important;
}
.btn-outline:hover { border-color: var(--ai-cyan) !important; box-shadow: var(--ai-glow-cyan); }

/* 실버그 수정: 밝은 페이퍼 카드/모달 위의 .btn-outline은 어두운 잉크 텍스트로 반전
   (테마 기본 .btn-outline은 다크 배경 전제라 밝은 표면에서 보이지 않음) */
.modal .btn-outline,
.paper-card .btn-outline,
.lock-overlay .btn-outline,
.section-locked .btn-outline {
  color: var(--paper-ink) !important;
  border: 1.5px solid rgba(28, 32, 50, 0.28) !important;
  background: rgba(28, 32, 50, 0.04) !important;
}
.modal .btn-outline:hover,
.paper-card .btn-outline:hover,
.lock-overlay .btn-outline:hover,
.section-locked .btn-outline:hover {
  border-color: var(--ai-indigo) !important;
  color: var(--ai-indigo) !important;
  background: rgba(99,102,241,0.08) !important;
  box-shadow: none;
}
/* 모달 탭(비활성)도 밝은 표면이므로 어두운 텍스트 유지 */
.modal .modal-tab { color: var(--paper-ink-soft) !important; background: var(--paper-bg-alt) !important; border-color: var(--paper-border) !important; }
.modal .modal-tab.active { background: var(--ai-indigo) !important; border-color: var(--ai-indigo) !important; color: #fff !important; }

/* ---------------- 6.5 하이브리드 페이퍼 카드 ----------------
   챕터 리더/모달처럼 장문 판독이 필요한 표면은 다크 코스믹 배경 위에
   "의도적으로 밝은 종이 카드"로 띄운다. ivory 배경 + 짙은 잉크 텍스트 +
   따뜻한 보더 + 은은한 골드 글로우 + 소프트 섀도우로 통일. */
.section-block,
.chapter-block,
.prompt-box,
.tip-box,
.mission-box,
.checklist-box,
.sources-box,
.activity-card,
.chapter-reader,
.modal {
  background: var(--paper-bg) !important;
  color: var(--paper-ink) !important;
  border: 1px solid var(--paper-border) !important;
  border-radius: var(--paper-radius) !important;
  box-shadow: var(--paper-shadow) !important;
}

/* 챕터 리더 아티클 자체는 카드가 아니라 여러 카드를 담는 컨테이너이므로
   배경/그림자 없이 안쪽 카드 간격만 정리한다 */
.chapter-reader {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #e7ecf6 !important;
}
.chapter-reader-head { color: #f4f7ff; }
.chapter-reader-head h1 { color: #f4f7ff; }
.chapter-reader-head .chapter-intro { color: #c2cfe8; }

/* 섹션 블록: 테두리에 은은한 골드 글로우로 "의도적" 카드임을 강조 */
.section-block {
  padding: 1.7rem 1.8rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--paper-shadow), 0 0 0 1px var(--paper-border-glow) !important;
}
.section-block-head h3 { color: var(--paper-ink) !important; }
.section-block-body p,
.section-block-body li { color: var(--paper-ink-soft) !important; }
.section-block .tier-badge { color: inherit; }

/* 페이퍼 카드 내부 텍스트는 무조건 어두운 잉크로 통일 (라이트 온 라이트 방지) */
.section-block *, .chapter-block *, .prompt-box *, .tip-box *, .mission-box *,
.checklist-box *, .sources-box *, .activity-card *, .modal * {
  color: inherit;
}
.section-block h1, .section-block h2, .section-block h3, .section-block h4,
.chapter-block h1, .chapter-block h2, .chapter-block h3, .chapter-block h4,
.mission-box h3, .checklist-box h3, .sources-box h3,
.modal h2 {
  color: var(--paper-ink) !important;
}
.section-block p, .chapter-block p, .mission-box p, .activity-card p,
.prompt-example p, .modal-note, .modal p {
  color: var(--paper-ink-soft) !important;
}
.modal-note { color: var(--paper-muted) !important; }
.modal label, .modal-form label { color: var(--paper-ink) !important; }
.modal input[type="text"], .modal input[type="email"], .modal select {
  background: var(--paper-bg-alt) !important;
  color: var(--paper-ink) !important;
  border: 1px solid var(--paper-border) !important;
}
.modal-close {
  background: var(--paper-bg-alt) !important;
  color: var(--paper-muted) !important;
}
.modal-close:hover { background: var(--paper-border) !important; color: var(--paper-ink) !important; }
.modal-divider { border-top: 1px dashed var(--paper-border) !important; }

/* 체크리스트 / 미션 박스 세부 색 보정 */
.checklist-item label span { color: var(--paper-ink-soft) !important; }
.checklist-item input[type="checkbox"]:checked + span { color: var(--paper-muted) !important; }
.mission-deliverable { color: var(--paper-ink-soft) !important; }
.prompt-code { color: var(--paper-ink) !important; background: var(--paper-bg-alt) !important; }
.tool-badge { color: #5B21B6 !important; background: #EDE9FE !important; }

/* 프롬프트 복사 버튼: 밝은 카드 위이므로 어두운 아웃라인 사용 */
.prompt-box .copy-prompt-btn {
  border-color: rgba(28,32,50,0.28) !important;
  color: var(--paper-ink-soft) !important;
  background: rgba(28,32,50,0.04) !important;
}
.prompt-box .copy-prompt-btn:hover {
  border-color: var(--ai-indigo) !important;
  color: var(--ai-indigo) !important;
}
.prompt-box .copy-prompt-btn.copied { border-color: #16a34a !important; color: #16a34a !important; }

/* 잠금 오버레이: 페이퍼 카드 톤 + 다크 스크림/골드 악센트로 하이브리드 조화 */
.section-locked .lock-preview { color: var(--paper-ink-soft) !important; }
.section-locked .lock-overlay,
.lock-overlay {
  background: linear-gradient(to bottom, rgba(255,253,248,0) 0%, var(--paper-bg) 40%) !important;
  border-radius: 0 0 var(--paper-radius) var(--paper-radius);
}
.section-block.is-locked {
  background: var(--paper-bg-alt) !important;
  border: 1px dashed var(--paper-border) !important;
}
.section-block.is-locked .lock-overlay {
  background: linear-gradient(to bottom, rgba(250,245,233,0) 0%, var(--paper-bg-alt) 40%) !important;
}
.lock-overlay .lock-icon {
  filter: drop-shadow(0 0 10px rgba(212,168,67,0.55));
}
.lock-overlay p {
  color: var(--paper-ink) !important;
  font-weight: 700;
}
.lock-buy-note { color: var(--paper-muted) !important; }

/* 소스/출처 박스, 활동 카드 세부 */
.sources-box ol, .sources-box li { color: var(--paper-ink-soft) !important; }
.activity-card .chip { color: inherit; }

/* ---------------- 7. 스크롤 리빌 (ai-fx.js와 연동) ---------------- */
.ai-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium); }
.ai-reveal.is-in { opacity: 1; transform: none; }

/* ---------------- 8. 푸터 + 스크롤바 ----------------
   기존에는 .site-footer * { color: inherit; } 한 줄이 footer-logo/footer-heading(원래 흰색)까지
   전부 어두운 회색(#b9c4e0)으로 눌러버려 푸터 전체가 흐릿하게 보였다.
   제목은 밝은 골드/흰색, 본문은 밝은 회색, 링크는 밑줄+호버 시 골드로 분리해 대비를 살린다. */
.site-footer { background: rgba(6,10,22,0.85) !important; border-top: 1px solid rgba(140,160,240,0.14); color: #c2cfe8; }
.site-footer p, .site-footer li, .site-footer span { color: #c2cfe8; }
.footer-logo { color: #ffffff !important; }
.footer-heading { color: #ffd97a !important; }
.footer-desc, .footer-copyright-note { color: #c2cfe8 !important; }
.footer-booklist li { color: #c2cfe8 !important; border-bottom-color: rgba(140,160,240,0.18) !important; }
.footer-links a {
  color: #dbe3ff !important;
  text-decoration: underline;
  text-decoration-color: rgba(219, 227, 255, 0.35);
  text-underline-offset: 3px;
}
.footer-links a:hover { color: #ffd97a !important; text-decoration-color: #ffd97a; }
.footer-bottom { color: #8a93b5 !important; border-top-color: rgba(140,160,240,0.14) !important; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #070b16; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ai-indigo), var(--ai-violet)); border-radius: 8px; border: 3px solid #070b16; }

/* 모션 최소화 선호 시 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
  body::before, .hero h1, .quicklink-card::before, #aiParticles { animation: none !important; }
}

/* ---------------- 9. 도서 구매 랜딩(교보/예스24) ----------------
   #/books 카드: 표지 클릭 시 서점 구매 페이지로 새 탭 이동 + 명시적 구매 버튼.
   홈 카드: 학습 이동은 그대로 유지하고, 작은 구매 아이콘 버튼만 표지 우상단에 얹는다. */
.book-cover-link { cursor: pointer; }
.book-buy-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0 0.2rem; }
.book-buy-row .btn { flex: 1 1 auto; justify-content: center; }

.book-cover-wrap { position: relative; }
.btn-buy-icon {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; font-size: 1rem; text-decoration: none;
  background: rgba(10, 15, 32, 0.72) !important;
  border: 1px solid rgba(255, 217, 122, 0.55) !important;
  box-shadow: 0 4px 14px rgba(4, 8, 24, 0.5);
  transition: transform 0.18s var(--ease-premium), box-shadow 0.25s, border-color 0.25s;
}
.btn-buy-icon:hover {
  transform: translateY(-2px) scale(1.06);
  border-color: #ffd97a !important;
  box-shadow: 0 8px 20px rgba(4, 8, 24, 0.6), 0 0 14px rgba(212,168,67,0.45);
}

/* ==================================================================
   10. HOME 히어로 개편 (hero-v2)
   견고한 2컬럼 그리드 → 좁은 화면 1컬럼, 단일 primary CTA + 텍스트 secondary,
   데이터 검증 신뢰 스트립, 우측 3D 북스택 클리핑 방지.
   ================================================================== */
.hero-v2 .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: 2.5rem;
}
.hero-v2 .hero-copy { min-width: 0; }
.hero-v2 .hero-copy p { opacity: 0.9; }
/* 우측 비주얼: 히어로가 overflow:hidden이라도 컬럼 내부에서 중앙정렬 +
   충분한 좌우 여백 + 자체 overflow visible로 북스택 우측이 잘리지 않게 함 */
.hero-v2 .hero-visual {
  min-width: 0;
  overflow: visible;
  padding: 0.5rem 1.4rem;
  justify-content: center;
}
.hero-v2 .hero-stack { max-width: 100%; }

/* CTA 위계: 실린 primary 1개 + 고스트/텍스트 secondary 1개 */
.btn-hero-primary {
  font-size: 1.02rem; font-weight: 800;
  padding: 0.95rem 1.8rem !important;
  border-radius: 14px !important;
  letter-spacing: 0.01em;
}
.btn-hero-secondary {
  display: inline-flex; align-items: center;
  padding: 0.95rem 1.1rem;
  color: #cdd6ee !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-weight: 700; border-radius: 14px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.btn-hero-secondary:hover {
  color: #ffffff !important;
  border-color: rgba(140,160,240,0.4) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* 신뢰 스트립: books.json 등 검증 가능한 사실만, pill 형태 */
.hero-trust {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.55rem 0.7rem;
}
.hero-trust li {
  position: relative;
  font-size: 0.82rem; font-weight: 600; color: #dbe3ff;
  padding: 0.4rem 0.8rem 0.4rem 1.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(140,160,240,0.2);
}
.hero-trust li::before {
  content: "✓"; position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  color: var(--ai-cyan); font-weight: 800; font-size: 0.8rem;
}

@media (max-width: 920px) {
  .hero-v2 .hero-inner { grid-template-columns: 1fr; }
  .hero-v2 .hero-visual { padding: 0.4rem 0; }
}
@media (max-width: 520px) {
  .hero-trust li { font-size: 0.78rem; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; }
}

/* ==================================================================
   11. PRICING 개편
   4티어 카드 + "가장 인기" 리본 + 월/연 토글(JS 없이 라디오) +
   맞춤 대상 한줄 + 기능 비교표. 기존 subscribe/모달 배선은 유지.
   ================================================================== */
/* 인기 리본: 기존 .featured::before("추천")를 네온 "가장 인기" 리본으로 교체 */
.pricing-card.featured { overflow: visible; }
.pricing-card.featured::before {
  content: "가장 인기";
  top: -14px; right: 18px;
  background: linear-gradient(120deg, var(--ai-indigo), var(--ai-violet)) !important;
  color: #fff !important;
  font-family: var(--font-tech);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em;
  padding: 0.32rem 0.85rem !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(99,102,241,0.5);
}

/* 현재 판매 계약은 자동갱신 없는 30일 이용권 단일 주기다. */
.pricing-billing-wrap { position: relative; }

/* 맞춤 대상 한줄 + 연결제 준비중 노트 */
.pricing-card .pricing-fit {
  margin-top: auto;
  font-size: 0.82rem; line-height: 1.5;
  color: #c2cfe8 !important;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(140,160,240,0.16);
  border-radius: 12px; padding: 0.6rem 0.75rem;
}
.pricing-fit-tag {
  display: inline-block; margin-right: 0.35rem;
  font-family: var(--font-tech); font-size: 0.68rem; font-weight: 800;
  color: var(--ai-cyan) !important; letter-spacing: 0.03em;
}
.pricing-annual-note { margin: -0.4rem 0 0; font-size: 0.74rem; color: #8a93b5 !important; }

/* 기능 비교표 */
.pricing-compare .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table {
  width: 100%; border-collapse: collapse; min-width: 560px;
  background: rgba(18,24,46,0.5);
  border: 1px solid rgba(140,160,240,0.16);
  border-radius: 16px; overflow: hidden;
}
.cmp-table th, .cmp-table td {
  padding: 0.85rem 0.9rem; text-align: center;
  border-bottom: 1px solid rgba(140,160,240,0.12);
  font-size: 0.88rem;
}
.cmp-table thead th {
  color: #f4f7ff; font-weight: 800;
  background: rgba(99,102,241,0.14);
  font-family: var(--font-tech);
}
.cmp-table tbody th[scope="row"] {
  text-align: left; color: #e8ecf7; font-weight: 600; min-width: 220px;
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table .cmp-col-pro { background: rgba(34,211,238,0.08); color: #ffffff; }
.cmp-pop {
  display: inline-block; margin-left: 0.3rem;
  font-size: 0.62rem; font-weight: 800; color: #0b1024;
  background: var(--ai-cyan); padding: 0.05rem 0.4rem; border-radius: 999px;
  vertical-align: middle;
}
.cmp-yes { color: #34d399; font-weight: 800; font-size: 1.05rem; }
.cmp-no { color: #6b7699; font-weight: 700; }
.cmp-limited {
  font-size: 0.72rem; font-weight: 700; color: #ffd97a;
  border: 1px solid rgba(255,217,122,0.4); border-radius: 999px; padding: 0.1rem 0.5rem;
}

/* == 2026-08-03 : 히어로 통계의 설명 글자가 상자를 뚫고 나갔다 ================
   실측 (좁은 화면 360px, index.html · p/elementary.html · p/high.html)
       .stat-label "매일 업데이트되는 AI 뉴스"   141px  >  상자 72px
       .stat-label "권의 검증된 도서"             90px  >  상자 72px

   원인은 공용 파일 onae-mobile-fix.css 의 이 줄이다.
       @media (max-width:767px) [class*="label"] { white-space: nowrap }
   '배지·칩은 두 줄로 접히면 안 된다'는 뜻으로 만든 규칙인데,
   이름에 label 이 들어갔다는 이유로 **문장까지** 한 줄에 묶여 버렸다.
   바로 아래 자식 해제 규칙([class*="badge"] > *)은 특정도가 낮아 지지 않는다.

   공용 파일을 고치면 여섯 사이트가 다 영향을 받는다. 여기 한 곳만 푼다.
   이 글자는 배지가 아니라 설명 문장이므로 접히는 것이 맞다.
   ------------------------------------------------------------------------- */
.stat-label{ white-space: normal !important; }