/* VoiceBox Theme Mode Overrides */
[data-theme="voicebox"] .zero-circle-inner {
  border-color: #0A0A0A;
  background: #FAFAFA; /* 기본 흰색 배경 */
}
[data-theme="voicebox"] .section.active .zero-circle-inner {
  background: #0A0A0A;
  transition-delay: 1.2s;
}
[data-theme="voicebox"] .zero-circle-inner::before {
  background: #0A0A0A;
}
[data-theme="voicebox"] .zero-circle-inner::after {
  background: rgba(10, 10, 10, 0.6);
}
[data-theme="voicebox"] .zero-word {
  color: #0A0A0A; /* 기본 검은 글씨 */
}
[data-theme="voicebox"] .section.active .zero-word {
  color: #FAFAFA; /* 차오른 후 흰 글씨 */
}
[data-theme="voicebox"] .zero-percent {
  color: #EF4444;
}

/* Hover Micro-interactions */
.result-gauge:hover .zero-circle-inner {
  transform: scale(1.1);
  border-color: #EF4444;
  background: #501010; /* 호버 시 붉은 계열 배경 */
}
.result-gauge:hover .zero-circle-inner::before {
  background: #EF4444; /* 호버 시 물결이 붉은색으로 변경 */
}
.result-gauge:hover .zero-circle-inner::after {
  background: rgba(239, 68, 68, 0.6);
}

[data-theme="voicebox"] .result-gauge:hover .zero-circle-inner {
  background: #EF4444;
  border-color: #0A0A0A;
}
[data-theme="voicebox"] .result-gauge:hover .zero-circle-inner::before {
  background: #0A0A0A;
}
[data-theme="voicebox"] .result-gauge:hover .zero-circle-inner::after {
  background: rgba(10, 10, 10, 0.6);
}

.result-gauge:hover .zero-word {
  transform: scale(1.05);
}
[data-theme="voicebox"] .result-gauge:hover .zero-word {
  color: #FAFAFA;
}
.result-gauge:hover .zero-percent {
  transform: translateY(-2px) scale(1.1);
  color: #EF4444;
}

/* Wave Animations */
@keyframes waveRise {
  0% {
    bottom: -210px;
  }
  100% {
    bottom: -70px; /* 원을 완전히 가득 채움 */
  }
}

@keyframes waveRiseSub {
  0% {
    bottom: -210px;
  }
  100% {
    bottom: -65px;
  }
}

@keyframes waveRotate {
  0% {
    transform: translate(-50%, 0) rotate(0deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(360deg);
  }
}

@keyframes waveRotateSub {
  0% {
    transform: translate(-50%, 0) rotate(0deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(-360deg);
  }
}

[data-theme="voicebox"] #section-7 .result-zero-kpi .zero-circle-inner,
[data-theme="voicebox"] #section-7.section.active .result-zero-kpi .zero-circle-inner {
  background: #FAFAFA !important;
  border: 3px solid #0A0A0A;
  box-shadow: 4px 4px 0 #E5E5E5, inset 0 0 0 2px #FAFAFA;
  transition-delay: 0s !important;
}

[data-theme="voicebox"] #section-7 .result-zero-kpi .zero-circle-inner::before {
  width: 100%;
  height: 110%;
  inset: auto 0 0;
  left: 0;
  bottom: auto;
  background: #0A0A0A !important;
  border-radius: 0;
  transform: translateY(100%);
  z-index: 1;
}

[data-theme="voicebox"] #section-7 .result-zero-kpi .zero-circle-inner::after {
  display: block;
  width: 150%;
  height: 24px;
  left: -25%;
  top: 100%;
  bottom: auto;
  background: #0A0A0A !important;
  border-radius: 50%;
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  z-index: 2;
}

[data-theme="voicebox"] #section-7.section.active .result-zero-kpi .zero-circle-inner::before {
  animation: zeroQuickFill 1.75s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards !important;
}

