/* 1. 배경: 그라데이션 중심을 왼쪽(사이드바 쪽)으로 이동 */
body {
  margin: 0;
  display: flex;
  height: 100vh;
  /* ⭐️ 왼쪽 상단(0% 0%)과 왼쪽 중앙(0% 50%)에 블루 포인트를 줘서 사이드바 뒤를 채움 */
  background: radial-gradient(at 0% 0%, rgba(49, 130, 246, 0.4) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(49, 130, 246, 0.2) 0px, transparent 50%),
    #f2f4f6;
  /* 베이스는 깨끗한 토스 그레이 */
  background-attachment: fixed;
  /* 배경 그라데이션이 스크롤해도 움직이지 않고 고정됨 */
  font-family: 'Pretendard', -apple-system, sans-serif;
  overflow: hidden;
}

/* 2. 사이드바: 뒤에 비치는 블루를 더 쫀득하게 표현 */
.sidebar {
  width: 280px;
  /* 유리 느낌을 위해 투명도를 살짝 더 낮춤 (배경색이 더 잘 비치게) */
  background: rgba(255, 255, 255, 0.1);

  /* ⭐️ 블러를 40px로 높여서 뒤의 블루를 아주 몽글몽글하게 확산시킴 */
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);

  /* 유리의 입체감을 살리는 아주 얇고 밝은 테두리 */
  border-right: 1px solid rgba(255, 255, 255, 0.3);

  padding: 40px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  /* 왼쪽에서 빛이 들어오는 듯한 은은한 그림자 */
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.02);
}

/* 2. 상단: 프로필 영역 (이미지와 텍스트 정렬) */
.profile-section {
  text-align: center;
  /* 내부의 이미지와 글자를 모두 가운데 정렬 */
  margin-bottom: 40px;
  /* 메뉴 영역과의 간격 확보 */
}

.profile-image {
  width: 90px;
  /* 이미지 원의 너비 */
  height: 90px;
  /* 이미지 원의 높이 */
  background-color: #ffffff;
  /* 배경을 하얗게 설정 */
  border-radius: 50%;
  /* 50%를 깎아서 완벽한 원형으로 만듦 */
  margin: 0 auto 20px;
  /* 상단 0, 좌우 자동(가운데), 하단 20px 마진 */
  display: flex;
  /* 이모지(👤)를 정중앙에 놓기 위해 Flex 사용 */
  justify-content: center;
  /* 가로 중앙 정렬 */
  align-items: center;
  /* 세로 중앙 정렬 */
  font-size: 45px;
  /* 내부 이모지 크기 키우기 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  /* 바닥에 살짝 뜬 듯한 부드러운 그림자 */
}

.user-name {
  font-size: 22px;
  /* 이름 텍스트 크기 */
  color: #333d4b;
  /* 토스 메인 텍스트 색상 (짙은 회색) */
  margin: 0 0 8px 0;
  /* 아래 역할 텍스트와의 간격 */
  font-weight: 700;
  /* 이름을 가장 두껍게 강조 */
}

.user-role {
  font-size: 14px;
  /* 역할 텍스트 크기 */
  color: #6b7684;
  /* 보조 텍스트 색상 (부드러운 회색) */
  font-weight: 500;
  /* 적당한 굵기 설정 */
}

/* 3. 중간: 메뉴 리스트 영역 */
.sidebar-menu {
  flex: 1;
  /* 남는 중간 공간을 이 영역이 모두 차지하게 함 */
  margin-top: 20px;
  /* 프로필 영역과의 여유 공간 */
}

.sidebar-menu ul {
  list-style: none;
  /* 리스트 특유의 점(●) 제거 */
  padding: 0;
  /* 기본 패딩 제거 */
  margin: 0;
  /* 기본 마진 제거 */
}

.sidebar-menu li {
  padding: 14px 18px;
  /* 클릭 영역을 확보하기 위한 내부 여백 */
  border-radius: 12px;
  /* 메뉴 모서리를 둥글게 깎음 */
  margin-bottom: 10px;
  /* 메뉴 항목들 사이의 수직 간격 */
  color: #4e5968;
  /* 메뉴 글자 색상 */
  font-size: 15px;
  /* 메뉴 글자 크기 */
  font-weight: 600;
  /* 가독성을 위해 약간 두껍게 */
  cursor: pointer;
  /* 마우스를 올리면 손가락 모양으로 변경 */
  transition: all 0.2s ease;
  /* 배경색, 글자색 변화를 0.2초 동안 부드럽게 재생 */
}

/* 메뉴에 마우스를 올리거나(Hover) 현재 활성화된(Active) 상태 */
.sidebar-menu li.active,
/* 3. 메뉴: 마우스 올렸을 때 흰색 유리가 더 덧대어지는 느낌 */
.sidebar-menu li:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: #3182f6;
  backdrop-filter: blur(10px);
  /* 메뉴 위에도 작은 유리막 효과 */
  transform: translateX(8px);
  /* 조금 더 역동적으로 이동 */
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 튕기는 듯한 부드러운 애니메이션 */
}

/* 4. 하단: 정보 영역 (위치, 연락처) */
.sidebar-footer {
  padding-top: 20px;
  /* 구분선과 텍스트 사이의 여백 */
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  /* 상단에 얇은 구분선 추가 */
  font-size: 13px;
  /* 부가 정보이므로 크기를 작게 조절 */
  color: #8b95a1;
  /* 연한 회색으로 시각적 중요도 낮춤 */
  line-height: 1.8;
  /* 줄 간격을 넓혀서 가독성 확보 */
}

