@charset "UTF-8";
@import './tokens.css';
@import './font.css';

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

*:focus-visible {
  outline: 2px solid var(--primary-50);
  outline-offset: 2px;
  border-radius: var(--radius-xsmall);
  transition: outline 0.15s ease-in-out;
}

/* 마우스 클릭 시에는 포커스 표시 안함 */
*:focus:not(:focus-visible) {
  outline: none;
}

html,
body {
  /* ios safari에서 폰트 합성 문제 제거 */
  font-synthesis: none;
}

ul {
  list-style-type: none;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* 모바일 텍스트 크기 고정 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 탭 하이라이트 제거 */
  -webkit-tap-highlight-color: transparent;
}

body {
  /* 기본 폰트 설정 */
  font-family: var(--typo-font-type);
  font-size: var(--pc-fs-body-medium);
  /* 18px */
  font-weight: var(--typo-weight-regular);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--text-basic);

  /* 배경 */
  background-color: var(--background-white);

  /* 크기 설정 */
  position: relative;
  width: 100%;
  min-height: 100vh;

  /* 텍스트 렌더링 최적화 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 단어 처리 */
  word-break: keep-all;
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* 스크롤 최적화 */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* 안전 영역 대응 (iOS 노치 등) */
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  TYPOGRAPHY
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--typo-weight-bold);
  line-height: 1.3;
}

:where(p, div, span, a, button, input, textarea, select, label) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

:where(em, address, i) {
  font-style: normal;
}

:where(strong, b) {
  font-weight: var(--typo-weight-bold);
}

:where(pre, code) {
  font-family: 'Pretendard', 'SUITE';
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
LINK
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: var(--link-hover);
}

