/** CSS 변수: Bootstrap 색상 리부트 */
:root {
  color-scheme: light dark;
  /* DESIGN.MD 참고 */
  --sidebar-width: 240px;
  --sidebar-margin: 16px;

  /* DESIGN.MD 참고 */
  --wing-banner-width: 120px;
  --wing-banner-margin: 16px;

  --warning-color: #ff6f00;
}
.text-warning {
  color: var(--warning-color) !important;
}

/** 레이아웃 */
.align-content {
  padding: 0 16px;
}
.align-content-1 {
  padding: 0 8px;
}
@media (min-width: 992px) {
  .align-content {
    padding: 0;
  }
  .align-content-1 {
    padding: 0;
  }
}
.align-margin {
  margin: 0 16px;
}
@media (min-width: 992px) {
  .align-margin {
    margin: 0;
  }
}

data {
  display: block;
}

xmp,
pre {
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
}

/** EO BASE HTML TAGS */

/** 로직 유틸리티 */
/** 로그인을 한 경우만 화면에 표시하는 유틸리티 */
[show-on-login] {
  display: none !important;
}
/** 로그아웃을 한 경우 또는 로그인을 하지 않은 경우만 보여주는 유틸리티 */
[show-on-not-login] {
  display: inline-block;
}
/** EO 로직 유틸리티 */

/** 레이아웃 */
.sidebar {
  width: var(--sidebar-width) !important;
  flex-shrink: 0;
}
.wing-banner {
  width: var(--wing-banner-width) !important;
  flex-shrink: 0;
}
.top-banner {
  max-width: 252px;
}
/** 100% 에서 양쪽 사이드바, 날개를 뺀 <main> 태그 사이즈. 서브페이지에서 오른쪽 사이드바가 없어서 정확한 너비는 아니지만, 100% 에서 빼므로 최대 너비를 제한한다. 만약, 이 값이 없으면 <main> 태그 하위에서 .row 를 쓸 때, overflow 가 발생한다.*/
.main {
  width: calc(
    100% - var(--sidebar-width) - var(--wing-banner-width) * 2 -
      var(--sidebar-margin) * 2 - var(--wing-banner-margin) * 2
  );
}
/** 레이아웃 끝 */

/** 컴포넌트 */
.admin {
  border: 1px solid var(--bs-warning-border-subtle);
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: var(--bs-warning-bg-subtle);
}

/* 버튼 링크 스타일 : 모든 메뉴/버튼 링크에 쓰면 된다.*/
.menu-link {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font-size: 1em;
  text-decoration: none;
}

/** layout utility */
.d-soft-none {
  display: none;
}

.d-force-block {
  display: block !important;
}

/* 버튼 링크 스타일 : 모든 메뉴/버튼 링크에 쓰면 된다.*/
.menu-link.sm {
  font-size: 0.9em;
}
.menu-link.xs {
  font-size: 0.8em;
}

/* Tailwind 에서 가져온 각종 유틸리티 */
.xs {
  font-size: 0.8em;
}
.sm {
  font-size: 0.9em;
}
.md {
  font-size: 1em;
}
.lg {
  font-size: 1.25em;
}
.xl {
  font-size: 1.5em;
}
.xxl {
  font-size: 2em;
}
.pointer {
  cursor: pointer !important;
}
.not-allowed {
  cursor: not-allowed !important;
}
/** File 업로드 input 에 커서 표시 */
/* Webkit 브라우저를 위한 추가 스타일 */
input[type="file"]::-webkit-file-upload-button {
  cursor: pointer;
}

[depth="2"] {
  margin-left: 1.5rem;
}

[depth="3"] {
  margin-left: 3rem;
}

[depth="4"] {
  margin-left: 4rem;
}

[depth="5"] {
  margin-left: 5rem;
}

[depth="6"] {
  margin-left: 6rem;
}

