.archive-search-wrapper {
  /* display: flex;
  justify-content: end;
  align-items: center; */

  background-color: #fff;
  border: 1px solid #ccc;
  /* border-radius: 20px; */
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 25px;
  margin-bottom: 25px;
}

.archive-search-wrapper > form {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 5px 0vw;
  gap: 10px;
}

.archive-search-member select,
.archive-search-category select {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #333;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f7f7f7;
}

.archive-search-title input[type="text"] {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f7f7f7;
  width: 180px;
}

#archive-search-button,
#archive-songlist-search-button {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #fff;
  background-color: #ff69b4;
  border: none;
  border-radius: 10px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#archive-search-button:hover,
#archive-songlist-search-button:hover {
  background-color: #ff8cbb;
}

.archive-search-title input[type="text"]:focus,
.archive-search-member select:focus,
.archive-search-category select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5);
}
.archive-paging-container {
  display: flex;
  align-items: center;
  height: 45px;
  margin: 25px 0px;
}
.archive-paging-start {
  width: 100px;
}
.archive-paging-unit-prev {
  width: 150px;
}
.archive-paging-no-div {
  display: flex;
  justify-content: center;
  flex: 1;
}
.archive-paging-unit-next {
  width: 150px;
}
.archive-paging-end {
  width: 100px;
}
/*모달 시작*/
.dialog-container {
  display: none;
  position: fixed;
  z-index: 1;
  left: 300px;
  top: 0;
  width: 650px;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* 모달 끝*/

/* 아카이브 버튼 부분 시작 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap");

.cute-button {
  font-family: "Noto Sans JP", sans-serif; /* 일본어 텍스트에 어울리는 글꼴 사용 */
  font-size: 1rem; /* 글자 크기 */
  color: #fff; /* 텍스트 색상 */
  background: linear-gradient(
    45deg,
    #ff69b4,
    #ff9a9e
  ); /* 버튼 배경색 그라데이션 */
  border: none; /* 기본 테두리 제거 */
  border-radius: 20px; /* 둥근 테두리 */
  padding: 10px 20px; /* 내부 여백 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 상자 그림자 */
  cursor: pointer; /* 커서 변경 */
  transition: background 0.3s ease, transform 0.3s ease; /* 부드러운 전환 효과 */
}

.cute-button:hover {
  background: linear-gradient(
    45deg,
    #ff85c1,
    #ffb6c1
  ); /* 호버 시 배경색 그라데이션 변경 */
  transform: translateY(-3px); /* 호버 시 살짝 위로 이동 */
}

.cute-button:active {
  background: linear-gradient(
    45deg,
    #ff85c1,
    #ffb6c1
  ); /* 클릭 시 배경색 유지 */
  transform: translateY(0); /* 클릭 시 원래 위치로 돌아감 */
}

.cute-button:focus {
  outline: none; /* 포커스 시 기본 아웃라인 제거 */
  box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5); /* 포커스 시 그림자 효과 추가 */
}

.cute-button-gray {
  font-family: "Noto Sans JP", sans-serif; /* 일본어 텍스트에 어울리는 글꼴 사용 */
  font-size: 1rem; /* 글자 크기 */
  color: #fff; /* 텍스트 색상 */
  background: linear-gradient(
    45deg,
    #696969,
    #999999
  ); /* 버튼 배경색 그라데이션 */
  border: none; /* 기본 테두리 제거 */
  border-radius: 20px; /* 둥근 테두리 */
  padding: 10px 20px; /* 내부 여백 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 상자 그림자 */
  cursor: pointer; /* 커서 변경 */
  transition: background 0.3s ease, transform 0.3s ease; /* 부드러운 전환 효과 */
}

.cute-button-gray:hover {
  background: linear-gradient(
    45deg,
    #6985ff,
    #69c3ff
  ); /* 호버 시 배경색 그라데이션 변경 */
  transform: translateY(-3px); /* 호버 시 살짝 위로 이동 */
}

.cute-button-gray:active {
  background: linear-gradient(
    45deg,
    #6985ff,
    #69c3ff
  ); /* 클릭 시 배경색 유지 */
  transform: translateY(0); /* 클릭 시 원래 위치로 돌아감 */
}

.cute-button-gray:focus {
  outline: none; /* 포커스 시 기본 아웃라인 제거 */
  box-shadow: 0 0 0 3px rgba(105, 153, 255, 0.5); /* 포커스 시 그림자 효과 추가 */
}
/* 아카이브 버튼 부분 끝 */

.archive-paging-no {
  cursor: pointer;
  padding: 10px;
  border: 1px solid gray;
}
.archive-page-no2 {
  cursor: pointer;
  padding: 10px;
  border: 1px solid gray;
}
.archive-page-no2:hover {
  background-color: #eeeeee;
}
.archive-list {
  width: 1800px;
}

