/* reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { font-size: 10px; }
body { position: relative; font-family: "Pretendard", sans-serif; color: #333; letter-spacing: -0.5px; min-width: 1280px; }

/* 여백 초기화 */
html, body, div, span, h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd, p, address, blockquote, pre, cite,
form, fieldset, input, textarea, select, button, iframe, table, th, td { margin: 0; padding: 0; }

/* 테두리 초기화 */
table, fieldset, img { border: 0 none; }

/* 목록 초기화 */
ul, ol { list-style: none; }

/* 테이블 */
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: normal; text-align: left; }

/* 이미지와 폼 요소 정렬 */
img { vertical-align: top; }
label, input, select, textarea, button { vertical-align: middle; }

/* 텍스트 초기화 */
strong { font-weight: normal; }
em, address, cite { font-style: normal; }
strong, b { font-weight: 800; }

/* 폼 요소 */
label, button { cursor: pointer; }
legend { position: absolute; font-size: 0; line-height: 0; height: 0; }
input, textarea, option, button { font-family: 'Pretendard'; font-size: 1.4rem; letter-spacing: -0.4px; border-radius: 0; border: 0; background: transparent; }
input[type=file],
input[type=number],
input[type=text],
input[type=password],
textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: 0; }
select { font-family: 'SUIT'; font-size: 1.4rem; letter-spacing: -0.4px; color: #222; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: 0; }
textarea { white-space: pre-wrap; resize: none; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}



/* 포커스 스타일 */

select::-ms-expand { display: none; }

/* 플레이스홀더 색상 */
input::placeholder, textarea::placeholder { color: #bbb; }

/* 숫자 입력 스타일 */
.input-text.number input[type=number] {
	box-sizing: border-box;
  	-moz-appearance: textfield; /* 파이어폭스 기본 화살표 제거 */
	padding: 0 25px 0 10px;
}

/* 버튼 스타일 */
.btn-wrap { position: relative; }
.btn-wrap.right { text-align: right; }
.btn-wrap.mg-top { margin-top: 10px; }
.btn-wrap.mg-0 button { margin: 0; }
.btn-wrap.pd-left { padding-left: 5px; }
button { display: inline-block; padding: 0 16px; background: #343A3F; font-size: 14px; color: #BDC4CA; border-radius: 4px; transition: background .3s, border .3s; font-weight: 600; vertical-align: middle; text-align: center; height: 29px; line-height: 29px; margin-bottom: 4px; border: 1px solid transparent;
}
button:hover { opacity: 0.8; }
button:disabled {background: transparent; color: #6D7277; border: 1px solid #6D7277; cursor: default; opacity: 0.4; pointer-events: none;}
button:disabled:active { color: #6D7277;}
button:active { color: #6AE1BF; transform: scale(0.95); }
button.active { color: #6AE1BF; border: 1px solid #417566; }
button.border { border: 1px solid #62676A; }

/* 컨테이너 */
.container { width: 100%; }

/* 입력 필드 스타일 */
.input-text { display: inline-block; }
.input-text input {width: 100%;height: 30px;display: inline-block;background: #101214;padding: 0 10px;color: #BDC4CA;border-radius: 4px;transition: background 0.1s ease, border 0.1s ease;font-size: 15px; border: 1px solid transparent;}
.input-text input:focus { border: 1px solid #6AE1BF !important; outline: none;}
.input-text input.align-center { text-align: center; }
.input-text.w-50 input { width: 50px; }
.input-text.w-170 input { width: 170px; }

.input-wrap { display: flex; gap: 4px; align-items: flex-start;}
input[type="color"] { appearance: none; width: 24px; height: 24px;  border: 1px solid #ffffff;  padding: 0; cursor: pointer;  }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0;}
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px;}
input[type="color"]::-moz-color-swatch { border: none; border-radius: 4px;}
.input-wrap .color-preview {  border-radius: 4px; cursor: pointer;}