{"id":25,"date":"2026-06-04T02:16:47","date_gmt":"2026-06-04T02:16:47","guid":{"rendered":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/support\/"},"modified":"2026-06-04T09:01:27","modified_gmt":"2026-06-04T09:01:27","slug":"support","status":"publish","type":"page","link":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/support\/","title":{"rendered":"\uace0\uac1d\uc9c0\uc6d0"},"content":{"rendered":"<div class=\"nv-page\">\n<!-- Background Glow Blobs -->\n<div class=\"nv-bg-blob nv-blob-1\"><\/div>\n<div class=\"nv-bg-blob nv-blob-2\"><\/div>\n\n\n<!-- CDN -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\n\n<!-- Cursor Follower -->\n<div class=\"nv-cursor-follower\" id=\"nvCursorFollower\"><\/div>\n\n<style>\n.inside-article,\n.site-content,\n#content,\n#primary,\nmain {\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n}\n\n\/* ========== CSS Custom Properties ========== *\/\n:root {\n  --nv-bg: #0a0a1a;\n  --nv-surface: #111127;\n  --nv-card: #1a1a3e;\n  --nv-primary: #00d4ff;\n  --nv-secondary: #7c3aed;\n  --nv-gradient: linear-gradient(135deg, #00d4ff, #7c3aed);\n  --nv-text: #ffffff;\n  --nv-text-secondary: #94a3b8;\n  --nv-text-muted: #64748b;\n  --nv-border: rgba(255,255,255,0.08);\n  --nv-glow-cyan: rgba(0, 212, 255, 0.3);\n  --nv-glow-purple: rgba(124, 58, 237, 0.3);\n  --font-heading: 'Outfit', 'Inter', sans-serif;\n  --font-body: 'Inter', 'Noto Sans KR', sans-serif;\n}\n\n\n\/* ========== Reset ========== *\/\n*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody { background: var(--nv-bg) !important; color: var(--nv-text); font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }\n\n\n\n\/* Cursor Follower Style *\/\n.nv-cursor-follower {\n  width: 24px;\n  height: 24px;\n  background: radial-gradient(circle, var(--nv-primary) 0%, rgba(124, 58, 237, 0.4) 60%, transparent 100%);\n  border-radius: 50%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 999999;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  mix-blend-mode: screen;\n  filter: blur(2px);\n  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);\n  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n\na { text-decoration: none; color: inherit; }\n\nbutton { border: none; background: none; cursor: pointer; font-family: inherit; }\n\ninput, textarea, select { font-family: inherit; }\n\n\n\/* ========== Hide WP Theme Chrome ========== *\/\n.site-header, .site-footer, .site-info, .main-navigation, .skip-link, .sidebar, .wp-site-blocks > header, .wp-site-blocks > footer { display: none !important; }\n\nbody, html, #page, #content, .site-content, article, .inside-article, .entry-content, .wp-block-post-content, .wp-site-blocks, .site-main, .inside-page-header, .page-header, .site, .site-header, .site-footer { margin: 0 !important; padding: 0 !important; background: #0a0a1a !important; background-color: #0a0a1a !important; }\n\n.inside-article, .entry-content, .wp-block-post-content, #page, #content, .site-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }\n\n\n\/* ========== Scroll Progress ========== *\/\n.nv-scroll-progress {\n  position: fixed; top: 0; left: 0; height: 3px; z-index: 10000;\n  background: var(--nv-gradient);\n  width: 0%; transition: width 0.1s linear;\n  box-shadow: 0 0 10px var(--nv-glow-cyan), 0 0 20px var(--nv-glow-purple);\n}\n\n\n\/* ========== Page Transition ========== *\/\n.nv-page-transition {\n  position: fixed; inset: 0; z-index: 99999;\n  background: var(--nv-bg);\n  transform: scaleX(0); transform-origin: left;\n  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);\n}\n\n.nv-page-transition.active { transform: scaleX(1); }\n\n\n\/* ========== Navigation ========== *\/\n\n\n\n\n\n@keyframes nvLogoPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }\n\n\n\n\n\n\n\n\n\/* Hamburger *\/\n\n\n\n\n\n\n\n\n\n\n\n\n\n\/* ========== Top Button ========== *\/\n.nv-top-btn {\n  position: fixed; bottom: 32px; right: 32px; z-index: 8000;\n  width: 48px; height: 48px; border-radius: 50%;\n  background: var(--nv-card); border: 1px solid var(--nv-border);\n  color: var(--nv-primary); display: flex; align-items: center; justify-content: center;\n  opacity: 0; visibility: hidden; transform: translateY(10px);\n  transition: all 0.4s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n}\n\n.nv-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }\n\n.nv-top-btn:hover { background: var(--nv-primary); color: var(--nv-bg); transform: translateY(-3px); }\n\n\n\/* ========== Footer ========== *\/\n\n\n\n\n\n\n\n\n\n\n\n\n\n\/* ========== Hero Section ========== *\/\n.nv-support-hero {\n  position: relative; min-height: 70vh; display: flex; align-items: center;\n  justify-content: center; text-align: center; overflow: hidden;\n  background: var(--nv-bg); padding: 140px 40px 100px;\n}\n\n.nv-support-hero-bg {\n  position: absolute; inset: 0; overflow: hidden;\n}\n\n.nv-support-hero-bg canvas {\n  position: absolute; inset: 0; width: 100%; height: 100%;\n}\n\n.nv-hero-grid-overlay {\n  position: absolute; inset: 0;\n  background-image:\n    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);\n  background-size: 60px 60px;\n  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);\n  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);\n}\n\n.nv-hero-radial-glow {\n  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n  width: 800px; height: 800px; border-radius: 50%;\n  background: radial-gradient(circle, var(--nv-glow-cyan) 0%, var(--nv-glow-purple) 30%, transparent 70%);\n  opacity: 0.25; filter: blur(60px);\n  animation: heroGlowPulse 6s ease-in-out infinite;\n}\n\n@keyframes heroGlowPulse {\n  0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); }\n  50% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.1); }\n}\n\n.nv-support-hero-content {\n  position: relative; z-index: 2; padding: 0 20px;\n}\n\n.nv-hero-breadcrumb {\n  font-size: 14px; color: var(--nv-text-muted); margin-bottom: 28px;\n  display: flex; align-items: center; justify-content: center; gap: 8px;\n}\n\n.nv-hero-breadcrumb a { color: var(--nv-text-secondary); transition: color 0.3s; }\n\n.nv-hero-breadcrumb a:hover { color: var(--nv-primary); }\n\n.nv-hero-breadcrumb .nv-bc-sep { color: var(--nv-text-muted); font-size: 10px; }\n\n.nv-hero-breadcrumb .nv-bc-current { color: var(--nv-primary); }\n\n.nv-support-hero h1 {\n  font-family: 'Noto Sans KR', sans-serif; font-weight: 900;\n  font-size: clamp(48px, 8vw, 80px); line-height: 1.1; margin-bottom: 20px;\n  background: var(--nv-gradient);\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n  background-clip: text;\n  animation: heroTitleShimmer 4s ease-in-out infinite;\n  background-size: 200% 200%;\n}\n\n@keyframes heroTitleShimmer {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n\n.nv-support-hero-sub {\n  font-size: clamp(16px, 2.5vw, 22px); color: var(--nv-text-secondary);\n  font-weight: 300; letter-spacing: 1px;\n}\n\n\/* Floating particles in hero *\/\n.nv-hero-particle {\n  position: absolute; border-radius: 50%;\n  background: var(--nv-primary); opacity: 0;\n  animation: heroParticleFloat 8s ease-in-out infinite;\n}\n\n@keyframes heroParticleFloat {\n  0% { opacity: 0; transform: translateY(50px) scale(0.5); }\n  20% { opacity: 0.6; }\n  80% { opacity: 0.6; }\n  100% { opacity: 0; transform: translateY(-200px) scale(0); }\n}\n\n.nv-hero-decor-line {\n  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;\n  background: linear-gradient(90deg, transparent, var(--nv-primary), var(--nv-secondary), transparent);\n  opacity: 0.3;\n}\n\n\n\/* ========== Tab Navigation ========== *\/\n.nv-tabs-section {\n  max-width: 1200px; margin: 0 auto; padding: 60px 40px 80px;\n}\n\n.nv-tabs-nav {\n  display: flex; justify-content: center; gap: 8px; margin-bottom: 48px;\n  position: relative;\n}\n\n.nv-tab-btn {\n  display: flex; align-items: center; gap: 10px;\n  padding: 16px 36px; font-size: 16px; font-weight: 600;\n  color: var(--nv-text-muted); border-radius: 12px;\n  transition: all 0.4s ease; position: relative; overflow: hidden;\n  background: transparent; border: 1px solid transparent;\n  z-index: 2;\n}\n\n.nv-tab-btn:hover {\n  color: var(--nv-text-secondary);\n  background: rgba(255,255,255,0.03);\n}\n\n.nv-tab-btn.active {\n  color: var(--nv-text);\n  background: rgba(255,255,255,0.05);\n  border-color: var(--nv-border);\n}\n\n.nv-tab-indicator-bar {\n  position: absolute;\n  bottom: 0;\n  height: 3px;\n  background: var(--nv-gradient);\n  border-radius: 2px;\n  box-shadow: 0 0 15px var(--nv-glow-cyan), 0 0 30px var(--nv-glow-purple);\n  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\n  z-index: 1;\n  pointer-events: none;\n}\n\n.nv-tab-icon {\n  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;\n}\n\n.nv-tab-icon svg { width: 20px; height: 20px; }\n\n\n\/* Tab Content *\/\n.nv-tab-content-wrapper { position: relative; min-height: 400px; }\n\n.nv-tab-content {\n  display: none; opacity: 0; transform: translateY(20px);\n  transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.nv-tab-content.active {\n  display: block; opacity: 1; transform: translateY(0);\n}\n\n\n\/* ========== \uacf5\uc9c0\uc0ac\ud56d Tab ========== *\/\n.nv-notice-list { }\n\n.nv-notice-loading {\n  text-align: center; padding: 60px 0;\n}\n\n.nv-loader {\n  width: 48px; height: 48px; border: 3px solid var(--nv-border);\n  border-top-color: var(--nv-primary); border-radius: 50%;\n  animation: nvSpin 0.8s linear infinite; margin: 0 auto 16px;\n}\n\n@keyframes nvSpin { to { transform: rotate(360deg); } }\n\n.nv-loader-text { color: var(--nv-text-muted); font-size: 14px; }\n\n\n.nv-notice-table {\n  width: 100%; border-collapse: collapse;\n}\n\n.nv-notice-table-header {\n  display: grid; grid-template-columns: auto 1fr 140px;\n  gap: 16px; padding: 16px 24px;\n  border-bottom: 1px solid rgba(255,255,255,0.12);\n  color: var(--nv-text-secondary); font-size: 13px; font-weight: 600;\n  text-transform: uppercase; letter-spacing: 1px;\n}\n\n.nv-notice-row {\n  display: grid; grid-template-columns: auto 1fr 140px;\n  gap: 16px; padding: 20px 24px; align-items: center;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; cursor: pointer; border-radius: 8px;\n  position: relative; overflow: hidden;\n}\n\n.nv-notice-row::before {\n  content: ''; position: absolute; inset: 0;\n  background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(124,58,237,0.04));\n  opacity: 0; transition: opacity 0.3s ease;\n  z-index: 0;\n}\n\n.nv-notice-row::after {\n  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;\n  background: var(--nv-gradient); transform: scaleY(0); transition: transform 0.3s ease;\n  transform-origin: center; z-index: 1;\n}\n\n.nv-notice-row:hover {\n  transform: translateX(8px);\n  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.12);\n  border-color: rgba(0,212,255,0.2);\n}\n\n.nv-notice-row:hover::before { opacity: 1; }\n\n.nv-notice-row:hover::after { transform: scaleY(1); }\n\n.nv-notice-badge {\n  position: relative; z-index: 1;\n  display: inline-flex; padding: 4px 12px; border-radius: 20px;\n  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;\n  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(124,58,237,0.15));\n  color: var(--nv-primary); border: 1px solid rgba(0,212,255,0.2);\n  white-space: nowrap;\n  animation: badgePulse 2s infinite ease-in-out;\n}\n\n@keyframes badgePulse {\n  0%, 100% { box-shadow: 0 0 5px rgba(0, 212, 255, 0.2); }\n  50% { box-shadow: 0 0 15px rgba(0, 212, 255, 0.5); }\n}\n\n.nv-notice-title {\n  position: relative; z-index: 1;\n  font-size: 16px; font-weight: 600; color: #ffffff;\n  transition: color 0.3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n\n.nv-notice-row:hover .nv-notice-title { color: var(--nv-primary); }\n\n.nv-notice-title a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.nv-notice-date {\n  position: relative; z-index: 1;\n  font-family: 'Inter', sans-serif; font-size: 14px; color: #cbd5e1;\n  text-align: right;\n  transition: color 0.3s;\n}\n\n.nv-notice-row:hover .nv-notice-date { color: #ffffff; }\n\n.nv-notice-note {\n  text-align: center; padding: 24px; color: var(--nv-text-muted);\n  font-size: 13px; border-top: 1px solid var(--nv-border); margin-top: 16px;\n}\n\n.nv-notice-empty {\n  text-align: center; padding: 80px 20px; color: var(--nv-text-muted);\n}\n\n.nv-notice-empty-icon {\n  font-size: 48px; margin-bottom: 16px; opacity: 0.3;\n}\n\n\n\/* ========== FAQ Tab ========== *\/\n.nv-faq-list { display: flex; flex-direction: column; gap: 12px; }\n\n.nv-faq-item {\n  border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;\n  overflow: hidden; transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;\n  background: rgba(255,255,255,0.02);\n}\n\n.nv-faq-item:hover {\n  border-color: rgba(0,212,255,0.25);\n  transform: translateY(-4px);\n  box-shadow: 0 12px 30px rgba(0, 212, 255, 0.12);\n  background: rgba(255, 255, 255, 0.04);\n}\n\n.nv-faq-item.active {\n  border: 1px solid rgba(0,212,255,0.4);\n  border-left: 4px solid var(--nv-primary);\n  background: linear-gradient(135deg, rgba(0,212,255,0.08), rgba(124,58,237,0.03));\n  box-shadow: 0 12px 36px rgba(0, 212, 255, 0.18);\n}\n\n.nv-faq-question {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 22px 28px; cursor: pointer; gap: 20px;\n  transition: all 0.3s;\n}\n\n.nv-faq-question:hover { background: rgba(255,255,255,0.02); }\n\n.nv-faq-q-text {\n  font-size: 17px; font-weight: 700; color: #ffffff;\n  transition: color 0.3s; display: flex; align-items: flex-start; gap: 12px;\n  line-height: 1.6;\n}\n\n.nv-faq-q-text .q-label {\n  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 17px;\n  background: var(--nv-gradient);\n  -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n  background-clip: text; flex-shrink: 0; margin-top: 1px;\n}\n\n.nv-faq-item:hover .nv-faq-q-text { color: var(--nv-primary); }\n\n.nv-faq-item.active .nv-faq-q-text { color: var(--nv-primary); }\n\n.nv-faq-toggle {\n  width: 32px; height: 32px; flex-shrink: 0;\n  border-radius: 50%; border: 1px solid rgba(255,255,255,0.15);\n  display: flex; align-items: center; justify-content: center;\n  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative;\n  background: rgba(255,255,255,0.03);\n}\n\n.nv-faq-toggle svg {\n  width: 14px; height: 14px; stroke: #e2e8f0;\n  transition: all 0.4s ease;\n}\n\n.nv-faq-item.active .nv-faq-toggle {\n  background: var(--nv-gradient); border-color: transparent;\n  transform: rotate(135deg);\n  box-shadow: 0 0 15px var(--nv-glow-cyan);\n}\n\n.nv-faq-item.active .nv-faq-toggle svg { stroke: #ffffff; }\n\n.nv-faq-answer {\n  max-height: 0; overflow: hidden;\n  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n              padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0 28px;\n}\n\n.nv-faq-item.active .nv-faq-answer {\n  max-height: 300px; padding: 0 28px 24px;\n}\n\n.nv-faq-a-text {\n  font-size: 15px; color: #e2e8f0; line-height: 1.8;\n  padding-left: 30px; position: relative;\n}\n\n.nv-faq-a-text::before {\n  content: 'A.'; position: absolute; left: 0; top: 0;\n  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px;\n  color: var(--nv-secondary);\n}\n\n\n\/* ========== \ubb38\uc758\ud558\uae30 Tab ========== *\/\n.nv-contact-form-wrapper {\n  max-width: 800px; margin: 0 auto;\n}\n\n.nv-contact-form {\n  background: rgba(255,255,255,0.03);\n  border: 1px solid var(--nv-border);\n  border-radius: 24px; padding: 48px;\n  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\n  position: relative; overflow: hidden;\n}\n\n.nv-contact-form::before {\n  content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;\n  background: var(--nv-gradient); opacity: 0.5;\n}\n\n.nv-contact-form-grid {\n  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;\n}\n\n.nv-form-group {\n  display: flex; flex-direction: column; gap: 8px;\n}\n\n.nv-form-group.full { grid-column: 1 \/ -1; }\n\n.nv-form-label {\n  font-size: 14px; font-weight: 600; color: var(--nv-text-secondary);\n  display: flex; align-items: center; gap: 4px;\n}\n\n.nv-form-label .required { color: var(--nv-primary); font-size: 12px; }\n\n.nv-form-input, .nv-form-select, .nv-form-textarea {\n  padding: 14px 18px; border-radius: 12px;\n  background: rgba(255,255,255,0.04); border: 1px solid var(--nv-border);\n  color: var(--nv-text); font-size: 15px; outline: none;\n  transition: all 0.4s ease;\n}\n\n.nv-form-input::placeholder, .nv-form-textarea::placeholder {\n  color: var(--nv-text-muted);\n}\n\n.nv-form-input:focus, .nv-form-select:focus, .nv-form-textarea:focus {\n  border-color: var(--nv-primary);\n  box-shadow: 0 0 0 3px var(--nv-glow-cyan), 0 0 20px rgba(0,212,255,0.1);\n  background: rgba(0,212,255,0.03);\n}\n\n.nv-form-input.error, .nv-form-select.error, .nv-form-textarea.error {\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);\n}\n\n.nv-form-select {\n  appearance: none; -webkit-appearance: none;\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\");\n  background-repeat: no-repeat; background-position: right 16px center;\n  cursor: pointer;\n}\n\n.nv-form-select option { background: var(--nv-surface); color: var(--nv-text); }\n\n.nv-form-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }\n\n.nv-form-error {\n  font-size: 12px; color: #ef4444; min-height: 18px;\n  opacity: 0; transition: opacity 0.3s; margin-top: -4px;\n}\n\n.nv-form-error.visible { opacity: 1; }\n\n.nv-form-checkbox-group {\n  display: flex; align-items: flex-start; gap: 12px;\n  grid-column: 1 \/ -1; margin-top: 8px;\n}\n\n.nv-form-checkbox {\n  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 2px;\n  border: 1px solid var(--nv-border); appearance: none; -webkit-appearance: none;\n  background: rgba(255,255,255,0.04); cursor: pointer; position: relative;\n  transition: all 0.3s;\n}\n\n.nv-form-checkbox:checked {\n  background: var(--nv-gradient); border-color: transparent;\n}\n\n.nv-form-checkbox:checked::after {\n  content: '\u2713'; position: absolute; top: 50%; left: 50%;\n  transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: 700;\n}\n\n.nv-form-checkbox-label {\n  font-size: 14px; color: var(--nv-text-muted); line-height: 1.6; cursor: pointer;\n}\n\n.nv-form-checkbox-label a { color: var(--nv-primary); text-decoration: underline; }\n\n.nv-form-submit-wrapper {\n  grid-column: 1 \/ -1; display: flex; justify-content: center; margin-top: 16px;\n}\n\n.nv-form-submit {\n  padding: 16px 64px; border-radius: 60px; font-size: 16px; font-weight: 700;\n  color: white; background: var(--nv-gradient); border: none; cursor: pointer;\n  position: relative; overflow: hidden; transition: all 0.4s ease;\n  box-shadow: 0 4px 20px rgba(0,212,255,0.2);\n}\n\n.nv-form-submit:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 40px rgba(0,212,255,0.35), 0 0 60px var(--nv-glow-cyan);\n}\n\n.nv-form-submit:active { transform: translateY(0); }\n\n.nv-form-submit::after {\n  content: ''; position: absolute; inset: -2px; border-radius: 62px;\n  background: var(--nv-gradient); z-index: -1; opacity: 0;\n  filter: blur(15px); transition: opacity 0.4s;\n}\n\n.nv-form-submit:hover::after { opacity: 0.5; }\n\n\n\/* Success modal *\/\n.nv-success-modal-overlay {\n  position: fixed; inset: 0; z-index: 50000;\n  background: rgba(10,10,26,0.8); backdrop-filter: blur(10px);\n  display: none; align-items: center; justify-content: center;\n  opacity: 0; transition: opacity 0.4s;\n}\n\n.nv-success-modal-overlay.show { display: flex; opacity: 1; }\n\n.nv-success-modal {\n  background: var(--nv-card); border: 1px solid var(--nv-border);\n  border-radius: 24px; padding: 48px; max-width: 480px; width: 90%;\n  text-align: center; position: relative; overflow: hidden;\n  transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.nv-success-modal-overlay.show .nv-success-modal { transform: scale(1); }\n\n.nv-success-modal::before {\n  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;\n  background: radial-gradient(circle, var(--nv-glow-cyan) 0%, transparent 60%);\n  opacity: 0.08;\n}\n\n.nv-success-icon {\n  width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 24px;\n  background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(124,58,237,0.15));\n  display: flex; align-items: center; justify-content: center;\n  border: 2px solid var(--nv-primary);\n  animation: successPop 0.6s ease;\n}\n\n@keyframes successPop {\n  0% { transform: scale(0); }\n  50% { transform: scale(1.2); }\n  100% { transform: scale(1); }\n}\n\n.nv-success-icon svg { width: 36px; height: 36px; stroke: var(--nv-primary); }\n\n.nv-success-title {\n  font-size: 24px; font-weight: 700; margin-bottom: 12px; position: relative;\n}\n\n.nv-success-desc {\n  font-size: 15px; color: var(--nv-text-muted); line-height: 1.7; margin-bottom: 32px; position: relative;\n}\n\n.nv-success-close {\n  padding: 12px 40px; border-radius: 60px; font-size: 15px; font-weight: 600;\n  color: white; background: var(--nv-gradient); cursor: pointer;\n  transition: all 0.3s; border: none; position: relative;\n}\n\n.nv-success-close:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,212,255,0.3); }\n\n\n\/* ========== Contact Info Cards ========== *\/\n.nv-contact-info-section {\n  max-width: 1200px; margin: 0 auto; padding: 0 40px 100px;\n}\n\n.nv-contact-info-title {\n  text-align: center; margin-bottom: 48px;\n}\n\n.nv-contact-info-title h2 {\n  font-size: clamp(28px, 4vw, 36px); font-weight: 800; margin-bottom: 12px;\n}\n\n.nv-contact-info-title p {\n  color: var(--nv-text-muted); font-size: 16px;\n}\n\n.nv-contact-cards {\n  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;\n}\n\n.nv-contact-card {\n  background: rgba(255,255,255,0.03); border: 1px solid var(--nv-border);\n  border-radius: 20px; padding: 40px 32px; text-align: center;\n  transition: border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;\n  position: relative; overflow: hidden;\n  transform-style: preserve-3d; perspective: 600px;\n}\n\n.nv-contact-card::before {\n  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\n  background: var(--nv-gradient); opacity: 0; transition: opacity 0.4s;\n}\n\n.nv-contact-card:hover {\n  transform: translateY(-8px);\n  border-color: rgba(0,212,255,0.2);\n  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px var(--nv-glow-cyan);\n}\n\n.nv-contact-card:hover::before { opacity: 1; }\n\n.nv-contact-card-icon {\n  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 24px;\n  background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(124,58,237,0.1));\n  display: flex; align-items: center; justify-content: center;\n  border: 1px solid rgba(0,212,255,0.15);\n  transition: all 0.5s ease;\n}\n\n.nv-contact-card:hover .nv-contact-card-icon {\n  transform: scale(1.1) rotate(5deg);\n  background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(124,58,237,0.2));\n  box-shadow: 0 0 30px var(--nv-glow-cyan);\n}\n\n.nv-contact-card-icon svg { width: 28px; height: 28px; stroke: var(--nv-primary); }\n\n.nv-contact-card h3 {\n  font-size: 18px; font-weight: 700; margin-bottom: 8px;\n}\n\n.nv-contact-card-value {\n  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600;\n  color: var(--nv-primary); margin-bottom: 8px;\n}\n\n.nv-contact-card-note {\n  font-size: 13px; color: var(--nv-text-muted);\n}\n\n\n@media (max-width: 968px) {\n  .nv-contact-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }\n}\n\n@media (max-width: 768px) {\n  \/* Desktop vs Mobile text visibility swap *\/\n    .nv-desktop-text { display: none !important; }\n  \n    .nv-mobile-text { display: inline !important; }\n  \n  \n    \/* Spacing Compression *\/\n    .nv-support-hero { min-height: 60vh; padding: 120px 24px 80px; }\n  \n    .nv-support-hero h1 { font-size: clamp(28px, 5vw, 36px); margin-bottom: 8px; }\n  \n    .nv-tabs-section { padding: 24px 12px 32px; }\n  \n    .nv-contact-form { padding: 24px 16px; border-radius: 16px; }\n  \n    .nv-contact-info-section { padding: 0 12px 32px; }\n  \n    \n    \/* Horizontal swipeable tab menu *\/\n    .nv-tabs-nav {\n      justify-content: flex-start;\n      overflow-x: auto;\n      white-space: nowrap;\n      padding: 0 4px 8px;\n      margin-bottom: 20px;\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n      border-bottom: 1px solid rgba(255,255,255,0.04);\n      gap: 6px;\n    }\n  \n    .nv-tabs-nav::-webkit-scrollbar { display: none; }\n  \n    .nv-tab-btn { flex-shrink: 0; padding: 10px 16px; font-size: 13px; justify-content: center; }\n  \n    .nv-tab-icon { width: 16px; height: 16px; }\n  \n    .nv-tab-icon svg { width: 14px; height: 14px; }\n  \n  \n    \/* Contact Form Layout *\/\n    .nv-contact-form-grid { grid-template-columns: 1fr; gap: 12px; }\n  \n    .nv-form-group { gap: 6px; }\n  \n    .nv-form-input, .nv-form-select, .nv-form-textarea { padding: 10px 14px; font-size: 14px; border-radius: 8px; }\n  \n    .nv-form-textarea { min-height: 110px; }\n  \n    .nv-form-checkbox-group { grid-column: 1; margin-top: 4px; gap: 8px; align-items: center; }\n  \n    .nv-form-checkbox { width: 16px; height: 16px; border-radius: 4px; margin-top: 0; }\n  \n    .nv-form-checkbox-label { font-size: 12px; }\n  \n    .nv-form-submit-wrapper { grid-column: 1; margin-top: 8px; }\n  \n    .nv-form-submit { width: 100%; padding: 12px 0; font-size: 15px; }\n  \n  \n    \/* Notice row reordering & compression *\/\n    .nv-notice-table-header { display: none; }\n  \n    .nv-notice-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; align-items: center; }\n  \n    .nv-notice-row:hover { transform: translateY(-2px); }\n  \n    .nv-notice-badge { order: 1; padding: 2px 8px; font-size: 10px; }\n  \n    .nv-notice-date { order: 2; margin-left: auto; font-size: 11px; }\n  \n    .nv-notice-title { order: 3; width: 100%; font-size: 13px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  \n    .nv-notice-note { padding: 16px; font-size: 11px; margin-top: 8px; }\n  \n  \n    \/* FAQ styling *\/\n    .nv-faq-question { padding: 12px 14px; gap: 10px; }\n  \n    .nv-faq-q-text { font-size: 14px; }\n  \n    .nv-faq-q-text .q-label { font-size: 14px; }\n  \n    .nv-faq-toggle { width: 26px; height: 26px; }\n  \n    .nv-faq-toggle svg { width: 10px; height: 10px; }\n  \n    .nv-faq-answer { padding: 0 14px; }\n  \n    .nv-faq-item.active .nv-faq-answer { padding: 0 14px 14px; }\n  \n    .nv-faq-a-text { padding-left: 16px; font-size: 12px; }\n  \n    \n    \/* Contact Info Cards spacing *\/\n    .nv-contact-info-title { margin-bottom: 24px; }\n  \n    .nv-contact-info-title h2 { font-size: 22px; }\n  \n    .nv-contact-info-title p { font-size: 13px; }\n  \n    .nv-contact-cards { grid-template-columns: 1fr; gap: 12px; max-width: 100%; }\n  \n    .nv-contact-card { padding: 20px 16px; border-radius: 16px; }\n  \n    .nv-contact-card-icon { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 12px; }\n  \n    .nv-contact-card-icon svg { width: 20px; height: 20px; }\n  \n    .nv-contact-card h3 { font-size: 15px; margin-bottom: 4px; }\n  \n    .nv-contact-card-value { font-size: 14px; margin-bottom: 4px; }\n  \n    .nv-contact-card-note { font-size: 12px; }\n  \n  \n    \/* Modals *\/\n    .nv-success-modal { padding: 24px 16px; max-width: 95%; margin: 10px; border-radius: 16px; }\n  \n    .nv-success-icon { width: 56px; height: 56px; margin-bottom: 12px; }\n  \n    .nv-success-icon svg { width: 24px; height: 24px; }\n  \n    .nv-success-title { font-size: 18px; }\n  \n    .nv-success-desc { font-size: 13px; margin-bottom: 20px; }\n  \n    .nv-success-close { width: 100%; padding: 10px 0; font-size: 14px; }\n}\n\n\n\n\/* ========== Divider ========== *\/\n.nv-section-divider {\n  max-width: 1200px; margin: 0 auto; padding: 0 40px;\n}\n\n.nv-section-divider-line {\n  height: 1px;\n  background: linear-gradient(90deg, transparent, var(--nv-border), transparent);\n}\n\n\n\/* Custom Scrollbar for Modal Body *\/\n.nv-modal-body-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n\n.nv-modal-body-scroll::-webkit-scrollbar-track {\n  background: rgba(255,255,255,0.02);\n  border-radius: 4px;\n}\n\n.nv-modal-body-scroll::-webkit-scrollbar-thumb {\n  background: rgba(255,255,255,0.15);\n  border-radius: 4px;\n}\n\n.nv-modal-body-scroll::-webkit-scrollbar-thumb:hover {\n  background: var(--nv-primary);\n}\n\n\n\/* Desktop vs Mobile text visibility *\/\n.nv-desktop-text { display: inline; }\n\n.nv-mobile-text { display: none; }\n\n\n\/* Parallax Glow Blobs *\/\n.nv-bg-blob {\n  position: fixed;\n  width: 50vw;\n  height: 50vw;\n  border-radius: 50%;\n  filter: blur(140px);\n  opacity: 0.08;\n  pointer-events: none;\n  z-index: 0;\n  transition: transform 0.8s cubic-bezier(0.1, 0.8, 0.2, 1);\n}\n\n.nv-blob-1 {\n  background: radial-gradient(circle, var(--nv-primary) 0%, transparent 70%);\n  top: -10%;\n  left: -10%;\n}\n\n.nv-blob-2 {\n  background: radial-gradient(circle, var(--nv-secondary) 0%, transparent 70%);\n  bottom: -10%;\n  right: -10%;\n}\n\n\n\/* Drawing Border SVG Outlines *\/\n.nv-border-svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 5;\n}\n\n.nv-border-rect {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: url(#nv-rect-gradient);\n  stroke-width: 2px;\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  transition: stroke-dashoffset 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);\n}\n\n.nv-contact-card:hover .nv-border-rect,\n.nv-tab-btn:hover .nv-border-rect,\n.nv-form-submit:hover .nv-border-rect {\n  stroke-dashoffset: 0;\n}\n\/* ============================================\n   UPGRADED FLOATING CAPSULE NAVIGATION (PC\/MOBILE)\n   ============================================ *\/\n.nv-nav {\n  position: fixed;\n  top: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(100% - 48px);\n  max-width: 1200px;\n  z-index: 10000;\n  padding: 12px 28px;\n  background: rgba(10, 10, 26, 0.45) !important;\n  backdrop-filter: blur(24px) saturate(180%) !important;\n  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;\n  border: 1px solid rgba(255, 255, 255, 0.06) !important;\n  border-radius: 40px;\n  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);\n}\n.nv-nav.scrolled {\n  top: 12px;\n  max-width: 1100px;\n  padding: 10px 24px;\n  background: rgba(10, 10, 26, 0.75) !important;\n  border-color: rgba(0, 212, 255, 0.15) !important;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 212, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);\n}\n.nv-nav-inner {\n  max-width: 100%;\n  margin: 0 auto;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.nv-logo {\n  display: flex; align-items: center; gap: 10px;\n  font-weight: 700; font-size: 20px;\n  letter-spacing: 2px;\n  transition: transform 0.3s;\n}\n.nv-logo:hover { transform: scale(1.05); }\n.nv-logo-icon {\n  background: var(--gradient, var(--nv-gradient));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  font-size: 24px;\n  animation: nvLogoPulse 3s ease-in-out infinite;\n}\n@keyframes nvLogoPulse {\n  0%, 100% { filter: drop-shadow(0 0 8px var(--glow-cyan, var(--nv-glow-cyan))); }\n  50% { filter: drop-shadow(0 0 16px var(--glow-purple, var(--nv-glow-purple))); }\n}\n\n@keyframes nvIdleFloat {\n  0% { translate: 0 0px; }\n  50% { translate: 0 -5px; }\n  100% { translate: 0 0px; }\n}\n.nv-logo-text {\n  background: var(--gradient, var(--nv-gradient));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n.nv-nav-links {\n  display: flex; gap: 12px; align-items: center;\n}\n.nv-nav-link {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--text-secondary, var(--nv-text-secondary));\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  position: relative;\n  padding: 8px 18px;\n  border-radius: 30px;\n  z-index: 1;\n}\n.nv-nav-link::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: 30px;\n  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(124, 58, 237, 0.06));\n  border: 1px solid rgba(0, 212, 255, 0.12);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  z-index: -1;\n}\n.nv-nav-link:hover {\n  color: #ffffff;\n  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4);\n}\n.nv-nav-link:hover::before {\n  opacity: 1;\n  transform: scale(1);\n}\n.nv-nav-link.active {\n  color: var(--nv-primary) !important;\n  text-shadow: 0 0 12px rgba(0, 212, 255, 0.5) !important;\n}\n.nv-nav-link.active::before {\n  opacity: 0 !important;\n  transform: scale(0.9) !important;\n}\n\n\/* Hamburger *\/\n.nv-hamburger {\n  display: none;\n  flex-direction: column;\n  gap: 5px;\n  background: none; border: none; cursor: pointer;\n  padding: 8px;\n}\n.nv-hamburger span {\n  width: 24px; height: 2px;\n  background: var(--text-primary, var(--nv-text, #ffffff));\n  transition: all 0.3s;\n  border-radius: 2px;\n}\n.nv-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n.nv-hamburger.open span:nth-child(2) { opacity: 0; }\n.nv-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\n\n\/* Mobile menu *\/\n.nv-mobile-menu {\n  position: fixed; top: 0; right: -100%;\n  width: 280px; height: 100vh;\n  background: rgba(17, 17, 39, 0.98);\n  backdrop-filter: blur(20px);\n  z-index: 9999;\n  display: flex; flex-direction: column;\n  padding: 100px 40px 40px;\n  gap: 8px;\n  transition: right 0.4s cubic-bezier(0.65, 0, 0.35, 1);\n  border-left: 1px solid var(--border, var(--nv-border));\n}\n.nv-mobile-menu.open { right: 0; }\n.nv-mobile-link {\n  font-size: 18px; font-weight: 500;\n  color: var(--text-secondary, var(--nv-text-secondary));\n  padding: 16px 0;\n  border-bottom: 1px solid var(--border, var(--nv-border));\n  transition: all 0.3s;\n}\n.nv-mobile-link:hover {\n  color: var(--primary, var(--nv-primary));\n  padding-left: 12px;\n}\n.nv-mobile-link.active {\n  color: var(--primary, var(--nv-primary)) !important;\n  padding-left: 12px !important;\n}\n\n\/* ============================================\n   UPGRADED FOOTER DESIGN\n   ============================================ *\/\n.nv-footer {\n  background: var(--surface, var(--nv-surface));\n  border-top: 1px solid var(--border, var(--nv-border));\n  padding: 80px 40px 40px;\n}\n.nv-footer-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n.nv-footer-top {\n  display: grid;\n  grid-template-columns: 1.2fr 2fr;\n  gap: 60px;\n  margin-bottom: 60px;\n}\n.nv-footer-desc {\n  font-size: 14px;\n  color: var(--text-muted, var(--nv-text-muted));\n  line-height: 1.8;\n  margin-top: 16px;\n}\n.nv-footer-col {\n    grid-column: auto !important;\n    grid-row: auto !important;\n  }\n  .nv-footer-links {\n    display: grid !important;\n    grid-template-columns: 1fr 1.2fr 1.8fr !important;\n    gap: 16px !important;\n  }\n.nv-footer-col h4 {\n  font-size: 15px;\n  font-weight: 700;\n  margin-bottom: 20px;\n  color: var(--text-primary, var(--nv-text, #ffffff));\n}\n.nv-footer-col a,\n.nv-footer-col p {\n  display: block;\n  font-size: 13px;\n  color: var(--text-muted, var(--nv-text-muted));\n  padding: 4px 0;\n  transition: color 0.3s;\n}\n.nv-footer-col a:hover {\n  color: var(--primary, var(--nv-primary));\n}\n.nv-footer-bottom {\n  border-top: 1px solid var(--border, var(--nv-border));\n  padding: 24px 0;\n  text-align: center;\n  color: var(--text-muted, var(--nv-text-muted));\n  font-size: 13px;\n}\n\n\/* ============================================\n   RESPONSIVE DESIGN OVERRIDES\n   ============================================ *\/\n@media (max-width: 768px) {\n  \/* Navigation mobile capsule overrides *\/\n  .nv-nav {\n    top: 12px;\n    left: 12px;\n    right: 12px;\n    width: calc(100% - 24px);\n    transform: none;\n    border-radius: 24px;\n    padding: 10px 16px;\n    background: rgba(10, 10, 26, 0.75) !important;\n  }\n  .nv-nav.scrolled {\n    top: 12px;\n    width: calc(100% - 24px);\n    padding: 10px 16px;\n  }\n  .nv-nav-links { display: none; }\n  .nv-hamburger { display: flex; }\n  .nv-nav-inner { padding: 0; }\n\n  \/* Mobile Custom Cursor Follower - Glow Cyan and High Visibility *\/\n  .nv-cursor-follower {\n    background: #00d4ff !important;\n    mix-blend-mode: normal !important;\n    opacity: 0.85 !important;\n    box-shadow: 0 0 10px #00d4ff, 0 0 20px #00d4ff, 0 0 30px #00d4ff !important;\n    width: 14px !important;\n    height: 14px !important;\n    border-radius: 50% !important;\n    filter: none !important;\n    z-index: 999999 !important;\n  }\n  \n  \/* Footer mobile layout optimization *\/\n  .nv-footer {\n    padding: 40px 20px 20px !important;\n  }\n  .nv-footer-top {\n    grid-template-columns: 1fr !important;\n    gap: 32px !important;\n    margin-bottom: 32px !important;\n  }\n  .nv-footer-links {\n    display: grid !important;\n    grid-template-columns: 1fr 1.2fr 1.8fr !important;\n    gap: 16px !important;\n  }\n  \n  \n  \/* Make \"\uc5f0\ub77d\ucc98\" take the entire right column starting from top *\/\n  .nv-footer-col:nth-child(3) {\n    border-top: none !important;\n    padding-top: 0 !important;\n  }\n}\n\n\/* ===================== PREMIUM DARK GLASS OVERRIDES ===================== *\/\n.nv-tabs-section {\n  background: transparent !important;\n  color: #ffffff !important;\n}\n.nv-tabs-nav {\n  max-width: fit-content !important;\n  margin: 0 auto 48px !important;\n  padding: 6px !important;\n  background: rgba(255, 255, 255, 0.03) !important;\n  border-radius: 100px !important;\n  display: flex !important;\n  align-items: center !important;\n  gap: 4px !important;\n  border: 1px solid rgba(255, 255, 255, 0.08) !important;\n}\n.nv-tab-indicator-bar {\n  display: none !important;\n}\n.nv-tab-btn {\n  padding: 12px 32px !important;\n  font-size: 15px !important;\n  border-radius: 100px !important;\n  background: transparent !important;\n  border: 1px solid transparent !important;\n  color: rgba(255, 255, 255, 0.6) !important;\n  box-shadow: none !important;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n}\n.nv-tab-btn:hover {\n  color: #ffffff !important;\n  background: rgba(255, 255, 255, 0.05) !important;\n}\n.nv-tab-btn.active {\n  color: #ffffff !important;\n  background: var(--nv-gradient, linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%)) !important;\n  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;\n}\n\n\/* Notices Table Redesign *\/\n.nv-notice-table-wrap {\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n.nv-notice-header-row {\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;\n  color: rgba(255, 255, 255, 0.6) !important;\n  font-weight: 700 !important;\n  padding-bottom: 16px !important;\n  margin-bottom: 16px !important;\n}\n.nv-notice-row {\n  background: rgba(255, 255, 255, 0.03) !important;\n  border: 1px solid rgba(255, 255, 255, 0.08) !important;\n  margin-bottom: 12px !important;\n  border-radius: 14px !important;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n}\n.nv-notice-row:hover {\n  background: rgba(255, 255, 255, 0.06) !important;\n  border-color: rgba(0, 212, 255, 0.3) !important;\n  box-shadow: 0 10px 25px rgba(0, 212, 255, 0.1) !important;\n  transform: translateY(-2px) translateX(4px) !important;\n}\n.nv-notice-pinned-badge {\n  background: rgba(0, 212, 255, 0.1) !important;\n  color: var(--nv-primary) !important;\n}\n.nv-notice-title {\n  color: #ffffff !important;\n  font-weight: 600 !important;\n}\n.nv-notice-row:hover .nv-notice-title {\n  color: var(--nv-primary) !important;\n}\n\n\/* FAQ Accordion Redesign *\/\n.nv-faq-item {\n  background: rgba(255, 255, 255, 0.03) !important;\n  border: 1px solid rgba(255, 255, 255, 0.08) !important;\n  border-radius: 14px !important;\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;\n  margin-bottom: 12px !important;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;\n}\n.nv-faq-item:hover {\n  background: rgba(255, 255, 255, 0.06) !important;\n  border-color: rgba(0, 212, 255, 0.3) !important;\n  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.1) !important;\n}\n.nv-faq-item.active {\n  background: rgba(255, 255, 255, 0.05) !important;\n  border-color: var(--nv-primary) !important;\n  border-left: 5px solid var(--nv-primary) !important;\n  box-shadow: 0 12px 30px rgba(0, 212, 255, 0.15) !important;\n}\n.nv-faq-q-text {\n  color: #ffffff !important;\n}\n.nv-faq-item:hover .nv-faq-q-text,\n.nv-faq-item.active .nv-faq-q-text {\n  color: var(--nv-primary) !important;\n}\n.nv-faq-answer {\n  color: rgba(255, 255, 255, 0.7) !important;\n}\n.nv-faq-arrow svg {\n  stroke: rgba(255, 255, 255, 0.6) !important;\n}\n<\/style>\n\n<!-- Scroll Progress Bar -->\n<div class=\"nv-scroll-progress\" id=\"nvScrollProgress\"><\/div>\n\n<!-- Page Transition Overlay -->\n<div class=\"nv-page-transition\" id=\"nvPageTransition\"><\/div>\n\n<!-- Navigation -->\n<nav class=\"nv-nav\" id=\"nvNav\">\n  <div class=\"nv-nav-inner\">\n    <a href=\"\/\" class=\"nv-logo\">\n      <span class=\"nv-logo-icon\">\u25c6<\/span>\n      <span class=\"nv-logo-text\">NEXTVISION<\/span>\n    <\/a>\n    <div class=\"nv-nav-links\" id=\"nvNavLinks\">\n      <a href=\"\/about\/\" class=\"nv-nav-link\">\ud68c\uc0ac\uc18c\uac1c<\/a>\n      <a href=\"\/business\/\" class=\"nv-nav-link\">\uc0ac\uc5c5\ubd84\uc57c<\/a>\n      <a href=\"\/products\/\" class=\"nv-nav-link\">\uc81c\ud488\uc18c\uac1c<\/a>\n      <a href=\"\/support\/\" class=\"nv-nav-link active\">\uace0\uac1d\uc9c0\uc6d0<\/a>\n    <\/div>\n    <button class=\"nv-hamburger\" id=\"nvHamburger\" aria-label=\"\uba54\ub274\">\n      <span><\/span><span><\/span><span><\/span>\n    <\/button>\n  <\/div>\n<\/nav>\n<div class=\"nv-mobile-menu\" id=\"nvMobileMenu\">\n  <a href=\"\/about\/\" class=\"nv-mobile-link\">\ud68c\uc0ac\uc18c\uac1c<\/a>\n  <a href=\"\/business\/\" class=\"nv-mobile-link\">\uc0ac\uc5c5\ubd84\uc57c<\/a>\n  <a href=\"\/products\/\" class=\"nv-mobile-link\">\uc81c\ud488\uc18c\uac1c<\/a>\n  <a href=\"\/support\/\" class=\"nv-mobile-link active\">\uace0\uac1d\uc9c0\uc6d0<\/a>\n<\/div>\n\n<!-- ==================== HERO SECTION ==================== -->\n<section class=\"nv-support-hero\">\n  <div class=\"nv-support-hero-bg\">\n    <canvas id=\"nvHeroCanvas\"><\/canvas>\n    <div class=\"nv-hero-grid-overlay\"><\/div>\n    <div class=\"nv-hero-radial-glow\"><\/div>\n    <!-- Floating particles -->\n    <div class=\"nv-hero-particle\" style=\"width:4px;height:4px;left:15%;top:60%;animation-delay:0s;\"><\/div>\n    <div class=\"nv-hero-particle\" style=\"width:3px;height:3px;left:30%;top:70%;animation-delay:1.5s;\"><\/div>\n    <div class=\"nv-hero-particle\" style=\"width:5px;height:5px;left:50%;top:80%;animation-delay:3s;\"><\/div>\n    <div class=\"nv-hero-particle\" style=\"width:3px;height:3px;left:70%;top:65%;animation-delay:4.5s;\"><\/div>\n    <div class=\"nv-hero-particle\" style=\"width:4px;height:4px;left:85%;top:75%;animation-delay:6s;\"><\/div>\n    <div class=\"nv-hero-particle\" style=\"width:6px;height:6px;left:40%;top:55%;animation-delay:2s;background:var(--nv-secondary);\"><\/div>\n    <div class=\"nv-hero-particle\" style=\"width:3px;height:3px;left:60%;top:50%;animation-delay:5s;background:var(--nv-secondary);\"><\/div>\n  <\/div>\n  <div class=\"nv-support-hero-content\">\n    <div class=\"nv-hero-breadcrumb\">\n      <a href=\"\/\">\ud648<\/a>\n      <span class=\"nv-bc-sep\">\u25b8<\/span>\n      <span class=\"nv-bc-current\">\uace0\uac1d\uc9c0\uc6d0<\/span>\n    <\/div>\n    <h1>\uace0\uac1d\uc9c0\uc6d0<\/h1>\n    <p class=\"nv-support-hero-sub\">\n      <span class=\"nv-desktop-text\">\ub125\uc2a4\ud2b8\ube44\uc804\uc774 \ud56d\uc0c1 \ud568\uaed8\ud569\ub2c8\ub2e4<\/span>\n      <span class=\"nv-mobile-text\">\ub125\uc2a4\ud2b8\ube44\uc804\uc774 \ud568\uaed8\ud569\ub2c8\ub2e4<\/span>\n    <\/p>\n  <\/div>\n  <div class=\"nv-hero-decor-line\"><\/div>\n<\/section>\n\n<!-- ==================== TAB SECTION ==================== -->\n<section class=\"nv-tabs-section\">\n\n  <!-- Tab Navigation -->\n  <div class=\"nv-tabs-nav nv-animate\">\n    <div class=\"nv-tab-indicator-bar\" id=\"nvTabIndicatorBar\"><\/div>\n    <button class=\"nv-tab-btn active\" data-tab=\"notices\">\n      <span class=\"nv-tab-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"\/><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"\/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"2\"\/><\/svg>\n      <\/span>\n      \uacf5\uc9c0\uc0ac\ud56d\n    <\/button>\n    <button class=\"nv-tab-btn\" data-tab=\"faq\">\n      <span class=\"nv-tab-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\n      <\/span>\n      FAQ\n    <\/button>\n    <button class=\"nv-tab-btn\" data-tab=\"contact\">\n      <span class=\"nv-tab-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n      <\/span>\n      \ubb38\uc758\ud558\uae30\n    <\/button>\n  <\/div>\n\n  <!-- Tab Content Wrapper -->\n  <div class=\"nv-tab-content-wrapper\">\n\n    <!-- ========== \uacf5\uc9c0\uc0ac\ud56d Content ========== -->\n    <div class=\"nv-tab-content active\" id=\"tabNotices\">\n      <div class=\"nv-notice-loading\" id=\"noticeLoading\">\n        <div class=\"nv-loader\"><\/div>\n        <p class=\"nv-loader-text\">\uacf5\uc9c0\uc0ac\ud56d\uc744 \ubd88\ub7ec\uc624\ub294 \uc911...<\/p>\n      <\/div>\n      <div class=\"nv-notice-list\" id=\"noticeList\" style=\"display:none;\">\n        <div class=\"nv-notice-table-header\">\n          <span>\ubd84\ub958<\/span>\n          <span>\uc81c\ubaa9<\/span>\n          <span style=\"text-align:right;\">\ub0a0\uc9dc<\/span>\n        <\/div>\n        <div id=\"noticeRows\"><\/div>\n      <\/div>\n      <div class=\"nv-notice-empty\" id=\"noticeEmpty\" style=\"display:none;\">\n        <div class=\"nv-notice-empty-icon\">\ud83d\udccb<\/div>\n        <p>\ub4f1\ub85d\ub41c \uacf5\uc9c0\uc0ac\ud56d\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n      <\/div>\n\n    <\/div>\n\n    <!-- ========== FAQ Content ========== -->\n    <div class=\"nv-tab-content\" id=\"tabFaq\">\n      <div class=\"nv-faq-list\">\n\n        <div class=\"nv-faq-item\">\n          <div class=\"nv-faq-question\" onclick=\"toggleFaq(this)\">\n            <span class=\"nv-faq-q-text\">\n              <span class=\"q-label\">Q.<\/span>\n              \ub125\uc2a4\ud2b8\ube44\uc804\uc758 \uc194\ub8e8\uc158 \ub3c4\uc785 \uc808\ucc28\ub294 \uc5b4\ub5bb\uac8c \ub418\ub098\uc694?\n            <\/span>\n            <span class=\"nv-faq-toggle\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"nv-faq-answer\">\n            <div class=\"nv-faq-a-text\">1) \ucd08\uae30 \uc0c1\ub2f4 \ubc0f \ud604\uc7a5 \ubd84\uc11d 2) \ub9de\ucda4\ud615 \uc194\ub8e8\uc158 \uc124\uacc4 3) \uac1c\ubc1c \ubc0f \uad6c\ucd95 4) \ud14c\uc2a4\ud2b8 \ubc0f \uac80\uc99d 5) \uc6b4\uc601 \ubc0f \uc720\uc9c0\ubcf4\uc218 \uc21c\uc73c\ub85c \uc9c4\ud589\ub429\ub2c8\ub2e4. \ud3c9\uade0 \ub3c4\uc785 \uae30\uac04\uc740 3~6\uac1c\uc6d4\uc785\ub2c8\ub2e4.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"nv-faq-item\">\n          <div class=\"nv-faq-question\" onclick=\"toggleFaq(this)\">\n            <span class=\"nv-faq-q-text\">\n              <span class=\"q-label\">Q.<\/span>\n              \uae30\uc874 \uc2dc\uc2a4\ud15c\uacfc\uc758 \uc5f0\ub3d9\uc774 \uac00\ub2a5\ud55c\uac00\uc694?\n            <\/span>\n            <span class=\"nv-faq-toggle\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"nv-faq-answer\">\n            <div class=\"nv-faq-a-text\">\ub124, \ub125\uc2a4\ud2b8\ube44\uc804\uc758 \ubaa8\ub4e0 \uc194\ub8e8\uc158\uc740 \ud45c\uc900 \ud504\ub85c\ud1a0\ucf5c(OPC UA, MQTT, REST API \ub4f1)\uc744 \uc9c0\uc6d0\ud558\uc5ec \uae30\uc874 \uc2dc\uc2a4\ud15c\uacfc \uc6d0\ud65c\ud558\uac8c \uc5f0\ub3d9\ub429\ub2c8\ub2e4.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"nv-faq-item\">\n          <div class=\"nv-faq-question\" onclick=\"toggleFaq(this)\">\n            <span class=\"nv-faq-q-text\">\n              <span class=\"q-label\">Q.<\/span>\n              \ud074\ub77c\uc6b0\ub4dc\uc640 \uc628\ud504\ub808\ubbf8\uc2a4 \ubaa8\ub450 \uc9c0\uc6d0\ud558\ub098\uc694?\n            <\/span>\n            <span class=\"nv-faq-toggle\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"nv-faq-answer\">\n            <div class=\"nv-faq-a-text\">\ub124, \ud558\uc774\ube0c\ub9ac\ub4dc \ud074\ub77c\uc6b0\ub4dc \uc544\ud0a4\ud14d\ucc98\ub97c \uc9c0\uc6d0\ud558\uc5ec \uace0\uac1d\uc758 \ud658\uacbd\uc5d0 \ub9de\uac8c \ud074\ub77c\uc6b0\ub4dc, \uc628\ud504\ub808\ubbf8\uc2a4, \ub610\ub294 \ud63c\ud569 \uad6c\uc131\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"nv-faq-item\">\n          <div class=\"nv-faq-question\" onclick=\"toggleFaq(this)\">\n            <span class=\"nv-faq-q-text\">\n              <span class=\"q-label\">Q.<\/span>\n              \uae30\uc220 \uc9c0\uc6d0\uc740 \uc5b4\ub5bb\uac8c \ubc1b\uc744 \uc218 \uc788\ub098\uc694?\n            <\/span>\n            <span class=\"nv-faq-toggle\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"nv-faq-answer\">\n            <div class=\"nv-faq-a-text\">24\uc2dc\uac04 \uae30\uc220 \uc9c0\uc6d0 \ud56b\ub77c\uc778(02-1234-5678)\uacfc \uc774\uba54\uc77c(support@nextvision.co.kr)\uc744 \ud1b5\ud574 \uc9c0\uc6d0\ubc1b\uc73c\uc2e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uae34\uae09 \uc7a5\uc560 \uc2dc 2\uc2dc\uac04 \uc774\ub0b4 \ud604\uc7a5 \ucd9c\ub3d9\ub3c4 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"nv-faq-item\">\n          <div class=\"nv-faq-question\" onclick=\"toggleFaq(this)\">\n            <span class=\"nv-faq-q-text\">\n              <span class=\"q-label\">Q.<\/span>\n              \ub370\uc774\ud130 \ubcf4\uc548\uc740 \uc5b4\ub5bb\uac8c \uad00\ub9ac\ub418\ub098\uc694?\n            <\/span>\n            <span class=\"nv-faq-toggle\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"nv-faq-answer\">\n            <div class=\"nv-faq-a-text\">ISO 27001 \uc778\uc99d\uc744 \ubcf4\uc720\ud558\uace0 \uc788\uc73c\uba70, AES-256 \uc554\ud638\ud654, \uc5ed\ud560 \uae30\ubc18 \uc811\uadfc \uc81c\uc5b4(RBAC), \uc2e4\uc2dc\uac04 \ubcf4\uc548 \ubaa8\ub2c8\ud130\ub9c1 \ub4f1 \ub2e4\uc911 \ubcf4\uc548 \uccb4\uacc4\ub97c \uc6b4\uc601\ud569\ub2c8\ub2e4.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"nv-faq-item\">\n          <div class=\"nv-faq-question\" onclick=\"toggleFaq(this)\">\n            <span class=\"nv-faq-q-text\">\n              <span class=\"q-label\">Q.<\/span>\n              \uc194\ub8e8\uc158 \ub3c4\uc785 \ube44\uc6a9\uc740 \uc5b4\ub5bb\uac8c \ub418\ub098\uc694?\n            <\/span>\n            <span class=\"nv-faq-toggle\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"nv-faq-answer\">\n            <div class=\"nv-faq-a-text\">\ud504\ub85c\uc81d\ud2b8 \uaddc\ubaa8\uc640 \uc694\uad6c\uc0ac\ud56d\uc5d0 \ub530\ub77c \ub9de\ucda4 \uacac\uc801\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ucd08\uae30 \uc0c1\ub2f4\uc740 \ubb34\ub8cc\uc774\uba70, \uc0c1\ub2f4 \ud6c4 \uc0c1\uc138 \uacac\uc801\uc11c\ub97c \uc81c\uacf5\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"nv-faq-item\">\n          <div class=\"nv-faq-question\" onclick=\"toggleFaq(this)\">\n            <span class=\"nv-faq-q-text\">\n              <span class=\"q-label\">Q.<\/span>\n              \uad50\uc721 \ud504\ub85c\uadf8\ub7a8\uc774 \uc788\ub098\uc694?\n            <\/span>\n            <span class=\"nv-faq-toggle\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"nv-faq-answer\">\n            <div class=\"nv-faq-a-text\">\uc194\ub8e8\uc158 \ub3c4\uc785 \uc2dc \uc6b4\uc601\uc790 \uad50\uc721\uc744 \ubb34\uc0c1\uc73c\ub85c \uc81c\uacf5\ud558\uba70, \ucd94\uac00 \uc2ec\ud654 \uad50\uc721 \ud504\ub85c\uadf8\ub7a8\ub3c4 \uc6b4\uc601\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc628\ub77c\uc778\/\uc624\ud504\ub77c\uc778 \uad50\uc721 \ubaa8\ub450 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"nv-faq-item\">\n          <div class=\"nv-faq-question\" onclick=\"toggleFaq(this)\">\n            <span class=\"nv-faq-q-text\">\n              <span class=\"q-label\">Q.<\/span>\n              \ubb34\ub8cc \uccb4\ud5d8\uc774 \uac00\ub2a5\ud55c\uac00\uc694?\n            <\/span>\n            <span class=\"nv-faq-toggle\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n            <\/span>\n          <\/div>\n          <div class=\"nv-faq-answer\">\n            <div class=\"nv-faq-a-text\">NexAI Studio\uc640 NexCloud One\uc740 30\uc77c \ubb34\ub8cc \uccb4\ud5d8\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \ud648\ud398\uc774\uc9c0\uc5d0\uc11c \uccb4\ud5d8 \uc2e0\uccad\uc744 \ud558\uc2dc\uba74 \ub2f4\ub2f9\uc790\uac00 \uc548\ub0b4\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.<\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- ========== \ubb38\uc758\ud558\uae30 Content ========== -->\n    <div class=\"nv-tab-content\" id=\"tabContact\">\n      <div class=\"nv-contact-form-wrapper\">\n        <form class=\"nv-contact-form\" id=\"contactForm\" novalidate>\n          <div class=\"nv-contact-form-grid\">\n            <!-- \uc774\ub984 -->\n            <div class=\"nv-form-group\">\n              <label class=\"nv-form-label\">\uc774\ub984 <span class=\"required\">*<\/span><\/label>\n              <input type=\"text\" class=\"nv-form-input\" id=\"formName\" placeholder=\"\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694\" required>\n              <span class=\"nv-form-error\" id=\"errName\"><\/span>\n            <\/div>\n            <!-- \uc774\uba54\uc77c -->\n            <div class=\"nv-form-group\">\n              <label class=\"nv-form-label\">\uc774\uba54\uc77c <span class=\"required\">*<\/span><\/label>\n              <input type=\"email\" class=\"nv-form-input\" id=\"formEmail\" placeholder=\"example@email.com\" required>\n              <span class=\"nv-form-error\" id=\"errEmail\"><\/span>\n            <\/div>\n            <!-- \uc5f0\ub77d\ucc98 -->\n            <div class=\"nv-form-group\">\n              <label class=\"nv-form-label\">\uc5f0\ub77d\ucc98 <span class=\"required\">*<\/span><\/label>\n              <input type=\"tel\" class=\"nv-form-input\" id=\"formPhone\" placeholder=\"010-0000-0000\" required>\n              <span class=\"nv-form-error\" id=\"errPhone\"><\/span>\n            <\/div>\n            <!-- \ubb38\uc758 \uc720\ud615 -->\n            <div class=\"nv-form-group\">\n              <label class=\"nv-form-label\">\ubb38\uc758 \uc720\ud615 <span class=\"required\">*<\/span><\/label>\n              <select class=\"nv-form-select\" id=\"formType\" required>\n                <option value=\"\" disabled selected>\ubb38\uc758 \uc720\ud615\uc744 \uc120\ud0dd\ud558\uc138\uc694<\/option>\n                <option value=\"product\">\uc81c\ud488 \ubb38\uc758<\/option>\n                <option value=\"tech\">\uae30\uc220 \uc9c0\uc6d0<\/option>\n                <option value=\"quote\">\uacac\uc801 \uc694\uccad<\/option>\n                <option value=\"partner\">\ud30c\ud2b8\ub108\uc2ed<\/option>\n                <option value=\"other\">\uae30\ud0c0<\/option>\n              <\/select>\n              <span class=\"nv-form-error\" id=\"errType\"><\/span>\n            <\/div>\n            <!-- \uc81c\ubaa9 -->\n            <div class=\"nv-form-group full\">\n              <label class=\"nv-form-label\">\uc81c\ubaa9 <span class=\"required\">*<\/span><\/label>\n              <input type=\"text\" class=\"nv-form-input\" id=\"formSubject\" placeholder=\"\ubb38\uc758 \uc81c\ubaa9\uc744 \uc785\ub825\ud558\uc138\uc694\" required>\n              <span class=\"nv-form-error\" id=\"errSubject\"><\/span>\n            <\/div>\n            <!-- \ubb38\uc758 \ub0b4\uc6a9 -->\n            <div class=\"nv-form-group full\">\n              <label class=\"nv-form-label\">\ubb38\uc758 \ub0b4\uc6a9 <span class=\"required\">*<\/span><\/label>\n              <textarea class=\"nv-form-textarea\" id=\"formMessage\" placeholder=\"\ubb38\uc758 \ub0b4\uc6a9\uc744 \uc0c1\uc138\ud788 \uc785\ub825\ud558\uc138\uc694\" required><\/textarea>\n              <span class=\"nv-form-error\" id=\"errMessage\"><\/span>\n            <\/div>\n            <!-- \uac1c\uc778\uc815\ubcf4 \ub3d9\uc758 -->\n            <div class=\"nv-form-checkbox-group\">\n              <input type=\"checkbox\" class=\"nv-form-checkbox\" id=\"formPrivacy\">\n              <label class=\"nv-form-checkbox-label\" for=\"formPrivacy\">\n                <span class=\"nv-desktop-text\"><a href=\"#\" onclick=\"event.preventDefault();\">\uac1c\uc778\uc815\ubcf4 \uc218\uc9d1 \ubc0f \uc774\uc6a9<\/a>\uc5d0 \ub3d9\uc758\ud569\ub2c8\ub2e4. \uc218\uc9d1\ub41c \uc815\ubcf4\ub294 \ubb38\uc758 \ub2f5\ubcc0 \ubaa9\uc801\uc73c\ub85c\ub9cc \uc0ac\uc6a9\ub418\uba70, \ub2f5\ubcc0 \uc644\ub8cc \ud6c4 \uc989\uc2dc \ud30c\uae30\ub429\ub2c8\ub2e4.<\/span>\n                <span class=\"nv-mobile-text\"><a href=\"#\" onclick=\"event.preventDefault();\">\uac1c\uc778\uc815\ubcf4 \uc218\uc9d1 \ubc0f \uc774\uc6a9<\/a>\uc5d0 \ub3d9\uc758\ud569\ub2c8\ub2e4. (\ud544\uc218)<\/span>\n              <\/label>\n            <\/div>\n            <span class=\"nv-form-error\" id=\"errPrivacy\" style=\"grid-column:1\/-1;margin-top:-16px;\"><\/span>\n            <!-- \uc81c\ucd9c -->\n            <div class=\"nv-form-submit-wrapper\">\n              <button type=\"submit\" class=\"nv-form-submit\">\ubb38\uc758 \ubcf4\ub0b4\uae30<\/button>\n            <\/div>\n          <\/div>\n        <\/form>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- Success Modal -->\n<div class=\"nv-success-modal-overlay\" id=\"successModal\">\n  <div class=\"nv-success-modal\">\n    <div class=\"nv-success-icon\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n    <\/div>\n    <h3 class=\"nv-success-title\">\ubb38\uc758\uac00 \uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4<\/h3>\n    <p class=\"nv-success-desc\">\uc18c\uc911\ud55c \ubb38\uc758 \uac10\uc0ac\ud569\ub2c8\ub2e4.<br>\ub2f4\ub2f9\uc790\uac00 \ube60\ub978 \uc2dc\uc77c \ub0b4\uc5d0 \uc5f0\ub77d\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.<br>\ud3c9\uade0 \uc751\ub2f5 \uc2dc\uac04\uc740 24\uc2dc\uac04 \uc774\ub0b4\uc785\ub2c8\ub2e4.<\/p>\n    <button class=\"nv-success-close\" onclick=\"closeSuccessModal()\">\ud655\uc778<\/button>\n  <\/div>\n<\/div>\n\n<!-- Notice View Modal -->\n<div class=\"nv-success-modal-overlay\" id=\"noticeModal\">\n  <div class=\"nv-success-modal\" style=\"max-width: 760px; text-align: left; padding: 40px; transform: scale(0.95); display: flex; flex-direction: column; max-height: 85vh;\">\n    <div style=\"display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 16px; margin-bottom: 20px; gap: 20px;\">\n      <h3 id=\"noticeModalTitle\" style=\"margin: 0; font-size: clamp(18px, 3vw, 22px); font-weight: 700; color: #ffffff; line-height: 1.4;\"><\/h3>\n      <button onclick=\"closeNoticeModal()\" style=\"color: var(--nv-text-muted); font-size: 28px; line-height: 1; transition: color 0.3s; background: none; border: none; cursor: pointer; padding: 0 4px;\" onmouseover=\"this.style.color='#ffffff'\" onmouseout=\"this.style.color='var(--nv-text-muted)'\">&times;<\/button>\n    <\/div>\n    <div style=\"display: flex; gap: 16px; font-size: 13px; color: var(--nv-text-muted); margin-bottom: 20px; font-family: 'Inter', sans-serif;\">\n      <span id=\"noticeModalDate\"><\/span>\n    <\/div>\n    <div id=\"noticeModalContent\" class=\"nv-modal-body-scroll\" style=\"flex: 1; overflow-y: auto; padding-right: 12px; color: #cbd5e1; line-height: 1.8; font-size: 15px;\">\n    <\/div>\n    <div style=\"display: flex; justify-content: flex-end; margin-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px;\">\n      <button class=\"nv-success-close\" onclick=\"closeNoticeModal()\" style=\"padding: 10px 32px; font-size: 14px; border-radius: 30px;\">\ub2eb\uae30<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- ==================== DIVIDER ==================== -->\n<div class=\"nv-section-divider\">\n  <div class=\"nv-section-divider-line\"><\/div>\n<\/div>\n\n<!-- ==================== CONTACT INFO SECTION ==================== -->\n<section class=\"nv-contact-info-section\" style=\"padding-top:80px;\">\n  <div class=\"nv-contact-info-title nv-animate\">\n    <h2>\ubb38\uc758 \ucc44\ub110 \uc548\ub0b4<\/h2>\n    <p>\ud3b8\ub9ac\ud55c \ubc29\ubc95\uc73c\ub85c \ub125\uc2a4\ud2b8\ube44\uc804\uc5d0 \uc5f0\ub77d\ud558\uc138\uc694<\/p>\n  <\/div>\n  <div class=\"nv-contact-cards\">\n    <!-- \uc804\ud654 \uc0c1\ub2f4 -->\n    <div class=\"nv-contact-card\">\n      <div class=\"nv-contact-card-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/>\n        <\/svg>\n      <\/div>\n      <h3>\uc804\ud654 \uc0c1\ub2f4<\/h3>\n      <div class=\"nv-contact-card-value\">02-1234-5678<\/div>\n      <p class=\"nv-contact-card-note\">\n        <span class=\"nv-desktop-text\">\ud3c9\uc77c 09:00 - 18:00<\/span>\n        <span class=\"nv-mobile-text\">\ud3c9\uc77c 9\uc2dc-18\uc2dc<\/span>\n      <\/p>\n    <\/div>\n    <!-- \uc774\uba54\uc77c \ubb38\uc758 -->\n    <div class=\"nv-contact-card\">\n      <div class=\"nv-contact-card-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/>\n          <polyline points=\"22,6 12,13 2,6\"\/>\n        <\/svg>\n      <\/div>\n      <h3>\uc774\uba54\uc77c \ubb38\uc758<\/h3>\n      <div class=\"nv-contact-card-value\">support@nextvision.co.kr<\/div>\n      <p class=\"nv-contact-card-note\">\n        <span class=\"nv-desktop-text\">24\uc2dc\uac04 \uc811\uc218 \uac00\ub2a5<\/span>\n        <span class=\"nv-mobile-text\">24\uc2dc\uac04 \uc811\uc218<\/span>\n      <\/p>\n    <\/div>\n    <!-- \ubc29\ubb38 \uc0c1\ub2f4 -->\n    <div class=\"nv-contact-card\">\n      <div class=\"nv-contact-card-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/>\n          <circle cx=\"12\" cy=\"10\" r=\"3\"\/>\n        <\/svg>\n      <\/div>\n      <h3>\ubc29\ubb38 \uc0c1\ub2f4<\/h3>\n      <div class=\"nv-contact-card-value\">\uc11c\uc6b8\uc2dc \uac15\ub0a8\uad6c \ud14c\ud5e4\ub780\ub85c 123<\/div>\n      <p class=\"nv-contact-card-note\">\n        <span class=\"nv-desktop-text\">\uc0ac\uc804 \uc608\uc57d \ud544\uc694<\/span>\n        <span class=\"nv-mobile-text\">\uc608\uc57d\uc81c \uc6b4\uc601<\/span>\n      <\/p>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== FOOTER ==================== -->\n<footer class=\"nv-footer\">\n  <div class=\"nv-footer-inner\">\n    <div class=\"nv-footer-top\">\n      <div class=\"nv-footer-brand\">\n        <div class=\"nv-logo\"><span class=\"nv-logo-icon\">\u25c6<\/span><span class=\"nv-logo-text\">NEXTVISION<\/span><\/div>\n        <p class=\"nv-footer-desc\">\n          <span class=\"nv-desktop-text\">\uae30\uc220\ub85c \uc5f0\uacb0\ud558\ub294 \ubbf8\ub798, \ud601\uc2e0\uc73c\ub85c \ub9cc\ub4dc\ub294 \uc138\uc0c1<br>\ub125\uc2a4\ud2b8\ube44\uc804 \ud14c\ud06c\ub180\ub85c\uc9c0\ub294 \uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac, IoT, AI, \ud074\ub77c\uc6b0\ub4dc \uae30\ubc18\uc758<br>\uc0b0\uc5c5 \ud601\uc2e0 \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/span>\n          <span class=\"nv-mobile-text\">\uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac, IoT, AI \uc194\ub8e8\uc158\uc744 \uc81c\uacf5\ud558\ub294 \ud601\uc2e0 \uae30\uc5c5 \ub125\uc2a4\ud2b8\ube44\uc804\uc785\ub2c8\ub2e4.<\/span>\n        <\/p>\n      <\/div>\n      <div class=\"nv-footer-links\">\n        <div class=\"nv-footer-col\">\n          <h4>\ubc14\ub85c\uac00\uae30<\/h4>\n          <a href=\"\/\">\ud648<\/a><a href=\"\/about\/\">\ud68c\uc0ac\uc18c\uac1c<\/a><a href=\"\/business\/\">\uc0ac\uc5c5\ubd84\uc57c<\/a><a href=\"\/products\/\">\uc81c\ud488\uc18c\uac1c<\/a><a href=\"\/support\/\">\uace0\uac1d\uc9c0\uc6d0<\/a>\n        <\/div>\n        <div class=\"nv-footer-col\">\n          <h4>\uc81c\ud488<\/h4>\n          <a href=\"\/products\/\">\uc2a4\ub9c8\ud2b8\ud329\ud1a0\ub9ac<\/a><a href=\"\/products\/\">IoT\uc194\ub8e8\uc158<\/a><a href=\"\/products\/\">AI\ud50c\ub7ab\ud3fc<\/a><a href=\"\/products\/\">\ud074\ub77c\uc6b0\ub4dc\uc11c\ube44\uc2a4<\/a>\n        <\/div>\n        <div class=\"nv-footer-col\">\n          <h4>\uc5f0\ub77d\ucc98<\/h4>\n          <p>\uc11c\uc6b8\ud2b9\ubcc4\uc2dc \uac15\ub0a8\uad6c \ud14c\ud5e4\ub780\ub85c 123<\/p>\n          <p>\ub125\uc2a4\ud2b8\ube44\uc804 \ube4c\ub529 8\uce35<\/p>\n          <p>TEL: 02-1234-5678<\/p>\n          <p>FAX: 02-1234-5679<\/p>\n          <p>Email: info@nextvision.co.kr<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"nv-footer-bottom\">\n      <p>&copy; 2025 NextVision Technology. All rights reserved.<\/p>\n    <\/div>\n  <\/div>\n<\/footer>\n<button class=\"nv-top-btn\" id=\"nvTopBtn\" aria-label=\"\ub9e8 \uc704\ub85c\">\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M18 15l-6-6-6 6\"\/><\/svg>\n<\/button>\n\n<!-- ==================== JAVASCRIPT ==================== -->\n<script>\n(function() {\n  'use strict';\n\n  \/\/ ============================================\n  \/\/ ============================================\n  \/\/ CURSOR FOLLOWER ANIMATION WITH PREMIUM HOVER EXPANSION\n  \/\/ ============================================\n  const follower = document.getElementById('nvCursorFollower');\n  if (follower) {\n    let followerX = 0, followerY = 0;\n    let targetX = 0, targetY = 0;\n    let isMoving = false;\n    \n    document.addEventListener('mousemove', e => {\n      targetX = e.clientX;\n      targetY = e.clientY;\n      if (!isMoving) {\n        follower.style.opacity = '1';\n        isMoving = true;\n      }\n    });\n    \n    document.addEventListener('mouseleave', () => {\n      follower.style.opacity = '0';\n      isMoving = false;\n    });\n    \n    function animateCursor() {\n      followerX += (targetX - followerX) * 0.15;\n      followerY += (targetY - followerY) * 0.15;\n      follower.style.left = `${followerX}px`;\n      follower.style.top = `${followerY}px`;\n      requestAnimationFrame(animateCursor);\n    }\n    requestAnimationFrame(animateCursor);\n\n    \/\/ Expand follower on hovering interactive elements\n    const hoverTargets = '.nv-nav-link, .nv-logo, .nv-cta-btn, .nv-biz-card, .nv-product-card, .nv-stat-card, .nv-tab-btn, .nv-form-submit, .nv-notice-row, .nv-contact-card';\n    document.addEventListener('mouseover', e => {\n      const target = e.target.closest(hoverTargets);\n      if (target) {\n        follower.style.width = '48px';\n        follower.style.height = '48px';\n        follower.style.background = 'transparent';\n        follower.style.border = '2px solid var(--nv-primary)';\n        follower.style.boxShadow = '0 0 20px rgba(0, 212, 255, 0.6)';\n      }\n    });\n    document.addEventListener('mouseout', e => {\n      const target = e.target.closest(hoverTargets);\n      if (target && (!e.relatedTarget || !target.contains(e.relatedTarget))) {\n        follower.style.width = '24px';\n        follower.style.height = '24px';\n        follower.style.background = 'radial-gradient(circle, var(--nv-primary) 0%, rgba(124, 58, 237, 0.4) 60%, transparent 100%)';\n        follower.style.border = 'none';\n        follower.style.boxShadow = '0 0 15px rgba(0, 212, 255, 0.4)';\n      }\n    });\n  }\n\n  \/\/ ========== Character Decrypt Scramble Effect ==========\n  function scrambleText(element, finalString, duration = 800) {\n    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+{}[]';\n    const start = performance.now();\n    const originalText = finalString || element.innerText;\n    const length = originalText.length;\n    \n    if (element._scrambleAnim) cancelAnimationFrame(element._scrambleAnim);\n    \n    function update(time) {\n      const elapsed = time - start;\n      const progress = Math.min(elapsed \/ duration, 1);\n      \n      const solvedCount = Math.floor(progress * length);\n      let display = '';\n      for (let i = 0; i < length; i++) {\n        if (i < solvedCount) {\n          display += originalText[i];\n        } else {\n          display += chars[Math.floor(Math.random() * chars.length)];\n        }\n      }\n      element.innerText = display;\n      \n      if (progress < 1) {\n        element._scrambleAnim = requestAnimationFrame(update);\n      } else {\n        element.innerText = originalText;\n      }\n    }\n    element._scrambleAnim = requestAnimationFrame(update);\n  }\n\n  \/\/ Scramble Hero Title on Load\n  const heroTitle = document.querySelector('.nv-support-hero h1');\n  if (heroTitle) {\n    scrambleText(heroTitle, \"\uace0\uac1d\uc9c0\uc6d0\", 1200);\n  }\n\n  \/\/ Scramble Notice Rows on Hover\n  document.addEventListener('mouseover', e => {\n    const row = e.target.closest('.nv-notice-row');\n    if (row && !row._hovering) {\n      row._hovering = true;\n      const titleEl = row.querySelector('.nv-notice-title');\n      if (titleEl) {\n        if (!titleEl._originalText) titleEl._originalText = titleEl.innerText;\n        scrambleText(titleEl, titleEl._originalText, 700);\n      }\n    }\n  });\n  document.addEventListener('mouseout', e => {\n    const row = e.target.closest('.nv-notice-row');\n    if (row) {\n      if (!e.relatedTarget || !row.contains(e.relatedTarget)) {\n        row._hovering = false;\n      }\n    }\n  });\n\n  \/\/ ========== Floating Background Parallax Blobs ==========\n  document.addEventListener('mousemove', e => {\n    const cx = e.clientX - window.innerWidth \/ 2;\n    const cy = e.clientY - window.innerHeight \/ 2;\n    gsap.to('.nv-blob-1', { x: cx * 0.04, y: cy * 0.04, duration: 2.5, ease: 'power2.out' });\n    gsap.to('.nv-blob-2', { x: -cx * 0.03, y: -cy * 0.03, duration: 2.5, ease: 'power2.out' });\n  });\n  window.addEventListener('scroll', () => {\n    const sy = window.scrollY;\n    gsap.to('.nv-blob-1', { y: sy * 0.12, duration: 1.2, ease: 'power1.out', overwrite: 'auto' });\n    gsap.to('.nv-blob-2', { y: -sy * 0.08, duration: 1.2, ease: 'power1.out', overwrite: 'auto' });\n  });\n\n  \/\/ ========== Dynamic Drawing Neon Borders ==========\n  function initDrawingBorders() {\n    const targets = document.querySelectorAll('.nv-contact-card, .nv-tab-btn, .nv-form-submit');\n    targets.forEach(el => {\n      if (!el.querySelector('.nv-border-svg')) {\n        const radius = window.getComputedStyle(el).borderRadius || '12px';\n        const svg = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'svg');\n        svg.setAttribute('class', 'nv-border-svg');\n        const rect = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\n        rect.setAttribute('class', 'nv-border-rect');\n        rect.setAttribute('x', '0');\n        rect.setAttribute('y', '0');\n        rect.setAttribute('width', '100%');\n        rect.setAttribute('height', '100%');\n        rect.setAttribute('rx', radius);\n        rect.setAttribute('ry', radius);\n        svg.appendChild(rect);\n        el.appendChild(svg);\n      }\n      \n      const rect = el.querySelector('.nv-border-rect');\n      const updateBorders = () => {\n        const w = el.offsetWidth;\n        const h = el.offsetHeight;\n        const p = 2 * (w + h);\n        rect.style.strokeDasharray = p;\n        rect.style.strokeDashoffset = p;\n      };\n      \n      updateBorders();\n      el._borderUpdate = updateBorders;\n      \n      el.addEventListener('mouseenter', () => {\n        const w = el.offsetWidth;\n        const h = el.offsetHeight;\n        const p = 2 * (w + h);\n        rect.style.strokeDasharray = p;\n        rect.style.strokeDashoffset = 0;\n      });\n      el.addEventListener('mouseleave', () => {\n        const w = el.offsetWidth;\n        const h = el.offsetHeight;\n        const p = 2 * (w + h);\n        rect.style.strokeDasharray = p;\n        rect.style.strokeDashoffset = p;\n      });\n    });\n  }\n  \n  initDrawingBorders();\n  window.addEventListener('resize', () => {\n    document.querySelectorAll('.nv-contact-card, .nv-tab-btn, .nv-form-submit').forEach(el => {\n      if (el._borderUpdate) el._borderUpdate();\n    });\n  });\n\n  \/\/ ========== Sliding Tab Indicator ==========\n  const indicator = document.getElementById('nvTabIndicatorBar');\n  const activeBtn = document.querySelector('.nv-tab-btn.active');\n  \n  function updateIndicator(btn) {\n    if (!indicator || !btn) return;\n    const navEl = document.querySelector('.nv-tabs-nav');\n    const navRect = navEl.getBoundingClientRect();\n    const btnRect = btn.getBoundingClientRect();\n    \n    const left = btnRect.left - navRect.left + navEl.scrollLeft;\n    const width = btnRect.width;\n    \n    const offsetLeft = left + (width * 0.2);\n    const offsetWidth = width * 0.6;\n    \n    indicator.style.left = `${offsetLeft}px`;\n    indicator.style.width = `${offsetWidth}px`;\n  }\n  \n  if (activeBtn) {\n    setTimeout(() => updateIndicator(activeBtn), 150);\n  }\n  \n  window.addEventListener('resize', () => {\n    const currentActive = document.querySelector('.nv-tab-btn.active');\n    if (currentActive) updateIndicator(currentActive);\n  });\n\n  \/\/ ========== Common Nav\/Scroll ==========\n  const nav = document.getElementById('nvNav');\n  window.addEventListener('scroll', () => {\n    nav.classList.toggle('scrolled', window.scrollY > 50);\n    document.getElementById('nvTopBtn').classList.toggle('visible', window.scrollY > 300);\n    const prog = document.getElementById('nvScrollProgress');\n    if (prog) {\n      const h = document.documentElement.scrollHeight - window.innerHeight;\n      prog.style.width = (h > 0 ? (window.scrollY \/ h * 100) : 0) + '%';\n    }\n  });\n\n  \/\/ Hamburger\n  document.getElementById('nvHamburger').addEventListener('click', () => {\n    document.getElementById('nvMobileMenu').classList.toggle('open');\n    document.getElementById('nvHamburger').classList.toggle('open');\n  });\n\n  \/\/ Top button\n  document.getElementById('nvTopBtn').addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\n\n  \/\/ Page transition\n  document.querySelectorAll('a[href^=\"\/\"]').forEach(a => {\n    a.addEventListener('click', e => {\n      if (a.getAttribute('href') === window.location.pathname) return;\n      e.preventDefault();\n      const overlay = document.getElementById('nvPageTransition');\n      overlay.classList.add('active');\n      setTimeout(() => window.location.href = a.getAttribute('href'), 600);\n    });\n  });\n\n  \/\/ ========== GSAP ScrollTrigger ==========\n  gsap.registerPlugin(ScrollTrigger);\n  document.querySelectorAll('.nv-animate').forEach(el => {\n    gsap.from(el, {\n      y: 50, opacity: 0, duration: 1, ease: 'power3.out',\n      scrollTrigger: { trigger: el, start: 'top 85%', toggleActions: 'play none none none' }\n    });\n  });\n\n  \/\/ Stagger reveal contact cards on scroll\n  gsap.from('.nv-contact-card', {\n    y: 50,\n    opacity: 0,\n    duration: 0.8,\n    stagger: 0.15,\n    ease: 'power3.out',\n    scrollTrigger: {\n      trigger: '.nv-contact-cards',\n      start: 'top 85%',\n      toggleActions: 'play none none none'\n    },\n    clearProps: 'opacity,transform'\n  });\n\n  \/\/ ========== Interactive Vector Flow Field Canvas with Mouse Ripple & Shockwave ==========\n  const canvas = document.getElementById('nvHeroCanvas');\n  if (canvas) {\n    const ctx = canvas.getContext('2d');\n    let w, h, particles;\n    let mouse = { x: null, y: null, radius: 180 };\n    let shockwaves = [];\n\n    const heroSec = document.querySelector('.nv-support-hero');\n    if (heroSec) {\n      heroSec.addEventListener('mousemove', e => {\n        const rect = canvas.getBoundingClientRect();\n        mouse.x = e.clientX - rect.left;\n        mouse.y = e.clientY - rect.top;\n      });\n      heroSec.addEventListener('mouseleave', () => {\n        mouse.x = null;\n        mouse.y = null;\n      });\n      \/\/ Click shockwave trigger\n      heroSec.addEventListener('mousedown', e => {\n        const rect = canvas.getBoundingClientRect();\n        const clickX = e.clientX - rect.left;\n        const clickY = e.clientY - rect.top;\n        \n        \/\/ Spawn 2 concurrent ring shockwaves\n        shockwaves.push({\n          x: clickX,\n          y: clickY,\n          radius: 0,\n          maxRadius: 280,\n          force: 18,\n          active: true\n        });\n      });\n    }\n\n    function initCanvas() {\n      w = canvas.width = canvas.offsetWidth;\n      h = canvas.height = canvas.offsetHeight;\n      const count = Math.min(Math.floor(w * h \/ 9000), 100);\n      particles = [];\n      for (let i = 0; i < count; i++) {\n        particles.push({\n          x: Math.random() * w,\n          y: Math.random() * h,\n          vx: (Math.random() - 0.5) * 0.8,\n          vy: (Math.random() - 0.5) * 0.8,\n          r: Math.random() * 1.8 + 0.6,\n          baseColor: Math.random() > 0.45 ? '0, 212, 255' : '124, 58, 237',\n          colorWeight: 0.6,\n          originalR: Math.random() * 1.8 + 0.6\n        });\n      }\n    }\n\n    function drawCanvas() {\n      \/\/ Clear with translucency for motion blur trailing effect\n      ctx.fillStyle = 'rgba(10, 10, 26, 0.18)';\n      ctx.fillRect(0, 0, w, h);\n\n      \/\/ 1. Update active shockwaves\n      shockwaves = shockwaves.filter(sw => sw.active);\n      shockwaves.forEach(sw => {\n        sw.radius += 9;\n        if (sw.radius > sw.maxRadius) {\n          sw.active = false;\n        }\n      });\n\n      \/\/ 2. Animate flow field and forces on particles\n      particles.forEach((p, i) => {\n        \/\/ Core Flow Field (Trig vector noise)\n        const flowAngle = Math.sin(p.y * 0.0035) * Math.cos(p.x * 0.0035) * Math.PI * 2;\n        p.vx += Math.cos(flowAngle) * 0.035;\n        p.vy += Math.sin(flowAngle) * 0.035;\n\n        \/\/ Friction \/ speed limit\n        let speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy);\n        const normalMax = 1.2;\n        if (speed > normalMax) {\n          p.vx = (p.vx \/ speed) * (normalMax + (speed - normalMax) * 0.85);\n          p.vy = (p.vy \/ speed) * (normalMax + (speed - normalMax) * 0.85);\n        }\n\n        \/\/ Cursor Swirl Gravity Vortex\n        if (mouse.x !== null && mouse.y !== null) {\n          const dx = mouse.x - p.x;\n          const dy = mouse.y - p.y;\n          const dist = Math.sqrt(dx * dx + dy * dy);\n          \n          if (dist < mouse.radius) {\n            const force = (mouse.radius - dist) \/ mouse.radius;\n            const tx = -dy;\n            const ty = dx;\n            const len = Math.sqrt(tx * tx + ty * ty) || 1;\n            \n            p.vx += (tx \/ len) * force * 0.16;\n            p.vy += (ty \/ len) * force * 0.16;\n            p.vx += (dx \/ dist) * force * 0.04;\n            p.vy += (dy \/ dist) * force * 0.04;\n            \n            p.colorWeight = 1.0;\n          } else {\n            p.colorWeight -= (p.colorWeight - 0.6) * 0.05;\n          }\n        } else {\n          p.colorWeight -= (p.colorWeight - 0.6) * 0.05;\n        }\n\n        \/\/ Apply click shockwaves\n        shockwaves.forEach(sw => {\n          const dx = p.x - sw.x;\n          const dy = p.y - sw.y;\n          const d = Math.sqrt(dx * dx + dy * dy) || 1;\n          const delta = Math.abs(d - sw.radius);\n          \n          if (delta < 28) {\n            const pushFactor = (28 - delta) \/ 28;\n            const force = sw.force * pushFactor;\n            p.vx += (dx \/ d) * force * 0.6;\n            p.vy += (dy \/ d) * force * 0.6;\n            p.r = p.originalR * 2.5;\n            p.colorWeight = 1.0;\n          }\n        });\n\n        p.r -= (p.r - p.originalR) * 0.08;\n\n        p.x += p.vx;\n        p.y += p.vy;\n\n        if (p.x < -10) p.x = w + 10;\n        if (p.x > w + 10) p.x = -10;\n        if (p.y < -10) p.y = h + 10;\n        if (p.y > h + 10) p.y = -10;\n\n        ctx.beginPath();\n        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n        ctx.fillStyle = `rgba(${p.baseColor}, ${p.colorWeight})`;\n        ctx.fill();\n\n        for (let j = i + 1; j < particles.length; j++) {\n          const dx = p.x - particles[j].x;\n          const dy = p.y - particles[j].y;\n          const dist = Math.sqrt(dx * dx + dy * dy);\n          if (dist < 100) {\n            ctx.beginPath();\n            ctx.moveTo(p.x, p.y);\n            ctx.lineTo(particles[j].x, particles[j].y);\n            ctx.strokeStyle = `rgba(0, 212, 255, ${(1 - dist \/ 100) * 0.09 * p.colorWeight})`;\n            ctx.lineWidth = 0.5;\n            ctx.stroke();\n          }\n        }\n      });\n      requestAnimationFrame(drawCanvas);\n    }\n\n    initCanvas();\n    drawCanvas();\n    window.addEventListener('resize', initCanvas);\n  }\n\n  \/\/ ========== Staggered Entrance timeline ==========\n  const heroTl = gsap.timeline();\n  heroTl.from('.nv-hero-breadcrumb', { y: 20, opacity: 0, duration: 0.8, delay: 0.2 })\n        .from('.nv-support-hero-sub', { y: 20, opacity: 0, duration: 0.8 }, '-=0.4');\n\n  \/\/ ========== Tab Switching ==========\n  const tabBtns = document.querySelectorAll('.nv-tab-btn');\n  const tabContents = {\n    notices: document.getElementById('tabNotices'),\n    faq: document.getElementById('tabFaq'),\n    contact: document.getElementById('tabContact')\n  };\n\n  tabBtns.forEach(btn => {\n    btn.addEventListener('click', () => {\n      const target = btn.dataset.tab;\n\n      tabBtns.forEach(b => b.classList.remove('active'));\n      btn.classList.add('active');\n\n      updateIndicator(btn);\n\n      Object.values(tabContents).forEach(tc => {\n        if (tc.classList.contains('active')) {\n          tc.style.opacity = '0';\n          tc.style.transform = 'translateY(20px)';\n          setTimeout(() => {\n            tc.classList.remove('active');\n            tc.style.display = 'none';\n          }, 300);\n        }\n      });\n\n      setTimeout(() => {\n        const el = tabContents[target];\n        el.style.display = 'block';\n        el.style.opacity = '0';\n        el.style.transform = 'translateY(20px)';\n        el.offsetHeight;\n        el.classList.add('active');\n        el.style.opacity = '1';\n        el.style.transform = 'translateY(0)';\n\n        if (target === 'faq') {\n          gsap.from('.nv-faq-item', {\n            y: 35, opacity: 0, duration: 0.6, stagger: 0.08, ease: 'back.out(1.2)', overwrite: 'auto', clearProps: 'opacity,transform'\n          });\n        } else if (target === 'notices') {\n          gsap.from('.nv-notice-row', {\n            y: 25, opacity: 0, duration: 0.6, stagger: 0.06, ease: 'power2.out', overwrite: 'auto', clearProps: 'opacity,transform'\n          });\n        } else if (target === 'contact') {\n          gsap.from('.nv-form-group', {\n            y: 20, opacity: 0, duration: 0.5, stagger: 0.05, ease: 'power2.out', overwrite: 'auto', clearProps: 'opacity,transform'\n          });\n        }\n      }, 350);\n    });\n  });\n\n  function loadNotices() {\n    const loading = document.getElementById('noticeLoading');\n    const list = document.getElementById('noticeList');\n    const rows = document.getElementById('noticeRows');\n    const empty = document.getElementById('noticeEmpty');\n\n    const fetchOld = fetch('\/wp-json\/wp\/v2\/posts?categories=6&per_page=20').then(res => res.ok ? res.json() : []).catch(() => []);\n    const fetchNew = fetch('\/wp-json\/wp\/v2\/notice?per_page=20').then(res => res.ok ? res.json() : []).catch(() => []);\n\n    Promise.all([fetchOld, fetchNew])\n      .then(([oldPosts, newPosts]) => {\n        const posts = [...oldPosts, ...newPosts];\n        posts.sort((a, b) => new Date(b.date) - new Date(a.date));\n\n        loading.style.display = 'none';\n\n        if (posts.length === 0) {\n          empty.style.display = 'block';\n          return;\n        }\n\n        window.loadedNotices = posts;\n\n        let html = '';\n        posts.forEach((post) => {\n          const date = new Date(post.date);\n          const dateStr = date.getFullYear() + '.' +\n            String(date.getMonth() + 1).padStart(2, '0') + '.' +\n            String(date.getDate()).padStart(2, '0');\n          html += '<a href=\"#\" class=\"nv-notice-row\" onclick=\"openNotice(' + post.id + ', event);\">' +\n            '<span class=\"nv-notice-badge\">\uacf5\uc9c0<\/span>' +\n            '<span class=\"nv-notice-title\">' + post.title.rendered + '<\/span>' +\n            '<span class=\"nv-notice-date\">' + dateStr + '<\/span>' +\n            '<\/a>';\n        });\n\n        rows.innerHTML = html;\n        list.style.display = 'block';\n\n        gsap.from('.nv-notice-row', {\n          y: 25,\n          opacity: 0,\n          duration: 0.6,\n          stagger: 0.06,\n          ease: 'power2.out',\n          overwrite: 'auto',\n          clearProps: 'opacity,transform'\n        });\n\n        checkUrlNotice();\n      })\n      .catch(err => {\n        console.warn('\uacf5\uc9c0\uc0ac\ud56d \ub85c\ub529 \uc2e4\ud328:', err);\n        loading.style.display = 'none';\n        empty.style.display = 'block';\n      });\n  }\n\n  function checkUrlNotice() {\n    const urlParams = new URLSearchParams(window.location.search);\n    const noticeId = urlParams.get('notice');\n    if (noticeId) {\n      openNotice(noticeId);\n    }\n  }\n\n  window.openNotice = function(id, event) {\n    if (event) event.preventDefault();\n    \n    const post = (window.loadedNotices || []).find(p => p.id == id);\n    if (post) {\n      showNoticeModal(post);\n    } else {\n      fetch('\/wp-json\/wp\/v2\/posts\/' + id)\n        .then(res => {\n          if (!res.ok) throw new Error('Not standard post');\n          return res.json();\n        })\n        .then(fetchedPost => {\n          showNoticeModal(fetchedPost);\n        })\n        .catch(() => {\n          fetch('\/wp-json\/wp\/v2\/notice\/' + id)\n            .then(res => {\n              if (!res.ok) throw new Error('Notice CPT not found');\n              return res.json();\n            })\n            .then(fetchedPost => {\n              showNoticeModal(fetchedPost);\n            })\n            .catch(err => {\n              console.warn('\uacf5\uc9c0\uc0ac\ud56d \uac1c\ubcc4 \ub85c\ub529 \uc2e4\ud328:', err);\n            });\n        });\n    }\n  };\n\n  window.showNoticeModal = function(post) {\n    const modal = document.getElementById('noticeModal');\n    const titleEl = document.getElementById('noticeModalTitle');\n    const dateEl = document.getElementById('noticeModalDate');\n    const contentEl = document.getElementById('noticeModalContent');\n\n    titleEl.innerHTML = post.title.rendered;\n    \n    const date = new Date(post.date);\n    const dateStr = date.getFullYear() + '.' +\n      String(date.getMonth() + 1).padStart(2, '0') + '.' +\n      String(date.getDate()).padStart(2, '0');\n    dateEl.innerHTML = '\uc791\uc131\uc77c: ' + dateStr;\n    \n    contentEl.innerHTML = post.content.rendered;\n    \n    modal.classList.add('show');\n    document.body.style.overflow = 'hidden';\n  };\n\n  window.closeNoticeModal = function() {\n    const modal = document.getElementById('noticeModal');\n    modal.classList.remove('show');\n    document.body.style.overflow = '';\n    \n    const url = new URL(window.location.href);\n    url.searchParams.delete('notice');\n    window.history.replaceState({}, '', url);\n  };\n\n  loadNotices();\n\n  \/\/ ========== FAQ Toggle ==========\n  window.toggleFaq = function(questionEl) {\n    const item = questionEl.closest('.nv-faq-item');\n    const wasActive = item.classList.contains('active');\n\n    document.querySelectorAll('.nv-faq-item').forEach(fi => {\n      fi.classList.remove('active');\n    });\n\n    if (!wasActive) {\n      item.classList.add('active');\n    }\n  };\n\n  \/\/ ========== Contact Form Validation & Submit ==========\n  const form = document.getElementById('contactForm');\n\n  function showError(id, msg) {\n    const el = document.getElementById(id);\n    el.textContent = msg;\n    el.classList.add('visible');\n    const input = el.previousElementSibling;\n    if (input && (input.classList.contains('nv-form-input') || input.classList.contains('nv-form-select') || input.classList.contains('nv-form-textarea'))) {\n      input.classList.add('error');\n    }\n  }\n\n  function clearErrors() {\n    document.querySelectorAll('.nv-form-error').forEach(e => {\n      e.textContent = '';\n      e.classList.remove('visible');\n    });\n    document.querySelectorAll('.nv-form-input, .nv-form-select, .nv-form-textarea').forEach(i => {\n      i.classList.remove('error');\n    });\n  }\n\n  document.querySelectorAll('.nv-form-input, .nv-form-select, .nv-form-textarea').forEach(input => {\n    input.addEventListener('input', () => {\n      input.classList.remove('error');\n      const errEl = input.nextElementSibling;\n      if (errEl && errEl.classList.contains('nv-form-error')) {\n        errEl.textContent = '';\n        errEl.classList.remove('visible');\n      }\n    });\n  });\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    clearErrors();\n\n    let valid = true;\n    const name = document.getElementById('formName').value.trim();\n    const email = document.getElementById('formEmail').value.trim();\n    const phone = document.getElementById('formPhone').value.trim();\n    const type = document.getElementById('formType').value;\n    const subject = document.getElementById('formSubject').value.trim();\n    const message = document.getElementById('formMessage').value.trim();\n    const privacy = document.getElementById('formPrivacy').checked;\n\n    if (!name) { showError('errName', '\uc774\ub984\uc744 \uc785\ub825\ud574 \uc8fc\uc138\uc694.'); valid = false; }\n    if (!email) { showError('errEmail', '\uc774\uba54\uc77c\uc744 \uc785\ub825\ud574 \uc8fc\uc138\uc694.'); valid = false; }\n    else if (!\/^[^s@]+@[^s@]+.[^s@]+$\/.test(email)) { showError('errEmail', '\uc62c\ubc14\ub978 \uc774\uba54\uc77c \ud615\uc2dd\uc774 \uc544\ub2d9\ub2c8\ub2e4.'); valid = false; }\n    if (!phone) { showError('errPhone', '\uc5f0\ub77d\ucc98\ub97c \uc785\ub825\ud574 \uc8fc\uc138\uc694.'); valid = false; }\n    if (!type) { showError('errType', '\ubb38\uc758 \uc720\ud615\uc744 \uc120\ud0dd\ud574 \uc8fc\uc138\uc694.'); valid = false; }\n    if (!subject) { showError('errSubject', '\uc81c\ubaa9\uc744 \uc785\ub825\ud574 \uc8fc\uc138\uc694.'); valid = false; }\n    if (!message) { showError('errMessage', '\ubb38\uc758 \ub0b4\uc6a9\uc744 \uc785\ub825\ud574 \uc8fc\uc138\uc694.'); valid = false; }\n    if (!privacy) { showError('errPrivacy', '\uac1c\uc778\uc815\ubcf4 \uc218\uc9d1 \ubc0f \uc774\uc6a9\uc5d0 \ub3d9\uc758\ud574 \uc8fc\uc138\uc694.'); valid = false; }\n\n    if (valid) {\n      const modal = document.getElementById('successModal');\n      modal.classList.add('show');\n      document.body.style.overflow = 'hidden';\n      form.reset();\n    }\n  });\n\n  window.closeSuccessModal = function() {\n    const modal = document.getElementById('successModal');\n    modal.classList.remove('show');\n    document.body.style.overflow = '';\n  };\n\n  document.getElementById('successModal').addEventListener('click', function(e) {\n    if (e.target === this) closeSuccessModal();\n  });\n\n  \/\/ ========== Contact Card Tilt & Spotlight Effect ==========\n  document.querySelectorAll('.nv-contact-card').forEach(card => {\n    card.addEventListener('mousemove', e => {\n      const rect = card.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const y = e.clientY - rect.top;\n      \n      card.style.setProperty('--mouse-x', `${x}px`);\n      card.style.setProperty('--mouse-y', `${y}px`);\n      \n      const centerX = rect.width \/ 2;\n      const centerY = rect.height \/ 2;\n      const rotateX = (y - centerY) \/ centerY * -5;\n      const rotateY = (x - centerX) \/ centerX * 5;\n      card.style.transform = 'translateY(-8px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';\n    });\n    card.addEventListener('mouseleave', () => {\n      card.style.transform = '';\n    });\n  });\n\n  \/\/ ========== Form Input Focus Glow Ripple ==========\n  document.querySelectorAll('.nv-form-input, .nv-form-textarea').forEach(input => {\n    input.addEventListener('focus', () => {\n      gsap.fromTo(input, { boxShadow: '0 0 0 0px rgba(0,212,255,0.3)' },\n        { boxShadow: '0 0 0 3px rgba(0,212,255,0.15), 0 0 20px rgba(0,212,255,0.1)', duration: 0.4, ease: 'power2.out' });\n    });\n  });\n\n\/\/ ========== Premium Magnetic Interactive Elements ==========\n  function initMagneticElements() {\n    const magneticEls = document.querySelectorAll('.nv-nav-link, .nv-logo, .nv-tab-btn, .nv-form-submit, .nv-success-close, .nv-cta-btn');\n    magneticEls.forEach(el => {\n      el.addEventListener('mousemove', e => {\n        const rect = el.getBoundingClientRect();\n        const factor = el.classList.contains('nv-nav-link') || el.classList.contains('nv-logo') ? 0.25 : 0.35;\n        const x = (e.clientX - rect.left - (rect.width \/ 2)) * factor;\n        const y = (e.clientY - rect.top - (rect.height \/ 2)) * factor;\n        \n        gsap.to(el, {\n          x: x,\n          y: y,\n          duration: 0.3,\n          ease: 'power2.out',\n          overwrite: 'auto'\n        });\n      });\n      el.addEventListener('mouseleave', () => {\n        gsap.to(el, {\n          x: 0,\n          y: 0,\n          duration: 0.6,\n          ease: 'elastic.out(1.1, 0.6)',\n          overwrite: 'auto'\n        });\n      });\n    });\n  }\n  if (typeof gsap !== 'undefined') {\n    initMagneticElements();\n  }\n\n  \/\/ ========== Staggered Idle Floating & Scroll Depth Parallax ==========\n  function initAliveEffects() {\n    \/\/ 1. Idle Floating Animation (with random staggered delays and durations)\n    const floatTargets = document.querySelectorAll('.nv-faq-item, .nv-notice-row, .nv-contact-card');\n    floatTargets.forEach((card, i) => {\n      card.style.animation = `nvIdleFloat ${6 + (i % 3) * 1.5}s ease-in-out infinite`;\n      card.style.animationDelay = `${-(i * 1.3)}s`;\n    });\n\n    \/\/ 2. Scroll Depth Parallax Shift\n    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {\n      try {\n        \/\/ Offset alternating cards to drift slightly faster or slower on scroll\n        gsap.utils.toArray('.nv-faq-list, .nv-notice-table-wrap, .nv-contact-grid').forEach((container) => {\n          const cards = container.querySelectorAll('.nv-faq-item, .nv-notice-row, .nv-contact-card');\n          cards.forEach((card, i) => {\n            const shiftY = (i % 2 === 0 ? 30 : -30);\n            gsap.to(card, {\n              y: shiftY,\n              ease: 'none',\n              scrollTrigger: {\n                trigger: container,\n                start: 'top bottom',\n                end: 'bottom top',\n                scrub: 1.5\n              }\n            });\n          });\n        });\n      } catch (err) {\n        console.warn(\"Scroll Parallax Init failed:\", err.message);\n      }\n    }\n  }\n\n  if (typeof gsap !== 'undefined') {\n    initAliveEffects();\n  }\n\n})();\n<\/script>\n\n\n<!-- Neon Gradient Definition for SVG Borders -->\n<svg style=\"position: absolute; width: 0; height: 0; overflow: hidden;\" width=\"0\" height=\"0\">\n  <defs>\n    <linearGradient id=\"nv-rect-gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n      <stop offset=\"0%\" stop-color=\"#00d4ff\" \/>\n      <stop offset=\"100%\" stop-color=\"#7c3aed\" \/>\n    <\/linearGradient>\n  <\/defs>\n<\/svg>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-25","page","type-page","status-publish"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":5,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/pages\/25\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/lightgreen-rabbit-170337.hostingersite.com\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}