/* ── VoiceBox Hero Entrance Presets ── */
/* 프리셋 선택: body에 data-hero-fx="cascade|spotlight|slam|rise" */

/* 공통: VoiceBox hero 요소 초기 상태 */
[data-theme="voicebox"] .hero-content::before,
[data-theme="voicebox"] .logo-svg,
[data-theme="voicebox"] .logo-brand-name,
[data-theme="voicebox"] .hero-tagline,
[data-theme="voicebox"] .hero-desc,
[data-theme="voicebox"] .hero-cta-group .btn-primary,
[data-theme="voicebox"] .hero-cta-group .btn-outline,
[data-theme="voicebox"] .scroll-hint {
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* Cascade 삭감 완료 */

/* ━━━ B. Spotlight: 블러에서 선명하게 포커스 ━━━ */
[data-hero-fx="spotlight"] .hero-content::before  { animation: hfx-focus .7s ease-out 0s both; }
[data-hero-fx="spotlight"] .logo-svg              { animation: hfx-focusScale .8s ease-out .05s both; }
[data-hero-fx="spotlight"] .logo-brand-name       { animation: hfx-focus .8s ease-out .1s both; }
[data-hero-fx="spotlight"] .hero-tagline           { animation: hfx-focus .7s ease-out .2s both; }
[data-hero-fx="spotlight"] .hero-desc              { animation: hfx-focus .7s ease-out .3s both; }
[data-hero-fx="spotlight"] .hero-cta-group .btn-primary { animation: hfx-focus .6s ease-out .4s both; }
[data-hero-fx="spotlight"] .hero-cta-group .btn-outline { animation: hfx-focus .6s ease-out .45s both; }
[data-hero-fx="spotlight"] .scroll-hint            { animation: hfx-focus .5s ease-out .5s both; }

@keyframes hfx-focus {
  0%   { opacity: 0; filter: blur(12px); transform: translateY(10px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes hfx-focusScale {
  0%   { opacity: 0; filter: blur(16px); transform: scale(0.8); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* Slam, Rise, Cosmic, Vortex, Shutter, Cyber 삭감 완료 */

.logo-glow {
  position: absolute; top: 50%; left: 50%;
  width: 250px; height: 250px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  opacity: 0; animation: glowPulse 1.0s var(--ease) 0.2s forwards;
}
@keyframes glowPulse {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
.logo-brand-name {
  font-family: var(--font-heading); font-size: 53px; font-weight: 900;
  letter-spacing: -2px; margin-bottom: 8px;
  opacity: 0; animation: fadeUp 0.7s var(--ease) 0.4s forwards;
}
.logo-brand-name .amp { color: var(--gray-400); }
.hero-tagline {
  font-size: 14px; color: var(--gray-600); font-weight: 400;
  letter-spacing: 6px; text-transform: uppercase;
  opacity: 0; animation: fadeUp 0.7s var(--ease) 0.5s forwards;
}
.hero-desc {
  margin-top: 32px; font-size: 17px; line-height: 1.9; color: var(--gray-400);
  max-width: 440px; margin-left: auto; margin-right: auto;
  opacity: 0; animation: fadeUp 0.7s var(--ease) 0.6s forwards;
}
.hero-cta-group {
  margin-top: 48px; display: flex; gap: 16px; justify-content: center;
}
.hero-cta-group .btn-primary {
  opacity: 0; animation: fadeUp 0.7s var(--ease) 0.7s forwards;
}
.hero-cta-group .btn-outline {
  opacity: 0; animation: fadeUp 0.7s var(--ease) 0.9s forwards;
}
.btn-primary {
  padding: 16px 44px; background: var(--white) !important; color: var(--black) !important;
  border: none; border-radius: 32px; font-size: 16px; font-weight: 600;
  font-family: var(--font-body); cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,255,255,0.1);
}
.btn-outline {
  padding: 16px 44px; background: transparent !important; color: var(--white) !important;
  border: 1px solid var(--gray-800); border-radius: 32px;
  font-size: 16px; font-weight: 500; font-family: var(--font-body); cursor: pointer;
  transition: all 0.3s;
}
.btn-outline:hover { border-color: var(--gray-400) !important; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.scroll-hint {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: fadeUp 0.7s var(--ease) 1.0s forwards;
}
@media (max-width: 768px) {
  .scroll-hint {
    display: none !important;
  }
}
.scroll-hint span {
  font-size: 11px; color: var(--gray-600); letter-spacing: 4px; text-transform: uppercase;
}
.scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--gray-400), transparent);
  animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: scaleY(0.4); opacity: 0.2; }
  50% { transform: scaleY(1); opacity: 0.8; }
}

/* ── About ── */
.about-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  max-width: 1100px; padding: 0 48px; align-items: center;
}
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
.stat-card {
  background: var(--gray-900); border-radius: 16px; padding: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.stat-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.15); }
.stat-number {
  font-family: var(--font-heading); font-size: 33px; font-weight: 800; color: var(--white);
}
.stat-label { font-size: 13px; color: var(--gray-600); margin-top: 4px; }

.about-visual { display: flex; align-items: center; justify-content: center; }
.about-circle {
  width: 320px; height: 320px; border-radius: 50%;
  background: var(--gray-900); border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.about-circle::before {
  content: ''; position: absolute; inset: -24px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.04);
  animation: spin 40s linear infinite;
}
.about-circle::after {
  content: ''; position: absolute; inset: -48px; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.03);
  animation: spin 60s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }
.about-circle-text { text-align: center; }
.about-circle-text .big-text {
  font-family: var(--font-heading); font-size: 57px; font-weight: 900; color: var(--white);
}
.about-circle-text .sub-text { font-size: 13px; color: var(--gray-600); margin-top: 4px; letter-spacing: 2px; }

.section-label {
  font-size: 12px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--gray-400); font-weight: 500; margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-heading); font-size: 41px; font-weight: 800;
  line-height: 1.2; letter-spacing: -1px; margin-bottom: 18px; color: var(--white);
}
.section-desc { font-size: 16px; line-height: 1.8; color: var(--gray-400); word-break: keep-all; }
.desc-block { display: block; margin-bottom: 16px; }
.desc-block:last-child { margin-bottom: 0; }

/* ?�?� Services ?�?� */
.services-inner { max-width: 1120px; padding: 0 48px; width: 100%; }
.services-header { text-align: center; margin-bottom: 52px; }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.service-card {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: 56px; align-items: center;
  background: var(--gray-900); border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
  cursor: default;
  will-change: transform;
}
.service-card:nth-child(even) .service-card-img-wrap { order: 2; }
.service-card:hover, .service-card.is-playing { transform: translateY(-10px) scale(1.025); border-color: rgba(255,255,255,0.5); box-shadow: 0 18px 44px rgba(0,0,0,0.22); }
.service-card-img-wrap {
  width: 100%; height: 290px; overflow: hidden; position: relative;
  background: #0a0a0a;
}
.service-card-img {
  width: 100%; height: 100%; 
  object-fit: cover !important; /* 뭉개짐을 차단하고 꽉 찬 고화질 비율 복원 */
  filter: none !important;      /* 소프트웨어 필터 처리를 원천 차단하여 GPU 고해상도 디코딩 복구 */
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.service-card:hover .service-card-img, .service-card.is-playing .service-card-img {
  transform: scale(1.085) translate3d(0, 0, 0);
}
.service-card:hover .service-video, .service-card.is-playing .service-video {
  transform: scale(1.085) translate3d(0, 0, 0);
}
.service-card-body { padding: 28px; }
.service-eyebrow {
  color: var(--theme-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.service-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 16px;
  background: rgba(255,255,255,0.05);
}
.service-icon.purple, .service-icon.cyan, .service-icon.pink {
  background: rgba(255,255,255,0.05); color: var(--white);
}
.service-card h3 {
  font-family: var(--font-heading); font-size: 32px; font-weight: 800; line-height: 1.22; margin-bottom: 22px; position: relative;
}
.service-card h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: min(220px, 72%);
  height: 6px;
  background: var(--theme-accent);
  opacity: 0.38;
}
.service-card p { font-size: 15px; line-height: 1.8; color: var(--gray-400); word-break: keep-all; }

/* ?�?� Process ?�?� */
.process-inner { max-width: 960px; padding: 0 48px; width: 100%; }
.process-header { text-align: center; margin-bottom: 52px; }
.process-steps { display: flex; position: relative; }
.process-steps::before {
  content: ''; position: absolute; top: 36px; left: 12.5%; right: 12.5%;
  height: 1px; background: rgba(255,255,255,0.08); z-index: 0;
}
.process-steps::after {
  content: ''; position: absolute; top: 36px; left: 12.5%; right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, var(--white) 50%, rgba(255,255,255,0.2) 100%);
  background-size: 200% 100%;
  transform-origin: left; transform: scaleX(0); z-index: 0;
}
.section.active .process-steps::after {
  animation: processLineFill 0.8s ease-in-out 0.1s forwards, processLineFlow 2s linear infinite;
}
@keyframes processLineFill {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@keyframes processLineFlow {
  0% { background-position: 200% 0; }
  100% { background-position: 0 0; }
}
.process-step { flex: 1; text-align: center; position: relative; padding: 0 12px; z-index: 1; }
.step-number {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gray-900); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-family: var(--font-heading);
  font-size: 25px; font-weight: 800; color: var(--white);
  position: relative; transition: all 0.4s var(--ease);
}
@media (min-width: 1025px) { .section.active .process-step:nth-child(1) .step-number { animation: stepGlow 0.3s 0.1s forwards; }
.section.active .process-step:nth-child(2) .step-number { animation: stepGlow 0.3s 0.3s forwards; }
.section.active .process-step:nth-child(3) .step-number { animation: stepGlow 0.3s 0.5s forwards; }
.section.active .process-step:nth-child(4) .step-number { animation: stepGlow 0.3s 0.7s forwards; } }
@media (max-width: 1024px) {
  .process-steps.steps-animate .process-step:nth-child(1) .step-number { animation: stepGlow 0.3s 0.1s forwards; }
  .process-steps.steps-animate .process-step:nth-child(2) .step-number { animation: stepGlow 0.3s 0.3s forwards; }
  .process-steps.steps-animate .process-step:nth-child(3) .step-number { animation: stepGlow 0.3s 0.5s forwards; }
  .process-steps.steps-animate .process-step:nth-child(4) .step-number { animation: stepGlow 0.3s 0.7s forwards; }
}

@keyframes stepGlow {
  0% { border-color: rgba(255,255,255,0.12); background: var(--gray-900); color: var(--white); box-shadow: none; }
  50% { transform: scale(1.15); box-shadow: 0 0 24px rgba(255,255,255,0.5); border-color: var(--white); background: var(--gray-900); color: var(--white); }
  100% { border-color: var(--white); box-shadow: 0 0 12px rgba(255,255,255,0.3); background: var(--gray-900); color: var(--white); transform: scale(1); }
}

.process-step:hover .step-number {
  transform: scale(1.08) !important;
}
.process-step h4 {
  font-family: var(--font-heading); font-size: 17px; font-weight: 700; margin-bottom: 8px;
}
.process-step p { font-size: 13px; color: var(--gray-400); line-height: 1.6; }

/* ?�?� Results (Gauge Charts) ?�?� */
.results-inner { max-width: 1000px; padding: 0 48px; width: 100%; }
.results-header { text-align: center; margin-bottom: 44px; }
.results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.result-gauge {
  text-align: center; padding: 28px 16px;
  background: var(--gray-900); border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}
