/* =========================================================
   DESIGN TOKENS & BASE RESET
   ========================================================= */

:root {
    /* --- Color Primitives: Green --- */
    --green-50:  #e7fdf1;
    --green-100: #b4f9d3;
    --green-200: #90f6bd;
    --green-300: #5df29f;
    --green-400: #3def8d;
    --green-500: #0deb70;  /* UI Key color */
    --green-600: #0cd666;
    --green-700: #09a750;
    --green-800: #07813e;
    --green-900: #05632f;

    /* --- Color Primitives: Blue --- */
    --blue-50:  #e6ebfe;
    --blue-100: #b0c0fd;
    --blue-200: #8aa2fc;
    --blue-300: #5478fa;
    --blue-400: #335df9;
    --blue-500: #0035f8;  /* UI Key color */
    --blue-600: #0030e2;
    --blue-700: #0026b0;
    --blue-800: #001d88;
    --blue-900: #001668;

    /* --- Color Primitives: Red --- */
    --red-50:  #ffedee;
    --red-100: #ffc6c9;
    --red-200: #ffaaaf;
    --red-300: #ff848a;
    --red-400: #ff6c74;
    --red-500: #ff4751;  /* UI Key color */
    --red-600: #e8414a;
    --red-700: #b5323a;
    --red-800: #8c272d;
    --red-900: #6b1e22;

    /* --- Color Primitives: Grey --- */
    --grey-50:  #efefef;
    --grey-100: #cecece;
    --grey-200: #b6b6b6;
    --grey-300: #959595;
    --grey-400: #818181;
    --grey-500: #616161; 
    --grey-600: #585858; 
    --grey-700: #454545; 
    --grey-800: #353535; 
    --grey-900: #292929; 
    --grey-950: #050505; 

    /* --- Semantics --- */
    --bg-body:     var(--grey-900);   
    --bg-surface:  #1F2937; 
    --bg-input:    #374151;        

    --text-main:   #FFFFFF;          
    --text-body:   var(--grey-300); 
    --text-muted:  var(--grey-500);   
    --text-invert: var(--grey-900);   

    --primary:        var(--green-500); 
    --primary-hover:  var(--green-400); 
    --primary-active: var(--green-600); 
    --secondary:      var(--blue-500); 
    --danger:         var(--red-500);

    /* --- Button Variables --- */
    --btn-primary-bg: var(--primary);
    --btn-primary-text: var(--grey-950);
    --btn-primary-hover: var(--primary-hover);
    --btn-primary-active: var(--primary-active);

    --btn-outline-border: rgba(255, 255, 255, 0.2);
    --btn-outline-text: var(--text-main);
    --btn-outline-hover-bg: rgba(255, 255, 255, 0.05);

    --btn-tertiary-bg: var(--grey-800);
    --btn-tertiary-text: var(--text-main);
    --btn-tertiary-hover: var(--grey-700);
    --btn-tertiary-active: var(--grey-600);

    --btn-disabled-bg: var(--grey-700);
    --btn-disabled-text: var(--grey-500);

    /* --- Borders & Dimensions --- */
    --border-base:      rgba(255, 255, 255, 0.1); 
    --border-focus:     var(--green-500);
    --header-height:    74px;
    --radius-sm:        4px;
    --radius-md:        8px;
    --radius-lg:        16px;

    /* --- Typography --- */
    --font-base:     "Poppins", "Pretendard", sans-serif;
    --font-display:  "GmarketSans", "Poppins", sans-serif;
    --font-primary:  "Poppins", "Pretendard", sans-serif;
    --font-body:     "Pretendard", "Poppins", sans-serif;
    --font-category: "GmarketSans", sans-serif;
    --text-h1: 24px;
    --text-h2: 18px;
    --text-p:  16px;
}

/* ── Poppins (English) ── */
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/poppins/Poppins-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ── Pretendard (Korean) ── */
@font-face {
    font-family: 'Pretendard';
    src: url('../../fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../../fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../../fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../../fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../../fonts/pretendard/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ── GmarketSans (Main category titles) ── */
@font-face {
    font-family: 'GmarketSans';
    src: url('../../fonts/GmarketSansTTFLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('../../fonts/GmarketSansTTFMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('../../fonts/GmarketSansTTFBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-base);
    font-size: var(--text-p); 
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; 
}