:root {
      --accent: #8a4fff; /* 강조색 */
      --bg-light: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); /* 라이트 모드 배경 */
      --bg-dark: linear-gradient(135deg, #2c2c3e 0%, #3b3b4d 100%); /* 다크 모드 배경 */
    }

    /* body - 문서 전체 기본 스타일 */
    body {
      background: var(--bg-light);
      font-family: 'Segoe UI', 'Noto Sans KR', sans-serif;
      color: #fff;
      transition: background 0.3s, color 0.3s; /* 부드러운 전환 효과 */
    }

    /* 다크 모드일 때 body 스타일 */
    body.dark {
      background: var(--bg-dark);
      color: #eee;
    }

    /* glass - 반투명 유리 효과(Glassmorphism) 스타일 */
    .glass {
      background: rgba(255, 255, 255, 0.15); /* 반투명 흰색 배경 */
      border-radius: 1rem; /* 둥근 모서리 */
      backdrop-filter: blur(12px); /* 배경 흐림 효과 */
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
      transition: background 0.3s, border 0.3s;
    }

    /* 다크 모드일 때 .glass 스타일 */
    body.dark .glass {
      background: rgba(30, 30, 30, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* navbar - 네비게이션 바 스타일 */
    .navbar {
      background: rgba(255, 255, 255, 0.1) !important;
      backdrop-filter: blur(10px);
    }

    body.dark .navbar {
      background: rgba(0, 0, 0, 0.6) !important;
    }

    /* 네비게이션 바 로고 및 링크 스타일 */
    .navbar-brand,
    .nav-link {
      color: #fff !important;
      font-weight: 600;
    }

    body.dark .navbar-brand,
    body.dark .nav-link {
      color: #eee !important;
    }

    /* hero - 페이지 최상단 메인 영역 스타일 */
    .hero {
      min-height: 60vh; /* 최소 높이를 화면 높이의 60%로 설정 */
      display: flex; /* Flexbox 레이아웃 사용 */
      align-items: center; /* 수직 중앙 정렬 */
      justify-content: center; /* 수평 중앙 정렬 */
      text-align: center;
      flex-direction: column; /* 아이템을 세로로 배치 */
    }

    /* hero 영역의 h1 태그 스타일 */
    .hero h1 {
      font-size: 3rem;
      font-weight: 700;
      text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
      animation: fadeDown 1.2s ease; /* 아래로 내려오는 애니메이션 적용 */
      color: inherit;
      transition: color 0.3s;
      letter-spacing: normal;
    }

    /* hero 영역의 p 태그 스타일 */
    .hero p {
      transition: color 0.3s;
      color: inherit;
    }

    /* fadeDown 애니메이션 정의 */
    @keyframes fadeDown {
      from {
        opacity: 0; /* 시작: 투명 */
        transform: translateY(-30px); /* 시작: 위쪽으로 30px 이동 */
      }
      to {
        opacity: 1; /* 끝: 불투명 */
        transform: translateY(0); /* 끝: 제자리 */
      }
    }

    /* card-role - 'Works' 섹션의 카드 스타일 */
    .card-role {
      border: 0;
      border-radius: 1rem;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(6px);
      color: #fff;
      transition: background 0.3s, color 0.3s;
    }

    body.dark .card-role {
      background: rgba(50, 50, 50, 0.6);
      color: #eee;
    }

    /* btn-accent - 강조 버튼 스타일 */
    .btn-accent {
      background: var(--accent);
      border: 0;
      color: #fff;
      font-weight: 600;
    }
    .btn-accent:hover {
      background: #7a3fe0; /* 마우스 올렸을 때 색상 변경 */
      color: #fff;
    }

    /* label - 폼 라벨 스타일 */
    label {
      color: #fff;
      transition: color 0.3s;
    }

    body.dark label {
      color: #eee;
    }

    /* form-control, form-select - 폼 입력 필드 스타일 */
    .form-control,
    .form-select {
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: background 0.3s, color 0.3s, border 0.3s;
    }

    body.dark .form-control,
    body.dark .form-select {
      background: rgba(50, 50, 50, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #eee;
    }

    /* footer - 하단 푸터 영역 스타일 */
    footer {
      background: rgba(0, 0, 0, 0.2);
      padding: 2rem 0;
      transition: background 0.3s;
    }

    body.dark footer {
      background: rgba(0, 0, 0, 0.6);
    }

    /* backToTop - '맨 위로' 버튼 스타일 */
    #backToTop {
      position: fixed; /* 화면에 고정 */
      right: 1rem;
      bottom: 1rem;
      width: 48px;
      height: 48px;
      border-radius: 50%; /* 원형 버튼 */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
      background: var(--accent);
      color: #fff;
      border: none;
      cursor: pointer;
      font-size: 1.5rem;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
      display: none; /* 기본적으로 숨김 */
    }

    /* collab-link - 협업툴 링크 스타일 */
    .collab-link {
      color: #fff;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.5rem; /* 아이콘과 텍스트 사이 간격 */
      transition: transform 0.2s, color 0.2s;
    }

    body.dark .collab-link {
      color: #eee;
    }

    .collab-link i {
      transition: transform 0.2s;
      font-size: 1.5rem;
    }

    /* 협업툴 링크에 마우스 올렸을 때 효과 */
    .collab-link:hover {
      color: #8a4fff;
      transform: translateY(-3px); /* 살짝 위로 이동 */
    }
    .collab-link:hover i {
      transform: scale(1.2); /* 아이콘 확대 */
    }