:root{
  --main : #2c7be5;
  --main-lighter : #d5e5fa;
  --main-darker : #1c4f93;
  --sub : #d4f2ff;
  --gray-color: #616161;
  --gray-bg: #e3e6ea;
  --grayDark-color: #070f19;
  --grayDark-bg: #ced1d4;
}
button{color: inherit;}
a,
a:hover{text-decoration: none;}

.modal{overscroll-behavior: contain; height: 100vh; overflow: hidden;}
.modal-dialog{display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0 auto; padding: 0 0.5rem;}
/* 버튼 */
.btn_box{gap: 5px; display: flex; justify-content: center; }
.btn_box.wide .btn_basic{flex: 1; }
.btn_basic{padding: 8px 12px; box-shadow: var(--falcon-box-shadow); border: 1px solid #f9f9f9; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: #fff;}
.btn_basic.primary{background: var(--main); color: #fff; border-color: var(--main);}
.btn_basic.secondary{background: var(--falcon-badge-subtle-secondary-color); color: #fff; border-color: var(--falcon-badge-subtle-secondary-color); }
.btn_basic.border{box-shadow: none; border-color: var(--falcon-input-border-color);}
.btn_basic.sm{padding: 3px 7px; }

/* tab */
[class*="tab_type"]{display: flex;}
[class*="tab_type"] li{}
[class*="tab_type"] li a{color: inherit; padding: 5px 10px; display: flex; align-items: center; text-decoration: none;}

.tab_type01{display: flex;}
.tab_type01>*{padding: 5px 10px; display: flex; align-items: center; justify-content: center; height: 30px;}
.tab_type01>*.on{background: var(--main);}


.tab_type02{display: flex; border: 1px solid #ddd; border-radius: 20px; height: 40px; align-items: center; overflow: auto; padding: 0 10px; }
.tab_type02::-webkit-scrollbar{display: none;}
.tab_type02>*{padding: 5px 10px; display: flex; align-items: center; justify-content: center; height: 30px; white-space: nowrap; }
.tab_type02>*.on{color: var(--main); font-weight: bold;}

.tab_type03>li>a{border: 1px solid #ddd; height: 40px; border-radius: 20px; padding: 5px 15px;}
.tab_type03>li.on>a{background: rgba(var(--falcon-info-rgb), .3); color: var(--falcon-primary); border-color: rgba(var(--falcon-info-rgb), .3)}


/* 인풋 */
.input_box{display: flex; align-items: center; gap: 3px;}
.input_box input,
.input_box label{margin: 0;padding: 0;}


/* flex 관련 */
.com_flex_box{display: flex;}
.flex_center{display: flex;align-items: center; justify-content: center;}
.flex_col{flex-direction: column;}
.flex-2{flex: 2;}
.flex_wrap{flex-wrap: wrap;}
.f_wrap{flex-wrap: wrap;}
.j_bet{justify-content: space-between;}
.j_cen{justify-content: center}
.j_end{justify-content: flex-end;}
.j_start{justify-content: flex-start;}
.a_end{align-items: flex-end;}
.a_cen{align-items: center;}
.flex-sh-0{flex-shrink: 0;}

.col2>*{width: 50%;}

.grid-col1{grid-template-columns: repeat(1,1fr); display: grid;}
.grid-col2{grid-template-columns: repeat(2,1fr); display: grid;}
.grid-col3{grid-template-columns: repeat(3,1fr); display: grid;}
.grid-col4{grid-template-columns: repeat(4,1fr); display: grid;}




/* on클래스 */
.on-bg .on{background: var(--falcon-primary) !important; color: #fff !important;}
.on-border_color .on{border-color: var(--falcon-primary) !important ;}
.on-border_width .on{border-width: 2px !important ;}
.on-color .on{color: var(--falcon-primary) !important ;}
.on-flex2 .on{flex: 2;}
.on-flex3 .on{flex: 3;}
.on-flex4 .on{flex: 4;}

/* 이미지 & 아이콘 */
.ic_basic{width: 32px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;}

.box_shadow{box-shadow: var(--falcon-btn-falcon-box-shadow);}


/* 오버플로우 스크롤일 때 가리기 */
.scroll-y-auto{overflow-y: auto;}
.scroll-y-auto::-webkit-scrollbar{display: none;}

.scroll_hide-left{position: relative;}
.scroll_hide-left::after{content: ""; display: block; width: 30px; height: 100%; background: linear-gradient(to right, var(--falcon-gray-white-rgb), transparent); position: absolute; bottom: 0; left: 0; pointer-events: none;}
.scroll_hide-right{position: relative;}
.scroll_hide-right::after{content: ""; display: block; width: 30px; height: 100%; background: linear-gradient(to left, var(--falcon-gray-white-rgb), transparent); position: absolute; bottom: 0; right: 0; pointer-events: none;}
.scroll_hide-top{position: relative;}
.scroll_hide-top::after{content: ""; display: block; width: 100%; height: 30px; background: linear-gradient(to bottom, var(--falcon-gray-white-rgb), transparent); position: absolute; top: 0; left: 0; pointer-events: none;}
.scroll_hide-bottom{position: relative;}
.scroll_hide-bottom::after{content: ""; display: block; width: 100%; height: 30px; background: linear-gradient(to top, var(--falcon-gray-white-rgb), transparent); position: absolute; bottom: 0; left: 0; pointer-events: none;}

/* 텍스트 */
.t-left{text-align: left;}
.t-center{text-align: center;}
.t-right{text-align: right;}
.t-nowrap{white-space: nowrap;}

.t-cxl{text-decoration: line-through; color: var(--grayDark-bg);}

/* 비율 */
.fit-cover{width: 100%; height: 100%; object-fit: cover;}
.fit-contain{width: 100%; height: 100%; object-fit: contain;}
.ratio11{aspect-ratio: 1/1;}

/* 포지션 */
.posi_rel{position: relative;}
.pois_aub{position: absolute;}
.posi_cen{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.posi_cen.r20{left: auto; right: 20px;}

body.fixed{width: 100vw; height: 100vh; overflow: hidden;;}
.modal_fixed{position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); width: 100vw; height: 100vh; z-index: 9999; overscroll-behavior: contain;}
.modal_fixed>div{background: #fff; width: 80%; max-width: 500px; border-radius: 10px; max-height: 70vh; overflow: auto; position: relative;}
.modal_close_btn{position: absolute; top: -20px; right: -20px;}
.sticky{position: sticky; top: 0; left: 0;}

/* 뱃지 */
.badge-sm{display: flex; line-height: 20px; height: 20px; padding: 0 10px; border-radius: 3px; font-size: 11px; font-weight: bold;}

/* 여백 */
.mt-auto{margin-top: auto;}
.mb-auto{margin-bottom: auto;}
.mr-auto{margin-right: auto;}
.ml-auto{margin-left: auto;}

/* 폰트 */
.fon_col-main{color: var(--main);}
.fon_col-main_darker{color: var(--main-darker);}
.fon_col-main_lighter{color: var(--main-lighter);}
.fon_col-gray_bg{color: var(--gray-bg);}
.fon_col-gray_color{color: var(--gray-color);}
.fon_col-gray_dark_bg{color: var(--grayDark-bg);}
.fon_col-gray_dark_color{color: var(--grayDark-color);}

/* 투명도 */
.opa-1{opacity: .1;}
.opa-2{opacity: .2;}
.opa-3{opacity: .3;}
.opa-4{opacity: .4;}
.opa-5{opacity: .5;}
.opa-6{opacity: .6;}
.opa-7{opacity: .7;}
.opa-8{opacity: .8;}
.opa-9{opacity: .9;}

/* 너비 */
.w-fit{width: fit-content;}
.w5{width:5px}
.w10{width:10px}
.w15{width:15px}
.w20{width:20px}
.w25{width:25px}
.w30{width:30px}
.w35{width:35px}
.w40{width:40px}
.w45{width:45px}
.w50{width:50px}
.w55{width:55px}
.w60{width:60px}
.w65{width:65px}
.w70{width:70px}
.w75{width:75px}
.w80{width:80px}
.w85{width:85px}
.w90{width:90px}
.w95{width:95px}
.w100{width:100px}

.h-fit{height: fit-content;}
.h0{height:0px}
.h5{height:5px}
.h10{height:10px}
.h15{height:15px}
.h20{height:20px}
.h25{height:25px}
.h30{height:30px}
.h35{height:35px}
.h40{height:40px}
.h45{height:45px}
.h50{height:50px}
.h55{height:55px}
.h60{height:60px}
.h65{height:65px}
.h70{height:70px}
.h75{height:75px}
.h80{height:80px}
.h85{height:85px}
.h90{height:90px}
.h95{height:95px}
.h100{height:100px}

/* 여백 */
.m-auto{margin: 0 auto;}
.mt-auto{margin-top: auto;}
.mb-auto{margin-bottom: auto;}
.mr-auto{margin-right: auto;}
.ml-auto{margin-left: auto;}

/* 숨김 오버플로우 */
.over-hidden{overflow: hidden;}
.over-x_hidden{overflow-x: hidden;}
.over-y_hidden{overflow-y: hidden;}

.over-auto{overflow: auto;}
.over-x_auto{overflow-x: auto;}
.over-y_auto{overflow-y: auto;}