[data-theme="voicebox"] #section-7.section.active .result-zero-kpi .zero-circle-inner::after {
  animation: zeroWaveSurface 1.75s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards !important;
}

[data-theme="voicebox"] #section-7 .result-zero-kpi .zero-word,
[data-theme="voicebox"] #section-7.section.active .result-zero-kpi .zero-word {
  color: #FAFAFA !important;
  mix-blend-mode: difference;
  letter-spacing: 0;
}

@keyframes zeroQuickFill {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes zeroWaveSurface {
  0% { top: 100%; transform: translateX(0) rotate(0deg); }
  28% { transform: translateX(-5px) rotate(-2deg); }
  55% { transform: translateX(5px) rotate(2deg); }
  78% { transform: translateX(-3px) rotate(-1deg); }
  100% { top: -2px; transform: translateX(0) rotate(0deg); }
}


/*  Contact  */
.contact-inner { text-align: center; max-width: 560px; padding: 0 48px; }
.contact-inner .section-title { font-size: 45px; }
.contact-form { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; gap: 14px; }
.form-input {
  flex: 1; padding: 15px 18px;
  background: var(--gray-900); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; color: var(--white); font-size: 15px;
  font-family: var(--font-body); transition: border-color 0.3s; outline: none;
  width: 100%; min-width: 0;
}
.form-input:focus { border-color: rgba(255,255,255,0.25); }
.form-input::placeholder { color: var(--gray-600); }
textarea.form-input { resize: none; height: 110px; }
.contact-info {
  margin-top: 28px; display: flex; justify-content: center; gap: 36px;
}
.contact-info-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--gray-400);
}
.contact-info-item .icon { color: var(--gray-400); }

/* ?�?� Blog Preview ?�?� */
.blog-preview-inner { max-width: 1100px; padding: 0 48px; width: 100%; }
.blog-preview-header { text-align: center; margin-bottom: 36px; }
.blog-preview-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.blog-preview-card {
  background: #ffffff !important; border-radius: 24px !important; overflow: hidden;
  border: 2px solid #0D2421 !important;
  box-shadow: 4px 4px 0px #0D2421 !important;
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.blog-preview-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0px #0D2421 !important;
}
.blog-preview-card-img {
  width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  background: #f1ede4;
  border-bottom: 2px solid #0D2421;
}
.blog-preview-card-img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0.95);
  transition: filter 0.5s, transform 0.6s var(--ease);
}
.blog-preview-card:hover .blog-preview-card-img img {
  filter: brightness(1); transform: scale(1.05);
}
.blog-preview-card-body { padding: 16px 18px; }
.blog-preview-card-title {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  color: var(--black) !important; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}
.blog-preview-card-title .char {
  color: var(--black) !important;
}
.blog-preview-card-excerpt {
  font-size: 12px; color: var(--gray-800) !important; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-preview-card-excerpt .char {
  color: var(--gray-800) !important;
}
.blog-preview-more { text-align: center; margin-top: 32px; }

/* ?�?� Particles ?�?� */
.particles { display: none; }

/* ?�?� Aurora Background ?�?� */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; filter: blur(100px); opacity: 0.85;
}
.aurora-blob {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
.aurora-blob:nth-child(1) {
  width: 60vw; height: 60vw; top: -20%; left: -15%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.1) 40%, transparent 70%);
  animation: auroraMove1 18s ease-in-out infinite alternate;
}
.aurora-blob:nth-child(2) {
  width: 55vw; height: 55vw; bottom: -15%; right: -15%;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 40%, transparent 70%);
  animation: auroraMove2 22s ease-in-out infinite alternate;
}
.aurora-blob:nth-child(3) {
  width: 45vw; height: 45vw; top: 25%; left: 35%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.06) 40%, transparent 70%);
  animation: auroraMove3 15s ease-in-out infinite alternate;
}
.aurora-blob:nth-child(4) {
  width: 50vw; height: 50vw; top: 55%; left: 5%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 40%, transparent 70%);
  animation: auroraMove4 20s ease-in-out infinite alternate;
}
@keyframes auroraMove1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(15vw, 12vh) scale(1.2); }
}
@keyframes auroraMove2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-12vw, -15vh) scale(1.15); }
}
@keyframes auroraMove3 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10vw, 10vh) scale(1.3); }
}
@keyframes auroraMove4 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(12vw, -8vh) scale(1.1); }
}



