/* ══════════════════════════════════════════════
   02-base.css — 리셋 + 기본 타이포
   태그 셀렉터가 허용되는 유일한 파일 (CLAUDE.md §2 예외)
   ══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 좁은 화면에서 무엇 하나가 넘치면 화면 전체가 좌우로 덜컹거린다.
   어디서 넘치는지 찾기 어려우므로 뿌리에서 막는다.
   안에서 옆으로 미는 것(.lp-tblwrap 등)은 제 안에서 처리한다. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}
button { cursor: pointer; }

img, svg { display: block; max-width: 100%; }

table { border-collapse: collapse; width: 100%; }

ul, ol { list-style: none; }

::selection { background: var(--c-primary-bg); color: var(--c-primary-h); }

/* 스크롤바 — 얇게, 무채색 */
::-webkit-scrollbar { width: var(--sp-2); height: var(--sp-2); }
::-webkit-scrollbar-thumb { background: var(--c-border-s); border-radius: var(--radius); }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-weak); }
::-webkit-scrollbar-track { background: transparent; }

/* 모션 축소 존중 — !important 없이 토큰 재정의로 해결.
   모든 transition/animation은 --dur/--dur-p만 사용하므로 이것으로 전부 꺼진다 */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-p: 0ms; }
}
form { display: block; }
.lp-mt-6 { margin-top: var(--sp-6); }
::placeholder { color: var(--g-400); opacity: 1; }
body.is-dark ::placeholder { color: #4A4F5E; }

/* 눈에는 안 보이지만 화면 낭독기는 읽는 글 (v6-190).
   아이콘만 둔 입력칸에도 이름표는 있어야 한다.
   display:none 으로 감추면 낭독기도 못 읽으므로 이렇게 한다. */
.lp-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}