/* ==========================================================
   base.css : 리셋, 변수, 타이포그래피
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap");
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css");

:root {
  --color-point: #3050d0;
  --color-point-dark: #2440b0;
  --color-point-light: #eef1fc;
  --color-text: #222222;
  --color-text-sub: #555555;
  --color-text-light: #888888;
  --color-line: #e4e4e4;
  --color-bg-gray: #f8f8f8;
  --color-bg-gray2: #f2f2f2;
  --color-danger: #ed1c24;
  --color-white: #ffffff;

  --font-body: "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-title: "NanumSquare", "Noto Sans KR", sans-serif;

  --container: 1200px;
  --header-h: 80px;
  --header-h-m: 60px;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-title); font-weight: 800; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

.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;
}

/* 타이포 유틸 */
.t-point { color: var(--color-point); }
.t-center { text-align: center; }
.t-sub { color: var(--color-text-sub); }
.t-light { color: var(--color-text-light); }

/* 반응형 표시 유틸 */
.only-m { display: block !important; }
.only-pc { display: none !important; }
@media (min-width: 768px) {
  .only-m { display: none !important; }
  .only-pc { display: block !important; }
}