.result-gauge:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.15); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.gauge-chart { position: relative; width: 140px; height: 140px; margin: 0 auto 14px; }
.gauge-chart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 8; }
.gauge-fill {
  fill: none; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 440; stroke-dashoffset: 440;
  transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.gauge-color-1 { stroke: #60a5fa; filter: drop-shadow(0 0 6px rgba(96,165,250,0.4)); }
.gauge-color-2 { stroke: #34d399; filter: drop-shadow(0 0 6px rgba(52,211,153,0.4)); }
.gauge-color-3 { stroke: #a78bfa; filter: drop-shadow(0 0 6px rgba(167,139,250,0.4)); }
.gauge-color-4 { stroke: #fbbf24; filter: drop-shadow(0 0 6px rgba(251,191,36,0.4)); }
.gauge-value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.gauge-number {
  font-family: var(--font-heading); font-size: 32px; font-weight: 900; color: var(--white);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}
.result-kpi .gauge-number {
  min-width: 180px; /* 숫자 카운팅 시 가로폭 변화로 인한 카드 테두리 흔들림 원천 방지 */
}
.gauge-label { font-size: 14px; color: var(--gray-400); margin-top: 2px; }
.gauge-number--compact { font-size: 22px; }
.gauge-value--stacked { flex-direction: column; gap: 0; }
.gauge-sub { font-size: 13px; color: var(--gray-400); font-weight: 500; margin-top: -2px; }
.gauge-zero {
  margin-top: 2px;
  color: #EF4444;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.result-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 226px;
  padding: 28px 18px;
  text-align: center;
}
.result-kpi .gauge-chart {
  width: auto;
  height: auto;
  margin: 0 0 18px;
}
.result-kpi .gauge-chart svg {
  display: none;
}
.result-kpi .gauge-value {
  position: static;
  display: block;
}

.result-kpi .gauge-value--stacked {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.result-kpi .gauge-number {
  display: block;
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.result-kpi .gauge-number--compact {
  font-size: 38px;
}
.result-kpi .gauge-sub {
  display: inline-block;
  margin-top: 0;
  font-size: 15px;
}
.result-kpi .gauge-label {
  position: relative;
  padding-top: 16px;
}
.result-kpi .gauge-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 4px;
  background: var(--theme-accent);
}

/* VoiceBox 전용 에디토리얼 게이지 */
[data-theme="voicebox"] .result-gauge {
  border-radius: 0;
  border: 3px solid #0A0A0A;
  background: #FAFAFA;
  box-shadow: 5px 5px 0 #E5E5E5;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.4s var(--ease);
}

/* 3D Perspective Grid setup */
[data-theme="voicebox"] .results-grid {
  perspective: 1500px;
}

/* Staggered 3D Y-Axis Rotation Spin Reveal */
[data-theme="voicebox"] .section.active .result-gauge {
  animation: voicebox3DZoomReveal 1.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}
[data-theme="voicebox"] .section.active .result-gauge:nth-child(1) { animation-delay: 0.15s !important; }
[data-theme="voicebox"] .section.active .result-gauge:nth-child(2) { animation-delay: 0.3s !important; }
[data-theme="voicebox"] .section.active .result-gauge:nth-child(3) { animation-delay: 0.45s !important; }
[data-theme="voicebox"] .section.active .result-gauge:nth-child(4) { animation-delay: 0.6s !important; }

@keyframes voicebox3DZoomReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    border-color: #EF4444 !important;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: #0A0A0A !important;
  }
}

/* Hover: stark offset pop shadow, tilt & scale */
[data-theme="voicebox"] .result-gauge:hover {
  border-color: #0A0A0A !important;
  background: #FFFFFF;
  transform: translate(-5px, -5px) !important;
  box-shadow: 10px 10px 0 #EF4444 !important;
}

/* Hover: SVG dynamic rotation spin */
[data-theme="voicebox"] .gauge-chart svg {
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
[data-theme="voicebox"] .result-gauge:hover .gauge-chart svg {
  transform: rotate(270deg);
}

/* Number pop & color shift on hover */
[data-theme="voicebox"] .gauge-number {
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
  display: inline-block;
}
[data-theme="voicebox"] .result-gauge:hover .gauge-number {
  transform: scale(1.15) !important;
  color: #EF4444 !important;
}

[data-theme="voicebox"] .gauge-bg { stroke: #E5E5E5; stroke-width: 10; }
[data-theme="voicebox"] .gauge-fill { stroke-width: 10; stroke-linecap: square; filter: none; }
[data-theme="voicebox"] .gauge-color-1,
[data-theme="voicebox"] .gauge-color-2,
[data-theme="voicebox"] .gauge-color-3 { stroke: #0A0A0A; }
[data-theme="voicebox"] .gauge-color-4 { stroke: #EF4444; }

[data-theme="voicebox"] .result-kpi .gauge-number {
  color: #0A0A0A;
  font-size: 38px;
}
[data-theme="voicebox"] .result-kpi .gauge-label::before {
  background: #EF4444;
  height: 5px;
  width: 80px;
  transition: width 0.3s ease;
}
[data-theme="voicebox"] .result-kpi:hover .gauge-label::before {
  width: 100px;
}
[data-theme="voicebox"] .result-kpi:hover .gauge-number {
  color: #EF4444 !important;
}
[data-theme="voicebox"] .gauge-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #525252;
}

/* ── Zero Percent (ZERO Circle) Custom Styling ── */
.result-zero-kpi .gauge-chart svg {
  display: none;
}
.gauge-value--zero {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.zero-circle-inner {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 4px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white); /* 기본은 흰색 배경 */
  transition: background-color 1.5s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* 등장하여 활성화될 때 배경도 자연스럽게 검은색으로 마무리 */
.section.active .zero-circle-inner {
  background: var(--black);
  transition-delay: 1.2s;
}

/* 찰랑거리는 물결 효과 */
.zero-circle-inner::before,
.zero-circle-inner::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  background: var(--black);
  border-radius: 40%;
  transform: translate(-50%, 0) rotate(0deg);
  z-index: 1;
  bottom: -210px; /* 비활성 시 대기 위치 */
  transition: background-color 0.4s var(--ease);
}

/* 활성화 시에만 차오르는 애니메이션 작동 */
.section.active .zero-circle-inner::before {
  animation: waveRise 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards, waveRotate 6s linear infinite;
}

.section.active .zero-circle-inner::after {
  animation: waveRiseSub 2.0s cubic-bezier(0.19, 1, 0.22, 1) forwards, waveRotateSub 9s linear infinite;
  opacity: 0.45;
  background: rgba(0, 0, 0, 0.6);
}

.zero-word {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 900;
  color: var(--black); /* 흰 배경이므로 처음엔 검은 글씨 */
  letter-spacing: 0.5px;
  line-height: 1;
  transition: color 1.2s var(--ease);
  position: relative;
  z-index: 2;
}

.section.active .zero-word {
  color: var(--white); /* 차오르며 흰색으로 반전 */
}

.zero-percent {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  color: var(--white);
  transition: all 0.4s var(--ease);
}

/* ?? Section reveal ?? */
.section.active .reveal-child { animation: childReveal 0.4s var(--ease) forwards; }
.reveal-child { opacity: 0; transform: translateY(24px); }
.reveal-child:nth-child(1) { animation-delay: 0.05s; }
.reveal-child:nth-child(2) { animation-delay: 0.1s; }
.reveal-child:nth-child(3) { animation-delay: 0.15s; }
.reveal-child:nth-child(4) { animation-delay: 0.2s; }
@keyframes childReveal { to { opacity: 1; transform: translateY(0); } }



/* ━━━ Typographic Header Reveals for both sections ━━━ */
[data-theme="voicebox"] .section.active .process-header .section-title,
[data-theme="voicebox"] .section.active .results-header .section-title {
  animation: voiceboxHeaderReveal 1.2s cubic-bezier(0.19, 1, 0.22, 1) both !important;
}
[data-theme="voicebox"] .section.active .process-header .section-label,
[data-theme="voicebox"] .section.active .results-header .section-label {
  animation: voiceboxLabelReveal 1.0s cubic-bezier(0.19, 1, 0.22, 1) both !important;
}

@keyframes voiceboxHeaderReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    letter-spacing: -6px;
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: -2px;
    filter: blur(0);
  }
}

@keyframes voiceboxLabelReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
    letter-spacing: 12px;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 5px;
  }
}

/* -- Process line: red -- */
[data-theme="voicebox"] .process-steps::before {
  background: rgba(239, 68, 68, 0.15);
  height: 2px !important;
}
[data-theme="voicebox"] .section.active .process-steps::after {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(239,68,68,0.2) 0%, rgba(239,68,68,0.8) 50%, rgba(239,68,68,0.2) 100%);
  background-size: 200% 100%;
  animation: processLineFill 0.8s ease-in-out 0.1s forwards, processLineFlow 2.8s linear infinite;
}

/* -- Buttons: angular, bold, editorial -- */
[data-theme="voicebox"] .btn-primary {
  background: #0A0A0A;
  color: #FAFAFA;
  border: 2px solid #0A0A0A;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, transform 0.3s;
}
[data-theme="voicebox"] .btn-primary:hover {
  background: #EF4444;
  border-color: #EF4444;
  box-shadow: none;
}
[data-theme="voicebox"] .btn-outline {
  border: 2px solid #0A0A0A;
  color: #0A0A0A;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="voicebox"] .btn-outline:hover {
  background: #0A0A0A;
  color: #FAFAFA;
  border-color: #0A0A0A;
}

/* -- Form inputs: angular, thick border -- */
[data-theme="voicebox"] .form-input {
  border: 2px solid #D4D4D4;
  background: #FAFAFA;
}
[data-theme="voicebox"] .form-input:focus {
  border-color: #0A0A0A;
}

/* -- Nav: editorial underline accent -- */
[data-theme="voicebox"] .nav-links a:hover {
  color: #0A0A0A !important;
}
[data-theme="voicebox"] .nav-cta {
  background: #0A0A0A !important;
  color: #FAFAFA !important;
  border: 2px solid #0A0A0A;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="voicebox"] .nav-cta:hover {
  background: #EF4444 !important;
  border-color: #EF4444;
}

/* -- Top nav scrolled: sharp bottom border -- */
[data-theme="voicebox"] .top-nav.scrolled {
  border-bottom: 2px solid #0A0A0A;
}

/* -- Progress bar: red accent -- */
[data-theme="voicebox"] .progress-bar {
  height: 3px;
}

/* -- FAQ: editorial borders -- */
[data-theme="voicebox"] .faq-question:hover {
  color: #EF4444;
}
[data-theme="voicebox"] .faq-item.open {
  border-color: #0A0A0A;
  border-left: 4px solid #EF4444;
}

/* -- Review stars: keep gold -- */
[data-theme="voicebox"] .review-stars {
  color: #EF4444;
}

/* -- Section label: red overline accent -- */
[data-theme="voicebox"] .section-label {
  color: #EF4444;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* -- Hero brand name: extra bold -- */
[data-theme="voicebox"] .logo-brand-name {
  letter-spacing: -3px;
}

/* -- Nav dot: square -- */
[data-theme="voicebox"] .nav-dot {
  border-radius: 0 !important;
}
[data-theme="voicebox"] .nav-dot.active {
  background: #0A0A0A;
  box-shadow: none;
}

/* -- Service image: grayscale editorial (images only, not video) -- */
[data-theme="voicebox"] .service-card-img-wrap img.service-card-img {
  filter: grayscale(100%) contrast(1.1) brightness(0.9);
}
[data-theme="voicebox"] .service-card:hover .service-card-img-wrap img.service-card-img,
[data-theme="voicebox"] .service-card.is-playing .service-card-img-wrap img.service-card-img {
  filter: grayscale(100%) contrast(1.2) brightness(0.8);
}

/* -- Service Cards: 3D Spring Reveal & Video Quality Fix -- */
[data-theme="voicebox"] .services-grid {
  perspective: 1500px;
}
[data-theme="voicebox"] .service-card:nth-child(1),
[data-theme="voicebox"] .service-card:nth-child(2),
[data-theme="voicebox"] .service-card:nth-child(3),
[data-theme="voicebox"] .service-card:nth-child(4) { --spread-x: 0px; --spread-r: 0deg; }

[data-theme="voicebox"] .section.active .service-card {
  animation: voiceboxServiceSpread 0.82s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
[data-theme="voicebox"] .section.active .service-card:nth-child(1) { animation-delay: 0.04s !important; }
[data-theme="voicebox"] .section.active .service-card:nth-child(2) { animation-delay: 0.12s !important; }
[data-theme="voicebox"] .section.active .service-card:nth-child(3) { animation-delay: 0.20s !important; }
[data-theme="voicebox"] .section.active .service-card:nth-child(4) { animation-delay: 0.28s !important; }

@keyframes voiceboxServiceSpread {
  0% {
    opacity: 0;
    /* 3D 깊이와 Y축 회전을 제거하여 0% 시점에 정확히 포개져 겹쳐 보이도록 튜닝 */
    transform: translateY(34px) scale(0.96);
  }
  65% {
    opacity: 1;
    transform: translateY(-3px) scale(1.006);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-theme="voicebox"] .service-card:hover,
[data-theme="voicebox"] .service-card.is-playing {
  transform: translateY(-12px) scale(1.035) !important;
  border-color: #0A0A0A !important;
  box-shadow: 10px 10px 0 #0A0A0A !important;
}

[data-theme="voicebox"] .service-card:hover .service-card-img,
[data-theme="voicebox"] .service-card.is-playing .service-card-img,
[data-theme="voicebox"] .service-card:hover .service-video,
[data-theme="voicebox"] .service-card.is-playing .service-video {
  transform: scale(1.105) translate3d(0, 0, 0) !important;
}

.service-video {
  image-rendering: -webkit-optimize-contrast !important; /* 웹킷 기반 브라우저 해상도 대비 보정 */
  image-rendering: crisp-edges !important;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* -- Blog preview card: red top border on hover -- */
[data-theme="voicebox"] .blog-preview-card:hover {
  border-top: 4px solid #EF4444;
}

/* -- Result values: no gradient, pure black -- */
[data-theme="voicebox"] .result-value {
  color: #0A0A0A !important;
}

/* -- Kakao fab: angular -- */
[data-theme="voicebox"] .kakao-fab {
  box-shadow: none;
  border: 2px solid #3C1E1E;
}

/* -- Logo glow: kill it for flat editorial -- */
[data-theme="voicebox"] .logo-glow {
  display: none;
}

/* -- Hero float animation: subtle for editorial -- */
[data-theme="voicebox"] .hero-content {
  animation: none;
}

/* -- Scroll hint: red line -- */
[data-theme="voicebox"] .scroll-line {
  background: linear-gradient(to bottom, #EF4444, transparent);
}

/* ?�?� VoiceBox Hero: Editorial Magazine Style ?�?� */
[data-theme="voicebox"] #section-0 {
  background: #FAFAFA;
}

/* Red accent bar above hero */
[data-theme="voicebox"] .hero-content::before {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #EF4444;
  margin: 0 auto 32px;
}

/* Brand name: massive, tight, editorial */
[data-theme="voicebox"] .logo-brand-name {
  font-size: 62px;
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1.05;
  color: #0A0A0A;
}
[data-theme="voicebox"] .logo-brand-name .amp {
  color: #EF4444;
}

/* Tagline: uppercase overline style */
[data-theme="voicebox"] .hero-tagline,
[data-theme="voicebox"] .hero-tagline .char {
  font-weight: 700;
  color: #EF4444 !important;
  letter-spacing: 0.12em;
  font-size: 12px;
  text-transform: uppercase;
}

/* Description: editorial body */
[data-theme="voicebox"] .hero-desc {
  color: #525252;
  font-size: 16px;
  line-height: 1.7;
  max-width: 400px;
}

/* Red divider line under hero desc */
[data-theme="voicebox"] .hero-desc::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: #EF4444;
  margin: 28px auto 0;
}

/* Logo SVG: larger, bolder */
[data-theme="voicebox"] .logo-svg {
  width: 120px;
}
[data-theme="voicebox"] .logo-svg rect,
[data-theme="voicebox"] .logo-svg path {
  fill: #0A0A0A;
}

/* Buttons: stark editorial */
[data-theme="voicebox"] .hero-cta-group .btn-primary {
  background: #0A0A0A !important;
  color: #FAFAFA !important;
  border: 2px solid #0A0A0A !important;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 40px;
}
[data-theme="voicebox"] .hero-cta-group .btn-primary:hover {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FAFAFA !important;
}
[data-theme="voicebox"] .hero-cta-group .btn-outline {
  background: transparent !important;
  border: 2px solid #0A0A0A !important;
  color: #0A0A0A !important;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 40px;
}
[data-theme="voicebox"] .hero-cta-group .btn-outline:hover {
  background: #0A0A0A !important;
  color: #FAFAFA !important;
  border-color: #0A0A0A !important;
}

/* Scroll hint text */
[data-theme="voicebox"] .scroll-hint span {
  color: #A3A3A3;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Section titles: editorial heavy */
[data-theme="voicebox"] .section-title {
  font-weight: 900;
  letter-spacing: -2px;
}

/* Aurora hide for pure flat */
[data-theme="voicebox"] .aurora {
  opacity: 0.3 !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  [data-theme="voicebox"] .logo-brand-name {
    font-size: 36px;
    letter-spacing: -2px;
  }
  [data-theme="voicebox"] .hero-content::before {
    width: 40px;
    height: 3px;
    margin-bottom: 20px;
  }
}

/* ���� Privacy Consent ���� */
.privacy-consent {
  margin-top: 4px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--gray-400);
  text-align: left;
}
.privacy-consent label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.privacy-consent a {
  color: var(--gray-200);
  text-decoration: underline;
}

/* ���� Site Footer ���� */
.site-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 32px 48px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: var(--gray-600);
  text-align: center;
  backdrop-filter: blur(10px);
}
.site-footer .footer-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
}
.site-footer .footer-info span {
  white-space: nowrap;
}
.site-footer .footer-links {
  margin-bottom: 12px;
}
.site-footer .footer-links a {
  color: var(--gray-400);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}
.site-footer .footer-links a:hover {
  color: var(--white);
}
.site-footer .footer-copy {
  letter-spacing: 0.5px;
}

/* VoiceBox ���� */
[data-theme="voicebox"] .site-footer {
  background: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  color: #737373;
}
[data-theme="voicebox"] .site-footer .footer-links a { color: #525252; }
[data-theme="voicebox"] .site-footer .footer-links a:hover { color: #0A0A0A; }
[data-theme="voicebox"] .privacy-consent { color: #525252; }
[data-theme="voicebox"] .privacy-consent a { color: #0A0A0A; }


/* ���� Modals ���� */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-content {
  background: var(--gray-900); border: 1px solid rgba(255,255,255,0.1);
  width: 90%; max-width: 500px; border-radius: 12px; padding: 24px;
  position: relative; color: var(--gray-200); max-height: 80vh; overflow-y: auto;
}
.modal-close {
  position: absolute; top: 16px; right: 20px; background: none; border: none;
  color: var(--gray-400); font-size: 24px; cursor: pointer; transition: color 0.3s;
}
.modal-close:hover { color: var(--white); }
.modal-content h3 {
  font-family: var(--font-heading); font-size: 18px; margin-bottom: 16px; color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 12px;
}
.modal-body { font-size: 13px; line-height: 1.6; color: var(--gray-400); }

/* 4. Section 0: Hero Section (Nextec Layout) */
#section-0 {
  background: var(--beige);
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-container {
  width: 100%;
  max-width: 1300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 120px 40px 60px;
  box-sizing: border-box;
}
.hero-header-line {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.dot-marker {
  width: 12px;
  height: 12px;
  background: var(--accent-orange);
  display: inline-block;
}
.hero-content-new {
  display: flex;
  flex-direction: column;
  gap: 30px;
  text-align: left;
}
.hero-title-main {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 1.1;
  color: var(--black);
  letter-spacing: -2px;
}
.hero-tagline-new {
  font-size: 1.25rem;
  color: var(--gray-800);
  font-weight: 500;
  margin-bottom: 10px;
}
.hero-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}
/* Card wrapper floating animation delay configuration */
.card-wrapper-0 { animation: float-card 4s ease-in-out infinite; animation-delay: 0s; }
.card-wrapper-1 { animation: float-card 4s ease-in-out infinite; animation-delay: -1s; }
.card-wrapper-2 { animation: float-card 4s ease-in-out infinite; animation-delay: -2s; }
.card-wrapper-3 { animation: float-card 4s ease-in-out infinite; animation-delay: -3s; }

@keyframes float-card {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.hero-card-item {
  border: var(--neo-border);
  box-shadow: 8px 8px 0px var(--black) !important;
  padding: 24px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.hero-card-item:hover {
  transform: translate(8px, 8px) !important;
  box-shadow: 0px 0px 0px var(--black) !important;
}
.card-white { background: #ffffff; color: var(--black); }
.card-red { background: var(--accent-orange); color: #ffffff; }
.card-blue { background: var(--accent-blue); color: #ffffff; }
.card-teal { background: var(--accent-teal); color: #ffffff; }

.card-header-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-num {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.8;
}
.card-label {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.5px;
}
.card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.card-svg-icon {
  width: 48px;
  height: 48px;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-sub {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}
.card-btn-click {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: inherit;
  transition: all 0.2s ease;
}
.card-white .card-btn-click {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}
.hero-card-item:hover .card-btn-click {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  transform: scale(1.05);
}
.card-white:hover .card-btn-click {
  background: #00c73c;
  border-color: #00c73c;
  color: #fff;
}
.hero-bottom-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(13, 36, 33, 0.1);
  padding-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
}
.hero-scroll-hint {
  cursor: pointer;
}
.hero-scroll-hint:hover {
  color: var(--accent-orange);
}

/* 5. Section 1: About Section (Highlight Animation & Layout Restore) */
#section-1 {
  background: var(--beige) !important;
  color: var(--black) !important;
}
.about-inner {
  max-width: 1200px;
  width: 100%;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.scroll-highlight-text {
  max-width: 720px !important;
  margin-top: 24px !important;
  text-align: left !important;
}
.scroll-highlight-text .section-desc {
  font-size: 1.35rem !important;
  line-height: 1.8 !important;
  font-weight: 500 !important;
  color: var(--black) !important;
}
.scroll-highlight-text .word {
  display: inline-block;
  margin-right: 0px !important;
  opacity: 0.25;
  will-change: opacity; /* GPU 가속 및 Reflow 방지 최적화 */
}
.scroll-highlight-text .word.highlighted {
  opacity: 1.0 !important;
  color: var(--accent-orange) !important;
}
.scroll-highlight-text.section-title .word.highlighted {
  color: inherit !important;
}

/* 우측 입체 네모 그래픽 로고 효과 */
.about-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 320px;
  height: 320px;
  perspective: 900px;
  perspective-origin: center;
}
.about-circle, [data-theme-mode="light"] .about-circle {
  width: 270px;
  height: 270px;
  border: var(--neo-border) !important;
  background: #ffffff !important;
  box-shadow: 16px 16px 0px var(--black), 0 22px 48px rgba(13, 36, 33, 0.12) !important;
  border-radius: 0px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
  transform: rotateX(12deg) rotateY(-12deg);
  animation: none !important;
  will-change: transform;
}
.about-circle::before, .about-circle::after,
[data-theme-mode="light"] .about-circle::before, [data-theme-mode="light"] .about-circle::after {
  display: none !important;
}
.about-circle-text {
  transform: translate3d(0, 0, 92px);
  text-align: center;
  text-shadow: 0 10px 18px rgba(13, 36, 33, 0.12);
  transition: transform 0.16s ease-out;
  will-change: transform;
}
.about-circle-text .big-text {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 38px;
  color: var(--black);
}
.about-circle-text .sub-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--accent-orange);
  text-transform: uppercase;
  margin-top: 6px;
}

.about-stats {
  display: flex !important;
  gap: 20px !important;
  margin-top: 30px !important;
  width: 100% !important;
}
.stat-card, [data-theme-mode="light"] .stat-card {
  border: 1px solid rgba(13, 36, 33, 0.08) !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.04) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  min-height: 140px !important;
  position: relative !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease !important;
  box-sizing: border-box !important;
}
.stat-card:nth-child(1), [data-theme-mode="light"] .stat-card:nth-child(1) { background: #FAF8F3 !important; }
.stat-card:nth-child(2), [data-theme-mode="light"] .stat-card:nth-child(2) { background: #FFF0ED !important; }
.stat-card:nth-child(3), [data-theme-mode="light"] .stat-card:nth-child(3) { background: #EEF4FC !important; }
.stat-card:nth-child(4), [data-theme-mode="light"] .stat-card:nth-child(4) { background: #EBF7F6 !important; }

.stat-card::before, [data-theme-mode="light"] .stat-card::before {
  content: "NO.0" attr(data-stat-idx) !important;
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--black) !important;
  opacity: 0.4 !important;
}
.stat-card:hover, [data-theme-mode="light"] .stat-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(13, 36, 33, 0.18) !important;
}
.stat-card .stat-number, [data-theme-mode="light"] .stat-card .stat-number {
  font-family: 'Sora', sans-serif !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: var(--black) !important;
  line-height: 1.1 !important;
}
.stat-card .stat-label, [data-theme-mode="light"] .stat-card .stat-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gray-800) !important;
  margin-top: 6px !important;
  opacity: 0.9 !important;
}

/* 6. Section 2: Services (넥스텍 스타일 가로 거대 카드 이식) */
#section-2 {
  background: var(--beige) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 40px 40px !important;
  box-sizing: border-box !important;
}
.services-inner {
  max-width: 1300px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.services-header-new {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid rgba(13, 36, 33, 0.1);
  padding-bottom: 20px;
  width: 100%;
}
.services-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.services-header-title {
  font-family: 'Syne', sans-serif;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--black) !important;
  margin: 12px 0 0 0 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.15 !important;
}
.services-tab-indicator {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: 2px;
}
.services-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  margin-top: 40px;
}
.service-card-neo {
  border: 1px solid rgba(13, 36, 33, 0.08) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06) !important;
  min-height: 460px;
  cursor: pointer;
  box-sizing: border-box;
  perspective: 1200px;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease !important;
}
.service-card-neo:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(13, 36, 33, 0.18) !important;
}
.card-neo-white { background: #6B4E71 !important; color: #ffffff !important; }
.card-neo-coral { background: transparent !important; color: #ffffff !important; }
.card-neo-blue { background: transparent !important; color: #ffffff !important; }
.card-neo-teal { background: transparent !important; color: #ffffff !important; }

.card-neo-white * { color: #ffffff !important; }
.card-neo-coral * { color: #ffffff !important; }
.card-neo-blue * { color: #ffffff !important; }
.card-neo-teal * { color: #ffffff !important; }

.card-neo-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card-neo:hover .card-neo-inner {
  transform: rotateY(180deg);
}

.service-card-neo .card-neo-inner.flipped,
.service-card-neo:hover .card-neo-inner.flipped {
  transform: rotateY(180deg) !important;
}
.card-neo-front, .card-neo-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 24px;
  box-sizing: border-box;
}
.card-neo-front {
  z-index: 2;
  transform: rotateY(0deg);
}
.card-neo-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
}

.card-neo-white .card-neo-front, .card-neo-white .card-neo-back { background: #6B4E71; border-radius: 16px; }
.card-neo-coral .card-neo-front, .card-neo-coral .card-neo-back { background: var(--accent-orange); border-radius: 16px; }
.card-neo-blue .card-neo-front, .card-neo-blue .card-neo-back { background: var(--accent-blue); border-radius: 16px; }
.card-neo-teal .card-neo-front, .card-neo-teal .card-neo-back { background: var(--accent-teal); border-radius: 16px; }

.card-neo-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.card-neo-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.85;
}
.card-neo-num {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 800;
  opacity: 0.7;
}
.card-neo-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
}
.card-neo-icon.text-icon {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  line-height: 1;
}
.card-neo-footer {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  width: 100%;
}
.card-neo-footer h3 {
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 800;
  margin: 0;
}
.card-neo-footer p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.9;
}
.card-neo-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 24px;
  font-weight: 700;
  display: inline-block;
  animation: bounceArrowRight 1.4s infinite ease-in-out;
}

.card-neo-flip-btn {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.13) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  z-index: 6;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.card-neo-flip-btn span {
  color: #ffffff !important;
}

.card-neo-flip-btn .flip-label-mobile {
  display: none;
}

.card-neo-flip-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(13, 36, 33, 0.16);
}

.card-neo-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  position: relative;
  z-index: 6;
}

.card-neo-actions .card-neo-back-btn,
.card-neo-actions .card-neo-flip-btn {
  min-width: 0;
  min-height: 46px;
  padding: 11px 8px;
  font-size: 13px;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .card-neo-actions {
    grid-template-columns: 1fr;
  }

  .card-neo-actions .card-neo-flip-btn {
    display: none;
  }
}

@media (max-width: 768px) {
  .card-neo-flip-btn .flip-label-desktop {
    display: none;
  }

  .card-neo-flip-btn .flip-label-mobile {
    display: inline;
  }
}
@keyframes bounceArrowRight {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
  }
}

/* ── 뒷면 세부 스타일 ── */
.card-neo-back-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(13, 36, 33, 0.12);
  padding-bottom: 10px;
  width: 100%;
  margin-bottom: 16px;
}
.card-neo-coral .card-neo-back-header,
.card-neo-blue .card-neo-back-header,
.card-neo-teal .card-neo-back-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.card-neo-back-header h3 {
  font-family: 'Sora', sans-serif;
  font-size: 16px !important;
  font-weight: 800;
  margin: 0;
  white-space: nowrap !important;
}
.card-neo-back-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.card-neo-back-list li {
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap !important;
  letter-spacing: -0.02em !important;
  text-align: left;
}
.card-neo-back-footer {
  margin-top: auto;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-align: right;
  width: 100%;
  padding-top: 10px;
}


/* ── 복원된 상세 마케팅 솔루션 섹션 (#section-2-detail) 스타일 ── */
#section-2-detail, #section-5 {
  background: var(--beige) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 60px 40px 40px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}
.services-detail-inner {
  max-width: 1300px !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 48px !important;
}
.services-detail-header {
  border-bottom: 1px solid rgba(13, 36, 33, 0.1);
  padding-bottom: 16px;
  text-align: left;
  width: 100%;
  margin-bottom: 30px;
}
.services-detail-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 36px !important;
  width: 100%;
}
.service-detail-card {
  background: #ffffff !important;
  border: var(--neo-border) !important;
  box-shadow: 6px 6px 0px var(--black) !important;
  padding: 36px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 48px !important;
  align-items: center !important;
  min-height: auto !important;
  box-sizing: border-box;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.service-detail-card:hover {
  transform: translate(6px, 6px) !important;
  box-shadow: 0px 0px 0px var(--black) !important;
}
.service-detail-card .service-card-img-wrap {
  width: 340px !important;
  height: 210px !important;
  flex-shrink: 0;
  border: var(--neo-border) !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  background: var(--gray-100);
}
.service-detail-card .service-card-body {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.service-detail-card .service-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-orange) !important;
  letter-spacing: 1px;
}
.service-detail-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--black) !important;
  margin: 0 0 8px 0;
}
.service-detail-card p {
  font-size: 15px !important;
  line-height: 1.65;
  color: var(--black) !important;
  font-weight: 500 !important;
  margin: 0;
}

