#visual {
  margin-top: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#visual .visualImage {
  width: 240px;
}

#visual .content {
  h2 {
    color: white;
    font-size: 40px;
    font-weight: bold;
    display: flex;

    .backANM {
      position: relative;
      z-index: 1;
      padding: 0px 10px;
      font-style: italic;
      animation: electricEffect 3s ease-in-out infinite;
    }
    .backANM::after {
      content: "";
      top: 0;
      left: 0;
      z-index: -1;
      transition: 0.8s ease;
      animation: backANM 0.3s ease 0.2s forwards;
      width: 0%;
      height: 100%;
      background-color: var(--color-accent);
      display: block;
      position: absolute;
      border-bottom-right-radius: 10px;
      border-top-left-radius: 10px;
    }
  }
  p {
    margin-top: 5px;
    color: var(--color-text-subtle);
  }
}

@keyframes backANM {
  0%,
  40% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes electricEffect {
  0% {
    color: #ffffff; /* 기본 흰색 */
    text-shadow: none;
  }
  15% {
    color: #d3d3d3; /* 연한 흰색 */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
  }
  30% {
    color: #b0c4de; /* 약간 푸른색으로 */
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7); /* 불규칙적인 깜빡임 */
  }
  50% {
    color: #f5f5f5; /* 밝은 회색 */
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.6);
  }
  60% {
    color: #ffffff; /* 원래 흰색으로 돌아옴 */
    text-shadow: none;
  }
  75% {
    color: #dcdcdc; /* 다시 연한 흰색으로 */
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.8);
  }
  100% {
    color: #ffffff; /* 다시 흰색 */
    text-shadow: none;
  }
}

#search {
  margin-top: 30px;
}

#search .devCategoryBox {
  width: 100%;
  padding: 10px 10px;
  background-color: var(--color-accent);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    font-size: 18px;
    font-weight: 500;
    margin-left: 20px;
  }

  #devCategoryButton {
    margin-right: 20px;
    background-color: white;
    border-radius: 8px;
    padding: 10px 20px;
    transition: 0.2s ease;

    &:hover {
      background-color: rgb(218, 218, 218);
    }
  }
}

#content {
  margin-top: 100px;
}

#content .card-container {
  display: grid;
  gap: 20px; /* 카드들 간의 간격 */
  grid-template-columns: repeat(1, 1fr); /* 기본적으로 한 줄에 1개 카드 */

  /* 반응형 처리: 각 화면 크기에 맞춰 1개, 2개, 4개로 조정 */
  /* 600px 이상: 2개로 나누기 */
  @media (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 1000px 이상: 4개로 나누기 */
  @media (min-width: 1000px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 각 카드 */
#content .card {
  position: relative;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;

  .bage {
    font-size: 15px;
    position: absolute;
    top: 0;
    left: 10px;
    padding: 5px 10px;
    font-style: italic;
    z-index: 1;
  }

  .bage.web {
    background-color: var(--color-accent);
  }
  .bage.app {
    background-color: blue;
  }
  .bage.invent {
    background-color: green;
  }

  .image {
    position: relative;
    width: 100%;
    height: 140px;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition: 0.3s ease;
    }
  }

  &:hover img {
    transform: scale(1.1);
  }

  h3 {
    margin-bottom: 10px;
    height: 50px;
    word-break: keep-all;
    font-size: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* ✅ 최대 2줄 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .info {
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 최대 2줄 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em; /* 줄 간격 */
    max-height: calc(1.4em * 2); /* 정확히 2줄 높이까지만 보이게 */
  }

  .tags {
    display: flex;
    gap: 5px;

    .tag {
      font-size: 11px;
      background-color: var(--color-accent);
      padding: 2px 5px;
      border-radius: 100px;
      margin-top: 5px;
    }
  }
}

#pages {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
  gap: 10px;

  .number {
    width: 40px;
    height: 40px;
    padding: 10px;
    font-size: 15px;
    color: gray;
    border: 1px solid var(--color-accent);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s ease;

    &:hover {
      background-color: rgb(42, 42, 42);
      color: white;
    }
  }

  .number.check {
    background-color: var(--color-accent);
    color: white;
  }

  .numberDot {
    height: 40px;
    color: var(--color-text-subtle);
    display: flex;
    align-items: center;
  }
}

