@charset "utf-8";
/* ==========================================================================
   모노마트 디자인 토큰 (DESIGN_GUIDE.md 기준 / 2026-08-07)
   - 신규 퍼블리싱 작업 시 색상·간격·라운드·그림자는 이 변수만 사용할 것
   ========================================================================== */
:root {
    /* common */
    --color-common-100: #FFFFFF;
    --color-common-0: #000000;

    /* neutral */
    --color-neutral-90: #F7F7F7;
    --color-neutral-80: #EBEBEB;
    --color-neutral-70: #DFDFDF;
    --color-neutral-60: #CCCCCC;
    --color-neutral-50: #AAAAAA;
    --color-neutral-40: #888888;
    --color-neutral-30: #707070;
    --color-neutral-20: #555555;
    --color-neutral-10: #333333;
    --color-neutral-5:  #222222;

    /* green (brand) */
    --color-green-90: #E6F7F1;
    --color-green-80: #B0E7D4;
    --color-green-70: #8ADCBF;
    --color-green-60: #54CCA1;
    --color-green-50: #33C28F;
    --color-green-40: #00B373;
    --color-green-30: #00A369;
    --color-green-20: #007F52;
    --color-green-10: #00623F;
    --color-green-5:  #004B30;

    /* yellow */
    --color-yellow-90: #FFF9EA;
    --color-yellow-80: #FFEEBE;
    --color-yellow-70: #FFE59E;
    --color-yellow-60: #FFD972;
    --color-yellow-50: #FFD256;
    --color-yellow-40: #FFC72C;
    --color-yellow-30: #E8B528;
    --color-yellow-20: #B58D1F;

    /* orange */
    --color-orange-90: #FDF3E6;
    --color-orange-80: #F9DBB0;
    --color-orange-70: #F7CA8A;
    --color-orange-60: #F3B154;
    --color-orange-50: #F1A233;
    --color-orange-40: #ED8B00;
    --color-orange-30: #D87E00;
    --color-orange-20: #A86300;
    --color-orange-10: #824C00;
    --color-orange-5:  #643A00;

    /* brown */
    --color-brown-90: #F1EDE9;
    --color-brown-80: #D3C6BB;
    --color-brown-70: #BEAA9A;
    --color-brown-60: #A0836C;
    --color-brown-50: #8D6B4F;
    --color-brown-40: #714623;
    --color-brown-30: #674020;
    --color-brown-20: #503219;
    --color-brown-10: #3E2713;
    --color-brown-5:  #2F1D0F;

    /* red */
    --color-red-90: #FFE6E6;
    --color-red-80: #FFB2B0;
    --color-red-70: #FF8C8A;
    --color-red-60: #FF5854;
    --color-red-50: #FF3833;
    --color-red-40: #FF0600;
    --color-red-30: #E80500;
    --color-red-20: #B50400;
    --color-red-10: #8C0300;
    --color-red-5:  #6B0300;

    /* blue */
    --color-blue-90: #E9F5FF;
    --color-blue-80: #BAE1FF;
    --color-blue-70: #98D2FF;
    --color-blue-60: #69BEFF;
    --color-blue-50: #4CB1FF;
    --color-blue-40: #1F9EFF;
    --color-blue-30: #1C90E8;
    --color-blue-20: #1670B5;
    --color-blue-10: #11578C;
    --color-blue-5:  #0D426B;

    /* typography (크기/행간 조합은 DESIGN_GUIDE.md 타입 스케일만 사용) */
    --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, helvetica, 'Apple SD Gothic Neo', sans-serif;
    --letter-spacing-base: -0.006em; /* -0.6% */

    /* spacing (4배수) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;

    /* radius (4px 단위) */
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 12px;
    --radius-4: 16px;

    /* shadow */
    --shadow-normal: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
    --shadow-medium: 0 2px 6px 0 rgba(0, 0, 0, 0.08),
                     2px 2px 4px 0 rgba(0, 0, 0, 0.05),
                     -2px 2px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-strong: 0 2px 12px 0 rgba(0, 0, 0, 0.10),
                     2px 2px 6px 0 rgba(0, 0, 0, 0.10),
                     -2px 2px 6px 0 rgba(0, 0, 0, 0.10);

    /* layout */
    --layout-margin: 20px;  /* 콘텐츠 좌우 마진 */
    --layout-gutter: 16px;  /* 컬럼 거터 */
    --layout-max: 1440px;   /* PC 콘텐츠 최대 폭 (시안 1280 → 1440 변경 2026-08-26) */
}