@charset "UTF-8";

:root {
  --tblr-custom-color1: #43c1b8;
  --tblr-custom-color2: #206bc4;
  --tblr-custom-color3: #206bc4;
  --tblr-custom-color4: #206bc4;
  --tblr-custom-color5: #206bc4;
  --tblr-font-sans-serif: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --tblr-font-monospace: null, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --tblr-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --tblr-font-weight-medium: 600;
  --tblr-primary-lt: #e6eef6;
  --tblr-shadow-button: unset;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --tblr-gutter-x: 3rem;
  --tblr-gutter-y: 3rem;
}

.nav-link {
  --tblr-nav-link-padding-y: 0.5rem;
  --tblr-nav-link-padding-x: 0.75rem;
}

.list-group {
  --tblr-list-group-item-padding-x: 0.75rem;
  --tblr-list-group-item-padding-y: 1rem;
}

.list-group-item-action:focus,
.list-group-item-action:hover {
  z-index: 1;
  color: inherit;
  text-decoration: none;
  background-color: #f4f6fa;
}

.card {
  --tblr-card-spacer-x: 1rem;
  --tblr-card-cap-padding-y: .75rem;
  --tblr-card-cap-padding-x: 1rem;
}

.card-footer {
  --tblr-card-cap-bg: #ffffff;
  --tblr-card-border-width: 0px;
}

.card-table tr td:first-child,
.card-table tr th:first-child {
  border-left: 1px var(--tblr-border-style) rgba(97, 104, 118, .16) !important;
}

.card-table tr td:last-child,
.card-table tr th:last-child {
  padding-left: 0;
  padding-right: 0;
  border-right: 1px var(--tblr-border-style) rgba(97, 104, 118, .16) !important;
}

.card-table tr th {
  line-height: 2;
}

.card-dropdown {
  line-height: 1;
  color: #656d77;
}

.btn {
  --tblr-btn-font-weight: 500;
}

.toast {
  --tblr-toast-spacing: 1rem;
}

.sticky-top {
  z-index: 999;
}

/* 폼라벨 단어 기준 줄바꿈 */
.form-group>.form-label {
  word-break: keep-all;
  font-weight: 500;
}

/* small css */
.small,
small {
  font-size: 92.308%;
}

.form-hint {
  font-size: 92.308% !important;
}

/* form 추가 css */
.form-control,
.form-select {
  border-radius: 0;
  font-size: 0.8125rem;
}

.input-group-text {
  border-radius: 0;
}

.form-control[readonly] {
  background-color: var(--tblr-gray-100);
  opacity: 0.8;
}

.form-selectgroup-label {
  font-size: 0.8125rem;
}

/* 인풋 + 텍스트 CSS */
.custom-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.custom-input-group>.form-control,
.custom-input-group>.form-select {
  position: relative;
  flex: 1 1 auto;
  margin-right: 10px;
  min-width: 0;
}

.custom-input-group>.form-control:focus,
.custom-input-group>.form-select:focus {
  z-index: 3;
}

.custom-input-group .btn {
  position: relative;
  z-index: 2;
}

.custom-input-group .btn:focus {
  z-index: 3;
}

.custom-input-group-text {
  display: flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4285714;
  color: #656d77;
}

.input-group-lg>.form-control,
.input-group-lg>.form-select,
.input-group-lg>.input-group-text,
.input-group-lg>.btn {
  padding: 0.5rem 1.5rem;
  font-size: 1.25rem;
  border-radius: 8px;
}

.input-group-sm>.form-control,
.input-group-sm>.form-select,
.input-group-sm>.input-group-text,
.input-group-sm>.btn {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 2px;
}

.input-group-lg>.form-select,
.input-group-sm>.form-select {
  padding-right: 3rem;
}

.custom-input-group>.custom-input-group-text:first-child {
  padding-left: 0;
}

.custom-input-group>.custom-input-group-text:last-child {
  padding-left: 0;
}

/* input-round */
.input-group-text.input-round {}

.input-group-text.input-round:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group-text.input-round:not(:first-child) {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}

.custom-input-price {
  min-width: 110px;
  max-width: 110px;
}

.custom-input-percent {
  min-width: 70px;
  max-width: 70px;
}

.custom-input-zipcode {
  min-width: 70px;
  max-width: 70px;
}

.custom-input-zipcode-group {
  width: 160px;
}

/* sub-form-label */
.sub-form-label {
  font-size: .775rem;
  color: #888;
  margin-bottom: .4rem;
}

/* list-custom-bullets */
.list-custom-bullets {
  position: relative;
  padding-left: 10px;
}

.list-custom-bullets:before {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - .09rem);
  left: 0;
  width: .2rem;
  height: .2rem;
  margin: 0;
  padding: 0;
  background: var(--tblr-secondary);
  border-radius: 10px;
}

/* form-input-sub-text */
.form-input-sub-text {
  display: inline-block;
  color: var(--tblr-secondary);
}

/* custom-tabs */
.custom-tabs {
  background: #fff;
  border-radius: 4px 4px 0 0;
  box-shadow: rgb(35 46 60 / 4%) 0 2px 4px 0;
  /* border: 1px solid rgba(101, 109, 119, .16); */
  border-bottom: 2px solid #333;
}

.custom-tabs .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 0;
}

.custom-tabs .nav-tabs .nav-item {
  flex: 1 1 auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  transition: 0.4s;
}

.custom-tabs .nav-tabs .nav-item:hover {
  border: 0;
}

.custom-tabs .nav-tabs .nav-item .nav-link {
  display: block;
  margin-bottom: 0;
  border: 0;
  border-right: 1px solid #e7eaef;
  border-bottom: 1px solid #e7eaef;
  border-radius: 0;
  padding: .75rem .75rem;
  text-align: center;
  transition: 0.4s;
}

.custom-tabs .nav-tabs .nav-item .nav-link:hover {
  color: #333;
  border-right: 1px solid #e7eaef;
  border-bottom: 1px solid #e7eaef;
  background: #eee;
}

.custom-tabs .nav-tabs .nav-item .nav-link.active:hover {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--tblr-dark);
  background: var(--tblr-dark);
  color: #fff;
}

.custom-tabs .nav-tabs .nav-link.active {
  margin: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  border-bottom: 1px solid var(--tblr-dark);
  background: var(--tblr-dark);
}

.custom-tabs .nav-tabs .nav-item:first-child .nav-link.active {
  border-radius: 4px 0 0 0;
}

.custom-tabs .nav-tabs .nav-item:last-child .nav-link:hover,
.custom-tabs .nav-tabs .nav-item:last-child .nav-link:focus {
  border-radius: 0;
}

.custom-tabs .nav-tabs .nav-item:last-child .nav-link.active {
  border-radius: 0 4px 0 0;
}

@media(max-width:600px) {
  .custom-tabs .nav-tabs .nav-item {
    flex: 1 1 50%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    transition: 0.4s;
  }
}

/* pagination custom */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* 핵심 */
  row-gap: 0.25rem;
  /* 줄바꿈 시 아래 공간 */
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  color: #656d77;
  background-color: transparent;
  border: 0 solid #e7eaef;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}

.page-link:hover {
  z-index: 2;
  color: #1a569d;
  text-decoration: none;
  background-color: #f0f2f6;
  border-color: #e7eaef;
}

.page-link:focus {
  z-index: 3;
  color: #1a569d;
  background-color: #f0f2f6;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25);
}

.page-item {
  line-height: 1.6;
}

.page-item .icon {
  --tblr-icon-size: 1.4rem;
}

.page-item:not(:first-child) .page-link {
  margin-left: 0;
}

.page-item.active .page-link {
  z-index: 3;
  color: #ffffff;
  background-color: #206bc4;
  border-color: #206bc4;
}

.page-item.disabled .page-link {
  color: rgba(101, 109, 119, 0.5);
  pointer-events: none;
  background-color: transparent;
  border-color: #e7eaef;
}

.page-link {
  padding: 0.25rem 0.25rem;
}

