/*
 * ai-llm.css — LLM 응용 서비스 페이지 전용 스타일
 * 공용 style.css 기반, 클래스 접두사: llm-
 */

/* ═══════════════════════════════════════════════════════════════════
   CSS 변수 (LLM 페이지 전용)
═══════════════════════════════════════════════════════════════════ */
.page-llm {
  --llm-purple:       #7c3aed;
  --llm-purple-light: #a78bfa;
  --llm-purple-dark:  #4c1d95;
  --llm-blue:         #42a5f5;
  --llm-green:        #10b981;
  --llm-gradient:     linear-gradient(135deg, #0f0825, #1a1040);
  --llm-dark-bg:      #0f0825;
  --llm-card-bg:      rgba(255,255,255,0.05);
  --llm-border:       rgba(167,139,250,0.2);
  --llm-border-hover: rgba(167,139,250,0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   공통 유틸
═══════════════════════════════════════════════════════════════════ */
.llm-section-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(167,139,250,0.1));
  color: var(--llm-purple-light);
  border: 1px solid rgba(167,139,250,0.3);
  margin-bottom: 12px;
}

.llm-section-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 12px;
}

.llm-section-sub {
  font-size: 1.05rem;
  color: #64748b;
  max-width: 640px;
  margin: 0 auto 40px;
}

.llm-text-gradient {
  background: linear-gradient(135deg, var(--llm-purple-light), #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.llm-text-gradient-white {
  background: linear-gradient(135deg, #ffffff, var(--llm-purple-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 서브 네비 LLM 액티브 색상 오버라이드 */
.page-llm .sub-nav-link.active,
.page-llm .sub-nav-link:hover {
  color: var(--llm-purple-light) !important;
  border-bottom-color: var(--llm-purple) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 1: 히어로
═══════════════════════════════════════════════════════════════════ */
.llm-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #0f0825 0%, #1a1040 40%, #0a1a3e 70%, #040a1e 100%);
  overflow: hidden;
  padding: 120px 0 80px;
}

#llmLangCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.llm-hero-glow-r {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.35) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.llm-hero-glow-l {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66,165,245,0.2) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.llm-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.llm-hero-content {
  position: relative;
  z-index: 2;
}

.llm-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(124,58,237,0.2);
  color: var(--llm-purple-light);
  border: 1px solid rgba(167,139,250,0.4);
  margin-bottom: 24px;
}

.llm-hero-badge::before {
  content: '⚡';
}

.llm-hero-title {
  margin-bottom: 20px;
  line-height: 1.2;
}

.llm-hero-title .line1 {
  display: block;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  color: rgba(255,255,255,0.9);
}

.llm-hero-title .line2 {
  display: block;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  color: var(--llm-purple-light);
  text-shadow: 0 0 40px rgba(167,139,250,0.5), 0 0 80px rgba(124,58,237,0.2);
}

.llm-hero-title .line3 {
  display: block;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 300;
  color: rgba(255,255,255,0.75);
}

.llm-hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 480px;
}

.btn-llm-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 50px;
  background: var(--llm-purple);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 0 20px rgba(124,58,237,0.4);
  animation: llmPulse 2.5s ease-in-out infinite;
}

.btn-llm-primary:hover {
  background: #6d28d9;
  color: #fff;
  box-shadow: 0 0 35px rgba(124,58,237,0.65);
  transform: translateY(-2px);
}

@keyframes llmPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.4); }
  50%       { box-shadow: 0 0 36px rgba(124,58,237,0.7), 0 0 60px rgba(124,58,237,0.25); }
}

.llm-hero-mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.llm-mini-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.12);
}

/* 히어로 우측 스트리밍 패널 */
.llm-stream-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.llm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(167,139,250,0.08);
  border-bottom: 1px solid rgba(167,139,250,0.15);
}

.llm-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--llm-purple-light);
  animation: dotPulse 1.8s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.llm-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  font-family: 'JetBrains Mono', monospace;
}

.llm-mac-btns {
  display: flex;
  gap: 6px;
}

