/* ============================================================
   SDGs Explorer — style.css
   Modern glassmorphism dark theme with vibrant SDG colors
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@300;400;600;700;900&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-card: var(--yj-fill-2);
  --bg-card-hover: var(--yj-fill-4);
  --glass-border: var(--yj-fill-4);
  --glass-blur: blur(20px);
  --text-primary: #f0f4ff;
  --text-secondary: #8892a4;
  --text-accent: #60a5fa;
  --accent-gradient: var(--yj-grad);
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-glow: 0 0 40px var(--yj-sh-2);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-ko: 'Noto Sans KR', sans-serif;
  --font-en: 'Outfit', sans-serif;
  --header-h: 68px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-ko);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;   /* C6: 모바일 주소창 보정 (vh 는 폴백으로 남긴다) */
  overflow-x: hidden;
  line-height: 1.6;
}

body.lang-en { font-family: var(--font-en); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--yj-line-2); border-radius: 3px; }

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(10,14,26,0.85);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.header-logo .logo-icon {
  width: 40px; height: 40px;
  background: var(--accent-gradient);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 20px var(--yj-line-2);
}

.header-logo .logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--yj-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.header-nav::-webkit-scrollbar { display: none; }

.nav-link {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  background: none;
}
.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---------- Toggle Switch ---------- */
.toggle-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toggle-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.xp-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--yj-canvas);
  padding: 6px 14px; border-radius: 20px;
  font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 4px 12px var(--yj-sh-1);
  border: 1px solid var(--yj-line-2);
}
.xp-icon { font-size: 1.1rem; }
.xp-val { font-size: 1rem; }
.xp-lv { font-size: 0.8rem; color: var(--gray); font-weight: 500; display: none; }
@media (min-width: 768px) {
  .xp-lv { display: inline; }
}

.streak-badge {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  padding: 6px 12px; border-radius: 20px;
  font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(255,154,158,0.3);
  border: 1px solid var(--yj-line-2);
  color: var(--yj-orange-ink);
}
.streak-icon { font-size: 1.1rem; }

.toggle-switch {
  position: relative;
  width: 70px; height: 28px;
  background: var(--yj-fill-4);
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  padding: 2px;
  user-select: none;
}
.toggle-switch::before {
  content: '';
  width: 24px; height: 24px;
  background: var(--accent-gradient);
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 2px 8px var(--yj-line-2);
}
.toggle-switch.on::before {
  transform: translateX(42px);
}
.toggle-switch .toggle-text {
  position: absolute;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-primary);
}
.toggle-switch .toggle-text.left { left: 6px; }
.toggle-switch .toggle-text.right { right: 6px; }

/* Hamburger for mobile */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--transition);
}

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: rgba(10,14,26,0.97);
  backdrop-filter: var(--glass-blur);
  padding: 16px;
  border-bottom: 1px solid var(--glass-border);
  z-index: 999;
  flex-direction: column;
  gap: 8px;
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link { font-size: 1rem; padding: 10px 16px; }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main-content {
  padding-top: var(--header-h);
}

section {
  padding: 80px 24px;
  max-width: 1280px;
  margin: 0 auto;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  text-align: center;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #f0f4ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 48px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));   /* C6 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 40px 24px;
  max-width: 100%;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 20%, rgba(102,126,234,0.25) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.2) 0%, transparent 60%),
              radial-gradient(ellipse at 50% 50%, rgba(30,41,59,0.8) 0%, var(--bg-primary) 100%);
}

/* Animated floating orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  animation: floatOrb 8s ease-in-out infinite;
}
.orb-1 { width: 400px; height: 400px; background: rgba(102,126,234,0.4); top: -100px; left: -100px; animation-delay: 0s; }
.orb-2 { width: 300px; height: 300px; background: rgba(118,75,162,0.4); bottom: -50px; right: -50px; animation-delay: -3s; }
.orb-3 { width: 200px; height: 200px; background: rgba(52,211,153,0.3); top: 50%; left: 60%; animation-delay: -6s; }

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -30px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(102,126,234,0.15);
  border: 1px solid rgba(102,126,234,0.3);
  border-radius: 100px;
  font-size: 0.875rem;
  color: var(--yj-leaf-ink);
  font-weight: 600;
  margin-bottom: 24px;
  animation: fadeInDown 0.8s ease-out;
}

.hero-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 24px;
  white-space: pre-line;
  animation: fadeInUp 0.8s ease-out 0.1s both;
}

.hero-title .gradient-text {
  background: linear-gradient(135deg, #60a5fa, #a78bfa, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-secondary);
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-cta-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: none;
  border-radius: 100px;
  color: var(--yj-ink-deep);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 8px 32px var(--yj-sh-3);
  animation: fadeInUp 0.8s ease-out 0.3s both;
  min-width: 200px;
}
.hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.hero-cta.btn-primary { background: var(--accent-gradient); box-shadow: 0 8px 32px rgba(102,126,234,0.4); }
.hero-cta.btn-primary:hover { box-shadow: 0 16px 48px rgba(102,126,234,0.6); }

.hero-cta.btn-secondary { background: linear-gradient(135deg, #4b5563, #374151); }
.hero-cta.btn-tertiary { background: linear-gradient(135deg, #10b981, #059669); }

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  backdrop-filter: var(--glass-blur);
}
.hero-stat .stat-icon { font-size: 1.25rem; }
.hero-stat .stat-text { font-size: 0.875rem; color: var(--text-secondary); }
.hero-stat .stat-text strong { color: var(--text-primary); }

/* Floating SDG color circles */
.floating-goals {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 32px;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}
.floating-goal-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  animation: pulse 2s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.2s;
}
.floating-goal-dot:hover { transform: scale(1.3); }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section { background: transparent; }

.about-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 40px;
  backdrop-filter: var(--glass-blur);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.about-text h2 {
  font-size: 1.75rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.about-text p {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-stat-card {
  padding: 20px;
  background: var(--yj-fill-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: var(--transition);
}
.about-stat-card:hover {
  background: var(--yj-fill-3);
  transform: translateY(-2px);
}
.about-stat-card .stat-num {
  font-size: 1.75rem;
  font-weight: 900;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-stat-card .stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ============================================================
   GOALS GRID
   ============================================================ */
.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.goal-card {
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 12px;
  border: 1px solid transparent;
}

.goal-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.85;
  transition: opacity 0.3s;
}

.goal-card:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--yj-line-2);
  box-shadow: 0 20px 60px var(--yj-sh-3);
}
.goal-card:hover::before { opacity: 1; }

.goal-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.goal-card .goal-num {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.8;
  color: white;
  letter-spacing: 0.5px;
}

.goal-card .goal-emoji {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px var(--yj-sh-3));
}

.goal-card .goal-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  line-height: 1.3;
}

.goal-card .goal-badge {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  background: var(--yj-line-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  z-index: 2;
  opacity: 0;
  transition: var(--transition);
}
.goal-card.earned .goal-badge { opacity: 1; }

/* ============================================================
   GOAL MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  position: relative;
  background: #1a2035;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  transform: scale(0.9) translateY(20px);
  transition: var(--transition);
  scrollbar-width: thin;
}
.modal-overlay.open .modal-box {
  transform: scale(1) translateY(0);
}

.modal-header {
  padding: 28px 28px 20px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 100;
  background: var(--yj-fill-4);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition);
}
.modal-close:hover {
  background: var(--yj-line-2);
  transform: scale(1.1);
}

.modal-header .modal-num {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.8;
  color: white;
  margin-bottom: 4px;
}
.modal-header .modal-emoji { font-size: 3rem; display: block; margin-bottom: 8px; }
.modal-header .modal-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: white;
  margin-bottom: 8px;
}
.modal-header .modal-desc {
  color: var(--yj-ink);
  font-size: 1rem;
  line-height: 1.8;
  word-break: keep-all;
}

.modal-body { padding: 24px 28px 28px; }

.modal-section {
  margin-bottom: 32px;
}
.modal-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-detail {
  color: var(--yj-ink);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 24px;
  word-break: keep-all;
}

.modal-facts-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-facts-list li {
  padding: 20px 24px;
  background: var(--yj-fill-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--yj-ink);
  font-size: 1rem;
  line-height: 1.8;
  word-break: keep-all;
}

.modal-action {
  padding: 16px 20px;
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: var(--radius-md);
  color: var(--yj-leaf-ink);
  font-size: 0.9rem;
  font-weight: 500;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 0 28px 28px;
}

.btn {
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary {
  background: var(--accent-gradient);
  color: white;
  flex: 1;
  justify-content: center;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-2px); }
.btn-ghost {
  background: var(--yj-fill-3);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--yj-fill-4); color: var(--text-primary); }

/* ============================================================
   QUIZ SECTION
   ============================================================ */
.quiz-container {
  max-width: 720px;
  margin: 0 auto;
}

.quiz-start-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 48px;
  text-align: center;
  backdrop-filter: var(--glass-blur);
}
.quiz-start-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.quiz-start-card p {
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-size: 0.95rem;
}
.quiz-start-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}
.quiz-start-stat {
  text-align: center;
}
.quiz-start-stat .num {
  font-size: 2rem;
  font-weight: 900;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.quiz-start-stat .label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.quiz-progress-bar {
  height: 6px;
  background: var(--yj-fill-4);
  border-radius: 3px;
  margin-bottom: 32px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--accent-gradient);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.quiz-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 40px;
  backdrop-filter: var(--glass-blur);
}

.quiz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.quiz-goal-badge {
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}
.quiz-counter {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.quiz-score-live {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--success);
}

.quiz-question {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 28px;
  line-height: 1.5;
  color: var(--text-primary);
}

.quiz-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(102,126,234,0.2);
  color: var(--yj-leaf-ink);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

/* OX Quiz */
.ox-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ox-btn {
  padding: 24px 16px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--yj-fill-2);
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ox-btn:hover:not(:disabled) {
  border-color: #a78bfa;
  background: rgba(167,139,250,0.1);
  transform: translateY(-4px);
}
.ox-btn.correct { border-color: var(--success); background: rgba(16,185,129,0.15); }
.ox-btn.wrong { border-color: var(--error); background: rgba(239,68,68,0.15); }
.ox-btn .ox-label { font-size: 0.85rem; font-weight: 600; }

/* MC Quiz */
.mc-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mc-btn {
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--yj-fill-2);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mc-btn:hover:not(:disabled) {
  border-color: #a78bfa;
  background: rgba(167,139,250,0.1);
}
.mc-btn .mc-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--yj-fill-4);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.mc-btn.correct { border-color: var(--success); background: rgba(16,185,129,0.15); }
.mc-btn.correct .mc-num { background: var(--success); }
.mc-btn.wrong { border-color: var(--error); background: rgba(239,68,68,0.15); }
.mc-btn.wrong .mc-num { background: var(--error); }

/* Feedback */
.quiz-feedback {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
  animation: slideInUp 0.3s ease-out;
}
.quiz-feedback.correct {
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.4);
  color: var(--yj-leaf-ink);
}
.quiz-feedback.wrong {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.4);
  color: var(--yj-error);
}
.quiz-feedback .feedback-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Result Card */
.quiz-result-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 48px;
  text-align: center;
  backdrop-filter: var(--glass-blur);
}
.result-emoji { font-size: 4rem; display: block; margin-bottom: 16px; }
.result-title { font-size: 2rem; font-weight: 900; margin-bottom: 8px; }
.result-score {
  font-size: 3.5rem;
  font-weight: 900;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 8px 0;
}
.result-score-label { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 32px; }

.result-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.result-stat {
  padding: 16px;
  background: var(--yj-fill-2);
  border-radius: var(--radius-md);
}
.result-stat .r-num { font-size: 1.5rem; font-weight: 900; }
.result-stat .r-label { font-size: 0.75rem; color: var(--text-secondary); }

/* ============================================================
   AI STUDY SECTION
   ============================================================ */
.ai-container {
  max-width: 800px;
  margin: 0 auto;
}

.ai-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 40px;
  backdrop-filter: var(--glass-blur);
}

.ai-goal-select {
  margin-bottom: 24px;
}
.ai-goal-select label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 10px;
}
.ai-goal-select select {
  width: 100%;
  padding: 12px 16px;
  background: var(--yj-fill-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892a4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  transition: var(--transition);
}
.ai-goal-select select:focus {
  outline: none;
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.2);
}
.ai-goal-select select option {
  background: #1a2035;
  color: var(--text-primary);
}

.ai-prompt-box {
  margin-bottom: 28px;
}
.ai-prompt-box label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 10px;
}
.ai-prompt-text {
  width: 100%;
  min-height: 180px;
  padding: 16px;
  background: var(--yj-sh-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.7;
  resize: vertical;
  transition: var(--transition);
}
.ai-prompt-text:focus {
  outline: none;
  border-color: #a78bfa;
}

.ai-platforms-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 12px;
}
.ai-platforms {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ai-platform-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  background: var(--yj-fill-2);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
  font-family: inherit;
}
.ai-platform-btn:hover {
  transform: translateY(-2px);
  border-color: var(--yj-line-2);
}
.ai-platform-btn .platform-icon { font-size: 1rem; }

/* ============================================================
   LINKS SECTION
   ============================================================ */
.links-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.link-category-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: var(--glass-blur);
}
.link-category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.link-category-icon { font-size: 1.5rem; }
.link-category-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.link-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.link-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--yj-fill-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
}
.link-item:hover {
  background: var(--yj-fill-3);
  border-color: var(--glass-border);
  transform: translateX(4px);
}
.link-item-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.link-item-info { flex: 1; }
.link-item-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.link-item-desc {
  font-size: 0.775rem;
  color: var(--text-secondary);
}
.link-item-arrow {
  color: var(--text-secondary);
  font-size: 0.875rem;
  flex-shrink: 0;
  align-self: center;
}

