/* =============================================================================
   OpenMain 홈 base
   -----------------------------------------------------------------------------
   리셋 + 요소 기본값 + 모바일(iOS) 대응. 컴포넌트 스타일은 styles.css 가 담당한다.
   로드 순서: base.css → styles.css → media.css
   규칙: PROJECT_RULES.md → Code Rules → CSS 코어 규칙
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  position: relative;
  width: 100%;
  /* 1rem = 10px 기준. 화면 폭별 미세 조정은 media.css 최상단 */
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 8.8rem;
  /* iOS 가로 전환 시 폰트 자동 확대 방지 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 스크롤 끝에서 페이지 전체가 튀는 현상 차단 */
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  color: var(--body);
  background: var(--white);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 본문 드래그(텍스트 선택) 차단. 입력 요소는 아래에서 다시 허용한다.
   콘텐츠 보호 수단은 아니고(소스 보기·개발자도구로 그대로 읽힌다),
   랜딩에서 드래그 잔상이 생기는 것을 막는 UI 목적이다. */
body {
  -webkit-user-select: none;
  user-select: none;
}

/* 입력·편집 영역은 선택이 되어야 타이핑/수정이 정상 동작한다 */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img,
svg,
video {
  display: block;
}

img,
video {
  max-width: 100%;
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

/* 텍스트 입력류만 기본 UI 를 제거한다. 체크박스/라디오는 accent-color 로 그린다. */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}

/* 브라우저 기본 아웃라인 제거. 포커스 표시는 요소별로 따로 정의한다.
   입력 요소는 테두리·그림자로, 링크/버튼은 :focus-visible 링으로 표시한다. */
:focus {
  outline: none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #9aa3b1;
  opacity: 1;
}

/* 자동완성 시 브라우저가 칠하는 노란 배경 제거 (밝은 테마 기준) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
}

/* iOS 탭 시 생기는 회색 하이라이트 제거 */
a,
button,
label,
summary,
[role="button"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 전화/문자 링크가 기기 기본 스타일로 바뀌지 않게 */
a[href^="tel"],
a[href^="sms"] {
  color: inherit;
  text-decoration: none;
}

/* Alpine.js 초기화 전 깜빡임 차단 — 공식 권장 구현이라 !important 예외 */
[x-cloak] {
  display: none !important;
}

.signup-type-tabs {
  display: flex;
  gap: .8rem;
  padding: 1.6rem 3.8rem 0;
}

.signup-type-tabs__button {
  flex: 1 1 0;
  min-height: 4.4rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  color: var(--muted);
  font-weight: 700;
}

.signup-type-tabs__button.is-selected {
  border-color: var(--green);
  background: var(--green);
  color: var(--white);
}

.signup-type-tabs__button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}