.page-item:first-child .page-link {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.page-item:last-child .page-link {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.09375rem;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.765625rem;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

/* column 추가 css */
.col-1-5 {
  flex: 0 0 auto;
  width: 12.4999999%;
}

.col-2-5 {
  flex: 0 0 auto;
  width: 20.8333333%;
}

.col-3-5 {
  flex: 0 0 auto;
  width: 29.1666666%;
}

.col-4-5 {
  flex: 0 0 auto;
  width: 37.4999999%;
}

.col-5-5 {
  flex: 0 0 auto;
  width: 45.8333333%;
}

.col-6-5 {
  flex: 0 0 auto;
  width: 54.1666666%;
}

.col-7-5 {
  flex: 0 0 auto;
  width: 62.4999999%;
}

.col-8-5 {
  flex: 0 0 auto;
  width: 70.8333333%;
}

.col-9-5 {
  flex: 0 0 auto;
  width: 79.1666666%;
}

.col-10-5 {
  flex: 0 0 auto;
  width: 87.4999999%;
}

.col-11-5 {
  flex: 0 0 auto;
  width: 95.8333333%;
}

@media (min-width: 576px) {

  .col-sm-1-5 {
    flex: 0 0 auto;
    width: 12.4999999%;
  }

  .col-sm-2-5 {
    flex: 0 0 auto;
    width: 20.8333333%;
  }

  .col-sm-3-5 {
    flex: 0 0 auto;
    width: 29.1666666%;
  }

  .col-sm-4-5 {
    flex: 0 0 auto;
    width: 37.4999999%;
  }

  .col-sm-5-5 {
    flex: 0 0 auto;
    width: 45.8333333%;
  }

  .col-sm-6-5 {
    flex: 0 0 auto;
    width: 54.1666666%;
  }

  .col-sm-7-5 {
    flex: 0 0 auto;
    width: 62.4999999%;
  }

  .col-sm-8-5 {
    flex: 0 0 auto;
    width: 70.8333333%;
  }

  .col-sm-9-5 {
    flex: 0 0 auto;
    width: 79.1666666%;
  }

  .col-sm-10-5 {
    flex: 0 0 auto;
    width: 87.4999999%;
  }

  .col-sm-11-5 {
    flex: 0 0 auto;
    width: 95.8333333%;
  }

}

@media (min-width: 768px) {

  .col-md-1-5 {
    flex: 0 0 auto;
    width: 12.4999999%;
  }

  .col-md-2-5 {
    flex: 0 0 auto;
    width: 20.8333333%;
  }

  .col-md-3-5 {
    flex: 0 0 auto;
    width: 29.1666666%;
  }

  .col-md-4-5 {
    flex: 0 0 auto;
    width: 37.4999999%;
  }

  .col-md-5-5 {
    flex: 0 0 auto;
    width: 45.8333333%;
  }

  .col-md-6-5 {
    flex: 0 0 auto;
    width: 54.1666666%;
  }

  .col-md-7-5 {
    flex: 0 0 auto;
    width: 62.4999999%;
  }

  .col-md-8-5 {
    flex: 0 0 auto;
    width: 70.8333333%;
  }

  .col-md-9-5 {
    flex: 0 0 auto;
    width: 79.1666666%;
  }

  .col-md-10-5 {
    flex: 0 0 auto;
    width: 87.4999999%;
  }

  .col-md-11-5 {
    flex: 0 0 auto;
    width: 95.8333333%;
  }

}

@media (min-width: 992px) {

  .col-lg-1-5 {
    flex: 0 0 auto;
    width: 12.4999999%;
  }

  /* 5개 카드가 한 줄을 꽉 채우도록(각 20%) */
  .col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }

  .col-lg-2-5 {
    flex: 0 0 auto;
    width: 20.8333333%;
  }

  .col-lg-3-5 {
    flex: 0 0 auto;
    width: 29.1666666%;
  }

  .col-lg-4-5 {
    flex: 0 0 auto;
    width: 37.4999999%;
  }

  .col-lg-5-5 {
    flex: 0 0 auto;
    width: 45.8333333%;
  }

  .col-lg-6-5 {
    flex: 0 0 auto;
    width: 54.1666666%;
  }

  .col-lg-7-5 {
    flex: 0 0 auto;
    width: 62.4999999%;
  }

  .col-lg-8-5 {
    flex: 0 0 auto;
    width: 70.8333333%;
  }

  .col-lg-9-5 {
    flex: 0 0 auto;
    width: 79.1666666%;
  }

  .col-lg-10-5 {
    flex: 0 0 auto;
    width: 87.4999999%;
  }

  .col-lg-11-5 {
    flex: 0 0 auto;
    width: 95.8333333%;
  }

}

@media (min-width: 1200px) {

  .col-xl-1-5 {
    flex: 0 0 auto;
    width: 12.4999999%;
  }

  .col-xl-2-5 {
    flex: 0 0 auto;
    width: 20.8333333%;
  }

  .col-xl-3-5 {
    flex: 0 0 auto;
    width: 29.1666666%;
  }

  .col-xl-4-5 {
    flex: 0 0 auto;
    width: 37.4999999%;
  }

  .col-xl-5-5 {
    flex: 0 0 auto;
    width: 45.8333333%;
  }

  .col-xl-6-5 {
    flex: 0 0 auto;
    width: 54.1666666%;
  }

  .col-xl-7-5 {
    flex: 0 0 auto;
    width: 62.4999999%;
  }

  .col-xl-8-5 {
    flex: 0 0 auto;
    width: 70.8333333%;
  }

  .col-xl-9-5 {
    flex: 0 0 auto;
    width: 79.1666666%;
  }

  .col-xl-10-5 {
    flex: 0 0 auto;
    width: 87.4999999%;
  }

  .col-xl-11-5 {
    flex: 0 0 auto;
    width: 95.8333333%;
  }

}

@media (min-width: 1400px) {

  .col-xxl-1-5 {
    flex: 0 0 auto;
    width: 12.4999999%;
  }

  .col-xxl-2-5 {
    flex: 0 0 auto;
    width: 20.8333333%;
  }

  .col-xxl-3-5 {
    flex: 0 0 auto;
    width: 29.1666666%;
  }

  .col-xxl-4-5 {
    flex: 0 0 auto;
    width: 37.4999999%;
  }

  .col-xxl-5-5 {
    flex: 0 0 auto;
    width: 45.8333333%;
  }

  .col-xxl-6-5 {
    flex: 0 0 auto;
    width: 54.1666666%;
  }

  .col-xxl-7-5 {
    flex: 0 0 auto;
    width: 62.4999999%;
  }

  .col-xxl-8-5 {
    flex: 0 0 auto;
    width: 70.8333333%;
  }

  .col-xxl-9-5 {
    flex: 0 0 auto;
    width: 79.1666666%;
  }

  .col-xxl-10-5 {
    flex: 0 0 auto;
    width: 87.4999999%;
  }

  .col-xxl-11-5 {
    flex: 0 0 auto;
    width: 95.8333333%;
  }

}

/* 모달 메세지 */
.modal-message {}

.modal-message .modal-content {
  background: #fff;
}

.modal-message .modal-header {
  border-bottom: 0px !important;
}

.modal-message .modal-body {
  margin-left: var(--tblr-modal-padding);
  margin-right: var(--tblr-modal-padding);
  margin-bottom: 1rem;
  padding: var(--tblr-modal-padding);
  background: #f8f8f8;
}

.modal-message .modal-footer {
  justify-content: center;
}

.modal-confirm {}

.modal-confirm .modal-header {
  border-bottom: 0px !important;
}

.modal-confirm .modal-body {
  padding-top: 1rem;
}

.modal-confirm .modal-footer {
  background-color: #fcfdfe;
  border-top: 1px solid #dadfe5;
  padding-top: 0.75rem;
}

.modal-message .btn-close:focus,
.modal-confirm .btn-close:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.modal-message .modal-body,
.modal-confirm .modal-body {
  position: unset !important;
  outline: none !important;
}

.modal-message,
.modal-confirm {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#toast-message {
  z-index: 100050 !important;
}

#toast-message .btn-close {
  filter: brightness(0) invert(1);
}

@media (max-width: 767.98px) {
  #toast-message {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    /* 기존 right 속성 무효화 */

    /* 추가: 모바일에서 최대 너비 설정 */
    max-width: calc(100% - 2rem) !important;
    /* 화면 너비에서 양쪽 마진 1rem씩 제외 (총 2rem) */

    margin: 0px 0 10px !important;
  }
}

/* JSON 데이터 표시 스타일 */
.json-data-wrapper {
  font-size: 0.875rem;
  line-height: 1.5;
}

.json-item {
  margin-bottom: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  overflow: hidden;
}

.json-item:last-child {
  margin-bottom: 0;
}

