/**
 * @file style.css
 * @description Caldera Design System — Forge fire on warm limestone.
 * Pure flat shadowless architecture, 40px card radii, 800px pills,
 * Ember (#fc5000), Plasma Violet (#524ae9), Sulfur (#f5f28e),
 * Limestone (#f7f6f2), Pumice (#e2e2df), Obsidian (#070607), Chalk (#ffffff).
 */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root {
  /* Colors */
  --color-ember: #553896;          /* Royal Violet (한 톤 밝고 선명한 로열 바이올렛) */
  --color-violet-hover: #6745b5;   /* Hover & Active Lighter Violet */
  --color-plasma-violet: #524ae9;
  --color-sulfur: #f5f28e;
  --color-limestone: #f7f6f2;
  --color-pumice: #e2e2df;
  --color-obsidian: #070607;
  --color-chalk: #ffffff;

  /* Surfaces */
  --surface-pumice-canvas: #e2e2df;
  --surface-limestone-surface: #f7f6f2;
  --surface-ember-feature: #553896;
  --surface-plasma-hero: #524ae9;

  /* Typography Families */
  --font-display: 'Anton', 'Bebas Neue', 'Pretendard Variable', -apple-system, sans-serif;
  --font-headline: 'Bebas Neue', 'Anton', 'Pretendard Variable', -apple-system, sans-serif;
  --font-body: 'DM Sans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Typography Scale */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.35;
  --text-body: 16px;
  --leading-body: 1.55;
  --text-subheading: 26px;
  --leading-subheading: 1.2;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.35;
  --text-heading: 32px;
  --leading-heading: 1.05;
  --tracking-heading: 0.64px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --text-heading-2xl: 80px;
  --leading-heading-2xl: 1.05;
  --text-display: clamp(56px, 9vw, 140px);
  --leading-display: 0.94;

  /* Spacing Scale */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-92: 92px;

  /* Border Radius (Caldera Triple-Radius System) */
  --radius-cards: 40px;
  --radius-pills: 800px;
  --radius-inputs: 100px;
  --radius-small: 16px;
  --radius-medium: 20px;
  --radius-buttons: 800px;

  /* Page Layout */
  --page-max-width: 1280px;
  --section-gap: 80px;
  --card-padding: 40px;
  --element-gap: 16px;

  /* Legacy Compatibility Aliases */
  --primary: var(--color-obsidian);
  --bg-page: var(--color-pumice);
  --text-main: var(--color-obsidian);
  --text-muted: rgba(7, 6, 7, 0.65);
  --border: rgba(7, 6, 7, 0.12);
  --radius-lg: var(--radius-cards);
}

/* ==========================================================================
   Base Reset & Body
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-obsidian);
  background-color: var(--color-pumice);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}

/* Responsive Visibility Utilities */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: inline;
}

/* ==========================================================================
   Caldera Floating Pill Navigation Bar
   ========================================================================== */
.navbar-wrapper {
  position: sticky;
  top: var(--spacing-16);
  z-index: 1000;
  padding: 0 var(--spacing-20);
  margin-bottom: var(--spacing-32);
}

.navbar {
  max-width: var(--page-max-width);
  margin: 0 auto;
  height: 64px;
  background-color: var(--color-limestone);
  border-radius: var(--radius-pills);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-16) 0 var(--spacing-24);
  /* Caldera is strictly shadowless: pure surface definition */
  border: 1px solid rgba(7, 6, 7, 0.06);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--color-obsidian);
  text-transform: uppercase;
}

.nav-brand-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-ember);
  display: inline-block;
  box-shadow: 0 0 12px rgba(85, 56, 150, 0.6);
}

.nav-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  background-color: var(--color-sulfur);
  color: var(--color-obsidian);
  padding: 3px 10px;
  border-radius: var(--radius-pills);
  letter-spacing: 0.02em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}

.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-obsidian);
  transition: opacity 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-ember);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   Buttons (Caldera 800px Pill System)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-pills);
  padding: 12px 24px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

/* Primary CTA: Deep Imperial Violet (#37255f) with Chalk text */
.btn-primary, .btn-ember {
  background-color: var(--color-ember);
  color: var(--color-chalk);
  font-weight: 600;
}