.llm-mac-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.llm-mac-btn:nth-child(1) { background: #ff5f57; }
.llm-mac-btn:nth-child(2) { background: #febc2e; }
.llm-mac-btn:nth-child(3) { background: #28c840; }

.llm-chat-area {
  padding: 20px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.llm-bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.65;
}

.llm-bubble-user {
  align-self: flex-end;
  background: rgba(124,58,237,0.25);
  border: 1px solid rgba(167,139,250,0.3);
  color: rgba(255,255,255,0.9);
  border-radius: 14px 14px 4px 14px;
}

.llm-bubble-ai {
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border-radius: 14px 14px 14px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  white-space: pre-line;
}

.llm-bubble-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.6;
}

.llm-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px 14px 14px 4px;
}

.llm-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--llm-purple-light);
  animation: typingBounce 1s ease-in-out infinite;
}

.llm-typing span:nth-child(2) { animation-delay: 0.15s; }
.llm-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--llm-purple-light);
  animation: cursorBlink 0.7s infinite;
  margin-left: 1px;
  vertical-align: text-bottom;
}

@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.llm-panel-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(167,139,250,0.15);
}

.llm-panel-input input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(167,139,250,0.25);
  border-radius: 8px;
  padding: 8px 14px;
  color: rgba(255,255,255,0.6);
  font-size: 12.5px;
  outline: none;
}

.llm-panel-input input::placeholder { color: rgba(255,255,255,0.3); }

.llm-panel-send {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--llm-purple);
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 히어로 곡선 디바이더 */
.llm-hero-divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 2: LLM 핵심 파워 비주얼 (토큰 서클)
═══════════════════════════════════════════════════════════════════ */
.llm-power-section {
  background: var(--llm-gradient);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.llm-power-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.3) 0%, transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}

/* 토큰 서클 */
.llm-orbit-wrap {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.llm-orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--llm-purple), var(--llm-purple-light));
  box-shadow: 0 0 60px rgba(124,58,237,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  z-index: 10;
  letter-spacing: 2px;
}

.llm-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(167,139,250,0.2);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.llm-orbit-ring-1 { width: 240px; height: 240px; }
.llm-orbit-ring-2 { width: 360px; height: 360px; }

.llm-orbit-1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  margin-top: -120px;
  margin-left: -120px;
  animation: llmOrbit1 25s linear infinite;
  transform-origin: center center;
}

.llm-orbit-2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 360px;
  margin-top: -180px;
  margin-left: -180px;
  animation: llmOrbit2 40s linear infinite reverse;
  transform-origin: center center;
}

@keyframes llmOrbit1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes llmOrbit2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.llm-orbit-icon {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(167,139,250,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  animation: llmCounterSpin1 25s linear infinite;
  transform-origin: center center;
  cursor: default;
  transition: background 0.3s;
}

.llm-orbit-icon:hover { background: rgba(124,58,237,0.3); }

.llm-orbit-token {
  position: absolute;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(167,139,250,0.5);
  font-weight: 600;
  animation: llmCounterSpin2 40s linear infinite;
  white-space: nowrap;
}

@keyframes llmCounterSpin1 { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
@keyframes llmCounterSpin2 { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }

/* 아이콘 위치 (6개 균등 배치) */
.llm-orbit-icon:nth-child(1) { top: -22px; left: 50%; margin-left: -22px; }
.llm-orbit-icon:nth-child(2) { top: 17%;  right: -22px; }
.llm-orbit-icon:nth-child(3) { bottom: 17%; right: -22px; }
.llm-orbit-icon:nth-child(4) { bottom: -22px; left: 50%; margin-left: -22px; }
.llm-orbit-icon:nth-child(5) { bottom: 17%; left: -22px; }
.llm-orbit-icon:nth-child(6) { top: 17%;  left: -22px; }

/* 토큰 텍스트 위치 (8개) */
.llm-orbit-token:nth-child(1) { top: -10px; left: 50%; margin-left: -20px; }
.llm-orbit-token:nth-child(2) { top: 10%;  right: -30px; }
.llm-orbit-token:nth-child(3) { top: 35%;  right: -34px; }
.llm-orbit-token:nth-child(4) { bottom: 35%; right: -34px; }
.llm-orbit-token:nth-child(5) { bottom: 10%; right: -30px; }
.llm-orbit-token:nth-child(6) { bottom: -10px; left: 50%; margin-left: -20px; }
.llm-orbit-token:nth-child(7) { bottom: 10%; left: -36px; }
.llm-orbit-token:nth-child(8) { top: 10%;  left: -34px; }

/* 수치 카드 */
.llm-power-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--llm-border);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.35s;
  height: 100%;
}

