/**
 * IT Project Base Styles - V3
 * 전역 태그 초기화 및 기본 스타일
 */

/* ============================================
   초기화 (Reset)
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ============================================
   기본 타이포그래피 (Typography)
   ============================================ */
body {
  font-family: var(--edu-font-sans, 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif), sans-serif;
  color: var(--edu-neutral-900, #111827);
  background-color: #ffffff;
  font-size: var(--edu-text-base, 1rem);
  line-height: var(--edu-leading-normal, 1.5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   기본 요소 (Elements)
   ============================================ */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul, ol, dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--edu-font-bold, 700);
}

p {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

/* 버튼 타입 전역 리셋 - 브라우저 기본 스타일 제거 */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

/* 텍스트 입력 필드 리셋 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea {
  appearance: none;
  -webkit-appearance: none;
}

/* ============================================
   공통 레이아웃 (Layout)
   ============================================ */
section#contents {
  min-height: 500px;
}

/* ============================================
   섹션 스택 레이아웃 (Section Stack)
   ============================================ */
.section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--edu-spacing-4);
}

/* ============================================
   공통 컨테이너 (Container)
   ============================================ */
.container {
  width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}

/* ============================================
   문서 영역 (Document)
   ============================================ */
.document {
  position: relative;
  margin-top: -50px;
  overflow: auto;
}

.document > .container {
  margin-bottom: 95px;
  position: relative;
  padding-top: 70px;
}

.document > .container img {
  max-width: 100%;
}

/* V3 컴포넌트 스타일 간섭 방지를 위해 주석 처리 */
/* .document > .container p {
  line-height: 1.5;
  padding: 2px;
} */

/* ============================================
   페이지 헤더 (Page Head)
   ============================================ */
.page-title {
  font-size: var(--edu-text-page-title, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--edu-neutral-900);
}

.page-subtitle {
  font-size: 15px;
  color: var(--edu-neutral-500);
  margin-top: 4px;
}