/* 두 번째 화면: 칸반 보드 전용 (회색 배경 꽉 차게!) */
.board-container {
  width: 100%;
  height: 100%;
  background-color: transparent;
  /* ⭐️ 기존 #f2f4f6를 지우고 투명하게 바꿉니다. */
  /* ⭐️ 핵심 수정: 위쪽 패딩을 80px로 늘려서 스위치가 자리 잡을 공간 확보! */
  /* 순서: 위(80px) 오른쪽(40px) 아래(40px) 왼쪽(40px) */
  padding: 80px 40px 40px 40px;
  display: flex;
  gap: 24px;
  box-sizing: border-box;
}

/* 3. 칸반 기둥(Column)을 '투명 유리판'으로 변신 */
.column {
  flex: 1;
  /* 배경을 반투명한 흰색으로 설정하여 뒤의 블루 그라데이션이 비치게 합니다. */
  background: rgba(255, 255, 255, 0.2);

  /* ⭐️ 핵심: 뒤를 흐릿하게 만드는 블러 효과 */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  /* 유리의 테두리 느낌을 주는 얇은 선 */
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  /* 조금 더 둥글게 깎아서 토스 느낌을 살립니다. */
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  /* 입체감을 위한 은은한 그림자 */

  /* 기둥이 너무 좁아지지 않게 최소 너비 설정 */
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

/* 기둥 안의 제목(To Do 등) 스타일 */
.column h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #333d4b;
  /* 텍스트를 조금 더 진하게 하여 유리 위에서도 잘 보이게 합니다. */
  font-weight: 700;
}

/* 5. 카드 디자인 (배경이 비치면 글자가 안 보일 수 있으니 흰색 유지) */
.task-card {
  background: #ffffff;
  /* 카드는 가독성을 위해 불투명한 흰색 유지 */
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* 카드에 마우스를 올렸을 때(Hover) 효과 - QA 테스트 필수 항목! */
.task-card:hover {
  transform: translateY(-5px);
  /* 살짝 떠오르는 효과 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* 카드 안의 꼬리표(태그) 스타일 */
.tag {
  background-color: #e8f3ff;
  color: #1b64da;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}

/* 카드 안의 제목 스타일 */
.task-title {
  margin: 0;
  font-size: 15px;
  color: #333d4b;
  font-weight: 500;
}

/* 전체 스크롤 컨테이너 설정 */
.scroll-container {
  flex: 1;
  /* 사이드바 빼고 나머지 오른쪽 공간 다 차지 */
  height: 100vh;
  /* 화면 높이 100% */
  overflow-y: scroll;
  /* 세로로 스크롤 가능하게 */
  scroll-snap-type: y mandatory;
  /* ⭐️ 세로(y) 방향으로 스크롤할 때 무조건(mandatory) 딱딱 걸리게 해라! */
}

/* 각각의 페이지(화면) 설정 */
.page {
  width: 100%;
  height: 100vh;
  /* 각 페이지도 화면 높이에 딱 맞춤 */
  scroll-snap-align: start;
  /* ⭐️ 스크롤이 멈출 때 화면 맨 위(start)에 딱 맞춰서 멈춰라! */
}

/* 로드맵 화면 전체 정렬 (위에서 수정했던 부분에 추가) */
.roadmap-container {
  display: flex;
  flex-direction: column;
  /* 세로로 배치 */
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* 로드맵 화면 전체 정렬 */
.roadmap-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

.roadmap-title {
  font-size: 32px;
  color: #333d4b;
  margin-bottom: 80px;
  /* 제목과 지도의 간격 */
}

/* ⭐️ 가로형 타임라인 전체 박스 */
.horizontal-timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: 1000px;
  /* 너무 넓어지지 않게 제한 */
}

/* 가로 중심선 */
.timeline-line {
  position: absolute;
  top: 20px;
  /* 마커(동그라미)의 정중앙을 관통하도록 위치 조정 */
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #e5e8eb;
  /* 연한 회색 길 */
  z-index: 0;
  border-radius: 4px;
}

/* 각각의 일정 박스 */
.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  /* 가로 공간을 4등분해서 공평하게 나눠 가짐 */
  z-index: 1;
  padding: 0 10px;
}

/* 진행 상황을 보여주는 동그란 마커 */
.marker {
  width: 44px;
  height: 44px;
  background-color: white;
  border: 4px solid #3182f6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  margin-bottom: 24px;
  /* 마커와 텍스트 카드 사이 간격 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

/* 텍스트가 들어가는 카드 본체 */
.content {
  background-color: white;
  padding: 24px 20px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #f2f4f6;
  transition: all 0.2s ease;
}

/* 마우스를 올렸을 때의 쫀득한 액션 */
.timeline-item:hover .marker {
  transform: scale(1.2);
  /* 마커가 커짐 */
}

.timeline-item:hover .content {
  transform: translateY(-8px);
  /* 카드가 살짝 떠오름 */
  border-color: #3182f6;
  /* 테두리가 파란색으로 변함 */
}

/* 텍스트 스타일 */
.content h4 {
  margin: 0 0 12px 0;
  color: #3182f6;
  font-size: 18px;
  font-weight: 700;
}

.content p {
  margin: 0;
  color: #4e5968;
  font-size: 14px;
  line-height: 1.5;
  /* 줄 간격을 넓혀서 가독성 확보 */
}

/* ⭐️ 스크롤 유도 화살표 전체 컨테이너 */
.scroll-down-indicator {
  position: absolute;
  bottom: 40px;
  /* 화면 맨 아래에서 살짝 띄움 */
  left: 50%;
  transform: translateX(-50%);
  /* 정확히 화면 정중앙에 오도록 계산 */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #8b95a1;
  /* 토스 회색 */
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  /* 나중에 클릭 시 넘어가게 JS 연결할 때를 대비 */
  z-index: 10;
  /* 지도 선이나 다른 요소들보다 무조건 위에 보이게 */
  opacity: 0.7;
  transition: opacity 0.3s;
}

/* 마우스 올리면 진해짐 */
.scroll-down-indicator:hover {
  opacity: 1;
}

/* ⭐️ 위아래로 통통 튀는 애니메이션 만들기 */
@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
    /* 위로 10px 점프 */
  }

  60% {
    transform: translateY(-5px);
    /* 위로 5px 점프 */
  }
}

/* 애니메이션을 화살표 기호에만 적용 */
.scroll-down-indicator .arrow {
  font-size: 24px;
  margin-top: 8px;
  animation: bounce 2s infinite;
  /* bounce 애니메이션을 2초 주기로 무한 반복! */
}

/* (중요!) 화살표가 첫 화면을 기준으로 하단에 붙으려면 부모에 상대 위치가 필요해 */
.page {
  position: relative;
}

/* ⭐️ 할 일 추가 버튼 스타일 */
.add-btn {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  background-color: transparent;
  color: #8b95a1;
  border: 2px dashed #e5e8eb;
  /* 점선 테두리로 '여기를 누르세요' 느낌 주기 */
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 마우스 올리면 배경색이 살짝 진해지면서 클릭하고 싶게 만듦 */
.add-btn:hover {
  background-color: #f2f4f6;
  color: #333d4b;
  border-color: #b0b8c1;
}

/* ⭐️ 삭제 버튼 기본 스타일 */
.delete-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: #b0b8c1;
  /* 연한 회색 */
  font-size: 18px;
  cursor: pointer;
  display: none;
  /* 평소에는 투명망토 입고 숨어있기! */
}

/* ⭐️ 카드에 마우스를 올리면(Hover) X 버튼이 짠! 나타남 */
.task-card:hover .delete-btn {
  display: block;
}

/* X 버튼에 마우스를 올리면 경고 느낌의 빨간색으로 변함 */
.delete-btn:hover {
  color: #f04452;
  /* 토스 레드 컬러 */
}

/* ⭐️ 카드를 마우스로 쥐고 이동할 때(Dragging)의 스타일 */
.task-card.dragging {
  opacity: 0.5;
  /* 반투명해짐 */
  border: 2px dashed #3182f6;
  /* 토스 블루 점선 테두리 */
  box-shadow: none;
  /* 공중에 뜬 느낌을 위해 그림자 제거 */
}

/* =========================================
   ☀️🌙 초고퀄리티 Day/Night 토글 스위치
   ========================================= */

/* 스위치 전체 크기 및 ⭐️ 우측 상단 고정 배치 */
.super-stylish-switch {
  position: fixed;
  /* 화면 스크롤을 내려도 항상 같은 자리에 따라오도록 고정! */
  top: 30px;
  /* 위에서 30px 띄우기 */
  right: 40px;
  /* 오른쪽에서 40px 띄우기 */
  display: inline-block;
  width: 80px;
  height: 40px;
  z-index: 9999;
  /* 다른 모든 요소들보다 무조건 맨 위에 보이게 설정 */
}

.super-stylish-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* ☀️ 라이트 모드 배경 (하늘색 그라데이션) */
.super-stylish-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #73C0F8, #D4F0FF);
  border-radius: 40px;
  transition: 0.5s;
  overflow: hidden;
  /* 스위치 밖으로 삐져나가는 구름/별 숨기기 */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* ☀️ 해 (Sun) 디자인 */
.super-stylish-switch .sun-moon {
  position: absolute;
  height: 32px;
  width: 32px;
  left: 4px;
  bottom: 4px;
  background-color: #FFD700;
  /* 예쁜 노란색 */
  border-radius: 50%;
  transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  /* 햇빛 퍼지는 효과 */
  z-index: 2;
}

/* ☁️ 구름 효과 (라이트 모드일 때만 보임) */
.super-stylish-switch .slider::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  top: 20px;
  left: 30px;
  box-shadow: 20px -10px 0 10px white, -20px -5px 0 5px white;
  opacity: 0.8;
  transition: 0.5s;
}

