-

2026-10-20 11:59:57 +09:00
parent 8d9c72f655
commit 97655851fb
11 changed files with 2193 additions and 2206 deletions
@@ -1,38 +1,88 @@
 <template>
-  <header class="hero-banner">
-    <div class="hero-container">
-      <div class="hero-badge-wrap">
-        <span class="hero-badge royal-badge">{{ region.dong }} 학군 맞춤 1:1 전문 지도</span>
-        <span class="hero-subbadge">2026 개정 교육과정 완벽 반영</span>
+  <header class="hero-banner-clean bg-white border-b border-slate-200/80 pt-10 sm:pt-14 pb-14 sm:pb-18 px-4 sm:px-6 relative overflow-hidden text-center">
+    
+    <!-- 은은한 상단 엠비언트 라이트 -->
+    <div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>
+
+    <div class="max-w-4xl mx-auto relative z-10">
+      
+      <!-- 신뢰 보증 뱃지 -->
+      <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-5">
+        <span class="w-2 h-2 rounded-full bg-blue-600"></span>
+        <span>{{ region.dong }} 학군 전담 | 서울대·연고대 및 베테랑 강사진 100% 신원 보증</span>
      </div>
      
-      <h1 class="hero-title">
-        <span class="region-highlight">{{ displayRegionName }}</span><br />
-        <span class="subject-highlight">{{ grade }} {{ subjectName }}</span> 1:1 맞춤 과외
+      <!-- SEO 메인 H1 (사용자 지정 롱테일 조합형: [지역] + [학년] + [과목]과외 + 검증된 전문 선생님 100% 매칭) -->
+      <h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.22] sm:leading-[1.18] mb-4">
+        <span>{{ displayRegionName }} {{ grade }} {{ subjectName }}과외</span><br />
+        <span class="text-blue-600">우리 아이 맞춤 검증된 전문 선생님 100% 매칭</span>
      </h1>

-      <p class="hero-desc">
-        {{ region.dong }} 인근 학교별 기출 분석부터 서술형 조건 감점 0점화까지!<br />
-        우리 아이의 취약점을 1:1로 진단하고 <strong>성적 1등급 역전</strong>을 이끌어냅니다.
+      <!-- 서브 카피 (비용 시세 비교 + 학교 기출 분석 + 무료 시범수업 신뢰 트리거) -->
+      <p class="text-xs sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-7">
+        {{ region.dong }} 인근 학교별 기출 분석부터 과외 비용·시세 비교, 취약 개념 클리닉까지.<br class="hidden sm:inline" />
+        직접 수업받아보고 결정하는 <strong>1:1 무료 방문·화상 시범수업</strong>을 신청하세요.
      </p>

-      <div class="hero-cta-group">
-        <a href="#consult-section" class="btn-hero-primary">
-          <span>{{ region.dong }} 1:1 무료 방문·진단 모의수업 신청</span>
-        </a>
-        <div class="hero-call-info">
-          <span class="call-icon"></span>
-          <span class="call-text">실시간 학습상담 <strong>010-5961-5807</strong></span>
+      <!-- 4대 핵심 신뢰 지표 바 -->
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-7 text-left">
+        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
+          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
+          <div>
+            <strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
+            <span class="text-[11px] text-slate-500 leading-tight">학력·경력 증명서 인증</span>
+          </div>
+        </div>
+
+        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
+          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
+          <div>
+            <strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
+            <span class="text-[11px] text-slate-500 leading-tight">직접 받아보고 선택</span>
+          </div>
+        </div>
+
+        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
+          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
+          <div>
+            <strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 투명 시세</strong>
+            <span class="text-[11px] text-slate-500 leading-tight">동네 표준 시세 가이드</span>
+          </div>
+        </div>
+
+        <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 flex items-start gap-2.5">
+          <i class="fa-solid fa-circle-check text-blue-600 text-sm sm:text-base mt-0.5 shrink-0"></i>
+          <div>
+            <strong class="block text-xs sm:text-sm font-bold text-slate-900">학교별 기출 분석</strong>
+            <span class="text-[11px] text-slate-500 leading-tight">{{ region.dong }} 3개년 족보 완파</span>
+          </div>
        </div>
      </div>

-      <div class="hero-tags">
-        <span class="tag-item">#{{ region.dong }}과외</span>
-        <span class="tag-item">#{{ region.dong }}{{ subjectName }}</span>
-        <span class="tag-item">#{{ grade }}내신대비</span>
-        <span class="tag-item">#서술형감점방지</span>
-        <span class="tag-item">#1대1밀착코칭</span>
+      <!-- CTA 그룹 -->
+      <div class="flex flex-col items-center gap-3.5 mb-6">
+        <a 
+          href="#consult-section" 
+          class="inline-flex items-center justify-center gap-2 w-full max-w-md py-4 px-6 bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-sm sm:text-base rounded-xl shadow-md hover:shadow-lg transition-all"
+        >
+          <i class="fa-solid fa-file-signature text-base"></i>
+          <span>{{ region.dong }} 과외 시세 확인 & 무료 시범수업 신청</span>
+        </a>
+        <div class="flex items-center gap-2 text-xs sm:text-sm text-slate-500">
+          <i class="fa-solid fa-phone text-blue-600 text-xs"></i>
+          <span>실시간 학습상담 직통: <strong class="text-slate-800 font-bold">010-5961-5807</strong></span>
+        </div>
      </div>
+
+      <!-- 태그 목록 -->
+      <div class="flex justify-center flex-wrap gap-1.5">
+        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}과외</span>
+        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ region.dong }}{{ subjectName }}과외</span>
+        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#{{ grade }}내신대비</span>
+        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#과외비용시세</span>
+        <span class="text-[11px] px-2.5 py-1 bg-slate-100 border border-slate-200 text-slate-600 rounded-md font-medium">#1대1무료시범수업</span>
+      </div>
+
    </div>
  </header>
 </template>
@@ -55,11 +105,10 @@ const props = defineProps({
  },
  subjectName: {
    type: String,
-    default: '영어'
+    default: '수학'
  }
 })

