/* ==========================================================================
   Base & Reset (기본 스타일 및 리셋)
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* 1rem = 16px 기준 */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* 추가: 모바일 가로 전환 시 폰트 크기 유지 */
}

body {
  font-family: var(--cb-font-family-base);
  font-weight: var(--cb-font-weight-normal);
  line-height: var(--cb-line-height-base);
  color: var(--cb-text-primary);
  background-color: var(--cb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent; /* 추가: 모바일 터치 시 회색 박스 제거 */
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto; /* 추가: 비율 유지 */
}

ul,
ol {
  list-style: none;
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   Typography (타이포그래피)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cb-font-family-heading);
  font-weight: var(--cb-font-weight-bold);
  line-height: var(--cb-line-height-tight);
  margin-bottom: var(--cb-space-md);
  text-wrap: balance;
}

h1 { font-size: var(--cb-font-size-h1); }
h2 { font-size: var(--cb-font-size-h2); }
h3 { font-size: var(--cb-font-size-h3); }
h4 { font-size: var(--cb-font-size-h4); }
h5 { font-size: var(--cb-font-size-h5); }
h6 { font-size: var(--cb-font-size-h6); }

p {
  font-size: var(--cb-font-size-base);
  margin-bottom: var(--cb-space-md);
}

a {
  color: var(--cb-primary);
  text-decoration: none;
  transition: color var(--cb-transition-fast);
  text-decoration-skip-ink: auto;
}

a:hover {
  color: var(--cb-primary-hover);
  text-decoration: underline;
}

small {
  font-size: var(--cb-font-size-sm);
  color: var(--cb-text-secondary);
}

/* ==========================================================================
   Forms & Inputs (폼 및 입력 요소 리셋)
   ========================================================================== */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: 16px; /* 개선: iOS 자동 줌 방지를 위해 16px 강제 */
  line-height: inherit;
  color: inherit;
}

input,
textarea {
  background-color: var(--cb-bg-input);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-border-radius-lg);
  padding: var(--cb-space-sm) var(--cb-space-md);
  transition: border-color var(--cb-transition-fast), box-shadow var(--cb-transition-fast);
}

::placeholder {
  color: var(--cb-text-placeholder);
  opacity: 1;
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cb-primary-55);
  outline-offset: 1px;
  border-color: var(--cb-primary-60);
  box-shadow: 0 0 0 2px var(--cb-primary-18);
}

/* 개별 컴포넌트(.cb-btn 등)를 위해 button은 뼈대만 완벽히 리셋합니다. */
button {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
}

/* 비활성 상태 정의 (variables의 opacity-disabled 활용) */
:disabled, .is-disabled {
  opacity: var(--cb-opacity-disabled);
  cursor: not-allowed !important;
  pointer-events: none;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   Scrollbar (Global)
   ========================================================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scroll-thumb) transparent;
}

::-webkit-scrollbar {
  width: var(--cb-space-sm);
  height: var(--cb-space-sm);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-scroll-thumb);
  border-radius: var(--cb-border-radius-md);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scroll-thumb-hover);
}