/* =========================================================
   base.css — 산뜻하지심장혈관흉부외과의원
   리셋 + CSS 변수 + 타이포그래피 기반
   ========================================================= */

/* ---------- CSS 변수 ---------- */
:root {
  /* Brand (BRAND.md 공식) */
  --brand-green-light: #6AB82D;
  --brand-green:       #27A439;
  --brand-green-dark:  #05371C;
  --brand-black:       #181919;

  /* Primary 스케일 */
  --color-primary-50:  #F1F9E8;
  --color-primary-100: #DCEEC4;
  --color-primary-300: #9BD473;
  --color-primary-500: #27A439;
  --color-primary-700: #05371C;
  --color-primary-900: #042914;

  /* Accent */
  --color-accent-500: #6AB82D;

  /* Neutral */
  --color-bg:        #FFFFFF;
  --color-bg-alt:    #FAFBF9;
  --color-border:    #E3E7E0;
  --color-text:      #181919;
  --color-text-sub:  #5D6A57;
  --color-text-mute: #A4ACA0;

  /* Semantic */
  --color-success: #27A439;
  --color-warning: #E0A93C;
  --color-danger:  #C95D5D;

  /* 타이포그래피 */
  --font-family-base: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;

  --fs-display: clamp(2.4rem, 4vw, 3.6rem);
  --fs-h1:      clamp(1.8rem, 3vw, 2.4rem);
  --fs-h2:      clamp(1.2rem, 5vw, 1.6rem);
  --fs-h3:      clamp(1.05rem, 3.8vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* 간격 */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* 반경 */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* 그림자 */
  --shadow-sm: 0 1px 2px rgba(5, 55, 28, .06);
  --shadow-md: 0 6px 18px rgba(5, 55, 28, .08);
  --shadow-lg: 0 16px 40px rgba(5, 55, 28, .10);

  /* 트랜지션 */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* 컨테이너 */
  --max-width-content: 1200px;
  --max-width-narrow:  840px;

  /* 헤더 높이 */
  --header-height: 72px;
}

/* ---------- 리셋 ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: var(--color-text);
  background-color: var(--color-bg);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* 그리드 아이템 가로 넘침 방지 */
.grid > *,
.grid--2 > *,
.grid--3 > *,
.grid--4 > * {
  min-width: 0;
}

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* ---------- 타이포그래피 유틸 ---------- */
.text-display { font-size: var(--fs-display); font-weight: var(--fw-bold); }
.text-h1      { font-size: var(--fs-h1);      font-weight: var(--fw-bold); }
.text-h2      { font-size: var(--fs-h2);      font-weight: var(--fw-bold); }
.text-h3      { font-size: var(--fs-h3);      font-weight: var(--fw-semibold); }
.text-body    { font-size: var(--fs-body); }
.text-small   { font-size: var(--fs-small); }
.text-tiny    { font-size: var(--fs-tiny); }

.text-primary { color: var(--color-primary-500); }
.text-dark    { color: var(--color-primary-700); }
.text-sub     { color: var(--color-text-sub); }
.text-mute    { color: var(--color-text-mute); }
.text-white   { color: #fff; }
.text-center  { text-align: center; }
.text-left    { text-align: left; }

.font-medium  { font-weight: var(--fw-medium); }
.font-semi    { font-weight: var(--fw-semibold); }
.font-bold    { font-weight: var(--fw-bold); }

/* ---------- 섹션 패딩 ---------- */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--green {
  background: linear-gradient(135deg, #6AB82D 0%, #27A439 60%, #05371C 100%);
  color: #fff;
}

.section--dark {
  background-color: var(--color-primary-700);
  color: #fff;
}

/* ---------- 섹션 헤딩 ---------- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-header__label {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.section-header__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.section-header__desc {
  font-size: var(--fs-body);
  color: var(--color-text-sub);
  max-width: 600px;
  margin: 0 auto;
}

.section-header--white .section-header__label { color: rgba(255,255,255,.7); }
.section-header--white .section-header__title  { color: #fff; }
.section-header--white .section-header__desc   { color: rgba(255,255,255,.8); }

/* ---------- 모바일 터치 최적화 ---------- */
* { -webkit-tap-highlight-color: transparent; }

a, button, label, [role="button"],
input[type="submit"], input[type="button"] {
  touch-action: manipulation;
}

/* ---------- 움직임 감소 선호 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 접근성 ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--color-primary-500);
  outline-offset: 3px;
}