/*전 페이지 공통*/
input, textarea{
    cursor: text;
    resize: none;
}
select,
select option,
button,
button *,
a img,
a p,
a {
    cursor: pointer;
}
button, img{
    display: block;
}
button[disabled]{
    cursor: default;
    background-color: #eee!important;
    color: #888;
    font-weight: normal;
}
input, textarea, button,
select, a, label{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
select::-ms-expand { 
	display: none;
}
select {
    -o-appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* input search */
input::-ms-clear,
input::-ms-reveal{
	display:none;width:0;height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	-webkit-appearance: none;
    /* background: url('/assets/img/icon/delete_icon_wh.svg') center center no-repeat; */
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #C8C8C8;
}
input::-webkit-calendar-picker-indicator {
    display: none !important;
}
input[type="radio"],
input[type="checkbox"] {
    -webkit-appearance: none; /* 웹킷 브라우저에서 기본 스타일 제거*/
    -moz-appearance: none; /* 모질라 브라우저에서 기본 스타일 제거*/ 
    appearance: none; /*기본 브라우저에서 기본 스타일 제거*/
}
body {color: #191919;}
* {box-sizing: border-box;}
input::placeholder {color: #999;}

button {
    background-color: transparent;
}

/* iOS 여백 */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* 입력창 키보드 대응용 */
input, textarea {
    font-size: 16px; /* iOS 확대 방지 */
}

/* 공통 색상/ 이미지, 아이콘 관리 */
:root {
    /* 세이프 가이드 */
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);

    /* margin/ pag/ padding */
    --space-1: 4px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* color */
      /* 기본 검정, 흰색 */
    --color-black: #191919;
    --color-white: #ffffff;

    --color-danger: #FF5C5C;
    /* --color-success: ; */

    --color-primary: #1E4C76;
    --color-secondary: #133758;

    --color-border: #D5D8DB;
    --color-btn-bg-hover: #153756;


    /* 50,100,200,300,400,500,600,700 기본 */
    --color-gray-50: #fafafa;
    --color-gray-100: #eeeeee;
    --color-gray-150: #CFCFCF;
    --color-gray-200: #cccccc;
    --color-gray-300: #ABABAB;
    --color-gray-350: #a5a5a5; /* 플레이스홀더 */
    --color-gray-400: #888888;
    --color-gray-500: #767676;
    --color-gray-600: #545454;
    --color-gray-700: #444444;
}

main {
    padding: calc(var(--sat) + 16px) 16px calc(var(--sab) + 96px) 16px;
    /* 아래 96px은 fixed CTA 높이만큼 콘텐츠가 안 가리게 여유 준 값(상황에 맞게 조절) */
}



/* align */
.display_none {display: none;}
.display_block {display: block;}
.display_grid {display: grid;}
.display_flex {display: flex;}
.flex_wrap {flex-wrap: wrap;}
.flex_nowrap {flex-wrap: nowrap;}
.flex_start {justify-content: flex-start;}
.flex_center {justify-content: center;}
.flex_end {justify-content: flex-end;}
.flex_between {justify-content: space-between;}
.flex_around {justify-content: space-around;}
.flex_align_s {align-items: flex-start;}
.flex_align_c {align-items: center;}
.flex_align_e {align-items: flex-end;}
.flex_align_str {align-items: stretch;}
.flex_dir_column {flex-direction: column;}


.gap-2 {
    gap: var(--space-2);
}
.gap-2-5 {
    gap: var(--space-2-5);
}
.gap-3-5 {
    gap: var(--space-3-5);
}

.relative {position: relative;}
.absolute {position: absolute;}


/* background color */
.bg-primary {background-color: var(--color-primary);}
.bg-white {background-color: var(--color-white);}

/* font color */
.txt-black {color: var(--color-black);}
.txt-white {color: var(--color-white);}
.txt-primary {color: var(--color-primary);}
.txt-secondary {color: var(--color-secondary);}
.txt-danger {color: var(--color-danger);}

.txt-gray-50 {color: var(--color-gray-50);}
.txt-gray-100 {color: var(--color-gray-100);}
.txt-gray-150 {color: var(--color-gray-150);}
.txt-gray-200 {color: var(--color-gray-200);}
.txt-gray-300 {color: var(--color-gray-300);}
.txt-gray-400 {color: var(--color-gray-400);}
.txt-gray-500 {color: var(--color-gray-500);}
.txt-gray-600 {color: var(--color-gray-600);}
.txt-gray-700 {color: var(--color-gray-700);}


/* font weight  */
.txt-light {font-weight: 300;}
.txt-medium {font-weight: 500;}
.txt-semibold {font-weight: 600;}
.txt-bold {font-weight: 700;}

/* font align */
.txt-center {text-align: center;}
.txt-right {text-align: right;}
.txt-left {text-align: left;}

.border {border: 1px solid var(--color-border);}
.border-t {border-top: 1px solid var(--color-border);}
.border-b {border-bottom: 1px solid var(--color-border);}

.radius-1 {border-radius: var(--space-1);}

.overflow-hidden {
    overflow: hidden;
}

input.input {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    height: 48px;
    padding: 0 12px;
    font-size: 15px;
}
input.input::placeholder {
    color: var(--color-gray-350);
}
input.input:focus {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 3px rgba(77, 164, 255, 1);
}

.btn {
    display: block;
    width: 100%;
    height: 48px;
    border-radius: 4px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 15px;
    font-weight: bold;
    transition: all 0.3s;
}
.btn:hover {
    background-color: var(--color-btn-bg-hover);
}
/* .btn-border {
    background-color: transparent;
    color: #FAAF00;
    border: 1px solid #FAAF00;
}
.btn-border:hover {
    color: #EEA806;
    border-color: #EEA806;
    background-color: #F9F9F9;
} */
.btn-secondary {
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
}
.btn-secondary:hover {
    background-color: var(--color-gray-200);
}


/* modal popup (커스텀팝업) */
.popup_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 30;
}

.modal_popup .popup_wrap,
.terms_popup .popup_wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    /* transform: translateX(-50%); */
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 52px 20px 16px 20px;
    width: calc(100% - 40px);
    max-width: 380px;
    border-radius: 20px;
    text-align: center;
    z-index: 30;
}

.modal_popup .popup_wrap .mainText {
    font-size: 18px;
    color: #191919;
    font-weight: 700;
}

.modal_popup .popup_wrap .subText {
    font-size: 15px;
    color: #888888;
    margin-top: 6px;
}

.modal_popup .popup_wrap .btn_box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 35px;
}
.modal_popup .popup_wrap button {
    display: block;
    width: 100%;
    height: 48px;
    border-radius: 10px;
    background-color: #FAAF00;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}
.modal_popup .popup_wrap button.cancel_btn {
    background-color: #F1F1F1;
    color: #555;
}

.modal_popup#cancel button.register_btn {
    background-color: #fff;
    border: 1px solid #EF0000;
    color: #EF0000;
}


/* 약관 */
.terms_popup .popup_wrap {
    max-width: 600px;
    padding: 0;
    border-radius: 16px;
}
.terms_popup .popup_wrap .inner__header {
    padding: 0 16px 0 20px;
    height: 50px;
    border-color: #eee;
}
.terms_popup .popup_wrap .inner__header h3 {
    font-weight: 600;
    font-size: 16px;
}
.terms_popup .popup_wrap .inner__bottom {
    padding: 20px;
    max-height: 80dvh;
    overflow-y: auto;
    font-size: 13px;
}







/* 로딩 애니메이션 공통 */
.loading {
    gap: 16px;
    padding: 20px 0;
}


@keyframes loading {
    0%,                      
    100% {
        opacity: 0;            
        transform: scale(0.5); 
    }
    50% {
        opacity: 1;            
        transform: scale(1.2); 
    }
}