main {
  width: 973px;
}

.right-side-section {
  left: calc(50% + (970px / 2) + 48px) !important;
}

/*******************************************  category menu *******************************************/
.menu > div {
  margin: auto;
  width: 812px;
  padding-bottom: 30px;
}

.menu > div > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.menu > div > ul > li {
  cursor: pointer;
  position: relative;
  font-size: 24px;
  padding: 24px 30px;
  color: var(--black40);
}

.menu > div > ul > li::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(100% + 0px);
  left: 0;
  width: 0%;
  height: 4px;
  border-radius: 4px;
  background: var(--blue);
  transition: 1s all;
}

.menu > div > ul > li.action {
  border-radius: 10px 10px 0 0;
  background: #d4dfef60;
  color: var(--blue);
}

.menu > div > ul > li.action::after {
  width: 100%;
}

.menu > div > ul > li::before {
  content: "";
  position: absolute;
  display: block;
  top: calc(100% + 0px);
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(177, 184, 199, 0.25);
}

.menu > div > ul > li:hover {
  color: var(--black);
}

.menu > div > ul > li.action:hover {
  color: var(--blue);
}

/*******************************************  category menu *******************************************/

.search-section {
  margin: 0 auto 64px;
}

.search-box {
  margin: 0 auto 0;
  background: var(--pale-gray);
  border-radius: 57px;
  padding: 4px;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-box:hover {
  background: var(--gray-200);
}

.search-box > div {
  padding: 0 20px;
}

.search-input {
  background: none;
  width: 400px;
  font-size: 18px;
}

.search-input:focus {
  outline: none;
}

.search-button {
  padding: 20px 22px;
  border-radius: 28px;
  background: #172b4d;
  color: #ffffff;
  font-size: 16px;
}

/*******************************************  category search *******************************************/

/*******************************************  category search *******************************************/

/*******************************************  category title area 데이터 *******************************************/
.category-title-area {
  margin-top: 98px;
}

.category-main-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 48px;
  gap: 10px;
}

.category-sub-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  line-height: 130%;
  margin-bottom: 60px;
  text-align: center;
}

.category-week-best {
  color: var(--black80);
  padding: 7px 12px;
  border: 1px solid var(--black80);
  border-radius: 20px;
  margin: 0 auto 32px;
  text-align: center;
  width: max-content;
}

/*******************************************  category title area 데이터 *******************************************/

.product-best-title-box {
  position: relative;
  margin-top: 97px;
  margin-bottom: 47px;
}

.best-header {
  margin: 0 auto 47px;
  width: max-content;
  text-align: center;
}

.best-header h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--blue);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.best-subtitle {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
}

/*******************************************  category filter 데이터 *******************************************/
.category-filter-list {
  border-bottom: 1px solid #28282825;
}

.category-filter-list ul {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding-bottom: 8px;
}

.category-filter-item {
  width: 83px;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  cursor: pointer;
}

.category-filter-item > div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eff4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-filter-item.active > div {
  border: 2px solid var(--blue);
}

.category-filter-title {
  color: #28282850;
  font-size: 14px;
  font-weight: 600;
}

.category-filter-item:hover .category-filter-title {
  color: #282828;
}

.category-filter-item.active .category-filter-title {
  color: #282828;
}

.category-filter-item.active {
}

.category-filter-detail {
  position: relative;
  margin-top: 12px;
  overflow-x: scroll;
  height: 23px;
}

.category-filter-detail ul {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 16px;
}

.category-filter-detail-item {
  width: max-content;
  cursor: pointer;
  font-size: 14px;
  color: #28282850;
  font-weight: 600;
}

.category-filter-detail-item:hover {
  color: #282828;
}

.category-filter-detail-item.active {
  background: var(--blue);
  color: #ffffff;
  border-radius: 15px;
  padding: 4px 8px;
}

.category-filter-option ul {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
}

.category-filter-option {
  margin-top: 12px;
  overflow-x: scroll;
  height: 23px;
}

.category-filter-option-item {
  width: max-content;
  cursor: pointer;
  font-size: 14px;
  color: #28282850;
  font-weight: 600;
}

