/* ─── MATERIAL DESIGN (M3) ───
   톤 컨테이너, 엘리베이션 그림자, 큰 라운드, 필(pill) 버튼, 리플, FAB */
:root {
  --primary: #6750a4;
  --on-primary: #fff;
  --primary-container: color-mix(in srgb, var(--primary) 14%, #fff);
  --on-primary-container: color-mix(in srgb, var(--primary) 70%, #000);
  --secondary-container: #e8def8;
  --tertiary: #7d5260;
  --surface: #fffbfe;
  --surface-1: color-mix(in srgb, var(--primary) 5%, #fffbfe);
  --surface-2: color-mix(in srgb, var(--primary) 8%, #fffbfe);
  --outline: #79747e;
  --outline-variant: #cac4d0;
  --text: #1c1b1f;
  --bg: var(--surface);
  --elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
  --font: "Roboto", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --notice-bg: var(--primary-container);
  --notice-fg: var(--on-primary-container);
}

/* Top app bar */
.theme-material .nav { background: var(--surface-2); transition: box-shadow .2s; }
.theme-material .nav.scrolled { box-shadow: var(--elev-2); }
.theme-material .brand-mark { background: var(--primary); color: var(--on-primary); border-radius: 12px; }
.theme-material .nav-links a:not(.btn) { border-radius: 100px; }
.theme-material .nav-links a:not(.btn):hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
@media (max-width: 820px) { .theme-material .nav-links { background: var(--surface-2); box-shadow: var(--elev-2); border-radius: 0 0 24px 24px; } }

/* Buttons */
.theme-material .btn { border-radius: 100px; border-width: 1px; letter-spacing: .01em; }
.theme-material .btn-primary { background: var(--primary); color: var(--on-primary); }
.theme-material .btn-primary:hover { box-shadow: var(--elev-1); background: color-mix(in srgb, var(--primary) 92%, #fff); }
.theme-material .btn-ghost { background: var(--secondary-container); color: var(--on-primary-container); }
.theme-material .btn-ghost:hover { box-shadow: var(--elev-1); }
.theme-material .btn-outline { background: transparent; color: var(--primary); border-color: var(--outline); }
.theme-material .btn-outline:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .25; transform: scale(0); animation: ripple .55s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* Hero */
.theme-material .hero { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.theme-material .eyebrow { background: var(--primary-container); color: var(--on-primary-container); padding: 6px 16px; border-radius: 100px; }
.theme-material .hero h1 { color: var(--on-primary-container); }
.theme-material .art-shape.s1 { inset: 6%; border-radius: 48px; background: var(--primary-container); transform: rotate(-8deg); box-shadow: var(--elev-2); }
.theme-material .art-shape.s2 { inset: 14%; border-radius: 40px; background: var(--primary); box-shadow: var(--elev-3); transform: rotate(6deg); }
.theme-material .art-shape.s3 { right: 2%; top: 4%; width: 22%; height: 22%; border-radius: 50%; background: var(--tertiary); box-shadow: var(--elev-2); }
.theme-material .art-symbol { color: var(--on-primary); }

/* Sections & Cards */
.theme-material .section-alt { background: var(--surface-1); }
.theme-material .card { background: var(--surface); border-radius: 16px; box-shadow: var(--elev-1); transition: box-shadow .2s, transform .2s; }
.theme-material .card:hover { box-shadow: var(--elev-2); }
.theme-material .feature-icon { background: var(--primary-container); border-radius: 16px; }
.theme-material .chip { border: 1px solid var(--outline-variant); border-radius: 8px; color: var(--on-primary-container); background: var(--surface-1); }
.theme-material .price { color: var(--primary); }
.theme-material .avatar { background: var(--primary-container); color: var(--on-primary-container); border-radius: 50%; }
.theme-material .faq { border-radius: 16px; }
.theme-material .faq summary::after { color: var(--primary); }

/* Outlined text fields */
.theme-material input, .theme-material select, .theme-material textarea {
  border: 1px solid var(--outline); border-radius: 4px; background: transparent;
}
.theme-material input:focus, .theme-material select:focus, .theme-material textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
}
.theme-material .field label { color: var(--on-primary-container); }
.theme-material .apply-form { border-radius: 28px; box-shadow: var(--elev-2); padding: 32px; }

.theme-material .footer { background: var(--surface-2); }
.theme-material .fab { background: var(--primary-container); color: var(--on-primary-container); border-radius: 16px; width: 64px; height: 64px; box-shadow: var(--elev-3); }
.theme-material .fab:hover { box-shadow: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.3); }
.theme-material .toast { background: #313033; color: #f4eff4; border-radius: 4px; box-shadow: var(--elev-3); }
.theme-material.maintenance { background: var(--surface-1); }
.theme-material .maint { border-radius: 28px; }

/* ─── 퍼스트티쳐: 과목 섹션 ─── */
:root { --s-math: #00897b; --s-english: #6750a4; --s-coding: #1565c0; }
.subj-math { --s: var(--s-math); }
.subj-english { --s: var(--s-english); }
.subj-coding { --s: var(--s-coding); }
.subj-math, .subj-english, .subj-coding { --s-soft: color-mix(in srgb, var(--s) 12%, #fff); --s-on: color-mix(in srgb, var(--s) 75%, #000); }

/* 히어로: 과목 카드 스택 */
.hero-stack { position: relative; height: 360px; width: 100%; max-width: 380px; justify-self: center; }
.stack-card {
  position: absolute; width: 62%; aspect-ratio: 1; border-radius: 32px; display: grid; place-content: center; justify-items: center; gap: 6px;
  color: #fff; box-shadow: var(--elev-3); transition: transform .3s;
  left: calc(var(--i) * 19%); top: calc(var(--i) * 14%); transform: rotate(calc((var(--i) - 1) * 7deg));
}
.stack-card b { font-size: 52px; line-height: 1; font-weight: 800; }
.stack-card span { font-weight: 700; font-size: 18px; opacity: .92; }
.stack-card.sc-math { background: var(--s-math); }
.stack-card.sc-english { background: var(--s-english); }
.stack-card.sc-coding { background: var(--s-coding); font-family: Consolas, monospace; }
.hero-stack:hover .stack-card { transform: rotate(calc((var(--i) - 1) * 10deg)) translateY(calc((var(--i) - 1) * -6px)); }
@media (max-width: 820px) { .hero-stack { height: 240px; max-width: 260px; order: -1; } .stack-card { border-radius: 24px; } .stack-card b { font-size: 36px; } }

/* 과목 소개 카드 */
.subject-card { display: flex; flex-direction: column; gap: 10px; border-top: 6px solid var(--s); }
.subject-card p { flex: 1; }
.subject-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 26px; font-weight: 800; background: var(--s-soft); color: var(--s-on); }
.subject-icon.sm { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; flex: none; }
.subj-coding .subject-icon { font-family: Consolas, monospace; }
.theme-material .subject-card .chip, .theme-material .tutor .chip { background: var(--s-soft); color: var(--s-on); border-color: transparent; }
.theme-material .subject-card .btn-outline { color: var(--s); }

/* 과목 탭 (sticky) */
.subject-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: -16px 0 32px; position: sticky; top: 76px; z-index: 5; }
.subject-tabs .tab { padding: 10px 20px; border-radius: 100px; text-decoration: none; font-weight: 700; background: var(--s-soft); color: var(--s-on); box-shadow: var(--elev-1); }
.subject-tabs .tab:hover { box-shadow: var(--elev-2); }

/* 과목별 과정 블록 */
.subject-block { padding: 28px; border-radius: 28px; background: var(--s-soft); margin-bottom: 24px; scroll-margin-top: 140px; }
.subject-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.subject-head .subject-icon { background: var(--s); color: #fff; }
.subject-head h3 { margin: 0; font-size: 22px; color: var(--s-on); }
.subject-head p { margin: 0; opacity: .8; }
.subject-block .price { color: var(--s); }
.subject-block .btn-outline { color: var(--s); }
.empty-note { opacity: .7; }
@media (max-width: 640px) { .subject-block { padding: 18px; border-radius: 20px; } .subject-tabs { top: 70px; } }

/* 선생님 카드 과목 색 */
.theme-material .tutor .avatar { background: var(--s-soft); color: var(--s-on); }
.tutor .chip { margin-bottom: 6px; display: inline-block; }