* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  padding: 24px;

  font-family:
    Arial,
    "Noto Sans KR",
    sans-serif;

  background: #f3f5f6;
  color: #222;
}


/* =========================================================
   전체 페이지
   ========================================================= */

.library-page {
  width: min(1280px, 100%);
  margin: 0 auto;
}


/* =========================================================
   Library Category Header
   ========================================================= */

.library-category-header {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;

  margin-bottom: 18px;
}

.library-category {
  min-width: 0;
  padding: 0 0 11px;

  border: 0;
  border-bottom: 2px solid transparent;

  background: transparent;
  color: #778087;

  font: inherit;
  text-align: left;
  cursor: pointer;
}

.library-category:hover {
  color: #34434d;
}

.library-category.active {
  border-bottom: none;
  color: #18242c;
}

.category-title {
  display: block;

  font-size: 27px;
  font-weight: 600;
  line-height: 1.2;
}

.library-category:not(.active) .category-title {
  font-size: 20px;
  font-weight: 500;
}

.category-subtitle {
  display: none;

  margin-top: 2px;

  color: #70818c;
  font-size: 13px;
  line-height: 1.3;
}

.library-category.active .category-subtitle {
  display: inline-block;

  margin-top: 6px;
  padding-top: 4px;

  border-top: 2px solid #718a9b;
}


/* =========================================================
   좌우 레이아웃
   ========================================================= */

.library-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 65fr)
    minmax(300px, 35fr);

  gap: 18px;
  align-items: stretch;
}

.library-main {
  display: grid;
  grid-template-rows:
    278px
    minmax(520px, auto);

  gap: 18px;
  min-width: 0;
}

/*
  오른쪽은 높이 결정에 참여하지 않고,
  왼쪽이 만든 전체 높이에 맞춰 늘어난다.
*/
.library-sidebar {
  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
}


/* =========================================================
   공통 패널
   ========================================================= */

.library-panel {
  padding: 18px;

  border: 1px solid #aebac2;
  border-radius: 4px;

  background: #fff;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 10px;
  padding-bottom: 9px;

  border-bottom: 1px solid #d3dce1;
}

.panel-header h2 {
  margin: 0;

  font-size: 18px;
  font-weight: 600;
}

.panel-count {
  color: #74828a;
  font-size: 13px;
}


/* =========================================================
   연대기
   ========================================================= */

.timeline-panel,
.timeline-search-panel {
  height: 100%;
  min-height: 0;
}

.timeline-list {
  display: grid;
  gap: 5px;

  height: 200px;

  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 76px 170px 1fr;
  gap: 9px;
  align-items: center;

  width: 100%;
  padding: 5px 10px;

  border: 1px solid #c4cdd2;
  border-radius: 3px;

  background: #fafcfc;
  color: #26333b;

  text-align: left;
  cursor: pointer;
}

.timeline-item:hover {
  background: #eef3f5;
}

.timeline-item.selected {
  border-color: #6f8796;
  background: #e6eef2;
}