/* ============================================================
   BADGE SECTION
   ============================================================ */
.badge-container { max-width: 900px; margin: 0 auto; }

.badge-header-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 32px;
  margin-bottom: 28px;
  backdrop-filter: var(--glass-blur);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.badge-overall {
  display: flex;
  align-items: center;
  gap: 20px;
}

.badge-ring {
  position: relative;
  width: 80px; height: 80px;
  flex-shrink: 0;
}
.badge-ring svg { transform: rotate(-90deg); }
.badge-ring-bg { fill: none; stroke: var(--yj-fill-4); stroke-width: 6; }
.badge-ring-fill {
  fill: none;
  stroke: url(#badgeGradient);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}
.badge-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-primary);
}

.badge-info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.badge-info p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.badge-item:hover { transform: translateY(-4px); }

.badge-item.earned {
  border-color: var(--yj-line-2);
  box-shadow: 0 4px 20px var(--yj-sh-3);
}
.badge-item.locked { opacity: 0.5; filter: grayscale(0.7); }

.badge-item .badge-emoji { font-size: 1.75rem; }
.badge-item .badge-num { font-size: 0.65rem; font-weight: 700; color: var(--text-secondary); }
.badge-item .badge-name { font-size: 0.65rem; color: var(--text-secondary); text-align: center; line-height: 1.3; }

.badge-item .earned-star {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 0.75rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--yj-sh-3);
  border-top: 1px solid var(--glass-border);
  padding: 32px 24px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.footer-sdg-colors {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.footer-color-bar {
  height: 4px;
  flex: 1;
  min-width: 12px;
  max-width: 40px;
  border-radius: 2px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-in {
  animation: fadeInUp 0.6s ease-out both;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE — TABLET (768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --header-h: 60px; }

  .header-nav { display: none; }
  .hamburger { display: flex; }
  .header-logo .logo-text { font-size: 0.95rem; }

  .toggle-group .toggle-label { display: none; }

  section { padding: 60px 16px; }

  .hero-title { white-space: normal; }

  .about-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }

  .goals-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .goal-card { padding: 12px 8px; }
  .goal-card .goal-emoji { font-size: 1.75rem; }
  .goal-card .goal-name { font-size: 0.7rem; }

  .modal-header { padding: 20px 20px 16px; }
  .modal-body { padding: 16px 20px 20px; }
  .modal-footer { padding: 0 20px 20px; flex-direction: column; }
  .btn-primary { width: 100%; }

  .quiz-card { padding: 24px; }
  .ox-btn { padding: 16px 12px; }
  .result-breakdown { grid-template-columns: repeat(3, 1fr); }

  .ai-card { padding: 24px; }
  .ai-platforms { gap: 8px; }
  .ai-platform-btn { padding: 8px 14px; font-size: 0.8rem; }

  .badge-header-card { flex-direction: column; align-items: flex-start; }
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
}

/* ============================================================
   RESPONSIVE — MOBILE (480px)
   ============================================================ */
@media (max-width: 480px) {
  .hero-stats { gap: 12px; }
  .hero-stat { padding: 8px 14px; }

  .goals-grid { grid-template-columns: repeat(3, 1fr); }

  .quiz-start-stats { gap: 16px; }
  .result-breakdown { grid-template-columns: repeat(3, 1fr); }

  .links-categories { grid-template-columns: 1fr; }

  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: 8px; }

/* ============================================================
   PHASE 2 — XP LEVEL BADGE
   ============================================================ */
.xp-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--yj-fill-3);
  border: 1px solid var(--glass-border);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: default;
  transition: var(--transition);
  flex-shrink: 0;
}
.xp-badge:hover { background: var(--yj-fill-4); }
.xp-badge .xp-icon { font-size: 0.9rem; }
.xp-badge .xp-val { color: var(--text-primary); }
.xp-badge .xp-lv { color: var(--text-secondary); }

/* XP Toast */
.xp-toast {
  position: fixed;
  top: 80px; right: 20px;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.4);
  border-radius: 100px;
  padding: 8px 16px;
  color: var(--yj-leaf-ink);
  font-size: 0.875rem;
  font-weight: 700;
  z-index: 9998;
  animation: slideInRight 0.3s ease-out, fadeOut 0.4s ease-in 2s forwards;
  pointer-events: none;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   PHASE 2 — GAMES & SIMS SHARED
   ============================================================ */
.games-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.game-tab {
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid var(--glass-border);
  background: var(--yj-fill-2);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.game-tab:hover { background: var(--yj-fill-4); color: var(--text-primary); }
.game-tab.active {
  background: var(--accent-gradient);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(102,126,234,0.3);
}

.game-content-area {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 28px;
  backdrop-filter: var(--glass-blur);
}

.game-card-header {
  margin-bottom: 24px;
}
.game-card-header h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.game-card-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.game-area, .sim-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-controls {
  margin-top: 20px;
  width: 100%;
  max-width: 600px;
}

.game-result-card {
  text-align: center;
  padding: 32px 24px;
  background: var(--yj-fill-1);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
}
.gr-score {
  font-size: 3rem;
  font-weight: 900;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 8px 0;
}
.gr-xp {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 100px;
  color: var(--yj-leaf-ink);
  font-size: 0.875rem;
  font-weight: 700;
  margin: 8px 0;
}

/* ============================================================
   RECYCLING GAME
   ============================================================ */
.recycling-game {
  width: 100%;
  max-width: 580px;
}

.rg-progress-bar {
  height: 5px;
  background: var(--yj-fill-4);
  border-radius: 3px;
  margin-bottom: 16px;
  overflow: hidden;
}
.rg-progress-fill {
  height: 100%;
  background: var(--accent-gradient);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.rg-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.rg-counter { font-size: 0.8rem; color: var(--text-secondary); flex: 1; }
.rg-score { font-size: 0.9rem; font-weight: 700; color: var(--yj-leaf-ink); }
.rg-streak { font-size: 0.9rem; font-weight: 700; color: var(--yj-orange-ink); min-width: 48px; text-align: right; }

.rg-item-card {
  background: var(--yj-fill-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  margin-bottom: 20px;
}
.rg-item-emoji { font-size: 4rem; display: block; margin-bottom: 10px; }
.rg-item-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.rg-question { font-size: 0.9rem; color: var(--text-secondary); }
.dilemma-box {
  background: var(--yj-fill-1);
  border-radius: var(--radius-md);
  padding: 24px;
}
.dilemma-box h3 {
  font-size: 1.25rem;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.dilemma-q {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--yj-ink-deep);
  margin-bottom: 24px;
  line-height: 1.7;
  word-break: keep-all;
}

.dilemma-vs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 600px) {
  .dilemma-vs {
    flex-direction: row;
  }
}

.dilemma-pro, .dilemma-con {
  flex: 1;
  background: var(--yj-sh-2);
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--yj-fill-2);
  display: flex;
  flex-direction: column;
}
.dilemma-pro h4 { color: var(--yj-leaf-ink); margin-bottom: 12px; font-size: 1.05rem; }
.dilemma-con h4 { color: var(--yj-error); margin-bottom: 12px; font-size: 1.05rem; }

.dilemma-pro p, .dilemma-con p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--yj-ink);
  margin-bottom: 20px;
  flex-grow: 1;
}

.dilemma-vote-btn {
  width: 100%;
  padding: 14px 0;
  font-size: 1rem;
  border-radius: 12px;
}

