.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}
.btn--primary {
  background-color: var(--primary-color);
  color: #fff;
}
.btn--primary:hover {
  background-color: #2779bd;
}
.card {
  background-color: #fff;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-bottom: 1rem;
}
.card--highlight {
  border-left: 4px solid var(--primary-color);
}
.card__title {
  font-size: 1.2rem;
  font-weight: bold;
}
.card__desc {
  font-size: 1rem;
  color: #555;
}


/* 버튼 */
/* 버튼 스타일: 등록, 수정, 삭제, 조회 등 */
.btn {
  font-family : 'Spoqa Han Sans Neo', 'sans-serif';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 1rem;
  font-size: 1rem;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  /*margin: 0.25rem;*/
  text-decoration: none;
}

/*.btn i {
  font-size: 1.1rem;
}*/

.btn--primary { background-color: #3498db; color: white; }
.btn--primary:hover { background-color: #2f89c5; }

.btn--success { background-color: #27ae60; color: white; }
.btn--success:hover { background-color: #219150; }

.btn--danger { background-color: #e74c3c; color: white; }
.btn--danger:hover { background-color: #c0392b; }

.btn--secondary { background-color: #95a5a6; color: white; }
.btn--secondary:hover { background-color: #7f8c8d; }

.btn--outline {
  background-color: transparent;
  border: 2px solid #3498db;
  color: #3498db;
}
.btn--outline:hover { background-color: #ecf6ff; }

.btn:disabled,
.btn[disabled] {
  background-color: #dcdcdc !important;
  color: #999 !important;
  cursor: not-allowed;
  border: none;
}

.btn--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}
.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  right: 10px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

/* 비밀번호 찾기 버튼 */
.btn--forgot {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn--forgot:hover {
  color: #1b4f72;
}
.button {
  cursor: pointer;
}


/* ✅ 검색바 */
.search-bar {
  display:flex;
  justify-content: space-between;
  align-items: center; /* 수직 가운데 정렬*/
  flex-wrap: wrap;
  gap: 0.5rem;
}

.search-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.search-group label {
  font-weight: 500;
}

.search-bar .btn {
  align-self: flex-end;

}

.search-group input[type="text"],
.search-group input[type="radio"],
.search-group input[type="checkbox"] {
  margin-left: 0.25rem;
}

/* ✅ 입력요소 */
input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

.input-text[type="text"],
.input-text[type="password"]{
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

.input-text[type="text"]:disabled,
.input-text[type="password"]:disabled{
  background-color: #f7f7f7;
}

.input-text[type="text"]:read-only,
.input-text[type="passowrd"]:read-only{
  background-color: #f7f7f7;
}

.input-text[type="date"] {
  flex: 1;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: white;
  color: #333;
  appearance: none; /* 크롬 기본 아이콘 제거 */
  -webkit-appearance: none; /* 사파리 제거 */
  position: relative;
}

.input-text[type="time"] {
  flex: 1;
  padding: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  background-color: white;
  color: #333;
  appearance: none; /* 크롬 기본 아이콘 제거 */
  -webkit-appearance: none; /* 사파리 제거 */
  position: relative;
}

select:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

.input-select {
  flex: 1 1 auto;         /* flex-grow, flex-shrink 허용 */
  min-width: 0;           /* flex 아이템이 줄어들 수 있게 */
  padding: 0.5rem 2rem 0.55rem  0.75rem; /* 오른쪽 여백 추가 세모랑 안겹치게.. */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  background-color: white;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.027 2.324 4 3.204 4h9.592c.88 0 1.319 1.027.753 1.658L8.753 11.14a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;

  /* 말줄임표 조건 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

textarea:focus{
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}
.input-textarea{
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  resize: none;
}

/* ✅ Custom Radio & Checkbox */
.custom-radio input[type="radio"],
.custom-checkbox input[type="checkbox"] {
  accent-color: #007bff;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  cursor: pointer;
}

.custom-radio span,
.custom-checkbox span {
  font-size: 1rem;
  vertical-align: middle;
}

.custom-radio,
.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 0.25rem;
/*  margin-right: 0.5rem;*/
  cursor: pointer;
  user-select: none;
}


/* ✅ form 그룹 */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  font-weight: bold;
}

.form-group.horizontal {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-group.horizontal > label.form-label {
  min-width: 150px;
  margin: 0;
  text-align: right;
}

.form-inline {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.center-buttons {
  justify-content: center;
}



/* ✅ 모달 스타일 */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal--open {
  display: flex;
}

.modal__content {
  position: relative;
  background-color: #fff;
  padding: 2rem;
  border-radius: 10px;
  width: 400px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.modal__header {
  position: absolute;
  left: 25px;
  top: 20px;
  font-size: 1.5rem;
  font-weight: bold;
}
.modal__body {
  margin-top: 3rem;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #999;
}
.modal__close:hover {
  color: #333;
}

/* ✅ 데이터 영역 스타일 */
.data-section{
  /*display: flex;*/
  gap: 1rem;
  margin-top: 2rem;
}

.data-section-title{
  margin-bottom: 1rem;
}

.data-wrapper{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.data-container {
  flex: 1;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

#myChart {
  width: 100%;
  height: 300px;
}

/* 드래그 앤 드롭 업로드 */
.dropzone {
  /*border: 2px dashed #6ca0dc;*/
  border:none;
  background: #f2f4f7;
  border-radius: 8px;
 /* color: #777;*/
  min-height: 300px;
  max-height: 420px;
}

/* 리스트형 미리보기 */
.dz-preview-list {
  gap: 0.5em;
  margin-top: 0.25em;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
}

.file-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 5px;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-size {
  margin-left: 1em;
  color: #666;
  font-size: 0.85em;
  white-space: nowrap;
}
.file-remove {
  margin-left: 1em;
  cursor: pointer;
  color: #c00;
  font-size: 0.9em;
  white-space: nowrap;
}
.file-remove:hover {
  text-decoration: underline;
}

/* Spinner */
#spinner-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cursor{
  cursor: pointer;
}
/* toggle */
.toggleBG{
  background:#CCCCCC;
  width:70px;
  height:30px;
  border:1px solid #CCCCCC;
  border-radius:15px;
  flex-shrink: 0;
}

.toggleFG{
  background:#FFFFFF;
  width:30px;
  height:30px;
  border:none;
  border-radius:15px;
  position:relative;
  left:0px;
}