.json-item-header {
  background-color: #f3f4f6;
  padding: 0.375rem 0.625rem;
  font-weight: 600;
  font-size: 0.8125rem;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.json-item-body {
  padding: 0.5rem 0.625rem;
  background-color: #fff;
}

.json-row {
  padding: 0.25rem 0;
  display: flex;
  align-items: baseline;
}

.json-row:not(:last-child) {
  border-bottom: 1px dashed #e5e7eb;
}

.json-key {
  font-weight: 600;
  color: #6b7280;
  min-width: 100px;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.json-value {
  color: #111827;
  word-break: break-word;
}

/* 변경전 값 스타일 */
.text-muted .json-data-wrapper {
  opacity: 0.8;
}

.text-muted .json-item-header {
  background-color: #f9fafb;
  color: #6b7280;
}

.text-muted .json-value {
  color: #6b7280;
}

/* 변경후 값 스타일 */
.fw-bold .json-item-header {
  background-color: #dbeafe;
  color: #1e40af;
  font-weight: 700;
}

.fw-bold .json-key {
  color: #1e40af;
}

.fw-bold .json-value {
  color: #1e3a8a;
  font-weight: 500;
}

/* 접힌 상태의 card-header 배경색 */
.write-inner-form .card-header.collapsed-header {
  background-color: #e4e4e4;
}

/* 로딩이미지 */
#loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  text-align: center;
}

#loading img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -24px;
  width: 48px;
  height: 10px;
}

/* 로딩 일반 메세지 */
#loading-message {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
}

/* 전체화면 오버레이(대화내용 위젯 등) 위에서도 로딩이 보이게 */
body.app-has-fullscreen-overlay #loading,
body.app-has-fullscreen-overlay #loading-message {
  z-index: 20020;
}

#loading-message .message {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -42px 0 0 -215px;
  width: 430px;
  height: 85px;
}

#loading-message .message .content {
  padding: 10px 0;
}

/* 패널 라운드 제거 */
.mm-panel {
  /* 뷰포트 너비를 넘지 않도록 제한 */
  overflow-x: hidden;
  /* 가로 스크롤 방지 */
  border-radius: 0 !important;
  background: #fff;
  box-shadow: none;
}

/* 각 메뉴 행에 오른쪽 border 대신 분리선만 */
.mm-listitem {
  max-width: 100%;
  /* 부모 너비에 맞게 제한 */
  border-bottom: 1px solid #ececec;
  background: #fff;
}

/* 메뉴 마지막 행 border 제거 */
.mm-listitem:last-child {
  border-bottom: none;
}

/* 메뉴 텍스트와 아이콘 정렬/패딩 */
.mm-listitem__text {
  display: flex;
  align-items: center;
  padding: 13px 20px 13px 18px;
  /* 오른쪽 패딩을 줄여보세요 */

  /* 이 부분이 핵심! 줄바꿈 허용 */
  white-space: normal;
  /* 텍스트가 줄바꿈되도록 변경 */
  word-break: break-word;
  /* 긴 단어도 강제로 줄바꿈 */

  overflow: hidden;
  /* 내용이 넘치면 숨김 (필요시) */
  text-overflow: ellipsis;
  /* 내용이 넘치면 */
  font-size: 15px;
  font-weight: 500;
  color: #232323 !important;
  background: none !important;
  position: relative;
  z-index: 1;
}

.mm-panel.mm-panel_next {
  width: 100%;
  /* 부모 요소의 너비에 맞춤 */
}

/* 아이콘 간격 조정 */
.mm-listitem .nav-link-icon .icon {
  margin-right: 9px;
  color: #a0a4ab;
  width: 21px;
  height: 21px;
  min-width: 21px;
  vertical-align: middle;
}

/* mmenu에서 메뉴 마지막 줄의 border or after 라인 없애기 */
.mm-listitem:last-child::after,
.mm-listitem::after {
  display: none !important;
  border: none !important;
  background: none !important;
  content: none !important;
  height: 0 !important;
}

/* 전체 메뉴 하단에만 라인 추가 */
ul.mm-listview::after {
  content: "";
  display: block;
  height: 1px;
  background: #e4e6ef;
  /* 원하는 색 */
  width: 100%;
  margin: 0;
}

/* 네비게이션 제목 정렬 보정 */
.mm-navbar__title {
  font-size: 19px;
  font-weight: 700;
  color: #888;
  text-align: center;
  letter-spacing: -1px;
  padding: 20px 0 15px 0;
  background: #fff;
  border-bottom: 0px;
}

/* 메뉴 패널 border 정리 */
.mm-navbar {
  border-bottom: 1px solid #ececec;
  background: #fff;
}

#avatar-preview {
  max-width: 100%;
  max-height: 100%;
}

/* 자동완성 전체 박스 */
.ui-autocomplete {
  z-index: 1050 !important;
  max-height: 280px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  padding: 4px 0;
}

.ui-autocomplete .ui-menu-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-autocomplete .ui-menu-item-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;

  color: #212529;
  font-weight: 400;
  background-color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-family: "Pretendard", "Noto Sans KR", sans-serif;
  border-radius: 4px;

  /* 흔들림 방지 핵심 */
  border: 0 solid transparent !important;
  outline: none !important;
  box-shadow: none !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  transition: none !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background-color: #f8f9fa !important;
  color: #000 !important;

  /* 흔들림 방지 반복 */
  border: 0 solid transparent !important;
  padding: 8px 16px !important;
  outline: none !important;
  box-shadow: none !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  transition: none !important;
}

/* 강조 텍스트 */
.ui-autocomplete .ui-autocomplete-highlight {
  background-color: #fff3cd;
  color: #000;
  font-weight: 500 !important;
  border-radius: 2px;
  padding: 0 2px;
}

/* 인라인 메모 스타일 */
.inline-memo-wrapper {
  position: relative;
}

.inline-memo-wrapper .memo-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.inline-memo-wrapper .memo-text {
  flex: 1;
  word-break: break-word;
  /* 여러 줄 메모(관리 메모 등)의 줄바꿈을 그대로 보여준다 */
  white-space: pre-line;
}

.inline-memo-wrapper .btn-memo-edit {
  opacity: 0;
  transition: opacity 0.2s;
}

.inline-memo-wrapper .memo-edit .btn-memo-info {
  white-space: nowrap;
}

.inline-memo-wrapper:hover .btn-memo-edit {
  opacity: 1;
}

.inline-memo-wrapper .memo-edit .input-group {
  width: 100%;
}

.inline-memo-wrapper .memo-input {
  resize: vertical;
  min-height: 38px;
}

td .inline-memo-wrapper .memo-edit {
  min-width: 300px;
}

/* Dynamic Table 전용 드래그 스타일 */
.table-dynamic-table {
  position: relative;
}

.table-dynamic-table thead th {
  font-size: .875rem;
}

.dynamic-dragging {
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 9999;
  position: relative;
  opacity: 0.95;
}

/* 선택된 상태 (mousedown 한 상태) */
.dynamic-sortable-chosen td {
  background-color: #f8f9fa !important;
  box-sizing: border-box;
}

/* 드래그 커서 */
.dynamic-table .btn-drag,
.dynamic-table .dropdown-toggle {
  cursor: grab !important;
}

.dynamic-table .btn-drag:active,
.dynamic-table .dropdown-toggle:active {
  cursor: grabbing !important;
}

/* Bootstrap 드롭다운 복제본 관련 스타일 */
.dropdown-clone-wrapper {
  pointer-events: auto;
  /* 마우스 이벤트 허용 */
  background: transparent;
  /* background-color: rgba(0, 0, 0, 0.05); /* 디버깅용 */
}

.dropdown-menu-clone {
  position: static !important;
  /* wrapper 내에서 static으로 유지 */
  transform: none !important;
  margin: 0 !important;
  display: block !important;
  pointer-events: auto;
  opacity: 1;
  /* 초기 투명도, JS에서 애니메이션을 제거하고 즉시 표시 */
  box-sizing: border-box;
  /* 패딩, 보더가 너비에 포함되도록 */
}