.dilemma-result {
  background: var(--yj-sh-3);
  padding: 24px;
  border-radius: var(--radius-md);
  margin-top: 24px;
  border: 1px solid var(--yj-line-1);
}
.dilemma-result h4 {
  text-align: center;
  margin-bottom: 16px;
  font-size: 1.1rem;
  color: #fff;
}
.dilemma-bar-wrap {
  display: flex;
  height: 36px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--yj-fill-4);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.dilemma-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.pro-bar { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.con-bar { background: linear-gradient(135deg, #ef4444, #dc2626); }

.rg-bins {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.rg-bin {
  padding: 12px 8px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--yj-fill-2);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  line-height: 1.3;
}
.rg-bin:hover:not(:disabled) {
  border-color: #a78bfa;
  background: rgba(167,139,250,0.1);
  transform: translateY(-2px);
}
.rg-bin.rg-correct { border-color: #10b981; background: rgba(16,185,129,0.2); }
.rg-bin.rg-wrong { border-color: #ef4444; background: rgba(239,68,68,0.2); }

.rg-feedback { min-height: 40px; }
.rg-fb { padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem; animation: slideInUp 0.25s ease; }
.rg-fb-correct { background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: var(--yj-leaf-ink); }
.rg-fb-wrong { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: var(--yj-error); }

/* ============================================================
   TREE GAME
   ============================================================ */
.tree-game { width: 100%; }

.tg-stats {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
}
.tg-stat {
  text-align: center;
  padding: 12px 20px;
  background: var(--yj-fill-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
}
.tg-num { font-size: 1.5rem; font-weight: 900; color: var(--yj-leaf-ink); display: block; }
.tg-label { font-size: 0.75rem; color: var(--text-secondary); }

.tg-guide { text-align: center; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 16px; }

.tg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 auto 20px;
  max-width: 520px;
}

.tg-plot {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  background: rgba(139,92,60,0.15);
}
.tg-plot:hover { border-color: #34d399; transform: scale(1.04); }
.tg-plot.tg-stage-0 { background: rgba(120,70,30,0.2); cursor: pointer; }
.tg-plot.tg-stage-1 { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.3); cursor: default; }
.tg-plot.tg-stage-2 { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.5); cursor: default; }
.tg-plot.tg-stage-3 { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.7); cursor: default; }
.tg-plot.tg-stage-4 { background: rgba(52,211,153,0.25); border-color: #34d399; box-shadow: 0 0 12px rgba(52,211,153,0.2); cursor: default; }
.tg-plot.tg-growing .tg-emoji { animation: bounceIn 0.5s ease-out; }

.tg-emoji { font-size: 2rem; display: block; }
.tg-co2 { font-size: 0.6rem; color: var(--yj-leaf-ink); font-weight: 700; }

.tree-complete {
  text-align: center;
  padding: 24px;
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: var(--radius-lg);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--yj-leaf-ink);
  margin-top: 16px;
  animation: bounceIn 0.5s ease;
}
.tree-xp { font-size: 1rem; margin-top: 8px; }

/* ============================================================
   CARBON FOOTPRINT SIM
   ============================================================ */
.carbon-sim { width: 100%; max-width: 620px; }

.sim-progress-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.sim-step-dot {
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--yj-fill-3);
  border: 1px solid var(--glass-border);
  white-space: nowrap;
  transition: var(--transition);
  flex-shrink: 0;
}
.sim-step-dot.active { background: var(--accent-gradient); color: white; border-color: transparent; }
.sim-step-dot.done { background: rgba(16,185,129,0.2); color: var(--yj-leaf-ink); border-color: rgba(16,185,129,0.3); }
.sim-step-line { flex: 1; min-width: 8px; height: 1px; background: var(--glass-border); }

.sim-step-bar {
  height: 4px;
  background: var(--yj-fill-4);
  border-radius: 2px;
  margin-bottom: 24px;
  overflow: hidden;
}
.sim-step-fill { height: 100%; background: var(--accent-gradient); border-radius: 2px; transition: width 0.4s ease; }

.sim-question-card {
  background: var(--yj-fill-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.sim-question-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 20px; }

.sim-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.sim-option {
  padding: 14px 12px;
  border-radius: var(--radius-md);
  border: 2px solid var(--glass-border);
  background: var(--yj-fill-2);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  text-align: left;
  line-height: 1.4;
}
.sim-option:hover { border-color: #a78bfa; background: rgba(167,139,250,0.1); }
.sim-option.selected { border-color: #a78bfa; background: rgba(167,139,250,0.18); }

.sim-tip {
  padding: 12px 16px;
  background: rgba(96,165,250,0.1);
  border: 1px solid rgba(96,165,250,0.3);
  border-radius: var(--radius-sm);
  color: var(--yj-ink);
  font-size: 0.875rem;
  line-height: 1.5;
}

.sim-result-card {
  text-align: center;
  background: var(--yj-fill-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
}

.carbon-result-num {
  font-size: 2.5rem;
  font-weight: 900;
  margin: 12px 0 4px;
}
.carbon-level { font-size: 1.1rem; font-weight: 700; margin-bottom: 24px; }

.carbon-bars { width: 100%; max-width: 400px; margin: 0 auto 20px; }
.carbon-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.cbr-label { font-size: 0.75rem; color: var(--text-secondary); width: 60px; text-align: right; flex-shrink: 0; }
.cbr-track { flex: 1; height: 10px; background: var(--yj-fill-3); border-radius: 5px; overflow: hidden; }
.cbr-fill { height: 100%; border-radius: 5px; transition: width 1s ease; }
.cbr-val { font-size: 0.75rem; color: var(--text-secondary); width: 56px; flex-shrink: 0; }

/* ============================================================
   WATER SIM
   ============================================================ */
.water-sim { width: 100%; }
.water-sim-layout { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }

.water-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.water-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--yj-fill-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
.water-item:hover { background: var(--yj-fill-3); }
.water-item.active { border-color: rgba(37,189,226,0.4); background: rgba(37,189,226,0.06); }

.wi-emoji { font-size: 1.25rem; flex-shrink: 0; }
.wi-info { flex: 1; }
.wi-name { font-size: 0.85rem; font-weight: 500; display: block; }
.wi-liters { font-size: 0.75rem; color: var(--yj-ink-deep); font-weight: 700; }

.wi-toggle {
  width: 36px; height: 20px;
  background: var(--yj-fill-4);
  border-radius: 10px;
  position: relative;
  transition: var(--transition);
  flex-shrink: 0;
}
.wi-toggle::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: var(--transition);
}
.wi-toggle.on { background: #26BDE2; }
.wi-toggle.on::before { transform: translateX(16px); }

.water-result {
  background: rgba(37,189,226,0.06);
  border: 1px solid rgba(37,189,226,0.2);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: sticky;
  top: 80px;
}
.wr-total { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.wr-num { font-size: 2.5rem; font-weight: 900; color: var(--yj-ink-deep); line-height: 1; }
.wr-unit { font-size: 1rem; color: var(--text-secondary); }
.wr-status { font-size: 0.85rem; font-weight: 600; margin: 8px 0 16px; }

.wr-compare { margin-bottom: 16px; }
.wr-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.7rem; color: var(--text-secondary); }
.wr-track { flex: 1; height: 8px; background: var(--yj-fill-3); border-radius: 4px; overflow: hidden; }
.wr-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

.wr-tips { margin-bottom: 8px; }
.wr-tip { font-size: 0.775rem; color: var(--yj-ink); padding: 6px 0; border-bottom: 1px solid var(--yj-fill-3); }
.wr-tip:last-child { border-bottom: none; }

/* ============================================================
   DIET SIM
   ============================================================ */
.diet-sim { width: 100%; }

.diet-type-selector {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.diet-type-btn {
  padding: 10px 18px;
  border-radius: 100px;
  border: 2px solid var(--glass-border);
  background: var(--yj-fill-2);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.diet-type-btn:hover { border-color: #a78bfa; color: var(--text-primary); }
.diet-type-btn.active { background: var(--accent-gradient); color: white; border-color: transparent; box-shadow: 0 4px 16px rgba(102,126,234,0.3); }

.diet-earth-display {
  border-radius: var(--radius-lg);
  border: 2px solid;
  padding: 24px;
  text-align: center;
  margin-bottom: 24px;
  transition: var(--transition);
}
.diet-earth-emoji { font-size: 3.5rem; display: block; margin-bottom: 8px; }
.diet-earth-label { font-size: 1.1rem; font-weight: 700; }

.diet-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.diet-metric-card {
  background: var(--yj-fill-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.dmc-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; font-weight: 600; }
.dmc-value { font-size: 1.1rem; font-weight: 800; margin-bottom: 14px; }

.dmc-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 88px;
}
.dmc-bar-wrap { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 4px; }
.dmc-bar-wrap.current .dmc-bar { box-shadow: 0 0 8px currentColor; }
.dmc-bar { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.6s ease, background 0.3s; min-height: 4px; }
.dmc-bar-label { font-size: 0.75rem; }

.diet-tip-box {
  padding: 14px 18px;
  background: rgba(96,165,250,0.08);
  border: 1px solid rgba(96,165,250,0.2);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.dib-title { font-weight: 700; color: var(--yj-ink); display: block; margin-bottom: 4px; }

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */
@media (max-width: 768px) {
  .water-sim-layout { grid-template-columns: 1fr; }
  .water-result { position: static; }
  .diet-metrics { grid-template-columns: 1fr; }
  .sim-options { grid-template-columns: 1fr; }
  .rg-bins { grid-template-columns: repeat(2, 1fr); }
  .tg-grid { grid-template-columns: repeat(4, 1fr); }
  .xp-badge .xp-lv { display: none; }
  .carbon-bars { max-width: 100%; }
}
@media (max-width: 480px) {
  .tg-grid { grid-template-columns: repeat(3, 1fr); }
  .rg-bins { grid-template-columns: repeat(2, 1fr); }
  .diet-type-selector { justify-content: flex-start; }
}

/* Score confetti particles */
.confetti-particle {
  position: fixed;
  width: 10px; height: 10px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: confettiFall 3s ease-in forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Tooltip */
.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: #1a2035;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  color: var(--text-primary);
}
.tooltip:hover::after { opacity: 1; }

@keyframes fadeOut { to { opacity: 0; transform: translateY(20px); } }

/* ============================================================
   IMPACT SECTION
   ============================================================ */

/* ============================================================
   CERTIFICATE & DECLARATION
   ============================================================ */
.certificate-section, .declaration-section {
  background: var(--bg-card);
  padding: 30px; border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  text-align: center; margin-top: 40px;
  box-shadow: 0 10px 30px var(--yj-sh-1);
}
.certificate-section h3, .declaration-section h3 { font-size: 1.5rem; margin-bottom: 12px; }
.cert-input-wrap { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.cert-input-wrap input {
  padding: 12px 20px; border-radius: 20px;
  border: 2px solid var(--glass-border); background: var(--yj-canvas);
  font-family: inherit; font-size: 1rem; outline: none; transition: 0.3s;
}
.cert-input-wrap input:focus { border-color: var(--primary); }

.decl-goals {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px;
}
.decl-goal-btn {
  background: var(--yj-fill-4); padding: 10px 16px; border-radius: 20px;
  cursor: pointer; font-size: 0.95rem; font-weight: 600;
  transition: 0.3s; color: var(--yj-ink-deep); border: 1px solid var(--yj-line-2);
}
.decl-goal-btn:hover { background: var(--yj-line-2); transform: translateY(-2px); }
.decl-goal-btn.selected { background: var(--accent-gradient); color: var(--yj-ink-deep); border-color: transparent; transform: translateY(-2px); box-shadow: 0 4px 10px var(--yj-sh-3); }

/* ============================================================
   NEW MODAL TAB & EDU UI STYLES
   ============================================================ */
.modal-lg {
  max-width: 900px !important;
  width: 95% !important;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-header-top {
  padding: 24px 28px 16px;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--glass-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 10;
}
.modal-header-top h2 {
  font-size: 1.8rem;
  color: #fff;
  margin: 0;
  font-weight: 800;
}

.modal-tabs-nav {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 12px 28px;
  background: var(--yj-fill-1);
  border-bottom: 1px solid var(--glass-border);
  scrollbar-width: none;
}
.modal-tabs-nav::-webkit-scrollbar { display: none; }

.modal-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s;
}
.modal-tab-btn:hover {
  background: var(--yj-fill-2);
  color: var(--yj-ink-deep);
}
.modal-tab-btn.active {
  background: var(--text-primary);
  color: #111;
  border-color: var(--text-primary);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  position: relative;
}

.modal-tab-content {
  display: none;
  animation: fadeIn 0.4s ease forwards;
}
.modal-tab-content.active {
  display: block;
}

.modal-actions {
  padding: 20px 28px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  justify-content: flex-end;
  background: var(--yj-sh-2);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Tab Specific Styles */
.modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-list li {
  padding: 14px 18px;
  background: var(--yj-fill-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.edu-card {
  background: var(--yj-fill-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.edu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--yj-sh-2);
  border-color: var(--yj-fill-4);
}
.edu-card h4 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.edu-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.nexus-card {
  text-align: center;
  padding: 32px 20px;
  background: linear-gradient(135deg, var(--yj-fill-2), var(--yj-fill-1));
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
}
.nexus-card h3 { color: var(--primary); margin-bottom: 16px; }
.nexus-card p { color: var(--text-main); font-size: 1.05rem; line-height: 1.7; margin-bottom: 24px; }
.nexus-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.nexus-icon {
  background: var(--yj-fill-4);
  padding: 10px 16px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: bold;
  color: #fff;
}

.careers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.career-badge {
  background: var(--yj-fill-1);
  border-left: 4px solid var(--secondary);
  padding: 16px;
  border-radius: 4px 8px 8px 4px;
}
.career-badge h4 { color: #fff; margin-bottom: 8px; }
.career-badge p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; }

.dilemma-box {
  background: var(--yj-sh-2);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.dilemma-box h3 { color: #fff; text-align: center; margin-bottom: 20px; font-size: 1.3rem; }
.dilemma-q {
  font-size: 1.15rem;
  font-weight: bold;
  text-align: center;
  color: var(--primary);
  margin-bottom: 28px;
  line-height: 1.6;
}
.dilemma-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) {
  .dilemma-vs { grid-template-columns: 1fr; }
}
.dilemma-pro, .dilemma-con {
  background: var(--yj-fill-1);
  padding: 20px;
  border-radius: var(--radius-md);
}
.dilemma-pro h4 { color: var(--yj-leaf-ink); margin-bottom: 12px; }
.dilemma-con h4 { color: var(--yj-error); margin-bottom: 12px; }
.dilemma-pro p, .dilemma-con p { color: var(--text-secondary); line-height: 1.6; }

/* Vote Feature Styles */
.dilemma-vote-btn {
  margin-top: 15px;
  width: 100%;
  font-weight: bold;
}
.dilemma-result {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
  text-align: center;
}
.dilemma-result h4 { color: #fff; margin-bottom: 10px; }
.dilemma-bar-wrap {
  display: flex;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  background: #333;
}
.dilemma-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
  transition: width 1s ease-in-out;
}
.pro-bar { background: #4facfe; width: 0%; }
.con-bar { background: #ff6b6b; width: 0%; }

/* Spiderweb Simulator Styles */
.spider-node {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 10;
  box-shadow: 0 4px 10px var(--yj-sh-3);
}
.spider-node:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 20px var(--yj-line-2);
  z-index: 20;
}
.spider-label {
  position: absolute;
  top: 65px;
  white-space: nowrap;
  background: rgba(0,0,0,0.8);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.spider-node:hover .spider-label { opacity: 1; }

.spider-link {
  stroke-dasharray: 10;
  animation: dash 30s linear infinite;
  transition: opacity 0.3s;
}
@keyframes dash {
  to { stroke-dashoffset: 1000; }
}

/* Career Quiz Styles */
.career-quiz-question {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  color: var(--primary);
  line-height: 1.5;
}
.career-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.career-quiz-btn {
  background: var(--yj-fill-2);
  border: 1px solid var(--glass-border);
  padding: 20px;
  border-radius: var(--radius-md);
  color: var(--yj-ink-deep);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.career-quiz-btn:hover {
  background: var(--yj-fill-4);
  transform: translateY(-2px);
  border-color: var(--primary);
}
.career-quiz-result {
  text-align: center;
  animation: fadeIn 0.5s;
}
.career-quiz-result h3 { color: var(--yj-ink-deep); margin-bottom: 10px; }
.career-result-job {
  font-size: 1.8rem;
  color: var(--secondary);
  font-weight: bold;
  margin: 20px 0;
}
.career-result-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 30px;
}
/* Future Switch Toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--glass-border);
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: \
\;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}
.switch input:checked + .slider {
  background-color: var(--primary);
}
.switch input:checked + .slider:before {
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

/* ============================================================
   P0 수정 — 가산 전용 레이어
   기존 선택자를 고치지 않고 yj- 클래스로 덮는다.
   근거: 컨설팅 보고서 F-02 / F-04 / F-05 / F-06 / F-10
   ============================================================ */

/* ---------- F-05. 목표 카드 대비 ----------
   SDG 공식 17색 위 흰 글씨는 10/17 이 WCAG AA 미달(최저 1.62:1)이었다.
   원색을 면으로 칠하지 않고 상단 스트라이프·번호 칩에만 쓴다(원색은 점으로).
   글자는 어두운 카드 위 --text-primary → 13:1 이상. */
.goal-card.yj-goal-card {
  background: #151a26;
  border: 1px solid var(--glass-border);
  padding-top: 22px;
}
.goal-card.yj-goal-card::before {
  /* 기존 ::before 는 background:inherit 로 원색을 덮는 판이었다.
     상단 6px 색 띠로 역할을 바꾼다. */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--sdg, var(--text-accent));
  opacity: 1;
}
.goal-card.yj-goal-card:hover::before { opacity: 1; }
.goal-card.yj-goal-card:hover {
  border-color: var(--sdg, var(--yj-line-2));
  box-shadow: 0 16px 40px var(--yj-sh-3);
}
.goal-card.yj-goal-card .goal-num {
  background: var(--sdg, #444);
  color: var(--sdg-ink, #fff);
  opacity: 1;
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.2px;
}
.goal-card.yj-goal-card .goal-name {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.35;
}
.goal-card.yj-goal-card .goal-emoji { filter: none; }
.goal-card.yj-goal-card .goal-badge {
  background: var(--sdg, var(--yj-line-2));
  color: var(--sdg-ink, #fff);
}
.goal-card.yj-goal-card:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

/* ---------- F-06. 퀴즈 목표 칩 ---------- */
.quiz-goal-badge:empty { display: none; }

/* 결과 화면 — 약한 목표 안내 */
.yj-weak-goals { margin: 20px 0 24px; }
.yj-weak-title { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 10px; }
.yj-weak-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.yj-weak-chip {
  background: var(--sdg, #444);
  color: var(--sdg-ink, #fff);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.12s cubic-bezier(.2,.8,.2,1);
}
.yj-weak-chip:hover { filter: brightness(0.96); }

/* 퀴즈 없음 안내 */
.yj-quiz-empty { text-align: center; }
.yj-quiz-empty p { color: var(--text-secondary); max-width: 46ch; margin: 0 auto; }

/* ---------- F-04. 카운터 출처 각주 ---------- */

/* ---------- F-10. 거미줄 노드 ---------- */
.spider-node {
  font-family: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
}
.spider-node.selected {
  box-shadow: 0 0 0 3px var(--yj-canvas);
  z-index: 3;
}
.spider-node:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.spider-node.selected .spider-label { opacity: 1; }

/* ---------- 모션 민감 사용자 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .confetti-particle, .floating-goals { display: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   F-02. 모바일 헤더 — 햄버거가 화면 밖으로 밀려나 있었다.
   375px 에서 .header-controls 내용 폭이 575px 라 body{overflow-x:hidden}
   에 잘려 메뉴 진입 자체가 불가능했다.
   XP·연속출석 배지는 '나의 뱃지' 섹션에 같은 정보가 있으므로 좁은 화면에서 숨긴다.
   ============================================================ */
@media (max-width: 900px) {
  .site-header .xp-badge { display: none; }
}
@media (max-width: 768px) {
  .site-header { padding: 0 10px; gap: 6px; }
  .site-header .streak-badge { display: none; }
  .header-controls { gap: 8px; margin-left: auto; flex-shrink: 0; }
  .header-logo { min-width: 0; overflow: hidden; }
  .hamburger { flex: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

  /* 목표 카드 — 3열 11.2px 대신 2열 15px 로. 정보를 줄이지 말고 칸을 줄인다. */
  .goals-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .goal-card.yj-goal-card .goal-name { font-size: 0.95rem; }
  .goal-card .goal-name { font-size: 0.9rem; }
}
@media (max-width: 480px) {
  .goals-grid { grid-template-columns: repeat(2, 1fr); }
  .site-header { padding: 0 8px; gap: 4px; }
  .header-logo .logo-text { font-size: 0.88rem; }
}

/* ============================================================
   P1. 지연 로드 자리표시
   ============================================================ */
.yj-skeleton {
  text-align: center;
  color: var(--text-secondary);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yj-skeleton p { margin: 0; font-size: 0.95rem; }

/* ============================================================
   P2. 출처 각주 · 목표별 자료 링크
   ============================================================ */
.yj-sources {
  margin-top: 12px;
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-secondary);
  opacity: 0.8;
  border-top: 1px solid var(--glass-border);
  padding-top: 10px;
}

.yj-goal-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.yj-goal-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  text-decoration: none;
  transition: background 0.12s cubic-bezier(.2,.8,.2,1);
}
.yj-goal-link:hover { background: var(--bg-card-hover); }
.yj-goal-link:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }
.yj-goal-link-t { color: var(--text-primary); font-weight: 700; font-size: 0.92rem; }
.yj-goal-link-d { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.4; }

/* ============================================================
   P3 — 디자인 시스템 이관 레이어
   crownyuja.co.kr/ds/v1 을 실은 뒤, 이 앱의 기존 토큰을 DS 값으로 다시 묶는다.
   기존 선택자·클래스는 손대지 않는다(가산 전용). 커스텀 속성은 나중 선언이
   이기므로, 여기서 :root 를 다시 적으면 2,600줄이 한 번에 따라온다.

   왜 지면을 뒤집는가
     다크 글래스모피즘 + 보라 그라데이션은 2021년 무렵의 템플릿 룩이고,
     DS 6장은 backdrop-filter 를 명시적으로 금지한다 — 교실 저사양 크롬북에서
     스크롤 프레임이 무너지기 때문이다. 미감 이전에 성능 규약이다.

   셸(.yj-shell)은 씌우지 않는다
     DS 는 정보 밀도가 필요한 넓은 화면에 셸을 씌우지 말라고 못 박는다
     (.yj-shell__body 가 데스크톱에서 720px 로 조인다). 17칸 목표 그리드와
     시뮬레이터가 있는 이 화면이 정확히 그 예외다. 값만 빌린다.

   하단 도크도 넣지 않는다
     DS 의 탭바는 장소 6개를 가진 앱 구조 전용이다. 이 앱은 한 장짜리
     스크롤 페이지이고, 모바일 진입은 F-02 를 고치며 이미 살아났다.
   ============================================================ */

:root {
  /* ── 의미 토큰 (p3_tokenize.py 가 참조한다) ────────────── */
  --yj-fill-1: #FDFCFA;
  --yj-fill-2: var(--yj-surface, #F5F4F0);
  --yj-fill-3: var(--yj-surface-2, #EDECE7);
  --yj-fill-4: #E6E4DE;
  --yj-line-1: var(--yj-hairline, #E8E7E4);
  --yj-line-2: var(--yj-hairline-strong, #D8D6D0);
  --yj-sh-1: rgba(20,24,16,.05);
  --yj-sh-2: rgba(20,24,16,.08);
  --yj-sh-3: rgba(20,24,16,.12);

  /* ── 지면 ───────────────────────────────────────────── */
  --bg-primary: var(--yj-cream, #FBFAF6);
  --bg-secondary: var(--yj-surface, #F5F4F0);
  --bg-card: var(--yj-canvas, #FFFFFF);
  --bg-card-hover: var(--yj-surface, #F5F4F0);
  --glass-border: var(--yj-hairline, #E8E7E4);
  --glass-blur: none;                 /* DS 6장 — backdrop-filter 금지 */

  /* ── 글자 ───────────────────────────────────────────── */
  --text-primary: var(--yj-ink-deep, #16181A);
  --text-secondary: var(--yj-slate, #6F6E69);
  --text-accent: var(--yj-leaf-ink, #2F7A2C);

  /* ── 브랜드 — student 테마: 리프 그린이 주, 앰버가 보조 ── */
  --accent-gradient: var(--yj-grad);
  --success: var(--yj-success, #4CAA48);
  --warning: var(--yj-warn, #E67E22);
  --error: var(--yj-error, #C82014);

  /* ── 스케일 — DS 규격 밖의 값을 쓰지 않는다 ───────────── */
  --radius-sm: var(--yj-r-xs, 4px);    /* 태그·인풋 */
  --radius-md: var(--yj-r-sm, 8px);    /* 버튼·소형 카드 */
  --radius-lg: var(--yj-r-lg, 16px);   /* 대형 카드·모달 */
  --radius-xl: var(--yj-r-lg, 16px);   /* 32px 은 스케일 밖 → 16px 로 흡수 */
  --transition: color var(--yj-m-fast,120ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1)),
                background-color var(--yj-m-fast,120ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1)),
                border-color var(--yj-m-fast,120ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1)),
                transform var(--yj-m-mid,200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1)),
                box-shadow var(--yj-m-mid,200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
  --shadow-glow: 0 6px 18px var(--yj-sh-2);
  --header-h: var(--yj-dock-h, 56px);  /* 68px → 56px 단일값 */

  /* ── 서체 ───────────────────────────────────────────── */
  --font-ko: var(--yj-font-ui);
  --font-en: var(--yj-font-ui);
}

/* ── 지면과 본문 ─────────────────────────────────────── */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--yj-t-body, 17px);   /* DS: 본문 17px 아래로 내려가지 않는다 */
}

::-webkit-scrollbar-track { background: var(--yj-surface, #F5F4F0); }
::-webkit-scrollbar-thumb { background: var(--yj-line-2); }

/* ── 헤더 — 반투명 흐림 대신 불투명 + 헤어라인 ────────── */
.site-header {
  height: var(--header-h);
  background: var(--yj-canvas, #fff);
  border-bottom: 1px solid var(--yj-hairline, #E8E7E4);
}
.site-header,
.modal-box,
.mobile-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }

.header-logo .logo-icon { box-shadow: none; }
.nav-link { color: var(--yj-slate); min-height: 36px; }
.nav-link:hover { color: var(--yj-ink-deep); background: var(--yj-fill-3); }
.nav-link.active { color: var(--yj-leaf-ink); background: var(--yj-leaf-tint); }

.xp-badge { background: var(--yj-fill-3); border: 1px solid var(--yj-line-1); }
.streak-badge {
  background: var(--yj-orange-tint);
  border: 1px solid var(--yj-line-1);
  color: var(--yj-orange-ink);
}
.mobile-nav { background: var(--yj-canvas, #fff); border-bottom: 1px solid var(--yj-hairline); }
.mobile-nav .nav-link { min-height: var(--yj-tap, 44px); }
.hamburger span { background: var(--yj-ink); }

/* ── 히어로 — orb 와 글로우를 걷어낸다 ────────────────── */
.hero-bg, .orb { display: none; }
.hero-section { background: var(--yj-grad-soft); }
.hero-title { color: var(--yj-ink-deep); }
.gradient-text {
  background: var(--yj-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle { color: var(--yj-slate); }
.hero-eyebrow {
  background: var(--yj-canvas);
  border: 1px solid var(--yj-line-1);
  color: var(--yj-leaf-ink);
}
.hero-stat { background: var(--yj-canvas); border: 1px solid var(--yj-line-1); color: var(--yj-ink); }

/* ── 버튼 — DS 5종으로 흡수한다. 화면당 primary 는 1개 ──
   student 테마에서 --yj-amber 는 리프 그린이다.
   흰 글자 대비는 3.1:1 로 DS 가 허용하는 하한을 넘는다. */ .btn-primary,
.hero-cta.btn-primary {
  background: var(--yj-amber);
  color: var(--yj-on-dark);
  border: none;
  border-radius: var(--yj-r-full, 9999px);
  min-height: var(--yj-tap, 44px);
  box-shadow: none;
} .btn-primary:hover,
.hero-cta.btn-primary:hover {
  background: var(--yj-amber-press);
  transform: none;
}
/* secondary 는 테두리가 아니라 틴트다 — 선이 많으면 화면이 시끄럽다 */
.btn-secondary, .hero-cta.btn-secondary, .btn-outline {
  background: var(--yj-amber-tint);
  color: var(--yj-amber-ink);
  border: none;
  border-radius: var(--yj-r-sm, 8px);
  min-height: var(--yj-tap, 44px);
}
.btn-tertiary, .hero-cta.btn-tertiary {
  background: var(--yj-orange-tint);
  color: var(--yj-orange-ink);      /* 앰버 위에는 잉크만 — 흰 글자는 1.6:1 */
  border: none;
  border-radius: var(--yj-r-sm, 8px);
  min-height: var(--yj-tap, 44px);
}
.btn-ghost {
  background: none; color: var(--yj-slate); border: none;
  min-height: var(--yj-tap, 44px);
}
.btn-ghost:hover { background: var(--yj-fill-3); color: var(--yj-ink-deep); }
.btn:focus-visible, .hero-cta:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--yj-leaf); outline-offset: 2px;
}

/* ── 카드류 ─────────────────────────────────────────── */ .about-card,
.quiz-card,
.quiz-start-card,
.quiz-result-card,
.ai-card,
.link-category,
.badge-header-card,
.certificate-section,
.declaration-section,
.edu-card,
.career-badge,
.dilemma-box {
  background: var(--yj-canvas, #fff);
  border: 1px solid var(--yj-hairline, #E8E7E4);
  box-shadow: var(--yj-sh-card, 0 1px 2px rgba(20,24,16,.05));
}
.about-stat-card { background: var(--yj-fill-2); border: 1px solid var(--yj-line-1); } .stat-num { color: var(--yj-ink-deep); }
.section-title { color: var(--yj-ink-deep); }
.section-subtitle { color: var(--yj-slate); }

/* ── 모달 ───────────────────────────────────────────── */
.modal-overlay { background: rgba(22,24,26,.45); }
.modal-box { background: var(--yj-canvas, #fff); border: 1px solid var(--yj-hairline); }
.modal-header, .modal-header-top { color: var(--yj-ink-deep); }
.modal-header .modal-title, .modal-header .modal-num,
#modalTitle, .modal-header-top h2 { color: var(--yj-ink-deep); }
.modal-header-top p { color: var(--yj-slate); }
.modal-tab-btn { color: var(--yj-slate); min-height: 40px; }
.modal-tab-btn.active { color: var(--yj-leaf-ink); border-bottom-color: var(--yj-leaf); }
.modal-list li, .modal-body p { color: var(--yj-ink); }
.nexus-icon { background: var(--yj-fill-3); color: var(--yj-ink); }
.highlight-card { background: var(--yj-leaf-tint); border: 1px solid var(--yj-line-1); }

/* ── 퀴즈 ───────────────────────────────────────────── */
.ox-btn, .mc-btn {
  background: var(--yj-canvas); border: 1px solid var(--yj-line-1);
  color: var(--yj-ink-deep); min-height: var(--yj-tap, 44px);
}
.ox-btn:hover:not(:disabled), .mc-btn:hover:not(:disabled) { background: var(--yj-fill-2); }
.ox-btn.correct, .mc-btn.correct {
  background: var(--yj-leaf-tint); border-color: var(--yj-leaf); color: var(--yj-leaf-ink);
}
.ox-btn.wrong, .mc-btn.wrong {
  background: var(--yj-error-tint); border-color: var(--yj-error); color: var(--yj-error);
}
.quiz-question { color: var(--yj-ink-deep); }
.quiz-progress-bar { background: var(--yj-fill-3); }
.quiz-progress-fill { background: var(--yj-grad); }
.quiz-feedback { color: var(--yj-ink); }
.quiz-feedback.correct { background: var(--yj-leaf-tint); }
.quiz-feedback.wrong { background: var(--yj-error-tint); }

/* ── 입력 ───────────────────────────────────────────── */
input, select, textarea, .ai-prompt-text, .cert-input-wrap input {
  background: var(--yj-canvas);
  color: var(--yj-ink-deep);
  border: 1px solid var(--yj-line-2);
  border-radius: var(--yj-r-xs, 4px);
  min-height: var(--yj-tap, 44px);
  font-size: var(--yj-t-body, 17px);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--yj-orange);   /* 검색·입력 포커스는 주황 역할 */
  outline-offset: 1px;
}

/* ── 목표 카드 — P0 레이어를 밝은 지면에 맞춘다 ─────────
   원색은 상단 6px 띠와 번호 칩에만. 나머지는 흰 종이와 잉크. */
.goal-card.yj-goal-card {
  background: var(--yj-canvas, #fff);
  border: 1px solid var(--yj-hairline, #E8E7E4);
  box-shadow: var(--yj-sh-card);
}
.goal-card.yj-goal-card:hover {
  box-shadow: 0 8px 22px var(--yj-sh-2);
  border-color: var(--sdg, var(--yj-line-2));
}
.goal-card.yj-goal-card .goal-name { color: var(--yj-ink-deep); }

/* ── 뱃지·링크·AI ────────────────────────────────────── */
.badge-item { background: var(--yj-canvas); border: 1px solid var(--yj-line-1); }
.link-item { background: var(--yj-canvas); border: 1px solid var(--yj-line-1); color: var(--yj-ink-deep); }
.link-item:hover { background: var(--yj-fill-2); }
.ai-platform-btn { background: var(--yj-canvas); border: 1px solid var(--yj-line-1); color: var(--yj-ink-deep); }

/* ── 어두운 무대는 그대로 둔다 ────────────────────────
   거미줄 맵과 게임 캔버스는 밝은 지면에서도 어두운 무대가 맞다. */
.spider-node { color: var(--sdg-ink, #fff); }
.spider-label { color: #fff; }

/* ── 푸터 ───────────────────────────────────────────── */
.site-footer {
  background: var(--yj-surface);
  border-top: 1px solid var(--yj-hairline);
  color: var(--yj-slate);
}

/* ── 접근성 — 최소 터치 타깃 44px ────────────────────── */
.game-tab, .sim-tab, .decl-goal-btn, .ai-platform-btn, .modal-close,
.toggle-switch, .yj-goal-link {
  min-height: var(--yj-tap, 44px);
}
.modal-close { min-width: var(--yj-tap, 44px); }
.decl-goal-btn { background: var(--yj-canvas); border: 2px solid transparent; color: var(--yj-ink-deep); }

/* ── P2 요소를 밝은 지면에 맞춘다 ────────────────────── */
.yj-sources { border-top: 1px solid var(--yj-hairline); color: var(--yj-slate); opacity: 1; }
.yj-goal-link { background: var(--yj-canvas); border: 1px solid var(--yj-line-1); }
.yj-goal-link:hover { background: var(--yj-fill-2); }
.yj-goal-link-t { color: var(--yj-ink-deep); }
.yj-goal-link-d { color: var(--yj-slate); }
.yj-weak-title { color: var(--yj-slate); }
.yj-skeleton { color: var(--yj-slate); }

/* ── app.js 에서 걷어낸 색을 클래스로 받는다 ──────────── */
:root {
  /* 정의 없이 7곳에서 쓰이던 변수. 그중 4곳이 글자색이라 잉크 쪽으로 잡는다
     (원색 리프는 흰 종이에서 2.48:1 밖에 나오지 않는다). */
  --primary: var(--yj-leaf-ink, #2F7A2C);
}
/* 테두리·배경으로 쓰이던 자리는 원색을 그대로 유지한다 */
.cert-input-wrap input:focus { border-color: var(--yj-orange); }
.career-quiz-btn:hover { border-color: var(--yj-leaf); }
.switch input:checked + .slider { background-color: var(--yj-leaf); }

.yj-feedback-link {
  display: inline-block;
  padding: 10px 14px;
  min-height: var(--yj-tap, 44px);
  border-radius: var(--yj-r-sm, 8px);
  background: var(--yj-canvas);
  border: 1px solid var(--yj-line-1);
  color: var(--yj-leaf-ink);
  text-decoration: none;
  font-weight: 600;
}
.yj-feedback-link:hover { background: var(--yj-fill-2); }

.r-num.yj-num-ok   { color: var(--yj-leaf-ink); }
.r-num.yj-num-bad  { color: var(--yj-error); }
.r-num.yj-num-warn { color: var(--yj-orange-ink); }

/* ── P3 계측 후 보정 ──────────────────────────────────
   흰 글자 on 리프(#4CAA48)는 실측 2.94:1 로 대형 텍스트 3:1 에도 못 미쳤다.
   DS 는 "원색 위에는 잉크만"을 우선 규칙으로 두므로 forest 잉크를 쓴다(6.4:1). */ .btn-primary,
.hero-cta.btn-primary,
.btn-primary:hover,
.hero-cta.btn-primary:hover {
  color: var(--yj-forest, #142814);
}

/* 스크림에도 흐림을 두지 않는다 (DS 6장) */
.modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 터치 타깃 44px — 헤더 56px 안에 44px 이 들어간다 */
.header-nav .nav-link,
.mobile-nav .nav-link { min-height: var(--yj-tap, 44px); display: inline-flex; align-items: center; }
.btn, .hero-cta { min-height: var(--yj-tap, 44px); }
.modal-close {
  width: var(--yj-tap, 44px); height: var(--yj-tap, 44px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--yj-slate); background: none; border: none;
  border-radius: var(--yj-r-full, 9999px);
}
.modal-close:hover { background: var(--yj-fill-3); color: var(--yj-ink-deep); }
.modal-tabs-nav select { min-height: var(--yj-tap, 44px); }
.header-logo { min-height: var(--yj-tap, 44px); display: inline-flex; align-items: center; }

/* ── P3 대비 보정 2차 — 계측으로 찾은 잔여 흰 글씨 ──────
   지면을 뒤집으면 "밝은 판 위의 흰 글씨"가 남는다. 계측으로 17개 묶음을
   찾아 한 번에 잡는다. 전부 기존 선택자를 덮기만 한다(가산 전용). */

/* 소설 섹션 목표 카드 — P0 에서 손대지 않은 두 번째 카드 형태.
   #goalsGrid 와 마크업이 달라(.goal-icon/.goal-info) 별도로 다룬다. */
#storyGoalGrid .goal-card {
  background: var(--yj-canvas, #fff);
  border: 1px solid var(--yj-hairline);
  box-shadow: var(--yj-sh-card);
  aspect-ratio: auto;
  padding: 16px 12px;
}
#storyGoalGrid .goal-card::before { display: none; }
#storyGoalGrid .goal-card:hover { box-shadow: 0 8px 22px var(--yj-sh-2); transform: none; }
#storyGoalGrid .goal-num { color: var(--yj-slate); font-size: var(--yj-t-cap, 13px); }
#storyGoalGrid .goal-title { color: var(--yj-ink-deep); font-size: 15px; font-weight: 700; line-height: 1.35; }
#storyGoalGrid .goal-icon { border-radius: var(--yj-r-sm, 8px); }

/* 카드 안 제목 — 흰 글씨가 흰 판 위에 남아 있었다 */
.edu-card h4, .career-badge h4, .dilemma-box h3,
.dilemma-result h4, .mission-card h4 { color: var(--yj-ink-deep); }
.edu-card p, .career-badge p { color: var(--yj-ink); }

/* 딜레마 — 찬반 색은 유지하되 잉크 쪽으로 내린다 */
.dilemma-pro h4 { color: var(--yj-leaf-ink); }
.dilemma-con h4 { color: var(--yj-error); }
.dilemma-pro { background: var(--yj-leaf-tint); border-radius: var(--yj-r-sm, 8px); }
.dilemma-con { background: var(--yj-error-tint); border-radius: var(--yj-r-sm, 8px); }
.dilemma-q { color: var(--yj-ink-deep); }

/* 미래 토글 라벨 */

/* 게임·시뮬레이터 탭 — 비활성은 잉크, 활성만 채움 */
.game-tab, .sim-tab {
  background: var(--yj-canvas);
  border: 1px solid var(--yj-line-1);
  color: var(--yj-ink-deep);
  border-radius: var(--yj-r-sm, 8px);
}
.game-tab.active, .sim-tab.active {
  background: var(--yj-amber);
  color: var(--yj-forest, #142814);
  border-color: var(--yj-amber);
}
.sim-step-dot { background: var(--yj-fill-4); color: var(--yj-slate); }
.sim-step-dot.active { background: var(--yj-amber); color: var(--yj-forest, #142814); }
.diet-type-btn { background: var(--yj-canvas); border: 1px solid var(--yj-line-1); color: var(--yj-ink-deep); }
.diet-type-btn.active { background: var(--yj-amber); color: var(--yj-forest, #142814); }
.game-controls p, .sim-desc, .game-card-header p { color: var(--yj-slate); }
.game-card-header h3 { color: var(--yj-ink-deep); }

/* XP 배지 — 레벨 색은 아이콘에만 두고 글자는 잉크로 */
.xp-badge .xp-val { color: var(--yj-ink-deep) !important; font-weight: 700; }
.xp-badge .xp-lv { color: var(--yj-ink); }

/* 모달 탭 — 활성 표시는 밑줄이 맡고 글자는 잉크로 */
.modal-tab-btn { color: var(--yj-slate); }
.modal-tab-btn.active { color: var(--yj-ink-deep); border-bottom: 2px solid var(--yj-leaf); }

/* 히어로 보조 CTA — 14pt 굵은 글씨(18.66px) 이상이면 3:1 로 충분하다 */
.hero-cta { font-size: 19px; font-weight: 700; }

/* 진행 막대 위 글자 */
.dilemma-bar { color: var(--yj-forest, #142814); text-shadow: none; font-weight: 700; }
.dilemma-bar-wrap { background: var(--yj-fill-3); box-shadow: none; }
.pro-bar { background: var(--yj-leaf); }
.con-bar { background: var(--yj-orange); }

/* 시뮬레이터 단계 표시 — 11.2px 이라 4.5:1 이 필요하다 */
.sim-step-dot { background: var(--yj-fill-3); color: var(--yj-ink); font-weight: 700; }
.sim-step-dot.active { background: var(--yj-amber); color: var(--yj-forest, #142814); }

/* ── P3 육안 확인 후 보정 ─────────────────────────────
   1) 히어로 전면을 유자 그라데이션으로 칠하니 면이 너무 짙었다.
      DS 면적 규칙은 "원색은 점으로, 틴트는 면으로"지만 이건 틴트도 과했다.
      크림 지면 위에 위쪽만 옅게 물들인다.
   2) 그라데이션 글자의 노란 끝이 밝은 지면에서 읽히지 않았다.
      잉크 쪽 두 색으로 바꿔 '익어감'은 남기고 대비를 확보한다. */
.hero-section {
  background:
    linear-gradient(180deg, var(--yj-leaf-tint) 0%, rgba(255,255,255,0) 55%),
    var(--yj-cream, #FBFAF6);
}
.gradient-text {
  background: linear-gradient(135deg, var(--yj-leaf-press, #2D7A29) 0%, var(--yj-orange-ink, #A85E08) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 그라데이션 글자 정리 ─────────────────────────────
   밝은 지면으로 뒤집으니 background-clip:text 로 칠해진 제목들이
   연보라 그라데이션(#f0f4ff→#a78bfa)으로 남아 거의 읽히지 않았다.
   -webkit-text-fill-color 는 color 를 이기므로 함께 되돌려야 한다.
   그라데이션은 히어로 한 곳에만 남긴다 — 여러 곳에 쓰면 강조가 사라진다. */
.section-title,
.about-stat-card .stat-num,
.quiz-start-stat .num,
.result-score,
.gr-score {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--yj-ink-deep);
}
.about-stat-card .stat-num,
.quiz-start-stat .num { color: var(--yj-leaf-ink); }
.result-score, .gr-score { color: var(--yj-leaf-ink); }
.header-logo .logo-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--yj-ink-deep);
}

/* .hero-title .gradient-text 가 특이도 0,2,0 으로 이긴다 — 같은 깊이로 덮는다 */
.hero-title .gradient-text {
  background: linear-gradient(135deg, var(--yj-leaf-press, #2D7A29) 0%, var(--yj-orange-ink, #A85E08) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 모달 탭 바 마무리 ────────────────────────────────
   원래 .modal-tab-btn.active 는 background:var(--text-primary) 였다.
   토큰을 잉크로 다시 묶으면서 '잉크 위 잉크'가 되어 글자가 사라졌다.
   활성 표시는 밑줄과 틴트가 맡는다 — 채움은 primary 버튼 하나로 족하다. */
.modal-tab-btn.active {
  background: var(--yj-leaf-tint);
  color: var(--yj-leaf-ink);
  border-color: transparent;
  border-bottom: 2px solid var(--yj-leaf);
}

/* 탭 바 안의 AI 챗 버튼은 이 화면의 주 행동이 아니다.
   화면당 primary 1개 규칙에 따라 secondary 틴트로 내린다. */
.modal-tabs-nav .btn-primary {
  background: var(--yj-orange-tint);
  color: var(--yj-orange-ink);
  border-radius: var(--yj-r-sm, 8px);
  min-height: var(--yj-tap, 44px);
  height: var(--yj-tap, 44px);
  white-space: nowrap;
}
.modal-tabs-nav .btn-primary:hover { background: var(--yj-orange); color: var(--yj-forest, #142814); }

/* 14.4px 은 4.5:1 이 필요하다 — 주황 잉크는 4.38 이라 반 칸 모자랐다 */
.modal-tabs-nav .btn-primary { color: var(--yj-ink-deep); font-weight: 700; }

/* ============================================================
   P3-B — 인라인 SVG 아이콘
   이모지는 플랫폼마다 모양·색이 달라 색 체계를 깬다(DS 원칙 ③).
   .yj-i 는 currentColor 를 따르므로 선택·비활성·테마가 자동으로 맞는다.
   ============================================================ */
.yj-i {
  flex: none;
  display: inline-block;
  vertical-align: -0.15em;
}

/* 아이콘 + 라벨을 한 줄로. 아이콘만 두면 초등학생이 뜻을 모르고,
   라벨만 두면 인지 속도가 느리다 — DS 탭바 원칙과 같다. */ .nav-link,
.hero-cta,
.link-category h3,
.modal-body h3,
.modal-body h4,
.dilemma-vote-btn,
.modal-tabs-nav .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mobile-nav .nav-link { display: flex; justify-content: flex-start; padding-left: 20px; }
.section-title,
#futureTitle,
.certificate-section h3,
.declaration-section h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.modal-section h3 { display: flex; align-items: center; gap: 8px; }
.section-title .yj-i { color: var(--yj-leaf); }

/* 목표 카드 아이콘 — 색은 상단 띠와 번호 칩이 이미 맡고 있다.
   17색 중 여럿이 흰 바탕에서 3:1 을 넘지 못해 아이콘은 잉크로 둔다. */
.goal-card .goal-emoji,
#storyGoalGrid .goal-emoji-large {
  color: var(--yj-ink-deep);
  display: inline-flex;
  filter: none;
}
#storyGoalGrid .goal-icon { background: var(--yj-fill-3) !important; color: var(--yj-ink-deep); }

/* 헤더·배지 */
.header-logo .logo-icon { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); }
.streak-badge .streak-icon,
.xp-badge .xp-icon { display: inline-flex; color: currentColor; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.hero-stat { display: inline-flex; align-items: center; gap: 8px; }
.hero-stat .stat-icon { display: inline-flex; color: var(--yj-leaf); }

/* 연결성 칩 · 자료 링크 분류 */
.nexus-icon { display: inline-flex; align-items: center; gap: 6px; }
.link-category-icon { display: inline-flex; color: var(--yj-leaf); }
.modal-close .yj-i { vertical-align: middle; }

/* 목표 아이콘이 들어간 제목·버튼 */
#modalTitle { display: flex; align-items: center; gap: 10px; }
.decl-goal-btn { display: inline-flex; align-items: center; gap: 8px; }
.badge-emoji { display: inline-flex; color: var(--yj-ink-deep); }
.badge-item.earned .badge-emoji { color: var(--yj-leaf-ink); }
.yj-toast-icon { display: inline-flex; color: var(--yj-leaf-ink); }

.earned-star, .goal-badge { display: inline-flex; align-items: center; justify-content: center; }
.earned-star .yj-i { fill: currentColor; }
.goal-card .goal-badge .yj-i { fill: currentColor; }

/* ── 뱃지판 ───────────────────────────────────────────
   SDG 원색을 글자에 쓰면 흰 바탕에서 최저 1.46:1 까지 떨어졌다.
   목표 카드와 같은 방식으로 — 번호는 색 칩, 이름은 잉크. */
.badge-item {
  background: var(--yj-canvas);
  border: 1px solid var(--yj-line-1);
  border-top: 4px solid var(--sdg, var(--yj-line-2));
}
.badge-item.locked { opacity: .55; }
.badge-item.earned { border-color: var(--sdg, var(--yj-line-1)); }
.badge-item .badge-num {
  background: var(--sdg, var(--yj-fill-3));
  color: var(--sdg-ink, var(--yj-ink-deep));
  font-size: var(--yj-t-label, 11px);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--yj-r-xs, 4px);
}
.badge-item.locked .badge-num { background: var(--yj-fill-3); color: var(--yj-slate); }
.badge-item .badge-name {
  color: var(--yj-ink-deep);
  font-size: var(--yj-t-cap, 13px);
  line-height: 1.35;
}
.badge-item.locked .badge-name { color: var(--yj-slate); }
.badge-ring-text { color: var(--yj-ink-deep); }

/* 아이콘으로 바뀐 자리들 */
.yj-hero-icon { display:flex; justify-content:center; margin-bottom:16px; color: var(--yj-leaf); }
.result-emoji { display:flex; justify-content:center; color: var(--yj-leaf-ink); }
.quiz-score-live { display:inline-flex; align-items:center; gap:4px; }
.ox-btn { flex-direction: column; gap: 6px; }
.ox-btn .yj-i { color: currentColor; }
.link-item-icon { display:inline-flex; color: var(--yj-slate); }
.yj-toast-title { display:flex; align-items:center; gap:6px; font-weight:700; color: var(--yj-ink-deep); }
.xp-toast { display:inline-flex; align-items:center; gap:6px; }
.gr-xp { display:flex; align-items:center; justify-content:center; gap:6px; }
#modalGoalLinks h3 { display:flex; align-items:center; gap:8px; }

/* 11.2px 이라 4.5:1 이 필요하다 */
.quiz-type-badge { background: var(--yj-fill-3); color: var(--yj-ink); font-weight: 700; }
.yj-ext, .link-item-arrow { display:inline-flex; color: var(--yj-slate); opacity: 1; }

/* AI 플랫폼 — 서비스 브랜드는 이모지 대신 색 점으로 구분한다.
   이모지 다섯 개가 한 줄에 있으면 색 체계가 그 자리에서 무너진다. */
.ai-platform-btn { border-color: var(--yj-line-1); gap: 8px; }
.platform-dot {
  width: 10px; height: 10px; flex: none;
  border-radius: var(--yj-r-full, 9999px);
  background: var(--brand, var(--yj-slate));
}

/* 아이콘도 잉크 계열로 — 원색 리프는 흰 종이에서 2.48:1 이라 형체가 흐리다.
   비텍스트 대비 기준(3:1)에도 못 미친다. */ .section-title .yj-i,
.hero-stat .stat-icon,
.link-category-icon,
.yj-hero-icon { color: var(--yj-leaf-ink); }

/* ── 밝은 지면 전환 후 남은 저대비 자리 (상태별 계측으로 찾음) ── */
.floating-goal-dot { color: inherit; }          /* JS 가 대비 높은 쪽을 넣는다 */
.streak-badge, .streak-badge .streak-val { color: var(--yj-ink-deep); }
.badge-item.locked .badge-num { color: var(--yj-ink); }

/* 히어로 목표 점 — 원색 위 11.2px 숫자는 어떤 글자색을 골라도
   목표 10(#DD1367)에서 3.7:1 이 한계였다. 색을 테두리로 옮기고
   숫자는 흰 종이 위 잉크로 둔다. 색 식별은 그대로 남는다. */
.floating-goal-dot {
  background: var(--yj-canvas) !important;
  color: var(--yj-ink-deep) !important;
  border: 2.5px solid var(--dot, var(--yj-line-2));
  font-weight: 700;
}

/* 14.4px 보조 버튼 — 앰버 잉크가 틴트 위에서 4.39:1 이라 반 칸 모자랐다 */
.btn-outline, .btn-secondary { color: var(--yj-ink-deep); }
.btn-outline .yj-i, .btn-secondary .yj-i { color: var(--yj-leaf-ink); }

/* 4.47:1 로 반 칸 모자랐다. 굵은 글씨는 18.66px 부터 3:1 이 기준이다. */
.diet-earth-label { font-size: 19px; font-weight: 700; }

/* ============================================================
   깨끗한 물 배달 — 파이프 잇기
   물이 닿은 칸을 파랗게 채워 "어디까지 왔는지"가 눈에 보이게 한다.
   그것이 다음에 어디를 돌릴지 정하는 단서다.
   ============================================================ */
.wf-wrap { max-width: 520px; margin: 0 auto; }
.wf-hud {
  display: flex; justify-content: center; gap: var(--yj-s5, 24px);
  margin-bottom: var(--yj-s3, 12px);
}
.wf-stat { font-size: var(--yj-t-cap, 13px); color: var(--yj-slate); }
.wf-stat b { color: var(--yj-ink-deep); font-weight: 700; margin-right: 4px; }
.wf-hint { text-align: center; color: var(--yj-slate); font-size: 15px; margin: 0 0 var(--yj-s4, 16px); }

.wf-board-row { display: flex; flex-direction: column; align-items: center; gap: var(--yj-s2, 8px); }
.wf-tag {
  font-size: var(--yj-t-cap, 13px); font-weight: 700;
  padding: 4px 12px; border-radius: var(--yj-r-full, 9999px);
}
.wf-tag-src { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); }
.wf-tag-end { background: var(--yj-orange-tint); color: var(--yj-ink-deep); }

.wf-board {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  gap: 3px;
  width: 100%;
  max-width: 420px;
  padding: 6px;
  background: var(--yj-surface-2);
  border-radius: var(--yj-r-lg, 16px);
}
.wf-cell {
  aspect-ratio: 1;
  background: var(--yj-canvas);
  border: none;
  border-radius: var(--yj-r-xs, 4px);
  padding: 0;
  cursor: pointer;
  color: var(--yj-hairline-strong);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--yj-m-fast, 120ms) var(--yj-ease, ease);
}
.wf-cell:hover { background: var(--yj-fill-2); }
.wf-cell:focus-visible { outline: 2px solid var(--yj-leaf); outline-offset: -2px; }
.wf-cell.wf-wet { color: #0A97D9; background: #E8F5FC; }     /* SDG 6 색 계열 */
.wf-cell.wf-src { box-shadow: inset 0 0 0 2.5px var(--yj-leaf); }
.wf-cell.wf-end { box-shadow: inset 0 0 0 2.5px var(--yj-orange); }
.wf-pipe { width: 100%; height: 100%; display: block; }

.wf-clear {
  margin-top: var(--yj-s5, 24px);
  padding: var(--yj-s5, 24px);
  background: var(--yj-leaf-tint);
  border-radius: var(--yj-r-lg, 16px);
  text-align: center;
}
.wf-clear-title { font-size: 20px; font-weight: 700; color: var(--yj-ink-deep); margin: 0; }
.wf-clear-sub { color: var(--yj-ink); margin: 6px 0 var(--yj-s4, 16px); font-size: 15px; }

.wf-note {
  margin-top: var(--yj-s5, 24px); text-align: center;
  font-size: var(--yj-t-cap, 13px); color: var(--yj-slate);
}

@media (prefers-reduced-motion: reduce) { .wf-cell { transition: none; } }

/* 수원지·마을은 고정 — 돌릴 수 없다는 것이 형태로 보여야 한다 */
.wf-cell.wf-lock { cursor: default; background: var(--yj-fill-2); }
.wf-cell.wf-lock:hover { background: var(--yj-fill-2); }

/* ============================================================
   친환경 마을 설계 — 배치 퍼즐
   네 개의 계기(낮·밤·탄소·예산)가 늘 보여야 무엇을 포기할지 정할 수 있다.
   ============================================================ */
.ec-wrap { max-width: 560px; margin: 0 auto; }

.ec-hud {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--yj-s3, 12px); margin-bottom: var(--yj-s4, 16px);
}
.ec-meter { background: var(--yj-fill-2); border-radius: var(--yj-r-sm, 8px); padding: 10px 12px; }
.ec-meter.ok { background: var(--yj-leaf-tint); }
.ec-meter-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--yj-t-cap, 13px); color: var(--yj-ink);
}
.ec-meter-top b { color: var(--yj-ink-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.ec-bar { height: 5px; margin-top: 6px; background: var(--yj-canvas); border-radius: var(--yj-r-full, 9999px); overflow: hidden; }
.ec-bar i { display: block; height: 100%; background: var(--yj-slate); }
.ec-meter.ok .ec-bar i { background: var(--yj-leaf); }

.ec-brief { text-align: center; color: var(--yj-ink-deep); font-weight: 700; margin: 0 0 6px; }
.ec-hint { text-align: center; color: var(--yj-slate); font-size: 15px; margin: 0 0 var(--yj-s4, 16px); }

.ec-board {
  display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: 6px; max-width: 420px; margin: 0 auto;
}
.ec-cell {
  aspect-ratio: 1; border: 1px solid var(--yj-line-1); border-radius: var(--yj-r-sm, 8px);
  background: var(--yj-canvas); display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; color: var(--yj-slate);
  transition: background var(--yj-m-fast, 120ms) var(--yj-ease, ease);
}
.ec-cell:hover { background: var(--yj-fill-2); }
.ec-cell:focus-visible { outline: 2px solid var(--yj-leaf); outline-offset: 2px; }
.ec-hill { background: var(--yj-fill-3); }
.ec-river { background: #E8F5FC; color: #0A6C99; }
.ec-forest { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); }
.ec-house { background: var(--yj-orange-tint); color: var(--yj-ink-deep); cursor: default; }
.ec-cell.built { background: var(--yj-leaf-tint); color: var(--yj-leaf-ink); border-color: var(--yj-leaf); }
.ec-build, .ec-terr { display: inline-flex; }

.ec-warn {
  margin: var(--yj-s3, 12px) auto 0; max-width: 420px; text-align: center;
  color: var(--yj-error); font-size: 15px; font-weight: 600;
}
.ec-note {
  margin: var(--yj-s3, 12px) auto 0; max-width: 420px; text-align: center;
  color: var(--yj-ink); font-size: 15px;
}

.ec-legend {
  display: flex; flex-wrap: wrap; gap: var(--yj-s2, 8px);
  justify-content: center; margin-top: var(--yj-s5, 24px);
}
.ec-key {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--yj-fill-2); border-radius: var(--yj-r-xs, 4px);
  padding: 5px 9px; font-size: var(--yj-t-cap, 13px); color: var(--yj-ink);
}
.ec-key b { color: var(--yj-ink-deep); font-weight: 700; }
.ec-key i { color: var(--yj-slate); font-style: normal; }

.ec-clear {
  margin-top: var(--yj-s5, 24px); padding: var(--yj-s5, 24px);
  background: var(--yj-leaf-tint); border-radius: var(--yj-r-lg, 16px); text-align: center;
}
.ec-clear-title { font-size: 20px; font-weight: 700; color: var(--yj-ink-deep); margin: 0; }
.ec-clear-sub { color: var(--yj-ink); margin: 6px 0 var(--yj-s4, 16px); font-size: 15px; }

.ec-foot {
  display: flex; align-items: center; justify-content: center; gap: var(--yj-s4, 16px);
  margin-top: var(--yj-s5, 24px);
}
.ec-step { font-size: var(--yj-t-cap, 13px); color: var(--yj-slate); }

@media (max-width: 480px) { .ec-hud { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ec-cell { transition: none; } }

/* ============================================================
   P4 — 헤더 정리 · 세그먼트 토글 · 플로팅 버튼
   ============================================================ */

/* ── 언어 토글은 감춘다 ───────────────────────────────
   영어 콘텐츠가 채워지면 이 규칙과 page_shell 의 hidden 을 함께 뗀다.
   [hidden] 만으로는 .toggle-group 의 display:flex 가 이겨서 보였다. */
#langToggleGroup[hidden] { display: none !important; }

/* ── 레벨(XP)·연속 출석 흔적 ───────────────────────────
   기능을 걷어냈다. 남아 있을지 모를 마크업까지 함께 감춘다. */
.xp-badge, .streak-badge, .xp-toast, .gr-xp, .tree-xp { display: none !important; }

/* ── 기본/심화 세그먼트 토글 ───────────────────────────
   전에는 70x28 알약 안에 6.5px 글자 둘이 겹쳐 있어 어느 쪽이 켜졌는지
   읽히지 않았다. 두 칸을 같은 너비로 두고, 켜진 칸만 흰 알약이 덮는다.
   바깥 라벨(기본)은 스위치 안 글자와 겹쳐서 숨긴다. */
.header-controls .toggle-label { display: none; }

.toggle-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  width: 128px;
  height: var(--yj-tap, 44px);
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--yj-r-full, 999px);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* 트랙 — 위아래 5px 를 비워 헤더 56px 안에서 숨 쉬게 한다 */
.toggle-switch::after {
  content: '';
  position: absolute;
  inset: 5px 0;
  z-index: 0;
  background: var(--yj-fill-3);
  border: 1px solid var(--yj-line-1);
  border-radius: var(--yj-r-full, 999px);
}
/* 움직이는 알약 */
.toggle-switch::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 8px;
  bottom: 8px;
  left: 4px;
  width: calc(50% - 4px);
  height: auto;
  background: var(--yj-canvas);
  border-radius: var(--yj-r-full, 999px);
  box-shadow: 0 1px 3px var(--yj-sh-1);
  transform: none;
  transition: transform var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
}
.toggle-switch.on::before { transform: translateX(100%); }

.toggle-switch .toggle-text {
  position: static;
  z-index: 2;
  grid-row: 1;
  left: auto;
  right: auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--yj-ink);
  pointer-events: none;
  transition: color var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
}
.toggle-switch .toggle-text.left  { grid-column: 1; }
.toggle-switch .toggle-text.right { grid-column: 2; }
.toggle-switch:not(.on) .toggle-text.left,
.toggle-switch.on .toggle-text.right { color: var(--yj-forest, var(--yj-ink-deep)); }

.toggle-switch:focus-visible {
  outline: 2px solid var(--yj-forest, var(--yj-ink-deep));
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .toggle-switch { width: 108px; }
  .toggle-switch .toggle-text { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .toggle-switch::before, .toggle-switch .toggle-text { transition: none; }
}

/* ── 우하단 플로팅 — AI 학습 / 더 알아보기 ──────────────
   상단 탭에서 뺀 두 곳을 어느 페이지에서나 한 번에 열 수 있게 둔다.
   backdrop-filter 는 쓰지 않는다(저사양 크롬북). */
.sdg-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  /* position:fixed 에 right 만 주면 브라우저가 남는 폭을 정적 위치 기준으로
     잰다. 그대로 두면 라벨이 한 글자씩 접힌다. */
  width: max-content;
}
.sdg-fab-txt { white-space: nowrap; }
/* 페이지 맨 아래에서 플로팅이 푸터 글씨를 덮지 않게 자리를 비운다 */
.site-footer { padding-bottom: calc(var(--yj-s6, 32px) + 56px); }
.sdg-fab-item {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--yj-tap, 44px);
  padding: 0 16px 0 12px;
  border-radius: var(--yj-r-full, 999px);
  background: var(--yj-canvas);
  border: 1px solid var(--yj-line-1);
  box-shadow: 0 6px 18px var(--yj-sh-2);
  color: var(--yj-ink-deep);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1)),
              box-shadow var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
}
.sdg-fab-item:hover,
.sdg-fab-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--yj-sh-3);
}
.sdg-fab-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--yj-r-full, 999px);
  background: var(--yj-fill-3);
  color: var(--yj-forest, var(--yj-ink-deep));
  flex-shrink: 0;
}
/* 지금 보고 있는 페이지의 버튼은 눌린 상태로 둔다 */
body[data-page="ai"] #fabAi,
body[data-page="links"] #fabLinks {
  background: var(--yj-fill-3);
  box-shadow: none;
}
@media (max-width: 480px) {
  .sdg-fab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .sdg-fab-item { font-size: 13px; padding: 0 14px 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sdg-fab-item { transition: none; }
}

/* ============================================================
   P4 — 학년별 퀴즈
   ============================================================ */

/* ── 학년 고르기 ─────────────────────────────────────
   목표당 20문항이 1~6학년에 나뉘어 있다. 1학년에게 6학년 문제를
   내면 퀴즈가 아니라 낙담이 된다. 그래서 고르는 자리를 앞에 둔다. */
.quiz-grade-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto var(--yj-s5, 24px);
  padding: var(--yj-s4, 16px);
  background: var(--yj-fill-2);
  border: 1px solid var(--yj-line-1);
  border-radius: var(--yj-r-lg, 16px);
  max-width: 620px;
}
.quiz-grade-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--yj-t-cap, 13px);
  font-weight: 700;
  color: var(--yj-ink);
}
.quiz-grade-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.quiz-grade-chip {
  min-height: var(--yj-tap, 44px);
  padding: 0 12px;
  border-radius: var(--yj-r-full, 999px);
  border: 1px solid var(--yj-line-1);
  background: var(--yj-canvas);
  color: var(--yj-ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1)),
              color var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
}
.quiz-grade-chip:hover { background: var(--yj-fill-3); }
.quiz-grade-chip.active {
  background: var(--yj-leaf, #4CAA48);
  border-color: var(--yj-leaf, #4CAA48);
  /* 잎색 위의 흰 글자는 2.94:1 로 기준에 못 미친다. 이 프로젝트의
     primary 버튼과 같이 forest 잉크를 얹는다 (5.3:1). */
  color: var(--yj-forest, var(--yj-ink-deep));
}
.quiz-grade-chip:focus-visible {
  outline: 2px solid var(--yj-forest, var(--yj-ink-deep));
  outline-offset: 2px;
}

/* 문제 카드에 붙는 학년 꼬리표 */
.quiz-grade-tag {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--yj-r-full, 999px);
  background: var(--yj-fill-3);
  color: var(--yj-ink);
  font-size: 12px;
  font-weight: 700;
}

/* ── 해설 아래 두 갈래 ────────────────────────────────
   바깥 자료로 더 파고들거나, 이 목표를 AI 와 이어서 공부한다. */
.feedback-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--yj-s4, 16px);
}
.yj-feedback-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--yj-tap, 44px);
  padding: 0 14px;
  border-radius: var(--yj-r-full, 999px);
  background: var(--yj-canvas);
  border: 1px solid var(--yj-line-1);
  color: var(--yj-ink-deep);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.yj-feedback-link:hover { background: var(--yj-fill-3); }
.yj-feedback-ai {
  background: var(--yj-leaf-tint, var(--yj-fill-3));
  border-color: var(--yj-leaf, var(--yj-line-1));
}

@media (max-width: 480px) {
  .quiz-grade-chip { padding: 0 11px; font-size: 13px; }
  .yj-feedback-link { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-grade-chip { transition: none; }
}

/* ============================================================
   대비 웹툰 — 안 하면 / 하면
   ============================================================ */
.webtoon-block {
  margin-top: var(--yj-s6, 32px);
  padding: var(--yj-s5, 24px);
  background: var(--yj-canvas);
  border: 1px solid var(--yj-line-1);
  border-radius: var(--yj-r-lg, 16px);
}
.webtoon-block h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--yj-ink-deep);
  text-align: center;
}
#webtoonSub {
  margin: 0 auto var(--yj-s5, 24px);
  max-width: 46em;
  text-align: center;
  color: var(--yj-ink);
  font-size: 15px;
  line-height: 1.6;
}

/* ── 고르는 줄 ─────────────────────────────────────── */
.wt-controls {
  padding-bottom: var(--yj-s4, 16px);
  margin-bottom: var(--yj-s4, 16px);
  border-bottom: 1px solid var(--yj-line-1);
}
.wt-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.wt-row:last-child { margin-bottom: 0; }
.wt-row-label {
  font-size: 15px;
  font-weight: 800;
  color: var(--yj-ink-deep);
  min-width: 3.5em;
  margin-right: 8px;
  text-align: right;
}
.wt-goals { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.wt-goal {
  width: 36px;
  height: 36px;
  border-radius: var(--yj-r-full, 999px);
  border: 2px solid var(--goal, var(--yj-line-1));
  background: var(--yj-canvas);
  color: var(--yj-ink-deep);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--yj-dur-1, 120ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
}
.wt-goal:hover { transform: translateY(-2px); }
.wt-goal.active { background: var(--goal); }   /* 글자색은 app.js 가 색마다 골라 얹는다 */
.wt-goal:focus-visible { outline: 2px solid var(--yj-forest, var(--yj-ink-deep)); outline-offset: 2px; }
.wt-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* 학년 칩과 같은 모양을 쓴다 (선택자만 더한다) */
.quiz-grade-chip, .wt-chip {
  min-height: var(--yj-tap, 44px);
  padding: 0 12px;
  border-radius: var(--yj-r-full, 999px);
  border: 1px solid var(--yj-line-1);
  background: var(--yj-canvas);
  color: var(--yj-ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.wt-chip:hover { background: var(--yj-fill-3); }
.wt-chip.active {
  background: var(--yj-leaf, #4CAA48);
  border-color: var(--yj-leaf, #4CAA48);
  color: var(--yj-forest, var(--yj-ink-deep));
}
.wt-chip:focus-visible { outline: 2px solid var(--yj-forest, var(--yj-ink-deep)); outline-offset: 2px; }

/* ── 무대 ──────────────────────────────────────────── */
.wt-head {
  margin: var(--yj-s4, 16px) 0 10px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--yj-ink-deep);
}
.wt-head-goal, .wt-head-level {
  display: inline-block;
  margin: 0 6px;
  padding: 3px 10px;
  border-radius: var(--yj-r-full, 999px);
  background: var(--yj-fill-3);
  color: var(--yj-ink);
  font-size: 12px;
  font-weight: 700;
}

/* 왼쪽 미실천 · 오른쪽 실천 — 두 컷을 한 화면 안에 고정 크기로 보여 준다.
   예전에는 한쪽을 누르면 그 안에서 위아래로 스크롤하게 폈는데, 페이지
   스크롤과 겹쳐 불편했다. 이제 누르면 [크게 보기] 창(.wt-viewer)이 뜨고
   여기는 스크롤 없이 미리보기만 한다. */
.wt-split {
  display: flex;
  align-items: stretch;
  max-width: 620px;
  height: clamp(190px, 34vh, 300px);
  margin: 0 auto var(--yj-s6, 32px);
  border: 1px solid var(--yj-line-1);
  border-radius: var(--yj-r-lg, 16px);
  overflow: hidden;
  background: var(--yj-fill-2);
}
.wt-pane {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: var(--yj-canvas);
  cursor: zoom-in;
  overflow: hidden;
  text-align: center;
  transition: transform var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
}
.wt-pane:hover { transform: translateY(-2px); }

.wt-tag {
  position: relative;
  z-index: 2;
  align-self: stretch;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--yj-forest, var(--yj-ink-deep));
  background: var(--yj-fill-3);
}
.wt-before .wt-tag { background: rgba(214, 84, 61, .16); color: #6B2216; }
.wt-after  .wt-tag { background: rgba(76, 170, 72, .18); color: var(--yj-forest, #142814); }

.wt-frame {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.wt-img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; }

/* 눌러 보라는 힌트 — 터치기기는 호버가 없어 처음부터 옅게 보여 둔다 */
.wt-pane-zoom {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--yj-r-full, 999px);
  background: rgba(20, 22, 20, .58);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

/* 그림이 아직 없을 때 — 무엇을 어디에 넣어야 하는지 알려 준다 */
.wt-placeholder { display: none; }
.wt-missing .wt-img { display: none; }
.wt-missing .wt-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: var(--yj-s5, 24px) var(--yj-s4, 16px);
  color: var(--yj-ink);
}
.wt-missing .wt-placeholder b { color: var(--yj-ink-deep); font-size: 15px; line-height: 1.5; }
.wt-missing .wt-placeholder code {
  padding: 4px 8px;
  border-radius: var(--yj-r-sm, 8px);
  background: var(--yj-fill-3);
  color: var(--yj-ink);
  font-size: 12px;
  word-break: break-all;
}
.wt-missing .wt-placeholder i { font-style: normal; font-size: 12px; }

.wt-caption {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--yj-ink);
  background: var(--yj-canvas);
}

/* 가운데 구분선 — 화살표 없이 얇은 선만 */
.wt-divider {
  flex: 0 0 1px;
  background: var(--yj-line-1);
}
@media (max-width: 640px) {
  .wt-split { height: clamp(160px, 30vh, 240px); }
  .wt-row-label { min-width: auto; }
  .wt-goal { width: 32px; height: 32px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-pane, .wt-goal { transition: none; }
}

/* ── 웹툰 위에 던지는 질문 ─────────────────────────────
   4컷을 보고 넘어가면 그날로 끝난다. 물음을 하나 남겨 둔다. */
.wt-q {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 auto var(--yj-s4, 16px);
  padding: var(--yj-s4, 16px);
  max-width: 760px;
  background: var(--yj-leaf-tint, var(--yj-fill-2));
  border: 1px solid var(--yj-line-1);
  border-radius: var(--yj-r-lg, 16px);
}
.wt-q-text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--yj-ink-deep);
}
/* ── 성찰 — 주제 바로 아래 항상 펼쳐 둔다 ─────────────────
   예전에는 '자세히' 버튼을 눌러야 팝업으로 떴는데, 눌러 보게끔 생기지
   않아서 아무도 안 눌렀다. 이제 주제 밑에 바로 이어 붙인다. */
.wt-reflect {
  margin: 0 auto;
  max-width: 760px;
  padding: var(--yj-s5, 24px);
  background: var(--yj-canvas);
  border: 1px solid var(--yj-line-1);
  border-radius: var(--yj-r-lg, 16px);
}
.wt-reflect-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  color: var(--yj-forest, var(--yj-ink-deep));
}
.wt-reflect-p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--yj-ink);
}
.wt-reflect-p:last-of-type { margin-bottom: 0; }
.wt-reflect-do {
  margin: var(--yj-s5, 24px) 0;
  padding: var(--yj-s4, 16px);
  background: var(--yj-fill-2);
  border-left: 3px solid var(--yj-leaf, #4CAA48);
  border-radius: var(--yj-r-sm, 8px);
}
.wt-reflect-do-tag {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--yj-forest, var(--yj-ink-deep));
}
.wt-reflect-do p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--yj-ink); }
.wt-reflect-foot { margin-top: var(--yj-s4, 16px); }

/* ── 크게 보기 — 웹툰 한 장면을 전체 화면 창으로 ───────────
   backdrop-filter 는 쓰지 않는다 (저사양 크롬북). 세로로 긴 웹툰이라
   창 안에서 위아래로 굴리고, 좌우 스와이프·화살표로 안 하면/하면을
   오간다. */
.wt-viewer {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--yj-s4, 16px);
  background: rgba(15, 17, 15, .78);
}
.wt-viewer.open { display: flex; }
body.wt-viewer-open { overflow: hidden; }

.wt-viewer-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: min(92vh, 92dvh);
  display: flex;
  flex-direction: column;
  background: var(--yj-canvas);
  border-radius: var(--yj-r-lg, 16px);
  overflow: hidden;
  box-shadow: 0 20px 50px var(--yj-sh-3);
}
.wt-viewer-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--yj-tap, 44px) 12px var(--yj-s4, 16px);
  border-bottom: 1px solid var(--yj-line-1);
}
.wt-viewer-tag {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--yj-r-full, 999px);
  font-size: 12px;
  font-weight: 800;
  background: var(--yj-fill-3);
  color: var(--yj-forest, var(--yj-ink-deep));
}
.wt-viewer-tag-before { background: rgba(214, 84, 61, .16); color: #6B2216; }
.wt-viewer-tag-after  { background: rgba(76, 170, 72, .18); color: var(--yj-forest, #142814); }
.wt-viewer-eyebrow {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--yj-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-viewer-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: var(--yj-tap, 44px);
  height: var(--yj-tap, 44px);
  border: 0;
  border-radius: var(--yj-r-full, 999px);
  background: var(--yj-fill-3);
  color: var(--yj-ink-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wt-viewer-x:hover { background: var(--yj-fill-4, var(--yj-fill-3)); }

.wt-viewer-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--yj-fill-2);
  touch-action: pan-y;
}
.wt-viewer-img { display: block; width: 100%; height: auto; }
.wt-viewer-caption {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px var(--yj-s4, 16px);
  font-size: 13px;
  line-height: 1.5;
  color: var(--yj-ink);
  background: var(--yj-canvas);
  border-top: 1px solid var(--yj-line-1);
}

/* 좌우 화살표 — 반투명하게 얹어 스와이프할 수 있음을 알려 준다 */
.wt-viewer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--yj-r-full, 999px);
  background: rgba(20, 22, 20, .38);
  color: #fff;
  cursor: pointer;
}
.wt-viewer-arrow:hover { background: rgba(20, 22, 20, .58); }
.wt-viewer-arrow-left  { left: 10px; }
.wt-viewer-arrow-right { right: 10px; }
.wt-viewer-arrow-ico-left { transform: scaleX(-1); }

@media (max-width: 640px) {
  .wt-viewer-card { max-width: none; height: 100vh; height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-viewer-arrow, .wt-pane { transition: none; }
}

/* ============================================================
   P5 — 헤더 가운데 정렬 · 드롭다운 · 플로팅 아이콘
   ============================================================ */

/* ── 상단 탭을 화면 한가운데로 ─────────────────────────
   전에는 탭이 flex:1 이라 로고 바로 옆에 붙어 왼쪽으로 쏠려 있었다.
   양옆을 같은 폭(flex:1)으로 두면 가운데 것이 화면 중앙에 온다.
   로고는 왼쪽 끝, 토글은 오른쪽 끝에 그대로 붙는다. */
.header-logo    { flex: 1 1 0; min-width: 0; }
.header-nav     { flex: 0 1 auto; justify-content: center; }
.header-controls{ flex: 1 1 0; min-width: 0; justify-content: flex-end; }

@media (max-width: 768px) {
  /* 탭이 사라지면 가운데를 비워 둘 이유가 없다 */
  .header-logo, .header-controls { flex: 0 0 auto; }
  .header-controls { margin-left: auto; }
}

/* ── AI 학습 드롭다운 ─────────────────────────────────
   option 배경이 옛 어두운 판(#1a2035) 그대로 남아 있어, 지면을 밝게 바꾼 뒤
   '어두운 배경 + 어두운 글자'가 되어 목록이 읽히지 않았다.
   color-scheme 을 밝게 못 박아 브라우저 기본 목록 색도 함께 맞춘다. */
.ai-goal-select select {
  color-scheme: light;
  background-color: var(--yj-canvas);
  color: var(--yj-ink-deep);
  border-color: var(--yj-line-2);
}
.ai-goal-select select option {
  background: var(--yj-canvas);
  color: var(--yj-ink-deep);
}
.ai-goal-select select option:checked {
  background: var(--yj-fill-3);
  color: var(--yj-ink-deep);
}

/* ── 우하단 플로팅: 아이콘만 ───────────────────────────
   라벨 두 개가 본문 위를 덮고 있었다. 동그란 아이콘 둘로 줄인다.
   글자는 지우지 않고 화면에서만 감춘다 — 스크린리더는 그대로 읽는다. */
.sdg-fab-item {
  width: 56px;
  height: 56px;
  padding: 0;
  justify-content: center;
  gap: 0;
}
.sdg-fab-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sdg-fab-ico {
  width: 26px;
  height: 26px;
  background: none;
  color: var(--yj-forest, var(--yj-ink-deep));
}
@media (max-width: 480px) {
  .sdg-fab-item { width: 52px; height: 52px; padding: 0; }
}

/* 드롭다운을 고치는 김에 그 위 라벨도 — 4.32:1 로 기준에 못 미쳤다 */
.ai-goal-select label { color: var(--yj-ink); }

/* ── AI 학습: 고르는 줄 · 사용 안내 ─────────────────────
   목표 하나만 고르던 자리에 학년과 답변 언어가 붙었다. 셋을 한 줄에 두되
   좁아지면 아래로 접힌다. */
.ai-picks {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--yj-s4, 16px);
  margin-bottom: var(--yj-s5, 24px);
}
.ai-picks .ai-goal-select { margin-bottom: 0; }
@media (max-width: 720px) {
  .ai-picks { grid-template-columns: 1fr; }
}

/* 세 걸음 안내 — 복사 버튼을 없앤 대신 무엇을 누르면 되는지 적어 둔다 */
.ai-steps {
  margin: 0 0 var(--yj-s5, 24px);
  padding: var(--yj-s4, 16px) var(--yj-s4, 16px) var(--yj-s4, 16px) 2.4em;
  background: var(--yj-fill-2);
  border: 1px solid var(--yj-line-1);
  border-radius: var(--yj-r-lg, 16px);
  color: var(--yj-ink);
  font-size: 15px;
  line-height: 1.75;
}
.ai-steps li { margin: 0; }
.ai-steps li + li { margin-top: 4px; }
.ai-steps b { color: var(--yj-ink-deep); }

.ai-platforms-hint {
  margin: 0 0 var(--yj-s4, 16px);
  font-size: var(--yj-t-cap, 13px);
  color: var(--yj-ink);
}
.ai-platforms-hint.done {
  color: var(--yj-forest, var(--yj-ink-deep));
  font-weight: 700;
}

/* 새로 붙은 두 드롭다운도 목표 드롭다운과 같은 색을 쓴다 */
#aiGradeSelect, #aiLangSelect {
  color-scheme: light;
  background-color: var(--yj-canvas);
  color: var(--yj-ink-deep);
  border-color: var(--yj-line-2);
}
#aiGradeSelect option, #aiLangSelect option {
  background: var(--yj-canvas);
  color: var(--yj-ink-deep);
}

/* ============================================================
   P6 — AI 로 이어가기
   ============================================================ */

/* ── AI 로 이어가기 ───────────────────────────────────
   왼쪽에서 AI 를 고르고 오른쪽 버튼을 누른다. 프롬프트가 복사되고
   그 사이트가 열린다. 버튼을 두 번 누를 이유가 없다. */
.ai-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.ai-jump-lab {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ai-jump-pick {
  flex: 0 0 auto;
  min-height: var(--yj-tap, 44px);
  padding: 0 34px 0 14px;
  color-scheme: light;
  background-color: var(--yj-canvas);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236F6E69' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border: 1px solid var(--yj-line-2);
  border-radius: var(--yj-r-full, 999px);
  color: var(--yj-ink-deep);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
}
.ai-jump-pick option { background: var(--yj-canvas); color: var(--yj-ink-deep); }
.ai-jump-pick:focus-visible { outline: 2px solid var(--yj-forest, var(--yj-ink-deep)); outline-offset: 2px; }

.ai-jump-go {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--yj-tap, 44px);
  padding: 0 20px;
  border: 0;
  border-radius: var(--yj-r-full, 999px);
  background: var(--yj-leaf, #4CAA48);
  color: var(--yj-forest, #142814);
  font-size: 15px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--yj-sh-1);
  transition: transform var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1)),
              box-shadow var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
}
.ai-jump-go:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--yj-sh-2);
}
.ai-jump-go:focus-visible { outline: 2px solid var(--yj-forest, var(--yj-ink-deep)); outline-offset: 2px; }
.ai-jump-go .yj-i:last-child { opacity: .7; }

.ai-jump-note {
  width: 100%;
  margin: 8px 0 0;
  font-size: var(--yj-t-cap, 13px);
  font-weight: 700;
  color: var(--yj-forest, var(--yj-ink-deep));
}

/* 퀴즈 해설 안에서는 위에 약간의 사이를 둔다 */
.quiz-feedback .ai-jump { margin-top: var(--yj-s4, 16px); }

@media (max-width: 480px) {
  .ai-jump-pick, .ai-jump-go { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-jump-go { transition: none; }
}

/* ============================================================
   P7 — 고른 목표가 한눈에 보이게
   ============================================================
   17개 동그라미 가운데 하나가 색만 찬 정도로는 어느 것을 고른 건지
   훑어보다 놓친다. 고른 것은 커지고 테두리 고리를 두르게 한다.
   크기를 transform 으로 키워 줄 배치가 흔들리지 않게 했다. */
.wt-goals { gap: 10px; padding: 6px 0; }

.wt-goal {
  position: relative;
  transition: transform var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1)),
              box-shadow var(--yj-dur-2, 200ms) var(--yj-ease, cubic-bezier(.2,.8,.2,1));
}
.wt-goal.active {
  background: var(--goal);
  border-width: 3px;
  transform: scale(1.32);
  z-index: 2;
  /* 흰 테를 한 겹 두고 그 밖에 목표 색 고리 — 옆 동그라미와 섞이지 않는다 */
  box-shadow: 0 0 0 3px var(--yj-canvas),
              0 0 0 5px var(--goal),
              0 6px 14px var(--yj-sh-2);
}
.wt-goal.active:hover { transform: scale(1.32) translateY(-2px); }

/* ── 지금 보고 있는 목표 — 형광펜 ──────────────────────
   제목 뒤에 목표 색으로 줄을 긋는다. 배경을 통째로 칠하면 글자가
   묻히므로, 밑에서 45% 만 올라오는 형광펜 자국으로 둔다. */
.wt-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--yj-s5, 24px) 0 var(--yj-s4, 16px);
}
.wt-head-title {
  padding: 0 6px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--yj-ink-deep);
  background-image: linear-gradient(transparent 55%, var(--goal-tint, var(--goal)) 55%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 형광펜은 색이 진하면 글자를 먹는다. 옅게 깐다. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.wt-head-goal {
  margin: 0;
  padding: 5px 12px;
  background: var(--goal);
  color: var(--goal-ink, #fff);
  font-size: 13px;
  font-weight: 800;
}
.wt-head-level {
  margin: 0;
  padding: 5px 12px;
  background: var(--yj-fill-3);
  color: var(--yj-ink);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .wt-goals { gap: 8px; }
  .wt-head-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-goal { transition: none; }
}