.link-icon {
            width: 1.125rem; height: 1.125rem; border: 1.5px solid currentColor;
            border-radius: 0.25rem; display: inline-flex; align-items: center;
            justify-content: center; flex-shrink: 0;
        }
        .link-icon svg { width: 0.75rem; height: 0.75rem; }
        
        /* 주석: 이 규칙은 고정된 헤더 뒤에 페이지 콘텐츠가 가려지는 것을 방지합니다. */
        /* 5rem = 메인 헤더 높이(h-20) */
        body {
            font-family: 'Pretendard', sans-serif;
        }

        .header {
          position: fixed;
          top: 30px;
          left: 0;
          right: 0;
          background-color: #fff;
          box-shadow: 0 2px 15px rgba(0,0,0,0.2);
          z-index: 40;
          padding: 15px;
          border-top: 1px solid #f0f0f0;
      }

        .header-container {
          max-width: 1020px;
          margin: 0 auto;        /* mx-auto */
          position: relative;     /* relative */
      }
      .btn-wb{display: none;}

      .header-inner {
          display: flex;               /* flex */
          align-items: center;         /* items-center */
          justify-content: space-between; /* justify-between */
      }
      .btn-category {
          display: flex;                /* flex */
          align-items: center;          /* items-center */
          gap: 8px;                     /* space-x-2 */
          padding: 8px;                 /* p-2 (mobile) */
          border: 1px solid transparent; /* border border-transparent */
          border-radius: 6px;           /* rounded-md */
          color: #4B5563;               /* text-gray-600 */
          transition: all 0.2s ease;    /* transition-all */
          background-color: transparent;
          cursor: pointer;
      }

      .hamburger-icon {
          width: 24px;   /* w-6 */
          height: 20px;  /* h-5 */
          position: relative;
      }
      .btn-text {
          display: none;        /* hidden */
          font-weight: 500;     /* font-medium */
          font-size: 16px;
          text-decoration: none;
      }
      .desktop-menu {
          display: none;         /* hidden */
          position: absolute;
          top: 100%;             /* top-full */
          left: 0;               /* left-0 */
          right: 0;              /* right-0 */
          z-index: 20;           /* z-20 */
      }
      .desktop-menu-panel {
          background-color: white;
          border-bottom-left-radius: 2rem;  /* rounded-b-lg */
          border-bottom-right-radius: 2rem; /* rounded-b-lg */
          opacity: 0;                /* opacity-0 (초기 hidden) */
          transform: translateY(-8px); /* -translate-y-2 */
          transition: all 0.2s ease;   /* transition-all duration-200 */
      }
      .desktop-menu-grid {
          display: grid;                 /* grid */
          grid-template-columns: repeat(3, 1fr);  /* grid-cols-4 */
          column-gap: 1rem;              /* gap-x-8 (8 = 2rem = 32px) */
          padding: 2rem 20rem;
          place-items: center;
      }
      .menu-backdrop {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.5); /* bg-black + opacity-50 */
          z-index: 35;
          
          /* 초기 상태: 숨김 */
          display: none;
          opacity: 0;
          
          /* transition */
          transition: opacity 0.3s ease;
      }
      .menu-panel {
          position: fixed;
          top: 5rem; /* 80px */
          right: 0;
          width: 100%;
          height: calc(100% - 5rem);
          background-color: #fff;
          z-index: 39;

          /* 처음에는 오른쪽 화면 밖 */
          transform: translateX(100%);
          transition: transform 0.3s ease-in-out;
      }

      /* 열릴 때 JS가 is-open 클래스 추가 */
      .menu-panel.is-open {
          transform: translateX(0);
      }
      .menu-panel {
          transform: translateX(100%);
          transition: transform 0.3s ease-in-out;
      }
      .menu-panel.is-open {
          transform: translateX(0);
      }

      .menu-backdrop {
          opacity: 0;
          display: none;
          transition: opacity 0.3s;
      }
      .menu-backdrop.is-open {
          display: block;
          opacity: 1;
      }

      .desktop-menu {
          display: none;
      }
      .desktop-menu.is-open {
          display: block;
      }
      .desktop-menu-panel {
          opacity: 0;
          transform: translateY(-8px);
          transition: all 0.2s;
      }
      .desktop-menu-panel.is-open {
          opacity: 1;
          transform: translateY(0);
      }

          
      .menu-panel-inner {
          display: flex;
          flex-direction: column;
          height: 100%;
          overflow-y: auto;
      }
      .btn-close-menu {
          padding: 8px;
          border-radius: 9999px;
          color: #6B7280;
          background: transparent;
          transition: all 0.2s ease;
          cursor: pointer;
      }

      .btn-close-menu:hover {
          background-color: #F3F4F6;
          color: #1F2937;
      }

      .btn-close-menu:focus {
          outline: none;
          box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6366F1;
      }
