/* ─── HERO ─── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  background: var(--gradient-hero); position: relative; overflow: hidden; padding-top: 72px;
}
.hero::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 70% 30%, rgba(37,99,235,0.3) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(245,158,11,0.15) 0%, transparent 40%); }
.hero-grid { position:absolute; inset:0; opacity:0.04; background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px); background-size: 60px 60px; }
.hero-inner { max-width:1200px; margin:0 auto; padding:60px 24px; position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); padding:6px 16px; border-radius:100px; margin-bottom:24px; color:rgba(255,255,255,0.9); font-size:14px; font-weight:500; backdrop-filter:blur(10px); animation:fadeInUp 0.6s ease both; }
.hero-badge .dot { width:8px; height:8px; background:var(--success); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.hero h1 { font-family:'Outfit','Noto Sans KR',sans-serif; font-size:56px; font-weight:800; line-height:1.15; color:white; margin-bottom:20px; letter-spacing:-1px; animation:fadeInUp 0.6s 0.1s ease both; }
.hero h1 .highlight { background:linear-gradient(135deg,var(--accent),#FBBF24); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero>div>div>p { font-size:18px; color:rgba(255,255,255,0.7); line-height:1.7; margin-bottom:36px; max-width:480px; animation:fadeInUp 0.6s 0.2s ease both; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; animation:fadeInUp 0.6s 0.3s ease both; }
.btn-hero { padding:16px 32px; border-radius:14px; border:none; font-size:16px; font-weight:700; cursor:pointer; transition:all 0.3s ease; font-family:inherit; display:inline-flex; align-items:center; gap:8px; }
.btn-hero-primary { background:var(--accent); color:var(--dark); }
.btn-hero-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(245,158,11,0.4); }
.btn-hero-secondary { background:rgba(255,255,255,0.1); color:white; border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(10px); }
.btn-hero-secondary:hover { background:rgba(255,255,255,0.2); transform:translateY(-2px); }
.hero-visual { position:relative; animation:fadeInUp 0.8s 0.4s ease both; }
.hero-card { background:rgba(255,255,255,0.08); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.12); border-radius:24px; padding:40px; position:relative; }
.hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.stat-item { text-align:center; padding:20px; }
.stat-number { font-family:'Outfit',sans-serif; font-size:48px; font-weight:800; color:white; line-height:1; }
.stat-number .unit { font-size:24px; font-weight:600; }
.stat-label { color:rgba(255,255,255,0.6); font-size:14px; margin-top:8px; }
.stat-divider { grid-column:span 2; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); }
.hero-card-badge { position:absolute; top:-16px; right:24px; background:var(--accent); color:var(--dark); padding:8px 20px; border-radius:100px; font-size:13px; font-weight:700; box-shadow:0 4px 15px rgba(245,158,11,0.3); }
.floating-tag { position:absolute; background:white; border-radius:14px; padding:12px 18px; box-shadow:0 8px 30px rgba(0,0,0,0.15); font-size:13px; font-weight:600; color:var(--dark); display:flex; align-items:center; gap:8px; animation:float 3s ease-in-out infinite; z-index:10; }
.floating-tag.t1 { top:-20px; left:-30px; animation-delay:0s; }
.floating-tag.t2 { bottom:-20px; right:-30px; animation-delay:1.5s; }
.floating-tag .emoji { font-size:20px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ─── SECTIONS ─── */
section { padding:100px 24px; }
.section-inner { max-width:1200px; margin:0 auto; overflow:hidden; }
.section-label { display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.section-label::before { content:''; width:24px; height:2px; background:var(--primary); border-radius:1px; }
.section-title { font-size:40px; font-weight:800; line-height:1.3; margin-bottom:16px; letter-spacing:-0.5px; }
.section-desc { font-size:17px; color:var(--gray-500); max-width:560px; line-height:1.7; }

.teams-banner { background:linear-gradient(135deg,#464EB8,#5B5FC7); color:white; text-align:center; padding:16px 24px; font-size:14px; font-weight:500; display:flex; align-items:center; justify-content:center; gap:12px; }
.teams-banner strong { font-weight:700; }

.features { background:var(--gray-100); }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px; }
.feature-card { background:white; border-radius:20px; padding:36px; border:1px solid rgba(0,0,0,0.04); transition:all 0.3s; }
.feature-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.08); }
.feature-icon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:20px; }
.feature-icon.blue { background:var(--primary-light); }
.feature-icon.amber { background:var(--accent-light); }
.feature-icon.green { background:#D1FAE5; }
.feature-icon.purple { background:#EDE9FE; }
.feature-icon.rose { background:#FFE4E6; }
.feature-icon.sky { background:#E0F2FE; }
.feature-card h3 { font-size:20px; font-weight:700; margin-bottom:10px; }
.feature-card p { font-size:15px; color:var(--gray-500); line-height:1.65; }

/* Pricing */
.pricing-header { text-align:center; margin-bottom:48px; }
.pricing-header .section-desc { margin:0 auto; }
.pricing-toggle { display:inline-flex; background:var(--gray-100); border-radius:14px; padding:4px; }
.pricing-toggle-wrap { text-align:center; margin-bottom:48px; }
.pricing-toggle label { padding:12px 28px; border-radius:10px; cursor:pointer; font-size:15px; font-weight:600; color:var(--gray-500); transition:all 0.3s; display:inline-block; position:relative; z-index:1; }
.pricing-toggle input { display:none; }
.pricing-toggle input:checked + label { color:white; background:var(--primary); box-shadow:0 2px 8px rgba(37,99,235,0.25); }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.price-card { background:white; border-radius:20px; padding:36px; border:2px solid var(--gray-100); transition:all 0.3s; position:relative; }
.price-card.popular { border-color:var(--primary); box-shadow:0 8px 40px rgba(37,99,235,0.12); transform:scale(1.03); }
.price-card.popular::before { content:'인기'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--primary); color:white; padding:4px 20px; border-radius:100px; font-size:13px; font-weight:700; }
.price-duration { font-size:14px; color:var(--gray-500); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.price-time { font-size:15px; color:var(--gray-700); font-weight:500; margin-bottom:20px; }
.price-amount { font-family:'Outfit',sans-serif; font-size:42px; font-weight:800; color:var(--dark); margin-bottom:4px; line-height:1; }
.price-amount .won { font-size:20px; font-weight:600; }
.price-original { font-size:14px; color:var(--gray-300); text-decoration:line-through; margin-bottom:20px; height:20px; }
.price-features { list-style:none; margin:24px 0; }
.price-features li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--gray-700); padding:6px 0; }
.price-features li::before { content:'✓'; color:var(--primary); font-weight:700; }
.btn-price { width:100%; padding:14px; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit; border:none; }
.btn-price-primary { background:var(--primary); color:white; }
.btn-price-primary:hover { background:var(--primary-dark); }
.btn-price-outline { background:white; color:var(--primary); border:2px solid var(--primary); }
.btn-price-outline:hover { background:var(--primary-light); }
.pricing-discount { margin-top:40px; text-align:center; background:linear-gradient(135deg,var(--accent-light),#FEF9C3); border-radius:16px; padding:28px; }
.pricing-discount h4 { font-size:18px; font-weight:700; margin-bottom:8px; }
.pricing-discount p { font-size:14px; color:var(--gray-700); }
.discount-items { display:flex; justify-content:center; gap:32px; margin-top:16px; flex-wrap:wrap; }
.discount-item { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.discount-item .badge { background:var(--accent); color:var(--dark); padding:2px 10px; border-radius:6px; font-size:12px; font-weight:700; }
.weekend-section { display:none; }
.weekend-section.active, .weekday-section.active { display:block; }
.weekday-section { display:none; }

.payment-info { background:white; border-radius:16px; padding:28px; border:1px solid var(--gray-100); margin-top:32px; }
.payment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.payment-item { display:flex; align-items:center; gap:12px; font-size:14px; }
.payment-item .icon-circle { width:44px; height:44px; border-radius:12px; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.payment-item .label { color:var(--gray-500); font-size:12px; }
.payment-item .value { font-weight:700; font-size:15px; }

/* Teachers */
.teachers { background:var(--gray-100); }
.teachers-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
.teacher-card { background:white; border-radius:20px; overflow:hidden; border:1px solid rgba(0,0,0,0.04); transition:all 0.3s; }
.teacher-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.08); }
.teacher-video { aspect-ratio:16/9; background:var(--gray-900); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.teacher-video::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.6)); pointer-events:none; z-index:1; }
.teacher-video iframe { width:100%; height:100%; border:0; display:block; position:relative; z-index:0; }
.play-btn { width:64px; height:64px; background:rgba(255,255,255,0.95); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1; transition:all 0.3s; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
.play-btn svg { width:24px; height:24px; fill:var(--primary); margin-left:3px; }
.teacher-card:hover .play-btn { transform:scale(1.1); }
.teacher-info { padding:24px; }
.teacher-name { font-size:20px; font-weight:700; margin-bottom:4px; }
.teacher-role { font-size:14px; color:var(--gray-500); }

/* Reviews */
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.review-card { background:var(--gray-100); border-radius:16px; padding:28px; transition:all 0.3s; }
.review-card:hover { background:white; box-shadow:0 8px 30px rgba(0,0,0,0.06); }
.review-stars { color:var(--accent); font-size:16px; margin-bottom:12px; letter-spacing:2px; }
.review-text { font-size:15px; color:var(--gray-700); line-height:1.7; margin-bottom:16px; }
.review-author { font-size:13px; color:var(--gray-500); font-weight:600; }
.review-date { font-size:12px; color:var(--gray-300); }

.notice-section { background:var(--gray-100); }
.notice-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px; }
.notice-card { background:white; border-radius:16px; padding:32px; overflow:hidden; min-width:0; }
.notice-card h3 { font-size:18px; font-weight:700; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; }
.notice-card h3 a { font-size:13px; color:var(--primary); text-decoration:none; font-weight:600; }
.notice-list { list-style:none; overflow:hidden; width:100%; }
.notice-list li { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--gray-100); font-size:14px; overflow:hidden; min-width:0; }
.notice-list li:last-child { border:none; }
.notice-list .n-title { color:var(--gray-700); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:16px; min-width:0; }
.notice-list .n-date { color:var(--gray-300); font-size:13px; white-space:nowrap; }

.cta-section { background:var(--gradient-hero); text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(37,99,235,0.3),transparent 70%); }
.cta-section .section-inner { position:relative; z-index:2; }
.cta-section h2 { font-size:40px; font-weight:800; color:white; margin-bottom:16px; }
.cta-section p { font-size:18px; color:rgba(255,255,255,0.7); margin-bottom:36px; }
.cta-contact { display:flex; justify-content:center; gap:32px; margin-top:32px; flex-wrap:wrap; }
.cta-contact-item { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,0.8); font-size:15px; }
.cta-contact-item strong { color:white; font-size:18px; }

