/* 수업 규정(/class/rules — SSOT 11절 "수업 규정") — 규정 셋(결제 기한 규정은 Checkout API 전환으로 삭제, 2026-11-05), 항목별 체크박스 [ ] 규정을 확인하였습니다 → 퀴즈 → 정답이면 체크. */
.class-rules { max-inline-size: var(--sonub-reading-width); margin-inline: auto; }
.class-rules > .sonub-page { display: grid; gap: var(--wa-space-l); }
.class-rules .sonub-page-header { margin: 0; }
.class-rules .rules-heading :is(.page-guide-text, .sonub-lead) { color: var(--sonub-ink); font-weight: 750; line-height: 1.65; }
.class-rules .rules-purpose { margin: 0; padding-block-start: var(--wa-space-m); border-block-start: 1px solid var(--sonub-border); color: var(--sonub-muted); line-height: 1.75; }

/* 강사 엄선과 보장 범위는 차분한 안내로. */
.class-rules .rules-assurance { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--wa-space-m); padding: clamp(1.25rem, 3vw, 2rem); border-inline-start: 4px solid var(--sonub-accent); border-radius: var(--sonub-radius-panel); background: var(--sonub-accent-soft); }
.class-rules .rules-assurance h2 { margin: 0; color: var(--sonub-accent-ink); font-size: var(--wa-font-size-l); font-weight: 800; line-height: 1.5; text-wrap: pretty; }
.class-rules .rules-assurance p { margin: var(--wa-space-s) 0 0; color: var(--sonub-ink); line-height: 1.8; }

/* 예약에서 왔을 때의 경고 · 저장 알림 */
.class-rules .rules-required { font-size: var(--wa-font-size-s); line-height: 1.7; }
.rules-status { margin: 0; padding: var(--wa-space-m) var(--wa-space-l); border-radius: var(--wa-border-radius-m); line-height: 1.7; }
.rules-status { border: 1px solid var(--wa-color-success-border-normal); background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }

.class-rules .rules-agree:focus-visible { outline: 3px solid var(--sonub-accent); outline-offset: 4px; }

/* 확인 진행 */
.class-rules .rules-guide { display: grid; gap: var(--wa-space-s); padding-block: var(--wa-space-s); }
.rules-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wa-space-s) var(--wa-space-m); }
.class-rules .rules-guide h2 { margin: 0; font-size: var(--wa-font-size-m); line-height: 1.5; }
.rules-progress-text { display: flex; align-items: center; gap: var(--wa-space-xs); margin: 0; color: var(--sonub-accent-ink); font-size: var(--wa-font-size-s); font-weight: 750; }
.class-rules .rules-how { margin: 0; color: var(--sonub-muted); font-size: var(--wa-font-size-s); line-height: 1.8; }
.rules-done { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s); margin: var(--wa-space-m) 0 0; padding: var(--wa-space-m); border-radius: var(--wa-border-radius-m); background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); font-weight: 700; line-height: 1.7; }
.class-rules .rules-done .sonub-button { margin-inline-start: auto; }
.rules-done[hidden] { display: none; }

/* 규정 카드 */
.rules-list { display: grid; gap: var(--wa-space-l); margin: 0; padding: 0; list-style: none; }
.rules-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--wa-space-l); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--sonub-border); border-radius: var(--sonub-radius-panel); background: var(--sonub-surface); scroll-margin-block-start: calc(var(--sonub-header-height, var(--bar-height, 4rem)) + var(--wa-space-l)); }
.rules-item:target { border-color: var(--sonub-accent); }
.rules-item[data-checked] { border-color: var(--wa-color-success-border-normal); }
.rules-number { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--wa-border-radius-m); background: var(--sonub-accent-soft); color: var(--sonub-accent-ink); font-size: var(--wa-font-size-l); font-weight: 800; }
.rules-item[data-checked] .rules-number { background: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud); }
.rules-body { display: grid; gap: var(--wa-space-m); min-inline-size: 0; }
.rules-body h2 { display: flex; align-items: start; gap: var(--wa-space-s); margin: 0; font-size: var(--wa-font-size-l); font-weight: 800; line-height: 1.55; text-wrap: pretty; }
.rules-body h2 > .fa-solid { flex: none; margin-block-start: var(--wa-space-2xs); color: var(--sonub-accent-ink); }
.rules-body p { margin: 0; max-inline-size: 65ch; line-height: 1.85; }
.class-rules .rules-body > .sonub-reference { padding: var(--wa-space-m); border: 0; border-radius: var(--wa-border-radius-m); background: var(--sonub-canvas); }
.class-rules .rules-body > .sonub-reference :is(p, a) { font-size: var(--wa-font-size-s); }

