/**
 * Border System
 *
 * Phase 1.5: Border 변수화
 * 작성일: 2025-10-24
 * 업데이트: 2026-02-26 (TASK-040: 미사용 변수 20건 제거)
 *
 * Border Radius: 시맨틱 스케일 + 레거시 호환
 * Border Width: 1-4px
 * Border Style: solid (유일 사용)
 */

:root {
    /* ========================================
       Border Width
       ======================================== */
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-3: 3px;
    --border-width-4: 4px;

    /* ========================================
       Border Radius - Core Scale (시맨틱)
       새 코드에서는 이 변수들 사용 권장
       ======================================== */
    --radius-xs: 1px;      /* 아주 작은 */
    --radius-sm: 2px;      /* 작은 */
    --radius-md: 4px;      /* 중간 (기본) */
    --radius-lg: 6px;      /* 큰 */
    --radius-xl: 8px;      /* 아주 큰 */
    --radius-2xl: 12px;    /* 2배 큰 */
    --radius-3xl: 16px;    /* 3배 큰 */
    --radius-4xl: 20px;    /* 4배 큰 */
    --radius-full: 9999px; /* 완전 둥근 (pill) */
    --radius-circle: 50%;  /* 원형 */

    /* ========================================
       Border Radius - Pixel Values (레거시 호환)
       기존 코드 유지용, 새 코드에서는 Core Scale 사용
       ======================================== */
    --radius-2: 3px;                  /* 3px - 레거시 */
    --radius-5: 5px;                  /* 5px - 레거시 */
    /* --radius-8 제거(2026-07-28): --radius-xl 별칭이었는데 --radius-xl 은 테마 분기 토큰이라
       라이트에서 실효 12px — 이름이 거짓이었다(라이브 실측 라이트 0.75rem=12px / 다크 8px).
       유일 소비처 pages/minigame.css 를 var(--radius-xl) 직접 참조로 바꿔 항등 치환했다. */
    --radius-10: 10px;                /* 10px - 레거시 */
    --radius-14: 14px;                /* 14px - 팝업 관용구 */
    --radius-15: 15px;                /* 15px - 레거시 */
    --radius-22: 22px;                /* 22px - 레거시 */

    /* ========================================
       Border Style
       ======================================== */
    --border-style-solid: solid;

    /* ========================================
       Common Border Patterns (조합 패턴)
       ======================================== */
    --border-default: var(--border-width-1) var(--border-style-solid) var(--color-gray-300);
}