@media (max-width:900px) {
  .hero { min-height: auto; padding-top: 56px; }
  .hero-inner { grid-template-columns:1fr; gap:32px; padding: 40px 16px; }
  .hero h1 { font-size:30px; letter-spacing: -0.5px; }
  .hero>div>div>p { font-size: 15px; margin-bottom: 24px; }
  .hero-cta { gap: 8px; }
  .btn-hero { padding: 12px 24px; font-size: 14px; }
  .hero-visual { order:-1; }
  .hero-card { padding: 24px; border-radius: 16px; }
  .hero-stats { gap: 12px; }
  .stat-item { padding: 12px; }
  .stat-number { font-size:32px; }
  .stat-number .unit { font-size: 18px; }
  .stat-label { font-size: 12px; }
  .hero-card-badge { font-size: 11px; padding: 6px 14px; top: -12px; right: 16px; }
  .floating-tag { display: none; }

  section { padding: 60px 16px; }
  .section-title { font-size: 26px; }
  .section-desc { font-size: 15px; }
  .section-label { font-size: 12px; }

  .teams-banner { font-size: 13px; padding: 12px 16px; gap: 8px; }

  .features-grid { grid-template-columns:1fr; gap: 16px; margin-top: 32px; }
  .feature-card { padding: 24px; }
  .feature-card h3 { font-size: 17px; }
  .feature-card p { font-size: 14px; }

  .pricing-toggle label { padding: 10px 16px; font-size: 13px; }
  .pricing-grid { grid-template-columns:1fr; gap: 16px; }
  .price-card { padding: 24px; }
  .price-card.popular { transform:none; }
  .price-amount { font-size: 36px; }
  .pricing-discount { padding: 20px; }
  .pricing-discount h4 { font-size: 16px; }
  .discount-items { gap: 16px; flex-direction: column; }

  .payment-info { padding: 20px; }
  .payment-grid { grid-template-columns:1fr; gap: 16px; }

  .teachers-grid { grid-template-columns:1fr; gap: 16px; margin-top: 32px; }
  .teacher-info { padding: 16px; }
  .teacher-name { font-size: 17px; }

  .reviews-grid { grid-template-columns:1fr; gap: 16px; margin-top: 32px; }
  .review-card { padding: 20px; }

  .notice-section { padding: 60px 16px; }
  .notice-grid { grid-template-columns:1fr; gap: 20px; margin-top: 32px; }
  .notice-card { padding: 20px; }
  .notice-card h3 { font-size: 16px; margin-bottom: 12px; }

  .cta-section h2 { font-size: 26px; }
  .cta-section p { font-size: 15px; margin-bottom: 24px; }
  .cta-contact { flex-direction:column; align-items:center; gap: 16px; }
  .cta-contact-item strong { font-size: 15px; }
}

@media (max-width:480px) {
  .hero h1 { font-size: 24px; }
  .hero-inner { padding: 32px 12px; }
  .hero-card { padding: 20px; }
  .stat-number { font-size: 28px; }
  .hero-badge { font-size: 12px; padding: 4px 12px; }
  section { padding: 48px 12px; }
  .section-title { font-size: 22px; }
  .feature-card { padding: 20px; }
  .price-card { padding: 20px; }
  .price-amount { font-size: 30px; }
  .cta-section h2 { font-size: 22px; }
}