[depth="7"],
[depth="8"],
[depth="9"],
[depth="10"],
[depth="11"],
[depth="12"],
[depth="13"],
[depth="14"],
[depth="15"] {
  margin-left: 7rem;
}

/** Boostrap 에 없는 것 */

@media (min-width: 992px) {
  .grid-lg-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media all and (min-width: 1400px) {
  .px-xl-lg {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

.break-all {
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
}

.hover-underline {
  text-decoration: none;
}
.hover-underline:hover {
  text-decoration: underline;
}
.hover-bg-light:hover {
  background-color: var(--bs-light);
}

a.link {
  text-decoration: none;
  color: var(--bs-link-color);
}

/** 유틸리티 : 사이즈, 위치 등 */
.between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-gap-3 {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.flex-gap-2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.size-3 {
  width: 48px;
  height: 48px;
}
.size-4 {
  width: 64px;
  height: 64px;
}
.size-5 {
  width: 80px;
  height: 80px;
}
.size-6 {
  width: 96px;
  height: 96px;
}
.size-8 {
  width: 128px;
  height: 128px;
}
.size-10 {
  width: 160px;
  height: 160px;
}
@media (min-width: 992px) {
  .size-lg-10 {
    width: 160px;
    height: 160px;
  }
}

.w-1 {
  width: 16px;
}
.w-2 {
  width: 32px;
}
.w-3 {
  width: 48px;
}
.w-4 {
  width: 64px;
}
.w-5 {
  width: 80px;
}
.w-6 {
  width: 96px;
}
.w-7 {
  width: 112px;
}
.w-8 {
  width: 128px;
}
.w-9 {
  width: 144px;
}
.w-10 {
  width: 160px;
}
.w-11 {
  width: 176px;
}
.w-12 {
  width: 192px;
}
.h-1 {
  height: 16px;
}
.h-2 {
  height: 32px;
}
.h-3 {
  height: 48px;
}
.h-4 {
  height: 64px;
}
.h-5 {
  height: 80px;
}
.h-6 {
  height: 96px;
}
.h-7 {
  height: 112px;
}
.h-8 {
  height: 128px;
}
.h-9 {
  height: 144px;
}
.h-10 {
  height: 160px;
}
.h-11 {
  height: 176px;
}
.h-12 {
  height: 192px;
}

.top {
  top: 0;
}
.top-1 {
  top: 4px;
}
.top-2 {
  top: 8px;
}
.top-3 {
  top: 16px;
}
.top-4 {
  top: 32px;
}
.bottom-1 {
  bottom: 4px;
}
.bottom-2 {
  bottom: 8px;
}
.bottom-3 {
  bottom: 16px;
}
.left {
  left: 0;
}
.left-0 {
  left: 0;
}
.left-1 {
  left: 4px;
}
.left-2 {
  left: 8px;
}
.left-3 {
  left: 16px;
}
.right {
  right: 0;
}
.right-0 {
  right: 0;
}
.right-1 {
  right: 4px;
}
.right-2 {
  right: 8px;
}
.right-3 {
  right: 16px;
}

/** 다이얼로그 컴포넌트 디자인 */
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 3000;
}

#default-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid #ccc;
  border-bottom: 0 !important;
  padding: 0;
}
.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

dialog.bottom {
  top: auto !important;
  left: auto !important;
  transform: none !important;
  bottom: 16px !important;
}

dialog.right {
  top: auto !important;
  left: auto !important;
  transform: none !important;
  right: 16px !important;
}

#default-dialog.success {
  /* 현대적이고 심플한 성공 디자인 - 진한 파란색 */
  background: #ffffff;
  border: 2px solid #0066ccef;
  border-left: 5px solid #0066ccef;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 102, 204, 0.35);
  color: #ffffff !important;
}

#default-dialog.success h3.title {
  color: #0066cc !important; /* 진한 파란색 제목 */
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

#default-dialog.success p.content {
  color: #000000 !important; /* 검은색 본문 */
  font-weight: 500;
  line-height: 1.6;
}