a:visited.visited {
  color: var(--link-visited);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  FORM ELEMENTS
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:where(button, input, textarea, select) {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
}

button,
[type='button'],
[type='submit'],
[type='reset'] {
  cursor: pointer;
  -webkit-appearance: button;
  appearance: button;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 입력 필드 스타일 초기화 */
:where(input, textarea, select) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Number input 화살표 제거 */
input[type='number'] {
  -moz-appearance: textfield;
  /* Firefox 전용 */
  appearance: textfield;
  /* 표준 속성 */
  -webkit-appearance: none;
  /* Chrome, Safari, Edge 전용 */
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Search input X 버튼 제거 (IE) */
input[type='search']::-ms-clear {
  display: none;
}

/* Textarea 리사이즈 제거 */
textarea {
  resize: none;
}

/* Label 커서 */
label {
  cursor: pointer;
}

/* Firefox 버튼 내부 패딩 제거 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MEDIA ELEMENTS
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  border: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ACCESSIBILITY (접근성)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 스크린 리더 전용 (화면에는 숨김, 스크린 리더는 읽음) */
.blind,
.sr-only,
hr,
legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 완전히 숨김 (스크린 리더도 무시) */
.hide,
[hidden] {
  display: none !important;
}

/* 표시 */
.show {
  display: block !important;
}

/* Skip Navigation (접근성) */
.skip-nav {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  padding: var(--padding-6);
  background: var(--primary-50);
  color: var(--white);
  text-align: center;
  transition: top 0.3s;
}

.skip-nav:focus {
  top: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  SELECTION (텍스트 선택 스타일)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

::selection {
  background: var(--primary-50);
  color: var(--white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--primary-50);
  color: var(--white);
  text-shadow: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  RESPONSIVE (반응형 기본 설정)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {
  body {
    font-size: var(--mobile-fs-body-medium);
    /* 16px */
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  UTILITY CLASSES (유틸리티 클래스)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ Text Alignment ━━━ */
.al,
.text-left {
  text-align: left !important;
}

.ac,
.taC,
.text-center {
  text-align: center !important;
}

.ar,
.text-right {
  text-align: right !important;
}

/* 추가: justify */
.text-justify {
  text-align: justify !important;
}

/* ━━━ Text Decoration ━━━ */
.underline {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.no-underline {
  text-decoration: none !important;
}

/* ━━━ Display ━━━ */
.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-grid {
  display: grid !important;
}

/* ━━━ Flex Utilities ━━━ */
.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.align-start {
  align-items: flex-start !important;
}

.align-center {
  align-items: center !important;
}

.align-end {
  align-items: flex-end !important;
}

.align-stretch {
  align-items: stretch !important;
}

/* ━━━ SVG Icon Classes ━━━ */
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  /* 24px */
  height: 1.5rem;
  flex-shrink: 0;
}

.svg-icon.large {
  width: 2rem;
  /* 32px */
  height: 2rem;
}

.svg-icon.medium {
  width: 1.5rem;
  /* 24px */
  height: 1.5rem;
}

.svg-icon.small {
  width: 1rem;
  /* 16px */
  height: 1rem;
}

.svg-icon.xsmall {
  width: 0.75rem;
  /* 12px */
  height: 0.75rem;
}

/* Icon 색상 변경 가능 */
.svg-icon.primary {
  color: var(--icon-primary);
}

.svg-icon.secondary {
  color: var(--icon-secondary);
}

.svg-icon.danger {
  color: var(--icon-danger);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  SPACING UTILITIES (간격 유틸리티)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ Margin Top ━━━ */
.mt0 {
  margin-top: 0 !important;
}

.mt04 {
  margin-top: 4px !important;
}

.mt08 {
  margin-top: 8px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt12 {
  margin-top: 12px !important;
}

.mt14 {
  margin-top: 14px !important;
}

.mt16 {
  margin-top: 16px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt24 {
  margin-top: 24px !important;
}

.mt28 {
  margin-top: 28px !important;
}

.mt32 {
  margin-top: 32px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt56 {
  margin-top: 56px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mt70 {
  margin-top: 70px !important;
}

.mt80 {
  margin-top: 80px !important;
}

.mt90 {
  margin-top: 90px !important;
}

.mt100 {
  margin-top: 100px !important;
}

/* ━━━ Margin Bottom ━━━ */
.mb0 {
  margin-bottom: 0 !important;
}

.mb04 {
  margin-bottom: 4px !important;
}

.mb08 {
  margin-bottom: 8px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb12 {
  margin-bottom: 12px !important;
}

.mb14 {
  margin-bottom: 14px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

.mb28 {
  margin-bottom: 28px !important;
}

.mb32 {
  margin-bottom: 32px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb70 {
  margin-bottom: 70px !important;
}

.mb80 {
  margin-bottom: 80px !important;
}

/* ━━━ Padding Top ━━━ */
.pt40 {
  padding-top: 40px !important;
}

/* ━━━ Padding Bottom ━━━ */
.pb30 {
  padding-bottom: 30px !important;
}

/* ━━━ Padding Left ━━━ */
.pL20 {
  padding-left: 20px !important;
}

/* ━━━ 모바일 반응형 Margin (480px 이하) ━━━ */
@media screen and (max-width: 480px) {
  .mt28 {
    margin-top: 20px !important;
  }

  .mt30 {
    margin-top: 25px !important;
  }

  .mt40 {
    margin-top: 35px !important;
  }

  .mt50 {
    margin-top: 30px !important;
  }

  .mt60 {
    margin-top: 40px !important;
  }

  .mt70 {
    margin-top: 50px !important;
  }

  .mt80 {
    margin-top: 60px !important;
  }

  .mb30 {
    margin-bottom: 25px !important;
  }

  .mb40 {
    margin-bottom: 35px !important;
  }

  .mb50 {
    margin-bottom: 30px !important;
  }

  .mb60 {
    margin-bottom: 40px !important;
  }

  .mb70 {
    margin-bottom: 50px !important;
  }

  .mb80 {
    margin-bottom: 60px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  WIDTH & HEIGHT UTILITIES (크기 유틸리티)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ Percentage Width ━━━ */
.w100 {
  width: 100% !important;
}

.w95 {
  width: 95% !important;
}

.w90 {
  width: 90% !important;
}

.w80 {
  width: 80% !important;
}

.w70 {
  width: 70% !important;
}

.w50 {
  width: 50% !important;
}

.w45 {
  width: 45% !important;
}

.w40 {
  width: 40% !important;
}

.w30 {
  width: 30% !important;
}

.w13 {
  width: 13% !important;
}

.w07 {
  width: 7% !important;
}

/* ━━━ Fixed Width (Input용) ━━━ */
.w-xsmall {
  width: 80px !important;
}

.w-xsmall02 {
  width: 100px !important;
}

.w-xsmall03 {
  width: 120px !important;
}

.w-xsmall05 {
  width: 140px !important;
}

.w-small {
  width: 160px !important;
}

.w-small02 {
  width: 180px !important;
}

.w-medium {
  width: 200px !important;
}

.w-medium02 {
  width: 230px !important;
}

.w-default {
  width: 240px !important;
}

.w-280 {
  width: 280px !important;
}

.w-large {
  width: 360px !important;
}

.w-big {
  width: 470px !important;
}

.w-auto {
  width: auto !important;
}

.w-btn-type01 {
  width: calc(100% - 70px) !important;
}

/* ━━━ Max Width ━━━ */
.mw-none {
  max-width: none !important;
}

.mw-816 {
  max-width: 816px !important;
}

.w1280 {
  width: 1280px !important;
}

/* ━━━ Height ━━━ */
.h-auto {
  height: auto !important;
}

.h-60 {
  height: 60px !important;
}

.h-100 {
  height: 100% !important;
}

.min-h-screen {
  min-height: 100vh !important;
}

.min-h-screen {
  min-height: 100dvh !important;
}

.item4repet > * {
  width: calc((100% - 240px) / 4);
}

.item4repet > *:not(:nth-child(4n + 1)) {
  margin-left: 80px;
}

/* 추가: Container (최대 너비 제한) */
.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-8);
  padding-right: var(--padding-8);
}

.container-fluid {
  width: 100%;
  padding-left: var(--padding-8);
  padding-right: var(--padding-8);
}

/* 추가: Aspect Ratio */
.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-1-1 {
  aspect-ratio: 1 / 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  INTERACTION UTILITIES (상호작용 유틸리티)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 커서 */
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* 사용자 선택 방지 */
.select-none {
  user-select: none;
}

.select-all {
  user-select: all;
}

/* 포인터 이벤트 */
.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  VISIBILITY UTILITIES (가시성 유틸리티)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* Border Radius */
.rounded-none {
  border-radius: var(--radius-none) !important;
}

.rounded-small {
  border-radius: var(--radius-small) !important;
}

.rounded-medium {
  border-radius: var(--radius-medium) !important;
}

.rounded-large {
  border-radius: var(--radius-large) !important;
}

.rounded-full {
  border-radius: var(--radius-full) !important;
}

.rounded-pill {
  border-radius: var(--radius-pill) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ANIMATION UTILITIES (애니메이션 유틸리티)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.transition {
  transition: all 0.3s ease-in-out;
}

.transition-fast {
  transition: all 0.15s ease-in-out;
}

.transition-slow {
  transition: all 0.5s ease-in-out;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  PRINT UTILITIES (인쇄 최적화)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media print {
  .print-hidden {
    display: none !important;
  }

  .print-visible {
    display: block !important;
  }

  /* 페이지 나누기 방지 */
  .no-break {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  REDUCED MOTION (움직임 최소화 - 접근성)
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}