/* ==========================================================
   globals.css
   목적: CSS 리셋 · 폰트 선언 · Design Token(변수) · 기반 레이아웃
   사용: 전체 페이지 공통 import
   ========================================================== */

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

/* ──────────────────────────────────────────────────────────
   폰트 선언 (Pretendard)
   CDN 버전 사용 (로컬 설치 불필요)
   ────────────────────────────────────────────────────────── */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

/* ──────────────────────────────────────────────────────────
   CSS 커스텀 속성 (Design Token)
   ────────────────────────────────────────────────────────── */
:root {
  /* ── 색상 ── */
  --clr-primary:        #2e79d7;
  --clr-primary-dark:   #1d4ed8;
  --clr-primary-light:  #eff5fa;
  --clr-white:          #ffffff;
  --clr-border:         #e5e5ec;
  --clr-bg-content:     rgba(0, 67, 138, 0.031);
  --clr-placeholder:    #d9d9d9;
  --clr-noti-dot:       #0066ff;
  --clr-focus:          #4a90e2;

  --clr-txt-dark:       #2e2e2e;
  --clr-txt-medium:     #737373;
  --clr-txt-muted:      #7f8c9d;

  --clr-danger:         #e1002a;
  --clr-danger-bg:      #fef7f8;
  --clr-warning:        #f5a623;
  --clr-warning-bg:     #fff8ee;
  --clr-success:        #16a34a;
  --clr-success-light:  #22c55e;
  --clr-success-bg:     #f0fdf4;
  --clr-icon-bg:        #f2f5f9;

  /* ── 폰트 패밀리 ── */
  --ff-light:    "Pretendard", Helvetica, sans-serif;
  --ff-medium:   "Pretendard", Helvetica, sans-serif;
  --ff-semibold: "Pretendard", Helvetica, sans-serif;

  /* ── 폰트 두께 ── */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-extrabold: 800;

  /* ── 자간 ── */
  --ls-base:  -0.40px;
  --ls-sm:    -0.35px;
  --ls-gnb:    1.60px;

  /* ── 폰트 크기 ── */
  /* 루트 폰트사이즈(16/14/12px)에 비례. 1920에서는 14/16/20/28px과 동일하게 렌더링 */
  --fs-xs:  0.875rem;   /* 14px @ 16px root */
  --fs-sm:  1rem;       /* 16px */
  --fs-md:  1.25rem;    /* 20px */
  --fs-lg:  1.75rem;    /* 28px */

  /* ── 줄 높이 ── */
  --lh-xs:   1.225rem;  /* 19.6px */
  --lh-base: 1.4rem;    /* 22.4px */

  /* ── 레이아웃 구조 ── */
  /* 좁은 뷰포트에서 viewport 폭으로 클램프 — 1366·1440 노트북에서 가로 스크롤 방지 */
  --layout-max-w:  min(1920px, 100vw);
  --layout-min-h:  1080px;
  --top-bar-top:   1.25rem;     /* 20px */
  --top-bar-h:     30px;        /* 유지 — 상단 아이콘 정렬 기준 절대값 */
  --gnb-top:       5.625rem;    /* 90px */
  --gnb-left:      2.5rem;      /* 40px */
  --gnb-w:         13.75rem;    /* 220px */
  --main-top:      4.375rem;    /* 70px */
  --main-left:     18.125rem;   /* 290px = --gnb-left + --gnb-w + 여백 */

  /* ── 상단 메뉴/통계 (common.css 흡수용) ── */
  --top-bar-side:  3.125rem;    /* 50px — 상단 메뉴 좌우 여백 */
  --stat-gap-1:    4.375rem;    /* 70px — 로고 → 첫 통계 */
  --stat-gap-2:    3.875rem;    /* 62px — 통계 간격 */
  --stat-gap-3:    3.8125rem;   /* 61px — 통계 간격 */
  --icon-gap:      2.5rem;      /* 40px — 우측 아이콘 간 마진 */
  --logo-fs:       1.125rem;    /* 18px — 로고 텍스트 */

  /* ── 테두리 반지름 ── */
  --r-xs:   8px;
  --r-sm:  16px;
  --r-md:  24px;
  --r-full: 9999px;
}

/* ──────────────────────────────────────────────────────────
   기본 스타일
   ────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-weight: var(--fw-regular);
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  font-family: var(--ff-light);
  color: var(--clr-txt-dark);
}

/* 데스크탑: 1920 디자인을 단계별 루트 폰트사이즈로 비례 축소
   1600+: 16px(원본), 1366~1599: 14px(87.5%), 1024~1365: 12px(75%).
   1024px 미만(모바일 JSP)은 브라우저 기본 16px 유지 — mobile-common.css가 자체 .layout 오버라이드 */
@media (min-width: 1600px) {
  html { font-size: 16px; }
}
@media (min-width: 1366px) and (max-width: 1599px) {
  html { font-size: 14px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  html { font-size: 12px; }
}

* { user-select: none; }
input, textarea, [contenteditable] { user-select: text; }

a     { text-decoration: none; color: inherit; }
img   { display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--clr-focus);
  outline-offset: 2px;
}

/* ── 폰트 두께 유틸리티 ── */
.fw-regular   { font-weight: var(--fw-regular); }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ──────────────────────────────────────────────────────────
   전체 레이아웃 래퍼
   ────────────────────────────────────────────────────────── */
.layout {
  position: relative;
  width: var(--layout-max-w);      /* min(1920px, 100vw) — 노트북에서 viewport 폭으로 클램프 */
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--clr-white);
}

::-webkit-scrollbar {
  width: 10px;
  
}
::-webkit-scrollbar-thumb {
  background-color: var(--clr-primary);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-button {
  display: none;
}