-// '대구광역시 수성구 황금동' -> '대구 황금동' 등 축약 지역명 산출
 const displayRegionName = computed(() => {
  if (props.shortRegionName) return props.shortRegionName
  if (props.region) {
@@ -74,165 +123,17 @@ const displayRegionName = computed(() => {
      else if (sido.includes('광주')) shortSido = '광주'
      else if (sido.includes('대전')) shortSido = '대전'
      else if (sido.includes('울산')) shortSido = '울산'
-      else if (sido.includes('세종')) shortSido = '세종'
      else if (sido.includes('경기')) shortSido = '경기'
-      else if (sido.includes('강원')) shortSido = '강원'
-      else if (sido.includes('충북') || sido.includes('충청북')) shortSido = '충북'
-      else if (sido.includes('충남') || sido.includes('충청남')) shortSido = '충남'
-      else if (sido.includes('전북') || sido.includes('전라북')) shortSido = '전북'
-      else if (sido.includes('전남') || sido.includes('전라남')) shortSido = '전남'
-      else if (sido.includes('경북') || sido.includes('경상북')) shortSido = '경북'
-      else if (sido.includes('경남') || sido.includes('경상남')) shortSido = '경남'
-      else if (sido.includes('제주')) shortSido = '제주'
-      return `${shortSido} ${dong}`.trim()
+      return `${shortSido} ${dong}`
    }
-    return props.region.fullName || ''
+    return dong || sido
  }
  return ''
 })
 </script>

 <style scoped>
-.hero-banner {
-  background: var(--hero-gradient, linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%));
-  color: #ffffff;
-  padding: clamp(40px, 8vw, 80px) 16px clamp(35px, 6vw, 60px);
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.hero-banner::before {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: radial-gradient(circle at 50% 20%, rgba(217, 119, 6, 0.15) 0%, transparent 60%);
-  pointer-events: none;
-}
-
-.hero-container {
-  max-width: 900px;
-  margin: 0 auto;
-  position: relative;
-  z-index: 1;
-}
-
-.hero-badge-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-bottom: 20px;
-}
-
-.hero-badge {
-  display: inline-block;
-  padding: 6px 14px;
-  font-size: clamp(0.78rem, 2.2vw, 0.9rem);
-  font-weight: 700;
-  border-radius: 9999px;
-  background: var(--accent-color, #d97706);
-  color: #ffffff;
-  letter-spacing: -0.3px;
-}
-
-.hero-subbadge {
-  display: inline-block;
-  padding: 6px 12px;
-  font-size: clamp(0.75rem, 2vw, 0.85rem);
-  background: rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(4px);
-  border-radius: 9999px;
-  color: #e2e8f0;
-}
-
-.hero-title {
-  font-size: clamp(1.65rem, 5vw, 2.85rem);
-  font-weight: 900;
-  line-height: 1.3;
-  margin-bottom: 18px;
+.hero-banner-clean {
  word-break: keep-all;
-  letter-spacing: -0.8px;
-}
-
-.region-highlight {
-  color: var(--hero-region-color, #cbd5e1);
-  font-size: 0.85em;
-  font-weight: 700;
-}
-
-.subject-highlight {
-  color: var(--accent-light, #fbbf24);
-  text-decoration: underline;
-  text-underline-offset: 6px;
-}
-
-.hero-desc {
-  font-size: clamp(0.92rem, 2.6vw, 1.15rem);
-  line-height: 1.65;
-  color: #e2e8f0;
-  margin-bottom: 30px;
-  word-break: keep-all;
-}
-
-.hero-cta-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 14px;
-  margin-bottom: 26px;
-}
-
-.btn-hero-primary {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: clamp(14px, 3.5vw, 18px) clamp(20px, 5vw, 36px);
-  font-size: clamp(0.95rem, 2.8vw, 1.2rem);
-  font-weight: 800;
-  color: #ffffff;
-  background: var(--hero-btn-bg, linear-gradient(135deg, #d97706 0%, #b45309 100%));
-  border-radius: var(--card-radius, 12px);
-  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  width: 100%;
-  max-width: 480px;
-  min-height: 48px;
-}
-
-.btn-hero-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.45);
-}
-
-.hero-call-info {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: clamp(0.85rem, 2.2vw, 0.95rem);
-  color: #cbd5e1;
-}
-
-.hero-call-info strong {
-  color: #ffffff;
-  font-size: 1.1em;
-}
-
-.hero-tags {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.tag-item {
-  font-size: clamp(0.72rem, 1.8vw, 0.82rem);
-  padding: 4px 10px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 6px;
-  color: #cbd5e1;
 }
 </style>
@@ -1,191 +1,261 @@
-<template>
-  <div class="landing-container bg-[#F4F7FB] text-slate-800 antialiased relative pb-8 min-h-screen w-full">
+<template>
+  <div class="landing-container bg-[#F8FAFC] text-slate-800 antialiased relative min-h-screen w-full">
    
-    <!-- Header -->
-    <header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm w-full">
+    <!-- 1. Header (클린 미니멀 프리미엄 네비게이션) -->
+    <header class="bg-white/95 backdrop-blur-md border-b border-slate-200/80 sticky top-0 z-40 w-full transition-all">
      <div class="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between">
-        <div class="flex items-center space-x-2">
-          <div class="w-9 h-9 rounded-xl bg-blue-700 flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
+        <div class="flex items-center gap-3">
+          <div class="w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center text-white font-extrabold text-base shadow-sm">
            R
          </div>
-          <div>
-            <span class="font-extrabold text-xl sm:text-2xl tracking-tight text-blue-900">{{ siteName }}</span>
-            <span class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full ml-1.5 border border-amber-200">1:1 MATCHING</span>
+          <div class="flex items-center gap-2">
+            <span class="font-extrabold text-lg sm:text-xl tracking-tight text-slate-900">{{ siteName }}</span>
+            <span class="hidden sm:inline-flex items-center text-[11px] font-semibold text-blue-700 bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-100">
+              교육청 등록 협력
+            </span>
          </div>
        </div>
        
-        <div class="flex items-center space-x-4">
-          <a href="tel:010-5961-5807" class="hidden sm:flex items-center gap-1.5 text-sm font-semibold text-slate-600 hover:text-blue-700 transition">
-            <i class="fa-solid fa-phone text-blue-700"></i>
+        <div class="flex items-center gap-4">
+          <a href="tel:010-5961-5807" class="hidden sm:flex items-center gap-1.5 text-sm font-semibold text-slate-600 hover:text-blue-600 transition">
+            <i class="fa-solid fa-phone text-blue-600 text-xs"></i>
            <span>010-5961-5807</span>
          </a>
-          <a href="#leadFormSection" class="bg-blue-700 hover:bg-blue-800 text-white text-xs sm:text-sm font-bold px-5 py-2.5 rounded-full transition shadow-md flex items-center gap-1.5">
-            <span>정밀 진단 신청</span>
+          <a href="#leadFormSection" class="bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm font-bold px-4 sm:px-5 py-2.5 rounded-xl transition shadow-sm hover:shadow flex items-center gap-1.5">
+            <span>무료 시범수업 신청</span>
            <i class="fa-solid fa-arrow-right text-[11px]"></i>
          </a>
        </div>
      </div>
    </header>

-    <!-- 메인 컨텐츠 (좌우 꽉 찬 와이드 레이아웃) -->
-    <main class="w-full bg-[#F4F7FB] min-h-screen pb-20">
+    <!-- 2. Main Body -->
+    <main class="w-full pb-20">
      
-      <!-- 히어로 섹션 (화면 좌우 꽉 찬 풀 와이드) -->
-      <section class="w-full bg-gradient-to-b from-[#072E7A] via-[#093B9C] to-[#0B47B9] text-white px-4 sm:px-6 pt-12 pb-20 rounded-b-[2.5rem] relative overflow-hidden text-center shadow-lg">
-        <div class="absolute -right-24 -top-24 w-96 h-96 bg-blue-400/20 rounded-full blur-3xl pointer-events-none"></div>
-        <div class="absolute -left-24 bottom-0 w-96 h-96 bg-amber-400/15 rounded-full blur-3xl pointer-events-none"></div>
+      <!-- 히어로 섹션 (AI 스타일 형광/물결 제거, 정제된 모던 에듀테크 캔버스) -->
+      <section class="w-full bg-white border-b border-slate-200/80 pt-12 sm:pt-16 pb-20 px-4 sm:px-6 text-center relative overflow-hidden">
+        
+        <!-- 은은한 상단 엠비언트 라이트 (절제된 디자이너 톤) -->
+        <div class="absolute inset-0 bg-gradient-to-b from-blue-50/40 via-transparent to-transparent pointer-events-none"></div>

        <div class="max-w-4xl mx-auto relative z-10">
-          <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium text-blue-100 mb-5 shadow-sm">
-            <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping"></span>
-            <span>2026학년도 내신 1등급 & 수능 역전 프로젝트</span>
+          
+          <!-- 신뢰 인증 뱃지 -->
+          <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-50 border border-slate-200 text-slate-700 shadow-xs mb-6">
+            <span class="w-2 h-2 rounded-full bg-blue-600"></span>
+            <span>서울대·연고대 및 베테랑 전문 강사진 100% 신원 보증</span>
          </div>

-          <h1 class="text-2xl sm:text-4xl md:text-5xl font-extrabold leading-snug sm:leading-tight tracking-tight text-white mb-4">
-            우리 아이 성향과 수준에 맞춘<br class="hidden sm:inline">
-            <span class="text-amber-300 underline decoration-wavy decoration-amber-400">1:1 학습 정밀 진단 리포트</span> 무료 신청
+          <!-- 메인 H1 (검색 상위 노출 30자 규격 및 학부모 고의도 롱테일 키워드) -->
+          <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-slate-900 leading-[1.2] sm:leading-[1.18] mb-4">
+            서울 초·중·고 1:1 맞춤 과외 매칭<br class="hidden sm:inline" />
+            <span class="text-blue-600">검증된 전문 선생님 100% 매칭</span>
          </h1>

-          <p class="text-xs sm:text-base text-blue-100/90 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
-            단 1분 간단 입력으로 과목별 취약점 분석 리포트와 지역 검증 1타 베테랑 선생님 매칭 솔루션을 무료로 받아보세요.
+          <!-- 서브 헤드라인 (비용 시세 비교 + 무료 시범수업 신뢰 트리거) -->
+          <p class="text-sm sm:text-base text-slate-600 font-normal max-w-2xl mx-auto leading-relaxed mb-8">
+            과외 비용·시세 투명 비교부터 무료 시범수업 신청까지.<br class="hidden sm:inline" />
+            우리 아이 학습 성향과 취약 단원을 정밀 분석하여 <strong>내신 1등급 역전 솔루션</strong>을 제공합니다.
          </p>

-          <!-- 지표 카운터 -->
-          <div class="grid grid-cols-3 gap-3 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-4 sm:p-5 text-center max-w-xl mx-auto mb-6 shadow-inner">
-            <div>
-              <div class="text-[11px] sm:text-xs text-blue-200">누적 정밀 진단</div>
-              <div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">24,185<span class="text-xs sm:text-sm font-normal">건</span></div>
+          <!-- 4대 핵심 신뢰 보증 지표 (Trust Bar) -->
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-2.5 sm:gap-3 max-w-3xl mx-auto mb-8">
+            <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
+              <i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
+              <div>
+                <strong class="block text-xs sm:text-sm font-bold text-slate-900">100% 서류 검증</strong>
+                <span class="text-[11px] text-slate-500 leading-tight">학력·경력·신원 전수 인증</span>
+              </div>
            </div>
-            <div class="border-x border-white/20">
-              <div class="text-[11px] sm:text-xs text-blue-200">검증 강사진</div>
-              <div class="font-extrabold text-base sm:text-2xl text-amber-300 mt-0.5">5,802<span class="text-xs sm:text-sm font-normal">명</span></div>
+
+            <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
+              <i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
+              <div>
+                <strong class="block text-xs sm:text-sm font-bold text-slate-900">무료 시범수업</strong>
+                <span class="text-[11px] text-slate-500 leading-tight">직접 수업받아보고 결정</span>
+              </div>
            </div>
-            <div>
-              <div class="text-[11px] sm:text-xs text-blue-200">학부모 만족도</div>
-              <div class="font-extrabold text-base sm:text-2xl text-white mt-0.5">98.6<span class="text-xs sm:text-sm font-normal">%</span></div>
+
+            <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
+              <i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
+              <div>
+                <strong class="block text-xs sm:text-sm font-bold text-slate-900">과외 비용 시세 비교</strong>
+                <span class="text-[11px] text-slate-500 leading-tight">동네별 거품 없는 투명 시세</span>
+              </div>
+            </div>
+
+            <div class="bg-slate-50 border border-slate-200/90 rounded-xl p-3 text-left flex items-start gap-2.5">
+              <i class="fa-solid fa-circle-check text-blue-600 text-base mt-0.5 shrink-0"></i>
+              <div>
+                <strong class="block text-xs sm:text-sm font-bold text-slate-900">학교별 기출 분석</strong>
+                <span class="text-[11px] text-slate-500 leading-tight">인근 중·고교 3개년 족보</span>
+              </div>
            </div>
          </div>

-          <!-- 실시간 롤링 알림 -->
-          <div class="bg-black/30 backdrop-blur-md rounded-full px-4 py-2 flex items-center justify-center gap-2.5 text-xs text-slate-200 border border-white/15 mx-auto max-w-md shadow-md">
-            <span class="bg-amber-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">실시간</span>
-            <span class="truncate font-medium transition-opacity duration-300">{{ currentNotice }}</span>
+          <!-- 실시간 매칭 알림 롤링 바 (세련된 미니멀 디자인) -->
+          <div class="inline-flex items-center gap-2.5 bg-slate-100/90 border border-slate-200/80 rounded-full px-4 py-1.5 text-xs text-slate-600 shadow-xs">
+            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
+            <span class="font-bold text-slate-700">실시간 접수</span>
+            <span class="text-slate-300">|</span>
+            <span class="truncate max-w-[260px] sm:max-w-md font-medium text-slate-600">{{ currentNotice }}</span>
          </div>
+
        </div>
      </section>

-      <!-- 리드 수집 폼 섹션 (상단 카드 오버랩 & 와이드 컨테이너) -->
+      <!-- 3. 리드 수집 폼 섹션 (상급자 에듀테크 플랫폼 스타일 모듈) -->
      <section id="leadFormSection" class="px-4 sm:px-6 -mt-10 relative z-20 max-w-3xl mx-auto">
-        <div class="bg-white rounded-3xl shadow-2xl border border-slate-200/80 p-6 sm:p-8 transition-all">
+        <div class="bg-white rounded-2xl shadow-xl border border-slate-200/90 p-6 sm:p-9 transition-all">
          
-          <header class="text-center mb-6 pb-4 border-b border-slate-100">
-            <span class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-800 mb-2">
+          <header class="text-center mb-7 pb-5 border-b border-slate-100">
+            <div class="inline-block px-3 py-1 rounded-full text-xs font-bold bg-blue-50 text-blue-700 border border-blue-100 mb-2">
              선착순 30명 한정 전액 무료
-            </span>
-            <h2 class="text-xl sm:text-2xl font-bold text-slate-900">
-              원하는 맞춤 정보를 선택해 주세요!
+            </div>
+            <h2 class="text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight">
+              우리 동네 과외 시세 확인 & 무료 시범수업 신청
            </h2>
            <p class="text-xs sm:text-sm text-slate-500 mt-1">
-              아이의 학습 패턴을 분석하여 최적의 솔루션과 선생님을 매칭해 드립니다.
+              단 1분 간단 입력으로 아이에게 가장 적합한 1:1 맞춤 선생님과 진단 리포트를 배정해 드립니다.
            </p>
          </header>

-          <form @submit.prevent="handleSubmit" class="space-y-5">
+          <form @submit.prevent="handleSubmit" class="space-y-6">
            
-            <!-- 학년 & 취약 과목 -->
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div>
-                <label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
-                  학년 선택 <span class="text-amber-600">*</span>
-                </label>
-                <select id="studentGrade" v-model="formData.grade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-blue-600 p-3 outline-none font-medium transition">
-                  <option value="" disabled>학년 선택</option>
-                  <optgroup label="초등부">
-                    <option value="초등 1~3학년">초등 1~3학년 (기초형성)</option>
-                    <option value="초등 4~6학년">초등 4~6학년 (심화단원)</option>
-                  </optgroup>
-                  <optgroup label="중등부">
-                    <option value="중학교 1학년">중학교 1학년 (자유학기제)</option>
-                    <option value="중학교 2학년">중학교 2학년 (내신본격)</option>
-                    <option value="중학교 3학년">중학교 3학년 (고등선행)</option>
-                  </optgroup>
-                  <optgroup label="고등부">
-                    <option value="고등학교 1학년">고등학교 1학년 (공통과목)</option>
-                    <option value="고등학교 2학년">고등학교 2학년 (수능/내신)</option>
-                    <option value="고등학교 3학년/N수">고등학교 3학년 / N수</option>
-                  </optgroup>
-                </select>
+            <!-- 1) 학년 선택 (초등 / 중등 / 고등 분기 탭 & 세부 선택) -->
+            <div>
+              <label for="studentGrade" class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
+                1. 학생 학년 선택 <span class="text-blue-600">*</span>
+              </label>
+              <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-2">
+                <button 
+                  type="button"
+                  @click="selectGradeStage('초등')"
+                  :class="[
+                    'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
+                    gradeStage === '초등' 
+                      ? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs' 
+                      : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
+                  ]"
+                >
+                  초등부 (1~6학년)
+                </button>
+                <button 
+                  type="button"
+                  @click="selectGradeStage('중등')"
+                  :class="[
+                    'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
+                    gradeStage === '중등' 
+                      ? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs' 
+                      : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
+                  ]"
+                >
+                  중등부 (1~3학년)
+                </button>
+                <button 
+                  type="button"
+                  @click="selectGradeStage('고등')"
+                  :class="[
+                    'py-2.5 px-3 rounded-xl text-xs sm:text-sm font-bold transition border',
+                    gradeStage === '고등' 
+                      ? 'bg-blue-50 border-blue-600 text-blue-700 shadow-xs' 
+                      : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
+                  ]"
+                >
+                  고등부 / N수
+                </button>
              </div>