/* 7. Section 4: Process Accordion (Highlight Color syncer) */
#section-6 {
  background: var(--beige) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 120px 40px 60px !important;
  box-sizing: border-box !important;
}
.process-container-new {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  max-width: 1200px;
  width: 100%;
  align-items: center;
}
.process-left {
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: left;
}
.process-tab-nav {
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  padding-bottom: 10px;
}
.tab-nav-item {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--gray-400);
  cursor: pointer;
  transition: color 0.3s;
}
.tab-nav-item.active {
  color: var(--accent-orange) !important;
}
.tab-nav-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 160px;
  height: 2px;
  background: var(--gray-200);
}
.tab-nav-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--accent-orange);
  transition: transform 0.4s var(--ease);
  transform-origin: left;
  transform: scaleX(0.25);
}
.process-left-title {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1.2;
  color: var(--black);
  letter-spacing: -1.5px;
}
.process-right {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(13, 36, 33, 0.15);
}
.process-accordion-item {
  border-bottom: 1px solid rgba(13, 36, 33, 0.15);
  padding: 24px 0;
  cursor: pointer;
  opacity: 0.45;
  filter: blur(0.8px); /* 옅은 뽀얀 블러처리로 완화 */
  transform-origin: left center;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), filter 0.4s var(--ease);
}
.process-accordion-item:hover {
  opacity: 0.85;
  filter: blur(0px); /* 호버 시 블러 제거 */
}
.process-accordion-item.active {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1.10); /* 활성화 시 스케일 증대 */
}
.process-accordion-item .accordion-header {
  display: flex;
  align-items: center;
  gap: 24px;
}
.process-accordion-item .acc-num {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
  transition: color 0.3s;
}
.process-accordion-item h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  margin: 0;
  transition: color 0.3s;
}
.process-accordion-item .accordion-body {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin-top: 10px !important;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.process-accordion-item .accordion-body p {
  color: var(--gray-800) !important;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 500;
}
.process-accordion-item.active h3 {
  color: var(--accent-orange) !important;
}
.process-accordion-item.active .acc-num {
  color: var(--accent-orange) !important;
}
.process-accordion-item.active .accordion-body {
  max-height: none !important;
  opacity: 1 !important;
  margin-top: 10px !important;
}
.process-accordion-item.active .accordion-body p {
  color: var(--black) !important;
  font-weight: 600 !important;
}

/* 8. Section 4: Results (Neo-brutalism Square Cards) */
#section-6 {
  background: var(--beige) !important;
  color: var(--black) !important;
}
#section-6 .section-title,
#section-6 .section-desc,
#section-6 .section-label {
  color: var(--black) !important;
}
.results-grid-new {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  width: 100%;
  margin: 48px auto 0;
  padding: 0 40px;
}
.result-card-new {
  background: #ffffff;
  border: var(--neo-border);
  box-shadow: 8px 8px 0px var(--black) !important;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.result-card-new:hover {
  transform: translate(8px, 8px) !important;
  box-shadow: 0px 0px 0px var(--black) !important;
}
.result-card-header {
  display: flex;
  justify-content: flex-start;
}
.result-card-num {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-orange);
}
.result-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.result-number {
  font-family: 'Sora', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--black);
  line-height: 1.1;
  letter-spacing: -1px;
}
.result-number-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.result-sub-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-600);
}
.result-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
}
.result-zero-card {
  background: var(--black);
  color: #ffffff;
}
.result-zero-card .result-number {
  color: #ffffff;
}
.result-zero-card .result-label {
  color: var(--gray-200);
}

/* 9. FAQ overrides (Section 5) */
#section-7 {
  background: var(--beige) !important;
  color: var(--black) !important;
}
#section-8 .faq-item {
  border: var(--neo-border) !important;
  background: #ffffff !important;
  margin-bottom: 16px !important;
  border-radius: 0px !important;
  box-shadow: var(--neo-shadow) !important;
}
#section-8 .faq-question {
  background: transparent !important;
  color: var(--black) !important;
  font-weight: 700 !important;
  padding: 20px 24px !important;
}
#section-8 .faq-question:hover {
  color: var(--accent-orange) !important;
}
#section-8 .faq-answer {
  background: transparent !important;
  color: var(--gray-800) !important;
  padding: 0 24px !important;
  border-top: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s ease, padding 0.4s !important;
}
#section-8 .faq-item.open .faq-answer {
  max-height: 500px !important;
  padding: 0 24px 20px !important;
}
#section-8 .faq-icon {
  color: var(--accent-orange) !important;
  font-weight: 800 !important;
}
#section-8 .review-card {
  background: #ffffff !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
  border-radius: 0px !important;
  color: var(--black) !important;
}
#section-8 .review-card p {
  color: var(--gray-900) !important;
}
#section-8 .review-stars {
  color: var(--accent-orange) !important;
}

/* 10. Buttons & UI */
.btn-primary {
  background: var(--black) !important;
  color: var(--white) !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
  border-radius: 0px !important;
  padding: 16px 32px !important;
  font-weight: 700 !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.btn-primary:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0px var(--black) !important;
  background: var(--accent-orange) !important;
}
.btn-outline {
  background: transparent !important;
  color: var(--black) !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
  border-radius: 0px !important;
  padding: 16px 32px !important;
  font-weight: 700 !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.btn-outline:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0px var(--black) !important;
  background: #ffffff !important;
}

/* Contact Form override */
.contact-form {
  background: #ffffff !important;
  border: var(--neo-border) !important;
  box-shadow: var(--neo-shadow) !important;
  border-radius: 0px !important;
  padding: 40px !important;
}
.form-input {
  background: var(--beige) !important;
  border: var(--neo-border) !important;
  color: var(--black) !important;
  border-radius: 0px !important;
}
.form-input:focus {
  border-color: var(--accent-orange) !important;
}

/* Nav Dots */
.nav-dot.active {
  background: var(--accent-orange) !important;
  box-shadow: 0 0 8px rgba(209,95,80,0.3) !important;
}

/* ── FAQ & 후기 섹션 (#section-8) 밝은 네오 브루탈리즘 스타일 개편 ── */
#section-8 {
  background: var(--beige) !important;
}
#section-8 .faq-item {
  background: #ffffff !important;
  border: var(--neo-border) !important;
  box-shadow: 6px 6px 0px var(--black) !important;
  border-radius: 0px !important;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  margin-bottom: 12px;
}
#section-8 .faq-item:hover {
  transform: translate(4px, 4px) !important;
  box-shadow: 2px 2px 0px var(--black) !important;
}
#section-8 .faq-question {
  color: var(--black) !important;
  font-weight: 800 !important;
}
#section-8 .faq-icon {
  color: var(--accent-orange) !important;
}
#section-8 .faq-answer p {
  color: var(--gray-800) !important;
  font-weight: 500 !important;
}
#section-8 .review-card {
  background: #ffffff !important;
  border: var(--neo-border) !important;
  box-shadow: 6px 6px 0px var(--black) !important;
  border-radius: 0px !important;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
#section-8 .review-card:hover {
  transform: translate(4px, 4px) !important;
  box-shadow: 2px 2px 0px var(--black) !important;
}
#section-8 .review-stars {
  color: var(--accent-orange) !important;
}
#section-8 .review-card p {
  color: var(--black) !important;
  font-weight: 500 !important;
}
#section-8 .review-author {
  color: var(--gray-600) !important;
}

#section-10 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 100px 40px 30px !important;
  box-sizing: border-box !important;
}
#section-10 .contact-inner {
  max-width: 600px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex-grow: 1 !important;
  justify-content: center !important;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#section-10.active .contact-inner {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
#section-10 .contact-form {
  width: 100% !important;
  margin-top: 24px !important;
}
#inquirySubmitBtn {
  transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important;
}
#inquirySubmitBtn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
#section-10 .site-footer {
  width: 100% !important;
  margin-top: 30px !important;
}

/* ==========================================================================
   Lenis Smooth Scroll & Nextec Card Style 개편 (Override)
   ========================================================================== */

/* 1. Fullpage Snap 레이아웃 제거 및 세로 스크롤 활성화 */
html {
  overflow: auto !important;
  height: auto !important;
  scroll-behavior: auto !important;
}
body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  background-color: var(--beige) !important; /* 베이지 배경색 복구 */
}
#scroll-container {
  height: auto !important;
  overflow: visible !important;
  position: relative !important;
  width: 100% !important;
  background: transparent !important;
}

/* 모든 섹션 세로 배치 */
.section {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: all !important;
  min-height: 100vh !important;
  height: auto !important;
  width: 100% !important;
  padding: 120px 0 !important;
  box-sizing: border-box !important;
  transition: none !important;
  background: transparent !important; /* 배경 투명화 */
}
.section:not(#section-0) {
  transition: none !important;
}
.section.active,
.section.exit-up,
.section.exit-down {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  z-index: 1 !important;
}

/* Hero 영역 추가 패딩 보정 */
#section-0 {
  min-height: 100vh !important;
  padding-top: 140px !important;
  padding-bottom: 60px !important;
}

/* 2. 넥스텍 스타일 서비스 카드 개편 (#section-2) */
.services-grid-new {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 40px auto 0 !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
}

