/* ============================================================================
 * KPOPVIEW V2.0 — Base (Reset + Typography)
 * ============================================================================ */

/* Modern CSS Reset (inspired by josh-comeau) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  line-height: var(--kv-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--kv-bg);
  color: var(--kv-text-primary);
  font-family: var(--kv-font-sans-ko);
  font-size: var(--kv-text-body-md);
  font-weight: var(--kv-weight-regular);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--kv-primary-hover); }
button { background: transparent; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

/* 포커스 — 키보드만 */
:focus { outline: none; }
:focus-visible { box-shadow: var(--kv-focus-ring); border-radius: var(--kv-radius-1); }

/* 선택 색상 */
::selection { background: var(--kv-primary); color: #fff; }

/* 스크롤바 (다크 전용) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--kv-bg); }
::-webkit-scrollbar-thumb { background: var(--kv-border); border-radius: var(--kv-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--kv-border-hover); }

/* ============================================================================
 * Typography Utilities
 * ============================================================================ */

.kv-display-xl { font-family: var(--kv-font-display); font-size: var(--kv-text-display-xl); line-height: var(--kv-leading-display); font-weight: var(--kv-weight-heavy); }
.kv-display-l  { font-family: var(--kv-font-display); font-size: var(--kv-text-display-l);  line-height: var(--kv-leading-display); font-weight: var(--kv-weight-heavy); }
.kv-display-m  { font-family: var(--kv-font-display); font-size: var(--kv-text-display-m);  line-height: var(--kv-leading-display); font-weight: var(--kv-weight-bold); }

.kv-h1 { font-size: var(--kv-text-h1); line-height: var(--kv-leading-heading); font-weight: var(--kv-weight-bold); }
.kv-h2 { font-size: var(--kv-text-h2); line-height: var(--kv-leading-heading); font-weight: var(--kv-weight-bold); }
.kv-h3 { font-size: var(--kv-text-h3); line-height: var(--kv-leading-heading); font-weight: var(--kv-weight-semibold); }
.kv-h4 { font-size: var(--kv-text-h4); line-height: var(--kv-leading-heading); font-weight: var(--kv-weight-semibold); }
.kv-h5 { font-size: var(--kv-text-h5); line-height: var(--kv-leading-heading); font-weight: var(--kv-weight-semibold); }
.kv-h6 { font-size: var(--kv-text-h6); line-height: var(--kv-leading-heading); font-weight: var(--kv-weight-semibold); }

.kv-body-lg { font-size: var(--kv-text-body-lg); line-height: var(--kv-leading-body); }
.kv-body-md { font-size: var(--kv-text-body-md); line-height: var(--kv-leading-body); }
.kv-body-sm { font-size: var(--kv-text-body-sm); line-height: var(--kv-leading-body); }

.kv-caption { font-size: var(--kv-text-caption); line-height: var(--kv-leading-caption); color: var(--kv-text-secondary); }
.kv-overline { font-size: var(--kv-text-overline); font-weight: var(--kv-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kv-text-secondary); }

/* 숫자/차트 순위 전용 */
.kv-num { font-family: var(--kv-font-sans-en); font-variant-numeric: tabular-nums; }

/* 차트 순위용 대형 숫자 */
.kv-rank-number { font-family: var(--kv-font-display); font-weight: var(--kv-weight-heavy); font-variant-numeric: tabular-nums; line-height: 1; }

/* 영문 강조 */
.kv-tm { font-size: 0.7em; vertical-align: super; opacity: 0.75; }

/* 유틸리티 */
.kv-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Container */
.kv-container { max-width: var(--kv-container-max); margin: 0 auto; padding: 0 var(--kv-space-4); }
@media (min-width: 768px)  { .kv-container { padding: 0 var(--kv-space-6); } }
@media (min-width: 1280px) { .kv-container { padding: 0 var(--kv-space-8); } }