@charset "UTF-8";

/* 폰트 */
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-ExtraBold.woff') format('woff');
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	src: url('../font/Pretendard-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
}

/* 색상 */
:root {
	--gray-50: #F3F3F3;
	--gray-100: #DDD;
	--gray-200: #C6C6C6;
	--gray-300: #B0B0B0;
	--gray-400: #9B9B9B;
	--gray-500: #868686;
	--gray-600: #727272;
	--gray-700: #5E5E5E;
	--gray-800: #4B4B4B;
	--gray-900: #393939;
	--white-0: #FFF;
	--white-100: #F8F8F8;
	--white-200: #F6F6F6;
	--white-300: #F4F4F4;
	--phones-blue-50: #F3F6FB;
	--phones-blue-100: #E5ECF6;
	--phones-blue-200: #D2DDEF;
	--phones-blue-300: #B4C8E4;
	--phones-blue-400: #91ABD6;
	--phones-blue-500: #758FCA;
	--phones-blue-600: #6076BC;
	--phones-blue-700: #5365AB;
	--phones-blue-800: #47548C;
	--phones-blue-900: #3D4771;
	--phones-blue-950: #323957;
}

/* google fonts icon */
.material-symbols-rounded {
    font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
}

/* base style */
::-webkit-scrollbar {
    display: none;
}
html {
    overflow-y: hidden;
    overflow-x: visible;
}
html, body {
    width: 100%;
    height: 100%;
    word-break: keep-all;
    -webkit-touch-callout : none;
}
body {
    position: relative;
    margin: 0 auto;
    max-width: 768px;
    min-width: 320px;
    overflow-x: hidden;
    background: #f8f8f8;
}
html, body, th, td, input, select, textarea, button {
    font-family: "Pretendard", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900, #222);
    line-height: 1.4;
}
a {
    color: var(--gray-900, #222);
}

/* ios에서 인풋들 모서리 라운딩과 상단 그림자 제거 */
input,
textarea,
select {
    border-radius: 0;
    -webkit-appearance: none;
}
* {
    -webkit-tap-highlight-color: transparent;
}
.body_inner {
    width: 100%;
    min-height: 100%;
}
#contents {
    position: relative;
    min-height: calc(100vh - 56px);
    background: var(--White-0, #FFF);
}

/* ios font-size 16px 미만일때 포커스시 줌되는 현상 수정 */
/* 텍스트 선택, 드래그, 더블클릭 막기 :not()은 예외처리 */
*:not(input, textarea) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.user_select_text {
    user-select: all;
    -webkit-user-select: text;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
}

/* global */
.show {
    display: block !important;
}
.hide {
    display: none !important;
}
.scrollX {
    overflow: hidden !important;
    -ms-touch-action: none;
    touch-action: none;
    overscroll-behavior-y: contain;
}

/* header */
#header {
    position: sticky;
    top: 0;
    z-index: 5;
    width: 100%;
    max-width: 768px;
    background: var(--White-0, #FFF);
}
#header .title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    position: relative;
}
#header .title h1 {
    font-weight: 600;
    font-size: 15px;
}
#header .prev_page, .logout_page {
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 24px;
    height: 24px;
    -webkit-box-sizing: initial;
    box-sizing: initial;
}
#header .close {
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 9;
    width: 24px;
    height: 24px;
    -webkit-box-sizing: initial;
    box-sizing: initial;
}

/* input component */
.form_control {
    display: block;
    padding: 0 16px;
    width: 100%;
    height: 56px;
    border: 1px solid var(--gray-100, #DDD);
    border-radius: 10px;
    background: var(--white-0 #FFF);
    color: var(--gray-900, #222);
    font-size: 16px;
    font-weight: 500;
}

.form_control::placeholder {
    color: var(--gray-400, #9B9B9B);
}

.form_control:focus{
    background: var(--white-0 #FFF);
    border: 1px solid var(--phones-blue-900, #3D4771);
}

.input_group.top_label label {
    display: block;
    margin-bottom: 4px;
    color: var(--gray-400, #9B9B9B);
    font-size: 12px;
}

.input_group:has(.form_control:focus) label {
    color: var(--phones-blue-900, #3D4771);
}

/* btn */
.btn_xl, .btn_lg, .btn_md, .btn_sm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    font-weight: 600;
}

.btn_lg{
    padding: 0 20px;
    height: 56px;
    font-size: 16px;
}

.btn_xl{
    height: 56px;
    border-radius: 0px;
}

.fill_deep_blue{
    background: var(--phones-blue-900, #3D4771);
    color: var(--White-0, #fff);
}

.fill_light_blue{
    background-color: var(--phones-blue-200, #D2DDEF);
    color: var(--phones-blue-900, #3D4771);;
}

button.fill_deep_blue:disabled,
button.fill_light_blue:disabled{
    background: var(--gray-100, #DDD);
    color: var(--gray-400, #868686);
}