:root {
    /* color */

    --color-background-0: #ffffff;
    --color-background-1: #f5f5f5;
    --color-background-dimmed: rgba(0, 0, 0, 0.5);

    --color-surface-neutral: #ffffff;
    --color-surface-neutral-1: #f5f5f5; /* --color-background-0에 사용 */
    --color-surface-neutral-2: #f0f0f0; /* --color-background-1에 사용 */
    --color-surface-primary: #fa6600; /* 한 화면에 최대 1개 */
    --color-surface-secondary: #403f3e; 
    
    --color-semantic-1: #009ca5; /* 한 화면에 최대 1개 */
    --color-semantic-2: #f53f3f;
    --color-custom-1: #5979C9; /* 한 화면에 최대 1개 */
    --color-semantic-2: #f53f3f;


    --color-state-pressed: rgba(0, 0, 0, 0.02);
    --color-state-disabled: rgba(255, 255, 255, 0.6);

    --color-text-body: #272b2f;
    --color-text-body-1: #403f3e;
    --color-text-body-2: #5e5c5a;
    --color-text-body-3: #7e7c7a;
    --color-text-body-0: #e5e4e3;
    --color-text-primary: #fa6600;
    --color-text-neutral: #ffffff;
    --color-text-neutral-1: #908f8e;
    --color-text-neutral-2: #b4b3b2;


    --color-border-1: #f5f5f5;
    --color-border-2: #f0f0f0;
    --color-border-3: #e5e4e3;
    --color-border-4: #908f8e;
    --color-border-5: #403f3e;

    --color-palette-bluegreen-100: #d6f6ed;
    --color-palette-indigoblue-100: #e0ebfc;
    --color-palette-red-100: #fee5d8;

    
    /* spacing */

    /* --spacing-xxxLarge: 48px;
    --spacing-xxLarge: 32px; 
    --spacing-xLarge: 28px;
    --spacing-Large: 24px;
    --spacing-Medium: 20px;
    --spacing-Small: 16px;
    --spacing-xSmall: 12px;
    --spacing-xxSmall: 8px;
    --spacing-xxxSmall: 4px; */
    
    --spacing-xxxLarge: 96px;
    --spacing-xxLarge: 64px; 
    --spacing-xLarge: 56px;
    --spacing-Large: 48px;
    --spacing-Medium: 40px; /* 페이지 좌우 여백 기본값 */
    --spacing-Small: 32px;
    --spacing-xSmall: 24px;
    --spacing-xxSmall: 16px;
    --spacing-xxxSmall: 8px;
    --spacing-xxxxSmall: 4px;


    /* shape & shadow */
    
    --radius-Small: 8px; /* 작은 사이즈의 아이템 컴포넌트에 사용 */
    --radius-Medium: 16px; /* button, input, toast 등 작은 컴포넌트에 사용 */
    --radius-Large: 24px; /* banner 등 높이 값이 크지 않은 컴포넌트에 사용 */
    --radius-xLarge: 32px; /* card, bottom sheet, modal 등 큰 단위의 컴포넌트에 사용 */
    --radius-xxLarge: 200px; /* round 형태의 컴포넌트에 사용 */

    --shadow-Small: 0px 5px 8px 0px rgba(0, 0, 0, 0.02);
    --shadow-Medium: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    --shadow-Large: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow: hidden;
}

/* 스크롤 설정 */
.scrollable-x {
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}
.scrollable-y {
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}
.scrollable-x::-webkit-scrollbar {
    display: none;
}
.scrollable-y::-webkit-scrollbar {
    display: none;
}

/* 화면에 꽉차는 컨테이너 */
.full-container {
    width: 100vw;
    height: 100vh;
}

.full-container.vertical {
    display: flex;
    flex-direction: column;
}
.full-container.horizontal {
    display: flex;
    flex-direction: row;
}

/* 패딩 적용된 sheet */
.sheet {
    padding-inline: var(--spacing-Medium);
    padding-top: var(--spacing-Medium);
    padding-bottom: var(--spacing-xxLarge);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-Small);
}

.sheet.white {
    background-color: var(--color-background-0);
}
.sheet.gray {
    background-color: var(--color-background-1);
}

.hide {
    display: none !important; 
}



/* button */

button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-Medium);
    padding-inline: var(--spacing-Small);
    border: none;

    font-family: 'HanwhaGothicL';
    font-size: 2.8rem;
    line-height: 42px;
    font-weight: 300;
    word-break: keep-all;
}


/* color */
button.primary {
    background-color: var(--color-surface-primary);
    color: white;
}
button.secondary {
    background-color: var(--color-surface-secondary);
    color: white;
}
button.neutral {
    background-color: var(--color-surface-neutral-2);
    color: var(--color-text-body-1);
}

/* state */
button.primary:hover {
    background-color: #E15C00;
    color: #E6E6E6;
}
button.primary:disabled {
    background-color: #FCCD99;
    color: white;
}
button.secondary:hover {
    background-color: #3A3938;
    color: #E6E6E6;
}
button.secondary:disabled {
    background-color: #ACABA9;
    color: rgba(255, 255, 255, 0.6)
}
button.neutral:hover {
    background-color: #D8D8D8;
    color: #3A3938;
}
button.neutral:disabled {
    background-color: #F9F9F9;
    color: #9C9B9A;
}

/* size */
button.block {
    width: 100%;
}

button.large {
    min-width: 168px;
    height: 112px;
    border-radius: var(--radius-Medium);
    padding: var(--spacing-Small);
    font-family: 'HanwhaGothicR';
    font-size: 3.2rem;
}
button.medium {
    min-width: 144px;
    height: 96px;
    border-radius: var(--radius-Medium);
    padding-inline: var(--spacing-Small);    
}
button.small {
    min-width: 120px;
    height: 80px;
    border-radius: var(--radius-Medium);
    padding-inline: var(--spacing-Small);    
}
button.xSmall {
    min-width: 96px;
    height: 64px;
    border-radius: var(--radius-Small);
    padding-inline: var(--spacing-xSmall);    
}

.btn-group.large {
    
}
.btn-group.medium {

}
.btn-group.horizontal {
    display: flex;
    gap: var(--spacing-xxSmall);
}
.btn-group.vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xSmall);
}
.btn-group.horizontal > button {
    flex: 1;
}


.divider {
    border-bottom: 2px solid var(--color-border-2);
}


/* text field */
.text-field .field-set {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xSmall);
}

.text-field .field-set .input-box {
    display: flex;
    align-items: center;
    padding: var(--spacing-xSmall) var(--spacing-Small);
    gap: var(--spacing-xSmall);

    border-radius: var(--radius-Medium);
    border: 2px solid var(--color-border-3);
    background-color: var(--color-surface-neutral-1);

    transition: border-color 0.3s;
}
.text-field .field-set .input-box:focus-within {
    border-color: var(--color-border-5);
}

.text-field .field-set .input-box input {
    flex: 1;
    font-size: 3.2rem;
    font-weight: 300;
    line-height: 48px;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    caret-color: var(--color-surface-primary);
}

.text-field .field-set .input-box img {
    width: 36px;
    height: 36px;
}

.text-field.error .field-set .input-box {
    border-color: #F53F3F;
}
.text-field.error .field-set .help-text {
    color: #F53F3F;
}