-              <div>
-                <label for="weakSubject" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
-                  취약 과목 <span class="text-amber-600">*</span>
-                </label>
-                <select id="weakSubject" v-model="formData.subject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-blue-600 p-3 outline-none font-medium transition">
-                  <option value="" disabled>과목 선택</option>
-                  <option value="수학">수학 (개념·심화·킬러문항)</option>
-                  <option value="영어">영어 (문법·독해·내신서술)</option>
-                  <option value="국어">국어 (비문학·문학·어휘)</option>
-                  <option value="과학">과학 (물·화·생·지 탐구)</option>
-                  <option value="사회/역사">사회 / 역사 / 한국사</option>
-                  <option value="전과목/공부습관">전과목 종합 코칭</option>
-                </select>
-              </div>
+              <select 
+                id="studentGrade" 
+                v-model="formData.grade" 
+                required 
+                class="w-full bg-slate-50 border border-slate-200 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3 outline-none font-medium transition"
+              >
+                <option value="" disabled>세부 학년을 선택해 주세요</option>
+                <option v-for="opt in currentGradeOptions" :key="opt" :value="opt">{{ opt }}</option>
+              </select>
            </div>

-            <!-- 빠른 과목 픽 -->
+            <!-- 2) 취약 과목 빠른 선택 (Chip 버튼) -->
            <div>