.llm-power-card:hover {
  border-color: var(--llm-border-hover);
  box-shadow: 0 0 30px rgba(124,58,237,0.2);
  transform: translateY(-4px);
}

.llm-power-num {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #fff, var(--llm-purple-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.llm-power-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--llm-purple-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.llm-power-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}

.llm-power-tagline {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fff 30%, var(--llm-purple-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 20px 0;
  margin-top: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.llm-power-tagline.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 3: 서비스 개요
═══════════════════════════════════════════════════════════════════ */
.llm-overview-section {
  background: #fff;
  padding: 80px 0;
}

/* 아키텍처 다이어그램 */
.llm-arch-card {
  background: #0f0825;
  border-radius: 16px;
  border: 1px solid rgba(124,58,237,0.35);
  box-shadow: 0 0 40px rgba(124,58,237,0.15);
  padding: 32px 28px;
}

.llm-arch-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--llm-purple-light);
  margin-bottom: 24px;
  text-align: center;
}

.llm-arch-node {
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(167,139,250,0.1));
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 10px;
  padding: 12px 18px;
  color: rgba(255,255,255,0.9);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  position: relative;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.llm-arch-node:hover {
  border-color: rgba(167,139,250,0.6);
  box-shadow: 0 0 16px rgba(124,58,237,0.3);
}

.llm-arch-node .llm-arch-side {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: rgba(167,139,250,0.7);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.llm-arch-arrow {
  text-align: center;
  font-size: 16px;
  color: rgba(124,58,237,0.6);
  margin: 4px 0;
  animation: arrowFlow 1.5s ease-in-out infinite;
}

@keyframes arrowFlow {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50%       { opacity: 1; transform: translateY(3px); }
}

/* 체크리스트 */
.llm-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.llm-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 14.5px;
  color: #374151;
  border-bottom: 1px solid rgba(124,58,237,0.07);
}

.llm-checklist li::before {
  content: '✅';
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

/* 기술 태그 */
.llm-tech-group { margin-bottom: 14px; }
.llm-tech-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--llm-purple);
  margin-bottom: 8px;
}

.llm-tech-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.llm-tech-tag {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(124,58,237,0.07);
  color: var(--llm-purple-dark);
  border: 1px solid rgba(124,58,237,0.2);
  transition: all 0.25s;
  cursor: default;
}

.llm-tech-tag:hover {
  background: var(--llm-purple);
  color: #fff;
  border-color: var(--llm-purple);
  box-shadow: 0 0 12px rgba(124,58,237,0.35);
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 4: 서비스 라인업 탭
═══════════════════════════════════════════════════════════════════ */
.llm-services-section {
  background: #f0f4ff;
  padding: 80px 0;
}

.llm-tab-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.llm-tab-btn {
  padding: 11px 22px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid rgba(124,58,237,0.25);
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s;
}

.llm-tab-btn:hover {
  border-color: var(--llm-purple);
  color: var(--llm-purple);
}

.llm-tab-btn.active {
  background: linear-gradient(135deg, var(--llm-purple), #6d28d9);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(124,58,237,0.35);
}

.llm-tab-panel { display: none; }
.llm-tab-panel.active {
  display: flex;
  animation: llmTabIn 0.4s ease;
}

@keyframes llmTabIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.llm-tab-content-wrap {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(124,58,237,0.1);
  padding: 40px;
  width: 100%;
}

.llm-tab-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.llm-tab-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14.5px;
  color: #374151;
}

.llm-tab-features li i {
  color: var(--llm-purple);
  flex-shrink: 0;
  margin-top: 2px;
}

/* 탭 목업 공통 */
.llm-mockup {
  background: linear-gradient(160deg, #0f0825, #1a1040);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 14px;
  padding: 20px;
  min-height: 200px;
  box-shadow: 0 0 30px rgba(124,58,237,0.15);
}

.llm-mockup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(167,139,250,0.15);
  margin-bottom: 14px;
}

.llm-mockup-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  font-family: 'JetBrains Mono', monospace;
}