.service-card-neo {
  width: 100% !important;
  height: 480px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: none !important;
  perspective: 1000px !important;
}

/* 마우스 호버 시 nextec 특유의 3D 리프팅 및 은은한 그림자 */
.service-card-neo:hover {
  transform: translateY(-16px) scale(1.02) !important;
  box-shadow: 0 24px 48px rgba(13, 36, 33, 0.12) !important;
}

.card-neo-inner {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-style: preserve-3d !important;
}

/* 플립 카드 앞뒷면 스타일 세련되게 정제 */
.card-neo-front, .card-neo-back {
  border-radius: 24px !important;
  padding: 40px 32px !important;
  box-sizing: border-box !important;
}

.card-neo-front h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-top: 16px !important;
  letter-spacing: -0.5px !important;
}

.card-neo-front p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  opacity: 0.85 !important;
  margin-top: 12px !important;
}

.card-neo-back h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
}

.card-neo-back-list {
  margin-top: 24px !important;
  list-style: none !important;
}

.card-neo-back-list li {
  font-size: 14px !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
  opacity: 0.9 !important;
}

/* 넥스텍 스타일 소프트 단색 배경 매칭 */
.card-neo-white { background: #6B4E71 !important; color: #ffffff !important; }
.card-neo-coral { background: #D86A60 !important; color: #ffffff !important; }
.card-neo-blue { background: #6F98C8 !important; color: #ffffff !important; }
.card-neo-teal { background: #3A9FA7 !important; color: #ffffff !important; }

.card-neo-white *, .card-neo-coral *, .card-neo-blue *, .card-neo-teal * {
  color: #ffffff !important;
}

/* 3. 넥스텍 스타일 성과 및 지표 카드 개편 (#section-7) */
.results-grid-new {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 50px auto 0 !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
}

.result-card-new {
  border: 2px solid #0D2421 !important;
  box-shadow: 6px 6px 0px #0D2421 !important; /* 넥스텍 브루탈리즘 스타일 복원 */
  border-radius: 24px !important;
  padding: 32px 20px !important; /* 가로 패딩 조절로 내부 너비 확보 */
  box-sizing: border-box !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 260px !important;
}

.result-card-new:hover {
  transform: translateY(-12px) scale(1.01) !important;
  box-shadow: 12px 12px 0px #0D2421 !important;
}

/* 성과 카드별 다른 배경색 적용으로 넥스텍 트렌디 감성 재현 */
.result-card-new:nth-child(1) { background: #fff5ef !important; }
.result-card-new:nth-child(2) { background: #eef5ff !important; }
.result-card-new:nth-child(3) { background: #f0fdf4 !important; }
.result-card-new:nth-child(4) { background: #faf5ff !important; }

.result-card-num {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  opacity: 0.4 !important;
  color: var(--black) !important;
}

.result-number, .result-number-wrap, .result-sub-text {
  font-family: var(--font-heading) !important;
  font-size: 34px !important; /* 폰트 크기 최적화로 찢어짐 방지 */
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
  color: var(--black) !important;
  white-space: nowrap !important; /* 세로 찢어짐 줄바꿈 원천 방지 */
}

.result-number-wrap {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.result-sub-text {
  font-size: 14px !important;
  font-weight: 700 !important;
}

.result-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  opacity: 0.8 !important;
  margin-top: 12px !important;
  display: block !important;
  white-space: nowrap !important; /* 라벨도 가로 한 줄 유지 */
}

/* 모바일 반응형 처리 */
@media (max-width: 1024px) {
  .services-grid-new, .results-grid-new {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .service-card-neo {
    height: 420px !important;
  }
}
@media (max-width: 768px) {
  #section-2 {
    padding: 56px 16px 72px !important;
  }
  #section-2 .services-inner {
    padding: 0px !important;
  }
  .services-grid-new {
    position: relative !important;
    display: block !important;
    height: 480px !important;
    margin-top: 40px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  .results-grid-new {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
  }

  /* 동적으로 추출된 탭 공통 스타일 */
  .services-grid-new > .card-neo-num {
    position: absolute !important;
    top: 6px !important;
    width: 50px !important;
    height: 34px !important;
    border: 2px solid #0d2421 !important;
    border-radius: 10px 10px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    z-index: 100 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: all 0.2s ease !important;
  }
  /* 300px 가로폭 카드 기준 정렬 (모든 모바일 해상도 가로 중앙 50% 기준 반응형 동기화) */
  .services-grid-new > .card-neo-num.mobile-tab-1 { background: #5E4A62 !important; color: #ffffff !important; left: 50% !important; }
  .services-grid-new > .card-neo-num.mobile-tab-2 { background: #D16453 !important; color: #ffffff !important; left: 50% !important; }
  .services-grid-new > .card-neo-num.mobile-tab-3 { background: #6B8FB9 !important; color: #ffffff !important; left: 50% !important; }
  .services-grid-new > .card-neo-num.mobile-tab-4 { background: #4B9FA0 !important; color: #ffffff !important; left: 50% !important; }

  /* 탭 활성/비활성 스타일 (중앙 정렬 50% 기준 translateX 오프셋 연동) */
  .services-grid-new > .card-neo-num.mobile-tab-1:not(.mobile-tab-active) { transform: translateX(-104px) translateY(3px) !important; opacity: 0.6 !important; border-bottom: 2px solid #0d2421 !important; }
  .services-grid-new > .card-neo-num.mobile-tab-1.mobile-tab-active { transform: translateX(-104px) translateY(0) scale(1.05) !important; opacity: 1 !important; border-bottom: 2px solid transparent !important; z-index: 110 !important; }

  .services-grid-new > .card-neo-num.mobile-tab-2:not(.mobile-tab-active) { transform: translateX(-48px) translateY(3px) !important; opacity: 0.6 !important; border-bottom: 2px solid #0d2421 !important; }
  .services-grid-new > .card-neo-num.mobile-tab-2.mobile-tab-active { transform: translateX(-48px) translateY(0) scale(1.05) !important; opacity: 1 !important; border-bottom: 2px solid transparent !important; z-index: 110 !important; }

  .services-grid-new > .card-neo-num.mobile-tab-3:not(.mobile-tab-active) { transform: translateX(8px) translateY(3px) !important; opacity: 0.6 !important; border-bottom: 2px solid #0d2421 !important; }
  .services-grid-new > .card-neo-num.mobile-tab-3.mobile-tab-active { transform: translateX(8px) translateY(0) scale(1.05) !important; opacity: 1 !important; border-bottom: 2px solid transparent !important; z-index: 110 !important; }

  .services-grid-new > .card-neo-num.mobile-tab-4:not(.mobile-tab-active) { transform: translateX(64px) translateY(3px) !important; opacity: 0.6 !important; border-bottom: 2px solid #0d2421 !important; }
  .services-grid-new > .card-neo-num.mobile-tab-4.mobile-tab-active { transform: translateX(64px) translateY(0) scale(1.05) !important; opacity: 1 !important; border-bottom: 2px solid transparent !important; z-index: 110 !important; }

  /* 카드 겹침 구조 - 375px 모바일 화면 내 중앙 정렬 */
  .services-inner .service-card-neo {
    position: absolute !important;
    top: 40px !important;
    left: 0 !important;
    width: 100% !important;
    height: 440px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 10 !important;
    overflow: visible !important;
    display: none !important;
    transform: none !important;
  }
  .services-inner .service-card-neo.mobile-active {
    display: block !important;
    z-index: 15 !important;
    pointer-events: auto !important;
  }
  .services-inner .service-card-neo:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* 카드 본체 래퍼 스타일 (물리적 정중앙 정렬 및 테마별 틈새 방지 배경 주입) */
  .service-card-neo .card-neo-inner {
    border: none !important;
    box-shadow: none !important;
    border-radius: 24px !important;
    height: 100% !important;
    width: 300px !important;
    margin: 0 auto !important;
    pointer-events: auto !important;
    transform-style: preserve-3d !important;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform !important;
  }
  .service-card-neo.card-neo-white .card-neo-inner { background: #6B4E71 !important; }
  .service-card-neo.card-neo-coral .card-neo-inner { background: #D16453 !important; }
  .service-card-neo.card-neo-blue .card-neo-inner { background: #6B8FB9 !important; }
  .service-card-neo.card-neo-teal .card-neo-inner { background: #4B9FA0 !important; }
  
  /* 테두리와 그림자 앞뒷면 직접 위임 및 Z-depth 분리 처리 (서브픽셀 틈새 및 3D 잔상 방지 최적화) */
  .service-card-neo .card-neo-front {
    border: 2px solid #0D2421 !important;
    box-shadow: 6px 6px 0px #0D2421 !important;
    border-radius: 24px !important;
    background-clip: border-box !important;
    transform: rotateY(0deg) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
  .service-card-neo .card-neo-back {
    border: 2px solid #0D2421 !important;
    box-shadow: 6px 6px 0px #0D2421 !important;
    border-radius: 24px !important;
    background-clip: border-box !important;
    transform: rotateY(180deg) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
  
  /* 터치 시 회전 클래스 바인딩 및 뒤집힌 그림자 대칭 보정 */
  .service-card-neo:hover .card-neo-inner {
    transform: none !important;
  }
  .service-card-neo .card-neo-inner.flipped,
  .service-card-neo:hover .card-neo-inner.flipped {
    transform: rotateY(180deg) !important;
  }
  .service-card-neo .card-neo-inner.flipped .card-neo-back {
    box-shadow: -6px 6px 0px #0D2421 !important;
  }

  /* 카드 폰트 크기 및 스타일 PC와 동일하게 100% 복원 */
  .service-card-neo .card-neo-front {
    padding: 32px 24px !important;
    height: 100% !important;
  }
  .service-card-neo .card-neo-top {
    margin-bottom: 12px !important;
  }
  .service-card-neo .card-neo-eyebrow {
    font-size: 12px !important;
  }
  .service-card-neo .card-neo-icon {
    font-size: 38px !important;
    margin: 16px 0 !important;
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .service-card-neo .card-neo-footer h3 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }
  .service-card-neo .card-neo-footer p {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  .service-card-neo .card-neo-arrow {
    font-size: 24px !important;
    margin-top: 12px !important;
  }
  .service-card-neo .card-neo-back-list li {
    white-space: normal !important;
    word-break: keep-all !important;
    line-height: 1.45 !important;
    font-size: 13.5px !important;
  }
  .result-card-new {
    height: 220px !important;
  }
}

/* 4. 히어로 섹션 하단 카드 및 서비스 카드 스타일 넥스텍 브루탈리즘 복원 */
.service-card-neo, .hero-card-item {
  border: 2px solid #0D2421 !important;
  box-shadow: 6px 6px 0px #0D2421 !important;
  border-radius: 24px !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 호버 시 3D 그림자가 더 두꺼워지면서 튀어나오는 연출 */
.service-card-neo:hover, .hero-card-item:hover {
  transform: translateY(-12px) scale(1.01) !important;
  box-shadow: 12px 12px 0px #0D2421 !important;
}

.hero-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 50px auto 0 !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
}

.hero-card-item {
  padding: 40px 32px !important;
  box-sizing: border-box !important;
  height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transform: none !important;
}

/* 히어로 카드별 넥스텍 소프트 단색 매칭 */
.hero-card-item.card-white { background: #fff5ef !important; color: #0D2421 !important; }
.hero-card-item.card-red { background: #D86A60 !important; color: #ffffff !important; }
.hero-card-item.card-blue { background: #6F98C8 !important; color: #ffffff !important; }
.hero-card-item.card-teal { background: #3A9FA7 !important; color: #ffffff !important; }

.hero-card-item.card-red *, .hero-card-item.card-blue *, .hero-card-item.card-teal * {
  color: #ffffff !important;
}

/* 히어로 카드 내 레이아웃 디테일 정제 */
.card-header-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.card-num {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  opacity: 0.4 !important;
}

.card-label {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}

.card-icon-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-grow: 1 !important;
}

.card-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.card-sub {
  font-size: 12px !important;
  opacity: 0.5 !important;
  font-weight: 500 !important;
}

.card-btn-click {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

/* Section 4 Process */
#section-6 {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  padding: 60px 0 !important;
  margin: 0 !important; /* 패딩 및 마진 완전 제거 */
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}
.process-container-new {
  max-width: 1280px !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
}

#section-1 {
  min-height: auto !important;
  padding: 88px 0 56px !important;
}

#section-2 {
  min-height: auto !important;
  padding: 56px 40px 72px !important;
}

#section-3 {
  min-height: auto !important;
  padding: 60px 0 !important;
}

#section-4 {
  min-height: auto !important;
  padding: 60px 0 !important;
}

#section-5 {
  min-height: auto !important;
  padding: 60px 40px !important;
  background: var(--beige) !important;
}

#section-7 {
  min-height: auto !important;
  padding: 80px 0 100px !important;
  margin-top: 0 !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

#section-8,
#section-9,
#section-10 {
  min-height: 100vh !important;
  padding: 96px 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

#section-8 .faq-review-inner,
#section-9 .blog-preview-inner,
#section-10 .contact-inner {
  margin: 0 auto !important;
}

.reveal-child,
.review-card,
#section-10 .contact-inner {
  opacity: 1 !important;
  transform: none !important;
}

.section.active .reveal-child,
.section.active .review-card {
  animation: none !important;
}

.process-accordion-item.active h3,
.process-accordion-item.active .acc-num,
.tab-nav-item.active {
  color: var(--accent-orange) !important;
}

#section-6 .process-accordion-item h3,
#section-6 .process-accordion-item h3 .char {
  color: var(--gray-600) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

#section-6 .process-accordion-item.active h3,
#section-6 .process-accordion-item.active h3 .char,
#section-6 .process-accordion-item.active .acc-num,
#section-6 .tab-nav-item.active {
  color: var(--accent-orange) !important;
}

#section-6 .process-accordion-item.active h3 {
  font-size: 1.68rem !important;
}

#section-6 .process-accordion-item .accordion-body p,
#section-6 .process-accordion-item.active .accordion-body p {
  color: var(--gray-800) !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

#section-6 .process-accordion-item.active .accordion-body p {
  color: var(--black) !important;
  font-size: 17px !important;
}

/* 텍스트 하이라이트 글자 기본 대기 투명도 설정 */
.scroll-highlight-text .word {
  opacity: 0.25 !important;
  display: inline-block !important;
  will-change: opacity; /* GPU 가속 및 Reflow 방지 최적화 */
}
.scroll-highlight-text .word.highlighted {
  opacity: 1.0 !important;
}

#section-8 .faq-review-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 48px !important;
  align-items: start !important;
  overflow: hidden !important;
}
@media (max-width: 1024px) {
  #section-8 .faq-review-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

#section-8 .faq-column {
  width: min(860px, 100%) !important;
  margin: 0 auto !important;
}

#section-8 .review-marquee {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  gap: 24px !important;
  padding: 12px 0 26px !important;
  will-change: transform !important;
  animation: none !important;
}

#section-8 .review-card {
  flex: 0 0 340px !important;
  width: 340px !important;
  min-height: 180px !important;
  background: rgba(255, 253, 250, 0.92) !important;
  border: 2px solid #0D2421 !important;
  box-shadow: 5px 5px 0 rgba(13, 36, 33, 0.72) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  opacity: 0.48 !important;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease) !important;
}

#section-8 .review-card:hover,
#section-8 .review-card.is-active {
  opacity: 1 !important;
  transform: translateY(-10px) scale(1.04) !important;
  box-shadow: 10px 10px 0 #0D2421 !important;
}

#section-8 .review-marquee.is-hovering .review-card.is-active {
  opacity: 0.48 !important;
  transform: none !important;
  box-shadow: 5px 5px 0 rgba(13, 36, 33, 0.72) !important;
}

#section-8 .review-marquee.is-hovering .review-card:hover {
  opacity: 1 !important;
  transform: translateY(-10px) scale(1.04) !important;
  box-shadow: 10px 10px 0 #0D2421 !important;
}

#section-8 .review-card p {
  color: var(--black) !important;
  font-size: 15px !important;
}

#section-8 .review-author {
  color: var(--gray-800) !important;
  font-size: 14px !important;
}

#section-8 .faq-review-grid::after {
  display: none !important;
}

#section-8 .faq-review-grid {
  position: relative !important;
}

@keyframes cardFloatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.service-card-neo,
.result-card-new,
.stat-card {
  animation: cardFloatSoft 5.6s ease-in-out infinite !important;
  animation-delay: calc(var(--float-i, 0) * 0.35s) !important;
}

.service-card-neo:nth-child(1),
.result-card-new:nth-child(1),
.stat-card:nth-child(1) { --float-i: 0; }
.service-card-neo:nth-child(2),
.result-card-new:nth-child(2),
.stat-card:nth-child(2) { --float-i: 1; }
.service-card-neo:nth-child(3),
.result-card-new:nth-child(3),
.stat-card:nth-child(3) { --float-i: 2; }
.service-card-neo:nth-child(4),
.result-card-new:nth-child(4),
.stat-card:nth-child(4) { --float-i: 3; }

.service-card-neo:hover,
.result-card-new:hover,
.stat-card:hover {
  animation-play-state: paused !important;
}

.results-grid-new {
  grid-template-columns: 1.25fr 1fr 1fr 1fr !important;
  gap: 30px !important;
  max-width: 1240px !important;
  margin-top: 64px !important;
}

.result-card-new {
  --zip: 1;
  min-height: 300px !important;
  height: 300px !important;
  padding: 34px 36px !important;
  border: 2px solid #0D2421 !important;
  border-radius: 24px !important;
  box-shadow: 8px 8px 0 #0D2421 !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
}

.result-card-num {
  position: absolute !important;
  top: 34px !important;
  right: 34px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.result-card-new::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: 2 !important;
  background: rgba(248, 243, 236, 0.96) !important;
  transform: scaleY(var(--zip)) !important;
  transform-origin: top !important;
  opacity: calc(var(--zip) * 0.92) !important;
  pointer-events: none !important;
  will-change: transform, opacity;
}

.result-card-new::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 3 !important;
  height: 4px !important;
  background: rgba(209, 95, 80, 0.72) !important;
  box-shadow: 0 8px 22px rgba(209, 95, 80, 0.16) !important;
  transform: translateY(calc(var(--zip) * 300px - 2px)) !important;
  pointer-events: none !important;
  will-change: transform;
}

.result-card-new:hover {
  transform: translateY(-14px) scale(1.015) !important;
  box-shadow: 14px 14px 0 #0D2421 !important;
}

.result-card-new:nth-child(1) { background: #fff7f0 !important; }
.result-card-new:nth-child(2) { background: #edf5ff !important; }
.result-card-new:nth-child(3) { background: #effdf5 !important; }
.result-card-new:nth-child(4) { background: #fbf5ff !important; }

.result-card-num {
  font-size: 18px !important;
  font-weight: 900 !important;
  opacity: 0.42 !important;
}

.result-card-body {
  width: 100% !important;
  margin-top: 64px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.result-number,
.result-number-wrap {
  font-size: 33px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: center !important;
  justify-content: center !important;
}

.result-card-new:first-child .result-number {
  font-size: 30px !important;
  letter-spacing: -1.5px !important;
  transform: scaleX(0.92) !important;
  transform-origin: center !important;
}

.section-desc,
.card-neo-footer p,
.process-accordion-item .accordion-body p,
.faq-answer p,
.review-card p,
.result-label,
.stat-label,
.form-input,
.contact-inner p,
.blog-preview-card p {
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.section-label,
.card-neo-eyebrow,
.services-tab-indicator,
.result-card-num,
.acc-num,
.tab-nav-item {
  font-size: 17px !important;
}

.result-sub-text,
.result-label {
  font-size: 15px !important;
}

.stat-card {
  border: 2px solid rgba(13, 36, 33, 0.16) !important;
  box-shadow: 5px 5px 0 rgba(13, 36, 33, 0.18) !important;
}

/* 핵심 서비스 카드 Canvas 물 출렁임 효과 */
.card-neo-front, .card-neo-back {
  border-radius: 16px !important;
  /* 3D 회전 시 흐릿함(블러) 방지 및 transform 최적화 */
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

.card-neo-front {
  transform: rotateY(0deg) translate3d(0, 0, 0) !important;
  -webkit-transform: rotateY(0deg) translate3d(0, 0, 0) !important;
}

.card-neo-back {
  transform: rotateY(180deg) translate3d(0, 0, 0) !important;
  -webkit-transform: rotateY(180deg) translate3d(0, 0, 0) !important;
}

/* 카드 앞뒷면 배경 설정 (원색 복구로 글씨 가독성을 높이고, 물결 색상 대비를 최대화) */
.card-neo-white .card-neo-front, .card-neo-white .card-neo-back { background: #6B4E71 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }
.card-neo-coral .card-neo-front, .card-neo-coral .card-neo-back { background: var(--accent-orange) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }
.card-neo-blue .card-neo-front, .card-neo-blue .card-neo-back { background: var(--accent-blue) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }
.card-neo-teal .card-neo-front, .card-neo-teal .card-neo-back { background: var(--accent-teal) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; }

/* 카드 콘텐츠 래퍼에 z-index를 부여하여 캔버스 위로 강제 정렬 (텍스트 가림 및 푸터 누락 방지) */
.card-neo-top, .card-neo-icon, .card-neo-footer,
.card-neo-back-header, .card-neo-back-list, .card-neo-back-footer {
  position: relative !important;
  z-index: 5 !important;
}

/* Canvas 백그라운드 레이어 */
.water-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  border-radius: inherit;
}

/* 핵심 마케팅 카드 뒷면 고도화 스타일 */
.card-neo-back {
  justify-content: space-between !important;
  padding: 32px 16px !important;
}

.card-neo-back-list {
  margin-top: 12px !important;
  margin-bottom: auto !important;
}

.card-neo-back-btn {
  width: 100%;
  min-height: 46px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  z-index: 5 !important;
}

.card-neo-back-btn span {
  color: #ffffff !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}

/* 서비스 카드 문구 가독성 */
#section-2 .card-neo-eyebrow {
  font-size: 13px !important;
}

#section-2 .card-neo-footer p {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

#section-2 .card-neo-back-header {
  justify-content: flex-start !important;
  gap: 9px !important;
}

#section-2 .card-neo-back-header .card-neo-num {
  flex: 0 0 auto !important;
}

#section-2 .card-neo-back-header h3 {
  min-width: 0 !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.055em !important;
  white-space: nowrap !important;
}

#section-2 .card-neo-back-list li {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.card-neo-back-btn:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.card-neo-back-btn:hover span {
  color: var(--black) !important;
}

.card-neo-back-btn:active {
  transform: translateY(0);
  scale: 0.98;
}





/* 메인 히어로 카드 Drawer 스타일 */
.main-card-drawer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  visibility: hidden;
  transition: visibility 0.4s;
}
.main-card-drawer.active {
  visibility: visible;
}
.drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 24, 36, 0.4);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.main-card-drawer.active .drawer-overlay {
  opacity: 1;
}
.drawer-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 500px; /* 가로폭 늘려 줄바꿈 최소화 */
  height: 100%;
  background: #FAF8F5;
  border-left: 2px solid #0d2421;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
  padding: 36px 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #0d2421;
  font-family: 'Sora', sans-serif;
}
.main-card-drawer.active .drawer-content {
  transform: translate3d(0, 0, 0);
}

.drawer-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: #0d2421;
  font-size: 32px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  z-index: 10;
}
.drawer-close-btn:hover {
  opacity: 1;
}
.drawer-header {
  border-bottom: 1px solid rgba(13, 36, 33, 0.1);
  padding-bottom: 18px;
  margin-bottom: 18px;
}
.drawer-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer-num {
  font-size: 16px;
  font-weight: 800;
  color: #D4A359;
  font-family: 'Syne', sans-serif;
}
.drawer-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  color: #0d2421;
  letter-spacing: -0.01em;
}
.drawer-body {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 스크롤바 숨기기 */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drawer-section-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-block;
  width: fit-content;
}

/* 홈페이지 스타일과 통일된 우아한 테마 톤으로 변경 */
.label-red { background: rgba(216, 106, 96, 0.12); color: #D86A60; }
.label-teal { background: rgba(58, 159, 167, 0.12); color: #3A9FA7; }
.label-blue { background: rgba(111, 152, 200, 0.12); color: #6F98C8; }
.label-orange { background: rgba(212, 163, 89, 0.12); color: #D4A359; }
.label-slate { background: rgba(13, 36, 33, 0.08); color: #0d2421; }

.drawer-box {
  background: #ffffff;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(13, 36, 33, 0.06);
}
.drawer-desc-bold {
  font-size: 14px; /* 글자 크기 확대 */
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  color: #0d2421;
}
.drawer-desc {
  font-size: 13.5px; /* 글자 크기 확대 */
  line-height: 1.6;
  margin: 0;
  color: #334155;
}
.drawer-pricing {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  color: #0d2421;
  background: #fffbeb;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px dashed #D4A359;
}

/* 타임라인 스타일 */
.drawer-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-left: 12px;
}
.drawer-timeline::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #e2e8f0;
}
.timeline-step {
  display: flex;
  gap: 12px;
  position: relative;
}
.timeline-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0d2421;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: -15px;
  z-index: 2;
}
.timeline-text {
  font-size: 13px; /* 글자 크기 확대 */
  font-weight: 700;
  color: #334155;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(13, 36, 33, 0.05);
  width: 100%;
  margin-left: -8px;
}

/* 그리드 및 케이스 분석 */
.drawer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.drawer-grid-item {
  padding: 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.item-before { background: #fff5f5; border: 1px solid #fee2e2; }
.item-after { background: #ecfdf5; border: 1px solid #d1fae5; }

.grid-item-badge {
  font-size: 9.5px;
  font-weight: 800;
  display: inline-block;
  width: fit-content;
}
.badge-red { color: #dc2626; }
.badge-emerald { color: #059669; }

.grid-item-text {
  font-size: 11.5px; /* 글자 크기 확대 */
  line-height: 1.5;
  margin: 0;
  color: #475569;
}
.grid-item-text.text-bold {
  font-weight: 800;
  color: #047857;
}
.drawer-narrative {
  font-size: 12.5px; /* 글자 크기 확대 */
  line-height: 1.6;
  color: #475569;
  font-style: italic;
  background: #ffffff;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(13, 36, 33, 0.05);
  margin: 0;
}

.drawer-footer {
  margin-top: 20px;
  border-top: 1px solid rgba(13, 36, 33, 0.08);
  padding-top: 16px;
}

/* CTA 버튼 스타일 - 홈페이지 컨셉(다크네이비, 흰색글씨, 그림자) 매치 */
.drawer-cta-btn {
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  background: #0d2421 !important; /* 다크 네이비로 통일 */
  color: #ffffff !important; /* 글씨 색상을 또렷한 흰색으로 강제 적용 */
  font-size: 14.5px; /* 글자 크기 확대 */
  font-weight: 800;
  border: 2px solid #0d2421;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0px 0px rgba(212, 163, 89, 0.35); /* 웜 골드 투명 그림자 */
}
.drawer-cta-btn span {
  color: #ffffff !important;
}
.drawer-cta-btn:hover {
  transform: translateY(-3px);
  background: #D4A359 !important; /* 호버 시 웜 골드로 피드백 */
  border-color: #D4A359;
  box-shadow: 4px 4px 0px 0px #0d2421;
}
.drawer-cta-btn:active {
  transform: translateY(0);
  scale: 0.98;
}


/* ── FAQ & 후기 마퀴 슬라이더 가독성 및 짤림 방지 보정 ── */
.review-marquee-container {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
  /* 상하 패딩을 넉넉하게 50px로 주어 카드가 위로 호버되어 솟구칠 때 절대 잘리지 않도록 방어 */
  padding: 34px 0 !important;
}

.review-marquee-track {
  display: flex !important;
  width: max-content !important;
  gap: 24px !important;
  animation: marquee-scroll 24s linear infinite;
  will-change: transform !important;
  /* 트랙 자체에도 패딩을 줘서 섀도우 짤림 예방 */
  padding: 10px 0 !important;
  cursor: grab;
}

.marquee-blur-left, .marquee-blur-right {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 32px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* 흰색 이질감을 없애고 홈페이지 배경색(#FAF8F5)과 투명 톤으로 완벽히 동치 융합 */
.marquee-blur-left {
  left: 0 !important;
  background: linear-gradient(to right, var(--beige) 0%, rgba(248, 243, 236, 0.72) 35%, rgba(248, 243, 236, 0) 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.marquee-blur-right {
  right: 0 !important;
  background: linear-gradient(to left, var(--beige) 0%, rgba(248, 243, 236, 0.72) 35%, rgba(248, 243, 236, 0) 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 카드 크기가 호버 시 흔들리거나 상자가 깨지지 않게 보정 */
#section-8 .review-card {
  box-sizing: border-box !important;
}

/* 후기 좌우 화살표 버튼 스타일 */
.review-marquee-container {
  position: relative !important;
}

.review-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(13, 36, 33, 0.85) !important;
  border: 1.5px solid #0D2421 !important;
  box-shadow: 2px 2px 0 #0D2421 !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 25 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.review-nav-btn span {
  color: #ffffff !important;
  display: inline-block !important;
  transform: translateY(-2px) !important;
  line-height: 1 !important;
}

.review-marquee-container:hover .review-nav-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.review-nav-btn.prev-btn {
  left: 6px !important;
}

.review-nav-btn.next-btn {
  right: 6px !important;
}

.review-nav-btn:hover {
  background: #ffffff !important;
  color: #0D2421 !important;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 1px 1px 0 #0D2421 !important;
}

.review-nav-btn:hover span {
  color: #0D2421 !important;
}

.review-nav-btn:active {
  transform: translateY(-50%) scale(0.96) !important;
  box-shadow: 0px 0px 0 #0D2421 !important;
}

/* 성과, FAQ/리뷰, 블로그, 문의 섹션 상하 여백 축소 */
#section-7, #section-8, #section-9, #section-10 {
  height: auto !important;
  min-height: auto !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

#section-8 .faq-review-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── 메인 히어로 텍스트 폰트 크기 확대 ── */

#section-0 .logo-brand-name {
  font-size: clamp(52px, 6vw, 76px) !important;
  font-weight: 800 !important;
  margin-top: 10px !important;
  letter-spacing: -2px !important;
  line-height: 1.15 !important;
}

#section-0 .hero-tagline {
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 600 !important;
  letter-spacing: 4px !important;
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

#section-0 .hero-desc {
  font-size: clamp(17px, 1.8vw, 22px) !important;
  line-height: 1.65 !important;
  margin-bottom: 40px !important;
}

/* ── 1번 소개 섹션 (About Us) 텍스트 가독성 크기 대폭 확대 ── */
#section-1 .section-title {
  font-size: clamp(32px, 3.8vw, 50px) !important; /* 모바일~PC 대응 크기 대폭 확대 */
  line-height: 1.35 !important;
  margin-bottom: 30px !important;
  font-weight: 800 !important;
}

#section-1 .section-desc {
  font-size: clamp(17px, 1.85vw, 21.5px) !important; /* 본문 텍스트 시원하게 확대 */
  line-height: 1.85 !important;
  opacity: 0.95 !important;
}


/* ──────────────────────────────────────────────────────────
   Section 2 & 3: Naver Trend & Handwritten method styling
   ────────────────────────────────────────────────────────── */

/* 형광펜 효과 (Marker Highlight) */
.marker-highlight {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.marker-highlight::after {
  content: '';
  position: absolute;
  left: -2px;
  bottom: 2px;
  height: 50%;
  background: rgba(254, 240, 138, 0.72); /* 화사한 형광 노랑색 */
  z-index: -1;
  border-radius: 4px;
  width: var(--highlight-width, 0%) !important;
}
/* 다크 모드일 때 형광펜 가독성 확보 */
[data-theme-mode="dark"] .marker-highlight::after {
  background: rgba(253, 224, 71, 0.42); /* 은은하고 돋보이는 옐로우 크롬 */
}

/* SECTION 2: Trend CSS */
.trend-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
.trend-header {
  margin-bottom: 20px;
  text-align: center;
}
.trend-title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--white);
  margin-top: 10px;
}
.trend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.trend-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.trend-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.12);
}
.trend-card-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
  background: transparent;
  border-radius: 0;
  padding: 16px 0;
  min-height: 240px;
  justify-content: center;
}
.trend-card-side-label {
  display: none;
}
.trend-card-info {
  margin-top: auto;
}
.trend-card-h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  margin-bottom: 14px;
}
.trend-card-p {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.7;
  color: var(--gray-300);
}

/* SECTION 3: Method CSS */
.method-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
.method-header {
  margin-bottom: 20px;
  text-align: center;
}
.method-title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--white);
  margin-top: 10px;
}
.method-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.1fr;
  gap: 30px;
  align-items: center;
}
.method-visual-panel, .method-visual-monitor {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 240px;
}
.method-info-panel {
  padding: 20px;
}
.method-info-h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 24px;
  color: var(--white);
}
.method-info-p {
  font-size: clamp(14px, 1.3vw, 16.5px);
  line-height: 1.75;
  color: var(--gray-300);
  margin-bottom: 16px;
}
.method-info-p.font-highlight {
  font-weight: 800;
  color: var(--white);
  border-left: 3px solid var(--white);
  padding-left: 12px;
}

