/* ===============================
   디자인 토큰 (피그마 00 Styles와 1:1 대응)
   =============================== */

:root {
    /* ---------- 색 ---------- */
    --color-text:        #1b1d22;   /* color/text */
    --color-text-body:   #2a2d34;   /* color/text-body */
    --color-muted:       #5b6170;   /* color/muted */
    --color-line:        #e7e8ec;   /* color/line */
    --color-line-soft:   #f0f1f4;   /* color/line-soft */
    --color-soft:        #f5f6f8;   /* color/soft */
    --color-accent:      #2f5fd0;   /* color/accent */
    --color-accent-soft: #eef1fa;   /* color/accent-soft */
    --color-accent-hover: #2550b5;   /* color/accent-hover */
    --color-bg:          #ffffff;
    --color-danger:       #D14343;
    --color-overlay: rgba(27, 29, 34, 0.4);

    /* ---------- 글꼴 ---------- */
    --font-sans: 'Noto Sans KR', -apple-system, 'Malgun Gothic', sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;

    /* ---------- 글자 크기 ---------- */
    --fs-brand:    22px;   /* brand */
    --fs-title-xl: 34px;   /* title/xl  글 상세 제목 */
    --fs-title-lg: 24px;   /* title/lg  본문 h2 */
    --fs-title-md: 21px;   /* title/md  목록 글 제목 */
    --fs-title-sm: 20px;   /* title/sm  본문 h3 */
    --fs-body-lg:  17px;   /* body/lg   글 본문 */
    --fs-body-md:  15px;   /* body/md   요약, 카테고리 */
    --fs-body-sm:  14px;   /* body/sm   소개, 메타 */
    --fs-caption:  13px;   /* caption   날짜, 태그 */
    --fs-label:    12px;   /* label     섹션 제목 */
    /* 모바일 */
    --fs-m-brand:    20px;   /* mobile/brand     헤더 블로그 명 */
    --fs-m-title-xl: 24px;   /* mobile/title/xl  글 상세 제목 */
    --fs-m-title-lg: 20px;   /* mobile/title/lg  본문 h2 */
    --fs-m-title-md: 16px;   /* mobile/title/md  목록 글 제목 */
    --fs-m-body-lg:  15px;   /* mobile/body/lg   글 본문 */

    /* ---------- 행간 ---------- */
    --lh-tight:  1.35;     /* 큰 제목 */
    --lh-title:  1.4;      /* 일반 제목 */
    --lh-body:   1.7;      /* 요약, 소개 */
    --lh-read:   1.85;     /* 글 본문 */

    --lh-m-read: 1.8;        /* 모바일 글 본문 */

    /* ---------- 간격 ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 56px;

    /* ---------- 모서리 ---------- */
    --radius-xs:  8px;       /* 모바일 글 카드 썸네일 */
    --radius-sm:   10px;   /* 카드 이미지, 페이지 버튼 */
    --radius-box: 12px;      /* 입력칸, 비밀번호 박스, 이전/다음 글, 모바일 썸네일 */
    --radius-md:   14px;   /* 큰 이미지, 박스 */
    --radius-full: 999px;  /* 태그, 프로필 원 */

    /* ---------- 레이아웃 ---------- */
    --container:  1132px;
    --header-h:   72px;
    --sidebar-w:  300px;
    --content-w:  720px;   /* 글 본문 최대 폭 */
    --drawer-w:    min(300px, 85vw);

    --header-h-m:  40px;     /* 모바일 헤더 높이 */

    /* ---------- 그림자 ---------- */
    --shadow-drawer: 4px 0 24px rgba(27, 29, 34, 0.08);

    /* ---------- 겹침 순서 ---------- */
    --z-overlay: 999;
    --z-drawer:  1000;

    /* ---------- 움직임 ---------- */
    --duration: 0.25s;
}