/* 확인 — 체크박스 [ ] 규정을 확인하였습니다 → 퀴즈 → 정답이면 체크(스크립트 없으면 :has 로 펼친다) */
.rules-check { display: grid; gap: var(--wa-space-s); margin-block-start: var(--wa-space-s); padding-block-start: var(--wa-space-l); border-block-start: 1px solid var(--sonub-border); }
.rules-agree { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s); justify-self: start; min-block-size: 2.75rem; padding: var(--wa-space-xs) var(--wa-space-m); border: 2px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-surface); color: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.rules-agree:hover, .rules-agree:focus-within { border-color: var(--sonub-accent); }
.rules-agree input, .rules-box { flex: none; inline-size: 1.4rem; block-size: 1.4rem; margin: 0; accent-color: var(--wa-color-success-fill-loud); cursor: pointer; }
.rules-box { border: 2px solid var(--sonub-muted, currentColor); border-radius: var(--wa-border-radius-s); background: var(--sonub-surface); }
.rules-agree:has(input:checked) { border-color: var(--wa-color-success-border-normal); background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
.rules-agree:has([data-confirmed]) { cursor: default; }
.rules-agree:has([data-confirmed]) input { cursor: default; }
.rules-agree time { color: var(--sonub-muted, inherit); font-weight: 400; font-size: var(--wa-font-size-s); }
.rules-login { margin: 0; font-size: var(--wa-font-size-s); color: var(--sonub-muted, inherit); }
.rules-quiz { display: none; gap: var(--wa-space-m); padding: var(--wa-space-l); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); background: var(--sonub-canvas); }
.rules-check.is-open .rules-quiz, .rules-check:has([data-rules-agree]:checked:not([data-confirmed])) .rules-quiz { display: grid; }

/* (2) 시스템 — 수업료 분쟁은 학생과 강사가 스스로 */
.rules-note { display: grid; gap: var(--wa-space-xs); padding: var(--wa-space-m) var(--wa-space-l); border-inline-start: 4px solid var(--wa-color-danger-fill-loud); border-radius: var(--wa-border-radius-m); background: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet); }
.rules-note h3 { display: flex; align-items: start; gap: var(--wa-space-s); margin: 0; color: inherit; font-size: var(--wa-font-size-m); line-height: 1.6; }
.rules-note h3 > .fa-solid { flex: none; margin-block-start: 0.25em; }
.rules-note p { font-weight: 400; }
.rules-quiz fieldset { display: grid; gap: var(--wa-space-s); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.rules-quiz legend { display: flex; align-items: start; gap: var(--wa-space-s); margin-block-end: var(--wa-space-s); padding: 0; font-weight: 700; line-height: 1.6; }
.rules-quiz-q { flex: none; display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--sonub-accent); color: var(--sonub-on-accent); font-size: var(--wa-font-size-s); }
.rules-option { display: flex; align-items: start; gap: var(--wa-space-s); min-block-size: 2.75rem; padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); line-height: 1.6; cursor: pointer; }
.rules-option input { flex: none; margin-block-start: 0.35em; accent-color: var(--sonub-accent); }
.rules-option:has(input:checked) { border-color: var(--sonub-accent); background: var(--sonub-accent-soft); }
.rules-quiz-error { color: var(--wa-color-danger-on-quiet); font-weight: 700; }
.rules-quiz-error:empty { display: none; }
.rules-submit { justify-self: start; }
@media (max-width: 40rem) {
    .class-rules .rules-assurance { grid-template-columns: minmax(0, 1fr); }
    .rules-item { grid-template-columns: minmax(0, 1fr); gap: var(--wa-space-m); }
    .class-rules .rules-done .sonub-button { inline-size: 100%; margin-inline-start: 0; }
    .rules-quiz { padding: var(--wa-space-m); }
}

/* (3) 강사 선택·수업 규정 및 이용 제한 안내 — 퀴즈 없이 [규정을 확인하였습니다] 단추(2026-11-05 사용자 지시) */
.rules-confirm { display: grid; gap: var(--wa-space-s); justify-items: start; }
.rules-confirm-button { min-block-size: 2.75rem; }
.rules-item .service-notice { margin-block-start: var(--wa-space-2xs); }