@charset "UTF-8";
/**
 * SOVAC Design System (Mobile)
 * svp_web design-system.css 기반, 모바일 최적화 토큰
 *
 * 기준: 모바일 풀 너비 (사이드바 없음)
 * 폰트: Pretendard
 * 최종 업데이트: 2026-03-28
 */

/* ============================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ============================================================ */
:root {
    /* ── 색상: 브랜드 (웹과 동일) ── */
    --color-primary:          #460082;
    --color-primary-light:    #fbf6ff;
    --color-primary-bg:       #faf4ff;

    /* ── 색상: 텍스트 (웹과 동일) ── */
    --color-text-primary:     #1c1c1c;
    --color-text-secondary:   #494949;
    --color-text-tertiary:    #7b7b7b;
    --color-text-meta:        #585858;
    --color-text-light:       #b9b9b9;
    --color-text-placeholder: #cacaca;

    /* ── 색상: 배경 (웹과 동일) ── */
    --color-bg-primary:       #ffffff;
    --color-bg-secondary:     #fafafa;
    --color-bg-dark:          #1c1c1c;
    --color-bg-cta:           #9effb8;

    /* ── 색상: 상태/강조 (웹과 동일) ── */
    --color-danger:           #fb2f6c;
    --color-danger-bg:        #ffdada;

    /* ── 색상: 보더/구분선 (웹과 동일) ── */
    --color-border-default:   #d4d4d4;
    --color-border-dark:      #1c1c1c;
    --color-border-card:      #000000;
    --color-divider:          #e4e4e4;

    /* ── 타이포그래피 (웹과 동일) ── */
    --font-family:            'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-family-accent:     'Borel', cursive;

    /* ── 폰트 사이즈 (모바일 축소) ── */
    --text-xs:    12px;
    --text-sm:    13px;   /* 웹 14px */
    --text-base:  14px;   /* 웹 16px */
    --text-lg:    15px;   /* 웹 18px */
    --text-xl:    17px;   /* 웹 20px */
    --text-2xl:   20px;   /* 웹 24px */
    --text-3xl:   22px;   /* 웹 32px */

    /* ── 폰트 두께 (웹과 동일) ── */
    --font-regular:    400;
    --font-medium:     500;
    --font-semibold:   600;
    --font-bold:       700;
    --font-extrabold:  800;

    /* ── 줄높이 ── */
    --leading-tight:   1.2;
    --leading-normal:  1.44;
    --leading-relaxed: 20px;
    --leading-body:    18px;
    --leading-heading: 22px;

    /* ── 간격 (모바일 축소) ── */
    --space-1:    4px;
    --space-2:    6px;
    --space-3:    8px;
    --space-4:    10px;
    --space-5:    12px;
    --space-6:    14px;
    --space-7:    16px;
    --space-8:    20px;
    --space-9:    24px;

    /* ── 레이아웃 (모바일) ── */
    --layout-content-width: 100%;
    --layout-padding:       15px;  /* 좌우 패딩 */

    /* ── 섹션 간격 (모바일 축소) ── */
    --section-gap:          24px;  /* 웹 40px */
    --section-title-gap:    16px;  /* 웹 32px */
    --card-gap-lg:          16px;  /* 웹 24px */
    --card-gap-md:          14px;  /* 웹 20px */
    --card-gap-sm:          12px;  /* 웹 16px */

    /* ── 보더 반경 (웹과 동일) ── */
    --radius-sm:    4px;
    --radius-md:    5px;
    --radius-lg:    6px;
    --radius-xl:    8px;
    --radius-full:  100px;

    /* ── 트랜지션 (웹과 동일) ── */
    --transition-default: 0.3s ease;
}