.btn-primary:hover, .btn-ember:hover {
  background-color: var(--color-violet-hover);
  opacity: 0.96;
  transform: translateY(-1px);
}

/* Secondary Pill Button: Transparent, 1.5px Obsidian border, Obsidian text */
.btn-secondary, .btn-outline {
  background-color: transparent;
  border: 1.5px solid var(--color-obsidian);
  color: var(--color-obsidian);
}

.btn-secondary:hover, .btn-outline:hover {
  background-color: rgba(7, 6, 7, 0.05);
}

/* Chalk / White Pill Button */
.btn-white {
  background-color: var(--color-chalk);
  color: var(--color-obsidian);
  border: 1px solid rgba(7, 6, 7, 0.08);
}

.btn-white:hover {
  background-color: #f0f0ee;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}

.btn-lg {
  padding: 16px 36px;
  font-size: 17px;
  font-weight: 600;
}

/* ==========================================================================
   Cards (Caldera 40px Radius System — Strictly Shadowless)
   ========================================================================== */
.card {
  background-color: var(--color-limestone);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  border: none;
}

/* Feature Stat Card: Ember (#fc5000) Solid */
.card-ember {
  background-color: var(--color-ember);
  color: var(--color-chalk);
}

/* Standout Plasma Hero Card: Plasma Violet (#524ae9) */
.card-plasma {
  background-color: var(--color-plasma-violet);
  color: var(--color-chalk);
}

/* Dashboard Hero Banner (단색 로열 바이올렛 보라색 블록 - 높이 일치) */
.dashboard-header-card {
  background-color: var(--color-ember) !important;
  color: var(--color-chalk) !important;
  border-radius: var(--radius-cards) !important;
  padding: 32px 36px;
  box-shadow: 0 12px 32px rgba(85, 56, 150, 0.2);
  border: none;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Sulfur Tag Badge */
.tag-sulfur, .badge-sulfur {
  background-color: var(--color-sulfur);
  color: var(--color-obsidian);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pills);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Dotted Divider (Caldera Signature) */
.dotted-divider {
  border: none;
  border-top: 1.5px dotted var(--color-obsidian);
  margin: var(--spacing-40) 0;
  opacity: 0.6;
}

.dotted-v-divider {
  width: 0;
  height: 24px;
  border-left: 1.5px dotted var(--color-obsidian);
  opacity: 0.5;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
  padding: var(--spacing-40) 0 var(--spacing-64);
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--spacing-40);
  align-items: center;
}

.hero-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: 0.02em;
  color: var(--color-obsidian);
  text-transform: uppercase;
  margin-bottom: var(--spacing-8);
}

.hero-korean {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-obsidian);
  line-height: 1.15;
  margin-bottom: var(--spacing-20);
}

.hero-description {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(7, 6, 7, 0.78);
  max-width: 580px;
  margin-bottom: var(--spacing-32);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}

.hero-meta-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(7, 6, 7, 0.6);
}

.hero-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-ember);
}

/* Caldera Halftone Block (Hero Visual Anchor) */
.hero-halftone-card {
  position: relative;
  background: linear-gradient(135deg, var(--color-plasma-violet) 0%, #a235b8 50%, var(--color-ember) 100%);
  border-radius: var(--radius-cards);
  min-height: 480px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-24);
  color: var(--color-chalk);
}

/* Halftone Dot Canvas Overlay */
.halftone-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.85;
}

.halftone-content-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-16);
}

.halftone-content-bottom {
  position: relative;
  z-index: 2;
  background: rgba(7, 6, 7, 0.42);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Hero Factor Collapsible Accordion */
.hero-factor-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hero-factor-item {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}

.hero-factor-item:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
}

.hero-factor-header {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.hero-factor-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-factor-num {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--color-sulfur);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-factor-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
}

.hero-factor-chevron {
  font-size: 11px;
  color: var(--color-sulfur);
  transition: transform 0.25s ease;
  display: inline-block;
  line-height: 1;
}

.hero-factor-item.open {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(245, 242, 142, 0.45);
}

.hero-factor-item.open .hero-factor-chevron {
  transform: rotate(180deg);
}

