847 lines
22 KiB
Vue
847 lines
22 KiB
Vue
<template>
|
|
<section class="subject-gallery-section" aria-label="과목별 1:1 맞춤과외 갤러리">
|
|
<div class="gallery-container">
|
|
|
|
<!-- 섹션 헤더 -->
|
|
<div class="gallery-header">
|
|
<span class="gallery-badge">
|
|
<i class="fa-solid fa-sparkles mr-1"></i>
|
|
{{ regionDong ? `${regionDong} ` : '' }}과목별 1:1 전문 전담팀
|
|
</span>
|
|
<h2 class="gallery-title">
|
|
취약 과목을 1등급 전략 과목으로 역전시키는<br />
|
|
<strong>1:1 전담 과목별 클래스</strong>
|
|
</h2>
|
|
<p class="gallery-desc">
|
|
원하시는 과목 카드를 클릭하시면 1:1 맞춤 커리큘럼과 상세 안내를 페이지에서 크게 확인하실 수 있습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 가로 1열 5칸 캐러셀 레이아웃 -->
|
|
<div class="subject-grid-221">
|
|
<div
|
|
v-for="(item, idx) in subjectList"
|
|
:key="item.name"
|
|
class="gallery-card"
|
|
:class="`card-item-${idx + 1}`"
|
|
@click="openModal(item)"
|
|
>
|
|
<figure class="card-inner m-0">
|
|
<div class="img-wrap">
|
|
<img
|
|
:src="item.path"
|
|
:alt="`${shortSido || defaultSido} ${gradeShort || computedGradeShort} ${item.keyName} 과외 · ${regionDong || defaultDong} ${item.name}`"
|
|
width="1080"
|
|
height="1080"
|
|
decoding="async"
|
|
class="subject-img"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
/>
|
|
<div class="zoom-overlay">
|
|
<span class="zoom-btn">
|
|
<i class="fa-solid fa-magnifying-glass-plus"></i>
|
|
<span>상세 보기</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<figcaption class="card-info">
|
|
<div class="card-subject-name">
|
|
<h3 class="sub-name m-0 text-inherit font-extrabold">{{ shortSido || defaultSido }} {{ gradeShort || computedGradeShort }} {{ item.name }}</h3>
|
|
<span class="sub-grade">{{ grade }}</span>
|
|
</div>
|
|
<p class="card-subject-desc">{{ item.desc }}</p>
|
|
<NuxtLink :to="getSubjectPageUrl(item.subjectKey)" class="card-action" @click.stop>
|
|
<span>자세히 보기 & 신청</span>
|
|
<i class="fa-solid fa-arrow-right"></i>
|
|
</NuxtLink>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 클릭 시 페이지에 크게 나오는 상세 모달 (Lightbox Modal) -->
|
|
<Teleport to="body">
|
|
<Transition name="modal-fade">
|
|
<div
|
|
v-if="selectedItem"
|
|
class="modal-backdrop"
|
|
@click.self="closeModal"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div class="modal-card">
|
|
<!-- 닫기 버튼 -->
|
|
<button
|
|
type="button"
|
|
class="modal-close-btn"
|
|
@click="closeModal"
|
|
aria-label="닫기"
|
|
>
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
|
|
<div class="modal-grid">
|
|
<!-- 모달 좌측: 고해상도 생성 이미지 원본 -->
|
|
<div class="modal-img-col">
|
|
<img
|
|
:src="selectedItem.path"
|
|
:alt="`${shortSido || defaultSido} ${gradeShort || computedGradeShort} ${selectedItem.keyName} 과외`"
|
|
width="1080"
|
|
height="1080"
|
|
decoding="async"
|
|
class="modal-main-img"
|
|
/>
|
|
</div>
|
|
|
|
<!-- 모달 우측: 상세 설명 및 액션 버튼 -->
|
|
<div class="modal-content-col">
|
|
<div class="modal-header">
|
|
<span class="modal-pill">{{ regionDong || '관내' }} 1:1 밀착 코칭</span>
|
|
<h3 class="modal-title">
|
|
{{ selectedItem.name }}
|
|
<span class="text-sub">1:1 맞춤 마스터 클래스</span>
|
|
</h3>
|
|
<p class="modal-slogan">{{ selectedItem.slogan }}</p>
|
|
</div>
|
|
|
|
<div class="modal-points">
|
|
<div class="point-row" v-for="(pt, pIdx) in selectedItem.details" :key="pIdx">
|
|
<span class="point-num">0{{ pIdx + 1 }}</span>
|
|
<div>
|
|
<strong class="point-head">{{ pt.title }}</strong>
|
|
<p class="point-body">{{ pt.desc }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 모달 하단 액션 버튼 그룹 -->
|
|
<div class="modal-actions">
|
|
<button
|
|
type="button"
|
|
class="btn-modal-apply"
|
|
@click="applyWithSubject(selectedItem.name)"
|
|
>
|
|
<i class="fa-solid fa-paper-plane mr-2"></i>
|
|
<span>{{ selectedItem.name }} 무료 상담 신청하기</span>
|
|
</button>
|
|
<NuxtLink
|
|
:to="getSubjectPageUrl(selectedItem.subjectKey)"
|
|
class="btn-modal-link"
|
|
@click="closeModal"
|
|
>
|
|
<span>전용 페이지 이동</span>
|
|
<i class="fa-solid fa-chevron-right ml-1"></i>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const props = defineProps({
|
|
regionDong: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
shortSido: {
|
|
type: String,
|
|
default: '서울'
|
|
},
|
|
grade: {
|
|
type: String,
|
|
default: '중학생'
|
|
},
|
|
gradeShort: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
currentSubject: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const router = useRouter()
|
|
const defaultDong = '대치동'
|
|
const defaultSido = '서울'
|
|
const computedGradeShort = computed(() => {
|
|
if (props.gradeShort) return props.gradeShort
|
|
return (props.grade || '').includes('초등') ? '초등' : (props.grade || '').includes('고등') ? '고등' : '중등'
|
|
})
|
|
|
|
const config = useRuntimeConfig()
|
|
const siteDomain = config.public?.siteDomain || 'https://aeseo.cloud'
|
|
|
|
// 5대 핵심 과목 (가로 1열 5칸 캐러셀 배치)
|
|
const subjectList = [
|
|
{
|
|
name: '수학과외',
|
|
keyName: '수학',
|
|
subjectKey: 'math',
|
|
tag: '인기 1위',
|
|
image: `${siteDomain}/img/math-tutoring.png`,
|
|
path: '/img/math-tutoring.png',
|
|
desc: '개념 구멍 추적 및 킬러 문항 1:1 완파',
|
|
slogan: '단순 공식 암기가 아닌 원리 이해와 킬러 문항 해결력을 기릅니다.',
|
|
details: [
|
|
{ title: '오답 4분류 역추적 클리닉', desc: '자주 실수하는 계산 오류 및 조건 누락 패턴을 1:1로 교정합니다.' },
|
|
{ title: '학교별 3개년 기출 족보 변형', desc: '인근 학교의 빈출 고난도 서술형 문항을 시험 전 3회 이상 체화합니다.' },
|
|
{ title: '50분 실전 타임어택 훈련', desc: '실제 시험 시간 부족을 해결하기 위해 문항별 시간 배분 루틴을 훈련합니다.' }
|
|
]
|
|
},
|
|
{
|
|
name: '영어과외',
|
|
keyName: '영어',
|
|
subjectKey: 'english',
|
|
tag: '내신 필수',
|
|
image: `${siteDomain}/img/english-tutoring.png`,
|
|
path: '/img/english-tutoring.png',
|
|
desc: '교과서·부교재 전 지문 변형 및 서술형 영작',
|
|
slogan: '어휘, 문법, 서술형 감점 0점화로 내신 1등급을 완성합니다.',
|
|
details: [
|
|
{ title: '부교재 전 지문 어휘·문맥 변형', desc: '수능특강, 모의고사 기출 등 학교 부교재의 변형 출제 포인트를 완벽 대비합니다.' },
|
|
{ title: '서술형 조건 영작 1:1 첨삭', desc: '문법 조건 누락 감점을 원천 차단하는 정밀 첨삭 지도를 진행합니다.' },
|
|
{ title: '1:1 구문 독해 & 빈칸 추론 특훈', desc: '문장 구조 분석을 통해 킬러 빈칸·순서 배열 문제를 빠르고 정확히 풉니다.' }
|
|
]
|
|
},
|
|
// 2행: 국어, 과학
|
|
{
|
|
name: '국어과외',
|
|
keyName: '국어',
|
|
subjectKey: 'korean',
|
|
tag: '문해력 완성',
|
|
image: `${siteDomain}/img/korean-tutoring.png`,
|
|
path: '/img/korean-tutoring.png',
|
|
desc: '비문학 독해 논리와 교과서 문학 1:1 정밀 분석',
|
|
slogan: '긴 지문도 흔들리지 않는 문해력과 서술형 채점 기준을 공략합니다.',
|
|
details: [
|
|
{ title: '비문학 구조 독해 공식 전수', desc: '제재별 핵심 키워드 연결과 선지 근거 찾기 훈련을 1:1로 코칭합니다.' },
|
|
{ title: '교과서 및 외부 지문 연계 분석', desc: '낯선 현대시·고전시가도 스스로 해석할 수 있는 감상 원리를 터득합니다.' },
|
|
{ title: '서술형 핵심 키워드 채점표 정복', desc: '출제자가 요구하는 조건에 맞춘 군더더기 없는 완벽한 답안 작성을 훈련합니다.' }
|
|
]
|
|
},
|
|
{
|
|
name: '과학과외',
|
|
keyName: '과학',
|
|
subjectKey: 'science',
|
|
tag: '통합과학',
|
|
image: `${siteDomain}/img/science-tutoring.png`,
|
|
path: '/img/science-tutoring.png',
|
|
desc: '통합과학 원리 이해 및 물화생지 킬러 단원 정복',
|
|
slogan: '까다로운 계산과 복잡한 개념을 1:1 시각화와 원리 풀이로 해결합니다.',
|
|
details: [
|
|
{ title: '2026 개정 통합과학 개념 체계화', desc: '교과 단원 간 융합 개념을 알기 쉽게 정리하고 탐구형 문항을 대비합니다.' },
|
|
{ title: '물화생지 킬러 계산 단원 완파', desc: '역학, 화학 반응식, 유전 등 학생들이 가장 어려워하는 단원을 집중 지도합니다.' },
|
|
{ title: '수행평가 실험 보고서 1:1 가이드', desc: '지필고사뿐 아니라 감점되기 쉬운 과학 탐구 보고서 만점을 케어합니다.' }
|
|
]
|
|
},
|
|
// 3행: 사회 (1개 단독 센터 정렬)
|
|
{
|
|
name: '사회과외',
|
|
keyName: '사회',
|
|
subjectKey: 'social',
|
|
tag: '통합사회',
|
|
image: `${siteDomain}/img/social-studies-tutoring.png`,
|
|
path: '/img/social-studies-tutoring.png',
|
|
desc: '통합사회·한국사 핵심 흐름 및 사탐 만점 전략',
|
|
slogan: '무작정 외우지 않고 역사와 사회 현상의 맥락을 이해하며 1등급을 쟁취합니다.',
|
|
details: [
|
|
{ title: '시대별 흐름 마인드맵 정리', desc: '단편적 암기가 아닌 전후 인과관계를 입체적으로 정리해 기억을 오래 유지합니다.' },
|
|
{ title: '자료 해석 및 그래프 변형 문항 정복', desc: '사탐 킬러로 출제되는 지도·통계·사료 분석 능력을 1:1로 키워줍니다.' },
|
|
{ title: '단기 서술형 족보 총정리', desc: '시험 3주 전 핵심 키워드와 단원별 요약 노트를 통해 내신 만점을 달성합니다.' }
|
|
]
|
|
}
|
|
]
|
|
|
|
const selectedItem = ref(null)
|
|
|
|
// 모달 오픈/클로즈
|
|
const openModal = (item) => {
|
|
selectedItem.value = item
|
|
if (typeof document !== 'undefined') {
|
|
document.body.style.overflow = 'hidden'
|
|
}
|
|
}
|
|
|
|
const closeModal = () => {
|
|
selectedItem.value = null
|
|
if (typeof document !== 'undefined') {
|
|
document.body.style.overflow = ''
|
|
}
|
|
}
|
|
|
|
// 모달 내 과목 선택 후 상담 신청 폼으로 이동 및 해당 과목 자동 선택
|
|
const applyWithSubject = (subjectName) => {
|
|
closeModal()
|
|
const cleanSubj = subjectName.replace(/과외$/, '').trim()
|
|
|
|
if (typeof window !== 'undefined') {
|
|
// 1. 커스텀 이벤트 발송 (Vue 반응형 formData.subject 즉시 업데이트)
|
|
window.dispatchEvent(new CustomEvent('select-subject', { detail: { subject: cleanSubj } }))
|
|
|
|
setTimeout(() => {
|
|
// 2. 칩 버튼 DOM 직접 클릭 트리거 (완벽 호환)
|
|
const buttons = document.querySelectorAll('#leadFormSection button')
|
|
for (const btn of buttons) {
|
|
const text = btn.innerText.trim()
|
|
const dataSubj = btn.getAttribute('data-subject')
|
|
if (text.startsWith(cleanSubj) || dataSubj === cleanSubj) {
|
|
btn.click()
|
|
break
|
|
}
|
|
}
|
|
|
|
// 3. input/select fallback
|
|
const subjSelect = document.getElementById('weakSubject') || document.getElementById('c-subject')
|
|
if (subjSelect) {
|
|
subjSelect.value = cleanSubj
|
|
subjSelect.dispatchEvent(new Event('change'))
|
|
}
|
|
|
|
// 4. 상단 폼 위치로 부드럽게 스크롤 이동
|
|
const formTarget = document.getElementById('leadFormSection') || document.getElementById('consult-section')
|
|
if (formTarget) {
|
|
formTarget.scrollIntoView({ behavior: 'smooth' })
|
|
}
|
|
}, 60)
|
|
}
|
|
}
|
|
|
|
// 해당 과목 전용 페이지 URL 생성 (NuxtLink 바인딩용)
|
|
const getSubjectPageUrl = (subjectKey) => {
|
|
const dong = props.regionDong || '대치동'
|
|
const validGrades = ['초등학생', '중학생', '고등학생']
|
|
const grade = validGrades.includes(props.grade) ? props.grade : '중학생'
|
|
const subMap = {
|
|
math: '수학',
|
|
english: '영어',
|
|
korean: '국어',
|
|
science: '과학',
|
|
social: '사회'
|
|
}
|
|
const subName = subMap[subjectKey] || '수학'
|
|
return `/${encodeURIComponent(dong)}/${encodeURIComponent(grade)}/${encodeURIComponent(subName)}`
|
|
}
|
|
|
|
// 해당 과목 전용 페이지로 이동
|
|
const goToSubjectPage = (subjectKey) => {
|
|
closeModal()
|
|
router.push(getSubjectPageUrl(subjectKey))
|
|
}
|
|
|
|
// ESC 키로 모달 닫기
|
|
const handleKeyDown = (e) => {
|
|
if (e.key === 'Escape' && selectedItem.value) {
|
|
closeModal()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (typeof window !== 'undefined') {
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (typeof window !== 'undefined') {
|
|
window.removeEventListener('keydown', handleKeyDown)
|
|
document.body.style.overflow = ''
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.subject-gallery-section {
|
|
width: 100%;
|
|
max-width: 1080px;
|
|
margin: 40px auto 60px;
|
|
padding: 0 16px;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.gallery-container {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 28px;
|
|
padding: clamp(24px, 4vw, 44px) clamp(16px, 3vw, 36px);
|
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.gallery-header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.gallery-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: clamp(0.78rem, 2vw, 0.88rem);
|
|
font-weight: 700;
|
|
color: var(--primary-color, #1e3a8a);
|
|
background: rgba(30, 58, 138, 0.08);
|
|
padding: 6px 14px;
|
|
border-radius: 9999px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.gallery-title {
|
|
font-size: clamp(1.35rem, 3.5vw, 1.95rem);
|
|
font-weight: 800;
|
|
color: #0f172a;
|
|
line-height: 1.35;
|
|
letter-spacing: -0.5px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.gallery-title strong {
|
|
color: var(--primary-color, #1e3a8a);
|
|
}
|
|
|
|
.gallery-desc {
|
|
font-size: clamp(0.82rem, 2vw, 0.94rem);
|
|
color: #64748b;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* 데스크톱: 가로 1열 5칸 균등 그리드 */
|
|
.subject-grid-221 {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(180px, 1fr));
|
|
gap: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-item-5 {
|
|
grid-column: auto;
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
.gallery-card {
|
|
cursor: pointer;
|
|
border-radius: 18px;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
}
|
|
|
|
.card-inner {
|
|
background: #ffffff;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.gallery-card:hover .card-inner {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 16px 32px rgba(30, 58, 138, 0.12);
|
|
border-color: #93c5fd;
|
|
}
|
|
|
|
.img-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
overflow: hidden;
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
.subject-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.gallery-card:hover .subject-img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.subject-tag {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: rgba(15, 23, 42, 0.85);
|
|
backdrop-filter: blur(4px);
|
|
color: #ffffff;
|
|
font-size: 0.7rem;
|
|
font-weight: 800;
|
|
padding: 3px 10px;
|
|
border-radius: 9999px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.zoom-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 3;
|
|
}
|
|
|
|
.gallery-card:hover .zoom-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.zoom-btn {
|
|
background: #ffffff;
|
|
color: #0f172a;
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
padding: 8px 14px;
|
|
border-radius: 9999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
|
|
transform: translateY(6px);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.gallery-card:hover .zoom-btn {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.card-info {
|
|
padding: 14px 14px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.card-subject-name {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.sub-name {
|
|
font-size: 1.05rem;
|
|
font-weight: 800;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.sub-grade {
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
background: #f1f5f9;
|
|
padding: 2px 7px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.card-subject-desc {
|
|
font-size: 0.8rem;
|
|
color: #475569;
|
|
line-height: 1.45;
|
|
margin-bottom: 12px;
|
|
flex: 1;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.card-action {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color, #1e3a8a);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
transition: gap 0.2s ease;
|
|
}
|
|
|
|
.gallery-card:hover .card-action {
|
|
gap: 9px;
|
|
}
|
|
|
|
/* 태블릿/모바일: 가로 스크롤 캐러셀 */
|
|
@media (max-width: 1024px) {
|
|
.subject-grid-221 {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
scroll-snap-type: x mandatory;
|
|
gap: 12px;
|
|
padding-bottom: 12px;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.gallery-card {
|
|
flex: 0 0 220px;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.card-item-5 {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
/* 라이트박스 모달 */
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(15, 23, 42, 0.75);
|
|
backdrop-filter: blur(6px);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
}
|
|
|
|
.modal-card {
|
|
position: relative;
|
|
background: #ffffff;
|
|
border-radius: 24px;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.modal-close-btn {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: #f1f5f9;
|
|
border: none;
|
|
font-size: 1.1rem;
|
|
color: #475569;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 20;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.modal-close-btn:hover {
|
|
background: #e2e8f0;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.modal-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.modal-grid {
|
|
grid-template-columns: 1fr 1.15fr;
|
|
}
|
|
}
|
|
|
|
.modal-img-col {
|
|
position: relative;
|
|
background: #0f172a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.modal-main-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 520px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.modal-img-badge {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
background: var(--accent-color, #d97706);
|
|
color: #ffffff;
|
|
font-size: 0.75rem;
|
|
font-weight: 800;
|
|
padding: 5px 12px;
|
|
border-radius: 9999px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.modal-content-col {
|
|
padding: clamp(24px, 4vw, 36px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.modal-pill {
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color, #1e3a8a);
|
|
background: rgba(30, 58, 138, 0.08);
|
|
padding: 4px 10px;
|
|
border-radius: 9999px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: clamp(1.4rem, 3vw, 1.85rem);
|
|
font-weight: 900;
|
|
color: #0f172a;
|
|
letter-spacing: -0.5px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.modal-title .text-sub {
|
|
display: block;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color, #1e3a8a);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.modal-slogan {
|
|
font-size: 0.88rem;
|
|
color: #475569;
|
|
margin-top: 8px;
|
|
line-height: 1.5;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.modal-points {
|
|
margin: 20px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
background: #f8fafc;
|
|
padding: 16px;
|
|
border-radius: 16px;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.point-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.point-num {
|
|
font-size: 0.85rem;
|
|
font-weight: 900;
|
|
color: var(--primary-color, #1e3a8a);
|
|
background: #ffffff;
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #cbd5e1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.point-head {
|
|
display: block;
|
|
font-size: 0.88rem;
|
|
font-weight: 800;
|
|
color: #1e293b;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.point-body {
|
|
font-size: 0.78rem;
|
|
color: #64748b;
|
|
line-height: 1.45;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn-modal-apply {
|
|
flex: 1 1 200px;
|
|
background: var(--primary-color, #1e3a8a);
|
|
color: #ffffff;
|
|
font-size: 0.92rem;
|
|
font-weight: 800;
|
|
padding: 14px 20px;
|
|
border-radius: 14px;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 14px rgba(30, 58, 138, 0.25);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-modal-apply:hover {
|
|
filter: brightness(1.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-modal-link {
|
|
background: #f1f5f9;
|
|
color: #334155;
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
padding: 14px 18px;
|
|
border-radius: 14px;
|
|
border: 1px solid #cbd5e1;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-modal-link:hover {
|
|
background: #e2e8f0;
|
|
color: #0f172a;
|
|
}
|
|
|
|
/* 모달 트랜지션 */
|
|
.modal-fade-enter-active,
|
|
.modal-fade-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.modal-fade-enter-from,
|
|
.modal-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-fade-enter-active .modal-card,
|
|
.modal-fade-leave-active .modal-card {
|
|
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
|
|
.modal-fade-enter-from .modal-card,
|
|
.modal-fade-leave-to .modal-card {
|
|
transform: scale(0.92) translateY(20px);
|
|
}
|
|
</style>
|