/* ?? Progress Bar ?? */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--white); z-index: 200;
  transition: width 0.6s var(--ease);
}

/* ── VoiceBox theme custom overrides ── */
[data-theme="voicebox"] .inq-modal {
  background: #FAFAFA !important;
  border: 2px solid #0A0A0A !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[data-theme="voicebox"] .inq-modal h3 {
  color: #0A0A0A !important;
}
[data-theme="voicebox"] .inq-modal p {
  color: #525252 !important;
}
[data-theme="voicebox"] .inq-modal .form-input {
  background: #FAFAFA !important;
  border: 2px solid #D4D4D4 !important;
  color: #0A0A0A !important;
  border-radius: 0 !important;
}
[data-theme="voicebox"] .inq-modal .form-input:focus {
  border-color: #0A0A0A !important;
  box-shadow: 0 0 0 2px #FAFAFA, 0 0 0 4px #0A0A0A !important;
}
[data-theme="voicebox"] .inq-modal-btns .btn-primary,
[data-theme="voicebox"] .inq-modal .btn-primary {
  background: #0A0A0A !important;
  color: #FAFAFA !important;
  border: 2px solid #0A0A0A !important;
  border-radius: 0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-theme="voicebox"] .inq-modal-btns .btn-primary:hover,
[data-theme="voicebox"] .inq-modal .btn-primary:hover {
  background: #EF4444 !important;
  border-color: #EF4444 !important;
  color: #FAFAFA !important;
}
[data-theme="voicebox"] .inq-modal-btns .btn-outline,
[data-theme="voicebox"] .inq-modal .btn-outline {
  background: transparent !important;
  color: #0A0A0A !important;
  border: 2px solid #0A0A0A !important;
  border-radius: 0 !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-theme="voicebox"] .inq-modal-btns .btn-outline:hover,
