/* =============================================
   북클래스 — 공통 스타일 (홈페이지 · 수업 일정 · 개인정보처리방침)
   기준: docs/DESIGN.md + docs/design/*.dc.html (2026-10-29 확정 시안)
   ============================================= */

:root {
  /* 브랜드 */
  --green: #005F3D;
  --green-dark: #004D31;
  --green-deep: #003B25;
  --green-lt: #EAF4EF;
  --green-md: #C2DFD1;
  --green-soft: #D7EBE1;
  --yellow: #F5C84C;
  --yellow-ink: #3D2E00;
  --yellow-card-ink: #2A2000;
  --yellow-label: #5C4500;
  --yellow-arrow: #8A6A00;
  --beige: #ECE7DA;
  /* 바탕·선 */
  --bg: #FBF9F4;
  --bg-beige: #F3EEE3;
  --line: #E6E0D2;
  --line-strong: #CFC7B4;
  --line-mid: #D9D2C1;
  /* 글자 */
  --title: #14231B;
  --text: #1E2420;
  --body: #3B443E;
  --sub: #5E594F;
  --mute: #6B6559;
  /* 요일·보조색 */
  --blue-lt: #EAF0F8;
  --blue: #185FA5;
  --red-lt: #FBEBEB;
  --red: #B42318;
  /* 예전 이름 호환 (classes.css, consultation-form.css 에서 사용) */
  --green-mid: #2D8A62;
  --text-sub: var(--sub);
  --text-mute: var(--mute);
  --border: var(--line);
  --bg-alt: var(--bg-beige);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, p, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--green); }
