/* 우.아.금 모바일 — 반응형 (모바일 우선, 시안 폭 360px) */

:root {
  --main: #2b4bb1;
  --main-dark: #22398a;
  --sub: #83acdd;
  --pale: #eaf1fa;
  --accent: #ffd252;
  --danger: #d9534f;
  --pay: #ff425f;     /* 결제 계열(결제 버튼·결제 플로팅) */

  --s50: #f8fafc;
  --s100: #f1f5f9;
  --s200: #e2e8f0;
  --s300: #cbd5e1;
  --s400: #94a3b8;
  --s500: #64748b;
  --s600: #475569;
  --s700: #334155;
  --s800: #1e293b;

  --tap: 44px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--s50);
  color: var(--s800);
  font-family: Pretendard, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }
/* ⚠️ 폼 요소는 font-family 를 **상속하지 않는다** — 브라우저 기본 UI 폰트로 떨어진다.
   `.input` 에만 걸어 뒀더니 클래스를 안 붙인 select 와 **펼친 목록(option)** 이 다른 글꼴로 나와
   유독 이질적으로 보였다. 태그 자체에 걸어 둔다 (2026-07-29). */
input, select, textarea, option { font-family: inherit; }
/* 아직 오지 않은 회차 등 「목록에는 두되 고를 수 없는」 항목 (2026-08-07).
   ⚠️ 브라우저 기본 disabled 색은 OS·브라우저마다 제각각이라(윈도우 크롬은 거의 안 흐려진다)
      색을 직접 지정한다. 지우지 않고 흐리게 두는 이유 = 전체 일정이 보여야 하기 때문이다. */
option.opt-future, option:disabled { color: var(--s400); }

/* ---------- 공통 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 10px; padding: 10px 16px;
  font-size: 14px; font-weight: 700;
  min-height: var(--tap);
  transition: background-color .15s, filter .15s;
}
.btn:disabled { cursor: not-allowed; }
.btn-main { background: var(--main); color: #fff; }
.btn-main:not(:disabled):hover { background: var(--main-dark); }
.btn-main:disabled { background: var(--s300); color: #fff; }
.btn-accent { background: var(--accent); color: var(--main-dark); }
.btn-ghost { background: #fff; color: var(--s600); box-shadow: inset 0 0 0 1px var(--s200); }
.btn-ghost:hover { background: var(--s50); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* ⚠️ font-size 는 16px 미만으로 내리지 말 것.
   iOS 사파리는 16px 미만 input/select 를 포커스하면 화면을 자동 확대한다. */
.input, select.input {
  width: 100%; min-height: var(--tap);
  border: 1px solid var(--s300); border-radius: 10px;
  padding: 10px 12px; font-size: 16px; font-family: inherit;
  background: #fff; color: var(--s800); outline: none;
}
/* 아직 안 고른 <select> 의 안내 글자(「시/도」·「시/군/구」)만 한 단계 작게 (2026-08-03 사용자 지시).
   고르고 나면 다시 16px 로 돌아온다 — 실제 값은 크게 읽혀야 한다.
   ⚠️★★위 16px 규칙을 어기는 유일한 자리라 **:focus 에서 16px 로 되돌린다** —
      iOS 사파리는 **포커스 시점의 글자 크기**로 확대 여부를 정하므로 이러면 확대되지 않는다.
      (이 두 줄은 한 묶음이다. :focus 줄을 지우면 탭할 때마다 화면이 확대된다) */
select.input.is-ph { font-size: 14px; }
select.input.is-ph:focus { font-size: 16px; }
.input:focus { border-color: var(--main); box-shadow: 0 0 0 3px rgba(43,75,177,.18); }
.input::placeholder { color: var(--s400); }
.input:disabled { background: var(--s100); color: var(--s400); }

.label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--s700); }
.hint { margin-top: 6px; font-size: 11px; color: var(--s400); }

/* ---------- 랜딩 ---------- */
.landing {
  display: flex; min-height: 100vh; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(to bottom right, var(--main), var(--sub));
}
.landing-card {
  width: 100%; max-width: 400px;
  background: #fff; border-radius: 18px; padding: 26px 22px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.15);
}
.logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.logo img { width: 40px; height: 40px; object-fit: contain; }
.logo-t1 { font-size: 14px; font-weight: 800; color: var(--main); line-height: 1.2; }
.logo-t2 { font-size: 10px; color: var(--s400); }
.landing-title { margin: 0 0 4px; text-align: center; font-size: 18px; font-weight: 800; }
.landing-sub { margin: 0 0 20px; text-align: center; font-size: 12px; color: var(--s400); }
.field + .field { margin-top: 14px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* ⚠️ 가로 2칸 안에서는 `.field + .field` 의 **세로** 간격이 걸리면 안 된다 —
 *    오른쪽 칸만 14px 내려가 라벨·입력이 어긋난다(2026-07-30 「내 정보 수정」에서 실제로 발생). */
.two-col > .field + .field { margin-top: 0; }
/* 앞 필드와의 간격은 .two-col 이 대신 받는다 — .two-col 은 .field 가 아니라
 * `.field + .field` 가 안 걸려서 위쪽만 붙어 보였다. 다른 필드 간격과 같은 값으로 맞춘다. */
.field + .two-col { margin-top: 14px; }
.err-box {
  margin-bottom: 12px; border-radius: 8px; padding: 9px 12px;
  background: rgba(217,83,79,.1); color: var(--danger);
  font-size: 12px; text-align: center;
}
/* 오류가 아니라 「상황 안내」 — 세션 만료처럼 사용자가 잘못한 게 없는 경우에 쓴다 (2026-07-27).
   붉은 err-box 와 톤을 구분해야 「데이터가 지워졌다」는 오해를 부르지 않는다. */
.warn-box {
  margin-bottom: 12px; border-radius: 8px; padding: 10px 12px;
  background: #fff8e1; color: #8a6100;
  font-size: 12px; line-height: 1.6; text-align: center;
}
.consent { display: flex; gap: 8px; align-items: flex-start; background: var(--s50); border-radius: 10px; padding: 10px 12px; }
.consent input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--main); flex: none; }
.consent label { font-size: 11.5px; color: var(--s600); line-height: 1.5; }

/* ---------- 앱 셸 ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  /* 안전영역: 일반 브라우저에선 0. 홈 화면에 추가해 전체화면으로 열었을 때만 값이 생겨
     헤더가 노치·다이나믹 아일랜드 밑으로 들어가는 것을 막는다. */
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--s200);
}
.appbar .logo { margin: 0; gap: 8px; }
.appbar-actions { display: flex; gap: 6px; align-items: center; }

.wrap {
  max-width: 460px; margin: 0 auto;
  padding: 14px 16px calc(48px + env(safe-area-inset-bottom));
}

/* 히어로 */
.hero {
  position: relative;
  background: var(--pale);
  border-radius: 16px;
  padding: 18px 96px 18px 18px;
  margin-bottom: 14px;
}
.hero-l1 { font-size: 14px; font-weight: 600; color: var(--s700); }
.hero-l2 { font-size: 19px; font-weight: 800; color: var(--s800); margin-top: 2px; letter-spacing: -.4px; }
.hero-l2 b { color: var(--main); }
.hero-sub { margin-top: 10px; font-size: 11.5px; color: var(--s500); line-height: 1.6; }
.hero-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 46px; line-height: 1;
}
/* ★2026-08-08 신설 — 히어로 맨 아래의 「신청하는 방법」 안내 링크(사용자 지시:
   메인 파랑 + 볼드 + 밑줄). 네이버 블로그 글로 나간다.
   ⚠️ `.hero` 는 오른쪽 패딩 96px 로 📣 아이콘 자리를 비워 둔다 — 이 링크도 그 안쪽에 서므로
      **아이콘과 겹치지 않는다**. 대신 폭이 좁으니 `word-break: keep-all` 로 낱말째 접는다.
   ⚠️ `inline-block` + 위 여백 = 밑줄이 글자 폭만큼만 그어지게 하려는 것이다
      (block 으로 두면 줄 전체에 밑줄이 깔린다). */
.hero-guide {
  display: inline-block; margin-top: 12px;
  /* 12.5 → 13.5px (2026-08-08 사용자 지시: 「조금만 더」).
     ⚠️ 위로 더 올리면 320px 폰에서 접힌다 — `.hero` 오른쪽 96px 은 📣 아이콘 자리라
        글자가 쓸 수 있는 폭은 320px 에서 174px 뿐이다(13.5px 에서 이 줄은 158.7px). */
  font-size: 13.5px; font-weight: 800; color: var(--main);
  text-decoration: underline; text-underline-offset: 2px;
  word-break: keep-all; line-height: 1.5;
}

/* 탭 */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.tab {
  min-height: var(--tap);
  border: 1px solid var(--s200); border-radius: 12px; background: #fff;
  font-size: 14px; font-weight: 700; color: var(--s500);
}
.tab[aria-selected='true'] { background: var(--main); border-color: var(--main); color: #fff; }

/* ---------- 요청 폼 ---------- */
.form-title { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--s800); }