[data-theme="voicebox"] .inq-modal .btn-outline:hover {
  background: #0A0A0A !important;
  color: #FAFAFA !important;
  border-color: #0A0A0A !important;
}
[data-theme="voicebox"] .inq-edit-form #cancelInqBtn {
  border-color: #EF4444 !important;
  color: #EF4444 !important;
}
[data-theme="voicebox"] .inq-edit-form #cancelInqBtn:hover {
  background: #EF4444 !important;
  color: #FAFAFA !important;
}
[data-theme="voicebox"] .inq-modal-hint {
  color: #EF4444 !important;
  background: #FEF2F2 !important;
  border: 2px solid #EF4444 !important;
  border-radius: 0 !important;
}
[data-theme="voicebox"] .inq-status-badge {
  background: #F0FDF4 !important;
  color: #16A34A !important;
  border: 2px solid #16A34A !important;
  border-radius: 0 !important;
}
[data-theme="voicebox"] .inq-detail-date {
  color: #525252 !important;
}
[data-theme="voicebox"] .inq-edit-form label {
  color: #0A0A0A !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
[data-theme="voicebox"] .inq-answer-box {
  background: #F0FDF4 !important;
  border: 2px solid #16A34A !important;
  border-radius: 0 !important;
}
[data-theme="voicebox"] .inq-answer-title {
  color: #16A34A !important;
}
[data-theme="voicebox"] .inq-answer-date {
  color: #525252 !important;
}
[data-theme="voicebox"] .inq-answer-content {
  color: #0A0A0A !important;
}

/* Theme Panel ?�체???�이??모드 ?�??*/
[data-theme-mode="light"] .theme-panel {
  background: rgba(255,255,255,0.92);
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
}
[data-theme-mode="light"] .theme-panel-header { color: #222; }
[data-theme-mode="light"] .theme-panel-close { color: #888; }
[data-theme-mode="light"] .theme-panel-close:hover { background: rgba(0,0,0,0.06); color: #333; }
[data-theme-mode="light"] .theme-option {
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
  color: #555;
}
[data-theme-mode="light"] .theme-option:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.15);
  color: #222;
}
[data-theme-mode="light"] .theme-option.active {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.25);
  color: #111;
  box-shadow: 0 0 8px rgba(0,0,0,0.06);
}

/* Theme FAB */
[data-theme-mode="light"] .theme-fab {
  background: rgba(0,0,0,0.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
[data-theme-mode="light"] .theme-fab:hover {
  background: rgba(0,0,0,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ?�═??Theme Accent Glows ?�═??*/
.stat-card:hover,
.review-card:hover,
.result-item:hover,
.blog-preview-card:hover {
  box-shadow: 0 4px 20px var(--theme-accent, rgba(255,255,255,0.08));
}
.service-card:hover,
.service-card.is-playing {
  box-shadow: 0 8px 32px var(--theme-accent, rgba(255,255,255,0.12));
}
.about-circle {
  box-shadow: 0 0 60px var(--theme-accent, rgba(255,255,255,0.05));
}

/* ?�═??VoiceBox Theme ??Editorial Magazine Override ?�═??*/

/* -- Global: kill all border-radius -- */
[data-theme="voicebox"] .stat-card,
[data-theme="voicebox"] .service-card,
[data-theme="voicebox"] .result-item,
[data-theme="voicebox"] .review-card,
[data-theme="voicebox"] .faq-item,
[data-theme="voicebox"] .blog-preview-card,
[data-theme="voicebox"] .about-circle,
[data-theme="voicebox"] .about-circle::before,
[data-theme="voicebox"] .about-circle::after,
[data-theme="voicebox"] .step-number,
[data-theme="voicebox"] .form-input,
[data-theme="voicebox"] .btn-primary,
[data-theme="voicebox"] .btn-outline,
[data-theme="voicebox"] .nav-cta,
[data-theme="voicebox"] .kakao-fab,
[data-theme="voicebox"] .service-card-body,
[data-theme="voicebox"] .service-icon {
  border-radius: 0 !important;
}

/* -- Borders: thick, structural, black -- */
[data-theme="voicebox"] .stat-card,
[data-theme="voicebox"] .service-card,
[data-theme="voicebox"] .result-item,
[data-theme="voicebox"] .review-card,
[data-theme="voicebox"] .blog-preview-card,
[data-theme="voicebox"] .faq-item {
  border: 2px solid #E5E5E5;
  box-shadow: none;
}

[data-theme="voicebox"] .stat-card:hover,
[data-theme="voicebox"] .service-card:hover,
[data-theme="voicebox"] .service-card.is-playing,
[data-theme="voicebox"] .result-item:hover,
[data-theme="voicebox"] .review-card:hover,
[data-theme="voicebox"] .blog-preview-card:hover,
[data-theme="voicebox"] .faq-item:hover {
  border-color: #0A0A0A;
  box-shadow: none;
}

/* -- Red top accent on service cards (featured feel) -- */
[data-theme="voicebox"] .service-card {
  background: transparent !important;
  border-width: 1px 0 0 !important;
  border-color: #E5E5E5 !important;
  border-top: 1px solid #E5E5E5;
  opacity: 0;
  pointer-events: none; /* 등장 애니메이션 중 호버 튀는 버그 차단 */
  padding: 48px 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), border-color 0.5s var(--ease) !important;
}
[data-theme="voicebox"] .section.active .service-card {
  pointer-events: auto; /* 등장 완료 후 호버 허용 */
}
[data-theme="voicebox"] .services-grid:hover .service-card.is-revealed:not(:hover) {
  opacity: 0.72 !important;
}
/* 모바일 스크롤 자동재생(.is-playing) 시 비활성 카드 디밍 */
[data-theme="voicebox"] .services-grid:has(.is-playing):not(:hover) .service-card.is-revealed:not(.is-playing) {
  opacity: 0.72 !important;
}
[data-theme="voicebox"] .service-card.is-revealed:hover,
[data-theme="voicebox"] .service-card.is-revealed.is-playing {
  opacity: 1 !important;
  transform: translateY(-4px) !important;
  border-color: #0A0A0A !important;
  box-shadow: none !important;
}
[data-theme="voicebox"] .section.active .service-card {
  pointer-events: none;
}
[data-theme="voicebox"] .section.active .service-card.is-revealed {
  pointer-events: auto;
}
[data-theme="voicebox"] .service-card:not(.is-revealed) .service-card-img,
[data-theme="voicebox"] .service-card:not(.is-revealed) .service-video {
  transform: translate3d(0, 0, 0) !important;
}

/* -- About circle: square, bold border -- */
[data-theme="voicebox"] .about-circle {
  border: 3px solid #0A0A0A !important;
  box-shadow: none;
}
[data-theme="voicebox"] .about-circle::before {
  border: 2px solid rgba(239, 68, 68, 0.45) !important;
}
[data-theme="voicebox"] .about-circle::after {
  border: 2px dashed #999999 !important;
}

/* -- About Text: Title Red Bar & Drop-cap Accent -- */
[data-theme="voicebox"] .about-text .section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3.5px;
  background: #EF4444;
  margin-top: 20px;
}
[data-theme="voicebox"] .about-text .section-desc strong {
  color: #EF4444 !important;
}

/* -- VoiceBox Stat Card Upgrades -- */
[data-theme="voicebox"] .stat-card {
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease) !important;
}
[data-theme="voicebox"] .stat-card:hover {
  border-color: #0A0A0A !important;
  transform: translateY(-6px) !important;
  box-shadow: 6px 6px 0 #0A0A0A !important;
}
[data-theme="voicebox"] .stat-number {
  transition: transform 0.4s var(--ease), color 0.4s var(--ease);
  display: inline-block;
  color: #0A0A0A !important;
}
[data-theme="voicebox"] .stat-card:hover .stat-number {
  transform: scale(1.1);
  color: #EF4444 !important;
}
[data-theme="voicebox"] .stat-label {
  color: #525252 !important;
  font-weight: 600;
}

/* Staggered 3D Pop entrance reveal for Stat Cards */
[data-theme="voicebox"] .about-stats {
  perspective: 1000px;
}
[data-theme="voicebox"] .section.active .stat-card {
  animation: voiceboxStatReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
[data-theme="voicebox"] .section.active .stat-card:nth-child(1) { animation-delay: 0.15s !important; }
[data-theme="voicebox"] .section.active .stat-card:nth-child(2) { animation-delay: 0.3s !important; }
[data-theme="voicebox"] .section.active .stat-card:nth-child(3) { animation-delay: 0.45s !important; }
[data-theme="voicebox"] .section.active .stat-card:nth-child(4) { animation-delay: 0.6s !important; }

@keyframes voiceboxStatReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.92) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* -- Step number: square, bold -- */
/* -- Step number: square, bold -- */
[data-theme="voicebox"] .step-number {
  border: 2px solid #0A0A0A !important;
  background: #FAFAFA !important;
  color: #0A0A0A !important;
}

/* -- Process Step: Hover & Staggered Spring Reveal -- */
[data-theme="voicebox"] .process-step {
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
[data-theme="voicebox"] .process-step:hover {
  transform: translateY(-8px);
}
[data-theme="voicebox"] .process-step h4 {
  transition: color 0.3s var(--ease);
}
[data-theme="voicebox"] .process-step:hover h4 {
  color: #EF4444;
}
[data-theme="voicebox"] .process-step:hover .step-number {
  background: #EF4444 !important;
  color: #FAFAFA !important;
  border-color: #EF4444 !important;
  box-shadow: 6px 6px 0 #0A0A0A !important;
  transform: rotate(-4deg) scale(1.1) !important;
}

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

/* Staggered 3D Origami Flip-Up Reveal */
[data-theme="voicebox"] .section.active .process-step {
  animation: voicebox3DFlipReveal 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}
[data-theme="voicebox"] .section.active .process-step:nth-child(1) { animation-delay: 0.15s !important; }
[data-theme="voicebox"] .section.active .process-step:nth-child(2) { animation-delay: 0.35s !important; }
[data-theme="voicebox"] .section.active .process-step:nth-child(3) { animation-delay: 0.55s !important; }
[data-theme="voicebox"] .section.active .process-step:nth-child(4) { animation-delay: 0.75s !important; }

@keyframes voicebox3DFlipReveal {
  0% {
    opacity: 0;
    transform: rotateX(-90deg) translateY(50px) translateZ(-100px);
    transform-origin: top center;
  }
  50% {
    opacity: 0.8;
    transform: rotateX(15deg) translateY(-8px) translateZ(20px);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) translateY(0) translateZ(0);
  }
}

/* Staggered Number Box Flash & Pop */
[data-theme="voicebox"] .section.active .process-step .step-number {
  animation: voiceboxStepNumberPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
[data-theme="voicebox"] .section.active .process-step:nth-child(1) .step-number { animation-delay: 0.3s; }
[data-theme="voicebox"] .section.active .process-step:nth-child(2) .step-number { animation-delay: 0.5s; }
[data-theme="voicebox"] .section.active .process-step:nth-child(3) .step-number { animation-delay: 0.7s; }
[data-theme="voicebox"] .section.active .process-step:nth-child(4) .step-number { animation-delay: 0.9s; }

@keyframes voiceboxStepNumberPop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-15deg);
    background: #EF4444 !important;
    color: #FAFAFA !important;
    border-color: #EF4444 !important;
  }
  50% {
    transform: scale(1.25) rotate(8deg);
    background: #EF4444 !important;
    color: #FAFAFA !important;
    border-color: #EF4444 !important;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    border-color: #EF4444 !important;
    background: #FAFAFA !important;
    color: #0A0A0A !important;
  }
}