/* 탭 링크 */
.llm-tab-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--llm-purple);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.llm-tab-link:hover { gap: 10px; color: #6d28d9; }

/* ═══════════════════════════════════════════════════════════════════
   섹션 5: 인터랙티브 챗봇 데모
═══════════════════════════════════════════════════════════════════ */
.llm-demo-section {
  background: #0f0825;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.llm-demo-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, transparent 65%);
  pointer-events: none;
}

/* 시나리오 패널 */
.llm-scenario-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--llm-border);
  border-radius: 16px;
  padding: 24px;
  height: 100%;
}

.llm-scenario-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.llm-scenario-tab {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(167,139,250,0.2);
  background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.25s;
  text-align: left;
}

.llm-scenario-tab.active,
.llm-scenario-tab:hover {
  background: rgba(124,58,237,0.2);
  border-color: rgba(167,139,250,0.4);
  color: #fff;
}

.llm-suggestions { display: none; flex-direction: column; gap: 6px; }
.llm-suggestions.active { display: flex; }

.llm-suggest-btn {
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  text-align: left;
  transition: all 0.25s;
}

.llm-suggest-btn:hover {
  background: rgba(124,58,237,0.15);
  border-color: rgba(167,139,250,0.3);
  color: #fff;
}

.llm-ai-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}

.llm-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* 챗 인터페이스 */
.llm-chat-interface {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--llm-border);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
}

.llm-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(167,139,250,0.08);
  border-bottom: 1px solid var(--llm-border);
}

.llm-chat-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.llm-chat-reset {
  background: transparent;
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.25s;
}

.llm-chat-reset:hover {
  background: rgba(124,58,237,0.2);
  color: #fff;
}

.llm-chat-messages {
  padding: 20px;
  min-height: 320px;
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.llm-chat-messages::-webkit-scrollbar { width: 4px; }
.llm-chat-messages::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.3); border-radius: 4px; }

.llm-chat-input-row {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--llm-border);
  background: rgba(255,255,255,0.02);
}

.llm-chat-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 10px;
  padding: 10px 16px;
  color: rgba(255,255,255,0.9);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.25s;
}

.llm-chat-input:focus { border-color: rgba(167,139,250,0.5); }
.llm-chat-input::placeholder { color: rgba(255,255,255,0.3); }

.llm-chat-send {
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--llm-purple);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s;
}

.llm-chat-send:hover {
  background: #6d28d9;
  box-shadow: 0 0 16px rgba(124,58,237,0.4);
}