/* Tabler 드롭다운 스타일 상속 및 오버라이드 */
.dropdown-menu-clone .dropdown-item {
  display: block;
  width: 100%;
  clear: both;
  font-weight: 400;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out;
  padding: 8px 12px;
  /* Tabler 기본 패딩 */
  color: var(--tblr-dropdown-link-color, #212529);
  /* Tabler 변수 사용 */
}

.dropdown-menu-clone .dropdown-item:hover,
.dropdown-menu-clone .dropdown-item:focus {
  color: var(--tblr-dropdown-link-hover-color, #1e2125);
  background-color: var(--tblr-dropdown-link-hover-bg, #e9ecef);
  text-decoration: none;
}

/* 원본 드롭다운이 열려있을 때 토글 버튼 스타일 유지 (Tabler의 show 클래스) */
.table-responsive .dropdown-toggle.show::after {
  transform: rotate(135deg);
}

/* 원본 메뉴 숨김 처리 (중요: 복제본이 보이므로 원본은 숨겨야 함) */
.table-responsive .dropdown-menu.show:not(.suggest-results) {
  display: none !important;
}

/* Autocomplete 드롭다운 스타일 */
.autocomplete-overflow-wrapper {
  pointer-events: auto;
  background: transparent;
}

/* jQuery UI Autocomplete 메뉴가 .autocomplete-overflow-wrapper 내부에… */
.autocomplete-overflow-wrapper .ui-autocomplete {
  position: static !important;
  /* wrapper 내에서 static으로 유지 */
  transform: none !important;
  margin: 0 !important;
  display: block !important;
  /* 항상 block으로 */
  box-sizing: border-box;
  /* 너비 계산 시 패딩, 보더 포함 */
  opacity: 1;
  /* Autocomplete는 즉시 보여져야 하므로 */
  z-index: 10000;
  /* Bootstrap dropdown clone보다 높게 */
  width: 100% !important;
  /* wrapper 너비에 맞춰 100% */
}

/* 즐겨찾기 별 스타일 */
.btn-favorite {
  color: inherit;
}

.favorite-star {
  cursor: pointer;
  color: #dee2e6;
  transition: color 0.2s;
}

.favorite-star.active {
  color: #f59f00;
}

.favorite-star:hover {
  color: #f59f00;
}

/* 공용 표시(공급사 목록) — 즐겨찾기와 같은 자리에 서는 두 번째 표식이라 꺼진 색을 맞춘다 */
.shared-mark-circle {
  cursor: pointer;
  color: #dee2e6;
  transition: color 0.2s;
}

.shared-mark-circle.active {
  color: #d63939;
}

.shared-mark-circle:hover {
  color: #d63939;
}

/* 상품승인 표시(공급사 목록) — 공용 표시와 같은 자리에 서는 세 번째 표식이라 꺼진 색을 맞춘다 */
.goods-approve-thumb {
  cursor: pointer;
  color: #dee2e6;
  transition: color 0.2s;
}

.goods-approve-thumb.active {
  color: #2fb344;
}

.goods-approve-thumb:hover {
  color: #2fb344;
}

/* 임시 비밀번호 배지: 손으로 옮겨 적는 값이라 고정폭으로 보여주고 줄바꿈하지 않는다 */
.seller-temp-password {
  font-family: var(--tblr-font-monospace, monospace);
  white-space: nowrap;
}

/* 연락처 중복 배지: 링크라도 밑줄 없이 배지 모양을 유지하고 숫자가 줄바꿈되지 않게 한다 */
.seller-dup-badge {
  text-decoration: none;
  white-space: nowrap;
}

/* 래퍼를 드롭다운 위치의 기준점으로 설정 */
.ts-wrapper.single {
  position: relative;
}

/* 선택된 항목이 있을 때 내부 input 마진 제거 */
.ts-wrapper.has-items .ts-control>input {
  margin: 0 !important;
}

/* 선택된 항목 중 빈 값("선택안함" 등)은 보이지 않게 처리 */
.ts-control .item[data-value=""] {
  display: none !important;
}

/* JS 즉시마운트와 함께, DOM준비~마운트 사이 순간 노출되는 기본 input 이 흐름을 깨는 것을 막는다 */
.user-select:not(.tomselected) {
  display: block;
  width: 100%;
  min-height: 2.375rem;
  padding: .4375rem 2.25rem .4375rem .75rem;
  font-size: .875rem;
  line-height: 1.4285714286;
  color: var(--tblr-body-color, #1d273b);
  background-color: var(--tblr-bg-forms, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23929dab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 1rem;
  border: 1px solid var(--tblr-border-color, #dadfe5);
  border-radius: var(--tblr-border-radius, 4px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.ts-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ts-control .item {
  margin-right: 4px;
  /* 선택한 항목 사이에 간격 */
}

.ts-control>input {
  flex: 1 1 auto;
  min-width: 60px;
  /* 줄바꿈 방지 */
  border: none;
  outline: none;
}

/* 단일선택 user-select 가 좁은 칸에서 두 줄로 깨지던 문제 */
.user-select:not([multiple])+.ts-wrapper .ts-control {
  flex-wrap: nowrap;
  overflow: hidden;
}

.user-select:not([multiple])+.ts-wrapper .ts-control>input {
  min-width: 0;
}

.user-select:not([multiple])+.ts-wrapper .ts-control .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* readonly 상태일 때 비활성화 스타일 */
.user-select[readonly]+.ts-wrapper .ts-control {
  background-color: var(--tblr-gray-100, #f1f5f9);
  opacity: 0.8;
  cursor: not-allowed;
}

.user-select[readonly]+.ts-wrapper .ts-control input {
  cursor: not-allowed;
}

/* 작은 크기에서 선택된 아이템 스타일 */
.ts-wrapper.form-control-sm .ts-control .item {
  padding: 0;
  margin: 0;
}

/* 드롭다운 기본 위치 및 레이어 설정 */
.ts-wrapper .ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  /* 항목 길이만큼 늘어나되 입력칸보다 좁아지지 않는다. 화면 밖으로는 안 나간다. */
  width: max-content;
  min-width: max(300px, 100%);
  max-width: min(800px, calc(100vw - 2rem));
  z-index: 10;
  /* 래퍼 기준이므로 높은 z-index 불필요 */
}
/* 래퍼에 테두리가 있으면 100% 가 테두리 안쪽이라 입력칸보다 2px 좁다. 테두리 바깥에 맞춘다. */
.ts-wrapper.form-select .ts-dropdown,
.ts-wrapper.form-control .ts-dropdown {
  left: calc(-1 * var(--tblr-border-width, 1px));
  min-width: max(300px, calc(100% + 2 * var(--tblr-border-width, 1px)));
}

/* 드롭다운 내 옵션 텍스트 강제 좌측 정렬 (모달 내 중앙정렬 상속 방지) */
.ts-dropdown .option {
  text-align: left;
}

/* 선택 가능한 항목에만 hover 효과 적용 */
.ts-dropdown .option[data-selectable]:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

/* 선택 불가능한 항목 스타일 */
.ts-dropdown .option:not([data-selectable]) {
  cursor: default;
  opacity: 0.6;
}

.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
  min-height: 30px;
  line-height: 30px;
}

/* 담당자 셀렉트(아바타 + 이름) 세로 가운데 정렬 — 관리자단 tom-select 공통 */
.ts-dropdown .option,
.ts-wrapper .ts-control > .item {
  display: flex;
  align-items: center;
}
.ts-dropdown .option > .dropdown-item-indicator,
.ts-wrapper .ts-control > .item > .dropdown-item-indicator {
  flex: 0 0 auto;
}

/* 드롭다운 내 헤더 스타일 */
.ts-dropdown .dropdown-header {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  /* 클릭 불가 */
}

/* 드롭다운 내 구분선 스타일 */
.ts-dropdown .dropdown-divider {
  height: 1px;
  margin: 0.5rem 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
  border: 0;
}

.ts-dropdown-content {
  max-height: 330px;
}

/* form-control-sm 높이와 간격 통일 */
.ts-wrapper.form-control-sm .ts-control {
  min-height: 30px;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.4285714286;
}

.input-group-sm>.ts-wrapper.has-items .ts-control,
.ts-wrapper.form-control-sm.has-items .ts-control,
.ts-wrapper.form-select-sm.has-items .ts-control {
  padding-bottom: 0.25rem;
}

/* approval.css */

/* 승인 상태 배지 스타일 */
.approval-status-badge {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* 승인 진행률 바 */
.approval-progress {
  height: 8px;
  border-radius: 4px;
}

.approval-progress .progress-bar {
  transition: width 0.3s ease;
}

/* 승인 히스토리 스타일 */
.approval-history-list {
  max-height: 600px;
  overflow-y: auto;
}

.approval-instance {
  margin-bottom: 1rem;
}

.approval-instance-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.approval-step {
  position: relative;
  padding-left: 2rem;
}

.approval-step:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #dee2e6;
}

.approval-step:last-child:before {
  background: linear-gradient(to bottom, #dee2e6 50%, transparent 50%);
}

.approval-step.approved:before {
  background-color: #198754;
}

.approval-step.rejected:before {
  background-color: #dc3545;
}

.approval-step.pending:before {
  background-color: #ffc107;
}

/* 사인 썸네일 스타일 */
.signature-thumb {
  max-width: 80px;
  max-height: 40px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.signature-thumb:hover {
  transform: scale(1.1);
}

/* 승인 단계 아이콘 */
.step-item .icon {
  vertical-align: middle;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .approval-history-list {
    max-height: 400px;
  }

  .approval-step {
    padding-left: 1rem;
  }

  .signature-thumb {
    max-width: 60px;
    max-height: 30px;
  }
}

/* 승인 통계 카드 */
.approval-stats-card {
  border-left: 4px solid;
  transition: all 0.3s ease;
}

.approval-stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.approval-stats-card.pending {
  border-color: #ffc107;
}

.approval-stats-card.approved {
  border-color: #198754;
}

.approval-stats-card.rejected {
  border-color: #dc3545;
}

/* 승인 액션 버튼 그룹 */
.approval-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.approval-actions .btn {
  flex: 1;
  min-width: 120px;
}

@media (max-width: 576px) {
  .approval-actions {
    flex-direction: column;
  }

  .approval-actions .btn {
    width: 100%;
  }
}

/* 퀵 메뉴 스타일 */
header .dropdown-menu-card {
  padding: 0;
  margin-top: .5rem;
}

header .dropdown-menu-card .card {
  margin: 0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border: 0;
}

header .btn-ghost-primary {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease-in-out;
  color: #206bc4;
}

header .btn-ghost-primary:hover {
  background-color: rgba(32, 107, 196, 0.08);
  border: 1px solid rgba(32, 107, 196, 0.2) !important;
  /* ← 여기를 명확히 지정 */
  transform: translateY(-2px);
  color: #1a569e;
}

header .btn-ghost-primary svg {
  color: #206bc4;
}

header .btn-ghost-primary:hover svg {
  color: #1a569e !important;
}

/* 추가된 부분 */
header .btn-ghost-primary:focus,
header .btn-ghost-primary:active {
  background-color: rgba(32, 107, 196, 0.08);
  box-shadow: none !important;
  outline: none;
  color: #1a569e;
}

header .btn-ghost-primary:focus .icon,
header .btn-ghost-primary:active .icon {
  color: #1a569e !important;
}

/* 모바일 대응 */
@media (max-width: 767.98px) {
  header .navbar-nav .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
  }
}

/* 뷰포트 전환 버튼 */
.viewport-toggle {
  opacity: 0.8;
  transition: opacity 0.3s;
}

.viewport-toggle:hover {
  opacity: 1;
}

.viewport-toggle .btn {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* PC 버전 모드(모바일에서 PC보기)의 폭은 CSS 가 아니라 layout/common.html 의 <meta… */

@keyframes scroll-hint {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateX(20px);
    opacity: 0;
  }
}


/* 이미지 미리보기 */
#product-info-preview .img-thumbnail:hover {
  opacity: 0.8;
  border-color: #0054a6;
}

#product-info-preview .btn-remove-image {
  opacity: 0;
  transition: opacity 0.2s;
}

#product-info-preview .position-relative:hover .btn-remove-image {
  opacity: 1;
}

/* 자동 크기 조절 textarea와 input의 높이를 동일하게 */
textarea.auto-resize-textarea {
  /* Tabler input 스타일에 맞춘 기본 속성 */
  min-height: 26px;
  /* input의 최소 높이와 동일하게 */
  line-height: 1.4;
  /* 줄 간격 */
  padding: 0.25rem 0.5rem;
  /* 내부 여백 */
  vertical-align: middle;
  /* 다른 input 요소와 수직 정렬 */

  /* 자동 높이 조절을 위한 핵심 속성 */
  resize: none;
  /* 사용자가 수동으로 크기 조절하는 핸들 숨김 */
  overflow-y: hidden;
  /* 내용이 적을 때 스크롤바 숨김 */
  max-height: 120px;
  /* 최대 높이 제한 (약 4~5줄) */

  /* 부드러운 높이 변화를 위한 transition */
  transition: height 0.1s ease-in-out;
}

/* 발주서 영수증 타입 css */
.receipt-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.receipt-badge.no-proof {
  background-color: #f8f9fa;
  color: #6c757d;
}

.receipt-badge.receipt {
  background-color: #e3f2fd;
  color: #1976d2;
}

.receipt-badge.card-receipt {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.receipt-badge.cash-receipt {
  background-color: #e8f5e9;
  color: #388e3c;
}

.receipt-badge.tax-invoice {
  background-color: #fff3e0;
  color: #f57c00;
}

/* 계정 전환 바 스타일 */
#account-switch-bar {
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
  /* 다른 UI보다 위에 오게 */
  font-size: 0.85rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  visibility: hidden;
  align-items: center;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  /* 모바일에서 너비 확보 */
  max-width: 90vw;
}

#account-switch-bar .d-flex {
  width: 100%;
  align-items: center;
}

#account-switch-bar .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 아바타 크기 고정 */
}

#account-switch-bar .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#account-switch-bar .username-display {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #206bc4;
  color: white;
  height: 38px;
  border-bottom-left-radius: 6px;
  /* 텍스트 줄바꿈 방지 */
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  /* flex 아이템이 축소될 수 있게 */
}

#account-switch-bar .username-display span {
  /* 텍스트 말줄임 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

#account-switch-bar .account-actions {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  /* 버튼들 크기 고정 */
}

#change-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: #206bc4;
  border: none;
  border-radius: 0;
  color: white;
  padding: 0;
  flex-shrink: 0;
}