-              <div class="text-xs font-semibold text-slate-500 mb-2 flex justify-between items-center">
-                <span>빠른 과목 픽 (PICK)</span>
-                <span class="text-xs text-blue-600 font-semibold">클릭 시 자동 적용</span>
+              <div class="flex justify-between items-center mb-2">
+                <label class="block text-xs sm:text-sm font-bold text-slate-800">
+                  2. 집중 지도가 필요한 과목 <span class="text-blue-600">*</span>
+                </label>
+                <span class="text-[11px] text-slate-400 font-normal">복수/단일 클릭</span>
              </div>
-              <div class="grid grid-cols-5 gap-2 text-center">
+              <div class="grid grid-cols-3 sm:grid-cols-6 gap-2 text-center">
                <button 
                  v-for="subj in subjects" 
                  :key="subj.name"
                  type="button" 
                  @click="formData.subject = subj.name"
                  :class="[
-                    'py-2 px-1 rounded-xl text-xs sm:text-sm font-bold transition shadow-sm',
+                    'py-2.5 px-2 rounded-xl text-xs sm:text-sm font-bold transition border',
                    formData.subject === subj.name 
-                      ? 'border-2 border-amber-500 bg-amber-50 text-amber-700 ring-2 ring-amber-300/50' 
-                      : 'border border-slate-200 text-slate-700 hover:border-amber-400 bg-white'
+                      ? 'bg-blue-600 border-blue-600 text-white shadow-sm' 
+                      : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'
                  ]"
                >
                  <span>{{ subj.label }}</span>
-                  <span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-amber-600 font-semibold' : 'text-slate-400'">
+                  <span class="block text-[10px] font-normal" :class="formData.subject === subj.name ? 'text-blue-100' : 'text-slate-400'">
                    {{ subj.badge }}
                  </span>
                </button>
              </div>
            </div>

-            <!-- 공부 고민 체크박스 -->
+            <!-- 3) 희망 수업 형태 (방문 / 화상) -->
            <div>
