/**
 * Management Page Styles
 * 관리자 페이지 전용 스타일
 * CSS Nesting 사용 (Chrome 113+, Firefox 117+, Safari 16.6+)
 */

/* ==========================================================================
   관리 페이지 컨테이너
   ========================================================================== */
.management-container {
  width: var(--full-width);
  max-width: var(--content-width);
  margin: 40px auto;
  padding: 0 10px;
  display: flex;
  gap: 20px;

  /* ==========================================================================
     왼쪽 파일 탐색기 (고정 너비)
     ========================================================================== */
  & .management-left {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }

  /* ==========================================================================
     오른쪽 본문 (5) - 일반 모드
     ========================================================================== */
  & .management-right {
    flex: 1;
    min-width: 0;
  }

  /* ==========================================================================
     중간 편집기 - 편집 모드 (기본 숨김)
     ========================================================================== */
  & .management-middle {
    display: none;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    height: 80vh;
    max-height: 80vh;
  }

  /* ==========================================================================
     오른쪽 미리보기 - 편집 모드 (기본 숨김)
     ========================================================================== */
  & .management-preview {
    display: none;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    height: 80vh;
    max-height: 80vh;
    overflow-y: auto;
  }

  /* 편집 모드일 때 */
  &.edit-mode {
    max-width: 100%;

    & .management-right {
      display: none;
    }

    & .management-middle,
    & .management-preview {
      display: flex;
    }
  }

  /* DB 모드일 때 오른쪽 영역 넓게 */
  &.db-mode .management-right.db-right {
    flex: 1;
  }
}

/* ==========================================================================
   네비게이션 버튼 (왼쪽 패널 내부)
   ========================================================================== */
.management-nav {
  display: flex;
  gap: 8px;
  background: var(--bg-white);
  border: 1px solid var(--bg-lightgray-02);
  border-radius: var(--radius-medium);
  padding: 8px;
  margin-bottom: 16px;

  & .nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 2px solid transparent;
    background: transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all 0.2s ease;

    & .nav-icon {
      font-size: 20px;
    }

    & .nav-text {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-text-secondary);
    }

    &:hover {
      background: var(--bg-lightgray-01);
      border-color: var(--bg-lightgray-02);
    }

    &.active {
      background: rgba(103, 119, 239, 0.1);
      border-color: var(--color-primary);

      & .nav-text {
        color: var(--color-primary);
      }
    }
  }
}

/* ==========================================================================
   파일 탐색기
   ========================================================================== */