.hero-factor-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 12px;
  transition: max-height 0.28s ease, opacity 0.25s ease, padding 0.25s ease;
  font-size: 11.5px;
  color: #fff3ee;
  line-height: 1.45;
}

.hero-factor-item.open .hero-factor-desc {
  max-height: 140px;
  opacity: 0.95;
  padding: 6px 12px 10px 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   Role Switcher Segmented Control
   ========================================================================== */
.role-switcher-container {
  display: flex;
  justify-content: center;
  margin: var(--spacing-48) 0 var(--spacing-32);
}

.role-switcher-pill {
  background-color: var(--color-limestone);
  border-radius: var(--radius-pills);
  padding: 7px;
  display: inline-flex;
  gap: 8px;
  border: 1px solid rgba(7, 6, 7, 0.08);
}

.role-btn {
  padding: 14px 38px;
  border-radius: var(--radius-pills);
  border: none;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--color-obsidian);
  background: transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.role-btn.active {
  background-color: var(--color-ember);
  color: var(--color-chalk);
  box-shadow: 0 4px 16px rgba(85, 56, 150, 0.35);
}

/* ==========================================================================
   Caldera Stat Row (4 Feature Cards in Ember #fc5000)
   ========================================================================== */
.stat-row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-20);
  margin-bottom: var(--spacing-64);
}

.stat-feature-card {
  background-color: var(--color-ember);
  color: var(--color-chalk);
  border-radius: var(--radius-cards);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stat-feature-card .stat-label {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.02em;
  margin-bottom: var(--spacing-16);
}

.stat-feature-card .stat-number {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-chalk);
}

.stat-feature-card .stat-desc {
  font-size: 13px;
  margin-top: var(--spacing-12);
  opacity: 0.85;
  line-height: 1.4;
}

/* ==========================================================================
   Curriculum Module Grid
   ========================================================================== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-32);
}

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--color-ember);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.section-title {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-obsidian);
}

.curriculum-grid, .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-20);
  margin-bottom: var(--spacing-64);
}

.module-card {
  background-color: var(--color-limestone);
  border-radius: var(--radius-cards);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(7, 6, 7, 0.06);
}

.module-top {
  margin-bottom: 0;
}

.module-num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--color-ember);
  margin-bottom: var(--spacing-12);
}

.module-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--spacing-12);
  color: var(--color-obsidian);
}

.module-desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(7, 6, 7, 0.75);
  margin-bottom: var(--spacing-16);
}

.module-list {
  list-style: none;
  font-size: 13px;
  color: rgba(7, 6, 7, 0.85);
  line-height: 1.65;
  margin-bottom: 0;
}

.module-list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
}

.module-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-ember);
  font-weight: bold;
}

/* ==========================================================================
   Interactive 4+2 Prompt Lab Section
   ========================================================================== */
.prompt-lab-card {
  background-color: var(--color-limestone);
  border-radius: var(--radius-cards);
  padding: var(--spacing-48);
  margin-bottom: var(--spacing-64);
}

.copy-box {
  background-color: #edece8;
  border-radius: var(--radius-medium);
  padding: 20px 24px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-obsidian);
  position: relative;
  white-space: pre-wrap;
  margin: var(--spacing-16) 0;
}

.copy-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background-color: var(--color-obsidian);
  color: var(--color-chalk);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pills);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.copy-btn:hover {
  background-color: var(--color-ember);
  color: var(--color-chalk);
}

/* ==========================================================================
   Ecosystem & Partner University Strip
   ========================================================================== */
.partner-strip {
  background-color: var(--color-limestone);
  border-radius: var(--radius-cards);
  padding: 24px 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  margin-bottom: var(--spacing-64);
  border: 1px solid rgba(7, 6, 7, 0.05);
}

.partner-item {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.3vw, 19px);
  letter-spacing: 0.05em;
  color: var(--color-obsidian);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.partner-item:hover {
  color: var(--color-ember);
  transform: translateY(-2px);
}

.partner-strip .dotted-v-divider {
  width: 0;
  height: 22px;
  border-left: 1.5px dotted var(--color-obsidian);
  opacity: 0.45;
  margin: 0 8px;
}

/* ==========================================================================
   Caldera Floating Bottom Tools Bar (Floating Pill Style mirroring Top Navbar)
   ========================================================================== */
