/* =============================================================
   base.css — 전역 리셋 / 기본 타이포
   css/variables.css 다음에 로드한다.
   ============================================================= */

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

/* ⚠️ hidden 속성은 **무조건** 숨긴다.
   브라우저 기본 규칙은 `[hidden] { display: none }` 인데 명시도가 0,0,1,0 이라
   `.nk-my-field { display: flex }` 같은 클래스 한 줄에 그대로 밀린다 — 그래서
   JS 가 el.hidden = true 를 줘도 요소가 계속 보이는 일이 이 저장소에서 반복됐다
   (운영에서 비밀번호 변경 모달의 "현재 비밀번호" 칸이 안 숨은 것도 이 때문).
   클래스마다 `.foo[hidden] { display: none }` 을 덧붙이며 쫓아다니는 대신
   여기 한 줄로 끝낸다 — !important 라 어떤 display 선언보다 세다.
   그래서 **아래 CSS 들의 `.foo[hidden]` 규칙은 이제 없어도 된다**(지워도 되지만
   당장 손대지 않는다: components.css · mypage.css · admin.css · program.css ·
   header.css · find-account.css).
   숨긴 요소를 다시 보여줄 때는 display 를 건드리지 말고 hidden 을 떼면 된다. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font: var(--nk-text-p15-r);
  color: var(--nk-color-text);
  background: var(--nk-color-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

/* 페이지 래퍼: 헤더 고정폭 + 본문 + 푸터 세로 배치 */
.nk-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.nk-page__body {
  flex: 1 0 auto;
}

/* 데스크톱 최대폭 컨테이너 */
.nk-container {
  width: 100%;
  max-width: var(--nk-layout-max-width);   /* 1440px */
  margin: 0 auto;
}