.menu-section {
    padding: 1.5rem;
}
.menu-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}
.menu-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    background-color: #F3F4F6;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.menu-icon-item:hover .menu-icon-circle {
    background-color: #E0E7FF; /* indigo-100 */
}
.menu-icon-circle svg {
    width: 2rem;
    height: 2rem;
    color: #4B5563;
    transition: color 0.2s;
}

.menu-icon-item:hover .menu-icon-circle svg {
    color: #4F46E5;
}

.menu-icon-text {
    margin-top: 0.5rem;
    display: block;
    font-size: 2rem;
    font-weight: 500;
    color: #374151;
}

.menu-divider {
    border: none;
    border-top: 4px solid #F3F4F6;
}

.menu-links {
    flex-grow: 1;
    padding: 1.5rem;
}

.menu-links > * + * {
    margin-top: 1.5rem; /* space-y-6 */
}

.menu-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.menu-header {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb; /* gray-200 */
  flex-shrink: 0;
  font-size: 5rem;
  font-weight: 600;
}
/* 바깥 여백 */
.menu-section {
  padding: 24px;
}

/* 3열 그리드 + 간격 + 가운데 정렬 */
.menu-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}

/* 아이템 전체 링크 */
.menu-icon-item {
  display: block;
  text-decoration: none;
  color: inherit; /* 기본 텍스트 색 유지 */
}

/* 아이콘을 감싸는 동그라미 */
.menu-icon-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 999px;
  background-color: #f3f4f6; /* bg-gray-100 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

/* hover 시 배경 변경 */
.menu-icon-item:hover .menu-icon-circle {
  background-color: #c9ddff; /* indigo-100 */
}

/* svg 아이콘 색상 */
.menu-icon-circle img {
  width: 32px;
  height: 30px;
  transition: color 0.2s ease;
}
.menu-icon-circle .myON{width: 46px; height: 50px;}
.menu-icon-circle .reservation{width: 34px; height: 50px;}

/* hover 시 아이콘 색 변경 */
.menu-icon-item:hover .menu-icon-circle svg {
  color: #4f46e5; /* indigo-600 */
}

/* 텍스트 스타일 */
.menu-icon-text {
  margin-top: 8px;
  display: block;
  font-size: 1.6rem;
  font-weight: 500;    /* font-medium */
  color: #374151;      /* text-gray-700 */
}

/* 구분선 */
.menu-divider {
  border: none;
  border-top: 4px solid #f3f4f6; /* gray-100 */
  margin: 0;
}

/* 섹션 전체 */
.menu-list-section {
  flex-grow: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px; /* space-y-6 */
}


/* 그룹 제목 */
.menu-group-title {
  font-weight: 600;         /* font-bold */
  color: #a0a0a0;           /* text-gray-800 */
  font-size: 1.4rem;          /* text-lg */
  margin-bottom: 4px;      /* mb-3 */
}

/* 리스트 */
.menu-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; /* space-y-2 */
}

/* 링크 */
.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4b5563;           /* text-gray-600 */
  text-decoration: none;
  padding: 4px 0;           /* py-1 */
  transition: color 0.2s ease;
}

.menu-link:hover {
  color: #4f46e5;           /* hover:text-indigo-600 */
  font-weight: 700;
}

