/* Notes Page - Mobile 375px 기준 clamp() 반응형 적용
   스케일링 공식: clamp(값×0.853, 값/375×100vw, 값×1.28)
   320px~480px 스케일링, 481px~767px 480px 고정+중앙정렬 */

/* 푸터 하단 고정: notes 페이지 전용 */
body.notes-page {
  display: flex;
  flex-direction: column;
}

body.notes-page > main,
body.notes-page > #main-content {
  flex: 1;
}

/* 헤더: notes 페이지는 배경 이미지 없으므로 문서 흐름에 포함 */
.notes-page .header {
  position: relative;
}

/* ============================================
   Identity Container (제목 + 검색)
   Figma: 좌우 16px, 제목 80px 상단, 검색 40px 아래
   ============================================ */
.notes-page .notes-identity {
  width: 100%;
  padding: clamp(68.2px, 21.33vw, 102.4px) clamp(13.7px, 4.27vw, 20.5px) 0;
}

.notes-identity__container {
  width: 100%;
  max-width: clamp(292.7px, 91.47vw, 439px);
  margin: 0 auto;
}

/* 제목 "Notes": Inter Black 32px, line-height 44.8px, #131923 */
.notes-identity__title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(27.3px, 8.53vw, 41px);
  line-height: clamp(38.2px, 11.95vw, 57.3px);
  letter-spacing: 0;
  color: #131923;
  margin: 0 0 clamp(34.1px, 10.67vw, 51.2px);
  text-align: center;
}

/* 검색박스: 343×48, border 1px #c1c3c5, radius 24px */
.notes-search {
  position: relative;
  display: block;
  width: 100%;
  max-width: clamp(292.7px, 91.47vw, 439px);
  height: clamp(41px, 12.8vw, 61.4px);
}

.notes-search__label.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;
}

.notes-search__icon {
  position: absolute;
  right: clamp(20.5px, 6.4vw, 30.7px);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #797c82;
  pointer-events: auto;
  cursor: pointer;
}

.notes-search__input {
  width: 100%;
  height: clamp(41px, 12.8vw, 61.4px);
  padding: 0 clamp(41px, 12.8vw, 61.4px) 0 clamp(20.5px, 6.4vw, 30.7px);
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: clamp(11.9px, 3.73vw, 17.9px);
  line-height: clamp(17.1px, 5.33vw, 25.6px);
  letter-spacing: 0;
  color: #1a1d21;
  background-color: #ffffff;
  border: 1px solid #c1c3c5;
  border-radius: clamp(20.5px, 6.4vw, 30.7px);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s;
}

.notes-search__input::placeholder {
  color: #797c82;
}

.notes-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}


.notes-search__input:focus,
.notes-search__input:focus-visible {
  border-color: #0159fd;
  outline: none;
}

/* ============================================
   리스트 영역
   Figma: 좌우 24px → 콘텐츠 327px, 검색과 60px 간격
   ============================================ */
.notes-page .notes-list-section {
  width: 100%;
  margin-top: clamp(51.2px, 16vw, 76.8px);
  padding: 0 clamp(20.5px, 6.4vw, 30.7px) clamp(136.5px, 42.67vw, 204.8px);
}

.notes-list__container {
  width: 100%;
  max-width: clamp(278.9px, 87.2vw, 418.6px);
  margin: 0 auto;
}

.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 상단 구분선 */
.notes-list::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #c1c3c5;
  margin-bottom: 0;
}

.notes-list__item {
  margin: 0;
  padding: 0;
}

/* 행 */
.notes-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(13.6px, 4.27vw, 20.5px);
  padding: clamp(13.6px, 4.27vw, 20.5px) 0;
  text-decoration: none;
  color: inherit;
}

.notes-list__link:focus {
  outline: 2px solid #1a1d21;
  outline-offset: 2px;
}

