/* ============================================================================
   base.css — Reset + 글로벌 타이포 (Pretendard 적용)
   tokens.css 다음, components.css 이전에 로드
   ============================================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--ro-font-sans);
    font-size: var(--ro-text-base);
    line-height: var(--ro-leading-normal);
    letter-spacing: var(--ro-tracking-normal);
    color: var(--ro-text);
    background: var(--ro-bg);
    /* 한국어 자연 줄바꿈 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* 모션 감소 환경 — 모든 애니메이션 사실상 비활성 */
@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;
    }
}

/* 접근성: 키보드 포커스 가시성 */
:focus-visible {
    outline: 2px solid var(--ro-primary-500);
    outline-offset: 3px;
    border-radius: var(--ro-radius-sm);
}

/* 스크린리더 전용 텍스트 */
.ro-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;
}

/* 헤딩 — fluid 타이포 자동 적용 */
h1 { font-size: var(--ro-text-4xl); line-height: var(--ro-leading-tight); font-weight: var(--ro-weight-black); letter-spacing: var(--ro-tracking-tight); margin: 0 0 var(--ro-space-4); }
h2 { font-size: var(--ro-text-3xl); line-height: var(--ro-leading-tight); font-weight: var(--ro-weight-bold); letter-spacing: var(--ro-tracking-tight); margin: 0 0 var(--ro-space-4); }
h3 { font-size: var(--ro-text-2xl); line-height: var(--ro-leading-snug); font-weight: var(--ro-weight-bold); margin: 0 0 var(--ro-space-3); }
h4 { font-size: var(--ro-text-xl); line-height: var(--ro-leading-snug); font-weight: var(--ro-weight-semibold); margin: 0 0 var(--ro-space-2); }
p  { margin: 0 0 var(--ro-space-3); }

/* 컨테이너 — 4단 + TV breakpoint */
.ro-container {
    width: 100%;
    max-width: var(--ro-container);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
}
.ro-container--narrow { max-width: var(--ro-container-md); }
.ro-container--wide   { max-width: var(--ro-container-2xl); }
.ro-container--full   { max-width: 100%; }

@media (min-width: 1920px) {
    .ro-container { max-width: var(--ro-container-tv); }
}

/* Stack/Cluster 헬퍼 */
.ro-stack > * + * { margin-top: var(--ro-stack-gap, var(--ro-space-4)); }
.ro-cluster { display: flex; flex-wrap: wrap; gap: var(--ro-cluster-gap, var(--ro-space-2)); align-items: center; }

/* Skip link (접근성) */
.ro-skip-link, .runneron_skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--ro-primary-500);
    color: #fff;
    padding: 10px 16px;
    font-weight: var(--ro-weight-bold);
    border-radius: 0 0 var(--ro-radius-md) 0;
    z-index: 100000;
    transition: top var(--ro-dur-base) var(--ro-ease);
}
.ro-skip-link:focus, .runneron_skip-link:focus { top: 0; }

/* 레거시 변수 → 신규 토큰 매핑 (기존 코드 호환) */
:root {
    --runneron_primary:        var(--ro-primary-500);
    --runneron_primary-soft:   var(--ro-primary-50);
    --runneron_accent:         var(--ro-accent-400);
    --runneron_accent-soft:    var(--ro-accent-50);
    --runneron_bg-soft:        var(--ro-gray-50);
    --runneron_text-main:      var(--ro-text);
    --runneron_text-sub:       var(--ro-text-sub);
    --runneron_border-soft:    var(--ro-border);
    --runneron_shadow-soft:    var(--ro-shadow-lg);
    --runneron_radius-lg:      var(--ro-radius-xl);
    --runneron_radius-xl:      var(--ro-radius-2xl);
    --runneron_radius-pill:    var(--ro-radius-pill);
}