/* ================== 다크 모드 켜졌을 때 ================== */

/* 🌙 다크 모드 배경 (보라빛 밤하늘 그라데이션) */
input:checked+.slider {
  background: linear-gradient(to bottom, #2B1B54, #533C87);
  /* 올려준 이미지 느낌의 보라색 */
}

/* 🌙 해가 달로 변신하며 오른쪽으로 이동! */
input:checked+.slider .sun-moon {
  transform: translateX(40px);
  background-color: #E2E2E2;
  /* ⭐️ 핵심: 그림자를 안쪽으로 줘서 달의 분화구/초승달 느낌 내기 */
  box-shadow: inset -4px -3px 0px 1px #B0B0B0, 0 0 15px rgba(255, 255, 255, 0.5);
}

/* 구름은 아래로 숨어버림 */
input:checked+.slider::before {
  transform: translateY(40px);
}

/* ✨ 별 찍기 (다크 모드일 때만 보임) */
input:checked+.slider .stars {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  top: 10px;
  left: 15px;
  /* box-shadow로 별 여러 개를 한 번에 찍어버리는 마법 */
  box-shadow: 25px 15px 0 -1px white, 10px 20px 0 0px white, 35px 5px 0 -1px white;
  opacity: 1;
  animation: twinkle 2s infinite alternate;
  /* 별 반짝임 애니메이션 */
}

/* 별 반짝임 애니메이션 */
@keyframes twinkle {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

/* =========================================
   🌙 다크 모드 전체 색상 변경 (이게 있어야 화면이 까매져요!)
   ========================================= */

/* 1. 전체 배경색과 기본 글자색 반전 */
body.dark-mode {
  background: radial-gradient(at 0% 0%, rgba(30, 41, 59, 0.9) 0px, transparent 50%),
    radial-gradient(at 0% 50%, rgba(15, 23, 42, 0.9) 0px, transparent 50%),
    #0f172a;
  color: #f8f9fa;
}

/* 2. 사이드바 & 칸반 기둥 유리 질감을 어두운 톤으로 변경 */
body.dark-mode .sidebar,
body.dark-mode .column {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. 진한 글자들을 밝은 흰색/회색으로 반전 (가독성 확보) */
body.dark-mode .user-name,
body.dark-mode .roadmap-title,
body.dark-mode .column h3,
body.dark-mode .task-title,
body.dark-mode .content h4 {
  color: #f1f5f9;
}

body.dark-mode .user-role,
body.dark-mode .sidebar-menu li,
body.dark-mode .sidebar-footer,
body.dark-mode .content p {
  color: #94a3b8;
}

/* 4. 카드(태스크, 타임라인) 배경을 어두운 네이비로 변경 */
body.dark-mode .task-card,
body.dark-mode .content {
  background-color: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

/* =========================================
   📊 2026 진행률 게이지 (Progress Bar)
   ========================================= */
.progress-container {
  /* 1. 화면 최상단 중앙 고정 */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* 정확히 한가운데로 맞추기 */
  width: 60%;
  margin-bottom: 30px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.2);
  /* 유리 배경 */
  border-radius: 0 0 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-top: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 100;
  /* 다른 화면 위로 둥둥 떠 있도록 설정 */
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 700;
  color: #333d4b;
  /* 토스 다크 그레이 */
  font-size: 15px;
}

/* 바의 텅 빈 배경 */
.progress-bar-bg {
  width: 100%;
  height: 14px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
}

/* ⭐️ 차오르는 게이지 바 (토스 블루 그라데이션) */
.progress-bar-fill {
  height: 100%;
  width: 0%;
  /* 자바스크립트가 채워줄 예정! */
  background: linear-gradient(90deg, #3182f6, #5ce1e6);
  border-radius: 10px;
  transition: width 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* 부드럽게 차오르는 애니메이션 */
}

/* ========================================= */ /* 주석: CSS 섹션 구분선입니다. */
/* 🌤️ 좌측 상단 상태바 (박스 제거 & 텍스트 유리 질감 극대화) */ /* 주석: 제목입니다. */
/* ========================================= */ /* 주석: CSS 섹션 구분선입니다. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap'); /* 주석: 숫자가 예쁜 Poppins 폰트를 가져옵니다. */

.top-status-bar { /* 주석: 상태바 전체를 제어하는 스타일입니다. (박스 껍데기 제거) */
    position: fixed; /* 주석: 스크롤해도 화면 상단에 고정합니다. */
    top: 15px; /* 주석: 천장에서 24px 띄웁니다. */
    left: calc(250px + 85px); /* 주석: 유비가 맞춘 사이드바(250px) + 여백(90px) 위치에 둡니다. */
    z-index: 1000; /* 주석: 맨 위로 올립니다. */
    display: flex; /* 주석: 날씨와 시계를 컨트롤하기 위해 flexbox를 켭니다. */
    flex-direction: column; /* 주석: 날씨와 시계를 세로로 배치합니다. */
    gap: 0px; /* 주석: 박스가 없으니 위아래 간격을 딱 붙여서 밀도 있게 만듭니다. */
    font-family: 'Poppins', sans-serif; /* 주석: 세련된 영문 폰트를 적용합니다. */
    pointer-events: none; /* 주석: 마우스 클릭에 방해되지 않게 배경처럼 만듭니다. */
    
    /* 🚨 캡슐 모양을 만들던 background, border, padding, backdrop-filter 속성을 모두 날렸습니다! (완전 투명) */
} /* 주석: 상태바 래퍼 끝! */

#simple-weather { /* 주석: 첫 번째 줄 날씨 텍스트 스타일입니다. */
    font-size: 13px; /* 주석: 날씨 글자는 조용히 13px로 만듭니다. */
    color: rgba(78, 89, 104, 0.8); /* 주석: 색상을 살짝 투명한 회색으로 칠해 은은하게 만듭니다. */
    font-weight: 500; /* 주석: 두께는 중간 정도로 설정합니다. */
    letter-spacing: 0.5px; /* 주석: 자간을 넓혀서 여유를 줍니다. */
    margin-left: 2px; /* 주석: 아래쪽 시계 숫자와 줄을 맞춥니다. */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); /* 주석: 날씨 글자에도 얇은 하얀색 빛 반사 효과를 줍니다. */
} /* 주석: 날씨 텍스트 끝! */

#simple-clock { /* 주석: 두 번째 줄 시계 텍스트 스타일입니다. (유리 질감 극대화 ⭐️) */
    font-size: 30px; /* 주석: 껍데기가 없어졌으니 시계를 42px로 더 시원하게 빵 키웁니다! */
    font-weight: 700; /* 주석: 폰트를 아주 두껍게(Bold) 설정합니다. */
    letter-spacing: -1.5px; /* 주석: 숫자 사이의 자간을 확 좁혀서 더 단단하게 뭉치게 만듭니다. */
    line-height: 1; /* 주석: 글자 위아래의 쓸데없는 기본 여백을 싹 없앱니다. */
    
    /* ⭐️ 텍스트 자체를 투명한 유리로 만드는 핵심 마법입니다! */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(200, 210, 225, 0.4) 50%, rgba(255, 255, 255, 0.9) 100%); /* 주석: 유리에 쨍하게 빛이 굴절되는 듯한 3단 그라데이션을 칠합니다. */
    -webkit-background-clip: text; /* 주석: 그라데이션을 글자 모양으로 칼같이 오려냅니다. */
    -webkit-text-fill-color: transparent; /* 주석: 원래 글자색을 투명하게 지워버립니다. */
    
    /* ⭐️ 유리의 두께감(입체감)을 표현하는 이중 그림자 기술입니다! */
    text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.1), /* 주석: 글자 뒤쪽에 옅은 검은색 그림자를 줘서 허공에 띄웁니다. */
        -1px -1px 1px rgba(255, 255, 255, 0.9); /* 주석: 글자 왼쪽 위 모서리에 쨍한 하얀 빛을 맺히게 해서 유리 모서리를 만듭니다. */
} /* 주석: 시계 텍스트 끝! */

