/* 기본 스타일 · 페이지 프레임
   1920 기준으로 제작하고 그 아래는 유동으로 줄인다.
   브레이크포인트는 1619 / 1279 / 767 세 단계다. */
:root {
  --page-width: 1920px;
  --gutter: 4%;

  /* 섹션 좌우 여백. 시안은 1920 안에서 300px(15.6%) 들여쓴다 */
  --pad-x: 15.63%;
  /* 상세 페이지 본문 카드 여백. 시안은 140px(7.3%) */
  --pad-detail: 7.3%;

  --font-paperlogy: "Paperlogy", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-giants: "Giants", "Paperlogy", "Apple SD Gothic Neo", sans-serif;
  --font-pretendard:
    "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  --font-nanum: "NanumSquareRound", "Apple SD Gothic Neo", sans-serif;
  --font-jakarta: "Plus Jakarta Sans", var(--font-pretendard);
  /* 손글씨 대체 스택 */
  --font-hand: "Giants", "Paperlogy", var(--font-pretendard);

  --c-ink: #171719;
  --c-ink-strong: #101116;
  --c-ink-soft: #6f7480;
  --c-line: rgba(16, 17, 22, 0.13);
}

/* 태블릿 시안 52px / 모바일 시안 24px */
@media (max-width: 1279px) {
  :root {
    --pad-x: 5.078%;
    --pad-detail: 5.078%;
  }
}

/* 모바일은 시안대로 24px 고정. 퍼센트로 두면 스크롤 영역을 화면 끝까지
   빼내는 음수 마진이 기준 폭에 따라 어긋난다. */
@media (max-width: 767px) {
  :root {
    --pad-x: 24px;
    --pad-detail: 24px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* 고정 헤더에 가려지지 않게 앵커 이동 위치를 내린다 */
  scroll-padding-top: 100px;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  font-family: var(--font-pretendard);
  color: var(--c-ink);
  background-color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* 배경은 화면 끝까지, 콘텐츠는 1920 안에서 가운데 정렬 */
.sec {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.stage {
  position: relative;
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
}

/* 합성이 고정된 블록을 폭에 맞춰 비율 축소할 때 쓴다 */
.fit {
  container-type: inline-size;
}

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

/* 모바일에서만 먹는 줄바꿈 */
.br-sm {
  display: none;
}

@media (max-width: 767px) {
  .br-sm {
    display: inline;
  }
}

/* 폭에 따라 감추는 유틸 */
@media (max-width: 1279px) {
  .hide-lg {
    display: none;
  }
}

@media (max-width: 767px) {
  .hide-sm {
    display: none;
  }
}