/* ═══════════════════════════════════════════════════════════════
   상세페이지 (landing page) — 뿌리는 용도의 긴 페이지
   /jinhak (학원 원장용) · /saengibu (학부모·학생용) 이 같이 쓴다.

   ⚠ 색·서체·모서리는 style.css 의 토큰을 그대로 쓴다.
     여기서 새 색을 만들면 포털과 따로 놀아 「다른 회사 페이지」로 읽힌다.
   ⚠ grid/flex 자식에는 min-width:0 을 습관처럼 둔다 (좁은 화면에서 칸이 밀린다).

   ※ 이 파일과 상세페이지 HTML 은 **누구나 소스를 볼 수 있다.**
     안에서만 쓰는 판단·사정은 여기 적지 말 것 — 프로젝트 문서에 적는다.
   ══════════════════════════════════════════════════════════════ */

/* ── 첫 화면 ───────────────────────────────────────────────── */
.lp-hero {
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--raised), var(--paper) 72%);
}
.lp-hero-in {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 52px; align-items: center;
}
.lp-hero-copy { min-width: 0; }
.lp-hero h1 {
  margin: 14px 0 18px; font-size: var(--t-5); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.22;
}
.lp-hero h1 em { font-style: normal; color: var(--accent); }
.lp-lead { margin: 0 0 26px; font-size: var(--t-1); color: var(--muted); line-height: 1.78; }
.lp-lead strong { color: var(--ink); font-weight: 700; }
.lp-hero-visual { min-width: 0; }
.lp-hero-visual img {
  width: 100%; display: block; border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(11, 26, 24, .12);
}

.lp-eyebrow {
  display: inline-block; font-size: var(--t--1); font-weight: 700;
  letter-spacing: .02em; color: var(--accent);
  background: var(--accent-sf); padding: 5px 11px; border-radius: var(--r);
}
.lp-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-cta.center { justify-content: center; }
.lp-phone { margin: 14px 0 0; font-size: .9063rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── 공통 제목 ─────────────────────────────────────────────── */
.lp-h2 {
  font-size: var(--t-4); font-weight: 780; letter-spacing: -.04em;
  line-height: 1.3; margin: 0 0 16px;
}
.lp-h2 em { font-style: normal; color: var(--accent); }
.lp-h2.center, .lp-sub.center { text-align: center; }
.lp-sub { margin: 0 auto 40px; max-width: 58ch; color: var(--muted); font-size: var(--t-1); line-height: 1.78; }
.lp-sub strong { color: var(--ink); font-weight: 700; }
.lp-narrow { max-width: 860px; }

.lp-num {
  display: inline-block; font-size: var(--t--1); font-weight: 750;
  letter-spacing: .08em; color: var(--muted);
  border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--r);
  margin-bottom: 14px;
}

/* ── 문제 카드 ─────────────────────────────────────────────── */
.lp-pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lp-pain { min-width: 0; background: var(--surface); padding: 26px 28px; }
.lp-pain b { display: block; font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.lp-pain p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.72; }

/* ── 글 + 그림 나란히 ──────────────────────────────────────── */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 52px; align-items: center; }
.lp-split.flip .lp-split-copy { order: 2; }
.lp-split.flip .lp-fig { order: 1; }
.lp-split-copy { min-width: 0; }
.lp-split-copy > p { margin: 0 0 22px; color: var(--muted); font-size: var(--t-1); line-height: 1.8; }
.lp-split-copy > p strong { color: var(--ink); font-weight: 700; }

.lp-fig { margin: 0; min-width: 0; }
.lp-fig img {
  width: 100%; display: block; border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(11, 26, 24, .10);
}
.lp-fig figcaption { margin-top: 10px; font-size: var(--t--1); color: var(--muted); text-align: center; }

