web_6ea_educo/busan/components/CoachingSystem.vue

<template>
  <section class="coaching-section">
    <div class="coaching-inner">
      <div class="coaching-text">
        <span class="coaching-badge">📈 과외 시간 외에도 이어지는 케어</span>
        <h2 class="coaching-title">주 2회 과외로 끝나지 않는<br /><strong>'1:1 메타인지 플래너 코칭'</strong></h2>
        <p class="coaching-desc">
          성적은 수업 시간이 아니라 <strong>스스로 복습하는 시간</strong>에 결정됩니다. 전담 선생님이 매일 카카오톡으로 일일 플래너를 점검하고 피드백을 전달합니다.
        </p>

        <div class="coaching-points">
          <div class="cp-item">
            <span class="cp-icon">🗓️</span>
            <div>
              <h4 class="cp-title">주간·일일 스터디 플래너 설계</h4>
              <p class="cp-desc">학교 수업 복습, 과제량, 취약 단원 보충 분량을 학생 능력에 맞춰 쪼개어 배분합니다.</p>
            </div>
          </div>
          <div class="cp-item">
            <span class="cp-icon">📱</span>
            <div>
              <h4 class="cp-title">매일 학습 인증 & 밀착 피드백</h4>
              <p class="cp-desc">학생이 푼 오답 노트와 플래너 사진을 확인하고 격려와 질문 해결을 진행합니다.</p>
            </div>
          </div>
          <div class="cp-item">
            <span class="cp-icon">📊</span>
            <div>
              <h4 class="cp-title">월간 학부모 정기 리포트 발송</h4>
              <p class="cp-desc">출결, 단원별 이해도, 성취도 변화 그래프를 투명하게 정리하여 학부모님께 보고합니다.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="coaching-visual">
        <div class="visual-card">
          <div class="vc-header">
            <span class="vc-tag">REAL SCORE UP</span>
            <span class="vc-title">실제 성적 상승 로드맵</span>
          </div>
          <div class="vc-body">
            <div class="timeline-step">
              <span class="step-circle">1</span>
              <div>
                <strong>1개월 차 (습관 형성)</strong>
                <p>무작정 외우기 탈피, 오답 노트 4분류 태깅 습관 정착</p>
              </div>
            </div>
            <div class="timeline-step">
              <span class="step-circle">2</span>
              <div>
                <strong>2개월 차 (취약점 집중)</strong>
                <p>자주 틀리는 서술형 조건 누락 및 킬러 개념 1:1 완파</p>
              </div>
            </div>
            <div class="timeline-step active">
              <span class="step-circle">3</span>
              <div>
                <strong>3개월 차 (1등급 달성)</strong>
                <p>실전 시험 타임어택 훈련으로 시간 부족 극복 및 내신 만점</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.coaching-section {
  max-width: 1080px;
  margin: 0 auto 50px;
  padding: 0 16px;
}

.coaching-inner {
  background: var(--coaching-bg, #f1f5f9);
  border-radius: var(--card-radius, 16px);
  padding: clamp(24px, 5vw, 44px) clamp(18px, 4vw, 36px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 30px;
  align-items: center;
}

.coaching-badge {
  display: inline-block;
  font-size: clamp(0.78rem, 2vw, 0.88rem);
  font-weight: 700;
  color: var(--primary-color, #1e3a8a);
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 12px;
  border-radius: 9999px;
  margin-bottom: 12px;
}

.coaching-title {
  font-size: clamp(1.3rem, 3.8vw, 1.95rem);
  font-weight: 800;
  color: var(--text-color, #0f172a);
  line-height: 1.35;
  letter-spacing: -0.6px;
  margin-bottom: 14px;
}

.coaching-title strong {
  color: var(--primary-color, #1e3a8a);
}

.coaching-desc {
  font-size: clamp(0.85rem, 2.2vw, 0.98rem);
  line-height: 1.6;
  color: #475569;
  margin-bottom: 22px;
  word-break: keep-all;
}

.coaching-points {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cp-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cp-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.cp-title {
  font-size: clamp(0.88rem, 2.2vw, 0.98rem);
  font-weight: 800;
  color: var(--text-color, #0f172a);
  margin-bottom: 2px;
}

.cp-desc {
  font-size: clamp(0.76rem, 1.8vw, 0.85rem);
  color: #64748b;
  line-height: 1.45;
  word-break: keep-all;
}

.visual-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.vc-header {
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.vc-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-color, #d97706);
  letter-spacing: 0.5px;
}

.vc-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.timeline-step {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
}

.step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-step.active .step-circle {
  background: var(--accent-color, #d97706);
  color: #ffffff;
}

.timeline-step strong {
  display: block;
  font-size: 0.85rem;
  color: #1e293b;
  margin-bottom: 2px;
}

.timeline-step p {
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.4;
  word-break: keep-all;
}

@media (max-width: 820px) {
  .coaching-inner {
    grid-template-columns: 1fr;
  }
}
</style>