// 반응형 폰트 사이즈
// - 기준 해상도: 1920x1080 (FHD) → 10px 고정
// - FHD 미만: 높이/너비 중 더 작은 축을 기준으로 축소
// - FHD 초과: 너무 작아 보이지 않도록 완만하게 확대 (상한 적용)
// - Windows 노트북(디스플레이 배율 125%/150%)에서 과대 확대를 보정하기 위한 DPI 계수 적용

// base: :root 안에서 responsive rem 기본 변수를 정의한다(ui-legacy responsive.scss와 동일 로직).
@mixin base() {
  // 10px @ 1920x1080 기준 스케일
  // 너비 기준: 10px = (10 / 1920) * 100vw = 0.520833vw
  // 높이 기준: 10px = (10 / 1080) * 100vh = 0.925926vh
  // 더 작은 축을 기준으로 스케일(노트북 저해상도/낮은 세로 해상도 환경 보정)
  --responsive-axis-min: min(0.520833vw, 0.925926vh);

  // 기본 크기 범위(하한/상한): FHD 미만에서 너무 커지는 문제 방지(하한 ↓),
  // QHD 이상에서 너무 작아 보이는 문제 완화(상한 ↑). 필요 시 수치 미세 조정.
  --responsive-size: clamp(7px, var(--responsive-axis-min), 14px);

  // DPI 보정 계수: Windows + 125%/150% 배율에서 커지는 현상 완화용
  // 기본 1.0 → 높은 배율에서 소폭 감소
  --dpi-factor: 1;

  // 화면 비율 보정 계수(울트라와이드/세로 확장형 등)
  --aspect-factor: 1;

  // 최종 표준 값: 설계상 기준 rem(=10px @ FHD)을 유지하되, 해상도/배율 보정 적용
  --responsive-standard: calc(
    var(--responsive-size) * var(--dpi-factor) * var(--aspect-factor)
  );

  font-size: var(--responsive-standard);
}

// queries: ui-legacy responsive.scss의 media 규칙을 그대로 내보낸다.
@mixin queries() {
  // 고배율(배율 125% 이상 추정) 보정: 소폭 축소
  // DPI 보정: Mac Retina(2dppx)에는 영향이 없도록 범위를 제한
  @media (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {
    :root {
      --dpi-factor: 0.96;
    }
  }

  @media (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx) {
    :root {
      --dpi-factor: 0.92;
    }
  }

  // QHD 이상에서 상한을 점진적으로 상향해 4K와의 구분감 확보
  @media (min-width: 2560px) and (min-height: 1440px) {
    :root {
      --responsive-size: clamp(9px, var(--responsive-axis-min), 15px);
    }
  }

  @media (min-width: 3200px) and (min-height: 1800px) {
    :root {
      --responsive-size: clamp(10px, var(--responsive-axis-min), 15.5px);
    }
  }

  @media (min-width: 3840px) and (min-height: 2160px) {
    :root {
      --responsive-size: clamp(11px, var(--responsive-axis-min), 16px);
    }
  }

  // 울트라와이드(21:9 이상)에서 UI가 상대적으로 작아보이는 현상 완화
  @media (min-aspect-ratio: 21 / 9) and (min-width: 2560px) {
    :root {
      --aspect-factor: 1.04;
    }
  }

  // 세로 확장형(16:10 이하)에서 과도한 확대 방지
  @media (max-aspect-ratio: 16 / 10) and (max-width: 1920px) {
    :root {
      --aspect-factor: 0.98;
    }
  }
}

// responsive: base + queries를 한 번에 출력하는 편의 믹스인.
@mixin responsive() {
  :root {
    @include base();
  }

  @include queries();
}
