/* =========================================
   Base CSS (1rem = 10px)
========================================= */

/* Root font-size: 1rem = 10px */
html {
    font-size: 62.5%;
}

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

/* Typography 기본 */
body {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 1.6rem; /* 16px */
    color: #222;
    background: #fff;
    line-height: 1.5;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

ul, ol {
    list-style: none;
}

/* 폼 요소 기본 스타일 통일 */
input, textarea, select {
    font-family: inherit; /* 폰트 통일 */
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
textarea {
    resize: vertical; /* 수평 크기 변경 방지 */
}

/* ------------------------------
    Common Layout Utilities
------------------------------ */

/* 고정 폭 중앙 정렬 container */
.container {
    max-width: 120rem; /* 1200px */
    margin: 0 auto;
    padding: 0 2rem;
}

/* Flex utilities */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* -----------------------------------------
   CSS Variables (Design System)
----------------------------------------- */
:root {
    /* Brand Colors */
    --color-primary: #3A7FFF;
    --color-secondary: #6C8CFF;
    --color-accent: #FFD166;

    /* Text Colors */
    --text-strong: #111;
    --text-normal: #333;
    --text-light: #777;

    /* Background Colors */
    --bg-light: #F8F9FA;
    --bg-gray: #E9ECEF;

    /* Border */
    --border-light: #ddd;

    /* Spacing System (8px scale) */
    --space-1: 0.8rem;   /* 8px */
    --space-2: 1.6rem;   /* 16px */
    --space-3: 2.4rem;   /* 24px */
    --space-4: 3.2rem;   /* 32px */
    --space-5: 4.0rem;   /* 40px */

    /* Radius */
    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.2rem;
}

/* ------------------------------
    Responsive Breakpoints
    (반응형 프로젝트 필수 토대)
------------------------------ */
:root {
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-laptop: 1024px;
    --bp-desktop: 1440px;
}

/* ------------------------------
    Default responsive behavior
------------------------------ */

/* 모바일에서 기본적으로 padding 좁게 */
@media (max-width: 768px) {
    .container {
        padding: 0 1.6rem;
    }
}