.llm-demo-note {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 6: LLM 모델 비교
═══════════════════════════════════════════════════════════════════ */
.llm-models-section {
  background: #f8f9ff;
  padding: 80px 0;
}

.llm-model-card {
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.35s;
  height: 100%;
}

.llm-model-card:hover { transform: translateY(-6px); }

.llm-model-card-light {
  background: #fff;
  border: 1.5px solid rgba(124,58,237,0.12);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.llm-model-card-dark {
  background: var(--llm-gradient);
  border: 1.5px solid rgba(167,139,250,0.4);
  box-shadow: 0 8px 40px rgba(124,58,237,0.25);
}

.llm-model-card-dark:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 60px rgba(124,58,237,0.4);
}

.llm-model-header {
  padding: 28px 28px 20px;
}

.llm-model-header-blue {
  background: linear-gradient(135deg, #e0f2fe, #bfdbfe);
}

.llm-model-header-dark {
  background: rgba(167,139,250,0.08);
  border-bottom: 1px solid rgba(167,139,250,0.2);
}

.llm-model-header-green {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.llm-model-type {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.llm-model-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.llm-model-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.llm-model-badge-blue { background: rgba(59,130,246,0.15); color: #1d4ed8; border: 1px solid rgba(59,130,246,0.2); }
.llm-model-badge-purple { background: rgba(167,139,250,0.15); color: var(--llm-purple-light); border: 1px solid rgba(167,139,250,0.3); }
.llm-model-badge-green { background: rgba(16,185,129,0.15); color: #065f46; border: 1px solid rgba(16,185,129,0.2); }

.llm-model-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(167,139,250,0.2);
  border: 1px solid rgba(167,139,250,0.4);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--llm-purple-light);
  margin-top: 8px;
}

.llm-model-body { padding: 24px 28px; }

.llm-model-spec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.llm-model-spec-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
}

.llm-model-spec-row i {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 14px;
}

.llm-model-rec {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.llm-model-rec-blue { background: rgba(59,130,246,0.07); color: #1d4ed8; }
.llm-model-rec-purple { background: rgba(124,58,237,0.15); color: var(--llm-purple-light); }
.llm-model-rec-green { background: rgba(16,185,129,0.08); color: #065f46; }

.llm-model-highlight {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(167,139,250,0.1);
  border-left: 3px solid var(--llm-purple-light);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  font-style: italic;
}

/* 비교 표 */
.llm-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.llm-compare-table th {
  background: linear-gradient(135deg, var(--llm-purple), #6d28d9);
  color: #fff;
  padding: 14px 18px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
}

.llm-compare-table th:first-child { width: 28%; }

.llm-compare-table td {
  padding: 12px 18px;
  font-size: 13.5px;
  border-bottom: 1px solid rgba(124,58,237,0.07);
  color: #374151;
}

.llm-compare-table tr:last-child td { border-bottom: none; }

.llm-compare-table tr:nth-child(even) td { background: rgba(124,58,237,0.02); }

.llm-security-dots { display: flex; gap: 3px; }
.llm-security-dot { width: 12px; height: 12px; border-radius: 50%; }
.llm-security-dot.on { background: var(--llm-purple); }
.llm-security-dot.off { background: #e5e7eb; }

/* ═══════════════════════════════════════════════════════════════════
   섹션 7: 산업별 활용 시나리오
═══════════════════════════════════════════════════════════════════ */
.llm-industry-section {
  background: #f0f4ff;
  padding: 80px 0;
  color: #1e1b4b;
  position: relative;
  overflow: hidden;
}

/* 밝은 배경에 맞는 flip 카드 앞면 스타일 재정의 */
.llm-industry-section .llm-flip-front {
  background: #fff;
  border: 1px solid rgba(124,58,237,0.18);
  box-shadow: 0 2px 12px rgba(124,58,237,0.07);
}
.llm-industry-section .llm-flip-title {
  color: #1e1b4b;
}
.llm-industry-section .llm-flip-sub {
  color: #6b7280;
}

.llm-industry-section::before {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 65%);
  pointer-events: none;
}

/* 플립 카드 */
.llm-flip-card {
  perspective: 1000px;
  height: 240px;
  cursor: pointer;
}

.llm-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.llm-flip-card:hover .llm-flip-inner,
.llm-flip-card.flipped .llm-flip-inner {
  transform: rotateY(180deg);
}

.llm-flip-front,
.llm-flip-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 24px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.llm-flip-front {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(167,139,250,0.15);
}

.llm-flip-back {
  background: var(--llm-gradient);
  border: 1px solid rgba(167,139,250,0.4);
  transform: rotateY(180deg);
}

.llm-flip-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.llm-flip-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.llm-flip-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.llm-flip-back-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.llm-flip-back-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.llm-flip-back-list li::before {
  content: '▸';
  color: var(--llm-purple-light);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 8: 도입 프로세스 타임라인 (가로)
═══════════════════════════════════════════════════════════════════ */
.llm-process-section {
  background: #f0f4ff;
  padding: 80px 0;
}

/* ─── A형: 세로 스텝 리스트 ─────────────────────────────────────── */

/* 단계별 색상 변수 */
.llm-vstep-item[data-step="1"] { --sc:#7c3aed; --sc-r:124; --sc-g:58;  --sc-b:237; }
.llm-vstep-item[data-step="2"] { --sc:#2563eb; --sc-r:37;  --sc-g:99;  --sc-b:235; }
.llm-vstep-item[data-step="3"] { --sc:#059669; --sc-r:5;   --sc-g:150; --sc-b:105; }
.llm-vstep-item[data-step="4"] { --sc:#0891b2; --sc-r:8;   --sc-g:145; --sc-b:178; }
.llm-vstep-item[data-step="5"] { --sc:#ea580c; --sc-r:234; --sc-g:88;  --sc-b:12;  }

.llm-vstep-list {
  max-width: 760px;
  margin: 40px auto 0;
}

.llm-vstep-item {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

/* 왼쪽 도트 컬럼 */
.llm-vstep-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 56px;
}

.llm-vstep-dot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sc), rgba(var(--sc-r),var(--sc-g),var(--sc-b),.6));
  box-shadow: 0 4px 18px rgba(var(--sc-r),var(--sc-g),var(--sc-b),.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}

/* 도트 아래 연결선 (마지막 아이템 제외) */
.llm-vstep-item:not(:last-child) .llm-vstep-left::after {
  content: '';
  flex: 1;
  width: 2px;
  min-height: 16px;
  background: linear-gradient(to bottom,
    rgba(var(--sc-r),var(--sc-g),var(--sc-b),.5),
    rgba(var(--sc-r),var(--sc-g),var(--sc-b),.05));
  margin: 6px 0;
  border-radius: 2px;
}

/* 오른쪽 카드 */
.llm-vstep-card {
  flex: 1;
  background: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 20px;
  box-shadow: 0 2px 14px rgba(0,0,0,.07);
  border-left: 3px solid var(--sc);
}

.llm-vstep-item:last-child .llm-vstep-card { margin-bottom: 0; }

.llm-vstep-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.llm-vstep-num {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--sc);
  background: rgba(var(--sc-r),var(--sc-g),var(--sc-b),.1);
  padding: 3px 11px;
  border-radius: 20px;
  flex-shrink: 0;
}

.llm-vstep-title {
  font-size: 16px;
  font-weight: 800;
  color: #1e1b4b;
}

.llm-vstep-desc {
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.65;
  margin-bottom: 12px;
}

.llm-vstep-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.llm-output-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(var(--sc-r),var(--sc-g),var(--sc-b),.08);
  color: var(--sc);
  border: 1px solid rgba(var(--sc-r),var(--sc-g),var(--sc-b),.2);
}

/* ─── B형: 카드 그리드 (전환 시 HTML에서 llm-vstep-list → llm-grid-steps) ─── */
.llm-grid-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 40px auto 0;
  max-width: 1100px;
}

.llm-grid-steps .llm-vstep-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  position: relative;
}

.llm-grid-steps .llm-vstep-item:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -14px;
  top: 24px;
  font-size: 18px;
  color: var(--sc);
  font-weight: 700;
  line-height: 1;
}

.llm-grid-steps .llm-vstep-left {
  width: auto;
  flex-direction: row;
  justify-content: center;
}

.llm-grid-steps .llm-vstep-left::after { display: none; }

.llm-grid-steps .llm-vstep-card {
  border-left: none;
  border-top: 3px solid var(--sc);
  margin-bottom: 0;
  padding: 14px 12px;
}

.llm-grid-steps .llm-vstep-header {
  flex-direction: column;
  gap: 6px;
}

.llm-grid-steps .llm-vstep-outputs {
  justify-content: center;
}

.llm-process-summary {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
}

.llm-process-summary-item {
  padding: 14px 28px;
  background: #fff;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--llm-purple-dark);
  border: 1.5px solid rgba(124,58,237,0.2);
  box-shadow: 0 2px 12px rgba(124,58,237,0.08);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 9: 도입 효과 카운터 (다크 보라)
═══════════════════════════════════════════════════════════════════ */
.llm-counters-section {
  background: var(--llm-gradient);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.llm-counters-section::before {
  content: 'LLM';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22vw;
  font-weight: 900;
  color: rgba(255,255,255,0.015);
  letter-spacing: 0.2em;
  pointer-events: none;
  white-space: nowrap;
  font-family: 'Orbitron', monospace;
}

.llm-counters-glow-l {
  position: absolute;
  left: -100px;
  top: 0;
  bottom: 0;
  width: 350px;
  background: radial-gradient(ellipse at left, rgba(124,58,237,0.25) 0%, transparent 70%);
  pointer-events: none;
}

.llm-counters-glow-r {
  position: absolute;
  right: -100px;
  top: 0;
  bottom: 0;
  width: 350px;
  background: radial-gradient(ellipse at right, rgba(66,165,245,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.llm-counter-item {
  text-align: center;
  padding: 28px 16px;
}

.llm-counter-num {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #fff 30%, var(--llm-purple-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Orbitron', monospace;
}

.llm-counter-suffix {
  font-size: 1.2rem;
  font-weight: 900;
  vertical-align: super;
  background: linear-gradient(135deg, #fff, var(--llm-purple-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.llm-counter-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--llm-purple-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.llm-counter-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.llm-counter-bar {
  height: 100%;
  border-radius: 4px;
  width: 0;
  transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.llm-counter-bar-purple { background: linear-gradient(90deg, var(--llm-purple), var(--llm-purple-light)); }
.llm-counter-bar-blue   { background: linear-gradient(90deg, #1565c0, #42a5f5); }
.llm-counter-bar-green  { background: linear-gradient(90deg, #065f46, #10b981); }

.llm-counter-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 10: 납품 사례 슬라이더
═══════════════════════════════════════════════════════════════════ */
.llm-cases-section {
  background: #fff;
  padding: 80px 0;
  overflow: hidden;
}

.llm-case-swiper {
  padding-bottom: 60px !important;
  padding-top: 20px !important;
}

.llm-case-slide {
  background: #fff;
  border: 1.5px solid rgba(124,58,237,0.12);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 30px rgba(124,58,237,0.08);
  transition: all 0.3s;
}

.llm-case-category {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--llm-purple);
  margin-bottom: 10px;
}

.llm-case-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1e1b4b;
  margin-bottom: 12px;
  line-height: 1.3;
}

.llm-case-desc {
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.7;
  margin-bottom: 20px;
}

.llm-case-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.llm-case-metric {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(124,58,237,0.08);
  color: var(--llm-purple-dark);
  border: 1px solid rgba(124,58,237,0.2);
}

.llm-case-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.llm-case-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(124,58,237,0.06);
  color: var(--llm-purple);
  border: 1px solid rgba(124,58,237,0.15);
}

/* swiper dots purple override */
.llm-cases-section .swiper-pagination-bullet { background: rgba(124,58,237,0.3); }
.llm-cases-section .swiper-pagination-bullet-active { background: var(--llm-purple); }

/* ═══════════════════════════════════════════════════════════════════
   섹션 11: 기술 스택 & 보안 아키텍처
═══════════════════════════════════════════════════════════════════ */
.llm-stack-section {
  background: #f0f4ff;
  padding: 80px 0;
}

.llm-stack-dark-panel {
  background: linear-gradient(160deg, #0f0825 0%, #1a1040 100%);
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid rgba(167,139,250,0.2);
  box-shadow: 0 20px 60px rgba(15,8,37,0.25);
  height: 100%;
}

.llm-stack-group { margin-bottom: 20px; }

.llm-stack-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--llm-purple-light);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.llm-stack-group-label::before {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: var(--llm-purple-light);
  border-radius: 2px;
}

.llm-stack-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.llm-stack-tag {
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(167,139,250,0.2);
  cursor: default;
  transition: all 0.25s;
}

.llm-stack-tag:hover {
  border-color: rgba(167,139,250,0.5);
  color: #fff;
  background: rgba(124,58,237,0.2);
  box-shadow: 0 0 10px rgba(124,58,237,0.2);
}

/* 보안 레이어 다이어그램 */
.llm-security-wrap { display: flex; flex-direction: column; gap: 10px; }

.llm-security-layer {
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.3s;
}

.llm-security-layer:hover {
  background: rgba(124,58,237,0.1);
  border-color: rgba(124,58,237,0.3);
  transform: translateX(6px);
}

.llm-security-layer-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--llm-purple);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.llm-security-layer-icon {
  font-size: 20px;
  color: var(--llm-purple);
  flex-shrink: 0;
}

.llm-security-layer-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e1b4b;
  margin-bottom: 2px;
}

.llm-security-layer-desc {
  font-size: 12px;
  color: #6b7280;
}

.llm-security-principles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.llm-security-principle {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(124,58,237,0.08);
  color: var(--llm-purple-dark);
  border: 1px solid rgba(124,58,237,0.2);
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 12: FAQ
═══════════════════════════════════════════════════════════════════ */
.llm-faq-section {
  background: #f8f9ff;
  padding: 80px 0;
}

.llm-faq-section .accordion-button:not(.collapsed) {
  color: var(--llm-purple);
  background: rgba(124,58,237,0.04);
  box-shadow: none;
}

.llm-faq-section .accordion-button:focus { box-shadow: none; }

.llm-faq-section .accordion-button::after {
  filter: none;
}

.llm-faq-section .accordion-item {
  border: 1px solid rgba(124,58,237,0.1);
  border-radius: 10px !important;
  margin-bottom: 10px;
  overflow: hidden;
}

.llm-faq-section .accordion-item:last-child { margin-bottom: 0; }

.llm-faq-section .accordion-button {
  font-size: 15px;
  font-weight: 700;
  color: #1e1b4b;
  background: #fff;
  border-radius: 10px !important;
}

.llm-faq-section .accordion-body {
  font-size: 14.5px;
  color: #4b5563;
  line-height: 1.75;
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 13: 관련 솔루션 카드
═══════════════════════════════════════════════════════════════════ */
.llm-related-section {
  background: #f8f9ff;
  padding: 80px 0;
  border-top: 1px solid rgba(124,58,237,0.08);
}

.llm-related-card {
  background: #fff;
  border: 1.5px solid rgba(124,58,237,0.1);
  border-radius: 16px;
  padding: 28px;
  transition: all 0.35s;
  text-decoration: none;
  display: block;
  height: 100%;
}

.llm-related-card:hover {
  transform: translateY(-6px);
  border-color: rgba(124,58,237,0.3);
  box-shadow: 0 12px 40px rgba(124,58,237,0.12);
  text-decoration: none;
}

.llm-related-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.llm-related-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.llm-related-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e1b4b;
  margin-bottom: 8px;
}

.llm-related-desc {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.65;
  margin-bottom: 12px;
}

.llm-related-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.llm-related-tag {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   섹션 14: CTA
═══════════════════════════════════════════════════════════════════ */
.llm-cta-section {
  background: var(--llm-gradient);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.llm-cta-bubbles {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  pointer-events: none;
  opacity: 0.06;
  overflow: hidden;
}

.llm-cta-bubble {
  position: absolute;
  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  font-size: 11px;
  padding: 8px 14px;
  color: #1e1b4b;
  white-space: nowrap;
}

.llm-cta-bubble-1 { top: 15%; right: 30%; }
.llm-cta-bubble-2 { top: 38%; right: 10%; }
.llm-cta-bubble-3 { top: 62%; right: 25%; }
.llm-cta-bubble-4 { bottom: 15%; right: 15%; }

.llm-cta-badge {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(167,139,250,0.2);
  color: var(--llm-purple-light);
  border: 1px solid rgba(167,139,250,0.35);
  margin-bottom: 20px;
}

.llm-cta-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #fff 40%, var(--llm-purple-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.llm-cta-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 520px;
}

.llm-cta-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.llm-cta-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}

.llm-cta-trust-item i { color: var(--llm-purple-light); }

/* ═══════════════════════════════════════════════════════════════════
   반응형
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .llm-orbit-wrap { width: 300px; height: 300px; }
  .llm-orbit-ring-1 { width: 180px; height: 180px; }
  .llm-orbit-ring-2 { width: 280px; height: 280px; }
  .llm-orbit-1 { width: 180px; height: 180px; margin-top: -90px; margin-left: -90px; }
  .llm-orbit-2 { width: 280px; height: 280px; margin-top: -140px; margin-left: -140px; }
  .llm-orbit-center { width: 80px; height: 80px; font-size: 20px; }
  .llm-orbit-icon { width: 36px; height: 36px; font-size: 15px; }

  .llm-vstep-list { max-width: 100%; }
  .llm-grid-steps { grid-template-columns: 1fr 1fr; }
  .llm-grid-steps .llm-vstep-item:not(:last-child)::after { display: none; }

  .llm-cta-bubbles { display: none; }
}

@media (max-width: 767.98px) {
  .llm-hero { padding-top: 100px; }
  .llm-hero-title .line2 { font-size: 2rem; }
  .llm-stream-panel { margin-top: 30px; }
  .llm-orbit-wrap { display: none; }
  .llm-tab-content-wrap { padding: 24px 20px; }
  .llm-chat-messages { min-height: 240px; }
  .llm-process-summary { gap: 10px; }
  .llm-process-summary-item { padding: 10px 18px; font-size: 13px; }
  .llm-vstep-item { gap: 16px; }
  .llm-vstep-left { width: 44px; }
  .llm-vstep-dot { width: 44px; height: 44px; font-size: 17px; }
  .llm-vstep-card { padding: 14px 16px; }
  .llm-vstep-title { font-size: 14px; }
  .llm-vstep-desc { font-size: 12.5px; }
  .llm-grid-steps { grid-template-columns: 1fr; }
}