/* 소마앤바디 가게 — 교육 /class/ 「준비 중」 쪽(templates/class.php · 2026-11-07 M072)
   모양 = 한얼이 고른 시안 C 의 머리(docs/superpowers/handoff/2026-11-07-class-mock/mock-c.html) — 바다 위 흰 글 + 아래 유리 안내 칸 · 그 뒤 유리 판 둘(이름 12 · 알림).
   토큰 · 판(.sbs-slab) · 단추(.sbs-btn) · 알림 폼(.sbs-nf-*) · 되돌림 · 포커스 고리는 shop.css 그대로 — 여기는 이 쪽에만 있는 것(.sbs-cl-*).
   색은 정본 Sunrise & Sage — 주황(Sunrise #F79B40 바탕 + 잉크 글 4.64:1)은 알림 단추에만. 흰 글은 화면 위쪽 고정 그늘(랜딩 2차 값) + 1px 테(--sbs-rim) 위.
   모든 규칙을 .sbs-page 로 시작한다(테마 규칙을 이긴다 — shop.css 와 같은 까닭). */

body.sbs-page.sbs-class {
  --sbs-rim: 0 0 1px rgba(8, 16, 24, .92), 0 0 1px rgba(8, 16, 24, .92), 0 1px 2px rgba(8, 16, 24, .32);   /* 랜딩 2차 값 — 하늘 위 흰 글자의 1px 테 */
  --sbs-sun: #F79B40;
  --sbs-cl-white: #FFF9F0;
}
/* 화면 위쪽 고정 그늘 — 영상(z -1) 바로 위 · 수평선 위에서 끝난다(랜딩 · 새 첫 화면 .sbh-sea-shade 와 같은 값) */
.sbs-page .sbs-cl-shade {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 26, 38, .40) 0%, rgba(14, 26, 38, .22) 25%, rgba(14, 26, 38, 0) 44%);
}

/* ── 머리(바다 위) — 헤더 아래 한 화면 · 안내 칸은 그 화면의 아래 끝 ── */
.sbs-page .sbs-cl-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - var(--sbs-hd));
  min-height: calc(100svh - var(--sbs-hd));
  padding: 36px 0 40px;
  text-align: center;
  color: var(--sbs-cl-white);
}
.sbs-page .sbs-cl-logo { width: 48px; height: 48px; margin-bottom: 14px; }
.sbs-page .sbs-cl-hero h1 { font-size: 34px; font-weight: 500; line-height: 1.25; letter-spacing: .04em; color: var(--sbs-cl-white); text-shadow: var(--sbs-rim); }
.sbs-page .sbs-cl-status { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 12px; }
.sbs-page .sbs-cl-soon {   /* 「준비 중」 — 밝은 알약 + 잉크 글(하늘 위에서도 읽힌다) */
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
  background: rgba(250, 249, 247, .88); color: var(--sbs-ink); font-size: 14px; font-weight: 700; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.sbs-page .sbs-cl-when { font-size: 16px; font-weight: 500; letter-spacing: .04em; text-shadow: var(--sbs-rim); }
.sbs-page .sbs-cl-path { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; font-size: 14.5px; font-weight: 600; }
.sbs-page .sbs-cl-path a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; color: var(--sbs-ink);
  background: rgba(250, 249, 247, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
.sbs-page .sbs-cl-pn { font-family: var(--sbs-mono); font-size: 12.5px; font-weight: 600; color: var(--sbs-sage-glass); }
.sbs-page .sbs-cl-arrow { color: var(--sbs-cl-white); text-shadow: var(--sbs-rim); }
.sbs-page .sbs-cl-doors { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 40px; }   /* 아래 40 = 안내 칸(margin-top:auto — 화면 아래 끝)과의 가장 좁은 틈 */
.sbs-page .sbs-cl-sun { background: var(--sbs-sun); color: var(--sbs-ink); box-shadow: 0 10px 28px -16px rgba(8, 26, 38, .55); }
.sbs-page .sbs-cl-glass {
  background: rgba(250, 249, 247, .62); color: var(--sbs-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 10px 28px -16px rgba(8, 26, 38, .45);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
@media (hover: hover) {
  .sbs-page .sbs-cl-sun:hover { background: #FFA852; color: var(--sbs-ink); }
  .sbs-page .sbs-cl-glass:hover, .sbs-page .sbs-cl-path a:hover { background: rgba(250, 249, 247, .82); color: var(--sbs-ink); }
}
/* 바다 위 포커스 고리 — 흰 고리 + 어두운 테(잉크 고리는 바다에 묻힌다) */
.sbs-page .sbs-cl-hero a:focus-visible { outline: 2px solid var(--sbs-cl-white); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(14, 26, 38, .55); }
.sbs-page .sbs-cl-note {   /* 옛 주소 안내 — 유리 칸(판과 같은 값 · 옅은 글은 유리 위 값) */
  width: min(720px, 100%); margin-top: auto; padding: 18px 24px; text-align: left;
  font-size: 15px; font-weight: 500; line-height: 1.65; color: var(--sbs-soft-glass);
  background: var(--sbs-slab); box-shadow: var(--sbs-sh-slab);
  -webkit-backdrop-filter: blur(30px) saturate(1.25); backdrop-filter: blur(30px) saturate(1.25);
}
.sbs-page .sbs-cl-note b { color: var(--sbs-ink); }

/* ── 이름 12(유리 판) — 묶음 셋 · 워크샵 넷 · 아래 HOS 문장 ── */
.sbs-page .sbs-cl-list, .sbs-page .sbs-cl-end { padding: 40px 48px 36px; }
.sbs-page .sbs-cl-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.sbs-page .sbs-cl-part, .sbs-page .sbs-cl-end { scroll-margin-top: calc(var(--sbs-hd) + 16px); }
.sbs-page .sbs-cl-part h2 { font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -.008em; }
.sbs-page .sbs-cl-part h2 .sbs-cl-pn { display: block; margin-bottom: 4px; font-size: 13px; }
.sbs-page .sbs-cl-part h2 small { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--sbs-soft); }
.sbs-page .sbs-cl-part ol { margin-top: 14px; }
.sbs-page .sbs-cl-part li {
  padding: 11px 10px; margin: 0 -10px; border-top: 1px solid var(--sbs-line); border-radius: 0;
  font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--sbs-ink);
  scroll-margin-top: calc(var(--sbs-hd) + 24px);
}
/* 옛 링크(/class/#swing-snatch)로 건너온 그 줄 — 세이지 칸으로 표시(옅게 · 움직임 없음) */
.sbs-page .sbs-cl-part li:target { border-top-color: transparent; border-radius: 10px; background: var(--sbs-wash); box-shadow: inset 0 0 0 1.5px var(--sbs-sage-l); }
.sbs-page .sbs-cl-part li:target + li { border-top-color: transparent; }
.sbs-page .sbs-cl-hos { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sbs-line); font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--sbs-soft); }

/* ── 알림 받기(유리 판 · #notify) — 왼쪽 제목 · 아래 링크 / 오른쪽 종이 칸의 폼 ── */
.sbs-page .sbs-cl-list { margin-top: 8px; }
.sbs-page .sbs-cl-end {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-rows: auto 1fr; gap: 16px 48px;
  margin-top: 24px; padding-bottom: 40px;
}
.sbs-page .sbs-cl-end:focus { outline: none; }
.sbs-page .sbs-cl-end h2 { grid-column: 1; grid-row: 1; font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
.sbs-page .sbs-cl-end .sbs-nf-inline { grid-column: 2; grid-row: 1 / span 2; }
.sbs-page .sbs-cl-more { grid-column: 1; grid-row: 2; align-self: start; display: flex; flex-wrap: wrap; gap: 0 22px; }
.sbs-page .sbs-cl-more a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--sbs-sage);
  text-decoration: underline; text-underline-offset: 4px;
}
.sbs-page .sbs-cl-more a:hover { color: var(--sbs-ink); }
.sbs-page .sbs-nf-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 10px; padding: 22px; }
.sbs-page .sbs-nf-inline .sbs-nf-l { grid-column: 1; min-width: 0; }
.sbs-page .sbs-nf-inline .sbs-nf-email { width: 100%; min-height: 52px; font-size: 16px; }
.sbs-page .sbs-nf-inline .sbs-nf-send { grid-column: 2; }
.sbs-page .sbs-nf-inline :is(.sbs-nf-c, .sbs-nf-msg) { grid-column: 1 / -1; }
.sbs-page .sbs-nf-inline .sbs-nf-c { min-height: 44px; align-items: flex-start; font-size: 14px; color: var(--sbs-soft); }
.sbs-page .sbs-nf-inline .sbs-nf-c input { margin-top: 2px; }
.sbs-page .sbs-cl-end .sbs-nf-done { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 22px; font-size: 16px; }