/* ──────────────────────────────────────────────────────────
   HTML/CSS Device Mockups (노트북, 모바일, 모니터)
   ────────────────────────────────────────────────────────── */

/* 1. LAPTOP MOCKUP */
.device-mockup.laptop {
  width: 290px;
  position: relative;
  perspective: 1000px;
}
.laptop-screen {
  background: #262626;
  border-radius: 12px 12px 0 0;
  padding: 6px;
  border: 2px solid #404040;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
}
.laptop-keyboard {
  height: 10px;
  background: #404040;
  border-radius: 0 0 8px 8px;
  border-bottom: 4px solid #1f1f1f;
  position: relative;
}
.laptop-keyboard::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 4px;
  background: #171717;
  border-radius: 0 0 4px 4px;
}

/* 2. MOBILE MOCKUP */
.device-mockup.mobile {
  width: 155px;
  background: #000;
  border-radius: 28px;
  padding: 8px;
  border: 3px solid #262626;
  box-shadow: 0 16px 32px rgba(0,0,0,0.4);
  position: relative;
}
.mobile-notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 12px;
  background: #000;
  border-radius: 0 0 6px 6px;
  z-index: 10;
}
.mobile-screen {
  background: #171717;
  border-radius: 22px;
  overflow: hidden;
  height: 250px;
  position: relative;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 3. MONITOR MOCKUP */
.device-mockup.monitor {
  width: 260px;
  position: relative;
}
.monitor-screen {
  background: #1e1e1e;
  border: 8px solid #2d2d2d;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.monitor-stand {
  width: 45px;
  height: 35px;
  background: #3d3d3d;
  margin: 0 auto;
  position: relative;
  z-index: -1;
}
.monitor-base {
  width: 110px;
  height: 6px;
  background: #2d2d2d;
  border-radius: 3px 3px 0 0;
  margin: 0 auto;
}

/* 4. SEO APP MOCKUP (다크 테마 통계툴) */
.seo-app-mockup {
  width: 100%;
  max-width: 320px;
  background: #1e1e2f;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
  font-family: monospace;
}
.app-header {
  background: #151522;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.app-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.app-dot.red { background: #ef4444; }
.app-dot.yellow { background: #eab308; }
.app-dot.green { background: #22c55e; }
.app-title {
  font-size: 11px; color: #8892b0; margin-left: 8px;
}
.app-body {
  padding: 16px;
  color: #c7d1f4;
}
.app-stat-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.app-stat-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 8px 10px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-lbl { font-size: 9px; color: #8892b0; }
.stat-val { font-size: 13px; font-weight: 700; }
.text-blue { color: #5ccfe6; }
.text-green { color: #a6e22e; }
.text-yellow { color: #fd971f; }
.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.app-table th {
  text-align: left;
  padding: 6px 4px;
  color: #8892b0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.app-table td {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* ──────────────────────────────────────────────────────────
   GUI Mockups (블로그 쓰기 창, 모바일 AI 검색창 모사)
   ────────────────────────────────────────────────────────── */

/* Naver Editor GUI */
.naver-editor-mockup {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  height: 160px;
  font-family: sans-serif;
  color: #333;
}
.ne-header {
  background: #1fbf47;
  color: #fff;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
}
.ne-btns {
  display: flex; gap: 4px;
}
.ne-btn {
  background: rgba(255,255,255,0.2);
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.ne-btn.submit {
  background: #fff; color: #1fbf47;
}
.ne-toolbar {
  background: #f1f3f5;
  border-bottom: 1px solid #dee2e6;
  padding: 4px 10px;
  font-size: 8px;
  display: flex;
  gap: 8px;
  color: #868e96;
}
.ne-content {
  padding: 10px;
  flex-grow: 1;
}
.ne-post-title {
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 4px;
  color: #000;
}
.ne-post-body {
  font-size: 8px;
  line-height: 1.4;
  color: #495057;
}

/* Naver Mobile AI GUI */
.naver-ai-mockup {
  background: #f4f6fa;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-family: sans-serif;
  box-sizing: border-box;
  border-radius: 22px;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
.na-search-bar {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #1fbf47;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.na-n-logo {
  color: #1fbf47; font-weight: 900; font-size: 12px;
}
.na-input {
  font-size: 9px; color: #888;
}
.na-glass { font-size: 9px; }
.na-ai-box {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  margin-bottom: 8px;
}
.na-ai-title {
  font-size: 9px; font-weight: 800; color: #0284c7; margin-bottom: 4px;
}
.na-ai-desc {
  font-size: 7.5px; line-height: 1.4; color: #334155; margin: 0;
}
.na-sources {
  display: flex; flex-direction: column; gap: 4px;
}
.na-source-item {
  background: #e0f2fe;
  color: #0369a1;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 7px;
  font-weight: 700;
}

/* Naver Editor GUI */
.naver-editor-mockup {
  background: #fff;
  height: 150px;
  font-family: 'Noto Sans KR', sans-serif;
  color: #333;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ne-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  box-sizing: border-box;
}
.ne-logo {
  font-size: 9px;
  font-weight: 800;
  color: #03c75a;
}
.ne-logo i {
  font-weight: 400;
  font-style: italic;
  color: #475569;
}
.ne-actions {
  display: flex;
  gap: 6px;
}
.ne-btn-temp, .ne-btn-publish {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.ne-btn-temp {
  background: #fff;
  border: 1px solid #cbd5e1;
  color: #475569;
}
.ne-btn-publish {
  background: #03c75a;
  border: 1px solid #03c75a;
  color: #fff;
}
.ne-body {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}
.ne-title-field {
  font-size: 9.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
  border-left: 2.5px solid #03c75a;
  padding-left: 6px;
  line-height: 1.2;
  text-align: left;
}
.ne-divider {
  border: 0;
  border-top: 1px dashed #e2e8f0;
  margin: 4px 0;
}
.ne-content-field {
  font-size: 7.5px;
  line-height: 1.4;
  color: #334155;
  word-break: break-all;
  white-space: pre-wrap;
  flex: 1;
  overflow: hidden;
  text-align: left;
}

/* ──────────────────────────────────────────────────────────
   Section 5: Clico형 맞춤 솔루션 개편 CSS 스타일링
   ────────────────────────────────────────────────────────── */
.solution-container {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 48px;
  margin-top: 16px;
  align-items: center;
}
.solution-tabs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.solution-tab-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  box-shadow: none;
}
.solution-tab-item:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 2px 2px 0px #000000;
}
.solution-tab-item.active {
  background: #a3e635; /* Clico 특유의 밝은 형광 연두 */
  border-color: #000000;
  box-shadow: 4px 4px 0px #000000;
}
.tab-item-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1;
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 0px #000000;
  color: #000000 !important;
}
.tab-item-content {
  flex-grow: 1;
  overflow: hidden;
}
.tab-item-title {
  font-size: clamp(16px, 1.8vw, 19.5px);
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  transition: color 0.3s;
}
.solution-tab-item.active .tab-item-title {
  color: #000000;
}
.tab-item-desc {
  font-size: clamp(12.5px, 1.2vw, 14.5px);
  line-height: 1.55;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.solution-tab-item.active .tab-item-desc {
  color: #334155;
}

/* 스마트폰 데모 목업 */
.solution-mobile-mockup {
  background: #000000;
  border: 12px solid #1e293b; /* 실버/메탈 베젤 */
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0px 24px 48px rgba(0,0,0,0.45), 5px 5px 0px #000000;
  width: 380px;
  height: 640px;
  margin: 0 auto;
  position: relative;
}
.mobile-phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 18px;
  background: #000000;
  border-radius: 0 0 12px 12px;
  z-index: 120; /* 상태바 위에 표시 */
}
.mobile-phone-screen {
  position: relative;
  height: 100%;
  background: #FAF8F5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mobile-phone-status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #FAF8F5;
  border-bottom: 1.5px solid rgba(0,0,0,0.06);
  padding: 16px 18px 4px; /* 노치 아래 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  z-index: 110;
}
.status-icons {
  display: flex;
  gap: 4px;
  font-size: 11px;
}
.mobile-phone-home-indicator {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #1e293b;
  border-radius: 2px;
  z-index: 100;
}

.solution-mockup-media {
  position: absolute;
  inset: 0;
  padding-top: 40px; /* 노치/상태바 영역 침범 방지 */
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.solution-mockup-media.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* ── 스마트폰 화면 최적화 오버라이드 ── */

/* 1) 카카오톡 대화방 최적화 */
.sim-chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sim-chat-body {
  padding: 12px !important;
  gap: 8px !important;
  flex: 1;
  overflow-y: auto;
}
.sim-chat-notice {
  font-size: 10px !important;
  padding: 4px 10px !important;
  margin-bottom: 4px !important;
}
.chat-msg {
  max-width: 90% !important;
}
.msg-bubble {
  padding: 10px 12px !important;
  font-size: 12.5px !important;
}
.msg-images-grid {
  gap: 6px !important;
  margin-top: 6px !important;
}
.msg-images-grid img {
  height: 60px !important;
}
.sim-chat-form {
  padding: 10px 12px !important;
  gap: 6px !important;
  background: #fff;
  border-top: 1.5px solid #000;
}
.chat-input-row {
  gap: 8px !important;
}
.chat-file-btn, .chat-submit-btn {
  width: 34px !important;
  height: 34px !important;
}
.chat-input-row input {
  height: 34px !important;
  font-size: 12.5px !important;
}

/* 2) 키워드 표 -> 모바일 리스트 Grid 카드화 */
.solution-mobile-mockup .seo-table-wrap {
  border: none !important;
  overflow: visible !important;
}
.solution-mobile-mockup .seo-table thead {
  display: none !important;
}
.solution-mobile-mockup .seo-table tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.solution-mobile-mockup .seo-table tr {
  display: grid !important;
  grid-template-columns: 1fr auto !important; /* 좌측: 키워드/검색량, 우측: 배지/타겟 */
  grid-template-rows: auto auto !important;
  gap: 6px 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #000000 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-shadow: 2px 2px 0px #000000 !important;
}
.solution-mobile-mockup .seo-table td {
  border: none !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}
.solution-mobile-mockup .seo-table td:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  color: #0f172a !important;
}
.solution-mobile-mockup .seo-table td:nth-child(3) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}
.solution-mobile-mockup .seo-table td:nth-child(2) {
  grid-column: 1 !important;
  grid-row: 2 !important;
  color: #64748b !important;
  font-weight: 600 !important;
}
.solution-mobile-mockup .seo-table td:nth-child(4) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  font-size: 11px !important;
  color: #059669 !important;
  font-weight: 700 !important;
}
.solution-mobile-mockup .vol-bar {
  display: none !important;
}
.seo-expert-card {
  padding: 12px !important;
  margin-top: 6px !important;
  border: 1.5px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 #000 !important;
}
.expert-desc {
  font-size: 11.5px !important;
  line-height: 1.55 !important;
}
.seo-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 3) 종합 대시보드 3열 -> 1열 변경 */
.solution-mobile-mockup .ops-stats-grid {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 12px 14px !important;
}
.solution-mobile-mockup .ops-stat-box {
  padding: 10px 12px !important;
  box-shadow: 2px 2px 0px #000000 !important;
}
.solution-mobile-mockup .sim-ops-body {
  padding: 12px !important;
  gap: 8px !important;
}
.solution-mobile-mockup .feed-item {
  padding: 8px 10px !important;
}
.solution-mobile-mockup .feed-content {
  font-size: 11px !important;
}
.sim-ops-form {
  padding: 10px !important;
  gap: 6px !important;
}
.sim-ops-form input {
  height: 34px !important;
  font-size: 12px !important;
}
.ops-submit-btn {
  height: 34px !important;
  font-size: 12px !important;
}

/* 4) 네이버 플레이스 정보 센터 */
.solution-mobile-mockup .place-title-row {
  flex-direction: column !important;
  gap: 8px !important;
}
.solution-mobile-mockup .place-stars-box {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px !important;
}
.solution-mobile-mockup .sim-place-body {
  padding: 12px !important;
  gap: 8px !important;
}
.solution-mobile-mockup .place-review-card {
  padding: 8px 10px !important;
}
.solution-mobile-mockup .rev-text {
  font-size: 11px !important;
}
.sim-place-form {
  padding: 10px !important;
}
.sim-place-form input {
  height: 34px !important;
  font-size: 11.5px !important;
}
.place-submit-btn {
  height: 34px !important;
  font-size: 11.5px !important;
}
.solution-mobile-mockup .place-form-top {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.solution-mobile-mockup .place-form-hint {
  font-size: 10px !important;
  align-self: flex-end !important;
  color: #64748b !important;
}

/* ──────────────────────────────────────────────────────────
   반응형 모바일 미디어 쿼리 오버라이드 (768px 이하)
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section {
    min-height: auto !important;
    padding: 40px 0 !important;
  }
  .trend-inner, .method-inner {
    padding: 10px 16px;
  }
  .trend-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .trend-card {
    padding: 24px;
  }
  .method-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .method-visual-panel, .method-visual-monitor {
    min-height: 200px;
    padding: 16px;
  }
  .solution-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .solution-tab-item {
    padding: 16px;
    gap: 12px;
  }
}

/* ──────────────────────────────────────────────────────────
   인터랙티브 시뮬레이터 전용 스타일링 (바닐라 포팅 - 개선됨)
   ────────────────────────────────────────────────────────── */

/* 1. 공통 및 브라우저 콘텐트 조정 */
.mockup-browser-content {
  position: relative !important;
  aspect-ratio: auto !important;
  height: 480px !important;
  background: #fdfbf7 !important;
}
.solution-mockup-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
  z-index: 1;
}
.solution-mockup-media.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* 2. 시뮬레이터 1: 카카오톡 스타일 */
.sim-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FAF8F5;
  font-family: 'Sora', 'Inter', sans-serif;
}
.sim-chat-header {
  background: #FFE033;
  padding: 14px 18px;
  border-bottom: 1.5px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 850;
  font-size: 14.5px;
  color: #000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.sim-chat-status {
  font-size: 12.5px;
  color: #16a34a;
}
.sim-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sim-chat-notice {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  padding: 6px 14px;
  border-radius: 14px;
  font-size: 12px;
  color: #555;
  margin: 0 auto;
  max-width: max-content;
}
.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}
.chat-msg.client {
  align-self: flex-end;
  align-items: flex-end;
}
.chat-msg.agency {
  align-self: flex-start;
  align-items: flex-start;
}
.msg-sender {
  font-size: 11px;
  color: #777;
  margin-bottom: 4px;
  font-weight: 700;
}
.msg-bubble-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-msg.client .msg-bubble-wrap {
  flex-direction: row-reverse;
}
.msg-bubble {
  background: #fff;
  border: 1.5px solid #000;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #000;
  box-shadow: 2px 2px 0px #000;
}
.chat-msg.client .msg-bubble {
  border-top-right-radius: 0;
}
.chat-msg.agency .msg-bubble {
  background: #E1FD4A;
  border-top-left-radius: 0;
}
.msg-bubble.highlight {
  background: #E1FD4A;
  font-weight: 700;
  border-color: #000;
  white-space: pre-line;
}
.msg-time {
  font-size: 9.5px;
  color: #888;
  white-space: nowrap;
}
.msg-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.msg-images-grid img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid #000;
}
.sim-chat-form {
  border-top: 1.5px solid #000;
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #f1f5f9;
  border: 1.5px solid #000;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  transition: transform 0.1s;
}
.chat-file-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #000;
}
.chat-file-btn svg {
  color: #334155;
}
.chat-input-row input {
  flex: 1;
  height: 38px;
  border: 1.5px solid #000;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13.5px;
  outline: none;
  background: #f8fafc;
}
.chat-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #E1FD4A;
  border: 1.5px solid #000;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  transition: transform 0.1s;
}
.chat-submit-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #000;
}
.chat-preview-container {
  display: flex;
  gap: 10px;
  padding: 8px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  overflow-x: auto;
}
.chat-preview-item {
  position: relative;
  width: 48px;
  height: 48px;
}
.chat-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid #000;
}
.chat-preview-del {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ef4444;
  color: #fff;
  border: 1.5px solid #000;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 3. 시뮬레이터 2: 밝은 분석 테이블 스타일 */
.sim-seo-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FAF8F5;
  color: #1e293b;
  font-family: 'Sora', 'Inter', sans-serif;
}
.sim-seo-header {
  background: #f1f5f9;
  padding: 12px 18px;
  border-bottom: 1.5px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-family: monospace;
  color: #475569;
  font-weight: 600;
}
.seo-engine-title {
  color: #0f172a;
  font-weight: 800;
}
.seo-engine-api {
  color: #059669;
}
.sim-seo-toolbar {
  padding: 14px 18px;
  background: rgba(241, 245, 249, 0.6);
  border-bottom: 1.5px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.seo-form {
  flex: 1;
  display: flex;
  gap: 10px;
}
.seo-input-wrap {
  position: relative;
  flex: 1;
}
.seo-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 12px;
  color: #64748b;
}
.seo-input-wrap input {
  width: 100%;
  height: 38px;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding-left: 36px;
  padding-right: 14px;
  font-size: 13.5px;
  color: #0f172a;
  outline: none;
}
.seo-input-wrap input:focus {
  border-color: #03C75A;
}
.seo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  background: #E1FD4A;
  color: #020617;
  font-weight: 800;
  border: 1.5px solid #000;
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  font-size: 13px;
  transition: transform 0.1s;
}
.seo-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #000;
}
.seo-header-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
.seo-sync-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #475569;
}
.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}
.sim-seo-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.seo-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #475569;
}
.text-highlight {
  color: #059669;
  font-weight: 800;
}
.seo-table-wrap {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.seo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.seo-table th {
  background: #f8fafc;
  padding: 12px;
  color: #475569;
  font-weight: 700;
  text-align: left;
  border-bottom: 1.5px solid #e2e8f0;
}
.seo-table td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}
.keyword-cell {
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  transition: color 0.15s ease;
}
.keyword-cell:hover {
  color: #059669;
  text-decoration: underline;
}
.keyword-cell .hash {
  color: #059669;
  margin-right: 4px;
}
.vol-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vol-bar {
  width: 100px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.vol-bar-inner {
  height: 100%;
  background: #3b82f6;
  border-radius: 3px;
}
.badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 10.5px;
  border: 1.5px solid transparent;
}
.badge.diff-easy {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.25);
}
.badge.diff-normal {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.25);
}
.badge.diff-hard {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.25);
}
.target-cell {
  text-align: right;
  color: #475569;
  font-weight: 600;
}
.seo-expert-card {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.expert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #1d4ed8;
  font-size: 13.5px;
}
.expert-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: #1e40af;
}
.badge-mini-green {
  background: #d1fae5;
  color: #065f46;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
}

