/* /css/common.css */

/* 기본 토큰 */
:root {
  --color-dark-navy: #0B1120;
  --color-deep-purple: #4C1D95;
  --color-stucco: #A08D79;
  --color-white: #FFFFFF;

  --app-bg: #f8fafc;
  --app-text: #1F2937;
}

/* 전역 기본 */
html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Noto Sans KR', sans-serif;
  background-color: var(--app-bg);
  color: var(--app-text);
}

/* Custom Colors */
.text-navy { color: var(--color-dark-navy); }
.bg-navy { background-color: var(--color-dark-navy); }
.text-stucco { color: var(--color-stucco); }
.bg-stucco { background-color: var(--color-stucco); }
.text-purple { color: var(--color-deep-purple); }
.bg-purple { background-color: var(--color-deep-purple); }
.border-stucco { border-color: var(--color-stucco); }

/* Gradients */
.bg-gradient-gnb {
  background: linear-gradient(90deg, var(--color-dark-navy) 0%, var(--color-deep-purple) 100%);
}
.bg-gradient-mystic {
  background: linear-gradient(135deg, var(--color-dark-navy) 0%, var(--color-deep-purple) 100%);
}

/* Layout Utilities */
.portal-container { max-width: 1200px; margin: 0 auto; }

/* Mobile Menu Transition */
#mobile-menu {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
#mobile-menu.open {
  max-height: 500px;
  opacity: 1;
}

/* Buttons */
.btn-purple-gradient {
  background: linear-gradient(135deg, var(--color-deep-purple) 0%, #6d28d9 100%);
  color: white;
}
.btn-purple-gradient:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(76, 29, 149, 0.4);
}
/* ================================
   Rolling Banner (이미지 100% 노출)
================================ */

.slider-container {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

/* wrapper */
.slider-wrapper {
  display: flex;
  will-change: transform;
  transition: transform 0.5s ease-in-out;
}

/* slide */
.slide {
  flex: 0 0 100%;
  height: clamp(300px, 36vw, 480px); /* ✅ 충분한 높이 */
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ 이미지 100% 노출 */
  /* background-size: contain; */
  background-repeat: no-repeat;
  background-position: center;

  /* 여백 배경 */
  background-color: #0B1120;
}
.slide-content{
     width: 100%;
  position: absolute;
  inset: 0;                 /* top/right/bottom/left = 0 */
  display: flex;
  align-items: center;       /* 세로 중앙 */
  justify-content: center;   /* 가로 중앙 */
  z-index: 2;                /* 오버레이 위 */
  padding: 0 16px;
}
.slide-content > .banner-inner{
  width: 100%;
  max-width: 42rem;   /* = max-w-2xl */
  margin: 0 auto;
  text-align: center;
}

/* 오버레이 (텍스트 가독성) */
.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(11,17,32,0.75),
    rgba(76,29,149,0.55)
  );
  z-index: 1 !important;
  pointer-events: none;
}


/* 인디케이터 */
.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.4);
  transition: all 0.3s;
  cursor: pointer;
}
.indicator-dot.active {
  width: 24px;
  border-radius: 4px;
  background-color: var(--color-stucco);
}

        /* Hover Transitions */
        .nav-item { transition: all 0.2s ease; }

        /* Buttons */
        .btn-purple-gradient {
            background: linear-gradient(135deg, var(--color-deep-purple) 0%, #6d28d9 100%);
            color: white;
        }
        .btn-purple-gradient:hover {
            filter: brightness(1.1);
            box-shadow: 0 4px 12px rgba(76, 29, 149, 0.4);
        }


         
        /* Card Hover Effect */
        .tool-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }



        /* GNB 활성 메뉴 */
.gnb-active {
  background-color: #391475;
  color: var(--color-stucco);
  font-weight: 700;
  border-bottom: 4px solid var(--color-stucco) !important;
}

.gnb-active > a { color: var(--color-stucco); font-weight:700; }