.management-container .file-explorer {
    background: var(--bg-white);
    border: 1px solid var(--bg-lightgray-02);
    border-radius: var(--radius-medium);
    overflow: hidden;

    & .explorer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 15px;
      border-bottom: 1px solid var(--bg-lightgray-02);
      background: var(--bg-lightgray-01);
    }

    & .explorer-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-primary);
    }

    & .explorer-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    & .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      border: 1px solid var(--bg-lightgray-02);
      background: var(--bg-white);
      color: var(--color-text-primary);
      font-size: 16px;
      border-radius: var(--radius-small);
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: var(--bg-lightgray-01);
        border-color: var(--color-primary);
      }
    }

    & .toggle-mode-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border: 1px solid var(--bg-lightgray-02);
      background: var(--bg-white);
      color: var(--color-text-primary);
      font-size: 13px;
      font-weight: 500;
      border-radius: var(--radius-small);
      cursor: pointer;
      transition: all 0.2s ease;

      & .mode-icon {
        font-size: 14px;
      }

      & .mode-text {
        font-weight: 600;
      }

      &:hover {
        background: var(--bg-lightgray-01);
        border-color: var(--color-primary);
      }

      &.edit-mode {
        background: var(--color-primary);
        color: var(--bg-white);
        border-color: var(--color-primary);

        &:hover {
          background: #5568d3;
          border-color: #5568d3;
        }
      }
    }

    & .file-tree {
      overflow-y: auto;
      max-height: 300px;

      & .loading-tree {
        padding: 20px 15px;
        text-align: center;
        color: var(--color-text-secondary);
        font-size: 14px;
      }

      & .tree-item {
        position: relative;
        user-select: none;

        & .item-row {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 5px 8px;
          cursor: pointer;
          transition: all 0.2s ease;
          border-bottom: 1px solid var(--bg-lightgray-01);

          &:hover {
            background: var(--bg-lightgray-01);

            & .item-actions {
              opacity: 1;
            }
          }

          &.active {
            background: rgba(103, 119, 239, 0.15);
            border-left: 3px solid var(--color-primary);

            & .item-name {
              color: var(--color-primary);
              font-weight: 600;
            }

            & .item-actions {
              opacity: 1;
            }
          }

          &.dragging {
            opacity: 0.5;
            background: var(--bg-lightgray-02);
          }

          &.drop-target {
            background: rgba(103, 119, 239, 0.2);
            border-left: 3px solid var(--color-primary);
          }
        }

        & .toggle-icon {
          width: 16px;
          font-size: 12px;
          text-align: center;
          flex-shrink: 0;
          cursor: pointer;
          transition: transform 0.2s ease;

          &.expanded {
            transform: rotate(90deg);
          }
        }

        & .item-icon {
          font-size: 16px;
          flex-shrink: 0;
        }

        & .item-name {
          font-size: 14px;
          color: var(--color-text-primary);
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        & .item-actions {
          display: flex;
          gap: 4px;
          opacity: 0;
          transition: opacity 0.2s ease;

          & .action-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            border-radius: 3px;
            color: var(--color-text-secondary);
            transition: all 0.2s ease;

            &:hover {
              background: rgba(0, 0, 0, 0.1);
              color: var(--color-text-primary);
            }
          }
        }

        & .tree-children {
          padding-left: 0;
          display: none;

          &.expanded {
            display: block;
          }
        }
      }

      & .no-files {
        padding: 20px 15px;
        text-align: center;
        color: var(--color-text-secondary);
        font-size: 14px;
      }
    }
  }

  /* ==========================================================================
     뷰어/편집기 헤더
     ========================================================================== */
  & .editor-header,
  & .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-lightgray-01);
    border: 1px solid var(--bg-lightgray-02);
    border-bottom: none;
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    min-height: 65px;

    & .editor-title,
    & .preview-title {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-primary);
    }

    & .editor-actions {
      display: flex;
      gap: 8px;
    }
  }

  & .editor-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--bg-lightgray-02);
    background: var(--bg-white);
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: all 0.2s ease;

    & .btn-icon {
      font-size: 14px;
    }

    &:hover {
      background: var(--bg-lightgray-01);
      border-color: var(--color-primary);
    }
  }

  & .theme-toggle-btn {
    min-width: 40px;
    padding: 8px 10px;

    & .btn-icon {
      font-size: 18px;
      margin: 0;
    }

    &:hover {
      background: rgba(103, 119, 239, 0.1);
      border-color: var(--color-primary);
    }
  }

  & .save-btn {
    background: var(--color-primary);
    color: var(--bg-white);
    border-color: var(--color-primary);

    &:hover {
      background: #5568d3;
      border-color: #5568d3;
    }
  }

  & .cancel-btn {
    &:hover {
      border-color: #cf222e;
      color: #cf222e;
    }
  }

  /* ==========================================================================
     Monaco Editor Container
     ========================================================================== */
  & .monaco-editor-container {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 1px solid #44475a;
    border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    overflow: hidden;
    background: #1e1e1e;
  }

  /* ==========================================================================
     문서 뷰어
     ========================================================================== */
  & .document-viewer {
    background: var(--bg-white);
    border: 1px solid var(--bg-lightgray-02);
    border-radius: var(--radius-medium);
    padding: 40px;
    min-height: 500px;
    height: calc(80vh);
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.7;
    color: #24292f;

    & .empty-message,
    & .loading-message,
    & .error-message {
      text-align: center;
      color: var(--color-text-secondary);
      font-size: 15px;
      padding: 50px 20px;
    }

    & .error-message {
      color: #cf222e;
    }

    /* Markdown 본문 */
    & .markdown-body {
      max-width: 100%;

      /* 제목 */
      & h1 {
        font-size: 28px;
        font-weight: 600;
        padding-bottom: 8px;
        margin-bottom: 16px;
        border-bottom: 1px solid #d0d7de;
      }

      & h2 {
        font-size: 22px;
        font-weight: 600;
        padding-bottom: 8px;
        margin-top: 24px;
        margin-bottom: 16px;
        border-bottom: 1px solid #d0d7de;
      }

      & h3 {
        font-size: 18px;
        font-weight: 600;
        margin-top: 24px;
        margin-bottom: 16px;
      }

      & h4 {
        font-size: 16px;
        font-weight: 600;
        margin-top: 24px;
        margin-bottom: 16px;
      }

      /* 본문 텍스트 */
      & p {
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 400;
      }

      & strong {
        font-weight: 600;
      }

      & em {
        font-style: italic;
      }

      /* 리스트 */
      & ul,
      & ol {
        margin-top: 0;
        margin-bottom: 16px;
        padding-left: 2em;
      }

      & li {
        margin-top: 4px;
        font-size: 15px;
        line-height: 1.7;

        & + li {
          margin-top: 4px;
        }
      }

      /* 코드 */
      & code {
        padding: 0.2em 0.4em;
        margin: 0;
        font-size: 85%;
        background-color: rgba(175, 184, 193, 0.2);
        border-radius: 6px;
        font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
      }

      & pre {
        padding: 16px;
        overflow: auto;
        font-size: 85%;
        line-height: 1.45;
        background-color: #f6f8fa;
        border-radius: 6px;
        margin-bottom: 16px;

        & code {
          padding: 0;
          margin: 0;
          background: transparent;
          border: 0;
          font-size: 100%;
          white-space: pre;
          word-break: normal;
        }
      }

      /* 인용구 */
      & blockquote {
        padding: 0 1em;
        color: #57606a;
        border-left: 4px solid #d0d7de;
        margin: 0 0 16px 0;

        & p {
          margin-bottom: 0;
        }
      }

      /* 테이블 */
      & table {
        border-spacing: 0;
        border-collapse: collapse;
        display: block;
        width: max-content;
        max-width: 100%;
        overflow: auto;
        margin-bottom: 16px;
      }

      & tr {
        background-color: #ffffff;
        border-top: 1px solid #d0d7de;
      }

      & th,
      & td {
        padding: 6px 13px;
        border: 1px solid #d0d7de;
        font-size: 14px;
      }

      & th {
        font-weight: 600;
        background-color: #f6f8fa;
      }

      /* 이미지 */
      & img {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
        margin: 16px 0;
      }

      /* 구분선 */
      & hr {
        height: 2px;
        padding: 0;
        margin: 24px 0;
        background-color: #d0d7de;
        border: 0;
      }

      /* 링크 */
      & a {
        color: #0969da;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  /* ==========================================================================
     컴포넌트 콘텐츠
     ========================================================================== */
  & .management-content {
    min-height: 400px;

    & .component {
      display: none;
      animation: fadeIn 0.3s ease;

      &.active {
        display: block;
      }
    }
  }

  /* ==========================================================================
     도구 패널 (이미지 업로드, 목차)
     ========================================================================== */
  & .tool-panel {
    background: var(--bg-white);
    border: 1px solid var(--bg-lightgray-02);
    border-radius: var(--radius-medium);
    overflow: hidden;

    & .tool-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 15px;
      border-bottom: 1px solid var(--bg-lightgray-02);
      background: var(--bg-lightgray-01);

      & .tool-title {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text-primary);
      }

      & .tool-action-btn {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--bg-lightgray-02);
        background: var(--bg-white);
        border-radius: var(--radius-small);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 14px;

        &:hover {
          background: var(--bg-lightgray-01);
          border-color: var(--color-primary);
        }
      }
    }

    & .tool-body {
      padding: 6px;
    }
  }
}