.ampm { /* 주석: 자바스크립트에서 만든 AM/PM 글자 전용 스타일입니다. */
    font-size: 16px; /* 주석: AM/PM은 16px로 맞춥니다. */
    font-weight: 500; /* 주석: 두께도 살짝 얇게 만듭니다. */
    color: rgba(100, 116, 139, 0.8); /* 주석: 반투명한 파스텔 회색으로 칠합니다. */
    margin-right: 4px; /* 주석: 숫자와 살짝 띄워줍니다. */
    -webkit-text-fill-color: initial; /* 주석: 시계의 투명 텍스트 설정을 무시하고 원래 색을 칠합니다. */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6); /* 주석: AM/PM에도 하얀 빛 맺힘 효과를 줍니다. */
} /* 주석: AM/PM 스타일 끝! */

/* 🌙 다크 모드일 때의 유리 텍스트 색상 반전 (다크모드 코드 맨 아래에 쏙 넣어주세요!) */ /* 주석: 다크모드 주석입니다. */
body.dark-mode .top-status-bar { /* 주석: 다크모드 시 상태바 래퍼 속성 덮어쓰기 입니다. */
    background: transparent; /* 주석: 껍데기를 날렸으니 다크모드에서도 배경은 무조건 투명하게 둡니다. */
    border: none; /* 주석: 테두리도 무조건 없앱니다. */
} /* 주석: 다크모드 래퍼 끝! */