/* 4. 시뮬레이터 3: 종합 대시보드 스타일 */
.sim-ops-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f8fafc;
  color: #1e293b;
  font-family: 'Sora', 'Inter', sans-serif;
}
.sim-ops-header {
  background: #fff;
  border-bottom: 1.5px solid rgba(0,0,0,0.1);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ops-title {
  font-weight: 900;
  font-size: 14px;
  color: #0f172a;
}
.ops-sync-badge {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  font-weight: 800;
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 12px;
}
.ops-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1.5px solid #e2e8f0;
}
.ops-stat-box {
  background: #f8fafc;
  border: 1.5px solid #000;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 2px 2px 0px #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ops-stat-box.flex-row {
  flex-direction: row;
  align-items: center;
}
.stat-lbl-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #64748b;
  font-weight: 700;
}
.stat-lbl-row .bold-text {
  color: #0f172a;
  font-weight: 800;
}
.stat-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.stat-progress-bar {
  flex: 1;
  height: 10px;
  background: #e2e8f0;
  border: 1.5px solid #000;
  border-radius: 5px;
  overflow: hidden;
}
.stat-progress-inner {
  height: 100%;
  background: #E1FD4A;
  border-radius: 5px;
}
.progress-pct {
  font-size: 11.5px;
  font-weight: 900;
  color: #0f172a;
}
.stat-sub {
  font-size: 10.5px;
  color: #64748b;
  display: block;
  font-weight: 700;
}
.stat-main {
  font-size: 13.5px;
  font-weight: 900;
  color: #0f172a;
  margin-top: 4px;
  display: block;
}
.stat-main.text-yellow {
  color: #ca8a04;
}
.stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #000;
}
.stat-icon.green-icon {
  background: #d1fae5;
  color: #059669;
  border-color: #059669;
}
.stat-icon.yellow-icon {
  background: #fef3c7;
  color: #d97706;
  border-color: #d97706;
}
.sim-ops-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.ops-feed-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 850;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.ops-feed-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-item {
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0px #000;
}
.feed-item.client {
  background: #fff;
  border-left: 4px solid #FFE033;
}
.feed-item.agency {
  background: rgba(225, 253, 74, 0.15);
  border-left: 4px solid #a3e635;
}
.feed-header {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 800;
  margin-bottom: 6px;
}
.feed-author {
  color: #0f172a;
}
.feed-time {
  color: #94a3b8;
  font-weight: 500;
}
.feed-content {
  font-size: 13px;
  line-height: 1.6;
  color: #334155;
}
.sim-ops-form {
  padding: 12px 18px;
  background: #fff;
  border-top: 1.5px solid #000;
  display: flex;
  gap: 10px;
}
.sim-ops-form input {
  flex: 1;
  height: 38px;
  border: 1.5px solid #000;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13.5px;
  outline: none;
  background: #f8fafc;
}
.ops-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  background: #0f172a;
  color: #fff;
  font-weight: 800;
  border: 1.5px solid #000;
  border-radius: 8px;
  padding: 0 18px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  font-size: 13px;
  transition: transform 0.1s;
}
.ops-submit-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #000;
}

