:root {
  --primary: #556ee6;
  --secondary: #74788d;
  --success: #34c38f;
  --info: #50a5f1;
  --warning: #f1b44c;
  --danger: #f46a6a;
  --light: #eff2f7;
  --dark: #343a40;
  --header-height:70px;
  --background:#d0eaff;
}

body {
  margin: 0;
  font-family: Poppins,sans-serif;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: left;
  background-color: #f8f8fb;
}

body * {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
  color: #495057
}

a {
  text-decoration: none !important;
  color: #495057;
}

label {
  font-weight: 500;
}

/* 헤더 */
header {position:fixed; left:0; top:0; display:flex; justify-content:space-between; align-items:center; padding:0 40px; width:100%; height:var(--header-height); background:#1266ff; z-index:9999;}
header a {color:#fff; font-size:30px;}
/* form-group */
.form-group {display:flex; gap:5px; flex-direction:column; margin-bottom:20px;}
.form-group.chkbox {flex-direction:row; align-items:center;}
.form-group input[type=text], 
.form-group input[type=number], 
.form-group input[type=password] {height:36px; padding:7px 12px; background:rgb(232, 240, 254); border:1px solid #ced4da; border-radius:5px;}
.form-group input[type="number"]::-webkit-outer-spin-button,
.form-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 체크박스 */
.custom-chkbox {display:inline-flex; justify-content:center; align-items:center; gap:0.2em; cursor:pointer;}
.custom-chkbox::before {display:inline-flex; justify-content:center; align-items:center; width:1.3em; height:1.3em; font-size:0.7em; color:transparent; border:1px solid #ddd; border-radius:4px; content:'✔';}
.custom-chkbox:has(input:checked)::before {background:var(--primary); color:#fff;}
.custom-chkbox input[type=checkbox] {display:none;}

/* 토글버튼 */
.custom-toggle {
  position: relative;
  display: block;
  padding: 2px;
  width: 3em;
  height: 1.5em;
  border: 1px solid #e8eae9;
  border-radius: 2em;
  outline: 0;
  background: #fbfbfb;
  transition: all 0.4s ease;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-sizing: border-box;
}
.custom-toggle:has(input:checked) {background:var(--success);}
.custom-toggle::after {position:relative; left:0; display:block; width:50%; height:100%; border-radius:2em; background:#fbfbfb; transition:left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease; box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08); content:'';}
.custom-toggle:has(input:checked)::after {left:50%;}
.custom-toggle input[type=checkbox] {display:none;}




/* button */
.btn {    
  display: inline-block;
  font-weight: 400;
  color: #495057;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--light);
  border: 1px solid transparent;
  padding: 0.47rem 0.75rem;
  font-size: .8125rem;
  word-break:keep-all;
  border-radius: 0.25rem;
  -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
}
.btn:hover,
.btn:active {
  background-color: #c4c7cb;
  box-shadow:0 0 3px 2px #a8a8a8;
}
.btn.btn-primary {
  background-color: var(--primary);
  color: var(--light);
  border-color: var(--primary);
}
.btn.btn-primary:hover,
.btn.btn-primary:active {
  background-color:#3d58d9; 
  border-color:#3d58d9;
}


.btn.btn-spotify {
  background-color: #1ed760;
  color: var(--dark);
  border-color: #1ed760;
}
.btn.btn-spotify:hover,
.btn.btn-spotify:active {
  background-color:#15be51; 
  border-color:#15be51;
}

/* 검색 모달창 */
.modal-wrapper {display:none; position:fixed; width:100%; height:100%; z-index:99999;}
.modal-wrapper.active {display:block;}
.modal-wrapper .close-area {position:absolute; width:100%; height:100%; background:#0009; cursor:pointer;}
.modal-wrapper .modal-container {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:70%; height:80%; background:#fff; border-radius:10px; box-shadow:5px 5px 10px #0005;}
.modal-wrapper .modal-container .close-btn {position:absolute; right:0; top:0; width:33px; height:33px; display:flex; justify-content:center; align-items:center; font-size:19px; background:transparent; border:0; cursor:pointer; z-index:9999;}

@media (min-width:769px) {
  .m-only {display:none !important;}
}

@media (max-width:768px) {
  :root {--header-height:40px;}
  header {padding:0 10px;}
  header a {color:#fff; font-size:25px;}

  .pc-only {display:none !important;}
}