/* 모달 스타일 */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.436);
  backdrop-filter: blur(4px);
  display: none;
  justify-content: center;
  align-items: center;

  .contentBox.container {
    max-width: 800px;
  }

  .contentBox {
    height: 80%;
    background-color: var(--color-background);
    border-radius: 10px;
    padding: 20px 20px;

    .content {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .slider {
      width: 100%;
      height: 40vh;
      border-radius: 10px;
      overflow: hidden;
      position: relative;

      .images {
        display: flex;
        height: 100%;
        transition: transform 0.5s ease-in-out;

        img {
          object-fit: contain;
          flex: 0 0 100%;
          height: 100%;
        }
      }

      .dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 6px;
      }

      .dot {
        width: 10px;
        height: 10px;
        background-color: gray;
        border-radius: 50%;
        cursor: pointer;
      }

      .dot.active {
        background-color: var(--color-background);
      }
    }

    .title {
      width: 100%;
      word-break: keep-all;
      margin-top: 20px;
      font-size: 36px;
      color: var(--color-background);
      text-shadow: 1px 0px var(--color-text), 0px 1px var(--color-text),
        -1px 0px var(--color-text), 0px -1px var(--color-text);
      font-style: italic;
    }

    .tags {
      margin-top: 5px;
      display: flex;
      width: 100%;
      gap: 8px;

      span {
        font-size: 13px;
        color: white;
        border-radius: 100px;
      }
    }

    .linkVisit {
      margin-top: 30px;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;

      .smallBtn {
        padding: 8px 13px;
        background-color: var(--color-sub-background);
        color: var(--color-text);
        display: flex;
        align-items: center;
        gap: 5px;
        border-radius: 5px;
        transition: 0.2s ease;
        cursor: pointer;

        &:hover {
          background-color: var(--color-input-background);
        }

        svg {
          height: 20px;
          fill: var(--color-text);
        }
      }

      .webDemo {
        border-radius: 5px;
        background-color: var(--color-accent);
        color: white;
        font-size: 16px;
        width: 180px;
        height: 45px;
        cursor: pointer;
        transition: 0.2s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

        svg {
          width: 25px;
          fill: white;
        }

        &:hover {
          background-color: rgb(76, 68, 239);
        }
      }

      .appDemo {
        position: relative;
        border-radius: 5px;
        background-color: var(--color-background);
        color: white;
        font-size: 18px;
        width: 200px;
        height: 45px;
        display: flex;
        gap: 3px;
        align-items: center;

        .downArrow {
          width: 40px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: var(--color-sub-background);
          cursor: pointer;
          border-bottom-left-radius: 5px;
          border-top-left-radius: 5px;

          svg {
            width: 20px;
            fill: var(--color-text);
          }

          &:hover {
            background-color: var(--color-input-background);
          }
        }

        .selectContent {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 15px;
          transition: 0.2s ease;
          cursor: pointer;
          border-bottom-right-radius: 5px;
          border-top-right-radius: 5px;
          background-color: var(--color-sub-background);

          svg {
            width: 30px;
            margin-left: 10px;
          }

          &:hover {
            background-color: var(--color-input-background);
          }
        }

        .dropDown {
          z-index: 1;
          visibility: hidden;
          transform: translateY(-10px);
          opacity: 0;
          position: absolute;
          top: 50px;
          left: 43px;
          background-color: var(--color-sub-background);
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 157px;
          transition: 0.2s ease;

          .item {
            width: 100%;
            padding: 10px 0px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            transition: 0.2s ease;
            cursor: pointer;

            svg {
              width: 30px;
              margin-left: 10px;
            }
            img {
              width: 30px;
              margin-left: 10px;
            }

            &:hover {
              background-color: var(--color-input-background);
            }
          }
        }
      }
    }

    .contestAndNews {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      word-break: keep-all;

      .item.contest {
        border-left: 3px solid goldenrod;
      }

      .item.news {
        border-left: 3px solid skyblue;
      }

      .item {
        padding: 10px 10px;
        display: flex;
        display: flex;
        img {
          width: 120px;
          height: 120px;
          object-fit: contain;
        }

        .infoData {
          display: flex;
          flex-direction: column;
          margin-left: 10px;

          h2 {
            font-size: 23px;
            color: var(--color-text);
            display: flex;
            align-items: center;

            button {
              padding: 8px 12px;
              font-size: 13px;
              background-color: var(--color-input-background);
              border: none;
              border-radius: 8px;
              color: white;
              margin-left: 10px;
              transition: 0.2s ease;

              &:hover {
                background-color: #373737;
              }
            }
          }

          .des {
            font-size: 15px;
            color: var(--color-text-subtle);
            margin-top: 10px;
          }

          .other {
            font-size: 12px;
            color: gray;
            margin-top: 20px;
          }
        }
      }
    }

    .description {
      margin-top: 30px;
      width: 100%;
    }

    .timeLine {
      position: relative;
      margin-top: 30px;
      width: 100%;

      .timeLineCanvasBox {
        width: 100%;
        height: 300px;

        #timeLineCanvas {
          width: 100%;
          height: 300px;
          display: block;
        }
      }
    }
  }
}