body.dark-mode .top-status-bar #simple-weather, /* 주석: 다크모드 시 날씨와 */
body.dark-mode .top-status-bar .ampm { /* 주석: AM/PM 글자 설정입니다. */
    color: rgba(148, 163, 184, 0.9); /* 주석: 어두운 배경에 맞게 반투명한 밝은 회색으로 바꿉니다. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); /* 주석: 하얀색 대신 검은색 그림자로 입체감을 줍니다. */
} /* 주석: 다크모드 회색 글자 끝! */

body.dark-mode .top-status-bar #simple-clock { /* 주석: 다크모드 시 메인 시계 숫자 설정입니다. */
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(148, 163, 184, 0.5) 50%, rgba(255, 255, 255, 0.9) 100%); /* 주석: ⭐️ 다크모드용 얼음 유리 그라데이션입니다. */
    -webkit-background-clip: text; /* 주석: 글자에 적용합니다. */
    -webkit-text-fill-color: transparent; /* 주석: 글자를 투명하게 합니다. */
    text-shadow: 
        4px 4px 8px rgba(0, 0, 0, 0.5), /* 주석: 어두운 배경에 맞춰 짙은 검은색 그림자를 깊게 깝니다. */
        -1px -1px 2px rgba(255, 255, 255, 0.3); /* 주석: 모서리 하얀 빛 반사(베벨 효과)는 은은하게 남겨둡니다. */
} /* 주석: 다크모드 시계 광택 끝! */

