/* ══════════════════════════════════════
   CuroAI Control — Intro Shell CSS
   Kinder-friendly theme (IntroShell v2.1)
   ══════════════════════════════════════ */

.cb-intro {
  --cb-font: 'Outfit','Noto Sans KR',sans-serif;
  --cb-bg: #FFF8F0;
  --cb-surface: #FFFFFF;
  --cb-text: #3D2C2E;
  --cb-text2: #7A6A6C;
  --cb-border: #FFD8C8;
  --cb-primary: #6366f1;
  --cb-primary-light: #EDE9FE;
  --cb-accent: #4ECDC4;
  --cb-radius: 28px;
  --cb-radius-sm: 16px;
  --cb-radius-btn: 20px;
  --cb-spacing: 20px;
  --cb-spacing-lg: 28px;
  --cb-shadow: 0 8px 32px rgba(99,102,241,0.12);
  --cb-tr: 0.2s ease;
}

/* Base overlay */
.cb-intro {
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  background:var(--cb-bg);
  overflow:hidden;
  font-family:var(--cb-font);
  transition:opacity 0.5s ease,visibility 0.5s ease;
}
.cb-intro.hidden { opacity:0;visibility:hidden;pointer-events:none; }

/* BG decoration — soft warm gradients */
.cb-intro::before {
  content:'';position:absolute;top:-40%;left:-20%;width:140%;height:140%;
  background:
    radial-gradient(circle at 20% 30%, rgba(99,102,241,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(78,205,196,0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(251,191,36,0.04) 0%, transparent 40%);
  pointer-events:none;
  animation:cb-drift 20s ease-in-out infinite alternate;
}
@keyframes cb-drift{from{transform:translate(0,0)}to{transform:translate(20px,-15px)}}

/* Card */
.cb-intro-card {
  position:relative;width:100%;max-width:500px;
  background:var(--cb-surface);
  border:3px solid var(--cb-border);
  border-radius:var(--cb-radius);
  box-shadow:var(--cb-shadow);
  padding:40px 28px;text-align:center;
  animation:cb-fadeUp 0.5s ease;z-index:1;
}
@keyframes cb-fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* Logo — 5x base reduced 30% = ~196px */
.cb-intro-logo { display:flex;align-items:center;justify-content:center;margin-bottom:var(--cb-spacing-lg); }
.cb-intro-logo img { height:137px;object-fit:contain;filter:drop-shadow(0 4px 16px rgba(99,102,241,0.1)); }

/* Title */
.cb-intro-title { font-size:28px;font-weight:700;color:var(--cb-text);margin-bottom:6px;line-height:1.2;letter-spacing:1px; }
.cb-intro-subtitle { font-size:15px;color:var(--cb-text2);margin-bottom:var(--cb-spacing-lg); }

/* Start button — purple to match brand */
.cb-btn-start {
  display:block;width:100%;height:56px;margin-top:var(--cb-spacing);
  background:var(--cb-primary);color:#fff;border:none;border-radius:var(--cb-radius-btn);
  font-family:var(--cb-font);font-size:17px;font-weight:700;cursor:pointer;
  transition:all var(--cb-tr);
  box-shadow:0 4px 16px rgba(99,102,241,0.3);
}
.cb-btn-start:hover { filter:brightness(1.08);box-shadow:0 6px 20px rgba(99,102,241,0.4);transform:translateY(-2px); }
.cb-btn-start:active { transform:translateY(0);filter:brightness(0.95); }

/* Language toggle */
.cb-lang-toggle {
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--cb-spacing);
  padding:8px 16px;border:none;background:none;
  color:var(--cb-text2);font-family:var(--cb-font);font-size:13px;font-weight:500;cursor:pointer;
  transition:color var(--cb-tr);
}
.cb-lang-toggle:hover { color:var(--cb-primary); }
.cb-lang-toggle-arrow { font-size:10px;transition:transform var(--cb-tr); }

/* Language picker — 2-col, expandable */
.cb-lang-picker {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height 0.3s ease,opacity 0.2s ease,margin 0.3s ease;margin-top:0;
}
.cb-lang-picker.open { max-height:500px;opacity:1;margin-top:10px; }

/* Language card */
.cb-lang-compact {
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px;
  background:#FFF5F0;border:2.5px solid var(--cb-border);border-radius:var(--cb-radius-sm);
  cursor:pointer;font-family:var(--cb-font);color:var(--cb-text);text-align:center;
  transition:all var(--cb-tr);min-height:72px;
}
.cb-lang-compact:hover { border-color:var(--cb-primary);background:var(--cb-primary-light);transform:translateY(-3px);box-shadow:0 6px 16px rgba(99,102,241,0.15); }
.cb-lang-compact-code {
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:24px;border-radius:8px;
  font-size:11px;font-weight:700;letter-spacing:0.5px;
  background:var(--cb-primary);color:#fff;
}
.cb-lang-compact-name { font-weight:800;font-size:16px;white-space:nowrap; }
.cb-lang-compact-title { font-size:11px;color:var(--cb-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; }
@media(max-width:420px){.cb-lang-compact{padding:12px 10px;min-height:64px;} .cb-lang-compact-name{font-size:14px;}}
@media(max-width:360px){.cb-lang-picker{grid-template-columns:1fr}}

/* Resource banner */
.cb-intro-resource {
  display:flex;align-items:center;gap:12px;margin-top:var(--cb-spacing);
  padding:14px 18px;background:#FFF5F0;border:2px solid var(--cb-border);
  border-radius:var(--cb-radius-sm);text-decoration:none;color:var(--cb-text);transition:all var(--cb-tr);
}
.cb-intro-resource:hover { border-color:var(--cb-primary);background:var(--cb-primary-light); }
.cb-intro-resource-icon { font-size:22px;flex-shrink:0; }
.cb-intro-resource-text { flex:1;text-align:left; }
.cb-intro-resource-title { font-size:14px;font-weight:700; }
.cb-intro-resource-desc { font-size:12px;color:var(--cb-text2); }
.cb-intro-resource-arrow { font-size:18px;color:var(--cb-text2); }

/* Copyright + version */
.cb-intro-copyright { font-size:10px;color:var(--cb-text2);opacity:0.5;margin-top:var(--cb-spacing); }
.cb-intro-version { font-size:10px;color:var(--cb-text2);opacity:0.3;margin-top:6px; }

/* Floating particles — warm colors */
.cb-intro-particles { position:absolute;inset:0;pointer-events:none;z-index:0; }
.cb-intro-particle { position:absolute;border-radius:50%;animation:cb-float linear infinite; }
@keyframes cb-float {
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:0.5}90%{opacity:0.5}
  100%{transform:translateY(-10vh) scale(1);opacity:0}
}