/* 5. 시뮬레이터 4: 네이버 플레이스 스타일 */
.sim-place-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FAF8F5;
  color: #1e293b;
  font-family: 'Sora', 'Inter', sans-serif;
}
.sim-place-header {
  background: #03C75A;
  color: #fff;
  padding: 12px 18px;
  border-bottom: 1.5px solid #000;
  display: flex;
  align-items: center;
  gap: 8px;
}
.naver-logo {
  width: 22px;
  height: 22px;
  background: #fff;
  color: #03C75A;
  font-weight: 900;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.place-title {
  font-weight: 850;
  font-size: 14px;
  flex: 1;
}
.place-badge {
  background: rgba(255,255,255,0.2);
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
}
.sim-place-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.place-stats-card {
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 2px 2px 0px #000;
}
.place-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.place-sub {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 800;
  text-transform: uppercase;
}
.place-main-name {
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  margin-top: 3px;
}
.place-main-name .loc-text {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-left: 8px;
}
.place-stars-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1.5px solid #000;
  border-radius: 10px;
  padding: 8px 12px;
}
.stars-val-wrap {
  display: flex;
  flex-direction: column;
}
.stars-val {
  font-size: 15px;
  font-weight: 950;
  color: #0f172a;
  line-height: 1.1;
}
.stars-max {
  font-size: 10.5px;
  color: #94a3b8;
}
.reviews-count {
  font-size: 9.5px;
  color: #64748b;
  margin-top: 2px;
}
.place-tags-row {
  border-top: 1.5px solid #f1f5f9;
  margin-top: 12px;
  padding-top: 12px;
}
.tags-lbl {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 800;
  display: block;
  margin-bottom: 8px;
}
.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-badge {
  font-size: 11px;
  padding: 5px 12px;
  border: 1.5px solid #000;
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
  color: #334155;
  box-shadow: 1px 1px 0px #000;
}
.tag-badge.active {
  background: #E1FD4A;
}
.tag-badge strong {
  font-weight: 900;
  color: #555;
  margin-left: 4px;
}
.place-review-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-header-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 850;
  color: #475569;
}
.verified-badge {
  color: #059669;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
}
.place-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.place-review-card {
  background: #fff;
  border: 1.5px solid #000;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 2px 2px 0px #000;
}
.rev-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.rev-user-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1.5px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
}
.rev-user-info {
  flex: 1;
}
.user-name {
  font-size: 12px;
  font-weight: 900;
  display: block;
}
.user-stars {
  display: flex;
  gap: 1px;
}
.star-mini {
  font-size: 10.5px;
  color: #e2e8f0;
}
.star-mini.filled {
  color: #f59e0b;
}
.rev-date {
  font-size: 10.5px;
  color: #94a3b8;
}
.rev-text {
  font-size: 13px;
  line-height: 1.6;
  color: #334155;
}
.sim-place-form {
  padding: 12px 18px;
  background: #fff;
  border-top: 1.5px solid #000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.place-success-toast {
  position: absolute;
  top: -42px;
  left: 18px;
  right: 18px;
  background: #ecfdf5;
  border: 1.5px solid #10b981;
  color: #065f46;
  font-size: 11px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 800;
  animation: slideUpPlace 0.3s forwards;
  z-index: 10;
}
.place-form-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.place-score-select {
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-lbl {
  font-size: 12px;
  font-weight: 800;
  color: #334155;
}
.score-stars-row {
  display: flex;
  gap: 3px;
}
.btn-star {
  background: none;
  border: none;
  font-size: 18px;
  color: #cbd5e1;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.btn-star.filled {
  color: #f59e0b;
}
.place-form-hint {
  font-size: 10.5px;
  color: #94a3b8;
}
.place-form-input-row {
  display: flex;
  gap: 10px;
}
.place-form-input-row input {
  flex: 1;
  height: 38px;
  border: 1.5px solid #000;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13.5px;
  outline: none;
  background: #f8fafc;
}
.place-submit-btn {
  height: 38px;
  background: #03C75A;
  color: #fff;
  font-weight: 800;
  border: 1.5px solid #000;
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
  box-shadow: 2px 2px 0px #000;
  font-size: 13px;
  transition: transform 0.1s;
}
.place-submit-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px #000;
}

/* 로딩 스피너 애니메이션 */
@keyframes spin-crawling {
  to { transform: rotate(360deg); }
}
.spinner-crawling {
  width: 28px;
  height: 28px;
  border: 3.5px solid rgba(3, 199, 90, 0.2);
  border-top-color: #03C75A;
  border-radius: 50%;
  animation: spin-crawling 0.8s linear infinite;
}
.seo-loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 14px;
}
.seo-loading-text {
  font-size: 13px;
  color: #475569;
  font-family: monospace;
  font-weight: 600;
}
.typing-bubble {
  align-self: flex-start;
  background: rgba(225, 253, 74, 0.4);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-style: italic;
  color: #475569;
  border: 1.5px dashed #000;
}

/* ── Section 3 & 4 Text Reveal Animations ── */
.reveal-text-fade {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.section.active .reveal-text-fade {
  opacity: 1;
  transform: translateY(0);
}

/* Section 3 Text Delays */
.section.active#section-3 .trend-header .section-label {
  transition-delay: 0.15s;
}
.section.active#section-3 .trend-header .trend-title {
  transition-delay: 0.25s;
}
.section.active#section-3 .trend-grid .trend-card:nth-child(1) .trend-card-h3 {
  transition-delay: 0.45s;
}
.section.active#section-3 .trend-grid .trend-card:nth-child(1) .trend-card-p {
  transition-delay: 0.55s;
}
.section.active#section-3 .trend-grid .trend-card:nth-child(2) .trend-card-h3 {
  transition-delay: 0.6s;
}
.section.active#section-3 .trend-grid .trend-card:nth-child(2) .trend-card-p {
  transition-delay: 0.7s;
}

/* Section 4 Text Delays */
.section.active#section-4 .method-header .section-label {
  transition-delay: 0.15s;
}
.section.active#section-4 .method-header .method-title {
  transition-delay: 0.25s;
}
.section.active#section-4 .method-info-panel .method-info-h3 {
  transition-delay: 0.65s;
}
.section.active#section-4 .method-info-panel .method-info-p:nth-of-type(1) {
  transition-delay: 0.75s;
}
.section.active#section-4 .method-info-panel .method-info-p:nth-of-type(2) {
  transition-delay: 0.85s;
}
.section.active#section-4 .method-info-panel .method-info-p:nth-of-type(3) {
  transition-delay: 0.95s;
}