/* 🌙 다크 모드 오버라이드 (다크 모드일 때 글자색/배경색 조정) */
body.dark-mode .progress-container {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .progress-header {
  color: #f1f5f9;
}

body.dark-mode .progress-bar-bg {
  background: rgba(255, 255, 255, 0.1);
}

/* ========================================= */
/* 📅 3페이지 캘린더 & 메모장 동적 노출 로직 */
/* ========================================= */

.calendar-wrapper {
  /* 캘린더와 메모장을 양옆으로 묶어주는 거대한 부모 상자입니다. */
  display: flex;
  /* 내부 상자들을 가로로 나란히 배치하기 위해 flex 모드를 켭니다. */
  width: 100%;
  /* 부모(페이지)의 너비에 꽉 차도록 100%로 설정합니다. */
  max-width: auto; /* ⭐️ 핵심 1: 하지만 화면이 엄청 넓어져도 1200px 이상으로는 찢어지지 않게 한계선을 그어줍니다! */
  height: 100%; /* 세로 높이는 칸반 보드처럼 페이지에 100% 꽉 채웁니다. */
  /* ⭐️ 핵심 3: 칸반 보드의 패딩과 똑같이 맞춥니다! (위 80px, 오른쪽 40px, 아래 40px, 왼쪽 40px) */
  /* 위쪽을 80px 띄워서 상단에 떠 있는 다크모드 스위치와 안 겹치게 밑으로 내려줍니다. */
  padding: 80px 40px 40px 40px; /* 칸반 보드랑 똑같이 위쪽을 80px 띄워서 상단 시작 위치를 완벽하게 맞춥니다. */
  margin: 0 auto; /* ⭐️ 핵심 2: 1200px을 뺀 나머지 양옆의 빈 공간을 똑같이 나눠 가져서 캘린더를 '화면 정중앙'으로 끌고 옵니다! */
    
  box-sizing: border-box; /* ⭐️ 핵심 4: 패딩(여백)을 추가하더라도 100% 크기가 화면 밖으로 삐져나가지 않게 꽉 잡아줍니다. */
}

.calendar-container {
  /* 왼쪽 캘린더 상자의 기본 스타일입니다. */
  flex: 1;
  /* ⭐️ 기본 상태: 메모장이 없을 때는 혼자서 래퍼의 전체 공간(100%)을 다 차지합니다! */
  transition: flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* 100%에서 70%로 쪼그라들 때 엄청 부드럽게 변하도록 애니메이션을 줍니다. */
  /* 캘린더를 감싸는 제일 큰 상자 스타일입니다. */
  /* width: 100%; */
  /* 부모 크기에 맞춰 너비를 꽉 채웁니다. */
  /* max-width: 800px; */
  /* 하지만 최대 800px까지만 커지게 제한합니다. (너무 넓어짐 방지) */
  margin: 0;
  /* 래퍼에서 중앙 정렬을 했으므로, 자체 마진은 0으로 지웁니다. */
  padding: 30px;
  /* 상자 안쪽으로 30px의 푹신한 여백을 줍니다. */
  background: rgba(255, 255, 255, 0.2);
  /* 반투명한 흰색 배경으로 유리의 기본을 만듭니다. */
  backdrop-filter: blur(12px);
  /* 배경 뒤쪽의 색상을 12px만큼 흐리게 만듭니다. (유리 효과 핵심!) */
  -webkit-backdrop-filter: blur(12px);
  /* 아이폰, 맥북 등 애플 기기를 위한 흐림 효과 코드입니다. */
  border-radius: 20px;
  /* 상자의 네 모서리를 둥글게(20px) 깎아줍니다. */
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* 상자에 얇고 반투명한 흰색 테두리를 두릅니다. */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  /* 상자 아래에 은은한 그림자를 깔아 입체감을 줍니다. */
}

/* ⭐️ 오른쪽 메모장 컨테이너 (캘린더와 동일한 유리 질감) */
.memo-container { /* 아무것도 누르지 않은 '기본 상태'의 메모장 스타일입니다. */
    display: flex; /* 메모장이 숨어있을 때도 flex 상태는 항상 켜둡니다. (깜빡임 버그 해결의 핵심!) */
    flex-direction: column; /* 안의 요소들을 세로로 쌓아 올립니다. */
    flex: 0; /* ⭐️ 평소엔 가로 비율을 0으로 만들어서 종잇장처럼 완전히 찌그러뜨립니다! */
    width: 0; /* 너비도 0으로 꽉 묶어둡니다. */
    padding: 0; /* 안쪽 여백도 0으로 만들어서 정말 아무 공간도 차지하지 않게 합니다. */
    margin-left: 0; /* 왼쪽 캘린더와의 여백도 0으로 없앱니다. */
    opacity: 0; /* 투명도를 0으로 설정해서 눈에 아예 보이지 않게 투명망토를 씌웁니다. */
    overflow: hidden; /* 찌그러져 있을 때 안의 글씨들이 밖으로 튀어나오지 못하게 칼같이 잘라냅니다. */
    transition: flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, padding 0.4s ease, margin-left 0.4s ease; /* ⭐️ 크기, 투명도, 여백이 모두 0.4초 동안 동시에 스르륵 변하게 애니메이션 마법을 겁니다. */
    background: rgba(255, 255, 255, 0.2); /* 유리의 반투명한 흰색 배경을 깔아줍니다. */
    backdrop-filter: blur(12px); /* 배경 너머를 12px 흐리게 만들어 진짜 유리처럼 보이게 합니다. */
    -webkit-backdrop-filter: blur(12px); /* 아이폰, 맥북 등 애플 기기에서도 유리 효과가 나게 합니다. */
    border-radius: 20px; /* 상자의 네 모서리를 20px 둥글게 깎아줍니다. */
    border: 1px solid rgba(255, 255, 255, 0.4); /* 얇고 반투명한 테두리를 둘러줍니다. */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 은은한 그림자를 줘서 공중에 뜬 느낌을 만듭니다. */
}

.calendar-header {
  /* 년/월 제목과 화살표 버튼이 있는 상단 구역입니다. */
  display: flex;
  /* 요소들을 가로로 나란히 한 줄로 세웁니다. */
  justify-content: space-between;
  /* 요소들을 양 끝과 가운데로 쫙 벌려 배치합니다. */
  align-items: center;
  /* 요소들의 세로 높낮이를 중앙으로 일정하게 맞춥니다. */
  margin-bottom: 20px;
  /* 아래쪽 요일 구역과의 간격을 20px 벌려줍니다. */
}

.calendar-header button {
  /* 화살표 버튼들의 스타일입니다. */
  background: none;
  /* 원래 버튼이 가진 회색 배경을 투명하게 없앱니다. */
  border: none;
  /* 원래 버튼이 가진 까만 테두리를 없앱니다. */
  font-size: 20px;
  /* 화살표 아이콘(글자)의 크기를 20px로 키웁니다. */
  cursor: pointer;
  /* 버튼에 마우스를 올리면 클릭할 수 있게 손가락 모양으로 바꿉니다. */
  color: #333d4b;
  /* 화살표의 색상을 토스 스타일의 진한 회색으로 칠합니다. */
}

#calendar-title {
  /* '2026년 3월' 이라고 적히는 제목 부분입니다. */
  margin: 0;
  /* 제목 위아래에 기본적으로 들어가는 불필요한 여백을 지웁니다. */
  color: #333d4b;
  /* 제목 글자 색상을 진한 회색으로 칠합니다. */
}

