@charset "UTF-8";
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#main-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 실제 페이지 내용 영역 */
.page-wrapper {
  margin-left: 250px;
  padding-top: 78px;
  background: #f5f5f5;
  width: calc(100% - 250px);
  flex: 1;
  box-sizing: border-box;
}

/* footer는 항상 아래 */
footer {
  margin-left: 250px;
  width: calc(100% - 250px);
  flex-shrink: 0;
}

.user-icon {
  width: 20px;
  height: 20px;
}

.white-box {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}
.white-box .box-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  color: #333;
}

.row-gap-0 {
  row-gap: 0;
}

.row-gap-1 {
  row-gap: 4px;
}

.row-gap-2 {
  row-gap: 8px;
}

.row-gap-3 {
  row-gap: 12px;
}

.row-gap-4 {
  row-gap: 16px;
}

.row-gap-5 {
  row-gap: 20px;
}

.row-gap-6 {
  row-gap: 24px;
}

.row-gap-8 {
  row-gap: 32px;
}

.row-gap-10 {
  row-gap: 40px;
}

.column-gap-0 {
  column-gap: 0;
}

.column-gap-1 {
  column-gap: 4px;
}

.column-gap-2 {
  column-gap: 8px;
}

.column-gap-3 {
  column-gap: 12px;
}

.column-gap-4 {
  column-gap: 16px;
}

.column-gap-5 {
  column-gap: 20px;
}

.column-gap-6 {
  column-gap: 24px;
}

.column-gap-8 {
  column-gap: 32px;
}