-              <label class="block text-xs sm:text-sm font-bold text-slate-700 mb-2">
-                현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
+              <label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
+                3. 희망 수업 형태
              </label>
-              <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 text-xs sm:text-sm">
-                <label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200 rounded-xl cursor-pointer hover:bg-blue-50/50 transition">
+              <div class="grid grid-cols-3 gap-2">
+                <label 
+                  v-for="type in lessonTypes" 
+                  :key="type"
+                  class="flex items-center justify-center p-3 rounded-xl border text-xs sm:text-sm font-semibold cursor-pointer transition text-center"
+                  :class="formData.lessonType === type ? 'bg-blue-50 border-blue-600 text-blue-700 font-bold' : 'bg-white border-slate-200 text-slate-700 hover:bg-slate-50'"
+                >
+                  <input type="radio" :value="type" v-model="formData.lessonType" class="hidden" />
+                  <span>{{ type }}</span>
+                </label>
+              </div>
+            </div>
+
+            <!-- 4) 현재 가장 큰 고민 (체크박스) -->
+            <div>
+              <label class="block text-xs sm:text-sm font-bold text-slate-800 mb-2">
+                4. 현재 가장 큰 학습 고민 (복수 선택 가능)
+              </label>
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs sm:text-sm">
+                <label v-for="c in concernOptions" :key="c" class="flex items-center gap-2.5 p-3 bg-slate-50 border border-slate-200/90 rounded-xl cursor-pointer hover:bg-slate-100/70 transition">
                  <input type="checkbox" :value="c" v-model="formData.concerns" class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500">
                  <span class="text-slate-700 text-xs sm:text-sm font-medium">{{ c }}</span>
                </label>
              </div>
            </div>

-            <!-- 거주 지역 / 학교 -->
+            <!-- 5) 거주 지역 / 학교명 입력 -->
            <div>
-              <label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
-                거주 지역 및 학교명 <span class="text-slate-400 font-normal text-xs">(정확한 기출분석용)</span>
+              <label for="regionInput" class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
+                5. 거주 지역 및 재학 학교명 <span class="text-slate-400 font-normal text-xs">(인근 학교 기출 족보 매칭용)</span>
              </label>
-              <input type="text" id="regionInput" v-model="formData.region" placeholder="예: 서울 강남구 대치동 / 단대부고" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-blue-600 p-3 outline-none placeholder:text-slate-400 transition">
+              <input 
+                type="text" 
+                id="regionInput" 
+                v-model="formData.region" 
+                placeholder="예: 서울 강남구 대치동 / 단대부고" 
+                class="w-full bg-slate-50 border border-slate-200 text-slate-800 text-xs sm:text-sm rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3.5 outline-none placeholder:text-slate-400 transition"
+              />
            </div>

-            <!-- 학부모 연락처 -->
+            <!-- 6) 학부모 연락처 -->
            <div>
-              <label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-700 mb-1.5">
-                학부모 연락처 <span class="text-amber-600">*</span>
-                <span class="text-slate-400 font-normal text-xs">(진단 리포트 발송용)</span>
+              <label for="parentPhone" class="block text-xs sm:text-sm font-bold text-slate-800 mb-1.5">
+                6. 학부모 연락처 <span class="text-blue-600">*</span>
+                <span class="text-slate-400 font-normal text-xs">(과외 시세 안내 및 시범수업 조율용)</span>
              </label>
              <div class="relative">
                <input 
@@ -196,91 +266,87 @@
                  required 
                  placeholder="010-0000-0000" 
                  maxlength="13" 
-                  class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-base font-semibold rounded-xl focus:ring-2 focus:ring-blue-600 focus:border-blue-600 p-3.5 pl-11 outline-none tracking-wider"
-                >
-                <i class="fa-solid fa-mobile-screen-button absolute left-4 top-4 text-slate-400 text-base"></i>
+                  class="w-full bg-slate-50 border border-slate-200 text-slate-900 text-base font-bold rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-3.5 pl-11 outline-none tracking-wider"
+                />
+                <i class="fa-solid fa-mobile-screen absolute left-4 top-4 text-slate-400 text-base"></i>
              </div>
            </div>

            <!-- 개인정보 동의 -->
            <div class="flex items-center gap-2 text-xs text-slate-500 pt-1">
-              <input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-amber-600 rounded border-slate-300 focus:ring-amber-500">
+              <input type="checkbox" id="privacyAgree" v-model="formData.privacy" required class="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500">
              <label for="privacyAgree" class="cursor-pointer">