.category-filter-option-item:hover {
  color: #282828;
}

.category-filter-option-item.active {
  background: var(--blue);
  color: #ffffff;
  border-radius: 15px;
  padding: 4px 8px;
}

.category-filter-option::-webkit-scrollbar,
.category-filter-detail::-webkit-scrollbar {
  height: 0;
}

/* Chrome, Safari, Edge */
.category-filter-option::-webkit-scrollbar,
.category-filter-detail::-webkit-scrollbar {
  display: none;
}

/* Firefox */
.category-filter-option,
.category-filter-detail {
  scrollbar-width: none;
  /* Firefox에서 스크롤바 숨기기 */
}

/* IE 10+ (비표준 방법) */
.category-filter-option {
  -ms-overflow-style: none;
  /* IE 및 Edge에서 스크롤바 숨기기 */
}

/*******************************************  category filter 데이터 *******************************************/

/*******************************************  category button 데이터 *******************************************/
.category-filter-option-button,
.category-filter-detail-button {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: #172b4d57;
  border-radius: 4px;
  z-index: 3;
}

.left {
  left: 0%;
}

.right {
  left: 100%;
}

.category-filter-option-button > div,
.category-filter-detail-button > div {
  padding: 7px 8px;
}

/*******************************************  category button 데이터 *******************************************/

/*******************************************  best section 데이터 *******************************************/

.best-section > div {
  padding: 24px 16px;
  /* border: 1px solid #B1B8C750; */
  border-radius: 4px;
  /* box-shadow: 0px 2px 6.1px 0 #B1B8C743; */
  background: #b1b8c715;
}

.best-header {
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
}

.best-standard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 14px;
  color: #8b95a6;
  font-weight: 500;
}

.keyword_option_box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.keyword_option_box > div {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f3f4f7;
  color: #b1b8c7;
  padding: 6px 10px;
  border-radius: 15px;
}

.keyword_option_box > div.keyword_option_1.action {
  background: #e1eaff;
  color: var(--black);
}

.keyword_option_box > div.keyword_option_1.action input:checked {
  accent-color: var(--blue);
}

.keyword_option_box > div.keyword_option_2.action {
  background: #cff6e0;
  color: var(--black);
}

.keyword_option_box > div.keyword_option_2.action input:checked {
  accent-color: #0cab09;
}

.keyword-lists-box .keyword-list-header {
  padding: 0 14px;
}

.keyword-lists-box .keyword-list-header > div {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid #e8eaee;
  padding: 12px 0;
}

.keyword-lists-box .keyword-list-header div {
  color: var(--black60);
  font-size: 13px;
}
.product-lists-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.none-data {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 80px;
}
.product-lists-box ul {
  display: grid;
  grid-template-areas:
    "li1 li6"
    "li2 li7"
    "li3 li8"
    "li4 li9"
    "li5 li10";
  grid-template-columns: 1fr 1fr;
  row-gap: 6px;
  column-gap: 9px;
}

.product-lists-box li:nth-of-type(1) {
  grid-area: li1;
}

.product-lists-box li:nth-of-type(2) {
  grid-area: li2;
}

.product-lists-box li:nth-of-type(3) {
  grid-area: li3;
}

.product-lists-box li:nth-of-type(4) {
  grid-area: li4;
}

.product-lists-box li:nth-of-type(5) {
  grid-area: li5;
}

.product-lists-box li:nth-of-type(6) {
  grid-area: li6;
}

.product-lists-box li:nth-of-type(7) {
  grid-area: li7;
}

.product-lists-box li:nth-of-type(8) {
  grid-area: li8;
}

.product-lists-box li:nth-of-type(9) {
  grid-area: li9;
}

.product-lists-box li:nth-of-type(10) {
  grid-area: li10;
}

.product-lists-box li a {
  position: relative;
  display: flex;
}

.best-product-1st {
  color: var(--blue);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 70px;
}

.best-product-image-1st {
  min-width: 234px;
  max-width: 234px;
  height: 234px;
  overflow: hidden;
}

.best-product-summary-1st {
  padding: 14px 10px;
}