@media (max-width: 1099.98px) {
  .sbs-page .sbs-cl-parts { gap: 24px 28px; }
  .sbs-page .sbs-cl-list, .sbs-page .sbs-cl-end { padding: 32px 32px 30px; }
}
@media (max-width: 899.98px) {
  .sbs-page .sbs-cl-hero { padding: 24px 6px 28px; }
  .sbs-page .sbs-cl-hero h1 { font-size: 26px; }
  .sbs-page .sbs-cl-path { flex-direction: column; gap: 6px; }
  .sbs-page .sbs-cl-path a { width: min(320px, 100%); justify-content: center; }
  .sbs-page .sbs-cl-arrow { transform: rotate(90deg); line-height: 1; }
  .sbs-page .sbs-cl-doors { width: 100%; }
  .sbs-page .sbs-cl-doors .sbs-btn { flex: 1 1 auto; }
  .sbs-page .sbs-cl-note { padding: 16px 18px; font-size: 14.5px; }
  .sbs-page .sbs-cl-list, .sbs-page .sbs-cl-end { padding: 26px 18px 28px; }
  .sbs-page .sbs-cl-parts { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sbs-page .sbs-cl-end { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; margin-top: 16px; }
  .sbs-page .sbs-cl-end h2 { font-size: 22px; }
  .sbs-page .sbs-cl-end :is(h2, .sbs-nf-inline, .sbs-cl-more, .sbs-nf-done) { grid-column: 1; grid-row: auto; }
  .sbs-page .sbs-nf-inline { padding: 18px 16px; }
}
@media (max-width: 599.98px) {
  .sbs-page .sbs-nf-inline { grid-template-columns: minmax(0, 1fr); }
  .sbs-page .sbs-nf-inline .sbs-nf-send { grid-column: 1; width: 100%; }
}
@media (prefers-reduced-transparency: reduce) {
  .sbs-page :is(.sbs-cl-note, .sbs-cl-path a, .sbs-cl-glass) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sbs-paper); }
}
@media (prefers-contrast: more) {
  .sbs-page.sbs-page :is(.sbs-cl-note, .sbs-cl-path a, .sbs-cl-glass) { background: var(--sbs-paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1.5px var(--sbs-ink); }
}