.floating-bottom-wrapper {
  position: fixed;
  bottom: var(--spacing-16);
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 var(--spacing-20);
  pointer-events: none;
}

.floating-partner-strip {
  pointer-events: auto;
  max-width: var(--page-max-width);
  margin: 0 auto;
  height: 60px;
  background-color: rgba(247, 246, 242, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-pills);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 var(--spacing-24);
  border: 1px solid rgba(7, 6, 7, 0.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.floating-partner-strip .partner-item {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.15vw, 17px);
  letter-spacing: 0.05em;
  color: var(--color-obsidian);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-pills);
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.floating-partner-strip .partner-item:hover {
  color: var(--color-ember);
  background-color: rgba(85, 56, 150, 0.08);
  transform: translateY(-2px);
}

.floating-partner-strip .dotted-v-divider {
  width: 0;
  height: 20px;
  border-left: 1.5px dotted var(--color-obsidian);
  opacity: 0.35;
  margin: 0 4px;
  flex-shrink: 0;
}

/* ==========================================================================
   Google Login & Guest Entry Modal
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 6, 7, 0.6);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.caldera-modal {
  background-color: var(--color-limestone);
  border-radius: var(--radius-cards);
  padding: 44px 40px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  position: relative;
  animation: modalScale 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScale {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(7, 6, 7, 0.06);
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.btn-google-pill {
  width: 100%;
  height: 50px;
  border-radius: var(--radius-pills);
  background-color: var(--color-chalk);
  color: var(--color-obsidian);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(7, 6, 7, 0.12);
  cursor: pointer;
  margin-top: var(--spacing-20);
  transition: all 0.15s ease;
}

.btn-google-pill:hover {
  background-color: #f7f7f5;
  border-color: var(--color-obsidian);
}

/* Modal Authentication Tabs & Form Elements */
.modal-tabs {
  display: flex;
  background: rgba(7, 6, 7, 0.05);
  border-radius: var(--radius-pills);
  padding: 4px;
  margin-bottom: 20px;
  gap: 4px;
}

.modal-tab-btn {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: rgba(7, 6, 7, 0.65);
  border-radius: var(--radius-pills);
  cursor: pointer;
  transition: all 0.18s ease;
  min-height: 40px;
}

.modal-tab-btn.active {
  background: var(--color-chalk);
  color: var(--color-obsidian);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Modal Role Switcher Pill - 상단 modal-tabs와 정확히 동일한 너비 및 기존 보라색 블록 스타일 */
.caldera-modal .role-switcher-pill {
  width: 100%;
  display: flex;
  background-color: var(--color-limestone);
  border-radius: var(--radius-pills);
  padding: 4px;
  gap: 4px;
  box-sizing: border-box;
  border: 1px solid rgba(7, 6, 7, 0.08);
}

.caldera-modal .role-switcher-pill .role-btn {
  flex: 1;
  width: 50%;
  min-height: 40px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--radius-pills);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: var(--color-obsidian);
  cursor: pointer;
  transition: all 0.2s ease;
}

.caldera-modal .role-switcher-pill .role-btn.active {
  background-color: var(--color-ember) !important;
  color: var(--color-chalk) !important;
  box-shadow: 0 4px 14px rgba(85, 56, 150, 0.35) !important;
}

.modal-form-group {
  margin-bottom: 14px;
  text-align: left;
}

.modal-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-obsidian);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.modal-input {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(7, 6, 7, 0.16);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-obsidian);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}

.modal-input:focus {
  outline: none;
  border-color: var(--color-ember);
  box-shadow: 0 0 0 3px rgba(232, 74, 39, 0.15);
}

.modal-input::placeholder {
  color: rgba(7, 6, 7, 0.38);
}

.btn-modal-submit {
  width: 100%;
  height: 48px;
  border-radius: var(--radius-pills);
  background-color: var(--color-ember);
  color: var(--color-chalk);
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.15s ease, transform 0.1s ease;
  margin-top: 16px;
  min-height: 44px;
}

.btn-modal-submit:hover {
  background-color: #c93b1b;
}

.btn-modal-submit:active {
  transform: scale(0.99);
}