#change-pin-btn .icon {
  width: 24px;
  height: 24px;
  display: block;
}

#account-switch-bar #restore-previous-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: #206bc4;
  color: white;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

#account-switch-bar #account-switch-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  background-color: #232e3c;
  color: white;
  text-decoration: none;
  border-bottom-right-radius: 6px;
  /* 텍스트 줄바꿈 방지 */
  white-space: nowrap;
  flex-shrink: 0;
}

#account-switch-bar #account-switch-btn:hover {
  background-color: #1a2330;
}

/* 모바일 최적화 (768px 이하) */
@media (max-width: 768px) {
  #account-switch-bar {
    display: none;
    /* font-size: 0.8rem; min-width: 220px; max-width: 95vw; */
  }

  #account-switch-bar .username-display {
    padding: 6px 10px;
  }

  #account-switch-bar .username-display .me-2 {
    margin-right: 6px !important;
  }

  #account-switch-bar .username-display .me-1 {
    margin-right: 4px !important;
  }

  #account-switch-bar #account-switch-btn {
    padding: 0 12px;
  }
}

/* 매우 작은 화면 (480px 이하) */
@media (max-width: 480px) {
  #account-switch-bar {
    font-size: 0.75rem;
    min-width: 260px;
  }

  #account-switch-bar .avatar {
    width: 20px;
    height: 20px;
  }

  #account-switch-bar .username-display {
    padding: 6px 8px;
  }

  #change-pin-btn,
  #account-switch-bar #restore-previous-btn {
    width: 34px;
    height: 34px;
  }

  #change-pin-btn .icon {
    width: 20px;
    height: 20px;
  }

  #account-switch-bar #account-switch-btn {
    padding: 0 10px;
    height: 34px;
  }

  #account-switch-bar .username-display {
    height: 34px;
  }
}

/* 극소형 화면 (360px 이하) */
@media (max-width: 360px) {
  #account-switch-bar {
    min-width: 240px;
    font-size: 0.7rem;
  }

  #account-switch-bar .username-display {
    padding: 6px;
  }

  #account-switch-bar #account-switch-btn {
    padding: 0 8px;
  }
}

/* (백업) app-modal-backdrop 스타일 */
.app-modal-backdrop-backup {
  /* 모바일 주소창 변화에 대응하는 동적 뷰포트 높이 (dvh) 사용 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  /* dvh를 지원하지 않는 브라우저를 위한 대체 속성 */
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.15s linear;
  pointer-events: auto;
}

/* 태블릿 PC 모드(initial-scale=0.5)에서 모달 래퍼(.modal)가 화면 전체를 채우도록 수정 */
.modal {
  /* 기존 Tabler CSS에 top: 0, left: 0 은 이미 있습니다 */

  right: 0 !important;
  bottom: 0 !important;

  width: auto !important;
  height: auto !important;
}

/* 모달이 .show 클래스를 가질 때 (즉, 보일 때) 강제로 화면 전체를 채우도록 함 */
.modal.show {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* app-modal-backdrop 스타일 */
.app-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;

  right: 0;
  bottom: 0;
  width: auto;
  /* 100vw 대신 사용 */
  height: auto;
  /* 100dvh/100vh 대신 사용 */

  /* [기존 코드] width: 100vw; height: 100dvh; height: 100vh; */

  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.15s linear;
  pointer-events: auto;
}

/* show 상태일 때 표시 */
.app-modal-backdrop.show {
  opacity: 0.5;
}

/* 겹치는 Bootstrap 백드롭 숨기기 */
.modal-backdrop:not(.app-modal-backdrop) {
  display: none !important;
}

