/*
 * 베베폼플러스 기본 스타일: 리셋·타이포·접근성 유틸 (design-system §0, §1-3, §4)
 * 인라인 style 속성·!important 남용 금지. 값은 bp-tokens.css 의 변수만 쓴다.
 */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 100%;               /* 1rem = 16px, 사용자 글꼴 확대 허용 */
  scroll-behavior: smooth;
}
html.is-modal-open { overflow: hidden; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bp-color-bg-page);
  color: var(--bp-color-text);
  font-family: var(--bp-font-sans);
  font-size: var(--bp-fs-body);
  font-weight: var(--bp-fw-regular);
  line-height: var(--bp-lh-base);
  letter-spacing: var(--bp-ls-base);
  word-break: keep-all;          /* 한글은 어절 단위 줄바꿈 */
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--bp-fw-bold); line-height: var(--bp-lh-heading); }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bp-color-brand-text); }
img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
hr { border: 0; border-top: 1px solid var(--bp-color-border-soft); margin: 0; }
[hidden] { display: none !important; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
::placeholder { color: var(--bp-color-text-placeholder); opacity: 1; }

/* 포커스 가시성: 모든 상호작용 요소(design-system §4). outline:none 으로 지우지 않는다. */
:focus-visible {
  outline: 2px solid var(--bp-color-brand);
  outline-offset: 2px;
}
.bp-on-dark :focus-visible, .bp-footer :focus-visible, .bp-header__util :focus-visible {
  outline-color: #fff;
}

/* 스크린리더 전용(clip 방식 — display:none/hidden 속성 금지, 부록 B §4-2) */
.bp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.bp-sr-only-focusable:focus, .bp-sr-only-focusable:active {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
}

/* 스킵 링크 */
.bp-skip-link {
  position: absolute;
  left: var(--bp-space-4);
  top: -100px;
  z-index: var(--bp-z-toast);
  padding: var(--bp-space-3) var(--bp-space-4);
  background: var(--bp-color-brand-deep);
  color: var(--bp-color-text-inverse);
  font-weight: var(--bp-fw-bold);
  border-radius: var(--bp-radius-sm);
}
.bp-skip-link:focus { top: var(--bp-space-2); color: var(--bp-color-text-inverse); }

/* 레이아웃 보조 */
.bp-container { width: 100%; max-width: var(--bp-w-container); margin-inline: auto; padding-inline: var(--bp-space-4); }
.bp-container--panel { max-width: var(--bp-w-panel); }
.bp-container--wide { max-width: var(--bp-w-wide); }
.bp-stack > * + * { margin-top: var(--bp-space-4); }
.bp-row { display: flex; flex-wrap: wrap; gap: var(--bp-space-3); align-items: center; }

/* 텍스트 유틸 */
.bp-text-muted { color: var(--bp-color-text-muted); }
.bp-text-error { color: var(--bp-color-error); }
.bp-text-success { color: var(--bp-color-success); }
.bp-text-center { text-align: center; }
.bp-nowrap { white-space: nowrap; }
.bp-fw-bold { font-weight: var(--bp-fw-bold); }

/* 모션 축소(design-system §1-4): 모든 전환·애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 출시 준비 중(PRELAUNCH) 상단 안내 띠 (W4 레인 E, design-system §2-40): 모든 공개 화면에 같은 요청 한 번으로 오도록 이 시트에 둔다(전용 CSS 요청을 따로 만들지 않는다).
 * 흐름 안의 얇은 띠라 위치 이동(CLS)·가로 넘침이 없다. 정식 오픈(LIVE)에서는 마크업이 없어 쓰이지 않는다. */
.bp-launch-banner { background: var(--bp-color-brand-deep); color: var(--bp-color-text-inverse); padding: var(--bp-space-2) var(--bp-space-4); text-align: center; }
.bp-launch-banner__text { margin: 0; font-size: var(--bp-fs-small); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.bp-launch-banner__msg { display: inline-block; }
[data-device="pc"] .bp-launch-banner { padding-block: var(--bp-space-3); }
[data-device="pc"] .bp-launch-banner__text { font-size: var(--bp-fs-body); }