.timeline-year {
  color: #657883;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.timeline-name {
  overflow: hidden;

  font-size: 15px;
  font-weight: 600;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-description {
  grid-column: auto;

  overflow: hidden;
  margin-top: 0;

  color: #728087;
  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   상세 자료
   ========================================================= */

.archive-panel {
  height: 100%;
  min-height: 0;
}

.archive-detail {
  line-height: 1.45;
}

.archive-meta {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 7px 12px;
}

.archive-meta dt {
  font-weight: 600;
}

.archive-meta dd {
  margin: 0;
}

.archive-section {
  margin-top: 14px;
  padding-top: 10px;

  border-top: 1px solid #d6dde1;
}

.archive-section h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.archive-section p {
  margin: 0 0 4px;
}

.archive-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.archive-tag {
  padding: 3px 8px;

  border: 1px solid #c4cfd5;
  border-radius: 12px;

  background: #f4f8fa;
  font-size: 12px;
}

.archive-media-link {
  display: inline-block;
  margin-top: 5px;
}


/* =========================================================
   검색
   ========================================================= */

.timeline-search-panel {
  min-height: 278px;
}

/* 오른쪽 상단 검색 패널 */
.library-sidebar > .timeline-search-panel {
  position: absolute;

  top: 0;
  right: 0;
  left: 0;

  height: 278px;
}

/* 오른쪽 하단 검색 패널 */
.library-sidebar > .archive-search-panel {
  position: absolute;

  top: 296px; /* 278px + 패널 간격 18px */
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  flex-direction: column;

  height: auto;
  min-height: 0;

  overflow: hidden;
}

.search-form {
  display: grid;
  gap: 12px;
}

.search-field {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.search-field label {
  font-size: 14px;
  font-weight: 600;
}

.search-field input,
.search-field select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;

  border: 1px solid #98a8b2;
  border-radius: 3px;

  background: #fff;
  font: inherit;
  font-size: 14px;
}

.search-field input:focus,
.search-field select:focus {
  outline: 1px solid #6f8796;
}

.search-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

  margin-top: 3px;
}

.search-buttons button {
  padding: 8px 15px;

  border: 1px solid #9cabb4;
  border-radius: 3px;

  background: #edf2f4;
  color: #26333b;

  cursor: pointer;
}

.search-buttons button:hover {
  background: #e2eaee;
}

.search-message {
  margin: 20px 0 0;
  padding-top: 14px;

  border-top: 1px solid #d6dde1;

  color: #718089;
  font-size: 13px;
  line-height: 1.5;
}

.search-summary {
  display: flex;
  justify-content: space-between;

  margin: 20px 0 10px;
  padding-top: 14px;

  border-top: 1px solid #d6dde1;

  color: #667780;
  font-size: 13px;
}

.search-results {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.archive-search-panel .search-results {
  flex: 1 1 0;

  min-height: 0;
  max-height: none;
}

.search-result-item {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 11px;

  border: 1px solid #c4cdd2;
  border-radius: 3px;

  background: #fafcfc;
  color: #222;

  text-align: left;
  cursor: pointer;
}

.search-result-item:hover {
  background: #eef3f5;
}

.search-result-item.selected {
  border-color: #6f8796;
  background: #e6eef2;
}

.search-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 3px;

  color: #73828a;
  font-size: 12px;
}

.search-result-title {
  display: block;

  font-size: 15px;
  font-weight: 600;
}

.search-result-keywords {
  display: block;

  overflow: hidden;
  margin-top: 3px;

  color: #66757d;
  font-size: 13px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   공통 메시지
   ========================================================= */

.empty-message {
  margin: 0;
  padding: 12px 4px;

  color: #819099;
  font-size: 14px;
}


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

@media (max-width: 1000px) {
  .library-category-header {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
  }
}

@media (max-width: 850px) {

  body {
    padding: 14px;
  }

  .library-layout {
    grid-template-columns: 1fr;
  }

  .library-sidebar {
    order: 2;
  }

  .category-title {
    font-size: 22px;
  }

  .library-category:not(.active) .category-title {
    font-size: 18px;
  }
}

@media (max-width: 620px) {
  .library-category-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timeline-item {
    grid-template-columns: 64px 1fr;
  }
}

/* =========================================================
   Archive Recommendations
   ========================================================= */

.archive-recommendation-section {
  margin-top: 28px;
}

.archive-recommendation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.archive-recommendation-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;

  width: 100%;
  min-width: 0;
  padding: 8px 10px 7px;

  border: 1px solid #e4e4e4;
  border-radius: 7px;

  background: #fff;
  color: inherit;

  font: inherit;
  text-align: left;
  cursor: pointer;

}

.archive-recommendation-item:hover {
  border-color: #bdbdbd;
  background: #fafafa;
}

.archive-recommendation-rank {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: #f0f0f0;
  color: #666;

  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.archive-recommendation-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.archive-recommendation-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;

  min-width: 0;
}

.archive-recommendation-title {
  min-width: 0;
  overflow: hidden;

  color: #222;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-recommendation-meta {
  flex: 0 0 auto;

  color: #888;

  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.archive-recommendation-reason {
  overflow: hidden;

  margin-top: 3px;

  color: #999;

  font-size: 12px;
  line-height: 1.4;

  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 850px) {
  .archive-recommendation-list {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Notes Library View
   ========================================================= */

[hidden] {
  display: none !important;
}

.notes-library-view {
  --notes-border: #aebac2;
  --notes-line: #d3dce1;
  --notes-row: #f2f5f6;
  --notes-row-hover: #eaf0f2;
  --notes-row-selected: #dde8ed;

  margin-top: -8px;
}


/* 노트 하위 컴포넌트 */

.library-page:has(
  .library-category[data-category="notes"].active
) .library-category-header {
  margin-bottom: 8px;
}

.notes-section-nav {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;

  margin: 0 0 6px;
}

.notes-section-tab {
  min-width: 0;

  padding-top: 3px;
  padding-bottom: 5px;

  border: 0;
  border-bottom: 2px solid transparent;

  background: transparent;
  color: #7b858b;

  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.notes-section-tab:hover {
  color: #34434d;
}

.notes-section-tab.active {
  border-bottom-color: transparent;

  background:
    linear-gradient(
      to right,
      #718a9b 0%,
      #718a9b 58%,
      transparent 58%,
      transparent 100%
    )
    left bottom / 100% 2px no-repeat;

  color: #18242c;
  font-weight: 600;
}

/* 상단 노트 자료실: 7 : 3 */

.notes-workspace {
  display: grid;
  grid-template-columns:
    minmax(0, 7fr)
    minmax(285px, 3fr);

  min-height: 388px;
  margin-bottom: 18px;

  overflow: hidden;

  border: 1px solid var(--notes-border);
  border-radius: 4px;

  background: #fff;
}

.notes-workspace-main {
  display: grid;
  grid-template-rows: 168px minmax(0, 1fr);

  min-width: 0;
  min-height: 0;

  border-right: 1px solid var(--notes-border);
}

.notes-list-section,
.notes-detail-section,
.notes-search-section {
  min-width: 0;
  padding: 16px 18px;
}

.notes-list-section {
  min-height: 0;
  border-bottom: 1px solid var(--notes-border);
}

.notes-detail-section,
.notes-search-section {
  min-height: 0;
}

.notes-panel-header {
  margin-bottom: 9px;
  padding-bottom: 8px;
}


/* 자료 목록: 세 줄 높이 + 내부 스크롤 */

.note-record-list {
  display: grid;
  gap: 5px;

  height: 136px;
  min-height: 0;
  padding-right: 4px;

  overflow-y: auto;
  scrollbar-gutter: stable;
}

.note-record-item {
  display: grid;
  grid-template-columns: 92px 102px minmax(0, 1fr);
  gap: 10px;
  align-items: center;

  width: 100%;
  min-height: 29px;
  padding: 6px 10px;

  border: 0;
  border-radius: 2px;

  background: var(--notes-row);
  color: #26333b;

  font: inherit;
  text-align: left;
  cursor: pointer;
}

.note-record-item:hover {
  background: var(--notes-row-hover);
}

.note-record-item.selected {
  background: var(--notes-row-selected);
}

.note-record-section,
.note-record-date {
  overflow: hidden;

  color: #6e7d85;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-record-date {
  font-variant-numeric: tabular-nums;
}

.note-record-title {
  overflow: hidden;

  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 선택한 자료 */

.note-detail {
  min-height: 0;
  line-height: 1.45;
}

.note-detail-meta {
  display: grid;
  grid-template-columns:
    minmax(72px, auto)
    minmax(92px, auto)
    minmax(0, 1fr)
    minmax(78px, auto);
  gap: 0;
  align-items: center;

  margin: 0 0 10px;

  color: #52636c;
  font-size: 13px;
}

.note-detail-meta > span {
  min-width: 0;
  overflow: hidden;
  padding: 0 11px;

  border-right: 1px solid #d9e0e4;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-detail-meta > span:first-child {
  padding-left: 0;
}

.note-detail-meta > span:last-child {
  padding-right: 0;
  border-right: 0;
}

.note-detail-title {
  color: #27343c;
  font-weight: 600;
}

.note-detail-summary {
  display: -webkit-box;
  overflow: hidden;

  margin: 0 0 11px;

  color: #5d6d75;
  font-size: 13px;
  line-height: 1.55;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.note-file-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 18px;

  margin-top: 2px;
}

.note-file-link,
.note-file-missing {
  display: block;
  min-width: 0;
  overflow: hidden;

  padding: 3px 0;

  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-file-link {
  color: #1468b3;
  text-decoration: none;
}

.note-file-link:hover {
  text-decoration: underline;
}

.note-file-missing {
  color: #8a969c;
}


/* 노트 검색 */

.notes-search-section .search-form {
  gap: 10px;
}

.notes-search-section .search-summary {
  margin-top: 17px;
}

.notes-search-message {
  margin-top: 12px;
  padding-top: 12px;
}


/* 하단 종합 검색 */

.integrated-search-panel {
  min-height: 306px;
}

.integrated-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;

  margin-bottom: 14px;
}

.integrated-search-form input {
  width: 100%;
  min-width: 0;
  padding: 9px 11px;

  border: 1px solid #98a8b2;
  border-radius: 3px;

  background: #fff;
  font: inherit;
  font-size: 14px;
}

.integrated-search-form input:focus {
  outline: 1px solid #6f8796;
}

.integrated-search-form button {
  padding: 8px 15px;

  border: 1px solid #9cabb4;
  border-radius: 3px;

  background: #edf2f4;
  color: #26333b;

  cursor: pointer;
}

.integrated-search-form button:hover {
  background: #e2eaee;
}

.integrated-search-results {
  display: grid;
  gap: 5px;

  height: 199px;
  padding-right: 4px;

  overflow-y: auto;
  scrollbar-gutter: stable;
}

.integrated-result-item {
  display: grid;
  grid-template-columns: 104px 156px minmax(0, 1fr);
  gap: 12px;
  align-items: center;

  width: 100%;
  min-height: 34px;
  padding: 7px 11px;

  border: 0;
  border-radius: 2px;

  background: var(--notes-row);
  color: #26333b;

  font: inherit;
  text-align: left;
  cursor: pointer;
}

.integrated-result-item:hover {
  background: var(--notes-row-hover);
}

.integrated-result-category,
.integrated-result-location {
  overflow: hidden;

  color: #6f7e86;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integrated-result-title {
  overflow: hidden;

  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


@media (max-width: 1000px) {
  .notes-section-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 16px;
  }
}

@media (max-width: 850px) {
  .notes-workspace {
    grid-template-columns: 1fr;
  }

  .notes-workspace-main {
    border-right: 0;
    border-bottom: 1px solid var(--notes-border);
  }

  .notes-search-section {
    min-height: 310px;
  }

  .library-sidebar {
      position: static;

      display: grid;
      grid-template-rows:
        278px
        minmax(420px, auto);

      gap: 18px;

      overflow: visible;
    }

    .library-sidebar > .timeline-search-panel,
    .library-sidebar > .archive-search-panel {
      position: static;
      inset: auto;

      height: auto;
    }

    .library-sidebar > .timeline-search-panel {
      min-height: 278px;
    }

    .library-sidebar > .archive-search-panel {
      min-height: 420px;
      overflow: visible;
    }

    .archive-search-panel .search-results {
      flex: none;
      max-height: 300px;
    }

}

@media (max-width: 620px) {
  .notes-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .note-record-item {
    grid-template-columns: 72px 88px minmax(0, 1fr);
    gap: 7px;
  }

  .note-detail-meta {
    grid-template-columns: 1fr 1fr;
    gap: 5px 0;
  }

  .note-detail-meta > span:nth-child(2) {
    border-right: 0;
  }

  .note-file-links {
    grid-template-columns: 1fr;
  }

  .integrated-search-form {
    grid-template-columns: 1fr 1fr;
  }

  .integrated-search-form input {
    grid-column: 1 / -1;
  }

  .integrated-result-item {
    grid-template-columns: 80px 1fr;
  }

  .integrated-result-title {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   Library Borderless Rows
   ========================================================= */

.timeline-item,
.search-result-item,
.archive-recommendation-item {
  border: 0;
  border-radius: 2px;

  background: #f2f5f6;
}

.timeline-item:hover,
.search-result-item:hover,
.archive-recommendation-item:hover {
  background: #eaf0f2;
}

.timeline-item.selected,
.search-result-item.selected {
  border: 0;
  background: #dde8ed;
}