.modal-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0;
  color: rgba(7, 6, 7, 0.4);
  font-size: 12px;
  font-weight: 600;
}

.modal-divider::before,
.modal-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(7, 6, 7, 0.1);
}

.modal-divider::before {
  margin-right: 12px;
}

.modal-divider::after {
  margin-left: 12px;
}

.modal-footer-switch {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(7, 6, 7, 0.65);
}

.modal-footer-switch a {
  color: var(--color-ember);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}


/* ==========================================================================
   Diagnosis Survey Styles (Compatibility with diagnosis.html)
   ========================================================================== */
.progress-container {
  margin: var(--spacing-20) 0 var(--spacing-32);
}

.progress-bar-bg {
  height: 8px;
  background-color: #dcdbd7;
  border-radius: var(--radius-pills);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--color-ember);
  width: 0%;
  transition: width 0.3s ease;
}

.question-item {
  background-color: #fbfbfa;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid rgba(7, 6, 7, 0.05);
}

.question-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-obsidian);
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
}

.question-num {
  color: var(--color-ember);
}

.likert-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
}

.likert-option {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.likert-option input[type="radio"] {
  display: none;
}

.likert-circle {
  height: 44px;
  border-radius: var(--radius-pills);
  background-color: #edece8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-obsidian);
  transition: all 0.15s ease;
}

.likert-option input[type="radio"]:checked + .likert-circle {
  background-color: var(--color-ember);
  color: var(--color-chalk);
  transform: scale(1.05);
}

.likert-label-bar {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(7, 6, 7, 0.5);
  padding: 0 4px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.caldera-footer {
  padding: var(--spacing-48) 0 var(--spacing-40);
  border-top: 1.5px dotted var(--color-obsidian);
  margin-top: var(--spacing-80);
  font-size: 13px;
  color: rgba(7, 6, 7, 0.65);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: var(--spacing-20);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-obsidian);
}

/* ==========================================================================
   5 Core Competency Model Cards (대학생 AI 리터러시 5대 요인)
   ========================================================================== */
.competency-section {
  margin-bottom: var(--spacing-64);
}

.competency-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-16);
  margin-top: var(--spacing-24);
}

.competency-card {
  background-color: var(--color-limestone);
  border-radius: var(--radius-cards);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(7, 6, 7, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.competency-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-ember);
}

.competency-badge {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--color-ember);
  margin-bottom: var(--spacing-8);
}

.competency-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-obsidian);
  margin-bottom: var(--spacing-12);
}

.competency-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(7, 6, 7, 0.75);
}

.competency-highlight {
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-12);
  border-top: 1px dashed rgba(7, 6, 7, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ember);
}