/* ── 체크 목록 ─────────────────────────────────────────────── */
.lp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-checks li {
  position: relative; padding-left: 26px;
  color: var(--muted); font-size: .9688rem; line-height: 1.72;
}
.lp-checks li::before {
  content: ''; position: absolute; left: 2px; top: .52em;
  width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.lp-checks li b { color: var(--ink); font-weight: 700; }

/* ── 어두운 절 (핵심 기능 강조) ────────────────────────────── */
.lp-dark { background: var(--deep); color: var(--deep-ink); border-block: 1px solid var(--deep-line); }
.lp-dark .lp-h2 { color: var(--deep-ink); }
.lp-dark .lp-h2 em { color: #6FD7BF; }
.lp-dark .lp-num { color: var(--deep-mut); border-color: var(--deep-line); }
.lp-dark .lp-split-copy > p { color: var(--deep-mut); }
.lp-dark .lp-split-copy > p strong { color: var(--deep-ink); }
.lp-checks.light li { color: var(--deep-mut); }
.lp-checks.light li b { color: var(--deep-ink); }
.lp-checks.light li::before { border-color: #6FD7BF; }
.lp-dark .lp-fig img { border-color: var(--deep-line); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); }
.lp-dark .lp-fig figcaption { color: var(--deep-mut); }

/* ── 숫자 ──────────────────────────────────────────────────── */
.lp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lp-stat { min-width: 0; background: var(--surface); padding: 30px 22px; text-align: center; }
.lp-stat b {
  display: block; font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 800;
  letter-spacing: -.045em; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.lp-stat span { display: block; margin-top: 10px; font-size: .875rem; color: var(--muted); line-height: 1.6; }

.lp-note {
  margin-top: 30px; padding: 24px 26px;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r);
  border-left: 3px solid var(--accent);
  color: var(--muted); font-size: .9688rem; line-height: 1.8;
}
.lp-note b, .lp-note strong { color: var(--ink); font-weight: 700; }

/* ── 기능 카드 3열 ─────────────────────────────────────────── */
.lp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lp-card { min-width: 0; background: var(--surface); padding: 26px 26px 28px; }
.lp-card h3 { margin: 0 0 9px; font-size: var(--t-1); font-weight: 700; letter-spacing: -.022em; }
.lp-card p { margin: 0; color: var(--muted); font-size: .9063rem; line-height: 1.72; }
.lp-card p b { color: var(--ink); font-weight: 650; }

/* ── 왜 믿을 만한가 ────────────────────────────────────────── */
.lp-why { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lp-why > div { min-width: 0; background: var(--surface); padding: 24px 26px; }
.lp-why b { display: block; font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; margin-bottom: 7px; }
.lp-why p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.74; }

/* ── 문의 ──────────────────────────────────────────────────── */
.lp-contact { background: var(--deep); color: var(--deep-ink); text-align: center; }
.lp-contact h2 { margin: 0 0 14px; font-size: var(--t-4); font-weight: 780; letter-spacing: -.04em; color: var(--deep-ink); }
.lp-contact > .container > p { margin: 0 auto 8px; max-width: 50ch; color: var(--deep-mut); font-size: var(--t-1); line-height: 1.78; }
.lp-contact > .container > p strong { color: var(--deep-ink); font-weight: 700; }
.lp-tel {
  display: inline-block; margin: 26px 0 8px;
  font-size: clamp(2rem, 5.4vw, 3rem); font-weight: 800;
  letter-spacing: -.03em; color: #6FD7BF; font-variant-numeric: tabular-nums;
}
.lp-tel:hover { text-decoration: none; color: #8FE6D2; }
.lp-hours { margin: 0 0 28px; font-size: .9063rem; color: var(--deep-mut); }
.lp-contact .btn-ghost { color: var(--deep-ink); border-color: var(--deep-line); }
.lp-contact .btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--deep-mut); }

/* ── 좁은 화면 ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-hero { padding: 48px 0 44px; }
  .lp-hero-in, .lp-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* ⚠ 뒤집힌 배치도 좁은 화면에서는 글이 먼저 와야 한다 */
  .lp-split.flip .lp-split-copy { order: 0; }
  .lp-split.flip .lp-fig { order: 0; }
  .lp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lp-pains, .lp-grid3 { grid-template-columns: minmax(0, 1fr); }
  .lp-pain, .lp-card, .lp-why > div { padding: 22px 20px; }
  .lp-stat { padding: 24px 16px; }
}

/* ── 인쇄 (A4 한 장으로 뽑아 상담실에 두실 때) ─────────────── */
@media print {
  @page { size: A4; margin: 12mm 11mm; }
  .site-header, .site-footer, .lp-cta { display: none !important; }
  .lp-hero, .section { padding: 14px 0 !important; }
  .lp-dark, .lp-contact { background: #fff !important; color: #14181B !important; }
  .lp-dark .lp-h2, .lp-dark .lp-split-copy > p strong, .lp-checks.light li b,
  .lp-contact h2, .lp-contact > .container > p strong { color: #14181B !important; }
  .lp-dark .lp-split-copy > p, .lp-checks.light li, .lp-contact > .container > p, .lp-hours { color: #4A5257 !important; }
  .lp-dark .lp-h2 em, .lp-tel { color: #0E7C6B !important; }
  .lp-pain, .lp-card, .lp-stat, .lp-why > div, .lp-split, .lp-note { break-inside: avoid; }
  .lp-fig img { box-shadow: none; }
}

/* ── 3년 설계 계단 (예비고1 → 고1 → 고2 → 고3) ─────────────
   ⚠ 학년 수가 늘어도 칸이 눌리지 않게 minmax(0,1fr) 로 둔다. */
.lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lp-step { min-width: 0; background: var(--surface); padding: 26px 24px 28px; }
.lp-step-no {
  display: inline-block; margin-bottom: 12px;
  font-size: .8125rem; font-weight: 750; letter-spacing: .01em;
  color: var(--accent-on); background: var(--accent);
  padding: 5px 11px; border-radius: var(--r); white-space: nowrap;
}
.lp-step b { display: block; font-size: var(--t-1); font-weight: 750; letter-spacing: -.025em; margin-bottom: 8px; }
.lp-step p { margin: 0; color: var(--muted); font-size: .9063rem; line-height: 1.72; }

/* 지역 표기 — 첫 화면과 문의 구역 */
.lp-area { color: var(--muted); }
.lp-area-line { margin-top: -18px; }
.lp-area-line b { color: var(--deep-ink); font-weight: 650; }

@media (max-width: 900px) { .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-steps { grid-template-columns: minmax(0, 1fr); } .lp-step { padding: 22px 20px; } }

@media print { .lp-step { break-inside: avoid; } }

/* 첫 화면 그림이 정사각 대표 이미지일 때 — 세로로 너무 커지지 않게 폭을 묶는다 */
.lp-hero-visual.square img { max-width: 520px; margin: 0 auto; }
@media (max-width: 900px) { .lp-hero-visual.square img { max-width: 420px; } }