/* ──────────────────────────────────────────────────────────
   모바일 최적화 (Mobile Optimization Overrides) - 768px 이하
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 0. 풀페이지 레이아웃 해제 및 모바일용 세로 스크롤 활성화 */
  html, body {
    overflow: auto !important;
    height: auto !important;
  }
  #scroll-container {
    height: auto !important;
    overflow: visible !important;
  }
  .section {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: auto !important;
    padding: 60px 16px !important;
    pointer-events: all !important;
  }

  /* 0-1. 공통 텍스트 찢어짐 방지 및 크기 보정 */
  .section-title, .section-desc, .logo-brand-name, .hero-tagline, .hero-desc, h1, h2, h3, h4,
  .trend-card-h3, .trend-card-p, .method-info-h3, .method-info-p {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  
  /* Hero Section (Section 0) 텍스트 크기 최적화 */
  #section-0 .logo-brand-name {
    font-size: clamp(32px, 8vw, 44px) !important;
    line-height: 1.25 !important;
    letter-spacing: -1px !important;
  }
  #section-0 .hero-tagline {
    font-size: clamp(13px, 3.5vw, 16px) !important;
    letter-spacing: 2px !important;
    margin-top: 12px !important;
    margin-bottom: 18px !important;
  }
  #section-0 {
    padding-top: 48px !important;
  }
  #section-0 .hero-container {
    padding: 48px 20px 20px !important;
    justify-content: flex-start !important;
  }
  .logo-brand-name {
    margin-bottom: 8px !important;
  }
  #section-0 .hero-desc {
    font-size: clamp(13.5px, 3.5vw, 15px) !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }
  .hero-cta-group {
    margin-top: 16px !important;
  }
  
  /* Section 0 카드 그리드 모바일 2열화 및 크기 축소 (한줄에 2개씩 노출) */
  .hero-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 16px !important;
    margin-top: 20px !important;
  }
  .hero-card-item {
    height: 95px !important;
    min-height: 95px !important;
    padding: 8px 10px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .hero-card-item .card-label {
    font-size: clamp(11px, 3vw, 12px) !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
  }
  .hero-card-item .card-num {
    font-size: 8.5px !important;
  }
  .hero-card-item .card-sub {
    font-size: 8px !important;
  }
  .hero-card-item .card-btn-click {
    display: flex !important;
    font-size: 8px !important;
    padding: 1px 4px !important;
  }
  .hero-card-item .card-btn-click svg {
    width: 8px !important;
    height: 8px !important;
  }
  .hero-card-item .card-icon-wrap {
    display: none !important;
  }

  /* 모바일용 상세 설명 드로어(모달) 최적화 */
  .drawer-content {
    padding: 24px 16px 16px !important;
  }
  .drawer-close-btn {
    top: 16px !important;
    right: 16px !important;
    font-size: 24px !important;
  }
  .drawer-header {
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }
  .drawer-title {
    font-size: 20px !important;
  }
  .drawer-body {
    gap: 16px !important;
  }
  .drawer-section-label {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  .drawer-box {
    padding: 12px !important;
    font-size: 13.5px !important;
  }
  .drawer-desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .drawer-timeline {
    margin-top: 8px !important;
  }
  .timeline-step {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .timeline-step .timeline-num {
    left: -8px !important;
  }
  .timeline-text {
    white-space: normal !important;
    word-break: keep-all !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    letter-spacing: -0.02em !important;
    padding: 8px 12px !important;
    margin-left: -4px !important;
  }
  .drawer-footer-grid {
    gap: 8px !important;
    margin-top: 12px !important;
  }
  .drawer-btn-diag, .drawer-btn-consult {
    padding: 10px 4px !important;
    font-size: 12.5px !important;
  }
  
  /* Section 1 (About Us) 텍스트 가독성 최적화 및 로고 숨김 */
  #section-1 .section-title {
    font-size: clamp(24px, 6vw, 30px) !important;
    margin-bottom: 20px !important;
  }
  #section-1 .section-desc {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.7 !important;
  }
  .about-visual {
    display: none !important; /* 모바일에서 소개 섹션의 로고를 완전히 숨김 */
  }

  /* 솔루션 섹션 (Section 5) 모바일 너비 짤림 및 여백 최적화 */
  .services-detail-inner {
    padding: 0 16px !important;
  }
  .tab-item-desc {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
  }
  .process-accordion-item.active {
    transform: scale(1.02) !important;
  }

  /* 1. Section 7 (Our Results) 최적화 */
  .results-grid-new {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 32px !important;
    padding: 0 16px !important;
  }
  .result-card-new {
    height: auto !important;
    min-height: 150px !important;
    padding: 24px 20px !important;
    box-shadow: 5px 5px 0 #0D2421 !important;
    flex-direction: column !important;
  }
  .result-card-num {
    top: 20px !important;
    right: 20px !important;
    font-size: 16px !important;
  }
  .result-number,
  .result-number-wrap {
    font-size: 26px !important;
  }
  .result-card-new:first-child .result-number {
    font-size: 24px !important;
  }
  .result-label {
    font-size: 13px !important;
  }

  /* 2. Section 6 (Process) 최적화 */
  .process-container-new {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 16px !important;
  }
  .process-left {
    gap: 20px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .process-left-title {
    font-size: 24px !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }
  .process-left-title br {
    display: none !important; /* 모바일에서는 가로로 길게 풀어서 표시 */
  }
  .process-tab-nav {
    justify-content: center !important;
    width: 100% !important;
  }
  .tab-nav-progress-bar {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .process-accordion-item .accordion-header {
    padding: 16px 0 !important;
  }
  .process-accordion-item .accordion-header h3 {
    font-size: 16px !important;
  }
  .process-accordion-item .accordion-body p {
    font-size: 13.5px !important;
  }

  /* 3. Section 5 (Solutions - Mockups) 최적화 */
  .solution-container {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }
  .solution-tabs {
    gap: 8px !important;
  }
  .solution-tab-item {
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .tab-item-title {
    font-size: 15px !important;
  }
  .tab-item-desc {
    font-size: 12px !important;
  }
  
  /* 스마트폰 목업 및 내부 시뮬레이터 크기/패딩 조율 */
  .solution-mobile-mockup {
    width: 100% !important;
    max-width: 320px !important;
    height: 540px !important;
    box-shadow: 4px 4px 0px #000000 !important;
    border-width: 8px !important;
    border-radius: 32px !important;
  }
  .mobile-phone-notch {
    width: 90px !important;
    height: 14px !important;
  }
  .mobile-phone-status-bar {
    height: 36px !important;
    padding: 14px 14px 4px !important;
  }
  .solution-mockup-media {
    padding-top: 36px !important;
  }
  
  /* 챗 대화방 최적화 */
  .sim-chat-header {
    padding: 10px 14px !important;
    font-size: 12.5px !important;
  }
  .sim-chat-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
  .sim-chat-body {
    padding: 12px !important;
    gap: 10px !important;
  }
  .msg-bubble {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  .msg-images-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  .sim-place-form {
    padding: 10px !important;
  }
  .place-form-input-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .place-form-input-row input {
    height: 36px !important;
    font-size: 11px !important;
  }
  .place-submit-btn {
    width: 100% !important;
    height: 36px !important;
  }
  .place-score-select {
    font-size: 12px !important;
  }
  
  /* SEO/크롤링 엔진 모니터 최적화 */
  .sim-seo-header {
    padding: 10px 14px !important;
    font-size: 11px !important;
  }
  .sim-seo-toolbar {
    padding: 10px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .seo-form {
    gap: 6px !important;
  }
  .seo-input-wrap input {
    height: 34px !important;
    font-size: 12px !important;
    padding-left: 30px !important;
  }
  .seo-input-wrap svg {
    top: 10px !important;
    left: 10px !important;
  }
  .seo-btn {
    height: 34px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
  }
  .seo-engine-api {
    display: none !important;
  }
  .sim-seo-body {
    padding: 12px !important;
    gap: 10px !important;
  }
  .seo-meta-row {
    font-size: 11px !important;
  }
  .seo-table th, .seo-table td {
    padding: 8px !important;
    font-size: 11px !important;
  }
}

/* GSAP ScrollTrigger 휠 연동을 위한 transition/delay 무력화 */
#section-3 .trend-header,
#section-3 .trend-grid .trend-card,
#section-3 .reveal-text-fade,
#section-4 .method-header,
#section-4 .method-grid .method-visual-panel,
#section-4 .method-grid .method-visual-monitor,
#section-4 .method-grid .method-info-panel,
#section-4 .reveal-text-fade {
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}

/* 맨 위로 (HOME) 버튼 스타일 */
.btn-go-home {
  background: none !important;
  border: 1.5px solid var(--gray-800) !important;
  color: var(--white) !important;
  padding: 8px 20px !important;
  border-radius: 24px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s var(--ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
.btn-go-home:hover {
  background: var(--white) !important;
  color: var(--black) !important;
  border-color: var(--white) !important;
  transform: translateY(-2px) !important;
}
@media (max-width: 768px) {
  .btn-go-home {
    padding: 6px 14px !important;
    font-size: 10px !important;
  }
}

/* 접수 확인 / 수정 모달창 디자인 고도화 (홈페이지 베이지 테마 연동) */
.inq-modal {
  background: var(--beige) !important;
  border: var(--neo-border) !important;
  border-radius: 0px !important; /* 네오 브루탈리즘 스타일을 위한 각진 모서리 */
  box-shadow: var(--neo-shadow) !important;
  padding: 32px !important;
}

.inq-modal h3 {
  font-family: var(--font-heading) !important;
  color: var(--black) !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

.inq-modal p {
  font-family: var(--font-body) !important;
  color: var(--gray-800) !important;
}

.inq-modal .form-input {
  background: #ffffff !important;
  border: var(--neo-border) !important;
  color: var(--black) !important;
  border-radius: 0px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  transition: all 0.2s ease !important;
}

.inq-modal .form-input:focus {
  border-color: var(--black) !important;
  outline: none !important;
  box-shadow: 2px 2px 0px var(--black) !important;
}

.inq-modal .form-input::placeholder {
  color: var(--gray-400) !important;
}

/* 버튼 세련되게 디자인 변경 */
.inq-modal-btns {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

/* 취소 버튼 */
.inq-modal-btns .inq-cancel,
.inq-modal .inq-cancel {
  background: transparent !important;
  color: var(--black) !important;
  border: var(--neo-border) !important;
  border-radius: 0px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
  letter-spacing: 0.5px !important;
}

.inq-modal-btns .inq-cancel:hover,
.inq-modal .inq-cancel:hover {
  background: var(--black) !important;
  color: var(--white) !important;
}

/* 조회 버튼 */
.inq-modal-btns .inq-lookup-submit,
.inq-modal .inq-lookup-submit {
  background: var(--black) !important;
  color: var(--white) !important;
  border: var(--neo-border) !important;
  border-radius: 0px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  transition: all 0.2s var(--ease) !important;
  letter-spacing: 0.5px !important;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15) !important;
}

.inq-modal-btns .inq-lookup-submit:hover,
.inq-modal .inq-lookup-submit:hover {
  background: var(--accent-orange) !important; /* 주황색 포인트 컬러로 피드백 */
  border-color: var(--accent-orange) !important;
  color: var(--white) !important;
}

/* 조회 결과 디자인 수정 */
.inq-lookup-result {
  border-top: 2px solid var(--black) !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
}

.inq-detail-header {
  margin-bottom: 12px !important;
}

.inq-status-badge {
  background: var(--accent-teal) !important;
  color: var(--white) !important;
  border: var(--neo-border) !important;
  border-radius: 0px !important;
  font-weight: 700 !important;
}

.inq-detail-date {
  color: var(--gray-800) !important;
  font-weight: 600 !important;
}

.inq-answer-box {
  background: var(--gray-100) !important;
  border: var(--neo-border) !important;
  border-radius: 0px !important;
}

.inq-answer-header {
  border-bottom: 1px solid var(--gray-200) !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
}

.inq-answer-title {
  color: var(--black) !important;
  font-weight: 800 !important;
}

.inq-answer-date {
  color: var(--gray-800) !important;
}

.inq-answer-content {
  color: var(--black) !important;
  font-weight: 600 !important;
}

.inq-edit-form label {
  color: var(--black) !important;
  font-weight: 700 !important;
}

/* 수정 저장 / 취소 버튼 오버라이드 */
.inq-edit-form #saveEditBtn {
  background: var(--black) !important;
  color: var(--white) !important;
  border: var(--neo-border) !important;
  border-radius: 0px !important;
  font-weight: 700 !important;
}

.inq-edit-form #saveEditBtn:hover {
  background: var(--accent-teal) !important;
  border-color: var(--accent-teal) !important;
}

.inq-edit-form #cancelInqBtn {
  background: transparent !important;
  color: var(--accent-orange) !important;
  border: 2px solid var(--accent-orange) !important;
  border-radius: 0px !important;
  font-weight: 700 !important;
}

.inq-edit-form #cancelInqBtn:hover {
  background: var(--accent-orange) !important;
  color: var(--white) !important;
}

/* 개인정보/이용약관 등의 일반 모달창 디자인 고도화 (홈페이지 베이지 테마 연동) */
.modal-content {
  background: var(--beige) !important;
  border: var(--neo-border) !important;
  border-radius: 0px !important; /* 네오 브루탈리즘 스타일을 위한 각진 모서리 */
  box-shadow: var(--neo-shadow) !important;
  color: var(--black) !important;
  font-family: var(--font-body) !important;
  padding: 32px !important;
}

.modal-content h3 {
  font-family: var(--font-heading) !important;
  color: var(--black) !important;
  font-weight: 800 !important;
  border-bottom: 2px solid var(--black) !important;
  padding-bottom: 12px !important;
  font-size: 20px !important;
}

.modal-body {
  font-family: var(--font-body) !important;
  color: var(--gray-900) !important;
  font-weight: 500 !important;
}

.modal-close {
  color: var(--black) !important;
  font-weight: 700 !important;
  transition: all 0.2s var(--ease) !important;
}

.modal-close:hover {
  color: var(--accent-orange) !important;
  transform: scale(1.1) !important;
}

/* Mobile section rhythm: content-based height with a consistent, moderate gap. */
@media (max-width: 768px) {
  #section-0 {
    min-height: auto !important;
    padding-bottom: 0 !important;
  }

  #section-0 .hero-container {
    height: auto !important;
    padding-bottom: 20px !important;
  }

  #section-1,
  #section-2,
  #section-3,
  #section-4,
  #section-5,
  #section-6,
  #section-7,
  #section-8,
  #section-9,
  #section-10 {
    min-height: auto !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #section-1 .about-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #section-6 .process-accordion-item,
  #section-6 .tab-nav-item {
    cursor: default !important;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  #section-1,
  #section-2,
  #section-3,
  #section-4,
  #section-5,
  #section-6,
  #section-7 {
    padding-top: 16px !important;
    padding-bottom: 0 !important;
  }

  .services-grid-new {
    touch-action: pan-y;
  }

  #section-4 .method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  #section-4 .method-visual-panel,
  #section-4 .method-visual-monitor {
    min-width: 0 !important;
    min-height: 190px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  #section-4 .method-info-panel {
    grid-column: 1 / -1;
    padding: 12px 4px 0 !important;
  }

  #section-4 .device-mockup.monitor {
    width: 100% !important;
    max-width: 260px;
  }

  #section-4 .seo-app-mockup {
    min-width: 0;
  }

  #section-4 .app-header,
  #section-4 .app-body {
    padding: 7px !important;
  }

  #section-4 .app-title {
    font-size: 7px;
    margin-left: 2px;
  }

  #section-4 .app-stat-summary {
    gap: 4px;
    margin-bottom: 8px;
  }

  #section-4 .app-stat-item {
    padding: 5px 4px;
  }

  #section-5 .solution-container {
    padding: 0 !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #section-5 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #section-5 .services-detail-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #section-5 .solution-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #section-5 .solution-tab-item {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 6px 1px !important;
    gap: 3px !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  #section-5 .solution-tab-item.active {
    box-shadow: 2px 2px 0 #000 !important;
  }

  #section-5 .tab-item-icon {
    width: 28px !important;
    height: 28px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  #section-5 .tab-item-icon svg {
    width: 15px;
    height: 15px;
  }

  #section-5 .tab-item-content {
    width: 100%;
    flex-grow: 0;
    text-align: center;
  }

  #section-5 .tab-item-title {
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  #section-5 .tab-item-title::after {
    content: attr(data-mobile-label);
    font-size: 10px;
  }

  #section-5 .tab-item-desc {
    display: none !important;
  }

  #section-5 .solution-mobile-mockup {
    width: min(330px, 100%) !important;
    height: 480px !important;
    border-width: 6px !important;
    border-radius: 28px !important;
  }

  #section-5 .sim-chat-header {
    padding: 8px 10px !important;
    font-size: 11.5px !important;
  }

  #section-5 .sim-chat-status {
    font-size: 10px !important;
  }

  #section-5 .sim-chat-body {
    min-height: 0 !important;
    padding: 8px !important;
    gap: 7px !important;
  }

  #section-5 .sim-chat-notice {
    font-size: 9px !important;
  }

  #section-5 .msg-bubble {
    padding: 7px 9px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  #section-5 .msg-images-grid img {
    height: 52px !important;
  }

  #section-5 .sim-chat-form {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 7px 8px !important;
  }

  #section-5 .chat-file-btn,
  #section-5 .chat-submit-btn,
  #section-5 .chat-input-row input {
    height: 30px !important;
  }

  #section-5 .chat-file-btn,
  #section-5 .chat-submit-btn {
    width: 30px !important;
  }

  /* 운영 현황: 통계는 1 + 2열, 피드와 전송 영역은 충분히 확보 */
  #section-5 .sim-ops-header {
    padding: 9px 10px !important;
    gap: 6px !important;
  }

  #section-5 .ops-title {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  #section-5 .ops-sync-badge {
    padding: 3px 7px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  #section-5 .ops-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  #section-5 .ops-stat-box:first-child {
    grid-column: 1 / -1 !important;
  }

  #section-5 .ops-stat-box {
    min-width: 0 !important;
    padding: 8px 9px !important;
  }

  #section-5 .stat-sub {
    font-size: 9px !important;
  }

  #section-5 .stat-main {
    font-size: 11px !important;
  }

  #section-5 .stat-icon {
    width: 25px !important;
    height: 25px !important;
    flex-shrink: 0 !important;
  }

  #section-5 .sim-ops-body {
    min-height: 0 !important;
    padding: 10px !important;
  }

  #section-5 .feed-header {
    gap: 6px !important;
  }

  #section-5 .feed-time {
    flex-shrink: 0 !important;
    font-size: 9px !important;
  }

  #section-5 .sim-ops-form {
    flex-shrink: 0 !important;
    padding: 8px 9px !important;
    gap: 7px !important;
  }

  #section-5 .sim-ops-form input {
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  #section-5 .ops-submit-btn {
    width: 72px !important;
    height: 36px !important;
    padding: 0 10px !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  #section-5 .ops-submit-btn span {
    display: inline !important;
    color: #fff !important;
    font-size: 11px !important;
  }

  /* 플레이스: 상단 정보 압축, 후기 작성 영역 확대 */
  #section-5 .sim-place-header {
    padding: 9px 10px !important;
  }

  #section-5 .place-title {
    font-size: 12px !important;
  }

  #section-5 .place-badge {
    padding: 3px 7px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  #section-5 .sim-place-body {
    min-height: 0 !important;
    padding: 9px !important;
    gap: 8px !important;
  }

  #section-5 .place-stats-card {
    padding: 10px !important;
  }

  #section-5 .place-title-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #section-5 .place-main-name {
    font-size: 12px !important;
  }

  #section-5 .place-main-name .loc-text {
    display: block !important;
    margin: 2px 0 0 !important;
    font-size: 9px !important;
  }

  #section-5 .place-stars-box {
    width: auto !important;
    flex-shrink: 0 !important;
    padding: 6px 8px !important;
  }

  #section-5 .place-tags-row {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  #section-5 .tag-badge {
    padding: 3px 7px !important;
    font-size: 9px !important;
  }

  #section-5 .sim-place-form {
    flex-shrink: 0 !important;
    padding: 8px 9px !important;
    gap: 7px !important;
  }

  #section-5 .place-form-top {
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  #section-5 .place-form-hint {
    font-size: 8px !important;
  }

  #section-5 .place-form-input-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 76px !important;
    gap: 7px !important;
  }

  #section-5 .place-form-input-row input {
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }

  #section-5 .place-submit-btn {
    width: 76px !important;
    height: 40px !important;
    padding: 0 8px !important;
    color: #fff !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  #section-5 .mobile-phone-notch {
    width: 76px !important;
    height: 12px !important;
  }

  #section-7 .results-inner {
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  #section-7 .results-header {
    margin-bottom: 20px !important;
  }

  #section-7 .results-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding: 0 !important;
  }

  #section-7 .result-card-new {
    width: auto !important;
    height: 132px !important;
    min-height: 132px !important;
    padding: 14px 10px !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0 #0D2421 !important;
  }

  #section-7 .result-card-num {
    top: 12px !important;
    right: 12px !important;
    font-size: 12px !important;
  }

  #section-7 .result-card-body {
    margin-top: 20px !important;
    gap: 3px !important;
  }

  #section-7 .result-number,
  #section-7 .result-number-wrap {
    font-size: 21px !important;
  }

  #section-7 .result-card-new:first-child .result-number {
    font-size: 19px !important;
    transform: none !important;
    letter-spacing: -1px !important;
  }

  #section-7 .result-sub-text {
    font-size: 10px !important;
  }

  #section-7 .result-label {
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  #section-7 .result-card-new::after {
    transform: translateY(calc(var(--zip) * 132px - 2px)) !important;
  }

  #section-6 {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    padding: 16px 0 0 !important;
  }

  .process-container-new {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }

  .process-left {
    gap: 10px !important;
  }

  .process-left-title {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .process-right {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    border-top: 1px solid rgba(13, 36, 33, 0.15) !important;
  }

  .process-accordion-item {
    position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    padding: 16px 0 !important;
    opacity: 0.48 !important;
    visibility: visible !important;
    filter: blur(0.7px) !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: opacity 0.24s ease, transform 0.24s ease, filter 0.24s ease !important;
  }

  .process-accordion-item.active {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: scale(1.025) !important;
    animation: none !important;
  }

  .process-accordion-item .accordion-header {
    padding: 10px 0 14px !important;
    gap: 12px !important;
  }

  .process-accordion-item .accordion-header h3,
  .process-accordion-item h3 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .process-accordion-item.active h3 {
    font-size: 23px !important;
  }

  .process-accordion-item .accordion-body,
  .process-accordion-item.active .accordion-body {
    margin-top: 12px !important;
  }

  .process-accordion-item .accordion-body p,
  .process-accordion-item.active .accordion-body p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  #section-3 .mobile-scroll-reveal.mobile-scroll-reveal,
  #section-4 .mobile-scroll-reveal.mobile-scroll-reveal {
    opacity: 0 !important;
    visibility: visible !important;
    transform: translateY(18px) !important;
    transition: opacity 0.38s ease, transform 0.38s ease !important;
  }

  #section-3 .mobile-scroll-reveal.mobile-in-view,
  #section-4 .mobile-scroll-reveal.mobile-in-view {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* 핵심 서비스 카드 모바일 높이·내부 여백 최적화 */
  #section-2 .services-grid-new {
    height: 390px !important;
    margin-top: 28px !important;
  }

  #section-2 .services-inner .service-card-neo {
    height: 350px !important;
    min-height: 350px !important;
  }

  #section-2 .service-card-neo .card-neo-inner {
    width: min(292px, 100%) !important;
    height: 350px !important;
    min-height: 350px !important;
  }

  #section-2 .service-card-neo .card-neo-front,
  #section-2 .service-card-neo .card-neo-back {
    padding: 24px 20px !important;
  }

  #section-2 .service-card-neo .card-neo-top {
    margin-bottom: 4px !important;
  }

  #section-2 .service-card-neo .card-neo-icon {
    height: 72px !important;
    margin: 8px 0 !important;
    font-size: 32px !important;
  }

  #section-2 .service-card-neo .card-neo-footer h3 {
    margin-bottom: 8px !important;
    font-size: 22px !important;
  }

  #section-2 .service-card-neo .card-neo-footer p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  #section-2 .service-card-neo .card-neo-arrow {
    margin-top: 6px !important;
  }

  #section-2 .card-neo-back-list {
    margin-top: 10px !important;
  }

  #section-2 .card-neo-back-list li {
    margin-bottom: 7px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  #section-2 .card-neo-back-btn {
    min-height: 48px !important;
    padding: 13px 14px !important;
  }

  #section-2 .card-neo-back-btn span {
    font-size: 14px !important;
  }
}

.marquee-blur-left,
.marquee-blur-right {
  display: block !important;
}

@keyframes process-step-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .marquee-blur-left,
  .marquee-blur-right {
    display: none !important;
  }
}