/* 모달이 열릴 때 body 스크롤 방지 */
body.modal-open {
  /* `overflow: hidden`만으로 스크롤을 막고, 스크롤바가 사라질 때 발생하는 콘텐츠 밀림을 방지합니다 */
  overflow: hidden !important;
  padding-right: var(--bs-gutter-x, 0) !important;
}

/* Flatpickr 하단 단축 버튼 스타일 */
.flatpickr-shortcuts {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

.flatpickr-shortcut-btn {
  padding: 5px 14px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.flatpickr-shortcut-clear {
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
}

.flatpickr-shortcut-clear:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.flatpickr-shortcut-today {
  color: #fff;
  background: #0054a6;
  border: 1px solid #0054a6;
}

.flatpickr-shortcut-today:hover {
  background: #003d7a;
  border-color: #003d7a;
}

/* 커스텀 그라데이션 네비바 스타일 (리뉴얼 버전) Tabler.io UI 기반 - tabler.min.css… */

/* 상단 헤더 - 기본 그라데이션 배경 (모던 인디고) */
.navbar.nav-light {
  background: linear-gradient(135deg,
      #1d4ed8 0%,
      #2563eb 25%,
      #4f46e5 50%,
      #6366f1 75%,
      #0ea5e9 100%) !important;
  background-size: 200% 100% !important;
  animation: gradientShift 18s ease infinite !important;
}

/* 그라데이션 애니메이션 효과 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* #navbar 메뉴 아이콘 */
#navbar.nav-light .nav-link svg,
#navbar.nav-light .nav-link .icon,
#navbar.nav-light .navbar-nav .nav-link svg,
#navbar.nav-light .navbar-nav .nav-link .icon {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 헤더 내 호버 효과 */
.navbar.nav-light .navbar-nav .nav-link:hover svg,
.navbar.nav-light .navbar-nav .nav-link:hover .icon,
.navbar.nav-light .navbar-nav .nav-link:focus svg,
.navbar.nav-light .navbar-nav .nav-link:focus .icon {
  color: #ffffff !important;
}

/* 반응형 처리 */
@media (max-width: 991.98px) {
  .navbar.nav-light .navbar-collapse {
    background: linear-gradient(135deg,
        #1d4ed8 0%,
        #2563eb 25%,
        #4f46e5 50%,
        #6366f1 75%,
        #0ea5e9 100%) !important;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 0.375rem;
  }
}

/* 여기서부터 테마 팔레트 (이름은 그대로, 색만 전면 리뉴얼) */

/* theme-warm - 코랄 × 오렌지 모던 ===================== */
.navbar.nav-light.theme-warm {
  background: linear-gradient(135deg,
      #fb7185 0%,
      #f97373 25%,
      #fb923c 50%,
      #fbbf24 75%,
      #facc15 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-warm,
#navbar.nav-light.theme-warm .navbar,
#navbar.nav-light.theme-warm>.navbar-expand-lg {
  background: #2b1b1c !important;
}

#navbar.nav-light.theme-warm .nav-item.active {
  background: rgba(251, 113, 133, 0.2) !important;
}

/* theme-professional - 슬레이트 블루그레이 ===================== */
.navbar.nav-light.theme-professional {
  background: linear-gradient(135deg,
      #111827 0%,
      #1f2937 25%,
      #374151 50%,
      #4b5563 75%,
      #6b7280 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-professional,
#navbar.nav-light.theme-professional .navbar,
#navbar.nav-light.theme-professional>.navbar-expand-lg {
  background: #020617 !important;
}

#navbar.nav-light.theme-professional .nav-item.active {
  background: rgba(55, 65, 81, 0.2) !important;
}

/* theme-ocean - 딥블루 × 청록 ===================== */
.navbar.nav-light.theme-ocean {
  background: linear-gradient(135deg,
      #0f172a 0%,
      #1e293b 25%,
      #1d4ed8 50%,
      #0ea5e9 75%,
      #22c55e 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-ocean,
#navbar.nav-light.theme-ocean .navbar,
#navbar.nav-light.theme-ocean>.navbar-expand-lg {
  background: #020617 !important;
}

#navbar.nav-light.theme-ocean .nav-item.active {
  background: rgba(37, 99, 235, 0.2) !important;
}

/* theme-forest - 에메랄드 틸그린 ===================== */
.navbar.nav-light.theme-forest {
  background: linear-gradient(135deg,
      #064e3b 0%,
      #047857 25%,
      #10b981 50%,
      #22c55e 75%,
      #a3e635 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-forest,
#navbar.nav-light.theme-forest .navbar,
#navbar.nav-light.theme-forest>.navbar-expand-lg {
  background: #022c22 !important;
}

#navbar.nav-light.theme-forest .nav-item.active {
  background: rgba(16, 185, 129, 0.2) !important;
}

/* theme-sunset - 앰버 × 브라운 소프트 ===================== */
.navbar.nav-light.theme-sunset {
  background: linear-gradient(135deg,
      #f97316 0%,
      #fb923c 25%,
      #fbbf24 50%,
      #facc15 75%,
      #fde68a 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-sunset,
#navbar.nav-light.theme-sunset .navbar,
#navbar.nav-light.theme-sunset>.navbar-expand-lg {
  background: #422006 !important;
}

#navbar.nav-light.theme-sunset .nav-item.active {
  background: rgba(249, 115, 22, 0.2) !important;
}

/* theme-cool - 퍼플그레이 럭셔리 (톤다운) ===================== */
.navbar.nav-light.theme-cool {
  background: linear-gradient(135deg,
      #312e81 0%,
      #4c1d95 25%,
      #6d28d9 50%,
      #7c3aed 75%,
      #a855f7 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-cool,
#navbar.nav-light.theme-cool .navbar,
#navbar.nav-light.theme-cool>.navbar-expand-lg {
  background: #1e1633 !important;
}

#navbar.nav-light.theme-cool .nav-item.active {
  background: rgba(124, 58, 237, 0.2) !important;
}

/* theme-peach - 피치 × 누드톤 ===================== */
.navbar.nav-light.theme-peach {
  background: linear-gradient(135deg,
      #fb9f8a 0%,
      #fcb7a0 25%,
      #fcd5b5 50%,
      #fde1c8 75%,
      #fef3c7 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-peach,
#navbar.nav-light.theme-peach .navbar,
#navbar.nav-light.theme-peach>.navbar-expand-lg {
  background: #3b2823 !important;
}

#navbar.nav-light.theme-peach .nav-item.active {
  background: rgba(252, 183, 160, 0.2) !important;
}

/* theme-rosegold - 로즈골드 모던 ===================== */
.navbar.nav-light.theme-rosegold {
  background: linear-gradient(135deg,
      #be7373 0%,
      #d28b78 25%,
      #e3a98a 50%,
      #f0c29a 75%,
      #f5d5b5 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-rosegold,
#navbar.nav-light.theme-rosegold .navbar,
#navbar.nav-light.theme-rosegold>.navbar-expand-lg {
  background: #3a2524 !important;
}

#navbar.nav-light.theme-rosegold .nav-item.active {
  background: rgba(210, 139, 120, 0.2) !important;
}

/* theme-charcoal - 차콜그레이 미니멀 ===================== */
.navbar.nav-light.theme-charcoal {
  background: linear-gradient(135deg,
      #111827 0%,
      #1f2933 25%,
      #323f4b 50%,
      #3e4c59 75%,
      #52606d 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-charcoal,
#navbar.nav-light.theme-charcoal .navbar,
#navbar.nav-light.theme-charcoal>.navbar-expand-lg {
  background: #0b1016 !important;
}

#navbar.nav-light.theme-charcoal .nav-item.active {
  background: rgba(50, 63, 75, 0.2) !important;
}

/* theme-pinkblue - 파스텔 핑크 × 블루 ===================== */
.navbar.nav-light.theme-pinkblue {
  background: linear-gradient(135deg,
      #f9a8d4 0%,
      #fda4af 20%,
      #f9a8d4 40%,
      #bfdbfe 60%,
      #93c5fd 80%,
      #60a5fa 100%) !important;
  box-shadow: none !important;
}

#navbar.nav-light.theme-pinkblue,
#navbar.nav-light.theme-pinkblue .navbar,
#navbar.nav-light.theme-pinkblue>.navbar-expand-lg {
  background: #312233 !important;
}

#navbar.nav-light.theme-pinkblue .nav-item.active {
  background: rgba(249, 168, 212, 0.2) !important;
}

/* 팝업 헤더 & 글로벌 헤더 - 테마별 배경 연동 */

/* 따뜻한 계열 */
body.theme-warm .popup-modal-dialog .modal-header,
body.theme-warm .global-header {
  background-color: #2b1b1c !important;
}

body.theme-sunset .popup-modal-dialog .modal-header,
body.theme-sunset .global-header {
  background-color: #422006 !important;
}

body.theme-peach .popup-modal-dialog .modal-header,
body.theme-peach .global-header {
  background-color: #3b2823 !important;
}

body.theme-rosegold .popup-modal-dialog .modal-header,
body.theme-rosegold .global-header {
  background-color: #3a2524 !important;
}

body.theme-pinkblue .popup-modal-dialog .modal-header,
body.theme-pinkblue .global-header {
  background-color: #312233 !important;
}

/* 차분한 계열 */
body.theme-professional .popup-modal-dialog .modal-header,
body.theme-professional .global-header {
  background-color: #020617 !important;
}

body.theme-ocean .popup-modal-dialog .modal-header,
body.theme-ocean .global-header {
  background-color: #020617 !important;
}

body.theme-forest .popup-modal-dialog .modal-header,
body.theme-forest .global-header {
  background-color: #022c22 !important;
}

body.theme-charcoal .popup-modal-dialog .modal-header,
body.theme-charcoal .global-header {
  background-color: #0b1016 !important;
}

/* 럭셔리 계열 */
body.theme-cool .popup-modal-dialog .modal-header,
body.theme-cool .global-header {
  background-color: #1e1633 !important;
}

/* ERP 정교함의 핵심 4가지: ③ 활성 대메뉴 = 은은한 반투명 틴트(플랫 브랜드색 금지) ④ Tabler… */

/* 공통: 상단 두 바의 기본 보더/그림자 제거 ── */
body.panel-partner header.navbar,
body.panel-seller header.navbar,
body.panel-partner #navbar .navbar,
body.panel-seller #navbar .navbar {
  box-shadow: none !important;
  border: 0 !important;
}

body.panel-partner header.navbar {                                  /* 헤더 = 딥 네이비 세로계조 + 코너 글로우 */
  background:
    radial-gradient(150% 190% at 92% -45%, rgba(96, 165, 250, 0.20) 0%, rgba(96, 165, 250, 0) 50%),
    linear-gradient(180deg, #1e3563 0%, #16274c 100%) !important;
}
body.panel-partner #navbar,
body.panel-partner #navbar .navbar {                                /* 메뉴바 = 더 깊은 네이비(헤더와 계조) */
  background: #0f1c3f !important;
}
body.panel-partner #navbar-menu .nav-item.active {                  /* 활성 = 은은한 블루 틴트 */
  background: rgba(59, 130, 246, 0.22) !important;
}
body.panel-partner #navbar-submenu .list-group-item-action.active { /* 서브네비 활성 */
  background-color: #eaf1ff !important;
  color: #1d4ed8 !important;
}