.best-product-option-1st {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 15px;
  margin-bottom: 15px;
}

.best-product-option-1st em {
  color: #b1b8c7;
}

.best-product-title-1st {
  margin-bottom: 20px;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 140%;
}

.best-product {
  background: #ffffff;
  border-radius: 0px 15px 15px 15px;
  position: relative;
}

.best-product-image {
  min-width: 173px;
  max-width: 173px;
  height: 173px;
  overflow: hidden;
  border-radius: 0px 0px 0px 15px;
}

.best-product-summary {
  padding: 12px 12px;
  position: relative;
  width: calc(100% - 173px);
}

.best-product-title {
  margin-bottom: 10px;
  line-height: 120%;
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.best-product-option {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 17px;
  margin-bottom: 15px;
}

.best-product-option em {
  color: #b1b8c7;
}

.best-product-delivery {
  display: flex;
  color: #9bb9ff;
}

.best-product-market {
  padding: 2px 5px;
  background: #5d6b82;
  color: #ffffff;
  width: max-content;
  font-size: 13px;
}

.best-product:hover {
  box-shadow: 0px 2px 6.1px 0px #b1b8c743;
}

.best-product:hover .best-product-title,
.best-product:hover .best-product-title-1st {
  text-decoration: underline;
}

.best-product img {
  transition: 0.5s all;
}

.best-product:hover .best-product-image img {
  transform: scale(1.2);
}

.product-rank {
  position: absolute;
  top: 0;
  left: 0;
}

.product-rank path {
  fill: #172b4d;
}

.product-lists-box li:nth-of-type(1) .product-rank path {
  fill: #f12c01;
}

.product-rank > div {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 13px;
}

.product-summary-rank {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--black80);
  margin-bottom: 12px;
  font-size: 14px;
  width: 100%;
}

.product-rank-checkbox {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  z-index: 2;
}

.product-rank-checkbox input[type="checkbox"] {
  /* Rectangle 140 */
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;

  /* Background/White */
  background: #ffffff;
  /* Theme color/Gray */
  border: 1px solid #b1b8c7;
  border-radius: 1px;

  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.product-rank-checkbox input[type="checkbox"]:checked {
  background-color: #3874ff;
  border-color: #3874ff;
}

.product-rank-checkbox input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  top: 2px;
  left: 5px;
  transform: rotate(45deg);
}

/*******************************************  best section 데이터 *******************************************/

.right-side-nav {
  position: absolute;
  left: calc(100% + 24px);
  top: 0;
  width: 244px;
}

/*******************************************  keyword section 데이터 *******************************************/

.keyword-lists-box {
  position: relative;
}

.keyword-lists-box > ul {
  /* display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px; */
  display: flex;
  flex-direction: column;
  grid-template-areas:
    "kli1 kli6"
    "kli2 kli7"
    "kli3 kli8"
    "kli4 kli9"
    "kli5 kli10";
  grid-template-columns: 1fr 1fr;
  row-gap: 6px;
  column-gap: 9px;
}

.keyword-lists-box.open > ul {
  grid-template-areas:
    "kli1 kli11"
    "kli2 kli12"
    "kli3 kli13"
    "kli4 kli14"
    "kli5 kli15"
    "kli6 kli16"
    "kli7 kli17"
    "kli8 kli18"
    "kli9 kli19"
    "kli10 kli20";
}

.keyword-lists-box li:nth-of-type(1) {
  grid-area: kli1;
}

.keyword-lists-box li:nth-of-type(2) {
  grid-area: kli2;
}

.keyword-lists-box li:nth-of-type(3) {
  grid-area: kli3;
}

.keyword-lists-box li:nth-of-type(4) {
  grid-area: kli4;
}

.keyword-lists-box li:nth-of-type(5) {
  grid-area: kli5;
}

.keyword-lists-box li:nth-of-type(6) {
  grid-area: kli6;
}

.keyword-lists-box li:nth-of-type(7) {
  grid-area: kli7;
}

.keyword-lists-box li:nth-of-type(8) {
  grid-area: kli8;
}

.keyword-lists-box li:nth-of-type(9) {
  grid-area: kli9;
}