.calendar-days {
  /* 일, 월, 화... 요일이 적히는 한 줄입니다. */
  display: grid;
  /* 요소들을 격자(바둑판) 모양으로 배치하겠다고 선언합니다. */
  grid-template-columns: repeat(7, 1fr);
  /* 정확히 7칸으로 나누고, 모두 똑같은 1비율(1fr) 크기를 가집니다. */
  text-align: center;
  /* 각 칸 안의 글자들을 가운데로 정렬합니다. */
  font-weight: bold;
  /* 요일 글자들을 두껍게(볼드체) 만듭니다. */
  margin-bottom: 10px;
  /* 아래쪽 날짜 격자와의 간격을 10px 벌려줍니다. */
  color: #4e5968;
  /* 요일 글자 색상을 중간 톤의 회색으로 칠합니다. */
}

.calendar-dates {
  /* 1일부터 31일까지 들어갈 전체 날짜 격자입니다. */
  display: grid;
  /* 요일 구역과 똑같이 격자(바둑판) 배치를 사용합니다. */
  grid-template-columns: repeat(7, 1fr);
  /* 똑같이 7칸으로 나누고 동일한 크기로 설정합니다. */
  gap: 10px;
  /* 각 날짜 칸들 사이의 틈(상하좌우)을 10px씩 벌려줍니다. */
}

.calendar-dates div {
  /* 날짜가 들어가는 개별 칸(네모 상자) 하나의 스타일입니다. */
  background: rgba(255, 255, 255, 0.3);
  /* 개별 칸의 배경을 조금 더 투명한 흰색으로 채웁니다. */
  height: 80px;
  /* 칸 하나의 세로 길이를 80px로 넉넉하게 잡습니다. (나중에 일정 넣기 위해) */
  border-radius: 10px;
  /* 칸의 모서리들을 10px 둥글게 깎아줍니다. */
  padding: 10px;
  /* 칸 안쪽으로 10px의 여백을 줘서 숫자가 벽에 안 붙게 합니다. */
  font-weight: bold;
  /* 숫자 글씨를 두껍게 칠합니다. */
  color: #333d4b;
  /* 숫자 색상을 진한 회색으로 칠합니다. */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* 칸마다 아주 연한 흰색 테두리를 줍니다. */
  transition: all 0.2s ease;
  /* 마우스를 올렸을 때 애니메이션이 0.2초 동안 부드럽게 변하게 합니다. */
}

/* ⭐️ 오늘 날짜 강조 스타일 */
.calendar-dates div.today {
  /* 자바스크립트가 오늘 날짜에 붙여줄 'today' 클래스입니다. */
  background: #3182f6;
  /* 토스 블루 색상으로 배경을 강렬하게 칠합니다. */
  color: white;
  /* 글자색을 흰색으로 눈에 띄게 바꿉니다. */
  box-shadow: 0 4px 10px rgba(49, 130, 246, 0.4);
  /* 파란색 그림자로 빛나게 합니다. */
  border: none;
  /* 기존 흰색 테두리는 지워줍니다. */
}

/* ⭐️ 클릭해서 선택된 날짜 강조 스타일 */
.calendar-dates div.selected {
  /* 마우스로 클릭한 날짜에 붙을 클래스입니다. */
  border: 3px solid #3182f6;
  /* 파란색 두꺼운 테두리를 쳐서 "나 선택됐어!"를 보여줍니다. */
  transform: translateY(-2px);
  /* 살짝 위로 떠오르게 만듭니다. */
}

.calendar-dates div:hover {
  /* 개별 날짜 칸에 마우스를 올렸을 때의 변화입니다. */
  transform: translateY(-2px);
  /* 칸 전체가 위로 2px 살짝 떠오르는 효과를 줍니다. */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  /* 떠오르면서 생기는 그림자를 살짝 더 진하게 만듭니다. */
  background: rgba(255, 255, 255, 0.5);
  /* 유리 배경을 조금 더 진한 흰색으로 밝혀줍니다. */
}

.calendar-dates div.empty {
  /* 1일이 시작하기 전의 빈칸들(이전 달 날짜 공간)을 위한 투명 스타일입니다. */
  background: transparent;
  /* 배경색을 완전히 투명하게 없앱니다. */
  border: none;
  /* 빈칸은 테두리도 그리지 않습니다. */
  box-shadow: none;
  /* 빈칸은 그림자도 지우고 아무것도 없는 척합니다. */
}

/* 🌙 다크 모드일 때의 캘린더 색상 반전 (다크모드 구역에 쏙 넣어주세요!) */
body.dark-mode .calendar-container {
  /* 다크모드 시 캘린더 전체 껍데기 설정 */
  background: rgba(30, 41, 59, 0.6);
  /* 유리를 어두운 네이비색으로 바꿉니다. */
}

body.dark-mode #calendar-title,
body.dark-mode .calendar-header button,
body.dark-mode .calendar-days {
  /* 제목, 버튼, 요일 글자 색상 설정 */
  color: #f1f5f9;
  /* 다크모드에 맞춰 글씨를 밝은 흰회색으로 반전시킵니다. */
}

body.dark-mode .calendar-dates div {
  /* 다크모드 시 개별 날짜 칸 설정 */
  background: rgba(15, 23, 42, 0.5);
  /* 칸 배경을 더 깊고 어두운 색으로 바꿉니다. */
  color: #e2e8f0;
  /* 날짜 숫자 글자를 밝게 바꿉니다. */
  border-color: rgba(255, 255, 255, 0.05);
  /* 테두리를 아주아주 연하게 바꿉니다. */
}