#default-dialog.success progress {
  /* progress bar 색상 - 성공 테마에 맞춤 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(0, 102, 204, 0.2);
  height: 6px !important;
  border: none;
}

/* Webkit browsers (Chrome, Safari) */
#default-dialog.success progress::-webkit-progress-bar {
  background-color: rgba(0, 102, 204, 0.2);
  border-radius: 3px;
}

#default-dialog.success progress::-webkit-progress-value {
  background-color: #0066cc;
}

/* Firefox */
#default-dialog.success progress::-moz-progress-bar {
  background-color: #0066cc;
  border-radius: 3px;
}

#default-dialog.success button {
  /* 버튼 텍스트 색상 */
  color: #003d7a !important; /* 더 진한 파란색 */
  font-weight: 600;
  background-color: transparent;
  padding: 6px 12px;
  border-radius: 3px;
}

#default-dialog.warning {
  /* 현대적이고 심플한 강한 경고 디자인 - 더 진한 배경 */
  background: #ffffff; /* 더 진한 빨강 - 강렬한 경고 */
  border: 2px solid #ff850aef; /* 매우 진한 빨강 악센트 */
  border-left: 5px solid #ff850aef; /* 매우 진한 빨강 악센트 */
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(127, 29, 29, 0.35);
  color: #ffffff !important;
}

#default-dialog.warning h3.title {
  color: #ff5900 !important; /* 순백색 - 최대 대비 */
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

#default-dialog.warning p.content {
  color: #000000 !important; /* 밝은 분홍색 - 높은 가독성 */
  font-weight: 500;
  line-height: 1.6;
}

#default-dialog.warning progress {
  /* progress bar 색상 - 경고 테마에 맞춤 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255, 133, 10, 0.2);
  height: 6px !important;
  border: none;
}

/* Webkit browsers (Chrome, Safari) */
#default-dialog.warning progress::-webkit-progress-bar {
  background-color: rgba(255, 133, 10, 0.2);
  border-radius: 3px;
}

#default-dialog.warning progress::-webkit-progress-value {
  background-color: #ff850a;
}

/* Firefox */
#default-dialog.warning progress::-moz-progress-bar {
  background-color: #ff850a;
  border-radius: 3px;
}

#default-dialog.warning button {
  /* 버튼 텍스트 색상 - 흰색 */
  color: #990000 !important;
  font-weight: 600;
  background-color: transparent;
  padding: 6px 12px;
  border-radius: 3px;
}

/** 끝: 다이얼로그 컴포넌트 디자인 */

/** line-clamp 유틸리티 */
.line-clamp-1 {
  display: block;
  line-height: 1.4;
  height: 1.4em; /* line-height 값과 동일하게 설정 */
  overflow: hidden;
}

.line-clamp-2 {
  display: block;
  line-height: 1.4;
  height: 2.8em; /* line-height 값과 동일하게 설정 */
  overflow: hidden;
}

.line-through {
  text-decoration: line-through;
}

/** Bootstrap 의 breadcrumb 클래스에서 이상하게 점(bullets)이 나오는 문제 수정 */
/* Breadcrumb 점(bullets) 완전 제거 - 모든 브라우저 지원 */
nav[aria-label="breadcrumb"] ol.breadcrumb {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  margin-bottom: 0.5rem;
}

nav[aria-label="breadcrumb"] .breadcrumb-item {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  display: inline-block;
}

/* WebKit 브라우저를 위한 추가 스타일 */
nav[aria-label="breadcrumb"] .breadcrumb-item::-webkit-details-marker {
  display: none !important;
}

/* 탭 아이콘 - 화면 너비 418px 미만에서 숨김 */
@media (max-width: 418px) {
  .xs-hide {
    display: none !important;
  }
}

/* 탭 아이콘 - 화면 너비 419px 이상에서만 표시 (명시적) */
@media (min-width: 419px) {
  .xs-hide {
    display: inline-block;
  }
}