@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&display=swap');

:root {
    /* Base/Global Tokens */

    /* Typography Base */
    --font-family: "Noto Sans KR", sans-serif;

    /* Colors Base */
    --color-blue-500: #3ac2e9;
    --color-blue-100: #edfaff;
    --color-blue-200: #d7f3ff;

    --color-red-500: #ff474c;
    --color-red-100: #ffeded;
    --color-red-200: #ffc6c8;

    --color-green-500: #03c75a;
    --color-green-100: #e6f9ef;
    --color-green-200: #cff9e2;

    --color-yellow-500: #f8bb15;
    --color-yellow-100: #fef8e8;
    --color-yellow-200: #fbde90;

    --color-grey-100: #ffffff;
    --color-grey-200: #f6fafd;
    --color-grey-300: #ededf2;
    --color-grey-400: #cdced7;
    --color-grey-500: #afb1bb;
    --color-grey-600: #8a8d97;
    --color-grey-700: #262c3e;

    /* Design System Variables */

    /* Typography Styles */
    --text-h1-bold: 700 22px/32px var(--font-family);
    --text-h2-bold: 700 18px/28px var(--font-family);
    --text-p1-bold: 700 15px/20px var(--font-family);
    --text-p1-regular: 400 15px/20px var(--font-family);
    --text-p2-bold: 700 13px/18px var(--font-family);
    --text-p2-regular: 400 13px/18px var(--font-family);
    --text-caption-bold: 700 10px/12px var(--font-family);
    --text-caption-regular: 400 10px/12px var(--font-family);

    /* Status Colors */
    --status-default: var(--color-blue-500);
    --status-default-var: var(--color-blue-200);
    --status-default-tint: var(--color-blue-100);
    --status-error: var(--color-red-500);
    --status-error-var: var(--color-red-200);
    --status-error-tint: var(--color-red-100);
    --status-success: var(--color-green-500);
    --status-success-var: var(--color-green-200);
    --status-success-tint: var(--color-green-100);
    --status-event: var(--color-yellow-500);
    --status-event-var: var(--color-yellow-200);
    --status-event-tint: var(--color-yellow-100);
    --status-disabled: var(--color-grey-400);
    --status-disabled-tint: var(--color-grey-300);
    --status-on-st: var(--color-grey-100);

    /* Surface Colors */
    --surface-l1: var(--color-grey-200);
    --surface-l2: var(--color-grey-100);
    --surface-l3: var(--color-grey-300);

    /* Text Colors */
    --text-pri: var(--color-grey-700);
    --text-pri-var: var(--color-blue-500);
    --text-sec: var(--color-grey-600);
    --text-tertiary: var(--color-grey-500);

    /* Button Colors */
    --btn-pri: var(--color-blue-500);
    --btn-on-pri: var(--color-grey-100);
    --btn-sec: var(--color-grey-100);
    --btn-on-sec: var(--color-blue-500);
    --btn-on-sec-var: var(--color-grey-600);

    /* Background Colors */
    --bg: var(--color-grey-100);
    --bg-on: var(--color-grey-700);
    --bg-on-var: var(--color-grey-300);

    /* Icon Colors */
    --icon-default: var(--color-grey-600);
    --icon-active: var(--color-blue-500);
    --icon-alert: var(--color-red-500);

    /* Border Colors */
    --border: var(--color-blue-100);

    /* Spacing */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;

    /* Shape */
    --radius-4: 4px;
    --radius-16: 16px;
    --radius-24: 24px;

    /* Elevation */
    --elevation1: 0px 1px 5px rgba(205, 206, 215, 0.5);
    --elevation2: 0px 2px 15px rgba(205, 206, 215, 0.5);
    --elevation3: 0px 8px 20px rgba(205, 206, 215, 0.5);
    --elevation4: 0px 16px 25px rgba(205, 206, 215, 0.5);
    --elevation3-reverse: 0px -8px 20px rgba(205, 206, 215, 0.5);

    /* 안전영역 변수 추가 */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 모바일 뷰 관련 내용 추가 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html {
    /* 폰트 자동 확대 방지 */
    -webkit-text-size-adjust: none;
    /* 가로 스크롤 방지 */
    overflow-x: hidden;
    /* 스크롤 부드럽게 */
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-family);
    color: var(--text-pri);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.65px;
    display: flex;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    background-color: var(--bg);
    /* 텍스트 선택 방지 */
    -webkit-user-select: none;
    user-select: none;
    /* 아이폰 노치 영역 대응 */
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
}

.root_container {
    flex-direction: column;
}

@media (max-width: 600px) {
    .root_container {
        min-width: 280px; /* 갤럭시 폴드 대응 */
        width: 100%;
        margin: 0 auto; /* 중앙 정렬 */
        padding: 0 var(--spacing-16);
    }
}

@media (min-width: 600px) {
    .root_container {
        width: min(55vw, calc(100% - (var(--spacing-16) * 2))); /* 최대 너비 제한 */
        margin: 0 auto;
    }
}

/* 입력 요소 스타일 통일 */
input,
textarea,
select {
    font-family: var(--font-family);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    background-color: transparent;
}

/* 입력 요소 선택 가능하도록 */
input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* 버튼 스타일 초기화 */
button {
    cursor: pointer;
    font-family: var(--font-family);
}

/* 유틸리티 클래스 추가 */
.safe-area-padding {
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-16);
    padding-bottom: calc(var(--spacing-16) + var(--safe-area-inset-bottom));
    background: var(--surface-l2);
}

/* 스크롤바 스타일링 */
::-webkit-scrollbar {
    width: 0;
}

.display--hidden {
    display: none !important;
}

@font-face {
    font-family: 'Gmarket Sans';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}