/* 메모장 내부 요소들 스타일 */
#memo-date-title { /* 메모장 상단의 날짜 제목 스타일입니다. */
    margin-top: 0; /* 위쪽 여백을 없앱니다. */
    margin-bottom: 20px; /* 텍스트 상자와의 간격을 20px 줍니다. */
    color: #333d4b; /* 진한 회색으로 글자를 칠합니다. */
    white-space: nowrap; /* ⭐️ 핵심 1: 창이 좁아져도 글자가 밑으로(세로로) 줄바꿈되지 않게 한 줄로 꽉 묶어둡니다! */
}

#memo-input { /* 글씨를 쓰는 넓은 텍스트 영역 스타일입니다. */
    flex: 1; /* 남은 세로 공간을 혼자 모두 차지하도록 쫙 늘립니다. */
    resize: none; /* 사용자가 임의로 창 크기를 조절하지 못하게 우측 하단 빗금을 막습니다. */
    padding: 15px; /* 글씨가 벽에 안 붙게 안쪽 여백을 15px 줍니다. */
    border-radius: 12px; /* 모서리를 12px 둥글게 깎습니다. */
    border: 1px solid rgba(255, 255, 255, 0.5); /* 얇은 테두리를 줍니다. */
    background: rgba(255, 255, 255, 0.4); /* 살짝 투명한 배경을 줍니다. */
    font-family: inherit; /* 대시보드 웹사이트의 기본 폰트를 그대로 따릅니다. */
    font-size: 15px; /* 글자 크기를 15px로 맞춥니다. */
    color: #333d4b; /* 글자색을 진한 회색으로 합니다. */
    margin-bottom: 15px; /* 아래쪽 저장 버튼과의 간격을 15px 줍니다. */
    outline: none; /* 클릭했을 때 텍스트창 겉에 생기는 기본 검은 테두리를 지웁니다. */
    min-width: 250px; /* ⭐️ 핵심 2: 창이 닫힐 때 텍스트 박스가 250px 이하로 찌그러지지 않고 빳빳하게 형태를 유지하게 버팁니다! */
}

#save-memo-btn { /* 저장 버튼 스타일입니다. */
    padding: 14px; /* 위아래 안쪽 여백을 14px 넉넉히 줍니다. */
    border: none; /* 버튼의 기본 테두리를 없앱니다. */
    border-radius: 10px; /* 모서리를 10px 둥글게 만듭니다. */
    background: #3182f6; /* 쨍한 토스 블루 색상으로 칠합니다. */
    color: white; /* 글자를 흰색으로 만듭니다. */
    font-weight: bold; /* 글자를 두껍게 만듭니다. */
    cursor: pointer; /* 마우스를 올리면 누를 수 있게 손가락 모양으로 바꿉니다. */
    transition: background 0.2s; /* 마우스를 올렸을 때 배경색이 0.2초에 걸쳐 부드럽게 변합니다. */
    white-space: nowrap; /* ⭐️ 핵심 3: 버튼 안의 '메모 저장하기' 글자도 창이 닫힐 때 두 줄로 쪼개지지 않게 막아줍니다! */
}

#save-memo-btn:hover {
  /* 저장 버튼에 마우스를 올렸을 때의 변화입니다. */
  background: #1b64da;
  /* 더 짙은 파란색으로 변해서 눌리는 느낌을 줍니다. */
}

/* 🌙 다크 모드용 오버라이드 (파일 맨 아래 다크모드 구역에 쏙 넣어줘!) */
body.dark-mode .memo-container {
  /* 다크모드 시 메모장 껍데기 설정입니다. */
  background: rgba(30, 41, 59, 0.6);
  /* 유리를 어두운 네이비색으로 바꿉니다. */
}

body.dark-mode #memo-date-title {
  /* 다크모드 시 메모장 제목 설정입니다. */
  color: #f1f5f9;
  /* 제목 글씨를 밝게 반전시킵니다. */
}

body.dark-mode #memo-input {
  /* 다크모드 시 텍스트 입력창 설정입니다. */
  background: rgba(15, 23, 42, 0.5);
  /* 입력창 배경을 어둡게 바꿉니다. */
  color: #f1f5f9;
  /* 입력되는 글씨를 밝게 바꿉니다. */
  border-color: rgba(255, 255, 255, 0.1);
  /* 테두리를 어둡게 조절합니다. */
}

/* ⭐️ JS가 날짜 클릭을 감지해서 래퍼에 'show-memo'를 붙였을 때 일어나는 마법! */
.calendar-wrapper.show-memo .calendar-container { /* 메모장이 나타날 때 왼쪽 캘린더의 변화입니다. */
    flex: 7; /* 혼자 100% 다 쓰던 캘린더가 7(70%)의 비율로 스윽 양보하며 줄어듭니다! */
}

.calendar-wrapper.show-memo .memo-container { /* 찌그러져 있던 메모장은 어떻게 될까요? */
    flex: 3; /* ⭐️ 0이었던 비율이 3(30%)으로 스윽~ 하고 넓어집니다! */
    padding: 30px; /* 0이었던 안쪽 여백이 30px로 살아나서 숨통이 트입니다! */
    margin-left: 24px; /* ⭐️ 아까 삭제한 gap 대신, 메모장 왼쪽에 24px 간격을 줘서 캘린더와 사이를 벌려줍니다! */
    opacity: 1; /* 투명도 0이었던 메모장이 1(100%)로 선명하게 모습을 드러냅니다! */
}

/* (우측에서 스르륵 나타나는 애니메이션 코드는 아까 그대로 두시면 됩니다!) */
@keyframes fadeInRight { /* 페이드인 라이트 애니메이션입니다. */
    from { opacity: 0; transform: translateX(30px); } /* 시작: 투명하고 오른쪽으로 30px 밀려있음 */
    to { opacity: 1; transform: translateX(0); } /* 끝: 선명해지고 제자리로 안착 */
}