/* ==========================================================================
   이미지 업로드 & 목차 패널 스타일
   ========================================================================== */
.management-container .image-upload-panel .folder-selector-group {
  display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding: 8px 12px;
      background: var(--bg-lightgray-01);
      border-radius: var(--radius-small);

}

.management-container .image-upload-panel .folder-selector-group .folder-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.management-container .image-upload-panel .folder-selector-group .folder-select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--bg-lightgray-02);
  border-radius: var(--radius-small);
  background: var(--bg-white);
  font-size: 13px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.management-container .image-upload-panel .folder-selector-group .folder-select:hover {
  border-color: var(--color-primary);
}

.management-container .image-upload-panel .folder-selector-group .folder-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.1);
}

/* 이미지 업로드 트리거 버튼 */
.management-container .image-upload-panel .upload-trigger-btn {
  width: 100%;
  padding: 12px 16px;
  border: 2px dashed var(--bg-lightgray-02);
  border-radius: var(--radius-medium);
  background: var(--bg-white);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: 5px;
}

.management-container .image-upload-panel .upload-trigger-btn:hover {
  border-color: var(--color-primary);
  background: rgba(103, 119, 239, 0.05);
  color: var(--color-primary);
}

.management-container .image-upload-panel .upload-trigger-btn .upload-icon {
  font-size: 18px;
}