.row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; margin-bottom: 10px; }
.row-key {
  background: var(--pale); border-radius: 10px;
  padding: 12px 8px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.row-key b { font-size: 13px; font-weight: 700; color: var(--s700); }
.row-key span { margin-top: 3px; font-size: 9.5px; color: var(--s500); line-height: 1.35; }
.row-val { display: flex; flex-direction: column; gap: 6px; }

/* 옵션 버튼 */
.opts { display: grid; gap: 6px; }
.opts-2 { grid-template-columns: 1fr 1fr; }
.opts-3 { grid-template-columns: 1fr 1fr 1fr; }
.opts-7 { grid-template-columns: repeat(7, 1fr); gap: 4px; }
.opts-1 { grid-template-columns: 1fr; }

.opt {
  border: 1px solid var(--s300); border-radius: 10px; background: #fff;
  min-height: var(--tap); padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: var(--s600);
  transition: all .12s; text-align: center;
}
.opt small { font-size: 10px; font-weight: 500; color: var(--s400); margin-top: 2px; }
.opt:hover { border-color: var(--sub); }
.opt[aria-pressed='true'] {
  border-color: var(--main); border-width: 2px;
  background: var(--pale); color: var(--main); font-weight: 800;
}
.opt[aria-pressed='true'] small { color: var(--main); }
.opt-day { padding: 8px 0; font-size: 13px; }
.opt-time { flex-direction: row; justify-content: flex-start; padding-left: 14px; font-size: 13px; }

/* ---------- 공통 부품 (2026-07-25 공통화) ----------
 * 아래 4종은 원래 teacher.html 의 <style> 안에만 있어서, 같은 클래스명을 쓴
 * 어드민 「강사 등록」 팝업에서는 아무 스타일도 안 먹고 브라우저 기본 모양으로 나왔다.
 * 두 페이지가 같은 부품을 쓰도록 공용 CSS 로 옮긴다. */

/* 선택한 값을 아래에 쌓아 보여주는 알약 (선호 지역·선호 시간대) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px;
  background: var(--pale); color: var(--main); border-radius: 999px;
  padding: 6px 6px 6px 12px; font-size: 12.5px; font-weight: 700; }
.chip button { border: 0; background: none; color: var(--main); font-size: 16px; line-height: 1; padding: 0 4px; }

/* 「+ 무엇을 추가」 형태의 점선 알약 버튼 */
.add-btn { margin-top: 8px; width: 100%; min-height: 40px;
  border: 1px dashed var(--s300); border-radius: 999px; background: #fff;
  color: var(--main); font-size: 13px; font-weight: 700; }
.add-btn:hover { border-color: var(--main); background: var(--pale); }

/* 파일 첨부 — 고른 뒤에는 파란 실선으로 바뀌어 「붙었다」가 보인다 */
.file-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: var(--tap);
  border: 1px dashed var(--s300); border-radius: 10px; background: var(--s50);
  padding: 10px 12px; font-size: 13px; color: var(--s500); text-align: left; }
.file-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-btn.has { border-style: solid; border-color: var(--main); color: var(--main);
  font-weight: 700; background: var(--pale); }
.file-btn small { flex: none; font-weight: 700; color: var(--s400); }

/* 상태 배지. admin.html 은 표가 빽빽해 자체 .pill 로 덮어쓴다(뒤에 선언돼 우선). */
.pill { display: inline-block; border-radius: 999px; padding: 4px 10px;
  font-size: 11px; font-weight: 800; line-height: 1.35; white-space: nowrap; }

/* 인원 */
.opt-people { gap: 2px; }
.opt-people .icons { font-size: 11px; letter-spacing: -1px; }
.people-msg {
  margin-top: 2px; border-radius: 8px; padding: 9px 12px;
  background: #fff8e1; color: #7a5a00;
  font-size: 12px; font-weight: 700; text-align: center;
}

/* 지역 */
.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* font-size 16px 유지 (iOS 자동확대 방지) — 좁은 폭은 padding 으로 흡수.
   글자는 가운데 (2026-08-05 사용자 지시). ⚠️ select 는 `text-align` 만으로는 안 먹는
   브라우저가 있어 **`text-align-last` 를 함께** 준다(닫혀 있을 때 보이는 줄이 이쪽 규칙이다). */
.region-grid .input { min-height: 44px; padding: 8px 6px; text-align: center; text-align-last: center; }
.station-input { min-height: 44px; padding: 8px 10px; }

/* 일정 */
.date-btn {
  width: 100%; min-height: var(--tap);
  border: 1px solid var(--s300); border-radius: 10px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--s400);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.date-btn.filled { border-color: var(--main); border-width: 2px; background: var(--pale); color: var(--main); font-weight: 800; }
.date-btn:disabled { background: var(--s100); color: var(--s400); cursor: not-allowed; }

.schedule-box {
  border-radius: 10px; padding: 10px 12px;
  background: var(--s50); box-shadow: inset 0 0 0 1px var(--s200);
  font-size: 12px; color: var(--s600); line-height: 1.7;
}
.schedule-box b { color: var(--main); }
.schedule-skip { margin-top: 4px; font-size: 11px; color: var(--danger); }

/* 안내 박스 */
.note-box {
  border-radius: 8px; padding: 8px 10px; background: var(--s50);
  font-size: 10.5px; color: var(--s500); line-height: 1.7;
}
.note-box b { color: var(--s700); }
/* 남은 개설 가능 수 — 시간대를 고를 때마다 실시간으로 바뀐다 */
.times-left { display: block; margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--main); }
.times-left.is-zero { color: var(--s500); }
.times-left.is-over { color: var(--danger); }

/* 제출 */
.submit-wrap { margin-top: 20px; }
.submit-wrap .btn { width: 100%; min-height: 52px; font-size: 15px; border-radius: 12px; }
.submit-note { margin-top: 8px; text-align: center; font-size: 11px; color: var(--s400); }
/* ★「클래스 개설하기」 = 브랜드 옐로 (2026-08-06, 랜딩 CTA `.lp-go` 와 같은 약속).
   ⚠️ 옐로 위 흰 글자는 대비비 1.44 라 안 보인다 → 글자는 딥블루(--main), 대비비 5.32.
   ⚠️ `.btn-main:not(:disabled):hover` 와 `.btn-main:disabled` 가 특이도에서 이기므로
      **hover 와 disabled 를 여기서 다시 덮어야** 한다(안 덮으면 눌렀을 때 파랗게 돌아간다). */
.btn-create-go:not(:disabled) { background: var(--accent); color: var(--main); }
.btn-create-go:not(:disabled):hover,
.btn-create-go:not(:disabled):focus-visible { background: #f2c02f; color: var(--main); }
/* 수강료 안내 — 버튼 바로 아래 한 줄. 랜딩에서 옮겨 왔다.
   ⚠️**한글은 기본값이 아무 글자에서나 잘린다** → keep-all 로 띄어쓰기에서만 접는다. */
.submit-fee {
  margin: 9px 0 0; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--main); line-height: 1.45;
  word-break: keep-all; text-wrap: balance;
}
/* 동적 안내(#create-note)가 비면 위 여백이 남는다 → 비었을 때는 아예 자리를 안 준다 */
.submit-note:empty { display: none; }

/* ---------- 클래스 목록 ---------- */
.filters { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-bottom: 14px; }
/* 글자는 가운데, 크기는 옆 버튼(.filter-toggle 12px)과 신청 폼 select(13.5px) 사이로 낮춘다
   — 기본 .input 의 16px 은 이 줄에서 혼자 커 보였다 (2026-08-05 사용자 지시).
   ⚠️ 16px 규칙은 **텍스트 입력**이 대상이다(iOS 확대). select 는 탭하면 피커가 떠 확대되지 않는다. */