/* ==========================================================================
   Nextec Studio Theme overrides & implementation v1.1.0
   ========================================================================== */

/* 1. Typography & Global */
.font-sora { font-family: 'Sora', sans-serif; font-weight: 800; }
.font-syne { font-family: 'Syne', sans-serif; font-weight: 700; }
.pixel-text {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
  position: relative;
  display: inline-block;
}
.pixel-text::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--accent-orange);
}

/* 2. Mouse Trailer */
.mouse-trailer {
  width: 12px;
  height: 12px;
  background-color: var(--black);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  mix-blend-mode: difference;
  background-color: #fff;
}
.mouse-trailer.hovered {
  width: 56px;
  height: 56px;
  background-color: rgba(255, 255, 255, 0.2);
  mix-blend-mode: normal;
  border: 1px solid var(--black);
}

/* 3. Navigation overriding for Light Theme */
.top-nav {
  background: var(--beige) !important;
  border-bottom: 2px solid var(--black) !important;
  padding: 16px 40px !important;
}
.top-nav .logo-text {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--black) !important;
}
.top-nav .logo-text span {
  color: var(--accent-orange);
}
.nav-links a {
  color: var(--black) !important;
  font-weight: 600;
}
.nav-links a:hover {
  color: var(--accent-orange) !important;
}
.nav-cta {
  background: var(--black) !important;
  color: var(--white) !important;
  border: 2px solid var(--black) !important;
  border-radius: 4px !important;
  box-shadow: 2px 2px 0px var(--black);
}
.nav-cta span {
  color: var(--white) !important;
}
.nav-cta:hover {
  background: var(--accent-orange) !important;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px var(--black);
}

