@charset "UTF-8";

/* ============================================================
   Reset CSS  —  3팀 통합 버전
   최신 CSS 반영 / 브라우저·기기 호환성 고려
   ============================================================ */

/* ─────────────────────────────────────────
   1. Box-sizing
   ───────────────────────────────────────── */

:where(*, *::before, *::after) {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}


/* ─────────────────────────────────────────
   2. Root
   ───────────────────────────────────────── */

html {
  font-size: 10px;
  height: 100%;
  scroll-behavior: smooth;

  /* 모바일 회전 시 브라우저의 자동 폰트 크기 조정 방지 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /*
    OS 다크모드 수용 — 스크롤바·네이티브 input 등 브라우저 UI 자동 조정
    CSS로 명시한 색상에는 영향 없음
  */
  color-scheme: light dark;
}


/* ─────────────────────────────────────────
   3. Body
   ───────────────────────────────────────── */

body {
  margin: 0;
  padding: 0;
  min-width: 320px;

  /*
    svh: iOS Safari 주소창 포함 계산 버그 완화 (100vh보다 안정적인 쪽)
    100vh 선행 — svh 미지원 폴백
    동적 dvh는 body 전체에 쓰면 주소창 표시/숨김마다 min-height가 출렁일 수 있어 제외 — JS `--app-vh`·개별 섹션에서 필요 시 사용
  */
  min-height: 100vh;
  min-height: 100svh;

  color: #222;
  font-size: 1.6rem;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: hidden;

  /* iOS bounce 스크롤로 인한 레이아웃 틀어짐 방지 */
  overscroll-behavior-y: none;

  /* 폰트 안티앨리어싱 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: 'Pretendard', sans-serif;


}


/* ─────────────────────────────────────────
   4. Semantic block 요소
   ───────────────────────────────────────── */

/*
  구형 브라우저(IE, 구 Android)에서 시맨틱 요소를 inline으로 취급하는 문제 대응
*/
header, footer, main, section, article,
nav, aside, figure, figcaption, details, summary {
  display: block;
}


/* ─────────────────────────────────────────
   5. Margin · Padding 초기화
   ───────────────────────────────────────── */

:where(
  h1, h2, h3, h4, h5, h6,
  p, figure, figcaption, blockquote,
  dl, dd, ul, ol, form, fieldset, hr
) {
  margin: 0;
  padding: 0;
}

:where(ul, ol, li) {
  list-style: none;
}


/* ─────────────────────────────────────────
   6. Media 요소
   ───────────────────────────────────────── */

:where(img, svg, video, canvas, audio, iframe) {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

svg {
  /* 인라인 SVG 색상 부모 상속 */
  fill: currentColor;
}

iframe {
  /*
    GPU 컴포지팅 레이어 확보 — iframe 렌더링 성능 개선
    blur(0)은 의도적 no-op
  */
  filter: blur(0);
}


/* ─────────────────────────────────────────
   7. Form 요소
   ───────────────────────────────────────── */

:where(input, select, button, textarea, optgroup) {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
  vertical-align: middle;
}

:where(input, select) {
  max-width: 100%;
}

/* 모바일 탭 딜레이(300ms) 제거 */
:where(a, button, input, select, textarea, label) {
  touch-action: manipulation;
}

/* Select 네이티브 화살표 제거 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* IE 드롭다운 화살표 제거 */
select::-ms-expand {
  display: none;
}

/* Button */
button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

:where(
  input[type="submit"],
  input[type="button"],
  input[type="search"]
) {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button:disabled {
  cursor: default;
  opacity: 0.5;
}

/* Textarea */
textarea {
  width: 100%;
  resize: vertical;
  min-height: 4em;
}

/* Placeholder */
:where(input, textarea)::placeholder {
  color: #9e9e9e;
  font-style: normal;
  font-weight: 400;
  opacity: 1; /* Firefox 기본 opacity 보정 */
}


/* ─────────────────────────────────────────
   8. Table
   ───────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

th {
  font-weight: 600;
}


/* ─────────────────────────────────────────
   9. 기타
   ───────────────────────────────────────── */

a {
  color: inherit;
  text-decoration: none;
}

:where(address, em, i) {
  font-style: normal;
}

:where(strong, b) {
  font-weight: 700;
}

fieldset {
  border: 0;
  /*
    fieldset 기본 min-width: min-content 로 인해
    flex/grid 레이아웃 깨지는 문제 해결
  */
  min-inline-size: unset;
}

hr {
  border: 0;
}


/* ─────────────────────────────────────────
   10. Accessibility
   ───────────────────────────────────────── */

/*
  clip 단독 사용은 deprecated → clip-path 병행
*/
caption,
legend,
.sr-only,
.hide,
.blind,
.ir {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip Navigation  */
#skip,
#skip_nav {
  position: relative;
  z-index: 9999;
}

#skip a,
#skip_nav a {
  position: absolute;
  top: -1000px;
  left: 0;
  width: 100%;
  padding: 0.8rem 0;
  background: #20262c;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 3rem;
  text-align: center;
  text-decoration: none;
  transition: top 0.3s;
}

#skip a:focus,
#skip a:hover,
#skip a:active,
#skip_nav a:focus,
#skip_nav a:hover,
#skip_nav a:active {
  top: 0;
}


/* ─────────────────────────────────────────
   11. 라이브러리 예외 처리
   ───────────────────────────────────────── */

.swiper-wrapper,
.swiper-slide {
  box-sizing: border-box;
}

.swiper-notification {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bx-wrapper .bx-loading { display: none; }
.bx-wrapper .bx-viewport { border: 0; box-shadow: none; }


/* ─────────────────────────────────────────
   12. Reduced Motion
   ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}