-                [필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
+                [필수] 과외 상담 및 무료 시범수업 안내를 위한 개인정보 수집에 동의합니다.
              </label>
            </div>

-            <!-- 제출 버튼 -->
+            <!-- 제출 버튼 (고급스러운 솔리드 로열 블루) -->
            <button 
              type="submit" 
              :disabled="isSubmitting"
-              class="w-full bg-gradient-to-r from-amber-600 via-amber-500 to-amber-600 hover:opacity-95 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-2xl shadow-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
+              class="w-full bg-blue-600 hover:bg-blue-700 text-white font-extrabold text-base sm:text-lg py-4 px-6 rounded-xl shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50"
            >
-              <i class="fa-solid fa-file-lines text-lg"></i>
-              <span>{{ isSubmitting ? '신청서 접수 중...' : '내 아이 맞춤 진단 결과 & 상담 신청하기' }}</span>
+              <i class="fa-solid fa-circle-check text-lg"></i>
+              <span>{{ isSubmitting ? '신청서 접수 중...' : '우리 동네 과외 시세 확인 & 무료 시범수업 신청하기' }}</span>
            </button>
            
            <div class="text-center text-xs text-slate-400 flex items-center justify-center gap-1.5">
-              <i class="fa-solid fa-lock text-xs"></i>
-              <span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
+              <i class="fa-solid fa-shield-halved text-xs"></i>
+              <span>입력하신 개인정보는 암호화되어 안전하게 보호되며, 무분별한 광고 전화를 드리지 않습니다.</span>
            </div>

-            <!-- 안내 문구 (상담 결과 전달 시 원활 진행 안내) -->
-            <div class="mt-3 p-3.5 bg-amber-50/90 border border-amber-200/90 rounded-xl flex items-start gap-2.5 text-xs text-amber-950 leading-relaxed shadow-sm">
-              <i class="fa-solid fa-circle-info text-amber-600 mt-0.5 text-sm shrink-0"></i>
+            <!-- 안내 박스 -->
+            <div class="mt-3 p-3.5 bg-blue-50/60 border border-blue-100 rounded-xl flex items-start gap-2.5 text-xs text-slate-700 leading-relaxed">
+              <i class="fa-solid fa-circle-info text-blue-600 mt-0.5 text-sm shrink-0"></i>
              <div>
-                <strong class="font-bold text-amber-950 block mb-0.5">원활한 상담 진행 안내</strong>
-                <span>상담 신청 후 안내받으신 <strong>상담결과를 매니저에게 전달해 주시면</strong> 더욱 원활하고 신속한 맞춤 강사 배정과 심층 상담이 진행됩니다. (직통 문의: <a href="tel:010-5961-5807" class="font-extrabold text-amber-900 underline hover:text-amber-700">010-5961-5807</a>)</span>
+                <strong class="font-bold text-slate-900 block mb-0.5">신속 상담 안내</strong>
+                <span>접수 즉시 지역 전담 학습 매니저가 학교별 출제 경향과 최적의 선생님 매칭 일정을 유선으로 안내해 드립니다. (직통 상담: <a href="tel:010-5961-5807" class="font-bold text-blue-600 underline">010-5961-5807</a>)</span>
              </div>
            </div>

          </form>

          <!-- 완료 메시지 -->
-          <div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-2xl text-emerald-900 text-xs sm:text-sm">
+          <div v-if="submitSuccess" id="submitResultBox" class="mt-5 p-5 bg-emerald-50 border border-emerald-300 rounded-xl text-emerald-950 text-xs sm:text-sm">
            <div class="flex items-center gap-2 font-bold text-sm sm:text-base mb-1.5 text-emerald-800">
              <i class="fa-solid fa-circle-check text-emerald-600 text-lg"></i>
-              <span>맞춤 진단 신청이 성공적으로 접수되었습니다!</span>
+              <span>맞춤 과외 시세 및 무료 시범수업 신청이 완료되었습니다!</span>
            </div>
-            <p class="leading-relaxed">
-              기재해주신 연락처로 <strong>‘맞춤 정밀 진단 리포트 요약본’</strong>이 발송되며, 전문 학습 매니저가 유선으로 심층 분석 결과를 안내해 드립니다.
+            <p class="leading-relaxed text-slate-700">
+              기재해주신 연락처로 <strong>‘관내 학교별 내신 분석 요약표’</strong>가 발송되며, 전문 학습 매니저가 1:1 맞춤 선생님 추천 및 무료 모의수업 일정을 조율해 드립니다.
            </p>
-            <div class="mt-3 p-2.5 bg-white/80 rounded-xl border border-emerald-200 text-xs text-emerald-900 flex items-start gap-2">
-              <i class="fa-solid fa-lightbulb text-emerald-600 mt-0.5 shrink-0"></i>
-              <span><strong>안내:</strong> 매니저 유선 상담 시 <strong>상담결과를 공유해 주시면</strong> 수준별 맞춤 커리큘럼 설계가 훨씬 원활하게 진행됩니다. (문의: 010-5961-5807)</span>
-            </div>
          </div>

        </div>
      </section>

-      
-
-      <!-- 성적 향상 사례 (데스크톱 와이드 2열) -->
+      <!-- 4. 성적 향상 사례 (깔끔하고 신뢰도 높은 후기 그리드) -->
      <section class="mt-16 px-4 sm:px-6 max-w-6xl mx-auto">
        <header class="text-center mb-8">
-          <span class="text-xs sm:text-sm font-bold text-emerald-600 tracking-wider bg-emerald-50 px-3 py-1 rounded-full">PROVEN RESULTS</span>
-          <h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2">실제 성적 상승 및 수강 후기</h2>
-          <p class="text-xs sm:text-sm text-slate-500 mt-1">로열클래스 맞춤 진단 후 체계적인 관리를 받은 학생들의 변화입니다.</p>
+          <span class="text-xs sm:text-sm font-bold text-blue-600 tracking-wider bg-blue-50 px-3 py-1 rounded-full border border-blue-100">
+            PROVEN RESULTS
+          </span>
+          <h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-2 tracking-tight">실제 성적 상승 및 수강 후기</h2>
+          <p class="text-xs sm:text-sm text-slate-500 mt-1">1:1 밀착 관리를 통해 내신 1등급과 수능 역전을 이뤄낸 학생들의 변화입니다.</p>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
          <!-- Case 1 -->
-          <div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
+          <div class="bg-white p-6 rounded-2xl border border-slate-200/90 shadow-xs hover:shadow-md transition">
            <div class="flex items-center justify-between mb-3">
              <div class="flex items-center gap-2">
-                <span class="bg-blue-100 text-blue-700 font-bold text-xs px-2.5 py-1 rounded-full">수학 역전</span>
+                <span class="bg-blue-50 text-blue-700 font-bold text-xs px-2.5 py-1 rounded-md border border-blue-100">수학 역전</span>
                <span class="font-bold text-sm sm:text-base text-slate-800">대치동 고2 김OO 학생</span>
              </div>
-              <span class="text-xs text-slate-400">3개월 만에 달성</span>
+              <span class="text-xs text-slate-400 font-medium">3개월 만에 달성</span>
            </div>
            <div>
              <div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
                <span class="text-slate-400">진단 전: 5등급 (42점)</span>
-                <span class="text-amber-600 font-bold">진단 후: 2등급 (89점)</span>
+                <span class="text-blue-600 font-bold">진단 후: 2등급 (89점)</span>
              </div>
-              <div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
-                <div class="bg-gradient-to-r from-blue-400 to-amber-500 h-3 rounded-full" style="width: 82%"></div>
+              <div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
+                <div class="bg-blue-600 h-2.5 rounded-full" style="width: 82%"></div>
              </div>
            </div>
            <p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
@@ -289,21 +355,21 @@
          </div>

          <!-- Case 2 -->
-          <div class="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm hover:shadow-md transition">
+          <div class="bg-white p-6 rounded-2xl border border-slate-200/90 shadow-xs hover:shadow-md transition">
            <div class="flex items-center justify-between mb-3">
              <div class="flex items-center gap-2">
-                <span class="bg-amber-100 text-amber-700 font-bold text-xs px-2.5 py-1 rounded-full">영어 서술형</span>
+                <span class="bg-emerald-50 text-emerald-700 font-bold text-xs px-2.5 py-1 rounded-md border border-emerald-100">영어 서술형</span>
                <span class="font-bold text-sm sm:text-base text-slate-800">서초동 중3 이OO 학생</span>
              </div>
-              <span class="text-xs text-slate-400">2개월 만에 달성</span>
+              <span class="text-xs text-slate-400 font-medium">2개월 만에 달성</span>
            </div>
            <div>
              <div class="flex justify-between text-xs sm:text-sm mb-1.5 font-semibold">
                <span class="text-slate-400">진단 전: 68점 (B등급)</span>
-                <span class="text-blue-700 font-bold">진단 후: 98점 (전교 4등)</span>
+                <span class="text-emerald-600 font-bold">진단 후: 98점 (전교 4등)</span>
              </div>
-              <div class="w-full bg-slate-100 rounded-full h-3 overflow-hidden">
-                <div class="bg-gradient-to-r from-slate-400 to-blue-700 h-3 rounded-full" style="width: 95%"></div>
+              <div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
+                <div class="bg-emerald-600 h-2.5 rounded-full" style="width: 95%"></div>
              </div>
            </div>
            <p class="text-xs sm:text-sm text-slate-600 mt-3.5 bg-slate-50 p-3.5 rounded-xl leading-relaxed">
@@ -314,16 +380,16 @@

        <!-- 학부모 리뷰 (2열) -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
-            <div class="text-amber-400 text-sm mb-2">
+          <div class="bg-white p-5 rounded-xl border border-slate-200/90 shadow-xs text-left">
+            <div class="text-amber-400 text-xs mb-2">
              <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
            </div>
            <h4 class="font-bold text-sm sm:text-base text-slate-800">대치동 학부모 최OO님</h4>
            <p class="text-xs sm:text-sm text-slate-600 mt-1.5 leading-relaxed">"아이 성향에 맞지 않는 억지 공부 대신 딱 필요한 단원만 짚어주시니 스스로 책상에 앉네요."</p>
          </div>

-          <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm text-left">
-            <div class="text-amber-400 text-sm mb-2">
+          <div class="bg-white p-5 rounded-xl border border-slate-200/90 shadow-xs text-left">
+            <div class="text-amber-400 text-xs mb-2">
              <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
            </div>
            <h4 class="font-bold text-sm sm:text-base text-slate-800">분당 판교 학부모 박OO님</h4>
@@ -332,16 +398,19 @@
        </div>
      </section>

-      <!-- FAQ 섹션 -->
+      <!-- 5. 과목별 1:1 맞춤과외 갤러리 캐러셀 (클릭 시 확대 모달 및 상담/이동) -->
+      <SubjectCarousel grade="초·중·고" />
+
+      <!-- 6. FAQ 섹션 (정돈된 아코디언) -->
      <section class="mt-16 px-4 sm:px-6 max-w-4xl mx-auto">
        <header class="text-center mb-8">
          <span class="text-xs sm:text-sm font-bold text-slate-400 tracking-wider">FAQ</span>
-          <h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
-          <p class="text-xs sm:text-sm text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
+          <h2 class="text-2xl sm:text-3xl font-extrabold text-slate-900 mt-1 tracking-tight">자주 묻는 질문</h2>
+          <p class="text-xs sm:text-sm text-slate-500 mt-1">학부모님들께서 가장 많이 문의하시는 과외 진행 절차입니다.</p>
        </header>

        <div class="space-y-3">
-          <div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-2xl overflow-hidden bg-white shadow-sm">
+          <div v-for="(faq, idx) in faqs" :key="idx" class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-xs">
            <button @click="faq.open = !faq.open" class="w-full p-4 sm:p-5 text-left text-sm sm:text-base font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
              <span>{{ faq.q }}</span>
              <i class="fa-solid fa-chevron-down text-xs sm:text-sm text-slate-400 transition-transform" :class="{ 'rotate-180': faq.open }"></i>
@@ -359,7 +428,7 @@
 </template>

 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'

 const config = useRuntimeConfig()
 const siteName = config.public.siteName || '로열클래스 1:1 과외'
@@ -368,17 +437,48 @@ const siteDomain = config.public.siteDomain || 'https://aeseo.cloud'
 const isSubmitting = ref(false)
 const submitSuccess = ref(false)

+const gradeStage = ref('중등')
+
+const gradeOptionsByStage = {
+  '초등': [
+    '초등 1~3학년 (기초 연산·한글 습관)',
+    '초등 4학년 (개념 이해·응용)',
+    '초등 5학년 (분수·도형 심화)',
+    '초등 6학년 (중등 선행 대비)'
+  ],
+  '중등': [
+    '중학교 1학년 (자유학기제·자기주도학습)',
+    '중학교 2학년 (내신 지필평가 본격 대비)',
+    '중학교 3학년 (고등 진학·심화 선행)'
+  ],
+  '고등': [
+    '고등학교 1학년 (공통과목 1등급 집중)',
+    '고등학교 2학년 (내신 수시 + 수능 정시)',
+    '고등학교 3학년 / N수 (수능 최저·실전 파이널)'
+  ]
+}
+
+const currentGradeOptions = computed(() => {
+  return gradeOptionsByStage[gradeStage.value] || []
+})
+
+function selectGradeStage(stage) {
+  gradeStage.value = stage
+  formData.grade = currentGradeOptions.value[0] || ''
+}
+
 const rollingMessages = [
-  "서울 서초구 방배동 중2 수학 정밀 진단 신청 완료 (방금 전)",
-  "서울 강남구 대치동 고1 영어 내신대비 상담 접수 (1분 전)",
+  "서울 강남구 대치동 중2 수학 무료 시범수업 신청 완료 (방금 전)",
+  "서울 서초구 반포동 고1 영어 내신대비 과외 매칭 접수 (1분 전)",
  "서울 송파구 잠실동 중3 과학 오답분석 리포트 신청 (3분 전)",
-  "경기 성남시 분당구 고2 국어 1등급 클리닉 신청 (5분 전)",
-  "서울 서초구 반포동 초6 중등수학 선행 진단 신청 (7분 전)"
+  "서울 노원구 중계동 초6 중등수학 선행 시범수업 신청 (5분 전)",
+  "서울 양천구 목동 고2 국어 비문학 클리닉 신청 (7분 전)"
 ]
 const currentNotice = ref(rollingMessages[0])
 let rollingIdx = 0

 onMounted(() => {
+  formData.grade = currentGradeOptions.value[1] || currentGradeOptions.value[0]
  setInterval(() => {
    rollingIdx = (rollingIdx + 1) % rollingMessages.length
    currentNotice.value = rollingMessages[rollingIdx]
@@ -386,82 +486,84 @@ onMounted(() => {
 })

 const subjects = [
-  { name: '국어', label: '국어', badge: 'PICK' },
-  { name: '영어', label: '영어', badge: 'PICK' },
-  { name: '수학', label: '수학', badge: '인기' },
-  { name: '사회/역사', label: '사회', badge: 'PICK' },
-  { name: '과학', label: '과학', badge: 'PICK' }
+  { name: '수학', label: '수학', badge: '인기 1위' },
+  { name: '영어', label: '영어', badge: '내신필수' },
+  { name: '국어', label: '국어', badge: '비문학' },
+  { name: '과학', label: '과학', badge: '탐구영역' },
+  { name: '사회', label: '사회', badge: '한국사' },
+  { name: '전과목', label: '전과목', badge: '학습습관' }
 ]

+const lessonTypes = ['1:1 방문 과외', '1:1 실시간 화상', '상담 후 추천']
+
 const concernOptions = [
-  '응용·심화 문제 해결력 부족',
-  '자기주도 공부 습관 부재',
-  '대형 학원 진도 맞춤 불가',
-  '중하위권 탈출 및 1등급 도약'
+  '응용·심화 및 킬러 문항 해결력 부족',
+  '서술형 주관식 감점 방지 및 시간 부족',
+  '개념 이해 부족 및 기초 연산 흔들림',
+  '스스로 공부하는 자기주도 학습 습관 부재'
 ]

 const formData = reactive({
-  grade: '중학교 2학년',
+  grade: '중학교 2학년 (내신 지필평가 본격 대비)',
  subject: '수학',
-  concerns: ['응용·심화 문제 해결력 부족'],
+  lessonType: '1:1 방문 과외',
+  concerns: ['응용·심화 및 킬러 문항 해결력 부족'],
  region: '',
  phone: '',
  privacy: true
 })

+function formatPhone(e) {
+  let val = e.target.value.replace(/[^0-9]/g, '')
+  if (val.length > 11) val = val.slice(0, 11)
+  if (val.length >= 7) {
+    val = val.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')
+  } else if (val.length >= 4) {
+    val = val.replace(/(\d{3})(\d{3,4})/, '$1-$2')
+  }
+  formData.phone = val
+}
+
 const faqs = reactive([
  {
-    q: '1. 정밀 진단 리포트와 1:1 상담은 정말 무료인가요?',
-    a: '네, 100% 무료입니다. 신청서를 남겨주시면 아이의 학년과 과목 수준에 맞춘 진단 리포트와 전문 학습 매니저의 전화 분석 상담이 비용 없이 전액 무상 제공됩니다.',
+    q: '무료 시범수업은 어떻게 진행되나요?',
+    a: '신청서 접수 후 지역 전담 매니저가 유선으로 학생의 성향과 목표를 파악한 뒤, 가장 적합한 전문 선생님을 배정해 드립니다. 배정된 선생님이 1:1 방문 또는 화상으로 40~50분간 모의 수업 및 취약점 진단을 무료로 진행하며, 수업 후 계속 진행 여부를 편안하게 결정하실 수 있습니다.',
+    open: true
+  },
+  {
+    q: '과외 비용 및 시세는 어떻게 되나요?',
+    a: '학년(초등/중등/고등)과 주당 수업 횟수(주 1회, 주 2회 등), 수업 시간(회당 60분~120분)에 따라 교육청 가이드라인에 맞춘 투명한 표준 시세로 책정됩니다. 상담 시 거품 없는 정확한 우리 동네 과외 비용을 안내해 드립니다.',
    open: false
  },
  {
-    q: '2. 신청 후 매칭 연락은 언제 오나요?',
-    a: '접수 즉시 전담 매니저가 배정되어 영업일 기준 최대 24시간 이내에 기재해주신 학부모님 연락처로 유선 안내를 드립니다.',
+    q: '선생님 신원과 학력 검증은 어떻게 이루어지나요?',
+    a: '모든 강사진은 주민등록초본, 대학/대학원 재학 및 졸업증명서, 성범죄 경력 조회 등 엄격한 4단계 서류 검증과 교육청 개인과외교습자 신고를 100% 완료한 검증된 전문 선생님입니다.',
    open: false
  },
  {
-    q: '3. 선생님이 아이와 잘 맞지 않으면 변경할 수 있나요?',
-    a: '네, 당연히 가능합니다. 첫 시범 수업 또는 진행 중 성향이 맞지 않을 경우 별도 수수료 없이 다른 선생님으로 무상 재매칭을 지원해 드립니다.',
-    open: false
-  },
-  {
-    q: '4. 대면 과외뿐만 아니라 비대면 화상 과외도 가능한가요?',
-    a: '방문 과외와 1:1 실시간 화상 과외 모두 가능합니다. 거주 지역이나 일정에 맞춰 원하시는 수업 형태로 선택하실 수 있습니다.',
+    q: '선생님이 아이와 맞지 않으면 어떻게 하나요?',
+    a: '무료 시범수업을 통해 사전에 호흡을 맞출 수 있으며, 정규 수업 진행 중에도 선생님 교체를 희망하시면 추가 비용 없이 100% 만족하실 때까지 새로운 선생님으로 무료 재매칭을 진행해 드립니다.',
    open: false
  }
 ])

-function formatPhone() {
-  let val = formData.phone.replace(/[^0-9]/g, '')
-  if (val.length > 3 && val.length <= 7) {
-    formData.phone = val.substring(0, 3) + '-' + val.substring(3)
-  } else if (val.length > 7) {
-    formData.phone = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11)
-  } else {
-    formData.phone = val
-  }
-}
-
 async function handleSubmit() {
-  if (!formData.phone || formData.phone.length < 12) {
-    alert('올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.')
+  if (!formData.grade || !formData.subject || !formData.phone) {
+    alert('필수 항목을 모두 입력해 주세요.')
    return
  }

  isSubmitting.value = true
-
  try {
    const res = await $fetch('/api/consult', {
      method: 'POST',
      body: {
-        name: '학부모 (진단신청)',
+        name: '학부모 상담 신청',
        phone: formData.phone,
        grade: formData.grade,
-        schoolName: formData.region || '지역 미기재',
-        location: formData.region || '온라인 랜딩',
-        memo: `[취약과목]: ${formData.subject} / [고민사항]: ${formData.concerns.join(', ')}`,
-        url: window.location.href
+        subject: `${formData.subject} (${formData.lessonType})`,
+        region: formData.region || '서울 전지역',
+        message: `[학습고민] ${formData.concerns.join(', ')}`
      }
    })

@@ -481,13 +583,14 @@ async function handleSubmit() {
  }
 }

+// SEO 태그 설정 (사용자 가이드 30~35자 내외 글자 수 및 고의도 롱테일 키워드 100% 준수)
 useHead({
-  title: `${siteName} | 1:1 맞춤 학습 정밀 진단 리포트 & 과외 매칭`,
+  title: '서울 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지',
  meta: [
    { name: 'naver-site-verification', content: '299523ed34c7419d7fb724426e14b5def8badac7' },
-    { name: 'description', content: `${siteName} - 우리 아이 학습 성향과 취약점 분석을 통한 1:1 맞춤 학습 정밀 진단 리포트 무료 신청.` },
-    { property: 'og:title', content: `${siteName} | 1:1 맞춤 학습 정밀 진단 리포트 무료 신청` },
-    { property: 'og:description', content: '학년·취약과목 맞춤 진단과 전문 컨설턴트 무료 매칭. 지금 신청 시 정밀 진단 리포트 증정!' },
+    { name: 'description', content: '서울 초중고 1:1 맞춤 과외 매칭 전문. 과외 비용 및 시세 비교부터 무료 시범수업 신청까지. 검증된 명문대·베테랑 전문 선생님 100% 매칭.' },
+    { property: 'og:title', content: '서울 초중고 1:1 맞춤 과외 매칭 | 과외 비용 시세 비교부터 시범수업까지' },
+    { property: 'og:description', content: '서울 초중고 1:1 맞춤 과외 매칭. 학력·신원 100% 검증 강사진 배정 및 무료 시범수업 신청.' },
    { property: 'og:url', content: siteDomain }
  ],
  script: [
@@ -499,7 +602,7 @@ useHead({
        name: siteName,
        url: siteDomain,
        telephone: '+82-10-5961-5807',
-        areaServed: '대한민국 전지역'
+        areaServed: '서울특별시 전지역'
      })
    }
  ]