/* ==========================================================================
   Responsive Adaptations (Tablet & Mobile Optimization)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-32);
  }
  .stat-row-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .curriculum-grid, .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .competency-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .partner-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 28px;
    padding: 22px 20px;
  }
  .partner-strip .dotted-v-divider {
    display: none;
  }
  .partner-item {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --card-padding: 24px;
    --radius-cards: 28px;
  }

  body {
    font-size: 15px;
  }

  .container {
    padding: 0 16px;
  }

  /* Floating Navbar */
  .navbar-wrapper {
    top: 8px;
    padding: 0 12px;
    margin-bottom: var(--spacing-20);
  }

  .navbar {
    height: 56px;
    padding: 0 12px 0 16px;
  }

  /* Floating Bottom Tools Bar Mobile */
  .floating-bottom-wrapper {
    bottom: 8px;
    padding: 0 12px;
  }

  .floating-partner-strip {
    height: 52px;
    padding: 0 12px;
    justify-content: flex-start;
    gap: 4px;
    scrollbar-width: none;
  }

  .floating-partner-strip::-webkit-scrollbar {
    display: none;
  }

  .floating-partner-strip .partner-item {
    font-size: 13px;
    padding: 6px 10px;
  }

  .nav-brand {
    font-size: 18px;
    gap: 8px;
  }

  .nav-brand-dot {
    width: 10px;
    height: 10px;
  }

  .nav-tag {
    font-size: 10px;
    padding: 2px 7px;
  }

  /* Responsive Visibility */
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: inline !important;
  }

  /* Mobile Navbar & User Menu Optimization */
  .navbar {
    height: 54px;
    padding: 0 10px 0 14px;
  }

  .nav-menu {
    gap: 6px;
  }

  .user-badge {
    gap: 6px !important;
  }

  .role-badge {
    padding: 2px 8px !important;
    font-size: 11px !important;
  }

  .nav-actions .btn-sm,
  .nav-menu .btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    gap: 4px;
  }

  /* Hero Section */
  .hero-section {
    padding: 16px 0 32px;
  }

  .hero-display {
    font-size: clamp(38px, 12vw, 54px);
    margin-bottom: 4px;
  }

  .hero-korean {
    font-size: clamp(23px, 6.5vw, 32px);
    line-height: 1.25;
    word-break: keep-all;
    margin-bottom: 14px;
  }

  .hero-description {
    font-size: 14.5px;
    line-height: 1.6;
    word-break: keep-all;
    margin-bottom: 22px;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 10px;
    margin-bottom: 20px;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 14px 20px;
    font-size: 15px;
  }

  .hero-meta-strip {
    font-size: 12px;
    gap: 8px;
    line-height: 1.4;
    flex-wrap: wrap;
  }

  /* Hero Visual & Accordion Card */
  .hero-halftone-card {
    height: auto;
    min-height: 0;
    padding: 20px 16px;
    border-radius: 28px;
  }

  .halftone-content-bottom {
    padding: 14px 12px;
    border-radius: 16px;
  }

  .hero-factor-title {
    font-size: 13.5px;
  }

  .hero-factor-desc {
    font-size: 12.5px;
    padding: 8px 12px 10px;
  }

  /* Role Switcher Pill */
  .role-switcher-container {
    width: 100%;
    margin: 28px 0 20px;
  }

  .role-switcher-pill {
    width: 100%;
    display: flex;
  }

  .role-btn {
    flex: 1;
    padding: 12px 10px;
    font-size: 15.5px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
  }

  /* Grids & Cards */
  .stat-row-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .curriculum-grid, .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .competency-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .module-card {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .module-num {
    font-size: 28px;
  }

  .module-title {
    font-size: 19px;
    word-break: keep-all;
  }

  .module-desc {
    font-size: 13.5px;
    word-break: keep-all;
  }

  .module-list {
    font-size: 12.5px;
    word-break: keep-all;
  }

  .section-title {
    font-size: clamp(22px, 5.5vw, 28px);
    word-break: keep-all;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }

  .section-header .btn {
    width: 100%;
    justify-content: center;
  }

  /* Partner / AI Ecosystem Strip */
  .partner-strip {
    gap: 12px 18px;
    padding: 20px 14px;
    border-radius: 20px;
    margin-bottom: 36px;
  }

  .partner-item {
    font-size: 14.5px;
  }

  /* Modal Dialog */
  .caldera-modal {
    padding: 32px 18px;
    border-radius: 28px;
  }

  /* Dashboard Special Adjustments */
  .dashboard-header-card {
    padding: 24px 18px !important;
    border-radius: 24px !important;
  }

  .dashboard-header-card .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
  }

  .copy-box {
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    word-break: break-all;
  }

  .copy-btn {
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-size: 11px;
  }

  /* Likert Scale on Mobile */
  .likert-scale {
    gap: 4px;
    margin: 12px 0 6px;
  }

  .likert-circle {
    height: 38px;
    font-size: 13px;
  }

  .likert-label-bar {
    font-size: 11px;
  }

  /* Footer */
  .caldera-footer {
    padding: 28px 0 20px;
    margin-top: 36px;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .nav-brand span:not(.nav-brand-dot):not(#nav-role-badge):not(#nav-mode-tag) {
    font-size: 14.5px;
  }

  #nav-role-badge,
  #nav-mode-tag {
    display: none !important;
  }

  .role-btn {
    font-size: 14.5px;
    font-weight: 700;
    padding: 11px 8px;
  }

  .hero-display {
    font-size: 34px;
  }

  .partner-item {
    font-size: 13.5px;
  }

  .btn-google-pill {
    font-size: 13.5px;
    gap: 8px;
  }
}

/* ==========================================================================
   Floating Quick Navigation Dock (Right-Bottom)
   ========================================================================== */