/* ── 모바일 및 태블릿 최적화 고도화 (레이아웃 겹침, 짤림, 줄바꿈 방지) ── */

/* 1. 태블릿 뷰포트 대응 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  #section-1 .about-inner {
    flex-direction: column !important;
  }
  #section-1 .about-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-top: 28px !important;
    width: 100% !important;
  }
  #section-1 .stat-card {
    min-height: auto !important;
    padding: 20px 16px !important;
  }
  .blog-preview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  #section-8 .review-card {
    flex: 0 0 290px !important;
    width: 290px !important;
    min-height: 160px !important;
    padding: 18px 20px !important;
  }
}

body.is-tablet {
  #section-1 .about-inner {
    flex-direction: column !important;
  }
  #section-1 .about-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-top: 28px !important;
    width: 100% !important;
  }
  #section-1 .stat-card {
    min-height: auto !important;
    padding: 20px 16px !important;
  }
  .blog-preview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  #section-8 .review-card {
    flex: 0 0 290px !important;
    width: 290px !important;
    min-height: 160px !important;
    padding: 18px 20px !important;
  }
}

/* 2. 모바일 뷰포트 대응 (768px 이하) */
@media (max-width: 768px) {
  #section-1 .about-inner {
    flex-direction: column !important;
  }
  
  /* 소개 섹션 스탯 카드 3열 수평 정렬 및 크기 축소 (한 줄에 3개 다 나오게 처리) */
  #section-1 .about-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 24px !important;
    width: 100% !important;
  }
  #section-1 .about-stats .stat-card:nth-child(3) {
    grid-column: auto !important;
  }
  #section-1 .stat-card {
    min-height: auto !important;
    padding: 18px 4px 8px 4px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  #section-1 .stat-card::before {
    font-size: 8px !important;
    top: 4px !important;
    right: 6px !important;
  }
  #section-1 .stat-card .stat-number {
    font-size: 24px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }
  #section-1 .stat-card .stat-label {
    font-size: 10px !important;
    white-space: nowrap !important;
    letter-spacing: -0.5px !important;
    margin-top: 4px !important;
  }

  /* 핵심 서비스 헤더 줄바꿈 방지 및 정렬 최적화 */
  .services-header-new {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }
  .services-header-title {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin-top: 8px !important;
  }
  .services-tab-indicator {
    font-size: 13px !important;
    white-space: nowrap !important;
    margin-bottom: 4px !important;
  }

  /* 블로그 카드 섹션 2열 배치 및 모양 복원 */
  .blog-preview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .blog-preview-card {
    border-radius: 16px !important;
  }
  .blog-preview-card-body {
    padding: 10px 12px !important;
  }
  .blog-preview-card-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }
  .blog-preview-card-excerpt {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* 기타 섹션 제목 크기 및 불필요한 줄바꿈 보정 */
  .section-title {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
  }

  /* 고객후기 섹션 카드 크기 축소 및 레이아웃 최적화 */
  #section-8 .faq-review-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  #section-8 .review-card {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-height: 145px !important;
    padding: 14px 16px !important;
  }
  #section-8 .review-card p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
  #section-8 .review-author {
    font-size: 11.5px !important;
  }
  
  /* 반응형 그리드 오버플로우 방어 */
  .services-grid-new,
  .trend-grid,
  .method-grid,
  .solution-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