.keyword-lists-box li:nth-of-type(10) {
  grid-area: kli10;
}

.keyword-lists-box li:nth-of-type(11) {
  grid-area: kli11;
  display: none;
}

.keyword-lists-box li:nth-of-type(12) {
  grid-area: kli12;
  display: none;
}

.keyword-lists-box li:nth-of-type(13) {
  grid-area: kli13;
  display: none;
}

.keyword-lists-box li:nth-of-type(14) {
  grid-area: kli14;
  display: none;
}

.keyword-lists-box li:nth-of-type(15) {
  grid-area: kli15;
  display: none;
}

.keyword-lists-box li:nth-of-type(16) {
  grid-area: kli16;
  display: none;
}

.keyword-lists-box li:nth-of-type(17) {
  grid-area: kli17;
  display: none;
}

.keyword-lists-box li:nth-of-type(18) {
  grid-area: kli18;
  display: none;
}

.keyword-lists-box li:nth-of-type(19) {
  grid-area: kli19;
  display: none;
}

.keyword-lists-box li:nth-of-type(20) {
  grid-area: kli20;
  display: none;
}

.keyword-lists-box.open li:nth-of-type(11) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(12) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(13) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(14) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(15) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(16) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(17) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(18) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(19) {
  display: flex;
}

.keyword-lists-box.open li:nth-of-type(20) {
  display: flex;
}

.keyword-lists-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 8px;
  width: 100%;
  height: 47px;
  border-radius: 4px;
}

.keyword-lists-item .good {
  background: #eff4ff;
  color: var(--blue);
  font-size: 13px;
  padding: 1px 6px;
}

.keyword-lists-item .normal {
  background: #cff6e0;
  color: #0cab09;
  font-size: 13px;
  padding: 1px 6px;
}

.keyword-lists-item .bad {
  background: var(--red15);
  color: var(--red);
  font-size: 13px;
  padding: 1px 6px;
}

.keyword-lists-number {
  min-width: 44px;
  color: var(--blue);
}

.keyword-lists-item:hover {
  background: #eef0f3;
}

.keyword-lists-keyword {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 402px;
  font-size: 17px;
  font-weight: 500;
}

.keyword-list-header .keyword-lists-keyword {
  width: 400px;
}

.keyword-lists-keyword > div {
  color: #9ba4b9;
}

.keyword-lists-keyword > div .fa-caret-up {
  color: var(--blue);
}

.keyword-highlight {
  position: absolute;
  width: 480px;
  background-color: var(--blue15);
  height: 41px;
  z-index: -1;
  transition: all 0.3s;
  top: 0%;
  left: 0%;

  border-radius: 4px;
}

.keyword-lists-competition {
  display: flex;
  gap: 4px;
  width: 120px;
}

.keyword-lists-search {
  width: 140px;
}

.keyword-lists-click {
  width: 90px;
}

.keyword-lists-product {
  width: 140px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: right;
}

.keyword-list-header .keyword-lists-product {
  width: 130px;
}

.keyword-lists-box.open .keyword-highlight {
}

@keyframes highlight1 {
  0%,
  100% {
    top: 0%;
    left: 0%;
  }

  10% {
    top: 20%;
    left: 0%;
  }

  20% {
    top: 40%;
    left: 0%;
  }

  30% {
    top: 60%;
    left: 0%;
  }

  40% {
    top: 80%;
    left: 0%;
  }

  50% {
    top: 0%;
    left: 50%;
  }

  60% {
    top: 20%;
    left: 50%;
  }

  70% {
    top: 40%;
    left: 50%;
  }

  80% {
    top: 60%;
    left: 50%;
  }

  90% {
    top: 80%;
    left: 50%;
  }
}

