{"file":"HeroBanner-styles-1.mjs-CXrMFolm.js","mappings":"","names":[],"sources":["../../../../components/HeroBanner.vue"],"sourcesContent":["<template>\n  <header class=\"hero-banner\">\n    <div class=\"hero-container\">\n      <div class=\"hero-badge-wrap\">\n        <span class=\"hero-badge royal-badge\">👑 {{ region.dong }} 학군 맞춤 1:1 전문 지도</span>\n        <span class=\"hero-subbadge\">2026 개정 교육과정 완벽 반영</span>\n      </div>\n      \n      <h1 class=\"hero-title\">\n        <span class=\"region-highlight\">{{ region.fullName }}</span><br />\n        <span class=\"subject-highlight\">{{ grade }} {{ subjectName }}</span> 1:1 맞춤 과외\n      </h1>\n\n      <p class=\"hero-desc\">\n        {{ region.dong }} 인근 학교별 기출 분석부터 서술형 조건 감점 0점화까지!<br />\n        우리 아이의 취약점을 1:1로 진단하고 <strong>성적 1등급 역전</strong>을 이끌어냅니다.\n      </p>\n\n      <div class=\"hero-cta-group\">\n        <a href=\"#consult-section\" class=\"btn-hero-primary\">\n          <span>🎯 {{ region.dong }} 1:1 무료 방문·진단 모의수업 신청</span>\n        </a>\n        <div class=\"hero-call-info\">\n          <span class=\"call-icon\">📞</span>\n          <span class=\"call-text\">실시간 학습상담 <strong>1588-0000</strong></span>\n        </div>\n      </div>\n\n      <div class=\"hero-tags\">\n        <span class=\"tag-item\">#{{ region.dong }}과외</span>\n        <span class=\"tag-item\">#{{ region.dong }}{{ subjectName }}</span>\n        <span class=\"tag-item\">#{{ grade }}내신대비</span>\n        <span class=\"tag-item\">#서술형감점방지</span>\n        <span class=\"tag-item\">#1대1밀착코칭</span>\n      </div>\n    </div>\n  </header>\n</template>\n\n<script setup>\ndefineProps({\n  region: {\n    type: Object,\n    required: true\n  },\n  grade: {\n    type: String,\n    default: '중학생'\n  },\n  subjectName: {\n    type: String,\n    default: '영어'\n  }\n})\n</script>\n\n<style scoped>\n.hero-banner {\n  background: var(--hero-gradient, linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%));\n  color: #ffffff;\n  padding: clamp(40px, 8vw, 80px) 16px clamp(35px, 6vw, 60px);\n  text-align: center;\n  position: relative;\n  overflow: hidden;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n}\n\n.hero-banner::before {\n  content: \"\";\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: radial-gradient(circle at 50% 20%, rgba(217, 119, 6, 0.15) 0%, transparent 60%);\n  pointer-events: none;\n}\n\n.hero-container {\n  max-width: 900px;\n  margin: 0 auto;\n  position: relative;\n  z-index: 1;\n}\n\n.hero-badge-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n}\n\n.hero-badge {\n  display: inline-block;\n  padding: 6px 14px;\n  font-size: clamp(0.78rem, 2.2vw, 0.9rem);\n  font-weight: 700;\n  border-radius: 9999px;\n  background: var(--accent-color, #d97706);\n  color: #ffffff;\n  letter-spacing: -0.3px;\n}\n\n.hero-subbadge {\n  display: inline-block;\n  padding: 6px 12px;\n  font-size: clamp(0.75rem, 2vw, 0.85rem);\n  background: rgba(255, 255, 255, 0.15);\n  backdrop-filter: blur(4px);\n  border-radius: 9999px;\n  color: #e2e8f0;\n}\n\n.hero-title {\n  font-size: clamp(1.65rem, 5vw, 2.85rem);\n  font-weight: 900;\n  line-height: 1.3;\n  margin-bottom: 18px;\n  word-break: keep-all;\n  letter-spacing: -0.8px;\n}\n\n.region-highlight {\n  color: var(--hero-region-color, #cbd5e1);\n  font-size: 0.85em;\n  font-weight: 700;\n}\n\n.subject-highlight {\n  color: var(--accent-light, #fbbf24);\n  text-decoration: underline;\n  text-underline-offset: 6px;\n}\n\n.hero-desc {\n  font-size: clamp(0.92rem, 2.6vw, 1.15rem);\n  line-height: 1.65;\n  color: #e2e8f0;\n  margin-bottom: 30px;\n  word-break: keep-all;\n}\n\n.hero-cta-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n  margin-bottom: 26px;\n}\n\n.btn-hero-primary {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: clamp(14px, 3.5vw, 18px) clamp(20px, 5vw, 36px);\n  font-size: clamp(0.95rem, 2.8vw, 1.2rem);\n  font-weight: 800;\n  color: #ffffff;\n  background: var(--hero-btn-bg, linear-gradient(135deg, #d97706 0%, #b45309 100%));\n  border-radius: var(--card-radius, 12px);\n  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.35);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  width: 100%;\n  max-width: 480px;\n  min-height: 48px;\n}\n\n.btn-hero-primary:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.45);\n}\n\n.hero-call-info {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: clamp(0.85rem, 2.2vw, 0.95rem);\n  color: #cbd5e1;\n}\n\n.hero-call-info strong {\n  color: #ffffff;\n  font-size: 1.1em;\n}\n\n.hero-tags {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.tag-item {\n  font-size: clamp(0.72rem, 1.8vw, 0.82rem);\n  padding: 4px 10px;\n  background: rgba(255, 255, 255, 0.08);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 6px;\n  color: #cbd5e1;\n}\n</style>\n"],"version":3}