body.is-mobile {
  .about-inner {
    flex-direction: column !important;
  }
  #section-1 .about-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 24px !important;
    width: 100% !important;
  }
  #section-1 .about-stats .stat-card:nth-child(3) {
    grid-column: auto !important;
  }
  #section-1 .stat-card {
    min-height: auto !important;
    padding: 18px 4px 8px 4px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  #section-1 .stat-card::before {
    font-size: 8px !important;
    top: 4px !important;
    right: 6px !important;
  }
  #section-1 .stat-card .stat-number {
    font-size: 24px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }
  #section-1 .stat-card .stat-label {
    font-size: 10px !important;
    white-space: nowrap !important;
    letter-spacing: -0.5px !important;
    margin-top: 4px !important;
  }
  .services-header-new {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }
  .services-header-title {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin-top: 8px !important;
  }
  .services-tab-indicator {
    font-size: 13px !important;
    white-space: nowrap !important;
    margin-bottom: 4px !important;
  }
  .blog-preview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .blog-preview-card {
    border-radius: 16px !important;
  }
  .blog-preview-card-body {
    padding: 10px 12px !important;
  }
  .blog-preview-card-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }
  .blog-preview-card-excerpt {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .section-title {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
  }
  #section-8 .faq-review-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  #section-8 .review-card {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-height: 145px !important;
    padding: 14px 16px !important;
  }
  #section-8 .review-card p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
  #section-8 .review-author {
    font-size: 11.5px !important;
  }
  
  /* 반응형 그리드 오버플로우 방어 */
  .services-grid-new,
  .trend-grid,
  .method-grid,
  .solution-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* 네비게이션 도트 정렬 보정 */
  .nav-dots {
    right: calc(50% - 195px + 12px) !important;
  }
}