/* 텍스트 영역 (제목 + 날짜 세로 배치) */
.notes-list__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3.4px, 1.07vw, 5.1px);
}

/* 제목: Pretendard Medium 16px, line-height 24px, #222831 */
.notes-list__title {
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: clamp(13.6px, 4.27vw, 20.5px);
  line-height: clamp(20.5px, 6.4vw, 30.7px);
  letter-spacing: 0;
  color: #222831;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 날짜: Inter Medium 12px, #c1c3c5 */
.notes-list__date {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(10.2px, 3.2vw, 15.4px);
  line-height: clamp(13.6px, 4.27vw, 20.5px);
  letter-spacing: 0;
  color: #c1c3c5;
}

/* 우측 아이콘: 모바일 16×16, 데스크탑 20×20 */
.notes-list__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.notes-list__icon-img {
  width: 100%;
  height: 100%;
}

.notes-list__divider {
  margin: 0;
  padding: 0;
  border: none;
  height: 1px;
  background-color: #c1c3c5;
}

/* ============================================
   페이지네이션
   Figma: 188×20, 가로 중앙, 리스트 하단 56px
   ============================================ */
.notes-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(13.6px, 4.27vw, 20.5px);
  margin-top: clamp(47.8px, 14.93vw, 71.7px);
  padding-bottom: clamp(34.1px, 10.67vw, 51.2px);
}

.notes-pagination__prev,
.notes-pagination__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: #070d17;
  text-decoration: none;
}

.notes-pagination__prev--disabled,
.notes-pagination__next--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.notes-pagination__prev:focus,
.notes-pagination__next:focus {
  outline: none;
}

.notes-pagination__prev:focus-visible,
.notes-pagination__next:focus-visible {
  outline: 2px solid #1a1d21;
  outline-offset: 2px;
}