#archive-list {
  display: flex;
  flex-direction: column;
}

.archive-contents {
  display: flex;
  align-items: center;
  padding: 3px 0;
}

#archive-list .archive-contents:first-child {
  border-top: 2px solid #e6498e;
}

#archive-list .archive-contents:last-child {
  border-bottom: 2px solid #e6498e;
}

.archive-contents {
  display: flex;
  align-items: center;
  border-top: 1px solid #e6498e;
  border-bottom: 1px solid #e6498e;
  padding: 3px 0px;
}

.archive-contents:hover {
  background-color: #eeeeee;
}

.archive-contents > div {
  height: auto;
  text-align: center;
}

.archive-contents-update {
  display: flex;
  align-items: center;
  border-top: 1px solid #e6498e;
  border-bottom: 1px solid #e6498e;
  padding: 3px 0px;
  margin-top: 50px;
}
.archive-contents-update > div {
  height: auto;
  text-align: center;
}

.archive-contents-update:hover {
  background-color: #eeeeee;
}

.archive-update-div {
  width: 80px;
}

.archive-icon-div {
  margin-left: 10px;
}

.archive-icon {
  width: 90px;
  height: 90px;
  border-radius: 90px;
}

.archive-membername {
  width: 140px;
}

/* 기본 select 스타일 */
select[name="collabo"] {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #333;
  border-radius: 12px;
  padding: 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"> <path d="M7.247 11.14l-4.796-5.481c-.566-.647-.106-1.659.753-1.659h9.592c.86 0 1.32 1.012.754 1.659l-4.796 5.48a1 1 0 0 1-1.508 0z"/> </svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* hover 스타일 */
select[name="collabo"]:hover {
  background-color: #ffe1eb;
  border-color: #e6498e;
}

/* focus 스타일 */
select[name="collabo"]:focus {
  outline: none;
  box-shadow: 0 0 5px #ff69b4;
  border-color: #ff69b4;
}

select[name="member"]:hover {
  background-color: #ffe1eb;
  border-color: #e6498e;
}

/* Focus 스타일 */
select[name="member"]:focus {
  outline: none;
  box-shadow: 0 0 5px #ff69b4;
  border-color: #ff69b4;
}

select[name="category"] {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #333;

  border-radius: 12px;
  padding: 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"> <path d="M7.247 11.14l-4.796-5.481c-.566-.647-.106-1.659.753-1.659h9.592c.86 0 1.32 1.012.754 1.659l-4.796 5.48a1 1 0 0 1-1.508 0z"/> </svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover 스타일 */
select[name="category"]:hover {
  background-color: #ffe1eb;
  border-color: #e6498e;
}

/* Focus 스타일 */
select[name="category"]:focus {
  outline: none;
  box-shadow: 0 0 5px #ff69b4;
  border-color: #ff69b4;
}

.archive-collabo {
  width: 140px;
}

.archive-collabo-member {
  width: 110px;
}

.archive-category {
  width: 110px;
}

.archive-date {
  width: 100px;
}

.archive-time {
  width: 70px;
}

.archive-title {
  flex: 1;
  padding: 0px 10px;
}

.archive-thumbnail > a > img {
  width: 160px;
  height: 90px;
}

.archive-thumbnail > a > img:hover {
  opacity: 0.5;
}

.archive-modal-detail {
  display: flex;
}

.archive-modal-detail > div {
  width: 170px;
}

.archive-modal-detail-gen {
  padding: 10px 0px;
  border-bottom: 1px solid gray;
}
#archive-list {
  opacity: 0.3; /* 초기 투명도 설정 */
}
#archive-list2 {
  opacity: 0.3; /* 초기 투명도 설정 */
}

.openModalButton {
  display: none; /* 기본적으로 버튼을 숨김 */
  font-family: "Noto Sans JP", sans-serif; /* 일본어 텍스트에 어울리는 글꼴 사용 */
  font-size: 1rem; /* 글자 크기 */
  color: #fff; /* 텍스트 색상 */
  background: linear-gradient(
    45deg,
    #ff69b4,
    #ff9a9e
  ); /* 버튼 배경색 그라데이션 */
  border: none; /* 기본 테두리 제거 */
  border-radius: 20px; /* 둥근 테두리 */
  padding: 10px 20px; /* 내부 여백 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 상자 그림자 */
  cursor: pointer; /* 커서 변경 */
  transition: background 0.3s ease, transform 0.3s ease; /* 부드러운 전환 효과 */
}