.menu-link span{
  font-size: 1.8rem;
  font-weight: 700;
}
/* lg:hidden = 데스크탑에서는 숨김 */
@media (min-width: 1024px) {

        .top-header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          background-color: #fff;
          z-index: 40;
          font-size: 5rem;
          width: 100%;
          height: 30px;

        }
        .top-header .divider {
            width: 1px;
            height: 10px;
            background-color: #ccc;
            margin: 4px 8px 0;
            
        }
        .top-header ul {     /* mx-auto */
            display: flex;
            justify-content: flex-end;
            align-items: center;
            list-style: none;
            gap: 7px;
            width: 1020px;
            margin: 0 auto;
            flex-shrink: 0;
        }
        .top-header ul li a {
            color: #555;
            text-decoration: none;
        }
        .top-header ul li a:hover {
        text-decoration: none;
        color: #3179F6;
        }


         .menu-backdrop.is-open {
          display: block;
          opacity: 1;
      }

        .hamburger-line {display: none;}
        .btn-category{padding: 0;}
          .btn-text {
              padding: 8px 16px;
              border-radius: 999px;
              color: #fff;
              border: 3px solid #fff;/*절대 절대 유지해줘*/
              background: linear-gradient(120deg, #3182F6, #066af6, #3639ff, #c72cff, #5309FF, #ff85b8);
              background-size: 400% 400%;

              animation: rainbowBg 8s linear infinite;
              }

              @keyframes rainbowBg {
              0%   { background-position: 0% 50%; }
              50%  { background-position: 100% 50%; }
              100% { background-position: 0% 100%; }
              }
          
          /* hover:bg-gray-100 / hover:text-indigo-600 */
          .btn-text:hover {
              color: #066af6;
              font-weight: 600;
              border: 3px solid transparent;
              background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #3182F6, #066af6, #3639ff, #c72cff, #5309FF, #ff85b8) border-box;
              animation: rainbowBorder 8s linear infinite;
              background-size: 400% 400%;

          }

          
          .btn-text {
              display: inline;  /* lg:inline */
          }
          .desktop-menu {
              display: block;    /* lg:block */
          }
          .menu-panel {
              display: none;
          }

         
      }
        .logo img{
            height: 28px;
            padding-top: 0px;
        }
        .nav-menu a {
            font-size: 1.8rem;
            color: #303c4d; /* 예: text-gray-600 */
            transition: color 0.2s;
            text-decoration: none;
        }
        .nav-menu{display:flex; gap: 40px;}

        .nav-menu a:hover {
            color: #5309FF; /* 예: indigo-600 */
            font-weight: 600;
        }

        .campus li{
            list-style: none;
            padding-bottom: 6px;
            color: #636870; 
        }

        .campus li a{
          text-decoration: none;
          font-size: 1.6rem;
          font-weight: 500;
        }

        .campus li:hover{
          color: #3179F6;
          font-weight: 600;
        }

        .campus h6{
            font-size: 18px;
            padding-bottom: 6px;
        }

        .campus li a:visited {
        color: inherit;   /* 부모 색상 그대로 사용 */
        }
        /* 주석: 시작 - 햄버거 아이콘 애니메이션을 위한 CSS */
        .hamburger-line {
            position: absolute; 
            left: 0; 
            width: 100%; 
            height: 2px;
            background-color: currentColor; 
            border-radius: 2px;
            transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
        }
        .hamburger-line.top { top: 25%; }
        .hamburger-line.bottom { top: 75%; transform-origin: center; }
        #category-button.is-open .hamburger-line.top {
            top: 50%; transform: translateY(-50%) rotate(45deg);
        }
        #category-button.is-open .hamburger-line.bottom {
            top: 50%; transform: translateY(-50%) rotate(-45deg);
        }
        
        /* 주석: 끝 - 햄버거 아이콘 애니메이션을 위한 CSS */

        @media (max-width:1024px){
        .nav-menu{display:none; gap: 40px;}
        .top-header{display: none;}
        .header{top: 0;}
        .menu-header{font-size: 3.5rem;}
      .mobile-menu{
        display: flex;
        gap: 4px;
      }

      .btn-wb {
        display: block;
        padding: 2px 6px;
              font-weight: 600;
              font-size: 1.4rem;
              border-radius: 999px;
              background: #066af6;
              border:none;
              margin: 0 auto;
            color: #fff;
        }

        .btn-wb a{
            text-decoration: none;
        }
    }