.column-gap-10 {
  column-gap: 40px;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-gap-0 {
  gap: 0;
}

.grid-gap-1 {
  gap: 4px;
}

.grid-gap-2 {
  gap: 8px;
}

.grid-gap-3 {
  gap: 12px;
}

.grid-gap-4 {
  gap: 16px;
}

.grid-gap-5 {
  gap: 20px;
}

.grid-gap-6 {
  gap: 24px;
}

.secondary-label {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.left-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 250px !important;
  height: 100vh !important;
  z-index: 1001 !important;
  background: #fff;
  border-right: 2px solid #e5e5ec !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar-logo {
  display: flex !important;
  height: 66px !important;
  padding: 0 25px !important;
  align-items: center !important;
}
.sidebar-logo .logo-image {
  height: 35px;
  width: auto;
}

.scroll-sidebar {
  flex: 1 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
.scroll-sidebar::-webkit-scrollbar {
  display: none !important;
}

.sidebar-link {
  display: flex !important;
  width: 215px !important;
  padding: 17px 12px !important;
  margin: 10px auto !important;
  border-radius: 12px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}
.sidebar-link .hide-menu {
  color: #505050 !important;
  font-weight: 600 !important;
}

.sidebar-item .content {
  display: flex !important;
  flex-direction: column !important;
  width: 215px !important;
  margin-left: 20px !important;
  max-height: 0 !important; /* 닫혔을 때 높이 0 */
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease !important;
}

.sidebar-item.open > .sidebar-link,
.sidebar-link.active-lk {
  background: #e9f7fb !important;
  box-shadow: -1px -1px 1px 0 #fff inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.15) inset !important;
}
.sidebar-item.open > .sidebar-link .hide-menu,
.sidebar-link.active-lk .hide-menu {
  color: #008ecb !important;
  font-weight: 700 !important;
}

.sidebar-item.open .content,
.sidebar-item:has(.active-lk) .content {
  max-height: 500px !important; /* 충분한 높이로 변경 */
  opacity: 1 !important;
  visibility: visible !important;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
}

.link-container a {
  display: flex !important;
  padding: 7px 20px !important;
  align-items: center !important;
  color: #767676 !important;
  text-decoration: none !important;
  font-size: 14px;
}
.link-container a::before {
  content: "-" !important;
  margin-right: 8px;
  font-weight: bold;
}
.link-container a:hover, .link-container a.active-lk {
  color: #008ecb !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.topbar {
  position: fixed;
  top: 0;
  left: 250px;
  width: calc(100% - 250px);
  padding: 15px 20px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 2px solid #e5e5ec;
  height: auto !important;
  z-index: 1000;
}
.topbar ul {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.topbar li {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}
.topbar .d-flex {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.top-navbar {
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
  width: 100%;
}

.footer {
  padding: 20px 0;
  text-align: center;
  background-color: #fff;
  border-top: 1px solid #e5e5ec;
}
.footer p {
  margin: 0;
  color: #505050;
  font-size: 14px;
}

.btn-red {
  background-color: #fe403f;
  color: #fff;
  border-radius: 5px;
  padding: 10px 16px;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}
.btn-red:hover {
  background-color: #c82333;
  color: #fff;
  text-decoration: none;
}
.btn-red:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.btn-default {
  background-color: #008ecb;
  color: #fff;
  border-radius: 8px;
  padding: 12px 24px;
  text-decoration: none;
  display: inline-block;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}
.btn-default:hover:not(:disabled) {
  background-color: #008ecb;
  color: #fff;
  text-decoration: none;
}
.btn-default:focus:not(:disabled) {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.btn-default:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
  opacity: 0.7;
}
.btn-default.btn-full {
  width: 100%;
}

/* scss/layouts/btn.scss */
.btn-danger {
  background-color: #0C8800 !important;
  border-color: #0C8800 !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  border-radius: 5px !important;
  transition: all 0.2s ease;
}
.btn-danger:hover {
  background-color: #086100 !important;
  border-color: #086100 !important;
}

/* 탭 버튼 커스텀 스타일 */
.tab {
  /* [공통 스타일] */
  display: flex !important;
  padding: 10px 16px !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  /* 기본 보더와 배경 (비활성화 기준) */
  border: 1px solid #E5E5EC !important;
  background: #F7F7F7 !important;
  color: #767676;
  /* ⭐ 핵심: 기본적으로 모든 곡률을 0으로 초기화 */
  border-radius: 0 !important;
  /* ⭐ 맨 왼쪽 탭만 좌상단 곡률 */
}
.tab:first-child {
  border-radius: 8px 0 0 0 !important;
}
.tab {
  /* ⭐ 맨 오른쪽 탭만 우상단 곡률 */
}
.tab:last-child {
  border-radius: 0 8px 0 0 !important;
}
.tab {
  /* [활성화 상태] 색상만 변경 */
}
.tab.active {
  background: #008ECB !important;
  color: #ffffff !important;
  font-weight: 600;
  /* 보더 색상도 파란색 계열로 맞추고 싶다면 아래 추가 */
  border-color: #008ECB !important;
}
.tab {
  /* 버튼 기본 스타일 제거 */
  outline: none;
}
.tab:focus {
  outline: none;
}

/* 기존 btn-red는 건드리지 말고, 아래에 새로 추가하세요 */
.btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background-color: #008ECB !important; /* 똑순이님이 좋아하는 그 파란색 */
  color: #fff !important;
  border-radius: 4px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}
.btn-blue:hover {
  background-color: #0077aa !important; /* 마우스 올렸을 때 조금 더 진한 파랑 */
  color: #fff !important;
}

/* 테두리 스타일 공통 버튼 */
.btn-outline {
  display: inline-flex;
  height: 41px;
  padding: 0 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid #444 !important; /* 검정 테두리 */
  background: #FFF !important; /* 흰색 배경 */
  color: #444 !important; /* 글자색 */
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box; /* 테두리 때문에 크기 안 변하게 고정 */
}
.btn-outline:hover {
  background: #f8f8f8 !important; /* 호버 시 아주 살짝 밝은 회색 */
  color: #000 !important; /* 글자색 더 진하게 */
}
.btn-outline:active {
  background: #f0f0f0 !important; /* 클릭 시 조금 더 어둡게 */
}

.auth-input-label, .textarea-label, .input-number, .select-label, .input-label {
  background-color: #fbf9f9;
  border-radius: 10px;
  padding: 12px 16px;
  border: none;
  width: 100%;
  min-width: 0;
  font-size: 14px;
  color: #444444;
  outline: none;
  transition: background-color 0.2s, border 0.2s;
  box-sizing: border-box;
}
.auth-input-label.flex-grow-1, .flex-grow-1.textarea-label, .flex-grow-1.input-number, .flex-grow-1.select-label, .flex-grow-1.input-label {
  width: auto;
  flex: 1 1 0%;
}
.auth-input-label::placeholder, .textarea-label::placeholder, .input-number::placeholder, .select-label::placeholder, .input-label::placeholder {
  color: #a7a7a7;
}
.auth-input-label:focus, .textarea-label:focus, .input-number:focus, .select-label:focus, .input-label:focus {
  background-color: #fbf9f9;
}
.auth-input-label.select, .select.textarea-label, .select.input-number, .select-label, .select.input-label {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23444' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
.auth-input-label:disabled, .textarea-label:disabled, .input-number:disabled, .select-label:disabled, .input-label:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}
.auth-input-label.error, .error.textarea-label, .error.input-number, .error.select-label, .error.input-label {
  border: 2px solid #dc3545;
}
.auth-input-label.error:focus, .error.textarea-label:focus, .error.input-number:focus, .error.select-label:focus, .error.input-label:focus {
  border: 2px solid #dc3545;
  background-color: #fff5f5;
}
.auth-input-label.w-auto, .w-auto.textarea-label, .w-auto.input-number, .w-auto.select-label, .w-auto.input-label {
  width: auto;
}
.auth-input-label.w-10, .w-10.textarea-label, .w-10.input-number, .w-10.select-label, .w-10.input-label {
  width: 10%;
}
.auth-input-label.w-20, .w-20.textarea-label, .w-20.input-number, .w-20.select-label, .w-20.input-label {
  width: 20%;
}
.auth-input-label.w-25, .w-25.textarea-label, .w-25.input-number, .w-25.select-label, .w-25.input-label {
  width: 25%;
}
.auth-input-label.w-30, .w-30.textarea-label, .w-30.input-number, .w-30.select-label, .w-30.input-label {
  width: 30%;
}
.auth-input-label.w-50, .w-50.textarea-label, .w-50.input-number, .w-50.select-label, .w-50.input-label {
  width: 50%;
}
.auth-input-label.w-75, .w-75.textarea-label, .w-75.input-number, .w-75.select-label, .w-75.input-label {
  width: 75%;
}
.auth-input-label.w-full, .w-full.textarea-label, .w-full.input-number, .w-full.select-label, .w-full.input-label {
  width: 100%;
}
.auth-input-label.w-sm, .w-sm.textarea-label, .w-sm.input-number, .w-sm.select-label, .w-sm.input-label {
  max-width: 200px;
}
.auth-input-label.w-md, .w-md.textarea-label, .w-md.input-number, .w-md.select-label, .w-md.input-label {
  max-width: 400px;
}
.auth-input-label.w-lg, .w-lg.textarea-label, .w-lg.input-number, .w-lg.select-label, .w-lg.input-label {
  max-width: 600px;
}
.auth-input-label.w-xl, .w-xl.textarea-label, .w-xl.input-number, .w-xl.select-label, .w-xl.input-label {
  max-width: 800px;
}

.auth-input-message {
  margin-top: 6px;
  font-size: 13px;
  padding-left: 4px;
  display: block;
}
.auth-input-message.error {
  color: #dc3545;
}
.auth-input-message.success {
  color: #28a745;
}
.auth-input-message.info {
  color: #17a2b8;
}
.auth-input-message.help {
  color: #666;
}

.form-group {
  margin-bottom: 24px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.form-group label.required::after {
  content: "*";
  color: #dc3545;
  margin-left: 4px;
}

.input-search-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.input-search-group .input-label {
  flex: 1;
}
.input-search-group .search-btn {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.input-search-group .search-btn:hover {
  background-color: #0056b3;
}

.input-date-group {
  position: relative;
  display: inline-block;
}
.input-date-group .input-label {
  padding-right: 40px;
}
.input-date-group .date-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  cursor: pointer;
}

.input-date-range-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-date-range-group .input-date-group {
  flex: 1;
}
.input-date-range-group .date-separator {
  font-size: 16px;
  color: #666;
  margin: 0 4px;
}

.file-upload-group .file-upload-area {
  border: 2px dashed #dee2e6;
  border-radius: 4px;
  padding: 24px;
  text-align: center;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 12px;
}
.file-upload-group .file-upload-area:hover {
  border-color: #007bff;
  background-color: #f0f7ff;
}
.file-upload-group .file-upload-area.has-image {
  padding: 0;
  border: none;
  background: transparent;
}
.file-upload-group .file-upload-area.has-image img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
}
.file-upload-group .file-upload-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.file-upload-group .file-upload-controls .file-register-text {
  font-size: 14px;
  color: #666;
}
.file-upload-group .file-upload-controls .file-search-btn {
  padding: 6px 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.file-upload-group .file-upload-controls .file-search-btn:hover {
  background-color: #0056b3;
}
.file-upload-group .file-list .file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}
.file-upload-group .file-list .file-item .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-upload-group .file-list .file-item .file-remove {
  margin-left: 8px;
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.file-upload-group .file-list .file-item .file-remove:hover {
  color: #c82333;
}

.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.radio-group .radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.radio-group .radio-item input[type=radio] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #007bff;
}
.radio-group .radio-item label {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  color: #333;
}

.checkbox-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.checkbox-group .checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.checkbox-group .checkbox-item input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #007bff;
}
.checkbox-group .checkbox-item label {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  color: #333;
}

.textarea-label {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.textarea-label::placeholder {
  color: #a7a7a7;
}

input[type=file] {
  display: none;
}

.white-box .table-responsive,
.white-box table.table {
  table-layout: auto !important;
  width: 100% !important;
}
.white-box table.table thead th,
.white-box table.table tbody td {
  text-align: left !important;
  padding-left: 30px !important;
  padding-right: 20px !important;
  vertical-align: middle !important;
  min-width: 250px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.white-box table.table thead th:first-child,
.white-box table.table tbody td:first-child {
  min-width: 60px !important;
  width: 60px !important;
  padding-left: 0 !important;
  text-align: center !important;
}

/*# sourceMappingURL=style.css.map */