/* 공급사 = 화이트 로고라인 + 미드나잇 레드 메뉴바(엣지) 로고는 원본이 다크라… */

/* [헤더 = 화이트 로고라인] */
body.panel-seller header.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #ececf1 !important;
}
body.panel-seller header.navbar .navbar-brand-image { filter: none !important; }        /* 로고 원본(다크) 노출 */
body.panel-seller header.navbar .navbar-toggler { color: #3f3f46 !important; }
body.panel-seller header.navbar .navbar-toggler-icon {                                  /* 햄버거 = 다크 스트로크 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f3f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='4' y1='6' x2='20' y2='6'/%3e%3cline x1='4' y1='12' x2='20' y2='12'/%3e%3cline x1='4' y1='18' x2='20' y2='18'/%3e%3c/svg%3e") !important;
}
body.panel-seller header.navbar .navbar-brand .badge {                                  /* SCM 뱃지 = 레드 칩 */
  background: #dc2626 !important; color: #fff !important;
}
body.panel-seller header.navbar #global-search-input {                                  /* 검색창 = 라이트 */
  background: #f4f4f5 !important; border-color: #e4e4e7 !important; color: #18181b !important;
}
body.panel-seller header.navbar #global-search-input::placeholder { color: #9aa0ac !important; }
body.panel-seller header.navbar .global-search-box .global-search-ico { color: #9aa0ac !important; }

/* [메뉴바 = 미드나잇 인디고블랙 + 바이올렛 강조] */
body.panel-seller #navbar,
body.panel-seller #navbar .navbar { background: #0f0d16 !important; }
body.panel-seller #navbar-menu .nav-item.active {                                       /* 활성 = 레드 틴트 + 하단 언더라인 */
  background: rgba(220, 38, 38, 0.20) !important;
  box-shadow: inset 0 -2px 0 0 #dc2626 !important;
}
body.panel-seller #navbar-submenu .list-group-item-action.active {
  background-color: #fdecec !important;
  color: #dc2626 !important;
}

