@charset "UTF-8";

/* min-width : 기본값 모바일 먼저
max-width : 기본값 데스크탑 먼저
신규 프로젝트 : min-width
기존 프로젝트 수정 : max-width */

/* @media (max-width: 375px) { } : 모바일 */
/* @media (max-width: 744px) { } : 태블릿 시작 */
/* @media (max-width: 768px) { } : 모바일과 태블릿 사이 경계선 (예전 기준) */
/* @media (max-width: 1024px) { } : 태블릿 ~ 소형 데스크탑 */
/* @media (max-width: 1280px) { } : 소형 노트북 */
/* @media (max-width: 1440px) { } : 데스크탑 */
/* @media (max-width: 1920px) { } : 와이드 모니터 */

/************************************* 1024 *************************************/
@media (max-width: 1024px) {
  /* 화면 왼쪽의 포트폴리오 없애기 */
  .side {
    display: none;
  }

  /* 화면 왼쪽 카테고리 가운데로 */
  header {
    justify-content: center;
  }

  /* 카테고리가 전체 너비를 차지하도록 */
  nav {
    width: 100%;
  }

  nav .nav-links {
    justify-content: space-between;
    gap: 0;
    white-space: nowrap;
  }

  /* 프로젝트 이미지 마우스 호버시 제거 */
  .project-content:hover .project-image img {
    transform: none;
  }
}

/************************************* 850 *************************************/
@media (max-width: 850px) {
  /* 프로젝트 */
  .projects-list {
    display: flex;
    flex-direction: column;
  }

  .project-title {
    font-size: 20px;
  }

  .tag {
    font-size: 10px;
  }
}

/************************************* 768 *************************************/
@media (max-width: 768px) {
  /* 상단 */
  header {
    padding: 30px 30px;
  }

  /* 인트로 */
  .greeting {
    font-size: 18px;
  }

  .intro-text {
    font-size: 48px;
  }

  .subtitle{
    font-size: 16px;
  }

  /* 스크롤 안내 */
  .scroll-indicator span{
    font-size: 14px;
  }

  /* 화살표 */
  .scroll-arrow{
    width: 25px;
    height: 25px;
    font-size: 16px;
  }

  /* Activities list */
  .Activities-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .Activities-title {
    flex-direction: row;
  }

  .Activities-course {
    flex-direction: row;
  }

  /* Connection */
  .contact-list {
    display: flex;
    flex-direction: column;
  }
}

/************************************* 430 *************************************/
@media (max-width: 430px) {
  /* 상단 */
  nav .nav-links a {
    font-size: 14px;
  }

  /* 프로젝트 */
  .project-title {
    font-size: 18px;
  }

  /* 하단 */
  footer {
    display: flex;
    justify-content: center;
  }
}