.management-container .image-upload-panel .upload-area {
  border: 2px dashed var(--bg-lightgray-02);
  border-radius: var(--radius-medium);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-lightgray-01);
  margin-top: 10px;
}

.management-container .image-upload-panel .upload-area:hover {
  border-color: var(--color-primary);
  background: rgba(103, 119, 239, 0.05);
}

.management-container .image-upload-panel .upload-area .upload-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}

.management-container .image-upload-panel .upload-area .upload-text {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.management-container .image-upload-panel .upload-result .result-preview {
  margin-bottom: 12px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--bg-lightgray-02);
}

.management-container .image-upload-panel .upload-result .size-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--bg-lightgray-01);
  border-radius: var(--radius-small);
}

.management-container .image-upload-panel .upload-result .size-selector .size-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.management-container .image-upload-panel .upload-result .size-selector .size-buttons {
  display: flex;
  gap: 6px;
}

.management-container .image-upload-panel .upload-result .size-selector .size-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-lightgray-02);
  background: var(--bg-white);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.management-container .image-upload-panel .upload-result .size-selector .size-btn:hover {
  border-color: var(--color-primary);
  background: rgba(103, 119, 239, 0.1);
}

.management-container .image-upload-panel .upload-result .size-selector .size-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--bg-white);
}

.management-container .image-upload-panel .upload-result .result-path {
  display: flex;
  gap: 8px;
}

.management-container .image-upload-panel .upload-result .result-path .path-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--bg-lightgray-02);
  border-radius: var(--radius-small);
  font-size: 12px;
  font-family: monospace;
  background: var(--bg-lightgray-01);
  color: var(--color-text-primary);
}

.management-container .image-upload-panel .upload-result .result-path .copy-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bg-lightgray-02);
  background: var(--bg-white);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
}

.management-container .image-upload-panel .upload-result .result-path .copy-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.management-container .image-upload-panel .upload-result .result-path .copy-btn.copied {
  background: #10b981;
  border-color: #10b981;
}

/* 목차 패널 */
.management-container .toc-panel .toc-list {
  max-height: 400px;
  overflow-y: auto;
}

.management-container .toc-panel .toc-list .toc-empty {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 13px;
  padding: 20px;
  margin: 0;
}

.management-container .toc-panel .toc-list .toc-item {
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
  color: var(--color-text-primary);
  display: block;
  text-decoration: none;
  border-bottom: none;
  margin: 2px 0;
  border-radius: 0 4px 4px 0;
  position: relative;
}

.management-container .toc-panel .toc-list .toc-item:hover {
  background: var(--bg-lightgray-01);
  border-left-color: var(--color-primary);
}

.management-container .toc-panel .toc-list .toc-item.active {
  background: rgba(103, 119, 239, 0.15);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

/* H1 - 최상위 제목 */
.management-container .toc-panel .toc-list .toc-item.level-1 {
  padding-left: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: 8px;
  margin-bottom: 4px;
  background: var(--bg-lightgray-01);
}

.management-container .toc-panel .toc-list .toc-item.level-1::before {
  content: '▶';
  font-size: 10px;
  margin-right: 8px;
  color: var(--color-primary);
}

/* H2 - 2단계 제목 */
.management-container .toc-panel .toc-list .toc-item.level-2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-left: 4px;
}

.management-container .toc-panel .toc-list .toc-item.level-2::before {
  content: '•';
  font-size: 16px;
  margin-right: 8px;
  color: var(--color-primary);
  font-weight: bold;
}

/* H3 - 3단계 제목 */
.management-container .toc-panel .toc-list .toc-item.level-3 {
  padding-left: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-left: 8px;
}

.management-container .toc-panel .toc-list .toc-item.level-3::before {
  content: '◦';
  font-size: 14px;
  margin-right: 8px;
  color: var(--color-text-secondary);
}

/* H4 - 4단계 제목 */
.management-container .toc-panel .toc-list .toc-item.level-4 {
  padding-left: 60px;
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: 12px;
  font-style: italic;
}

.management-container .toc-panel .toc-list .toc-item.level-4::before {
  content: '−';
  font-size: 12px;
  margin-right: 8px;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   생성 패널 (새 파일/폴더 생성) - Nav 스타일
   ========================================================================== */
#create-item-panel {
  display: none !important;
  margin-top: 12px;
}