.notes-pagination__list {
  display: flex;
  align-items: center;
  gap: clamp(13.6px, 4.27vw, 20.5px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.notes-pagination__num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(10.2px, 3.2vw, 15.4px);
  height: clamp(17.1px, 5.33vw, 25.6px);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(13.6px, 4.27vw, 20.5px);
  line-height: clamp(17.1px, 5.33vw, 25.6px);
  letter-spacing: 0;
  color: #c1c3c5;
  text-decoration: none;
}

.notes-pagination__num--current {
  font-weight: 800;
  color: #070d17;
}

.notes-pagination__num--disabled {
  color: #9a9a9a;
  pointer-events: none;
}

.notes-pagination__num:focus {
  outline: none;
}

.notes-pagination__num:focus-visible:not(.notes-pagination__num--disabled) {
  outline: 2px solid #1a1d21;
  outline-offset: 2px;
}

/* 데스크탑 전용: 게시글 수 문구 (모바일에서 숨김) */
.notes-identity__count {
  display: none;
}

/* ============================================
   Desktop 1920px 기준 clamp() 반응형 적용
   스케일링 공식: clamp(값×0.5333, 값/1920×100vw, 값)
   1024px~1920px 스케일링, 1920px 초과 중앙 고정
   ============================================ */
@media screen and (min-width: 1024px) {
  /* Identity: 좌우 242px, 상단 72px, 콘텐츠 1435px */
  .notes-page .notes-identity {
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(38.4px, 3.75vw, 72px) clamp(192px, 18.75vw, 360px) 0;
  }

  .notes-identity__container {
    max-width: clamp(765.3px, 74.74vw, 1435px);
  }

  /* 제목 + 검색 한 줄: flex, 제목 좌측 / 검색 우측 */
  .notes-identity__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .notes-identity__title {
    font-size: clamp(30.9px, 3.02vw, 58px);
    line-height: clamp(37.3px, 3.65vw, 70px);
    margin: 0;
    text-align: left;
  }

  /* 검색: 412×58, radius 29px */
  .notes-search {
    width: clamp(219.7px, 21.46vw, 412px);
    max-width: clamp(219.7px, 21.46vw, 412px);
    height: clamp(30.9px, 3.02vw, 58px);
    flex-shrink: 0;
  }

  .notes-search__input {
    height: clamp(30.9px, 3.02vw, 58px);
    font-size: clamp(9.1px, 0.89vw, 17px);
    line-height: clamp(12.8px, 1.25vw, 24px);
    border-radius: clamp(15.5px, 1.51vw, 29px);
    padding-left: clamp(14.9px, 1.46vw, 28px);
    padding-right: clamp(14.9px, 1.46vw, 28px);
  }

  .notes-search__icon {
    left: auto;
    right: clamp(14.9px, 1.46vw, 28px);
  }

  /* 게시글 수: 48px 위아래 여백, 19px/38px */
  .notes-identity__count {
    display: block;
    margin: clamp(25.6px, 2.5vw, 48px) 0;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(10.1px, 0.99vw, 19px);
    line-height: clamp(20.3px, 1.98vw, 38px);
    letter-spacing: 0;
    color: #222831;
  }

  .notes-identity__count-num {
    font-weight: 900;
  }

  /* 리스트: 48px 위 여백, 좌우 242px, 콘텐츠 1435px */
  .notes-page .notes-list-section {
    max-width: 1920px;
    margin: clamp(25.6px, 2.5vw, 48px) auto 0;
    padding: 0 clamp(192px, 18.75vw, 360px) 0;
  }

  .notes-list__container {
    max-width: clamp(765.3px, 74.74vw, 1435px);
  }

  /* 리스트 행: 가로 배치, 날짜 17px / 제목 19px */
  .notes-list__link {
    flex-direction: row;
    align-items: center;
    min-height: clamp(20.8px, 2.03vw, 39px);
    padding: clamp(15.5px, 1.51vw, 29px) 0;
    gap: clamp(26.1px, 2.55vw, 49px);
  }

  .notes-list__content {
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0;
  }

  .notes-list__date {
    font-size: clamp(9.1px, 0.89vw, 17px);
    line-height: clamp(20.3px, 1.98vw, 38px);
    flex-shrink: 0;
    width: clamp(43.7px, 4.27vw, 82px);
    margin-left: clamp(10.1px, 0.99vw, 19px);
    margin-right: clamp(25.6px, 2.5vw, 48px);
  }

  .notes-list__title {
    font-size: clamp(10.1px, 0.99vw, 19px);
    line-height: clamp(20.3px, 1.98vw, 38px);
    -webkit-line-clamp: 1;
  }

  .notes-list__icon {
    width: clamp(10.7px, 1.04vw, 20px);
    height: clamp(10.7px, 1.04vw, 20px);
    flex-shrink: 0;
    margin-right: clamp(30.9px, 3.02vw, 58px);
  }

  /* 페이지네이션: 77px 위, 화살표 19px, 숫자 19px/24 */
  .notes-pagination {
    margin-top: clamp(41.1px, 4.01vw, 77px);
    padding-bottom: clamp(106.7px, 10.42vw, 200px);
    gap: clamp(10.1px, 0.99vw, 19px);
  }

  .notes-pagination__prev,
  .notes-pagination__next {
    width: clamp(10.1px, 0.99vw, 19px);
    height: clamp(10.1px, 0.99vw, 19px);
  }

  .notes-pagination__prev svg,
  .notes-pagination__next svg {
    width: clamp(10.1px, 0.99vw, 19px);
    height: clamp(10.1px, 0.99vw, 19px);
  }

  .notes-pagination__list {
    gap: clamp(10.1px, 0.99vw, 19px);
  }

  .notes-pagination__num {
    font-size: clamp(10.1px, 0.99vw, 19px);
    line-height: clamp(12.8px, 1.25vw, 24px);
    min-width: clamp(7.5px, 0.73vw, 14px);
    height: clamp(12.8px, 1.25vw, 24px);
  }
}