/* =====================================================
   canva-page.css — Canva 네이티브 디자인 시스템
   Scope: body[data-page="canva"]
   오늘배움 다른 페이지에는 영향 없음
   ===================================================== */

body[data-page="canva"] {
  /* ===== Color Palette (Canva native) ===== */
  --canva-purple: #8B3DFF;
  --canva-purple-deep: #7D2AE8;
  --canva-purple-soft: #F4EFFF;
  --canva-teal: #00C4CC;
  --canva-teal-soft: #E0FAFB;
  --canva-coral: #FF7262;
  --canva-pink: #FF5CA8;
  --canva-blue: #0066FF;
  --canva-blue-soft: #E6F0FF;
  --canva-yellow: #FFC83D;
  --canva-lime: #B7E778;

  --canva-ink: #0E1318;
  --canva-ink-soft: #46506A;
  --canva-muted: #64748B;
  --canva-line: #E6E8EC;

  --canva-bg: #FFFFFF;
  --canva-bg-cream: #FDFCF9;
  --canva-bg-lilac: #F7F5FF;
  --canva-bg-dark: #0D1F3C;

  /* ===== Typography ===== */
  --canva-font: 'Plus Jakarta Sans', 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ===== Radius ===== */
  --canva-radius-sm: 12px;
  --canva-radius-md: 20px;
  --canva-radius-lg: 24px;
  --canva-radius-xl: 32px;
  --canva-radius-pill: 999px;

  /* ===== Shadow ===== */
  --canva-shadow-sm: 0 4px 12px -4px rgba(13, 31, 60, 0.1);
  --canva-shadow-md: 0 10px 30px -10px rgba(13, 31, 60, 0.15);
  --canva-shadow-lg: 0 20px 40px -20px rgba(139, 61, 255, 0.3);
  --canva-shadow-teal: 0 20px 40px -20px rgba(0, 196, 204, 0.3);

  /* ===== Easing ===== */
  --canva-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ===== Override 오늘배움 tokens within canva scope ===== */
  --changho-accent: var(--canva-purple);
  --changho-accent-light: var(--canva-pink);
  --font-serif: var(--canva-font);
}

/* ===== Reset font family page-wide ===== */
body[data-page="canva"],
body[data-page="canva"] * {
  font-family: var(--canva-font) !important;
  letter-spacing: -0.01em;
}
body[data-page="canva"] code,
body[data-page="canva"] pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* ===== Body text color ===== */
body[data-page="canva"] {
  color: var(--canva-ink);
  background: var(--canva-bg);
}

/* ===== Headings: tighter tracking ===== */
body[data-page="canva"] h1,
body[data-page="canva"] h2,
body[data-page="canva"] h3,
body[data-page="canva"] h4 {
  letter-spacing: -0.025em;
  font-weight: 700;
}
body[data-page="canva"] h1 { font-weight: 800; }

/* ===== Hero Section — Canva gradient ===== */
body[data-page="canva"] .canva-dark-hero {
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #2A1B4A 0%, var(--canva-bg-dark) 55%, #0a1429 100%) !important;
}
body[data-page="canva"] .canva-dark-hero-title {
  font-family: var(--canva-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}
body[data-page="canva"] .canva-accent-text {
  background: none !important;
  color: var(--canva-teal) !important;
  -webkit-text-fill-color: var(--canva-teal) !important;
}
body[data-page="canva"] .canva-tag {
  border-radius: var(--canva-radius-pill) !important;
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px);
  font-weight: 500;
}

/* ===== Dual partner badges ===== */
body[data-page="canva"] .hero-badges-row .hero-partner-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--canva-radius-pill) !important;
}