@keyframes highlight2 {
  0%,
  100% {
    top: 0%;
    left: 0%;
  }

  5% {
    top: 10%;
    left: 0%;
  }

  10% {
    top: 20%;
    left: 0%;
  }

  15% {
    top: 30%;
    left: 0%;
  }

  20% {
    top: 40%;
    left: 0%;
  }

  25% {
    top: 50%;
    left: 0%;
  }

  30% {
    top: 60%;
    left: 0%;
  }

  35% {
    top: 70%;
    left: 0%;
  }

  40% {
    top: 80%;
    left: 0%;
  }

  45% {
    top: 90%;
    left: 0%;
  }

  50% {
    top: 0%;
    left: 50%;
  }

  55% {
    top: 10%;
    left: 50%;
  }

  60% {
    top: 20%;
    left: 50%;
  }

  65% {
    top: 30%;
    left: 50%;
  }

  70% {
    top: 40%;
    left: 50%;
  }

  75% {
    top: 40%;
    left: 50%;
  }

  80% {
    top: 60%;
    left: 50%;
  }

  85% {
    top: 60%;
    left: 50%;
  }

  90% {
    top: 80%;
    left: 50%;
  }

  95% {
    top: 80%;
    left: 50%;
  }
}

.show-more-keyword {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #28282870;
  width: max-content;
  margin: 47px auto 0;
  cursor: pointer;
}

.keyword-lists-box.open .show-more-keyword {
  display: none;
}

/*******************************************  keyword section 데이터 *******************************************/

.none-best-keyword-box {
  margin-top: 122px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.none-best-keyword {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #8b95a6;
  font-size: 15px;
}

.best-keyword-loading {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  /* 로딩 테두리 기본 색상 */
  border-top: 2px solid var(--blue);
  /* 로딩 테두리 강조 색상 */
  border-radius: 50%;
  /* 원형으로 만들기 */
  animation: spin 1s linear infinite;
  /* 회전 애니메이션 */
}

/* 회전 애니메이션 정의 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 우선 보기 클릭 */
main.reverse {
}
/* main.reverse .best-section{
    transform: translateY(110%);
}
main.reverse .best-keyword-section{
    transform: translateY(-110%);
}
main.reverse .best-keyword-section .best-header{
    display: none;
} 

main.reverse .best-section .best-header{
    background: #ffffff;
} */

/* 공통 설정 */
.container {
  position: relative;
  min-height: 2400px;
  max-height: max-content;
  margin-top: 20px;
}

/* 기본 상태 */
.best-section,
.best-keyword-section {
  position: absolute;
  background: #ffffff;
  transition: all 1s ease; /* 전환 효과 통합 */
  width: 100%;
}

/* .best-section 기본 상태 */
.best-section {
  display: grid;
  gap: 12px;
  margin: 24px 0 150px;
  top: 0%;
}

/* .best-keyword-section 기본 상태 */
.best-keyword-section {
  margin-bottom: 80px;
  transform: translateY(0%);
  top: 1100px;
}

/* .best-header 기본 숨김 */
.best-section .best-header {
  display: none;
}

/* 반전 상태 - reverse */
main.reverse .container {
  flex-direction: column-reverse;
}

/* .best-section 반전 상태 */
main.reverse .best-section {
  top: 1200px;
}

/* .best-keyword-section 반전 상태 */
main.reverse .best-keyword-section {
  top: 0%;
}

/* .best-header 반전 상태 */
main.reverse .best-section .best-header {
  display: block;
  background: #ffffff;
}

/* 타이틀 반전 */
.top-header-product,
.top-header-keyword {
  transition: 1s opacity;
}
main.reverse .top-header-keyword,
.top-header-product {
  position: relative;
  top: 0;
  opacity: 1;
  z-index: 1;
}
main.reverse .top-header-product,
.top-header-keyword {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  opacity: 0;
  z-index: -1;
}

/* 전체 배경 스타일 */
.search-downloading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2); /* 반투명 배경 */
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
  z-index: 1000; /* 다른 요소 위로 표시 */
}

/* 로딩 스피너 */
.downloading {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.2); /* 회전 배경 */
  border-top: 4px solid var(--blue); /* 강조된 회전 색상 */
  border-radius: 50%; /* 원형으로 만들기 */
  animation: spin 1s linear infinite; /* 회전 애니메이션 */
}

/* 회전 애니메이션 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.navigation-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
}
.navigation-title {
  text-align: center;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.navigation-body {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}