#create-item-panel.active {
  display: block !important;
  animation: slideDown 0.2s ease;
}

.panel-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-white);
  border: 1px solid var(--bg-lightgray-02);
  border-radius: var(--radius-medium);
  padding: 10px;
}

.panel-type-selector {
  display: flex;
  gap: 6px;
  padding: 0;
}

.panel-type-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 2px solid transparent;
  background: transparent;
  border-radius: var(--radius-small);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-text-secondary);
}

.panel-type-btn:hover {
  background: var(--bg-lightgray-01);
  border-color: var(--bg-lightgray-02);
}

.panel-type-btn.active {
  background: rgba(103, 119, 239, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.panel-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bg-lightgray-02);
  border-radius: var(--radius-small);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--bg-white);
  transition: all 0.2s ease;
}

.panel-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(103, 119, 239, 0.1);
}

.panel-input::placeholder {
  color: var(--color-text-secondary);
}

.panel-create-btn {
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: var(--color-primary);
  color: var(--bg-white);
  border-radius: var(--radius-small);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.panel-create-btn:hover {
  background: #5568d3;
}

.panel-create-btn:active {
  transform: translateY(1px);
}

/* ==========================================================================
   애니메이션
   ========================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   DB 뷰어 스타일
   ========================================================================== */
.db-viewer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.db-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--bg-lightgray-02);
  background: var(--bg-white);
}

.db-table-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.db-table-container {
  flex: 1;
  padding: 20px;
  overflow: auto;
  background: var(--bg-white);
}

/* Tabulator 커스텀 스타일 */
.tabulator {
  font-size: 14px;
  border: 1px solid var(--bg-lightgray-02);
  border-radius: var(--radius-medium);
}

.tabulator .tabulator-header {
  background: var(--bg-lightgray-01);
  border-bottom: 2px solid var(--bg-lightgray-02);
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--bg-lightgray-01);
  border-right: 1px solid var(--bg-lightgray-02);
}

.tabulator .tabulator-row {
  border-bottom: 1px solid var(--bg-lightgray-02);
}

.tabulator .tabulator-row:hover {
  background: var(--bg-lightgray-01);
}

.tabulator .tabulator-row.tabulator-selected {
  background: rgba(103, 119, 239, 0.1);
}

/* DB 테이블 리스트 컨테이너 */
#db-table-list {
  max-height: 300px;
  overflow-y: auto;
}

/* DB 이미지 트리 컨테이너 */
#db-img-tree {
  max-height: 500px;
  overflow-y: auto;
}

/* DB 테이블 리스트 아이템 스타일 */
.db-table-item {
  padding: 5px 8px;
  margin: 4px 0;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-table-item:hover {
  background: var(--bg-lightgray-01);
}

.db-table-item.active {
  background: rgba(103, 119, 239, 0.15);
  border-left: 3px solid var(--color-primary);
  font-weight: 600;
  color: var(--color-primary);
}

.db-table-icon {
  font-size: 16px;
}

.db-table-name {
  flex: 1;
  font-size: 13px;
}

/* DB 테이블 툴바 */
.db-table-toolbar {
  display: flex;
  gap: 8px;
}

.db-action-btn {
  padding: 8px 16px;
  border: 1px solid var(--bg-lightgray-02);
  background: var(--bg-white);
  border-radius: var(--radius-small);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-action-btn:hover {
  background: var(--bg-lightgray-01);
  border-color: var(--color-primary);
}

.db-action-btn.btn-primary {
  background: var(--color-primary);
  color: var(--bg-white);
  border-color: var(--color-primary);
}

.db-action-btn.btn-primary:hover {
  background: #5568d3;
}

.db-action-btn.btn-danger {
  background: #dc3545;
  color: var(--bg-white);
  border-color: #dc3545;
}

.db-action-btn.btn-danger:hover {
  background: #c82333;
}

.db-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   반응형
   ========================================================================== */

/* 태블릿 */
@media screen and (max-width: 768px) {
  .management-container {
    & .management-nav {
      & .nav-btn {
        font-size: 14px;
        padding: 10px 15px;

        & .nav-icon {
          font-size: 16px;
        }
      }
    }
  }
}

/* 모바일 */
@media screen and (max-width: 480px) {
  .management-container {
    & .management-nav {
      flex-direction: column;
      gap: 5px;

      & .nav-btn {
        width: var(--full-width);
        justify-content: flex-start;
      }
    }
  }
}