@media (max-width: 768px) {
  /* 모바일 메뉴 버튼: 밝은 내비게이션에서도 항상 보이도록 고정 */
  .top-nav .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 8px !important;
    margin-left: auto !important;
    position: relative !important;
    z-index: 102 !important;
  }

  .top-nav .mobile-menu-btn span {
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0 2px !important;
    background: var(--black) !important;
    border: 1px solid var(--black) !important;
    border-radius: 50% !important;
  }

  .top-nav .nav-links,
  body.is-mobile .top-nav .nav-links {
    top: 0 !important;
    left: auto !important;
    right: -100% !important;
    width: min(76vw, 286px) !important;
    height: 100dvh !important;
    padding: 82px 22px 28px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    background: rgba(248, 243, 236, 0.82) !important;
    border: 0 !important;
    border-left: 1px solid rgba(13, 36, 33, 0.16) !important;
    box-shadow: -12px 0 32px rgba(13, 36, 33, 0.16) !important;
    -webkit-backdrop-filter: blur(20px) saturate(130%) !important;
    backdrop-filter: blur(20px) saturate(130%) !important;
    transition: right 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  .top-nav .nav-links.open,
  body.is-mobile .top-nav .nav-links.open {
    left: auto !important;
    right: 0 !important;
  }

  .top-nav .nav-links li,
  body.is-mobile .top-nav .nav-links li {
    width: 100% !important;
  }

  .top-nav .nav-links a,
  body.is-mobile .top-nav .nav-links a {
    display: block !important;
    width: 100% !important;
    padding: 9px 10px !important;
    box-sizing: border-box !important;
    color: var(--black) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
  }

  .top-nav .nav-links a:hover,
  .top-nav .nav-links a:active {
    color: var(--accent-orange) !important;
    background: rgba(255, 255, 255, 0.58) !important;
  }

  .top-nav .nav-links .nav-cta,
  body.is-mobile .top-nav .nav-links .nav-cta {
    margin-top: 6px !important;
    padding: 11px 12px !important;
    color: #fff !important;
    background: var(--black) !important;
    text-align: center !important;
    font-size: 15px !important;
  }

  .top-nav .nav-links .nav-cta span {
    color: #fff !important;
  }

  .menu-overlay {
    background: rgba(13, 36, 33, 0.22) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
  }

  /* 문의 섹션 이중 여백 제거 */
  #section-10 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #section-10 .contact-inner {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #section-10 .contact-form {
    width: 100% !important;
    padding: 20px 18px !important;
    box-sizing: border-box !important;
  }

  #section-10 .form-row {
    width: 100% !important;
  }

  #section-10 .form-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}