:root {
  --sms-red: #f3282f;
  --sms-bg: #f6f6f7;
  --sms-text: #202729;
  --sms-muted: #697477;
  --sms-line: #e5e8eb;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sms-bg); color: var(--sms-text); font: 16px 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, a:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.sms-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
.sms-page { max-width: 520px; margin: auto; min-height: 100vh; padding-bottom: 150px; background: #fff; }
.sms-header { position: relative; display: flex; align-items: center; justify-content: center; height: 64px; border-bottom: 8px solid var(--sms-bg); }
.sms-header h1 { margin: 0; font-size: 20px; line-height: 1.4; }
.sms-back { position: absolute; left: 8px; top: 6px; width: 44px; height: 44px; color: var(--sms-text); font-size: 32px; line-height: 40px; text-align: center; text-decoration: none; }
.sms-field { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 16px 20px; border: 0; background: #fff; text-align: left; }
.sms-field:first-child { border-bottom: 8px solid var(--sms-bg); }
.sms-field strong { margin-right: auto; font-size: 16px; }
.sms-field span:nth-child(2) { color: var(--sms-red); font-size: 15px; }
#time-value { color: var(--sms-red); }
.sms-hours { margin: 0; padding: 10px 20px; color: var(--sms-muted); font-size: 12px; line-height: 1.6; }
.sms-courses { padding: 24px 28px; }
.sms-periods { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; color: #21483a; font-size: 11px; }
.sms-periods > span + span { padding-left: 8px; border-left: 1px solid var(--sms-line); }
.sms-periods strong { color: var(--sms-red); font-size: 14px; }
.sms-group { margin-bottom: 20px; }
.sms-group h3 { margin: 0 0 9px; padding: 9px 8px; border-radius: 9px; background: #e9ecef; color: #23483a; text-align: center; font-size: 14px; }
.sms-card { margin-bottom: 10px; padding: 9px 12px 10px; border: 1px solid #f0f1f2; border-radius: 10px; box-shadow: 0 2px 7px #17212b0c; background: #fff; }
.sms-card.is-selected { border-color: var(--sms-red); }
.sms-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; }
.sms-card h4 { margin: 0; color: #21483a; font-size: 13px; line-height: 1.5; }
.sms-counter { display: flex; align-items: center; flex-shrink: 0; height: 32px; }
.sms-counter button { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #3f525e; font-size: 20px; }
.sms-counter button::before { position: absolute; inset: 10px; border: 1px solid var(--sms-line); border-radius: 5px; content: ''; }
.sms-counter output { min-width: 16px; text-align: center; font-size: 12px; }
.sms-counter output span { margin-left: 2px; font-size: 10px; }
.sms-description { margin: 0 0 8px; color: #38574b; font-size: 11px; line-height: 1.5; white-space: pre-line; }
.sms-description:empty { display: none; }
.sms-prices { display: flex; justify-content: flex-end; gap: 10px; }
.sms-prices > div { flex: 1; text-align: right; }
.sms-price-original { min-height: 15px; font-size: 11px; line-height: 1.4; }
.sms-discount { color: var(--sms-red); font-size: 11px; }
del { color: #879294; font-size: 11px; }
.sms-prices strong { display: block; color: #111; font-size: 18px; line-height: 1.35; white-space: nowrap; }
.sms-prices strong small { font-size: 11px; }
.sms-price-label { color: #21483a; font-size: 11px; font-weight: 500; }
.sms-footer { position: fixed; z-index: 2; bottom: 0; left: 50%; width: 100%; max-width: 520px; padding: 0 26px calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #fff; }
.sms-notice { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 0 14px 22px; padding: 10px 8px; border: 1px solid var(--sms-red); border-radius: 15px; box-shadow: 0 3px 6px #00000012; background: #fff; color: #c64d54; font-size: 12px; line-height: 1.4; }
.sms-notice::after { position: absolute; bottom: -7px; right: 37%; width: 12px; height: 12px; transform: rotate(45deg); border-right: 1px solid var(--sms-red); border-bottom: 1px solid var(--sms-red); background: #fff; content: ''; }
.sms-notice-icon { display: inline-flex; justify-content: center; align-items: center; width: 16px; height: 16px; flex-shrink: 0; border: 1px solid var(--sms-red); border-radius: 50%; color: var(--sms-red); font-size: 12px; }
.sms-actions { display: flex; gap: 6px; }
.sms-actions button { flex: 1; min-height: 46px; padding: 8px 4px; border: 0; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 700; }
.sms-actions button:first-child { background: #ff969b; }
.sms-actions button:last-child, .sms-confirm { border: 0; background: var(--sms-red); color: #fff; }
.sms-error { margin: 8px 0; color: #bb1620; font-size: 13px; line-height: 1.5; }
.sms-error:empty, #sms-status:empty { display: none; }
#sms-status { color: var(--sms-muted); font-size: 12px; }
#sms-fallback { display: block; padding: 8px 0; color: #b91c23; font-size: 14px; }
#sms-fallback[hidden] { display: none; }
.sms-empty { color: var(--sms-muted); font-size: 14px; line-height: 1.7; }
.sms-dialog { width: calc(100% - 24px); max-width: 390px; max-height: 85dvh; margin: auto; padding: 14px 20px 20px; border: 0; border-radius: 20px; overscroll-behavior: contain; }
.sms-dialog::backdrop { background: #0008; }
.sms-dialog-head { display: flex; justify-content: flex-end; }
.sms-dialog-head button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #eef2f6; color: #53616e; font-size: 23px; }
.sms-month { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 8px 0 20px; }
.sms-month strong { font-size: 21px; }
.sms-month button { width: 44px; height: 44px; border: 0; background: #fff; color: #53616e; font-size: 26px; }
.sms-week, .sms-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.sms-week { margin-bottom: 10px; color: var(--sms-muted); font-size: 12px; }
.sms-calendar button { min-height: 44px; padding: 4px 0; border: 0; border-radius: 50%; background: #fff; font-size: 14px; }
.sms-calendar button.today { box-shadow: inset 0 0 0 1px var(--sms-red); }
.sms-calendar button.active { background: var(--sms-red); color: #fff; }
.sms-calendar-note { margin: 16px 0 0; color: var(--sms-muted); font-size: 11px; text-align: center; }
.sms-confirm { width: 100%; min-height: 48px; border-radius: 8px; font-size: 14px; }
#time-dialog { width: calc(100% - 72px); max-width: 320px; padding: 22px; border-radius: 18px; }
.sms-time-wheels { position: relative; display: flex; height: 176px; margin: 0 0 16px; padding: 0 10px; isolation: isolate; }
.sms-wheel-band { position: absolute; z-index: -1; top: 66px; right: 0; left: 0; height: 44px; border-radius: 8px; background: #f4f4f6; }
.sms-wheel { flex: 1; min-width: 0; height: 176px; padding: 66px 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: none; cursor: grab; mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.sms-wheel::-webkit-scrollbar { display: none; }
.sms-wheel-option { display: flex; align-items: center; justify-content: center; height: 44px; min-height: 44px; color: #737b80; font-size: 18px; scroll-snap-align: center; cursor: pointer; user-select: none; }
.sms-wheel-option[aria-selected=true] { color: #202729; font-weight: 700; }
.sms-wheel:active { cursor: grabbing; }
.sms-wheel:focus-visible { outline: 0; }
.sms-wheel:focus-visible [aria-selected=true] { border-radius: 6px; box-shadow: inset 0 0 0 2px #2563eb; }
@media (max-width: 360px) {
  .sms-courses { padding: 20px 18px; }
  .sms-field { gap: 10px; padding-right: 16px; padding-left: 16px; }
  .sms-footer { padding-right: 18px; padding-left: 18px; }
  .sms-notice { margin-right: 0; margin-left: 0; font-size: 11px; }
}