/* ===== Hero buttons: pill + Canva purple ===== */
body[data-page="canva"] .hero-cta-primary--canva,
body[data-page="canva"] .hero-cta-secondary--dark,
body[data-page="canva"] .hero-cta .canva-cta-link,
body[data-page="canva"] .hero-cta .canva-link--muted {
  background: var(--canva-purple) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--canva-radius-pill) !important;
  padding: 16px 32px !important;
  min-height: 56px !important;
  min-width: 220px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(139, 61, 255, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
body[data-page="canva"] .hero-cta-primary--canva:hover,
body[data-page="canva"] .hero-cta-secondary--dark:hover,
body[data-page="canva"] .hero-cta .canva-cta-link:hover,
body[data-page="canva"] .hero-cta .canva-link--muted:hover {
  background: #6B2FD9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(139, 61, 255, 0.5) !important;
}

/* ===== Hero stats ===== */
body[data-page="canva"] .hero-stats .stat-number {
  font-weight: 800;
  letter-spacing: -0.03em;
  background: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ===== B2B Shift Section ===== */
body[data-page="canva"] .canva-b2b-shift {
  background: linear-gradient(180deg, var(--canva-bg-cream) 0%, var(--canva-purple-soft) 100%) !important;
}
body[data-page="canva"] .b2b-shift-eyebrow,
body[data-page="canva"] .target-eyebrow,
body[data-page="canva"] .partner-role-eyebrow,
body[data-page="canva"] .global-cases-eyebrow {
  background: var(--canva-ink) !important;
  border-radius: var(--canva-radius-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
body[data-page="canva"] .b2b-shift-title,
body[data-page="canva"] .target-title,
body[data-page="canva"] .partner-role-title,
body[data-page="canva"] .global-cases-title,
body[data-page="canva"] .ent-ref-title {
  font-family: var(--canva-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
body[data-page="canva"] .b2b-shift-title strong,
body[data-page="canva"] .target-title strong,
body[data-page="canva"] .global-cases-title strong {
  background: none !important;
  color: var(--canva-purple) !important;
  -webkit-text-fill-color: var(--canva-purple) !important;
}
body[data-page="canva"] .b2b-shift-card {
  border-radius: var(--canva-radius-lg) !important;
  border: 1px solid var(--canva-line) !important;
  box-shadow: var(--canva-shadow-sm);
  transition: transform 0.3s var(--canva-ease), box-shadow 0.3s var(--canva-ease) !important;
}
body[data-page="canva"] .b2b-shift-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--canva-shadow-lg) !important;
  border-color: var(--canva-purple) !important;
}
body[data-page="canva"] .b2b-shift-to {
  background: linear-gradient(135deg, var(--canva-purple), var(--canva-teal)) !important;
  border-radius: var(--canva-radius-pill) !important;
}

/* ===== B2B metrics (dark banner) ===== */
body[data-page="canva"] .b2b-shift-metrics {
  background: linear-gradient(135deg, var(--canva-bg-dark), #1e293b) !important;
  border-radius: var(--canva-radius-xl) !important;
}
body[data-page="canva"] .b2b-metric-num {
  background: none !important;
  color: var(--canva-teal) !important;
  -webkit-text-fill-color: var(--canva-teal) !important;
}

/* ===== Canva timeline box ===== */
body[data-page="canva"] .canva-timeline {
  border-radius: var(--canva-radius-xl) !important;
  border: 1px solid var(--canva-line) !important;
  background: #fff !important;
  box-shadow: var(--canva-shadow-md);
}
body[data-page="canva"] .canva-timeline-dot--highlight {
  background: linear-gradient(135deg, var(--canva-purple), var(--canva-teal)) !important;
  box-shadow: 0 0 0 4px rgba(139, 61, 255, 0.2) !important;
}
body[data-page="canva"] .canva-timeline-row::before {
  background: linear-gradient(90deg, var(--canva-line), var(--canva-purple) 50%, var(--canva-teal), var(--canva-line)) !important;
}

/* ===== Target Segments — rotation colors ===== */
body[data-page="canva"] .canva-target-segments {
  background: var(--canva-bg-cream) !important;
}
body[data-page="canva"] .target-card {
  border-radius: var(--canva-radius-lg) !important;
  border: 1px solid var(--canva-line) !important;
  transition: transform 0.3s var(--canva-ease), box-shadow 0.3s var(--canva-ease) !important;
}
body[data-page="canva"] .target-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--canva-shadow-lg) !important;
  border-color: var(--canva-teal) !important;
}
body[data-page="canva"] .target-tag {
  border-radius: var(--canva-radius-pill) !important;
  background: var(--canva-teal-soft) !important;
  color: var(--canva-teal) !important;
  font-weight: 700;
}
body[data-page="canva"] .target-card:nth-child(2n) .target-tag { background: var(--canva-blue-soft); color: var(--canva-blue); }
body[data-page="canva"] .target-card:nth-child(3n) .target-tag { background: #FFF4E6; color: #D97706; }

/* ===== Global Cases ===== */
body[data-page="canva"] .canva-global-cases {
  background: var(--canva-bg-lilac) !important;
}
body[data-page="canva"] .global-case-card {
  border-radius: var(--canva-radius-lg) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--canva-shadow-sm);
  transition: transform 0.3s var(--canva-ease), box-shadow 0.3s var(--canva-ease) !important;
}
body[data-page="canva"] .global-case-card:hover {
  transform: translateY(-6px) !important;
}
body[data-page="canva"] .global-case-card--edu:hover { box-shadow: 0 30px 50px -20px rgba(139, 61, 255, 0.35) !important; border-color: var(--canva-purple) !important; }
body[data-page="canva"] .global-case-card--biz:hover { box-shadow: 0 30px 50px -20px rgba(0, 102, 255, 0.3) !important; border-color: var(--canva-blue) !important; }
body[data-page="canva"] .global-case-card--ai:hover { box-shadow: 0 30px 50px -20px rgba(0, 196, 204, 0.3) !important; border-color: var(--canva-teal) !important; }
body[data-page="canva"] .global-case-tag {
  border-radius: var(--canva-radius-pill) !important;
  font-weight: 700;
}
body[data-page="canva"] .global-case-metric {
  background: linear-gradient(135deg, var(--canva-purple-soft), #fff) !important;
  border-radius: var(--canva-radius-md) !important;
}
body[data-page="canva"] .global-case-metric-big {
  background: none !important;
  color: var(--canva-purple) !important;
  -webkit-text-fill-color: var(--canva-purple) !important;
}
body[data-page="canva"] .forrester-bar {
  border-radius: var(--canva-radius-xl) !important;
  background: linear-gradient(135deg, var(--canva-bg-dark), #1e293b) !important;
}
body[data-page="canva"] .forrester-bar-title {
  color: var(--canva-teal) !important;
}

/* ===== Partner Role (dark section) ===== */
body[data-page="canva"] .canva-partner-role {
  background: radial-gradient(ellipse at top, #1a2847, var(--canva-bg-dark) 70%) !important;
}
body[data-page="canva"] .partner-role-title strong {
  background: none !important;
  color: var(--canva-teal) !important;
  -webkit-text-fill-color: var(--canva-teal) !important;
}
body[data-page="canva"] .partner-role-card {
  border-radius: var(--canva-radius-lg) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px);
}
body[data-page="canva"] .partner-role-card:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  transform: translateY(-4px) !important;
}

/* ===== Enterprise references (if rendered via shared class) ===== */
body[data-page="canva"] .enterprise-references {
  background: var(--canva-bg-cream) !important;
}
body[data-page="canva"] .ent-ref-eyebrow {
  background: var(--canva-ink) !important;
  border-radius: var(--canva-radius-pill) !important;
}
body[data-page="canva"] .ent-ref-card {
  border-radius: var(--canva-radius-lg) !important;
}

/* ===== Plans grid (가격표) ===== */
body[data-page="canva"] .plan-card {
  border-radius: var(--canva-radius-lg) !important;
  border: 1.5px solid var(--canva-line) !important;
  padding: 32px 28px !important;
  transition: transform 0.3s var(--canva-ease), box-shadow 0.3s var(--canva-ease) !important;
}
body[data-page="canva"] .plan-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--canva-shadow-md) !important;
}
body[data-page="canva"] .plan-card.featured {
  border-color: var(--canva-purple) !important;
  box-shadow: 0 20px 40px -20px rgba(139, 61, 255, 0.35) !important;
  background: linear-gradient(180deg, var(--canva-purple-soft), #fff) !important;
}
body[data-page="canva"] .plan-card .plan-badge {
  background: linear-gradient(135deg, var(--canva-purple), var(--canva-pink)) !important;
  border-radius: var(--canva-radius-pill) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}
body[data-page="canva"] .plan-card h3 {
  font-weight: 800 !important;
}
body[data-page="canva"] .plan-card .plan-price {
  font-weight: 800 !important;
  color: var(--canva-ink) !important;
  font-size: 1.6rem !important;
}
body[data-page="canva"] .plan-card .plan-price span {
  color: var(--canva-muted);
}
body[data-page="canva"] .plan-card ul li::before {
  color: var(--canva-teal) !important;
}
body[data-page="canva"] .plan-card .plan-cta {
  border-radius: var(--canva-radius-pill) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  transition: transform 0.2s var(--canva-ease), box-shadow 0.2s var(--canva-ease) !important;
}
body[data-page="canva"] .plan-card .plan-cta-primary {
  background: linear-gradient(135deg, var(--canva-purple), var(--canva-purple-deep)) !important;
  color: #fff !important;
  box-shadow: var(--canva-shadow-lg) !important;
}
body[data-page="canva"] .plan-card .plan-cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 40px -10px rgba(139, 61, 255, 0.5) !important;
}
body[data-page="canva"] .plan-card .plan-cta-secondary {
  background: var(--canva-bg-cream) !important;
  color: var(--canva-ink) !important;
  border: 1.5px solid var(--canva-line) !important;
}
body[data-page="canva"] .plan-card .plan-cta-secondary:hover {
  background: #fff !important;
  border-color: var(--canva-purple) !important;
  color: var(--canva-purple) !important;
}

/* ===== Plan tab toggle ===== */
body[data-page="canva"] .plan-tab-toggle {
  background: var(--canva-purple-soft) !important;
  border-radius: var(--canva-radius-pill) !important;
}
body[data-page="canva"] .plan-tab-btn.active {
  background: linear-gradient(135deg, var(--canva-purple), var(--canva-pink)) !important;
  border-radius: var(--canva-radius-pill) !important;
  box-shadow: var(--canva-shadow-lg) !important;
}

/* ===== Section badges ===== */
body[data-page="canva"] .changho-badge-special {
  background: linear-gradient(135deg, var(--canva-purple), var(--canva-teal)) !important;
  border-radius: var(--canva-radius-pill) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  padding: 8px 18px !important;
}

/* ===== Generic section headings ===== */
body[data-page="canva"] .section-title {
  font-family: var(--canva-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* ===== Final CTA ===== */
body[data-page="canva"] .final-cta-section {
  background: linear-gradient(135deg, #1a1340 0%, #2A1B4A 50%, #0D1F3C 100%) !important;
}
body[data-page="canva"] .final-cta-section::before,
body[data-page="canva"] .changho-cta-section::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}
body[data-page="canva"] .final-cta-section .cta-buttons {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
body[data-page="canva"] .final-cta-section .btn-lg {
  padding: 16px 32px !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  min-height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body[data-page="canva"] .changho-frame-cta {
  border-radius: var(--canva-radius-xl) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 48px !important;
}
body[data-page="canva"] .final-cta-section h2 {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
body[data-page="canva"] .final-cta-section p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.05rem !important;
}
body[data-page="canva"] .final-cta-section .btn-primary,
body[data-page="canva"] .final-cta-section .btn-secondary,
body[data-page="canva"] .final-cta-section .canva-cta-link,
body[data-page="canva"] .changho-frame-cta .btn-primary,
body[data-page="canva"] .changho-frame-cta .btn-secondary {
  background: var(--canva-purple) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--canva-radius-pill) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 16px 32px !important;
  min-height: 56px !important;
  min-width: 220px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(139, 61, 255, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
body[data-page="canva"] .final-cta-section .btn-primary:hover,
body[data-page="canva"] .final-cta-section .btn-secondary:hover,
body[data-page="canva"] .final-cta-section .canva-cta-link:hover {
  background: #6B2FD9 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(139, 61, 255, 0.5) !important;
}

/* ===== FAQ ===== */
body[data-page="canva"] .faq-item {
  border-radius: var(--canva-radius-md) !important;
  border: 1px solid var(--canva-line) !important;
  background: #fff !important;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
}
body[data-page="canva"] .faq-item[open] {
  border-color: var(--canva-purple) !important;
  box-shadow: var(--canva-shadow-sm);
}
body[data-page="canva"] .faq-item summary {
  font-weight: 700 !important;
  color: var(--canva-ink) !important;
}

/* ===== Canva 그라디언트 divider ===== */
body[data-page="canva"] .gradient-divider {
  background: linear-gradient(90deg, transparent, var(--canva-purple) 20%, var(--canva-teal) 80%, transparent) !important;
  height: 1px !important;
  opacity: 0.4;
}

/* ===== Remove 한지 잔재 ===== */
body[data-page="canva"] .changho-hanji-glow,
body[data-page="canva"] .changho-paper,
body[data-page="canva"] .changho-divider {
  background: none !important;
  background-image: none !important;
}

/* ===== Scroll animations ===== */
@keyframes canva-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
body[data-page="canva"] .canva-global-cases,
body[data-page="canva"] .canva-b2b-shift,
body[data-page="canva"] .canva-target-segments,
body[data-page="canva"] .canva-partner-role,
body[data-page="canva"] .canva-timeline {
  animation: canva-fade-up 0.6s var(--canva-ease) both;
}

/* ===== Responsive polish ===== */
@media (max-width: 900px) {
  body[data-page="canva"] .hero-badges-row { flex-direction: column; align-items: center; }
  body[data-page="canva"] .plan-card { padding: 24px 20px !important; }
}