@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");

/* ===== 여백/기본 초기화 ===== */
body, div, ul, li, dl, dd, dt, ol,
h1, h2, h3, h4, h5, h6,
input, fieldset, legend, p, select,
table, th, td, tr, textarea, button, form,
figure, figcaption {
    margin: 0;
    padding: 0;
    line-height: 1;
}

a { color: inherit; text-decoration: inherit; }           /* 링크 색/밑줄 제거 */
em, address { font-style: normal; }                        /* 기울임 해제 */
ul, li, ol { list-style: none; }                           /* 리스트 점 제거 */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button, input { border: none; font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
*, *::before, *::after { box-sizing: border-box; }
article, aside, footer, header, nav, section { display: block; }

/* ===== 색상/스케일 변수 (style.css의 var(--xxx)가 전부 여기서 옴) ===== */
:root {
    --color-red: #F21D0D;
    --color-pink: #E8175E;
    --color-magenta: #B92ED1;
    --color-purple: #6D3DC2;
    --color-navy: #4255bd;
    --color-blue: #0D8DF2;
    --color-cyan: #03AEFC;
    --color-green: #4DB251;
    --color-yellow: #FFBF00;
    --color-orange: #FF9800;
    --color-dahong: #FF3D00;
    --color-brown: #A0705F;
    --color-iron: #7F7F7F;
    --color-steel: #688897;

    --color-red-light: #FEE9E7;
    --color-pink-light: #FDE8EF;
    --color-magenta-light: #F8EBFB;
    --color-purple-light: #F1ECF9;
    --color-navy-light: #EDEEF9;
    --color-blue-light: #E7F4FE;
    --color-cyan-light: #E6F7FF;
    --color-green-light: #EEF8EE;
    --color-yellow-light: #FFF9E6;
    --color-orange-light: #FFF5E6;
    --color-dahong-light: #FFECE6;
    --color-brown-light: #F6F1EF;
    --color-iron-light: #F3F3F3;
    --color-steel-light: #F0F4F5;

    --color-red-medium: #FAA59E;
    --color-pink-medium: #F6A2BF;
    --color-magenta-medium: #E3ABEC;
    --color-purple-medium: #C5B1E7;
    --color-navy-medium: #B3BBE5;
    --color-blue-medium: #9ED1FA;
    --color-cyan-medium: #9ADFFE;
    --color-green-medium: #B8E0B9;
    --color-yellow-medium: #FFE599;
    --color-orange-medium: #FFD699;
    --color-dahong-medium: #FFB199;
    --color-brown-medium: #D9C6BF;
    --color-iron-medium: #CCCCCC;
    --color-steel-medium: #C3CFD5;

    /* 프라이머리 색상 스케일 (이 화면의 기본 색) */
    --primary-lv-0: #E9EDEC;
    --primary-lv-1: #D1DAD8;
    --primary-lv-2: #A4B4B1;
    --primary-lv-3: #768F8B;
    --primary-lv-4: #496964;
    --primary-lv-5: #1B443D;
    --primary-lv-6: #163631;
    --primary-lv-7: #102925;

    /* 세컨더리(파랑) — body.--main 일 때 primary로 리맵됨 (지금은 미사용) */
    --secondary-lv-0: #E6EBF2;
    --secondary-lv-1: #CCD7E3;
    --secondary-lv-2: #99AFC8;
    --secondary-lv-3: #6686AC;
    --secondary-lv-4: #335E91;
    --secondary-lv-5: #003675;
    --secondary-lv-6: #002B5E;
    --secondary-lv-7: #002046;

    /* 터셔리 */
    --tertiary-lv-0: #EDEDEB;
    --tertiary-lv-1: #DAD9D6;
    --tertiary-lv-2: #B5B3AE;
    --tertiary-lv-3: #908E85;
    --tertiary-lv-4: #6B685D;
    --tertiary-lv-5: #464234;
    --tertiary-lv-6: #38352A;
    --tertiary-lv-7: #2A281F;

    /* 쿼터너리 — body.--sub 일 때 primary로 리맵됨 (지금은 미사용) */
    --quaterary-lv-0: #F5ECE6;
    --quaterary-lv-1: #EAD7CC;
    --quaterary-lv-2: #D4AF99;
    --quaterary-lv-3: #BF8866;
    --quaterary-lv-4: #A96033;
    --quaterary-lv-5: #943800;
    --quaterary-lv-6: #762D00;
    --quaterary-lv-7: #592200;
}

/* ===== 기본 타이포 ===== */
html {
    /* rem 기준 폰트크기 — 화면폭에 따라 1~16px 사이 가변 */
    font-size: clamp(1px, 0.8333333vw, 16px);
}

body {
    font-family: 'Pretendard';
    color: #111;
    user-select: none;
}

h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
h4 { font-size: 0.75rem;  font-weight: 500; line-height: 1rem;    letter-spacing: -0.0175rem; }