a:hover { color: var(--green-deep); }
button { font-family: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.mo-only { display: none; }

/* ── 상단 메뉴 ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 249, 244, 0.94);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s;
}
.nav.scrolled { box-shadow: 0 2px 16px rgba(20, 35, 27, 0.06); }
.nav-inner { min-height: 76px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { width: 52px; height: 52px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 4px 28px; flex: 1 1 auto; font-size: 15px; font-weight: 500; }
.nav-links a { color: var(--body); text-decoration: none; padding: 12px 0; }
.nav-links a:hover { color: var(--green); }
.nav-links a.is-active { color: var(--green); font-weight: 800; border-bottom: 2px solid var(--green); }
.nav-cta {
  min-height: 44px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--green); color: #fff; font: 700 15px 'Noto Sans KR', sans-serif; cursor: pointer;
}
.nav-cta:hover { background: var(--green-dark); }
.nav-toggle {
  display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none;
  align-items: center; justify-content: center; cursor: pointer; color: var(--title);
}
.nav-menu {
  display: none; padding: 8px 24px 24px; border-top: 1px solid var(--line); background: var(--bg);
  flex-direction: column;
}
.nav-menu a { display: flex; align-items: center; min-height: 52px; color: var(--title); text-decoration: none; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--line); }
.nav-menu .btn { margin-top: 16px; }
.nav.is-open .nav-menu { display: flex; }

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 14px; border: 0;
  font: 700 17px 'Noto Sans KR', sans-serif; text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); color: #fff; }
.btn-outline { background: #fff; color: var(--green-deep); border: 1.5px solid var(--line-strong); padding: 0 26px; }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-yellow { background: var(--yellow); color: var(--yellow-ink); }
.btn-yellow:hover { background: #EDBD36; color: var(--yellow-ink); }
.btn-white { background: #fff; color: var(--green); font-weight: 800; }
.btn-white:hover { color: var(--green-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn svg { flex: none; }

/* ── 섹션 공통 ── */
.sec { padding: 104px 0; }
.sec-tight-bottom { padding-bottom: 56px; }
.sec-tight-top { padding-top: 56px; }
.sec-beige { background: var(--bg-beige); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-dark { background: var(--green-deep); color: #fff; }
.eyebrow { font-size: 14px; font-weight: 700; color: var(--green); letter-spacing: 0.04em; }
.sec-dark .eyebrow { color: var(--yellow); }
.h2 { margin: 12px 0 40px; font-weight: 800; font-size: 36px; line-height: 1.35; letter-spacing: -0.02em; color: var(--title); }
.sec-dark .h2 { color: #fff; }
.lead { margin: -28px 0 40px; font-size: 17px; color: var(--sub); }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ── 첫 화면 ── */
.hero { background: var(--bg-beige); border-bottom: 1px solid var(--line); }
.hero-inner { padding: 88px 32px 96px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hero-left { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hero-right { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { background: #fff; color: var(--green-deep); font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-mid); }
.badge-solid { background: var(--green); color: #fff; border-color: var(--green); }
.hero-title { font-weight: 800; font-size: 54px; line-height: 1.25; letter-spacing: -0.03em; color: var(--title); }
.hero-title em { font-style: normal; color: var(--green); }
.hero-sub { font-size: 19px; line-height: 1.75; color: var(--body); max-width: 520px; }
.flow-card { background: var(--green); color: #fff; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.flow-label { font-size: 14px; font-weight: 700; color: var(--yellow); letter-spacing: 0.04em; }
.flow-steps { display: flex; flex-direction: column; gap: 14px; }
.flow-step { display: flex; gap: 16px; align-items: flex-start; }
.flow-num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.flow-title { font-weight: 700; font-size: 17px; }
.flow-desc { font-size: 14px; color: var(--green-md); margin-top: 4px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.stat-num { font-weight: 800; font-size: 24px; color: var(--green); }
.stat-lbl { font-size: 13px; color: var(--sub); margin-top: 4px; }
.hero-stats-mo { display: none; }

/* ── 고민 ── */
.pain { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px; }
.pain-quote { font-size: 44px; font-weight: 900; color: var(--yellow); line-height: 1; }
.pain h3 { margin: 8px 0 10px; font-size: 19px; color: var(--title); }
.pain p { font-size: 15px; line-height: 1.7; color: var(--sub); }
.resolve { margin-top: 16px; background: var(--green-lt); border-radius: 20px; padding: 24px 30px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.resolve-title { font-weight: 800; font-size: 17px; color: var(--green-deep); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--green-deep); }
.resolve-mo { display: none; margin-top: 28px; font-size: 15px; line-height: 1.85; color: var(--body); }
.resolve-mo strong { color: var(--green); }

/* ── 두 개의 힘 ── */
.power { border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.power-label { font-size: 14px; font-weight: 700; }
.power h3 { font-weight: 800; font-size: 26px; line-height: 1.4; }
.power p { font-size: 15px; line-height: 1.75; }
.power-green { background: var(--green); color: #fff; }
.power-green .power-label { color: var(--yellow); }
.power-green p { color: var(--green-soft); }
.power-yellow { background: var(--yellow); color: var(--yellow-card-ink); }
.power-yellow .power-label { color: var(--yellow-label); }
.rewrite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.rewrite span { background: rgba(255, 255, 255, 0.55); border-radius: 8px; padding: 6px 12px; }
.rewrite i { font-style: normal; color: var(--yellow-arrow); }
.rewrite .is-key { background: var(--yellow-card-ink); color: var(--yellow); }

/* ── 후기 ── */
.review { margin: 0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.review p { font-size: 17px; line-height: 1.75; }
.review figcaption { font-size: 14px; color: var(--green-md); }

/* ── 학년별 수업 ── */
.level-card { background: #fff; border-radius: 24px; padding: 34px; border: 1px solid var(--line); text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 18px; transition: border-color 0.15s; }
.level-card:hover { border-color: var(--green); color: var(--text); }
.level-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.level-tags { display: flex; align-items: center; gap: 10px; }
.level-badge { font-weight: 800; font-size: 15px; padding: 6px 16px; border-radius: 999px; background: var(--green-lt); color: var(--green); }
.level-badge.is-mid { background: var(--blue-lt); color: var(--blue); }
.level-grades { font-size: 15px; font-weight: 600; color: var(--body); }
.level-flow { font-weight: 800; font-size: 20px; color: var(--title); }
.level-desc { font-size: 15px; line-height: 1.8; color: var(--sub); }
.level-link { font-size: 15px; font-weight: 700; color: var(--green); }
.level-btns { margin-top: 28px; }

/* ── FAQ ── */
.faq-wrap { max-width: 880px; }
.faq-wrap .eyebrow, .faq-wrap .h2 { text-align: center; }
.faq-wrap .h2 { margin-bottom: 36px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: border-color 0.15s; }
.faq-item.open { border-color: var(--green-md); }
.faq-q {
  width: 100%; min-height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; text-align: left; font: 700 17px 'Noto Sans KR', sans-serif; color: var(--title); cursor: pointer;
}
.faq-icon { flex: none; width: 20px; height: 20px; position: relative; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 3px; right: 3px; top: 9px; height: 2.4px; border-radius: 2px; background: var(--green); transition: transform 0.2s; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item.open .faq-icon::after { transform: rotate(0deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-body-inner { padding: 0 24px 22px; font-size: 15px; line-height: 1.8; color: var(--body); }

/* ── 문의 안내 ── */
.ask { background: var(--bg-beige); border: 1px solid var(--line); border-radius: 28px; padding: 44px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.ask-text { flex: 1 1 420px; min-width: 0; }
.ask h2 { font-weight: 800; font-size: 28px; line-height: 1.4; letter-spacing: -0.02em; color: var(--title); }
.ask p { margin-top: 10px; font-size: 16px; line-height: 1.75; color: var(--sub); }
.ask .btn { min-height: 52px; padding: 0 22px; font-size: 16px; }

/* ── 푸터 ── */
.footer { background: var(--bg-beige); border-top: 1px solid var(--line); }
.footer-inner { padding: 44px 32px; display: flex; flex-direction: column; gap: 18px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.footer-logo img { width: 48px; height: 48px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.footer-links a { color: var(--sub); text-decoration: none; }
.footer-links a:hover { color: var(--green); }
.footer-links .is-strong { color: var(--title); font-weight: 700; }
.footer-meta { font-size: 13px; line-height: 1.9; color: var(--mute); border-top: 1px solid #E0D9C8; padding-top: 18px; }
.footer-meta a { color: inherit; }

/* =============================================
   모션 (홈페이지 중심)
   - 첫 화면: 차례로 떠오르기 + 노랑 형광펜 + 수업 흐름 카드 밀려 들어오기 + 숫자 올라가기
   - 스크롤: 카드가 순서대로 떠오르기 (--d 로 간격)
   - 다시쓰기 칩: 개요 → 초고 → 첨삭 → 다시쓰기 순서로 불이 켜짐
   - 마우스 올리면 버튼·카드가 살짝 떠오름
   움직임 줄이기 설정을 켠 사용자에게는 모두 꺼짐 (맨 아래)
   ============================================= */
:root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes marker { to { background-size: 100% 100%; } }
@keyframes key-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(42, 32, 0, 0); } 50% { box-shadow: 0 0 0 6px rgba(42, 32, 0, 0.14); } }

/* 첫 화면: 왼쪽 글이 차례로 */
.hero-left > * { animation: rise 0.8s var(--ease-out) both; }
.hero-left > :nth-child(1) { animation-delay: 0.05s; }
.hero-left > :nth-child(2) { animation-delay: 0.05s; }
.hero-left > :nth-child(3) { animation-delay: 0.15s; }
.hero-left > :nth-child(4) { animation-delay: 0.3s; }
.hero-left > :nth-child(5) { animation-delay: 0.3s; }
.hero-left > :nth-child(6) { animation-delay: 0.45s; }
.hero-left > :nth-child(7) { animation-delay: 0.6s; }
/* "제대로 표현하는 힘." 아래 노랑 형광펜이 왼쪽부터 칠해짐 */
.hero-title em {
  background-image: linear-gradient(transparent 64%, rgba(245, 200, 76, 0.6) 64%, rgba(245, 200, 76, 0.6) 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: marker 0.9s 0.75s var(--ease-out) forwards;
}
/* 오른쪽 수업 흐름 카드 */
.hero-right .flow-card { animation: slide-in 0.9s 0.25s var(--ease-out) both; }
.flow-step { animation: rise 0.6s var(--ease-out) both; }
.flow-step:nth-child(1) { animation-delay: 0.65s; }
.flow-step:nth-child(2) { animation-delay: 0.8s; }
.flow-step:nth-child(3) { animation-delay: 0.95s; }
.flow-num { animation: pop 0.5s var(--ease-out) both; }
.flow-step:nth-child(1) .flow-num { animation-delay: 0.75s; }
.flow-step:nth-child(2) .flow-num { animation-delay: 0.9s; }
.flow-step:nth-child(3) .flow-num { animation-delay: 1.05s; }
.hero-right .stat { animation: rise 0.7s var(--ease-out) both; }
.hero-right .stat:nth-child(1) { animation-delay: 0.9s; }
.hero-right .stat:nth-child(2) { animation-delay: 1s; }
.hero-right .stat:nth-child(3) { animation-delay: 1.1s; }

/* 스크롤 등장: 순서대로 (간격은 script.js 가 --d 로 넣음)
   다 떠오르면 script.js 가 .entered 를 붙여서, 그 뒤로는 마우스 효과가 바로 반응함 */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out) var(--d, 0ms), transform 0.7s var(--ease-out) var(--d, 0ms),
              box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.15s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.entered { transition-duration: 0.3s, 0.3s, 0.3s, 0.3s, 0.15s; transition-delay: 0ms; }
.chip.reveal { transform: translateY(10px) scale(0.96); }
.chip.reveal.visible { transform: none; }

/* 다시쓰기 칩: 순서대로 불이 켜짐 */
.rewrite span { transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s var(--ease-out); }
.rewrite i { transition: opacity 0.3s ease; }
.rewrite.is-waiting span, .rewrite.is-waiting i { opacity: 0.35; }
.rewrite.is-playing span, .rewrite.is-playing i { animation: rise 0.45s var(--ease-out) both; }
.rewrite.is-playing > :nth-child(1) { animation-delay: 0s; }
.rewrite.is-playing > :nth-child(2) { animation-delay: 0.18s; }
.rewrite.is-playing > :nth-child(3) { animation-delay: 0.3s; }
.rewrite.is-playing > :nth-child(4) { animation-delay: 0.48s; }
.rewrite.is-playing > :nth-child(5) { animation-delay: 0.6s; }
.rewrite.is-playing > :nth-child(6) { animation-delay: 0.78s; }
.rewrite.is-playing > :nth-child(7) { animation-delay: 0.9s; }
.rewrite.is-playing .is-key { animation: pop 0.55s 1.1s var(--ease-out) both, key-glow 1.6s 1.7s ease-in-out 2; }

/* 마우스 올렸을 때 (마우스가 있는 기기에서만) */
@media (hover: hover) {
  .btn { transition: background 0.15s, border-color 0.15s, transform 0.2s var(--ease-out), box-shadow 0.2s ease; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 59, 37, 0.14); }
  .btn:active { transform: translateY(0); box-shadow: none; }
  .btn svg { transition: transform 0.2s var(--ease-out); }
  .btn:hover svg { transform: translateX(3px); }
  .nav-cta { transition: background 0.15s, transform 0.2s var(--ease-out); }
  .nav-cta:hover { transform: translateY(-1px); }
  .stat { transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease; }
  .pain:hover, .stat:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20, 35, 27, 0.07); }
  .power:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20, 35, 27, 0.12); }
  .review:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.09); }
  .level-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20, 35, 27, 0.08); }
  .level-card svg { transition: transform 0.25s var(--ease-out); }
  .level-card:hover svg { transform: translateX(4px); }
  .faq-q:hover { color: var(--green); }
}
/* 움직임 줄이기 설정: 전부 끔 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-title em { background-size: 100% 100%; }
  .rewrite.is-waiting span, .rewrite.is-waiting i { opacity: 1; }
}

/* ── 개인정보처리방침 ── */
.policy { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.policy-back { font-size: 14px; color: var(--green); text-decoration: none; font-weight: 700; display: inline-flex; min-height: 44px; align-items: center; }
.policy h1 { font-size: 28px; font-weight: 800; margin: 12px 0 8px; color: var(--title); letter-spacing: -0.02em; }
.policy .policy-lead { font-size: 15px; color: var(--body); line-height: 1.8; margin-bottom: 28px; }
.policy h2 { font-size: 18px; font-weight: 800; margin: 36px 0 10px; color: var(--green-deep); }
.policy p, .policy li { font-size: 15px; color: var(--body); line-height: 1.85; }
.policy p + p { margin-top: 8px; }
.policy ul { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.policy .table-box { overflow-x: auto; margin-top: 8px; }
.policy table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; background: #fff; }
.policy th, .policy td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--body); line-height: 1.6; }
.policy th { background: var(--bg-beige); color: var(--title); font-weight: 700; }
.policy .policy-date { margin-top: 40px; font-size: 14px; color: var(--mute); }

/* =============================================
   모바일 (768px 이하)
   ============================================= */
@media (max-width: 768px) {
  .wrap { padding: 0 24px; }
  .pc-only { display: none !important; }
  .mo-only { display: block; }

  .nav-inner { min-height: 68px; flex-wrap: nowrap; justify-content: space-between; }
  .nav-logo img { width: 44px; height: 44px; }
  .nav-links, .nav-inner > .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .btn { min-height: 56px; font-size: 16px; padding: 0 20px; }
  .btn-row.stack { flex-direction: column; gap: 10px; }
  .btn-row.stack .btn { width: 100%; }

  .sec { padding: 72px 0; }
  .sec-tight-bottom { padding-bottom: 40px; }
  .sec-tight-top { padding-top: 40px; }
  .eyebrow { font-size: 13px; letter-spacing: 0; }
  .h2 { margin: 14px 0 28px; font-size: 24px; line-height: 1.45; }
  .lead { margin: -18px 0 28px; font-size: 15px; line-height: 1.7; }

  .hero-inner { padding: 56px 24px 64px; gap: 0; }
  .hero-left { flex-basis: 100%; gap: 0; }
  .hero-right { display: none; }
  .badges { display: none; }
  .hero-eyebrow-mo { display: block; font-size: 13px; font-weight: 700; color: var(--green); }
  .hero-title { margin-top: 16px; font-size: 32px; line-height: 1.38; }
  .hero-sub { margin-top: 20px; font-size: 16px; line-height: 1.85; }
  .hero-left .btn-row { margin-top: 36px; }
  .hero-left .btn-outline { background: transparent; }
  .hero-stats-mo { display: flex; justify-content: space-between; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #DDD5C3; }
  .hero-stats-mo .stat-num { font-size: 18px; }

  .pain-grid { display: flex; flex-direction: column; gap: 0; }
  .pain { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0; }
  .pain:last-child { border-bottom: 1px solid var(--line); }
  .pain-quote, .pain p { display: none; }
  .pain h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.6; }
  .resolve { display: none; }
  .resolve-mo { display: block; }

  .power { border-radius: 22px; padding: 32px 26px; gap: 0; }
  .power-label { font-size: 13px; }
  .power h3 { margin-top: 12px; font-size: 21px; line-height: 1.5; }
  .power p { margin-top: 14px; font-size: 15px; line-height: 1.85; }
  .rewrite { margin-top: 18px; font-size: 13px; }
  .rewrite span { padding: 6px 10px; }

  .review-scroll { display: flex; gap: 12px; overflow-x: auto; margin-right: -24px; padding-right: 24px; scroll-snap-type: x mandatory; }
  .review { flex: none; width: 272px; border-radius: 18px; padding: 26px 22px; scroll-snap-align: start; }
  .review p { font-size: 15px; line-height: 1.85; }
  .review figcaption { font-size: 13px; }

  .level-card { border-radius: 18px; padding: 24px 22px; flex-direction: row; align-items: center; gap: 14px; }
  .level-main { flex: 1; min-width: 0; }
  .level-badge { font-size: 13px; padding: 4px 12px; }
  .level-grades { font-size: 14px; }
  .level-flow { margin-top: 14px; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--body); }
  .level-desc, .level-link { display: none; }
  .level-arrow-pc { display: none; }
  .level-btns .btn { width: 100%; }

  .faq-wrap .eyebrow, .faq-wrap .h2 { text-align: left; }
  .faq-wrap .h2 { display: none; }
  .faq-list { margin-top: 20px; gap: 0; }
  .faq-item { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .faq-item:last-child { border-bottom: 1px solid var(--line); }
  .faq-item.open { border-color: var(--line); }
  .faq-q { padding: 0; font-size: 15px; }
  .faq-body-inner { padding: 0 0 20px; font-size: 14px; }

  .ask { margin-top: 48px; border: 0; border-radius: 20px; padding: 28px 22px; gap: 22px; }
  .ask h2 { font-size: 19px; line-height: 1.45; }
  .ask p { margin-top: 8px; font-size: 14px; line-height: 1.8; }
  .ask .btn-row { flex-direction: column; gap: 10px; width: 100%; }
  .ask .btn { width: 100%; min-height: 54px; font-weight: 800; }
  .ask .btn-insta { display: none; }

  .footer-inner { padding: 40px 24px 48px; gap: 12px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-logo img { width: 40px; height: 40px; }
  .footer-links a { display: none; }
  .footer-links .is-strong { display: inline; }
  .footer-meta { font-size: 12px; line-height: 2; border-top: 0; padding-top: 0; }
  .footer-meta .sep { display: none; }
  .footer-meta .br-mo { display: block; }
}
@media (min-width: 769px) {
  .footer-meta .br-mo { display: none; }
}