/* 공통: 아이콘/링크 흰색 가독성 + 호버/활성 강조 ── */
body.panel-partner header.navbar .nav-link, body.panel-partner #navbar .nav-link,
body.panel-seller header.navbar .nav-link, body.panel-seller #navbar .nav-link {
  color: rgba(255, 255, 255, 0.86) !important;
}
body.panel-partner #navbar .nav-link:hover, body.panel-partner #navbar .nav-item.active .nav-link,
body.panel-seller #navbar .nav-link:hover, body.panel-seller #navbar .nav-item.active .nav-link {
  color: #fff !important;
}
body.panel-partner header.navbar .nav-link svg, body.panel-partner header.navbar .nav-link .icon,
body.panel-partner #navbar .nav-link svg, body.panel-partner #navbar .nav-link .icon,
body.panel-seller header.navbar .nav-link svg, body.panel-seller header.navbar .nav-link .icon,
body.panel-seller #navbar .nav-link svg, body.panel-seller #navbar .nav-link .icon {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.panel-seller header.navbar .nav-link,
body.panel-seller header.navbar .nav-link svg,
body.panel-seller header.navbar .nav-link .icon { color: #3f3f46 !important; }
body.panel-seller header.navbar .nav-link:hover { color: #18181b !important; }
body.panel-seller header.navbar .nav-link > div { color: #1e2125 !important; }

/* 모바일(접힘 메뉴) 배경 = 딥다크 톤 ── */
@media (max-width: 991.98px) {
  body.panel-partner .navbar-collapse { background: #0f1c3f !important; margin: 0.5rem -1rem 0; padding: 1rem; border-radius: 0.5rem; }
  body.panel-seller  .navbar-collapse { background: #0f0d16 !important; margin: 0.5rem -1rem 0; padding: 1rem; border-radius: 0.5rem; }
}

/* 배경: Quill 이 저장하는 클래스(ql-align-*, ql-size-*, ql-indent-N, 리스트… */

/* rich-content:start */
/* (메일 클라이언트는 <style> 블록을 제거하므로 인라인이 아니면 서식이 죽는다) */
.rich-content {
	box-sizing: border-box;
	line-height: 1.42;
	text-align: left;
	white-space: normal;
	word-wrap: break-word;
	tab-size: 4;
	-moz-tab-size: 4;
		/* 본문 14px = 에디터 .ql-container 기준값 */
	font-size: 14px;
	font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', sans-serif;
}

/* 블록 여백/카운터 초기화 (snow .ql-editor 와 동일) */
.rich-content p,
.rich-content ol,
.rich-content ul,
.rich-content pre,
.rich-content blockquote,
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4,
.rich-content h5,
.rich-content h6 {
	margin: 0;
	padding: 0;
	counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}

/* 위 블록들과 달리 margin:0 대상이 아니다(선에 글자가 달라붙으면 안 됨) */
.rich-content hr {
	margin: 1.25rem 0;
}

.rich-content p,
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content h4, .rich-content h5, .rich-content h6,
.rich-content li,
.rich-content blockquote { white-space: pre-wrap; }

/* 본문 줄간격 = 에디터(.ql-editor 1.42 단위없는 배수)와 동일 */
.rich-content p, .rich-content li, .rich-content blockquote { line-height: 1.8; }

/* 헤딩 글자크기 = 에디터 initialize.css 와 동일(px 못박음) ── */
.rich-content h1 { font-size: 32px; }
.rich-content h2 { font-size: 27px; }
.rich-content h3 { font-size: 21px; }
.rich-content h4 { font-size: 17px; }
.rich-content h5 { font-size: 16px; }
.rich-content h6 { font-size: 14px; }
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content h4, .rich-content h5, .rich-content h6 { font-weight: 500; line-height: 1.2; margin: 0.5em 0; }

/* 내용 글자크기(size 피커) = 에디터 initialize.css 와 동일 ── */
.rich-content .ql-size-small { font-size: 12px; }
.rich-content .ql-size-large { font-size: 18px; }
.rich-content .ql-size-huge  { font-size: 24px; }

/* 리스트(ordered/bullet) + 중첩 카운터 (snow 원본 그대로) ── */
.rich-content ol,
.rich-content ul {
	padding-left: 1.5em;
	list-style-type: none;
}
.rich-content ol > li,
.rich-content ul > li {
	list-style-type: none;
}
.rich-content ul > li::before {
	content: '\2022';
}
.rich-content li::before {
	display: inline-block;
	white-space: nowrap;
	width: 1.2em;
}
.rich-content li:not(.ql-direction-rtl)::before {
	margin-left: -1.5em;
	margin-right: 0.3em;
	text-align: right;
}
.rich-content ol li:not(.ql-direction-rtl),
.rich-content ul li:not(.ql-direction-rtl) {
	padding-left: 1.5em;
}
.rich-content ol li {
	counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
	counter-increment: list-0;
}
.rich-content ol li:before {
	content: counter(list-0, decimal) '. ';
}
.rich-content ol li.ql-indent-1 { counter-increment: list-1; }
.rich-content ol li.ql-indent-1:before { content: counter(list-1, lower-alpha) '. '; }
.rich-content ol li.ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-2 { counter-increment: list-2; }
.rich-content ol li.ql-indent-2:before { content: counter(list-2, lower-roman) '. '; }
.rich-content ol li.ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-3 { counter-increment: list-3; }
.rich-content ol li.ql-indent-3:before { content: counter(list-3, decimal) '. '; }
.rich-content ol li.ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-4 { counter-increment: list-4; }
.rich-content ol li.ql-indent-4:before { content: counter(list-4, lower-alpha) '. '; }
.rich-content ol li.ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-5 { counter-increment: list-5; }
.rich-content ol li.ql-indent-5:before { content: counter(list-5, lower-roman) '. '; }
.rich-content ol li.ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; }
.rich-content ol li.ql-indent-6 { counter-increment: list-6; }
.rich-content ol li.ql-indent-6:before { content: counter(list-6, decimal) '. '; }
.rich-content ol li.ql-indent-6 { counter-reset: list-7 list-8 list-9; }
.rich-content ol li.ql-indent-7 { counter-increment: list-7; }
.rich-content ol li.ql-indent-7:before { content: counter(list-7, lower-alpha) '. '; }
.rich-content ol li.ql-indent-7 { counter-reset: list-8 list-9; }
.rich-content ol li.ql-indent-8 { counter-increment: list-8; }
.rich-content ol li.ql-indent-8:before { content: counter(list-8, lower-roman) '. '; }
.rich-content ol li.ql-indent-8 { counter-reset: list-9; }
.rich-content ol li.ql-indent-9 { counter-increment: list-9; }
.rich-content ol li.ql-indent-9:before { content: counter(list-9, decimal) '. '; }

/* 인덴트로만 표현하는데, 순서 카운터가 그룹을 넘어 이어져 부정확(예: 1,a,b,2,c) */
.rich-content ol li.ql-indent-1:before,
.rich-content ol li.ql-indent-2:before,
.rich-content ol li.ql-indent-3:before,
.rich-content ol li.ql-indent-4:before,
.rich-content ol li.ql-indent-5:before,
.rich-content ol li.ql-indent-6:before,
.rich-content ol li.ql-indent-7:before,
.rich-content ol li.ql-indent-8:before,
.rich-content ol li.ql-indent-9:before { content: '\2022'; }

.rich-content .ql-indent-1:not(.ql-direction-rtl)    { padding-left: 1.5em; }
.rich-content li.ql-indent-1:not(.ql-direction-rtl)  { padding-left: 3em; }
.rich-content .ql-indent-2:not(.ql-direction-rtl)    { padding-left: 3em; }
.rich-content li.ql-indent-2:not(.ql-direction-rtl)  { padding-left: 4.5em; }
.rich-content .ql-indent-3:not(.ql-direction-rtl)    { padding-left: 4.5em; }
.rich-content li.ql-indent-3:not(.ql-direction-rtl)  { padding-left: 6em; }
.rich-content .ql-indent-4:not(.ql-direction-rtl)    { padding-left: 6em; }
.rich-content li.ql-indent-4:not(.ql-direction-rtl)  { padding-left: 7.5em; }
.rich-content .ql-indent-5:not(.ql-direction-rtl)    { padding-left: 7.5em; }
.rich-content li.ql-indent-5:not(.ql-direction-rtl)  { padding-left: 9em; }
.rich-content .ql-indent-6:not(.ql-direction-rtl)    { padding-left: 9em; }
.rich-content li.ql-indent-6:not(.ql-direction-rtl)  { padding-left: 10.5em; }
.rich-content .ql-indent-7:not(.ql-direction-rtl)    { padding-left: 10.5em; }
.rich-content li.ql-indent-7:not(.ql-direction-rtl)  { padding-left: 12em; }
.rich-content .ql-indent-8:not(.ql-direction-rtl)    { padding-left: 12em; }
.rich-content li.ql-indent-8:not(.ql-direction-rtl)  { padding-left: 13.5em; }
.rich-content .ql-indent-9:not(.ql-direction-rtl)    { padding-left: 13.5em; }
.rich-content li.ql-indent-9:not(.ql-direction-rtl)  { padding-left: 15em; }

/* 정렬 ── */
.rich-content .ql-align-center  { text-align: center; }
.rich-content .ql-align-justify { text-align: justify; }
.rich-content .ql-align-right   { text-align: right; }
.rich-content .ql-direction-rtl { direction: rtl; text-align: inherit; }

/* 글자색/배경색 (팔레트) ── */
.rich-content .ql-color-white  { color: #fff; }
.rich-content .ql-color-red    { color: #e60000; }
.rich-content .ql-color-orange { color: #f90; }
.rich-content .ql-color-yellow { color: #ff0; }
.rich-content .ql-color-green  { color: #008a00; }
.rich-content .ql-color-blue   { color: #06c; }
.rich-content .ql-color-purple { color: #93f; }
.rich-content .ql-bg-black  { background-color: #000; }
.rich-content .ql-bg-red    { background-color: #e60000; }
.rich-content .ql-bg-orange { background-color: #f90; }
.rich-content .ql-bg-yellow { background-color: #ff0; }
.rich-content .ql-bg-green  { background-color: #008a00; }
.rich-content .ql-bg-blue   { background-color: #06c; }
.rich-content .ql-bg-purple { background-color: #93f; }

/* 서체(font 피커) ── */
.rich-content .ql-font-serif     { font-family: Georgia, 'Times New Roman', serif; }
.rich-content .ql-font-monospace { font-family: Monaco, 'Courier New', monospace; }

/* 링크/인용/코드/이미지/비디오 ── */
.rich-content a { text-decoration: underline; color: #06c; }
.rich-content blockquote {
	border-left: 4px solid #ccc;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 16px;
}
.rich-content code,
.rich-content pre {
	background-color: #f0f0f0;
	border-radius: 3px;
}
.rich-content pre {
	white-space: pre-wrap;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 5px 10px;
	font-family: Consolas, Monaco, 'Courier New', monospace;
	font-size: 13px;
}
.rich-content code {
	font-size: 85%;
	padding: 2px 4px;
}
.rich-content pre.ql-syntax {
	background-color: #23241f;
	color: #f8f8f2;
	overflow: visible;
}
.rich-content img { max-width: 100%; }
.rich-content video,
.rich-content iframe { max-width: 100%; height: auto; }
.rich-content .ql-video {
	display: block;
	max-width: 100%;
}
.rich-content .ql-video.ql-align-center { margin: 0 auto; }
.rich-content .ql-video.ql-align-right  { margin: 0 0 0 auto; }
.rich-content table { max-width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0.5em 0; }
.rich-content td, .rich-content th { border: 1px solid #d0d3d7; padding: 6px 9px; vertical-align: top; }
.rich-content th { background: #f6f7f9; font-weight: 600; text-align: center; }

/* Quill 2.0 목록 2.0 은 기호/순서를 태그(ul/ol)가 아니라 li 의 data-list 로… */
.rich-content li[data-list] { list-style-type: none; }
.rich-content ol li[data-list="bullet"][data-list] { counter-increment: none; }
.rich-content ol li[data-list="bullet"][data-list]::before { content: '\2022'; }
/* 에디터가 마커를 그리려고 넣는 빈 span — 보기 화면에서는 li::before 가 그린다 */
.rich-content .ql-ui { display: none; }

/* rich-content:end */