.filters .input { min-height: 44px; padding: 8px 10px; font-size: 13.5px; text-align: center; text-align-last: center; }
.filter-toggle {
  border: 1px solid var(--s300); border-radius: 10px; background: #fff;
  padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--s500);
  white-space: nowrap;
}
.filter-toggle[aria-pressed='true'] { background: var(--main); border-color: var(--main); color: #fff; }

.klist { display: flex; flex-direction: column; gap: 10px; }

.kcard {
  position: relative;
  background: var(--pale); border-radius: 14px; padding: 14px 120px 14px 16px;
}
.kcard-level { font-size: 11.5px; font-weight: 600; color: var(--s600); }
.kcard-place { margin-top: 2px; font-size: 17px; font-weight: 800; color: var(--main); letter-spacing: -.4px; }
.kcard-form { margin-top: 8px; font-size: 11.5px; color: var(--s600); }
.kcard-period { margin-top: 2px; font-size: 11.5px; color: var(--s600); }
/* 진행 장소 (2026-07-24) — 미지정이면 흐리게, 확정되면 브랜드 색으로 눈에 띄게 */
.kcard-venue { margin-top: 2px; font-size: 11.5px; color: var(--s400); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard-venue.has { color: var(--main); font-weight: 700; }
.mini-map { display: inline-flex; align-items: center; margin-top: 8px; font-size: 11.5px;
  font-weight: 700; color: var(--main); text-decoration: none; }
/* 리포트 보관함 (2026-07-24) — 아이별 아코디언 → 클래스별 → 회차 */
.arc-stu { border: 1px solid var(--s200); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.arc-stu-head { display: flex; align-items: center; gap: 8px; width: 100%; background: #fff;
  border: 0; padding: 12px 14px; text-align: left; }
.arc-stu-head.open { background: var(--pale); }
.arc-stu-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: var(--s800); }
.arc-stu-name small { font-weight: 600; color: var(--s500); font-size: 11.5px; margin-left: 5px; }
.arc-cnt { flex: none; font-size: 11px; font-weight: 700; color: var(--main); background: var(--pale);
  border-radius: 999px; padding: 3px 9px; }
.arc-stu-head.open .arc-cnt { background: #fff; }
.arc-caret { flex: none; font-size: 11px; color: var(--s400); width: 14px; text-align: center; }
.arc-body { border-top: 1px solid var(--s100); }
.arc-cls { padding: 9px 14px 5px; font-size: 11px; font-weight: 800; color: var(--s400); background: var(--s50); }
.arc-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-top: 1px solid var(--s100); text-decoration: none; }
.arc-date { font-size: 13px; font-weight: 700; color: var(--s800); }
.arc-concept { margin-top: 2px; font-size: 11px; color: var(--s500); }
.arc-go { flex: none; font-size: 12px; font-weight: 800; color: var(--main); }
.kcard-dday { margin-top: 8px; display: inline-block; border-radius: 6px; padding: 2px 8px; background: #fff; font-size: 11px; font-weight: 800; color: var(--danger); }

.kcard-right {
  position: absolute; right: 14px; top: 14px; bottom: 14px; width: 96px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
}
.kcard-count { font-size: 13px; font-weight: 600; color: var(--s500); }
.kcard-count b { font-size: 26px; font-weight: 800; color: var(--s800); }
.kcard-btn {
  width: 100%; min-height: 40px; border: 0; border-radius: 10px;
  font-size: 13px; font-weight: 800;
}
.st-open { background: var(--accent); color: var(--main-dark); }
.st-pending { background: var(--sub); color: #fff; cursor: default; }
.st-confirmed { background: var(--main); color: #fff; cursor: default; }
/* 운영 중 = 개설확정보다 한 걸음 더 간 상태라, 같은 브랜드 블루의 더 짙은 톤을 쓴다 (2026-07-29) */
.st-running { background: var(--main-dark); color: #fff; cursor: default; }
.st-closed { background: var(--s300); color: #fff; cursor: default; }
/* 완료 = 수업까지 끝난 클래스. 진행 중 상태들과 구분되도록 초록 계열로 둔다. */
.st-done { background: #16a34a; color: #fff; cursor: default; }
/* 자격 잠금 (2026-08-03) — 앞 단계를 아직 수료하지 않아 신청할 수 없는 반.
   ⚠️ 상태색(st-*)과 **섞이면 안 된다** — 「모집중인데 나는 못 든다」라서 모집 상태와 다른 축이다.
   ⚠️대비비를 재서 정한 색이다 — --s500 은 3.86 으로 **기준 미달이었다**(눈으로는 멀쩡해 보인다).
   지금 = #475569 on #e2e8f0 → 6.15:1. 13px 굵은 글씨는 '큰 글씨' 예외에 못 드니 4.5 를 넘겨야 한다. */
.kcard-btn-lock { background: var(--s200); color: var(--s600); cursor: default; }
.kcard-lock {
  margin-top: 9px; padding: 7px 10px; border-radius: 8px;
  background: #fff; font-size: 11px; font-weight: 700; color: var(--s600); line-height: 1.45;
}

.empty { padding: 40px 0; text-align: center; font-size: 13px; color: var(--s400); }

.pager { display: flex; gap: 6px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pager button { min-width: 38px; min-height: 38px; border: 1px solid var(--s200); border-radius: 8px; background: #fff;
  font-size: 13px; font-weight: 700; color: var(--s600); padding: 0 8px; }
.pager button.cur { background: var(--main); border-color: var(--main); color: #fff; }
.pager button:disabled { color: var(--s300); }
.pager-info { align-self: center; font-size: 12px; color: var(--s400); margin-left: 6px; }

/* ---------- 모달 ---------- */
/* 팝업이 열린 동안 뒤 화면 잠금 (2026-08-03 사용자 지시). 스위치는 m-core.js 가 켜고 끈다.
   ⚠️ `overflow:hidden` 만으로는 iOS 사파리가 뒤 화면을 계속 끈다 → position:fixed 로 세운다.
   ⚠️ 세우면 스크롤 위치를 잃으므로 m-core 가 top 으로 자리를 잡고 닫을 때 되돌린다. */
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.backdrop {
  /* ★2026-08-05: 40 → 70. 팝업은 **화면에서 가장 앞**이어야 한다(사용자 지시) —
     예전에는 플로팅 버튼(60)과 랜딩 하단 CTA(55)가 팝업 **위로** 떠서 모달 내용을 가렸다.
     ⚠️ 토스트(80)만 이보다 위다. */
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 20px 16px;
  background: rgba(15,23,42,.55); overflow-y: auto;
}
.modal {
  width: 100%; max-width: 400px; background: #fff; border-radius: 16px;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.25);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--s100); }
.modal-title { margin: 0; font-size: 15px; font-weight: 800; }
.modal-close { border: 0; background: none; font-size: 22px; color: var(--s400); line-height: 1; padding: 0 4px; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px 18px; }
.modal-foot .btn { width: 100%; }
.modal-msg { font-size: 13px; color: var(--s600); line-height: 1.7; white-space: pre-line; word-break: break-all; }
.modal-msg b { color: var(--s800); }

/* 결제하기 버튼 (개설 확정 클래스) */
.btn-pay { width: 100%; margin-top: 10px; background: var(--pay); color: #fff; }
.btn-pay:not(:disabled):hover { background: #e63a54; }
.btn-cancel-req { width: 100%; margin-top: 8px; min-height: 40px; color: var(--danger); box-shadow: inset 0 0 0 1px rgba(217,83,79,.35); }
.btn-cancel-req:hover { background: rgba(217,83,79,.06); }
.pay-done { margin-top: 10px; text-align: center; font-size: 12.5px; font-weight: 800; color: #16a34a; }
.pay-todo { margin-top: 10px; text-align: center; font-size: 12px; font-weight: 700; color: var(--pay); }
.lock-note { margin-top: 8px; font-size: 11.5px; color: var(--s400); line-height: 1.5; }

.info-row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 6px 0; }
.info-k { font-size: 12.5px; color: var(--s500); }
.info-v { font-size: 12.5px; font-weight: 700; color: var(--s800); }

/* 섹션 제목은 브랜드 서브 파란색 (2026-08-01) — 어드민·강사·신청 3사이트 공용 */
.sec-title { margin: 20px 0 10px; font-size: 11px; font-weight: 800; color: var(--sub); letter-spacing: .4px; }
.sec-title:first-child { margin-top: 0; }
/* 제목 오른쪽에 작은 버튼을 두는 줄 (내 정보 → ✏️ 수정) */
.sec-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sec-title-row .btn { flex: none; }

/* 내 정보 수정 — 클래스별 학생 명단 (2026-07-25) */
.em-cls + .em-cls { margin-top: 12px; }
.em-cls-t { font-size: 12px; font-weight: 800; color: var(--main); margin-bottom: 6px; }
.em-stu { display: grid; grid-template-columns: 1fr 92px; gap: 6px; }
.em-stu + .em-stu { margin-top: 6px; }
/* font-size 는 위 경고대로 16px 유지 — iOS 자동 확대 방지 */
.em-stu .input { min-width: 0; min-height: 42px; padding: 8px 10px; }

/* 우.아.금 더 알아보기 팝업 */
.about-links { display: flex; gap: 10px; margin-top: 16px; }
.about-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; border: 1px solid var(--s200); border-radius: 14px; text-decoration: none; color: var(--s700); transition: transform .12s, border-color .12s, box-shadow .12s; }
.about-link:hover { transform: translateY(-2px); border-color: var(--s300); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.about-ic { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
/* 링크 모음(Linkbio) 하나로 유튜브·인스타를 대신한다 (2026-07-20) */
.about-bio { background: var(--main); }
.about-blog { background: #03c75a; }
.about-label { font-size: 11.5px; font-weight: 700; }

.mini-card { border-radius: 10px; padding: 11px 12px; background: var(--s50); box-shadow: inset 0 0 0 1px var(--s200); }
.mini-card + .mini-card { margin-top: 8px; }
.mini-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-place { font-size: 13px; font-weight: 800; color: var(--main); }
.mini-badge { border-radius: 6px; padding: 2px 8px; font-size: 10.5px; font-weight: 800; }
.mini-meta { margin-top: 4px; font-size: 11px; color: var(--s500); line-height: 1.6; }

/* 신청자/개설자 기본 정보 (이름·학년) */
.field-hint { margin: 2px 0 10px; font-size: 11.5px; color: var(--s500); line-height: 1.5; }
.students { display: flex; flex-direction: column; gap: 12px; }
.student-row { border-radius: 10px; padding: 10px 12px; background: var(--s50); box-shadow: inset 0 0 0 1px var(--s200); }
.sr-label { margin-bottom: 6px; font-size: 11px; font-weight: 800; color: var(--s400); letter-spacing: .3px; }
.student-row .input { margin-bottom: 8px; }
.grade-opts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.grade-opts .opt { min-height: 38px; padding: 6px 0; font-size: 12px; }
.grade-opts .opt.off { opacity: .45; }

/* 학생 행 안의 학부모 칸 (2026-07-29) — 아이마다 학부모가 다를 수 있어서 행 안으로 들어왔다 */
.sr-parent { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--s200); }
.sr-p-title { margin-bottom: 8px; font-size: 11px; font-weight: 800; color: var(--s400); letter-spacing: .3px; }
.sr-parent .input { margin-bottom: 8px; }
.sr-parent .input:last-child { margin-bottom: 0; }
.sr-parent .input:disabled { background: var(--s100); color: var(--s400); }
/* 「위와 동일해요」 — 누르는 면적을 넉넉히 (모바일에서 체크박스만 노리기 어렵다) */
.sr-same { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--main); }
.sr-same input { width: 17px; height: 17px; accent-color: var(--main); flex: none; }

/* 개설 금액·정보 확인 */
.price-box { border-radius: 12px; padding: 16px; background: var(--pale); text-align: center; }
.price-label { font-size: 12px; font-weight: 700; color: var(--s500); }
.price-amount { margin-top: 4px; font-size: 26px; font-weight: 800; color: var(--main); }
.price-calc { margin-top: 4px; font-size: 11.5px; color: var(--s500); }
.classinfo { border-radius: 10px; padding: 12px 14px; background: var(--s50); box-shadow: inset 0 0 0 1px var(--s200); }
.ci-title { font-size: 13px; font-weight: 800; color: var(--main); }
.ci-row { margin-top: 3px; font-size: 12px; color: var(--s600); }

/* 헤더 액션 버튼 */
.btn-about { font-size: 11.5px; padding: 6px 10px; white-space: nowrap; }
/* 🏠 = 랜딩으로. 이모지 하나뿐이라 「더 알아보기」와 높이를 맞춰 준다 (2026-08-03) */
.btn-landing { font-size: 14px; line-height: 1; padding: 6px 9px; }
.btn-icon { min-width: var(--tap); padding: 6px 8px; font-size: 18px; }
/* 좁은 화면: 헤더가 넘치지 않도록 로고 글자를 숨기고 이미지만 남긴다 */
@media (max-width: 470px) {
  .appbar .logo > div { display: none; }
  .btn-about { font-size: 11px; padding: 6px 8px; }
}

/* 캘린더 */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-title { font-size: 14px; font-weight: 800; }
.cal-nav { width: 34px; height: 34px; border: 1px solid var(--s200); border-radius: 8px; background: #fff; font-size: 14px; color: var(--s600); }
.cal-nav:disabled { color: var(--s300); cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--s400); padding: 4px 0; }
.cal-day {
  aspect-ratio: 1; border: 0; border-radius: 8px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--s700);
}
.cal-day:disabled { color: var(--s300); background: transparent; cursor: not-allowed; }
.cal-day.holiday:disabled { color: #e5a3a1; }
.cal-day.pick { background: var(--main); color: #fff; font-weight: 800; }
.cal-day.able { background: var(--pale); color: var(--main); font-weight: 800; }
.cal-legend { margin-top: 12px; font-size: 11px; color: var(--s400); line-height: 1.7; }

/* 토스트 */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 14px);
  /* ⚠️ 팝업(.backdrop = 70)보다 위여야 한다 — 팝업 안에서 저장하면 토스트가 그 위에 뜬다.
     팝업을 앞으로 올리면서(2026-08-05) 여기도 함께 올렸다. 이 셋의 순서를 바꾸지 말 것:
     플로팅 버튼 60 < 팝업 70 < 토스트 80 */
  z-index: 80; border-radius: 10px; padding: 11px 18px;
  background: var(--s800); color: #fff; font-size: 13px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--danger); }

.proto-note { margin-top: 28px; text-align: center; font-size: 11px; color: var(--s400); }
.link-btn { border: 0; background: none; color: var(--main); font-size: 11px; font-weight: 700; text-decoration: underline; }

/* ---------- 푸터 (2026-08-05 신설) ----------
   사업자 정보 + 약관·개인정보 처리방침. ⚠️ 이름은 `foot-` 로 시작한다 — app.css 는 네 페이지
   공용이라 `.footer` 같은 흔한 이름을 새로 만들면 다른 화면이 조용히 눌린다(0731 `.cal-nav` 사고).
   ⚠️ `.modal-foot` 과 헷갈리지 말 것(그건 팝업 바닥 버튼 줄이다). */
.site-foot {
  margin-top: 32px; padding-top: 18px;
  /* ⚠️ 아래를 비워 둔다 — 페이지 끝까지 내리면 플로팅 버튼(문의·결제)이 **약관 링크를 덮어**
     오른쪽 절반이 안 눌린다. 버튼이 차지하는 높이(16px + 56px)보다 넉넉히 둔다 (2026-08-05 실측). */
  padding-bottom: 44px;
  border-top: 1px solid var(--s200);
  text-align: center; color: var(--s400); font-size: 11px; line-height: 1.7;
}
.site-foot p { margin: 0; }
.foot-links { margin-top: 8px; display: flex; justify-content: center; align-items: center; gap: 10px; }
/* 링크처럼 보이지만 버튼이다(팝업을 연다) — 밑줄로 「누를 수 있음」을 남긴다 */
.foot-link {
  padding: 4px 2px; border: 0; background: none;
  color: var(--s500); font-size: 11px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
.foot-sep { color: var(--s300); }

/* 약관·처리방침 본문 — 조문이 길어 팝업 안에서 스크롤된다(.modal-body 가 이미 스크롤한다) */
.doc-body { color: var(--s600); font-size: 12.5px; line-height: 1.65; }
.doc-body h3 { margin: 16px 0 6px; color: var(--s800); font-size: 13px; font-weight: 800; }
.doc-body h3:first-child { margin-top: 0; }
.doc-body p { margin: 0 0 6px; }
.doc-body ul { margin: 0 0 6px; padding-left: 18px; }
.doc-body li { margin-bottom: 3px; }
/* 확인 버튼 하나뿐인 바닥 — `.modal-foot` 은 2칸 격자라 그냥 두면 버튼이 **왼쪽 칸에 박힌다**
   (0803 커리큘럼 팝업과 같은 처방). ⚠️ 이 두 팝업으로만 좁혀서 덮는다. */
#modal-terms .modal-foot,
#modal-privacy .modal-foot { grid-template-columns: 1fr; }

/* ---------- 반응형 ---------- */
@media (min-width: 560px) {
  .wrap { padding: 20px 20px 60px; }
  .hero { padding: 22px 110px 22px 22px; }
  .hero-l2 { font-size: 21px; }
  .row { grid-template-columns: 104px 1fr; }
}
@media (max-width: 360px) {
  .row { grid-template-columns: 80px 1fr; }
  .kcard { padding-right: 106px; }
  .kcard-right { width: 86px; }
}

/* ---------------- 플로팅 버튼 (문의 · 결제) ----------------
   하단 우측 고정. 목록을 끝까지 스크롤해도 항상 닿는 곳에 둔다.
   문의 = 중학생·미취학처럼 지금 개설된 클래스가 없는 학부모의 창구.
   결제 = 개설 확정된 내 클래스의 수강료 결제(2026-07-20 신설).
   가로로 나란히 두되, 폭이 좁으면 결제가 문의 위로 올라가도록 wrap 한다. */
.fab-stack {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: row-reverse;   /* 결제를 바깥(오른쪽)에 둔다 */
  align-items: center;
  gap: 10px;
}
.fab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 56px;
  height: 56px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--main);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(43, 75, 177, .38);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fab:hover,
.fab:focus-visible { background: var(--main-dark); box-shadow: 0 6px 18px rgba(43, 75, 177, .48); }
.fab:active { transform: scale(.94); }
.fab svg { display: block; margin-top: 2px; }
.fab-label { font-size: 10px; font-weight: 700; letter-spacing: -.3px; line-height: 1; }

/* 결제는 「해야 할 일」이라 눈에 띄는 색으로 구분한다 */
.fab-pay { background: var(--pay); box-shadow: 0 4px 14px rgba(255, 66, 95, .38); }
/* 장바구니 그림은 viewBox 안에서 오른쪽으로 치우쳐 있다(칠해진 폭이 x 4~21.7 → 중심 12.85,
   viewBox 중심은 12). 그대로 두면 아래 「결제」 글자보다 1px 쯤 오른쪽에 앉는다 →
   그 차이만큼 되민다 (2026-08-05 사용자 지시). ⚠️ 아이콘만 옮긴다 — 버튼은 그대로다. */
.fab-pay svg { transform: translateX(-1px); }
.fab-pay:hover,
.fab-pay:focus-visible { background: #e63a54; box-shadow: 0 6px 18px rgba(255, 66, 95, .48); }
.fab-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--pay);
  font-size: 11px; font-weight: 800; line-height: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* 결제 팝업 안의 클래스 카드 */
.pay-item { border: 1px solid var(--s200); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.pay-item .btn-pay { margin-top: 10px; width: 100%; }
.pay-item-t { font-size: 14px; font-weight: 800; color: var(--main); }
.pay-item-m { margin-top: 3px; font-size: 11.5px; color: var(--s600); line-height: 1.6; }

/* 토스트가 버튼에 가리지 않도록 살짝 띄운다 */
.toast.show ~ .fab-stack { transform: translateY(-4px); }

/* 팝업이 열려 있는 동안에는 플로팅 버튼을 **아예 감춘다** (2026-08-05 사용자 지시).
   z-index 만으로도 팝업이 앞에 오지만, 반투명 막(rgba .55) 뒤로 빨간 결제 버튼이 비쳐
   「팝업 위에 떠 있는 것처럼」 보였다. ⚠️ `:has` 는 이 프로젝트가 이미 쓰고 있다
   (`.lp-bn-dots:has(...)`). 못 쓰는 브라우저에서도 z-index 덕에 가려지기는 한다. */
body:has(.backdrop:not([hidden])) .fab-stack { display: none; }

/* ================================================================
   학부모 리포트 템플릿 (.wr-*)  — 2026-07-25
   ★ js/rpt-view.js 의 renderParentReport() 가 만드는 DOM 전용 스타일.
     학부모 열람 화면(/report)과 강사 미리보기 팝업이 **같은 마크업**을 쓰므로
     이 블록만 고치면 양쪽이 함께 바뀐다.
   브랜드 3색만 쓴다: 딥블루 #2b4bb1(--main) / 라이트블루 #83acdd(--sub) / 옐로 #ffd252(--accent)
================================================================= */
.wr {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;                    /* 헤더 밴드의 둥근 모서리를 유지 */
  box-shadow: 0 6px 22px rgba(43,75,177,.10), inset 0 0 0 1px var(--s100);
}
.wr + .wr { margin-top: 16px; }

/* ---- 헤더 밴드 ---- */
.wr-top {
  position: relative;
  padding: 18px 20px 16px;
  background: linear-gradient(135deg, var(--main) 0%, #3a63c9 55%, var(--sub) 100%);
  color: #fff;
}
/* 옐로 라인 = 브랜드 포인트. 밴드와 본문을 가르는 경계 역할도 한다 */
.wr-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--accent);
}
/* 오른쪽 위 동전 느낌의 옅은 원 — 이미지 없이 브랜드 톤만 얹는다 */
.wr-top::before {
  content: ''; position: absolute; right: -26px; top: -30px;
  width: 116px; height: 116px; border-radius: 50%;
  background: rgba(255,210,82,.18);
}
.wr-brand { position: relative; display: flex; align-items: center; gap: 9px; }
/* 로고 원본이 흰 바탕 정사각이라 파란 밴드 위에 그대로 얹어도 읽힌다 */
.wr-logo {
  flex: none; width: 36px; height: 36px; display: block;
  border-radius: 10px; background: #fff; object-fit: contain;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
}
.wr-brand-t { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.94); }
.wr-who { position: relative; margin-top: 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.wr-who b { font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
/* 학년(이름 줄)·회차(날짜 줄) 알약은 **같은 높이·같은 글자 크기**를 쓴다.
   자리는 서로 다르지만 높이가 어긋나면 두 알약이 다른 부품처럼 보인다.
   높이를 만드는 값(글자 크기·세로 여백·행간)을 한 규칙에 모아 둬야 둘이 갈라지지 않는다.
   ⚠️ 가로 여백은 각자 유지한다 — 회차 쪽 폭은 지금 그대로 두기로 했다(2026-07-24). */
.wr-grade, .wr-session {
  border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.45;
  padding-top: 2px; padding-bottom: 2px;
}
.wr-grade {
  background: rgba(255,255,255,.22);
  padding-left: 9px; padding-right: 9px;
}
.wr-badge {
  background: var(--accent); color: var(--main-dark); border-radius: 999px;
  padding: 2px 9px; font-size: 10.5px; font-weight: 800;
}
.wr-date {
  position: relative; margin-top: 5px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9);
}
/* 회차 — 특강·정규만 붙는다 (원데이는 총 1회라 표시하지 않는다).
   높이·글자 크기는 위의 `.wr-grade, .wr-session` 공용 규칙이 정한다. */
.wr-session {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--accent); color: var(--main-dark);
  padding-left: 10px; padding-right: 10px;
}
.wr-session b { font-weight: 800; }
.wr-session small { font-size: 10px; font-weight: 700; opacity: .72; }
.wr-place { position: relative; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.75); }

.wr-body { padding: 18px 20px 6px; }

/* ---- 오늘 배운 것 ---- */
.wr-learn { background: var(--pale); border-radius: 12px; padding: 12px 14px; }
.wr-learn-row { display: flex; align-items: flex-start; gap: 10px; }
.wr-learn-row + .wr-learn-row { margin-top: 8px; }
.wr-learn-k {
  flex: none; width: 62px; text-align: center;
  background: #fff; color: var(--main); border-radius: 999px;
  padding: 3px 0; font-size: 10.5px; font-weight: 800;
}
.wr-learn-v { font-size: 13px; font-weight: 700; color: var(--main-dark); line-height: 1.5; word-break: keep-all; }
.wr-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.wr-tag {
  background: var(--sub); color: #fff; border-radius: 999px;
  padding: 3px 10px; font-size: 11px; font-weight: 700;
}

/* ---- 성향 유형 리본 ---- */
.wr-type {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 11px 14px;
  background: #fffaeb; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.wr-type-k { flex: none; font-size: 10.5px; font-weight: 800; color: #8a6100; }
.wr-type-v { font-size: 14.5px; font-weight: 800; color: var(--main-dark); letter-spacing: -.3px; }

/* ---- 3단 문안 ---- */
.wr-sec { margin-top: 18px; }
.wr-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.wr-no {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--main); color: #fff; font-size: 11.5px; font-weight: 800;
}
.wr-no-cam { background: var(--sub); font-size: 11px; }
.wr-sec-t { font-size: 13px; font-weight: 800; color: var(--main); letter-spacing: -.3px; }
.wr-sec-p {
  margin: 0; padding-left: 30px;
  font-size: 13.5px; color: var(--s700); line-height: 1.85;
  word-break: keep-all; white-space: pre-line;
}

/* ---- 활동 사진 ---- */
.wr-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-left: 30px; }
.wr-photos.one { grid-template-columns: 1fr; }
.wr-photo {
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--s100); box-shadow: inset 0 0 0 1px var(--s200);
}
.wr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 푸터 ---- */
.wr-foot {
  margin-top: 18px; padding: 14px 20px 16px;
  background: var(--s50); border-top: 1px solid var(--s100); text-align: center;
}
.wr-foot-t { font-size: 12.5px; font-weight: 800; color: var(--main); }
.wr-foot-s { margin-top: 3px; font-size: 10.5px; color: var(--s400); letter-spacing: .2px; }

/* 좁은 화면(360) — 여백을 줄이고 본문 들여쓰기를 없앤다 */
@media (max-width: 380px) {
  .wr-top { padding: 16px 16px 14px; }
  .wr-body { padding: 16px 16px 6px; }
  .wr-sec-p, .wr-photos { padding-left: 0; }
  .wr-foot { padding: 13px 16px 15px; }
}

/* ================= 커리큘럼 (2026-08-01 신설) =================
   학부모 신청 폼의 「커리큘럼」 줄 + 「커리큘럼 알아보기」 팝업.
   ⚠️ 이름은 전부 `cur-` / `course-` 로 시작한다 — app.css 는 학부모·강사·어드민·리포트
      네 페이지가 함께 쓰므로, 흔한 이름을 새로 만들면 다른 화면이 조용히 눌린다
      (0731 `.cal-nav` 사고). 색은 브랜드 3색만 쓴다. */

/* ---- 신청 폼: 확정된 커리큘럼 표시(고르는 칸이 아니다) ---- */
.course-fixed {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--pale);
  border: 1px solid var(--sub);
  border-radius: 10px;
}
.course-badge { font-size: 22px; line-height: 1; }
.course-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.course-txt b { color: var(--main); font-size: 15px; }
.course-txt small { color: var(--s600); font-size: 12px; }

.link-more {
  margin-top: 8px; padding: 0;
  background: none; border: 0;
  color: var(--main); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
/* ★부모(.row-val)가 세로 flex 라 기본은 폭을 꽉 채워 늘어난다 → 버튼 글자가 가운데로 가서
   위 커리큘럼 상자와 어긋나 보였다. 내용 폭으로 줄이고 **오른쪽 끝을 상자와 맞춘다**
   (2026-08-03 사용자 지시). ⚠️ `text-align:right` 로는 안 된다 — 늘어난 폭 자체가 남는다. */
/* ⚠️ 부모(.row-val)의 `gap: 6px` 이 먼저 벌린다 — margin-top 을 0으로 해도 6px 이 남는다.
   더 붙이려면 **음수 margin 으로 그 gap 을 덜어내야** 한다 (2026-08-05 사용자 지시로 한 번 더 축소). */
#q-course-more { align-self: flex-end; margin-top: -4px; }

/* ---- 팝업 ---- */
.cur-modal { max-width: 400px; }

/* 학년대 토글 */
.cur-track { display: flex; gap: 6px; padding: 3px; background: var(--s100); border-radius: 10px; }
.cur-track-btn {
  flex: 1; padding: 8px 0;
  background: none; border: 0; border-radius: 8px;
  color: var(--s600); font-size: 13px; font-weight: 600;
}
.cur-track-btn[aria-selected="true"] { background: #fff; color: var(--main); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.cur-intro { margin: 10px 2px 12px; color: var(--s600); font-size: 12.5px; line-height: 1.5; }
/* ★안내 문구가 없는 단계(ADVANCED 위)에서는 **줄과 여백을 통째로** 없앤다 (2026-08-05).
   `hidden` 대신 `:empty` 인 이유 = 문구를 넣고 빼는 쪽(paintCurriculum)이 textContent 하나만
   다루면 되기 때문이다. 빈 문자열을 넣으면 자리도 함께 사라진다. */
.cur-intro:empty { display: none; }

/* 단계 세그먼티드 컨트롤
   ⚠️ 6칸을 360px 에 균등 분할하면 칸당 60px 이라 뱃지+이름이 눌린다 →
      가로 스크롤로 두고 칸 폭을 고정한다. 사다리가 선형이라 스크롤 자체가 진행감을 준다. */
.cur-seg-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cur-seg-wrap::-webkit-scrollbar { display: none; }
/* ★★2026-08-02: 가로 한 줄을 포기하고 3×2 격자로 접는다.
   커리큘럼명이 한글 2~3자(씨앗·열매)에서 영문(BEGINNER·MONEY MARBLE)으로 길어져,
   360px 을 6칸으로 나누면 칸당 58px 이라 「MONEY MARBLE」이 세 줄로 쪼개진다.
   3칸이면 칸당 약 112px 이라 한 줄에 들어간다. 스크롤은 쓰지 않는다 —
   목표 단계(MONEY MARBLE)가 스크롤해야 보이면 사다리의 끝이 안 보인다(0801 결론 유지). */
.cur-seg {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; padding: 3px;
  background: var(--s100); border-radius: 12px;
}
.cur-seg-btn {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px 6px;
  background: none; border: 0; border-radius: 9px;
  /* 기본은 랜딩 탭과 같은 규칙 — 전부 검은 글자로 통일하고 색은 고른 단계에만 (2026-08-03) */
  color: var(--s800); font-size: 11px; font-weight: 600;
}
.cur-seg-btn[aria-selected="true"] { background: var(--main); color: #fff; }
/* 확인 버튼 하나뿐인 바닥 — `.modal-foot` 이 2칸 격자라 버튼이 **왼쪽 칸에 박혀** 쏠려 보였다.
   폭을 꽉 채운다 (2026-08-03 사용자 확정 · 다른 단일버튼 모달과 같은 처방).
   ⚠️ `.modal-foot` 은 4개 페이지 공용이므로 **이 팝업으로만** 좁혀서 덮는다. */
.cur-modal .modal-foot { grid-template-columns: 1fr; }

.cur-seg-badge { font-size: 17px; line-height: 1.1; }
/* 이름이 칸보다 길면 줄바꿈 대신 줄여 준다 — 격자가 들쭉날쭉해지지 않게 */
.cur-seg-name {
  font-size: 11px; letter-spacing: -.2px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 고른 단계의 색 3갈래 — **랜딩 탭(.lp-seg-btn)과 같은 규칙**이다 (2026-08-03 사용자 확정).
   한쪽만 고치면 같은 사다리가 두 화면에서 다른 색이 된다 → 바꿀 땐 반드시 둘 다.
   ⚠️ 격자에서는 margin-left 로 띄우면 칸이 밀려 나가므로 색으로만 구분한다.
   ⚠️ **비선택 상태에는 색을 넣지 않는다** — 위 통일 규칙(--s800)을 덮어쓰지 말 것. */
.cur-seg-btn.is-first[aria-selected="true"] { background: var(--sub); color: var(--s800); }
.cur-seg-btn.is-last[aria-selected="true"] { background: var(--accent); color: var(--main); }

/* 상세 패널 */
.cur-panel { margin-top: 14px; }
.cur-head { display: flex; align-items: center; gap: 12px; }
.cur-head-badge {
  flex: 0 0 auto; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pale); border-radius: 50%; font-size: 26px;
}
.cur-head-txt { min-width: 0; }
.cur-head-step { color: var(--s500); font-size: 11.5px; font-weight: 600; }
.cur-head-name { color: var(--main); font-size: 18px; font-weight: 700; line-height: 1.3; }
.cur-head-desc { color: var(--s600); font-size: 13px; }
/* 학년대로 갈리는 단계에만 붙는 한 줄 (2026-08-05 사용자 지시로 색은 브랜드 서브 파랑).
   ⚠️ 흰 배경 위 --sub(#83acdd) 는 **대비비 2.36** 이다(작은 글씨 권장 4.5). 같은 패널의
      회차 번호(.cur-outline-no)가 이미 같은 색이라 톤은 맞지만, 읽기 힘들다는 말이 나오면
      --main 으로 내릴 것(대비비 8.6). 색을 바꿀 땐 반드시 대비비를 다시 잴 것. */
/* ⚠️ 한글은 기본값이 아무 글자에서나 잘린다(「달라 / 요!」) → 띄어쓰기에서만 접는다 */
.cur-head-note { margin-top: 3px; color: var(--sub); font-size: 12px; font-weight: 700; word-break: keep-all; }

/* 가운데 칸 — 회차표 또는 상세 이미지가 들어온다 (2026-08-05 신설).
   팝업에서는 아무 일도 안 하는 빈 상자다. 랜딩에서만 여기가 스크롤 영역이 된다.
   ⚠️ 위 간격은 **여기**가 가진다 — 안쪽(.cur-outline)에 두면 스크롤될 때 같이 밀려 올라간다. */
.cur-mid { margin-top: 14px; }
/* 상세 이미지가 들어올 때 = BEGINNER 의 회색 안내 칸과 같은 자리·같은 바탕 */
.cur-mid-img { background: var(--s50); border-radius: 10px; overflow: hidden; }

.cur-outline { border-top: 1px solid var(--s200); }
.cur-outline-row { display: flex; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--s100); }
.cur-outline-no { flex: 0 0 44px; color: var(--sub); font-size: 12px; font-weight: 700; }
/* 게임명(b) + 설명 한 줄(small). 아직 개발 전인 게임은 설명이 길어 두 줄이 될 수 있다 */
.cur-outline-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--s700); font-size: 13px; }
.cur-outline-txt b { color: var(--s800, var(--main)); font-weight: 700; }
.cur-outline-txt small { color: var(--s500); font-size: 11.5px; line-height: 1.45; }
.cur-outline-todo {
  padding: 22px 12px; text-align: center;
  color: var(--s500); font-size: 13px;
  background: var(--s50); border-radius: 10px; margin-top: 10px;
}

.cur-meta { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cur-meta-row { color: var(--s700); font-size: 13px; }
.cur-meta-sale { color: var(--main); font-weight: 600; }

.cur-mine {
  margin-top: 14px; padding: 9px 12px; text-align: center;
  background: var(--accent); color: var(--main);
  border-radius: 9px; font-size: 13px; font-weight: 700;
}

@media (min-width: 640px) {
  .cur-modal { max-width: 520px; }
  /* 데스크톱은 flex 로 알아서 늘어난다 — 폭 고정 불필요 */
}

/* ================= 결제 시점 안내 (2026-08-03 신설) =================
   「신청 = 즉시 결제」로 오해하는 것을 막는다. 클래스 개설 확인 팝업과 클래스 신청
   팝업 두 곳에 같은 부품으로 들어간다.
   ⚠️ 글자 크기를 키우지 말 것 — 모달 안의 다른 글(.modal-msg 13px · .field-hint)과
      어긋나 레이아웃이 흐트러진다. **위치(금액 바로 밑)와 색**으로만 세운다.
   색은 브랜드 옐로(--accent #ffd252) 계열의 옅은 바탕이다. 파란 금액 상자(.price-box)
   바로 아래에서 확실히 갈라져 보이면서 경고(--danger)처럼 겁주지는 않는다. */
.pay-notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 11px 12px;
  border-radius: 10px;
  background: #fff8e3;
  box-shadow: inset 0 0 0 1px #ffdf8f;
  color: #7a5c00;
  font-size: 12.5px; line-height: 1.55;
}
.pay-notice b { color: #5a4400; font-weight: 800; }
.pay-notice-ic { flex: none; font-size: 14px; line-height: 1.45; }

/* ================= 랜딩 (2026-08-03 신설) =================
   시안 = 「우.아.금 클래스 개설 플랫폼(360*800)」 3페이지.
   ⚠️ 이름은 전부 `lp-` 로 시작한다 — app.css 는 학부모·강사·어드민·리포트 네 페이지가
      함께 쓰므로 흔한 이름을 새로 만들면 다른 화면이 조용히 눌린다(0731 `.cal-nav` 사고).
   ⚠️ 커리큘럼 상세는 팝업과 **같은 부품**(.cur-*)을 그대로 쓴다. 여기서 새로 만들면
      두 화면이 곧 어긋난다 — m-app.js 의 paintCoursePanel() 하나가 둘 다 그린다. */

/* 로고를 버튼으로 바꿔도 생김새는 그대로여야 한다 */
.logo-btn {
  padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit;
}

.lp-wrap {
  /* 하단 고정 CTA 에 내용이 가리지 않도록 그만큼 비워 둔다.
     ★2026-08-06: 막대 높이를 줄였으므로 96px 을 박아 두면 그만큼이 그냥 빈 칸이 된다 —
     m-landing.js 가 실측해 넣는 --lp-cta-h 를 쓰고, 그 값이 아직 없을 때만 76px 로 어림한다. */
  padding-bottom: calc(var(--lp-cta-h, 76px) + env(safe-area-inset-bottom));
}

/* ---- 배너 (가로:세로 = 2.25:1) ----
   transform 대신 스크롤 스냅을 쓴다 — 손가락 스와이프가 공짜로 따라온다. */
.lp-banner { margin-bottom: 14px; }
.lp-bn-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 16px;
  background: var(--pale);
}
.lp-bn-track::-webkit-scrollbar { display: none; }
.lp-bn {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  aspect-ratio: 2.25 / 1;
}
.lp-bn img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 16px; }
.lp-bn-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.lp-bn-dot {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%; background: var(--s300);
  transition: background .15s, width .15s;
}
.lp-bn-dot[aria-selected='true'] { width: 18px; border-radius: 4px; background: var(--main); }
/* 배너가 하나뿐이면 점은 의미가 없다 */
.lp-bn-dots:has(.lp-bn-dot:only-child) { display: none; }

/* ⛔`.lp-feats`·`.lp-feat*`(4대 특징 카드 4장)은 2026-08-08 사용자 지시로 없앴다.
   같이 사라진 것 = index.html 의 `#lp-feats` · m-landing.js 의 FEATURES·paintFeatures. */

.lp-h2 {
  margin: 24px 0 10px;
  font-size: 17px; font-weight: 800; color: var(--s800); letter-spacing: -.4px;
}
/* 카드가 없어져 이 제목이 화면 맨 위로 올라왔다 — 위 여백 24px 은 「카드와 제목 사이」용이라
   그대로 두면 페이지 머리에 빈 칸만 남는다.
   ⚠️ `:first-child` 로는 못 잡는다 — 배너 섹션은 배너가 없어도 hidden 인 채 **DOM 에 남는다**.
      m-landing.js 의 paintBanners 가 그 hidden 을 켜고 끄므로, 그 상태를 그대로 조건으로 쓴다
      (배너를 올리면 배너가 앞에 서니 24px 이 저절로 돌아온다). */
#lp-banner[hidden] + .lp-h2-top { margin-top: 4px; }

/* ---- 커리큘럼 탭 (스크롤하면 헤더 밑에 붙는다) ----
   ⚠️ --appbar-h 는 m-landing.js 가 헤더를 **실측**해 넣는다. 픽셀을 박으면
      헤더 문구가 두 줄이 되는 순간 탭이 헤더를 파고든다. */
.lp-segbar {
  position: sticky;
  top: var(--appbar-h, 60px);
  z-index: 15;
  display: flex; align-items: center; gap: 2px;
  /* 좌우로 화면 끝까지 배경을 깔아 스크롤되는 내용이 옆으로 비쳐 나가지 않게 한다 */
  margin: 0 -16px; padding: 8px 6px;
  /* ⚠️★★**반투명으로 두지 말 것** (2026-08-05). .96 이라도 상세 이미지가 이 뒤로 지나가면
     그림이 비쳐 「탭 뒤로 스크롤된다」는 것이 눈에 띈다. 페이지 바탕색과 같은 **불투명** 색으로 덮는다. */
  background: var(--s50);
  border-bottom: 1px solid var(--s200);
}
.lp-seg-nav {
  flex: none; width: 28px; height: 40px;
  border: 0; background: none;
  color: var(--main); font-size: 26px; font-weight: 700; line-height: 1;
  padding: 0;
}
.lp-seg-nav:disabled { color: var(--s300); }
.lp-seg-vp { flex: 1; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; min-width: 0; }
.lp-seg-vp::-webkit-scrollbar { display: none; }
.lp-seg { display: flex; gap: 6px; width: max-content; padding: 1px; }
.lp-seg-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 92px; min-height: 46px; padding: 6px 12px;
  background: #fff; border: 1px solid var(--s200); border-radius: 12px;
  transition: background .15s, border-color .15s, color .15s;
}
/* ★기본(비선택)은 **전부 흰 버튼 + 검은 글자로 통일**한다 (2026-08-03 사용자 확정).
   색은 **누른 단계에만** 쓴다 — 안 고른 탭까지 색이 들어가면 무엇을 고른 건지 흐려지고,
   흰 배경 위 브랜드 옐로는 대비비 1.44 라 글자가 아예 안 보였다(0803 실측). */
.lp-seg-name { font-size: 12px; font-weight: 800; color: var(--s800); letter-spacing: -.2px; white-space: nowrap; }
.lp-seg-desc { font-size: 10px; color: var(--s500); white-space: nowrap; }
.lp-seg-btn[aria-selected='true'] { background: var(--main); border-color: var(--main); }
.lp-seg-btn[aria-selected='true'] .lp-seg-name { color: #fff; }
.lp-seg-btn[aria-selected='true'] .lp-seg-desc { color: rgba(255,255,255,.82); }
/* MONEY MARBLE = 최상위. 팝업(.cur-seg-btn.is-last)과 같은 강조를 쓴다 */
/* ---- 고른 단계의 색 3갈래 (2026-08-03 사용자 확정) ----
   BEGINNER(체험) = 서브 파랑 + 검은 글자
   STARTER~MASTER = 딥블루 + 흰 글자 (바로 위 기본 규칙)
   MONEY MARBLE(최상위) = 옐로 + 딥블루 글자
   ⚠️ **비선택 상태에는 색을 넣지 않는다** — 위 통일 규칙을 덮어쓰지 말 것. */

.lp-seg-btn.is-first[aria-selected='true'] { background: var(--sub); border-color: var(--sub); }
.lp-seg-btn.is-first[aria-selected='true'] .lp-seg-name { color: var(--s800); }
.lp-seg-btn.is-first[aria-selected='true'] .lp-seg-desc { color: var(--s700); }

.lp-seg-btn.is-last[aria-selected='true'] { background: var(--accent); border-color: var(--accent); }
.lp-seg-btn.is-last[aria-selected='true'] .lp-seg-name { color: var(--main); }
.lp-seg-btn.is-last[aria-selected='true'] .lp-seg-desc { color: var(--main-dark); }

.lp-track { margin-top: 14px; }

/* ---- 단계별 상세 ---- */
.lp-detail { margin-top: 14px; }
/* 이미지를 여러 장 이어 붙이는 자리. 사이가 벌어지면 한 장짜리 상세페이지로 안 보인다.
   ⚠️ 모서리는 감싼 상자(.cur-mid-img)가 잘라 준다 — 낱장에 반경을 주면 이어 붙인 자리가 패인다. */
.lp-det-img { display: block; width: 100%; height: auto; }

/* 팝업과 같은 .cur-* 부품이 들어온다. 카드로 감싸 준다.
   ⚠️ `.lp-detail .cur-panel`(자손)이 아니라 **`.lp-detail.cur-panel`(같은 요소)** 이다 —
      paintCoursePanel() 이 넘겨받은 컨테이너 **자신에게** 클래스를 붙인다. 자손으로 쓰면
      아무 데도 안 걸려 카드가 조용히 안 그려진다(0803 에 헤드리스로 잡았다).

   ★★2026-08-05: **위·아래는 고정하고 가운데만 스크롤한다**(사용자 지시).
   상세 이미지가 길면 예전에는 카드가 통째로 늘어나 금액·수료 조건이 저 아래로 밀려났고,
   페이지가 통으로 스크롤되면서 그림이 스티키 탭 뒤로 지나갔다.
   → 카드 높이를 「탭 아래 ~ 하단 CTA 위」로 묶고, 넘치는 것은 가운데 칸 안에서만 흐르게 한다.
   ⚠️ 높이 세 값은 전부 m-landing.js 의 **실측값**이다(픽셀을 박으면 헤더가 두 줄이 되는 순간 어긋난다).
   ⚠️ dvh 를 모르는 브라우저를 위해 vh 를 먼저 쓴다 — 뒤 줄은 아는 브라우저에서만 이긴다. */
/* ★★2026-08-07: 상세 카드를 **좌우 여백 없이 화면 끝까지** 넓힌다(사용자 지시).
   상세 이미지가 이 화면의 본론인데, `.wrap` 패딩 16 + 테두리 1 + 카드 패딩 16 = 한쪽 33px 씩
   총 66px 을 여백이 먹고 있었다(390px 폰에서 그림이 324px 로 줄어든다).
   ⚠️ `.wrap` 자체의 패딩은 건드리지 않는다 — 배너·특징·제목은 지금 여백이 맞다.
      이 카드만 **음수 마진으로 패딩 밖으로 빼낸다**(폭을 100vw 로 주면 안 된다:
      세로 스크롤바가 있는 데스크톱에서 가로 스크롤이 생긴다).
   ⚠️ 값은 `.wrap` 의 좌우 패딩과 **반드시 같아야** 한다 — 한쪽만 고치면 카드가 삐뚤어진다. */
/* ★★2026-08-08: 카드 **아래쪽 죽은 여백 30px 을 걷어내 그림에 준다**(사용자 지시 —
   「이미지 영역과 하단 고정 막대 사이에 죽는 여백이 살짝 있다 / 폰에서 상세 이미지가
   최대한 많이 보이게 하라」). 죽어 있던 30px 의 정체는 딱 두 군데였다:
     ① 카드 아래 패딩 16px — 가운데 칸(그림) 밑에 흰 띠로 남는다
     ② 아래 `height` 계산의 `- 28px` 중 **14px** — 28 = 위 `margin-top:14px` + 아래 숨통 14px 였다.
        스티키 세그바가 붙은 상태에서 카드 바닥이 CTA 막대 위 14px 에 떠서 그게 곧 그 틈이다.
   → 패딩은 `16px 0 0`(위만 남긴다 = 세그바와 머리글이 붙지 않게), 계산은 `- 14px`(위 마진분만).
   ⚠️ `- 14px` 의 14 는 **바로 위 `margin-top` 과 같은 값이어야 한다** — 한쪽만 고치면
      카드가 CTA 막대를 파고들거나(작게) 틈이 되살아난다(크게). 둘을 같이 볼 것. */
.lp-detail.cur-panel {
  margin-top: 14px;
  margin-left: -16px; margin-right: -16px;
  padding: 16px 0 0;
  background: #fff; border: 1px solid var(--s200); border-radius: 14px;
  border-left: 0; border-right: 0; border-radius: 0;
  display: flex; flex-direction: column;
  /* ★★2026-08-05: `max-height` 가 아니라 **`height`** 다(고정 높이).
     max-height 였을 때 = 단계마다 카드 높이가 달라 **문서 전체 높이가 바뀌었고**, 아래쪽까지
     스크롤해 둔 상태에서 짧은 단계를 누르면 브라우저가 스크롤을 되감아 **화면이 위로 튀었다**
     (사용자 지적). 높이를 고정하면 탭을 바꿔도 문서 높이가 그대로라 스크롤이 움직이지 않는다.
     ⚠️ 그래서 내용이 짧은 단계는 가운데 칸에 여백이 남는다 — 그게 이 화면의 의도다(틀 고정). */
  height: calc(100vh - var(--appbar-h, 60px) - var(--lp-segbar-h, 56px) - var(--lp-cta-h, 76px) - 14px);
  height: calc(100dvh - var(--appbar-h, 60px) - var(--lp-segbar-h, 56px) - var(--lp-cta-h, 76px) - 14px);
  min-height: 260px;   /* 가로로 눕힌 폰처럼 화면이 낮을 때 카드가 찌그러지지 않게 */
}
/* ⚠️ `min-height: 0` 이 없으면 flex 자식은 **내용보다 작아지지 않는다** → 카드가 max-height 를
      뚫고 나가 스크롤이 안 생긴다. `overscroll-behavior: contain` 은 끝까지 넘겼을 때
      페이지가 따라 튀는 것을 막는다. */
.lp-detail .cur-mid {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* 머리·금액 줄은 스크롤 밖이므로 줄어들면 안 된다 */
.lp-detail .cur-head,
.lp-detail .cur-meta,
.lp-detail .cur-mine { flex: none; }

/* ★2026-08-07: 카드에서 좌우 패딩을 뺐으므로(위 .lp-detail.cur-panel) **글자 줄에만** 되돌려 준다.
   사용자 지시 = 「아이콘·단계·단계 이름·단계 설명은 넓힌 영역 안에 그대로 살려라」.
   → 넓어진 것은 카드이고, 이 줄들은 예전과 같은 자리에 선다. 이미지만 끝까지 나간다. */
.lp-detail .cur-head,
.lp-detail .cur-meta,
.lp-detail .cur-mine { padding-left: 16px; padding-right: 16px; }

/* 상세 이미지 칸 — 화면 끝까지 쓰므로 모서리 반경과 배경 여백을 없앤다.
   ⚠️ `.cur-mid-img` 의 radius 10px 은 **팝업에서는 그대로 둔다**(거기선 카드 안이라 둥근 게 맞다).
      그래서 `.lp-detail` 아래로 한정한다. */
.lp-detail .cur-mid-img { border-radius: 0; background: transparent; }
/* 회차표(이미지가 없는 단계)는 글자라 가장자리에 붙으면 안 된다 — 이미지 칸만 끝까지 간다. */
.lp-detail .cur-mid:not(.cur-mid-img) { padding-left: 16px; padding-right: 16px; }

/* ---- 하단 고정 CTA ----
   ★2026-08-05: **왼쪽은 플로팅 버튼(결제·문의) 자리로 비운다**(사용자 지시) —
   버튼 2개(44px×2 + 사이 10px) + 좌우 여백. 그만큼 CTA 버튼은 좁아지고 오른쪽으로 붙는다.
   ⚠️ 이 폭을 바꾸면 아래 `body.on-landing .fab-stack` 의 left 도 함께 봐야 한다.

   ★2026-08-06: 막대가 화면을 너무 먹어 정작 상세 이미지가 안 보인다는 지적 → **높이를 70% 로**.
   줄인 곳 = 위아래 여백 10→8 · 버튼 50→42 · 안내 문구를 **한 줄**로(11→10px 대) ·
   랜딩에서만 플로팅 버튼 56→44. 대략 107px → 75px 다.
   ⚠️ 실제 높이는 m-landing.js 가 재서 --lp-cta-h 로 넣는다 — 여기 숫자는 그 결과일 뿐 근거가 아니다. */
.lp-cta {
  position: fixed; left: 0; right: 0;
  bottom: 0; z-index: 55;
  /* ★2026-08-06(2차): 안내문구를 요청 탭으로 옮겨 **버튼 한 줄만** 남았다 →
     위아래 여백을 12/8 로 두어 버튼을 살짝 아래로 앉히고 막대는 더 얇아졌다(76px → 62px).
     ⚠️ 위가 아래보다 큰 것은 의도다 — 문구가 있던 자리를 버튼이 아래로 내려가 메운다. */
  padding: 12px 16px calc(8px + env(safe-area-inset-bottom));
  /* 왼쪽은 플로팅 버튼 자리 = 16(여백) + 44 + 10(사이) + 44 + 8(숨통) */
  padding-left: 122px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--s200);
}
/* ★버튼 색 = 브랜드 옐로 (2026-08-06 사용자 지시).
   ⚠️ 옐로 위 **흰 글자는 대비비 1.44** 라 안 보인다 → 글자는 딥블루(--main)다(대비비 5.32, AA 통과).
   ⚠️ .btn-main:not(:disabled):hover 가 특이도에서 이기므로 hover 도 여기서 다시 덮어야 한다. */
.lp-go {
  display: block;
  /* ★폭 (2026-08-06 2차) — 안내문구가 사라져 기준이 없어졌으므로 **직전 폭을 그대로 옮겨 적고
     좌우 5%씩(=합 10%) 넓혔다**(사용자 지시).
     직전 폭 = 문구의 max-content = 18.16 × 문구 글자크기(clamp(9.5px, 2.7vw, 10.5px))
             → 320px:172.5 / 360px:176.5 / 390px 이상:190.7 (CDP 실측)
     ×1.1 → 계수 19.98 → clamp(190px, 53.9vw, 210px).
     ⚠️ `max-width` 로 거는 이유 = 320px 처럼 자리가 그보다 좁으면 `width:100%` 가 이겨
        막대 밖으로 안 삐져나간다(`width` 로 박으면 넘친다). */
  width: 100%;
  max-width: clamp(190px, 53.9vw, 210px);
  margin: 0 auto;
  min-height: 42px; font-size: 14px;
  background: var(--accent); color: var(--main);
}
.lp-go:not(:disabled):hover,
.lp-go:not(:disabled):focus-visible { background: #f2c02f; color: var(--main); }
/* ⛔`.lp-cta-sub` 는 2026-08-06(2차)에 사라졌다 — 그 문구는 클래스 요청 탭의
   개설 버튼 아래(`.submit-fee`)로 옮겼다. 하단 막대에는 버튼 하나만 남는다. */

/* ★2026-08-05: 랜딩에서는 플로팅 버튼이 **하단 막대 안 왼쪽**에 앉는다 (사용자 지시).
   예전에는 막대 **위로** 올려 두었는데(0803), 그러면 상세 이미지를 가린다.
   ⚠️ --lp-cta-h 는 m-landing.js 가 막대를 **실측**해 넣는다 — 문구가 두 줄이 되면 막대가
      두꺼워지고 이 식이 알아서 따라간다(픽셀을 박으면 그 순간 어긋난다).
   ⚠️ 44px 은 **랜딩에서의** `.fab` 지름이다(아래 참조). 그 값을 바꾸면 여기도 함께 고칠 것. */
body.on-landing .fab-stack {
  left: 16px; right: auto;
  bottom: calc((var(--lp-cta-h, 76px) - 44px) / 2);
}
/* ★2026-08-06: 랜딩에서만 플로팅 버튼을 56 → 44px 로 줄인다 (사용자 지시).
   막대 높이를 70% 로 줄이는데 버튼이 56px 그대로면 버튼이 막대보다 커져 위아래로 삐져나온다.
   ⚠️ **랜딩에서만** 이다 — 목록·신청 화면의 버튼 크기는 그대로 둔다(`body.on-landing` 한정).
   ⚠️ svg 는 width/height **속성**이 26 으로 박혀 있어 CSS 로 덮어야 줄어든다. */
body.on-landing .fab { width: 44px; height: 44px; gap: 0; }
body.on-landing .fab svg { width: 20px; height: 20px; margin-top: 1px; }
body.on-landing .fab-label { font-size: 9px; }
body.on-landing .fab-badge {
  min-width: 17px; height: 17px; padding: 0 4px;
  font-size: 10px; line-height: 17px;
}

@media (min-width: 560px) {
  .lp-segbar { margin: 0; padding: 8px 0; border-radius: 0; }
}