.floating-quick-nav {
  position: fixed;
  right: 28px;
  bottom: 84px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-sans);
}

.quick-nav-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-obsidian);
  color: var(--color-chalk);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pills);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(7, 6, 7, 0.22), 0 2px 6px rgba(7, 6, 7, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.quick-nav-toggle-btn:hover {
  background-color: var(--color-ember);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(226, 92, 52, 0.35);
}

.quick-nav-toggle-btn .toggle-icon {
  font-size: 15px;
}

.quick-nav-toggle-btn .toggle-indicator {
  font-size: 10px;
  opacity: 0.8;
  transition: transform 0.25s ease;
}

.floating-quick-nav.open .quick-nav-toggle-btn .toggle-indicator {
  transform: rotate(180deg);
}

.quick-nav-panel {
  width: 230px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-pumice);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(7, 6, 7, 0.16), 0 2px 8px rgba(7, 6, 7, 0.04);
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  display: none;
  flex-direction: column;
  gap: 6px;
  animation: quickNavSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.floating-quick-nav.open .quick-nav-panel {
  display: flex;
}

@keyframes quickNavSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.quick-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px 8px 4px;
  border-bottom: 1px solid #f1f0ea;
  margin-bottom: 4px;
}

.quick-nav-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-obsidian);
  letter-spacing: -0.01em;
}

.quick-nav-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}

.quick-nav-close:hover {
  background: #f1f5f9;
  color: var(--color-obsidian);
}

.quick-nav-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-nav-item:hover {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: var(--color-ember);
  transform: translateX(-2px);
}

.quick-nav-item.active {
  background: #fff4ed;
  border-color: #fed7aa;
  color: var(--color-ember);
  font-weight: 700;
}

.quick-nav-item .nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
}

.quick-nav-item.active .nav-badge {
  background: var(--color-ember);
  color: #ffffff;
}

.quick-nav-footer {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed #f1f0ea;
}

.quick-nav-top-btn {
  width: 100%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-nav-top-btn:hover {
  background: var(--color-limestone);
  color: var(--color-obsidian);
}

@media (max-width: 768px) {
  .floating-quick-nav {
    right: 16px;
    bottom: 74px;
  }
  .quick-nav-panel {
    width: 210px;
  }
  .quick-nav-toggle-btn {
    padding: 8px 14px;
    font-size: 12.5px;
  }
}

/* 프롬프트 템플릿 5선 인라인 편집 코드 영역 */
.editable-prompt-pre:hover {
  border-color: #cbd5e1 !important;
}

.editable-prompt-pre:focus {
  outline: none;
  border-color: var(--color-ember) !important;
  box-shadow: 0 0 0 3px rgba(85, 56, 150, 0.14);
}

.prompt-edit-target,
.editable-prompt-pre .prompt-edit-target {
  color: #ea580c;
  font-weight: 600;
}


/* 교직원 프롬프트 템플릿 5선: 일반적인 프롬프트 vs 개선된 프롬프트 2열 비교 레이아웃 */
.prompt-compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: 0.9rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.prompt-col-basic,
.prompt-col-improved {
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
}

.prompt-col-basic {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.prompt-col-improved {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.prompt-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt-col-badge {
  font-weight: 700;
  font-size: 13px;
  word-break: keep-all;
}

.prompt-col-badge-basic {
  color: #991b1b;
}

.prompt-col-badge-improved {
  color: #166534;
}

.prompt-col-hint {
  font-size: 11.5px;
  color: #4b5563;
  word-break: keep-all;
}

.basic-prompt-box {
  background: #ffffff;
  border: 1px solid #fee2e2;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #7f1d1d;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: anywhere;
  flex: 1;
}

.basic-prompt-limit {
  font-size: 12px;
  color: #991b1b;
  line-height: 1.5;
  word-break: keep-all;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 8px;
  padding: 7px 10px;
}

.prompt-col-improved .editable-prompt-pre {
  flex: 1;
}

@media (max-width: 768px) {
  .prompt-compare-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .prompt-col-basic,
  .prompt-col-improved {
    padding: 0.75rem 0.85rem;
  }
  .prompt-action-group {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .prompt-action-group .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .prompt-action-group {
    grid-template-columns: 1fr;
  }
}