/* Service Plan Links 공통 스타일
   색·글꼴·뒤로가기·제목·기본 버튼·토스트를 세 페이지가 함께 씁니다.
   색을 바꾸려면 아래 :root 값만 고치면 모든 페이지에 반영됩니다. */

:root {
  --bg: #FFFFFF; --text: #191F28; --muted: #6B7684;
  --tile: #F2F4F6; --tile-press: #E5E8EB; --tile-chip: rgba(25,31,40,0.06);
  --line: #E5E8EB; --field: #FFFFFF;
  --hero: #191F28; --hero-press: #2B3340; --hero-text: #FFFFFF;
  --hero-sub: rgba(255,255,255,0.75); --hero-chip: rgba(255,255,255,0.14);
  --red: #F04452; --blue: #3182F6; --warn: #B45309; --scrim: rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101215; --text: #F2F4F6; --muted: #A0A8B3;
    --tile: #1E2126; --tile-press: #2A2E35; --tile-chip: rgba(255,255,255,0.08);
    --line: #2A2E35; --field: #16181C;
    --hero: #F2F4F6; --hero-press: #DDE1E6; --hero-text: #191F28;
    --hero-sub: rgba(25,31,40,0.7); --hero-chip: rgba(25,31,40,0.1);
    --red: #FF6B76; --blue: #4C94FF; --warn: #F0A64F; --scrim: rgba(0,0,0,0.6);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
main {
  max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
           calc(28px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 24px;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* 뒤로가기 · 제목 */
.back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  margin-left: -6px; padding: 8px 12px 8px 6px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted);
}
.back:active { background: var(--tile); }
header { padding: 0 4px; }
h1 { margin: 0; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; word-break: keep-all; }
.meta { margin: 6px 0 0; font-size: 0.875rem; color: var(--muted); line-height: 1.6; word-break: keep-all; }
.notice { margin: 0; padding: 0 4px; font-size: 0.875rem; line-height: 1.6; color: var(--muted); word-break: keep-all; }
.notice b { color: var(--text); }
h2 { margin: 0 0 10px; padding: 0 4px; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }

/* 기본 버튼 */
.primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 56px; border: 0; border-radius: 16px;
  background: var(--hero); color: var(--hero-text); font-size: 1rem; font-weight: 800;
}
.primary:active { background: var(--hero-press); }
.primary:disabled { opacity: 0.5; }
.primary[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

/* 토스트 */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 20;
  transform: translateX(-50%); padding: 12px 18px; border-radius: 999px;
  background: var(--hero); color: var(--hero-text); font-size: 0.875rem; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; white-space: nowrap;
}
.toast.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }