/* common */
.dfInput, .dfSelect, .dfTextarea {display: inline-block; font-size: 16px; border-radius: 4px; padding: 10px 12px; border: 1px solid #D9D9D9; background: #fff; width: 100%;}
.dfInput, .dfSelect {height: clamp(40px, 11vw, 48px); pointer-events: auto;}
  .dfInput::placeholder, .dfSelect::placeholder, .dfTextarea::placeholder  {color: #888;}
  .dfInput:focus, .dfSelect:focus, .dfTextarea:focus {border: 1px solid #CC3626;}
  .dfInput:read-only, .dfTextarea:read-only {background: none; border: none; border-bottom: 1px solid #E9E9E9; color: #222; cursor: default; border-radius: 0;}
  .dfInput:disabled, .dfSelect:disabled, .dfTextarea:disabled {background: #E9E9E9; border: 1px solid #D9D9D9; color: #414344; cursor: default; border-radius: 4px; opacity: 1;}
  .dfInput._error, .dfSelect._error, .dfTextarea._error {border: 1px solid #D61919;}

	.dfInput.searchInput {background: #fff url("../img/searchIcon.svg") no-repeat 10px center; padding-left: 40px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
  .dfInput.dateInput {background: #fff url("../img/calendarIcon.svg") no-repeat 10px center; padding-left: 40px;}
  .dfInput.dateInput._range { min-width: 200px; }
  .dfInput.passwordInput {padding-right: 30px;}

.required::after {content: '*'; display: inline-block; font-size: 16px; line-height: 12px; color: #CC3626; margin-left: 5px;}

.dfTextarea {min-height: 48px; line-height: 1.4;}

.dfSelect {background: #fff url("../img/allowDown.svg") no-repeat 98% center; padding-right: 25px;}

/* button */
.dfBtn {display: flex; justify-content: center; align-items: center; font-weight: 500; border-radius: 48px; transition: all 0.2s; flex-shrink: 0; padding: 0; cursor: pointer; width: 100%;}
	.dfBtn._square {border-radius: 4px; width: auto;}
  .dfBtn._sizeL {height: clamp(42px, 11vw, 48px); min-width: 72px; padding: 0 16px; font-size: 18px;}
  .dfBtn._sizeM {height: clamp(32px, 8vw, 36px); min-width: 64px; padding: 0 12px; font-size: 16px;}
  .dfBtn._sizeS {height: 24px; min-width: 48px; padding: 0 8px; font-size: 14px; width: auto;}
  .dfBtn._size100 {width: 100%;}
  .dfBtn._auto {width: auto; display: inline-flex;}

  .dfBtn._mainBg {background: #CC3626; color: #fff;}
  .dfBtn._grayBg {background: #E9E9E9; color: #AAAAAA;}
  .dfBtn._mainLine {background: #fff; color: #CC3626; border: 1px solid #CC3626;}
  .dfBtn._blackLine {background: #fff; color: #555; border: 1px solid #D9D9D9;}
  .dfBtn._redLine {background: #FFF3F3; color: #D61919; border: 1px solid #D61919;}
  .dfBtn:disabled {background: #e9e9e9; color: #aaa; border: 1px solid #e9e9e9;}

  .dfBtn._iconBtn {width: auto; padding: 0;}
    .dfBtn._iconBtn .material-symbols-outlined {font-size: 18px;}

  .dfBtn._addIcon::before {content: '+'; display: inline-block; font-size: 130%; color: inherit; margin-right: 5px; font-weight: 400;}

  .dfBtn .material-symbols-outlined {font-size: 120%;}
  .logoutBtn {display: flex; align-items: center; color: #aaa; margin: 12px auto;}

/* Link */
.dfLink {display: inline-block; text-decoration: underline; cursor: pointer; line-height: inherit; letter-spacing: inherit;}

/* custom */
.passwordBox {position: relative;}
	.passwordBox .passwordBtn {position: absolute; right: 16px; top: 16px; font-size: 20px; color: #555;}
.timerBox {position: relative;}
	.timerBox .timer {position: absolute; top: 16px; right: 16px; line-height: 16px; color: #CC3626;}

/* controlBox */
.controlBox {display: block;}
.formLabel {display: block; margin-bottom: 8px; font-size: 16px; color: #555; font-weight: 500; line-height: 1; flex-shrink: 0;}

/* checkbox, radio custom */
.customInputBox {display: flex; flex-wrap: wrap; gap:8px;}
  .customInputBox._list1 .customInputList {width: 100%;}
	.customInputBox._list2 .customInputList {width: calc((100% - 8px)/2);}
	.customInputBox._list3 .customInputList {width: calc((100% - 16px)/3);}

.customInput {cursor: pointer; display: flex; align-items: center; gap:8px; border: 1px solid #d9d9d9; border-radius: 4px; padding: 14px;}
  .customInput:has(input:checked):not(._normal) {border: 1px solid #CC3626;}
	.customInput._hideInput input {display: none;}
	.customInput._normal {padding: 0; border: none; border-radius: 0px;}
.customInput input {position: relative; display: inline-block;  appearance:none; width: 14px; height: 14px; flex-shrink: 0;}
  .customInput input:checked ~ .formLabel {color: #333; font-weight: 800;}
.customInput input::before, .customInput input::after {content: ''; display: block; position: absolute;}
.customInput .formLabel {margin-bottom: 0}

.customCheck::before {left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #d9d9d9; background: #fff; border-radius: 2px;}
.customCheck:checked::before {border: 1px solid #CC3626;  background: #CC3626;}
.customCheck:checked::after {top:2px; left: 4px; width: 5px; height: 7px; border: 2px solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);}

.customRadio::before {left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #d9d9d9; background: #fff; border-radius: 7px;}
.customRadio:checked::before {border: 1px solid #CC3626;  background: #CC3626;}
.customRadio:checked::after {top:4px; left: 4px; width: 6px; height: 6px; border-radius: 6px; background: #fff;}

.customSelect {border: 1px solid #d9d9d9; border-radius: 4px; padding: 16px;}
	.customSelect .allList {padding-left: 24px; font-size: 16px;}
	.customSelect .allList li {line-height: 16px; height: 16px; margin-top: 8px}
	.customSelect .allList li a {font-size: 14px; color: #888;}