.archive-collabo-member-item {
  display: inline-block;
  border-radius: 5px;
  color: #ffffff;
  font-size: 9pt;
  font-weight: bold;
  width: auto;
  padding: 3px;
  margin: 2px;
}
/* 25명 멤버의 퍼스널컬러 배경색깔 넣어주기*/
.archive-七彩てまり {
  background-color: lightpink;
}

.archive-田中りゅこ {
  background-color: #a5cdec;
}

.archive-夜夢瑠紅 {
  background-color: #cdb8ff;
}

.archive-赤衣アカメ {
  background-color: #c25b7c;
}

.archive-星ノ音コロン {
  background-color: #ffd6d4;
}

.archive-愛咲よつのは {
  background-color: #8bec97;
}

.archive-玉ノ井もなか {
  background-color: #d6baeb;
}

.archive-綾坂希穂 {
  background-color: #ffb9bb;
}

.archive-ソフィ・ローズ {
  background-color: #bfd2ee;
}

.archive-天海くりね {
  background-color: #b7f1ff;
}

.archive-鳳儚 {
  background-color: #d1b7a4;
}

.archive-小日向千虎 {
  background-color: #ffe089;
}

.archive-白砂つな {
  background-color: #cf80e0;
}

.archive-橘シエナ {
  background-color: #ffa658;
}

.archive-ミラ・ルプス {
  background-color: #bdde87;
}

.archive-銀灰まお {
  background-color: #c4bec9;
}

.archive-リン・ガーネット {
  background-color: #d4485f;
}

.archive-明堂しろね {
  background-color: #de617e;
}

.archive-華糖シェリー {
  background-color: #77788f;
}

.archive-ぺるぽ {
  background-color: #b2e2f7;
}

.archive-叶望ゆゆ {
  background-color: #bf8ade;
}

.archive-雫川なのか {
  background-color: #cdedff;
}

.archive-堕天しすた {
  background-color: #c5c2c3;
}

.archive-山寧恋 {
  background-color: #fac6d3;
}

.archive-翠森アトリ {
  background-color: #bec48b;
}

/* 아카이브 페이징 css */
.archive-paging-container {
  margin-top: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* margin: 20px 0; */
  font-family: "Noto Sans JP", sans-serif;
}

.archive-paging-container > div {
  border-radius: 20px;
  margin-left: 10px;
}

.archive-paging-container a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(45deg, #ffbd69, #ff8e69);
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.archive-paging-container a:hover {
  background: linear-gradient(45deg, #ffb64d, #ff8e4d);
  transform: translateY(-3px);
}

.archive-paging-container a:active {
  background: linear-gradient(45deg, #ffb64d, #ff8e4d);
  transform: translateY(0);
}

.archive-paging-container a:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 189, 105, 0.5);
}

.archive-paging-no-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.archive-paging-no {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.archive-paging-no:hover,
.archive-paging-no.active {
  background-color: #ff8e69;
  color: #fff;
  transform: scale(1.1);
}

/* 끝 */

/* 우타와꾸 리스트 CSS */

.archive-songlist-modal-container {
  display: none; /* 기본적으로 숨김 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 배경 반투명 */
}

.archive-songlist-modal {
  position: absolute;
  background-color: #fff;
  margin: auto;
  padding: 1vw;
  border-radius: 1vw;
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.archive-songlist-modal-youtube-container,
.archive-songlist-modal-excel-container,
.archive-songlist-modal-final-container {
  display: none;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.archive-songlist-modal-textarea {
  width: 80%;
  height: 100%;
  margin-top: 1%;
}

.archive-songlist-items {
  display: flex;
  padding: 0.5vw;
}

.archive-songlist-update,
.archive-songlist-delete {
  width: 5vw;
}

.archive-songlist-time {
  width: 10vw;
  padding: 0vh 0.5vw;
  display: flex;
  align-items: center;
}

.archive-songlist-time > a {
  text-decoration: none;
  font-weight: bold;
  color: blue;
}

.archive-songlist-title,
.archive-songlist-artist,
.archive-songlist-vocaloidp,
.archive-songlist-etc {
  width: 18vw;
  padding: 0vh 0.5vw;
  display: flex;
  align-items: center;
}

.archive-songlist-modal-close-button {
  height: 10%;
}

.archive-songlist-modal-buttons {
  height: 20%;
}

.archive-songlist-modal-youtube-container,
.archive-songlist-modal-excel-container,
.archive-songlist-modal-final-container {
  height: 65%;
}

/* update song list modal*/

.archive-songlist-modal-update-container {
  display: none; /* 기본적으로 숨김 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 배경 반투명 */
}

.archive-songlist-modal-update {
  position: absolute;
  background-color: #fff;
  margin: auto;
  padding: 1vw;
  border-radius: 1vw;
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  text-align: center;
}