:root {
  --sky: #cbeaff;
  --sky-dark: #2a6ebb;    /* 더 진한 하늘색 for 강조용 */
  --lemon: #fff9b2;
  --text: #333;
}

@font-face {
    font-family: 'SBAggroL';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggroM';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'SBAggroB', 'Pretendard', sans-serif;
  background-color: #f6fbff;
  color: var(--text);
  overflow-x: hidden;
}
img{
	-webkit-touch-callout:none;
	user-drag: none; /* Safari */
	-webkit-user-drag: none; /* Chrome, Edge 등 */
	pointer-events: none; /* 마우스 이벤트도 막을 경우 */
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4); /* 회색 딤처리 */
  z-index: 1000;
  display: none;
}
/* 왼쪽 사이드 메뉴 */
  .side-menu {
	  position: fixed;
	  top: 50%;
	  left: 20px;
	  transform: translateY(20px);
	  transition: opacity 0.6s ease, transform 0.6s ease;
	  display: flex;
	  flex-direction: column;
	  gap: 20px;
	  z-index: 2000;
   	 opacity: 0;
  }

  .side-menu.show {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }

  .side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .side-menu li {
    margin: 10px 0;
  }

  .side-menu a {
	  position: relative;
	  font-size: 15px;
	  color: var(--sky);
	  text-decoration: none;
	  padding: 4px 8px;
	  line-height: 1.4;
	  transition: all 0.3s ease;
  }
  .side-menu a::before {
	  content: '';
	  position: absolute;
	  left: 0;
	  bottom: 0.1em;
	  width: 100%;
	  height: 1em;
	  background: rgba(255, 251, 229, 1); /* 형광펜 색상 */
	  z-index: -1;
	  transform: rotate(-1.5deg);
	}

  .side-menu a:hover {
	  background: var(--lemon);
	  color: var(--sky-dark);
	  font-weight: bold;
  }
@media (max-width: 1024px) {
	.side-menu {
	    display:none;
	}
}

/* 섹션 스타일 */
section {
  padding: 100px 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 애니메이션 효과 적용 시 */
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 기본 상태 - 왼쪽에서 오른쪽 */
.fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
}

footer {
  background: var(--sky);
  color: var(--text);
  text-align: center;
  padding: 20px;
  font-size: 0.7em;
}

/* 인트로 섹션 스타일 */
.intro-section {
  background: linear-gradient(180deg, #f6fbff 0%, #f6fbff 100%);
  position: relative;
  min-height: 92vh;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* 위쪽 정렬 */
  align-items: center;
  text-align: center;
  padding: 100px 20px 80px; /* ↑ intro-content를 화면보다 약간 위로 */
  color: #fff;
}


.intro-background-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 580px;
  height: 100%;
  background-image: url('https://blog.kakaocdn.net/dn/CK1tS/btsOhc6IqIM/BHdqBrTkrfJjIdQv0mrN60/img.png');
  background-repeat: no-repeat;
  background-position: center ;
  background-size: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-touch-callout:none;
}

/* 상단 좌우 텍스트 영역 */
.intro-header {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  font-size: 1rem;
}

.intro-date-left,
.intro-date-right {
  color: var(--sky-dark);
  padding: 6px 14px;
}
.intro-date-left{
	text-align : left;
}
.intro-date-right{
	text-align : right;
}

/* 콘텐츠 */
.intro-content {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: calc(100% - 60px); /* 반응형 너비 */
  max-width: 500px;
  text-align: center;
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
/* 줄별 텍스트 초기 상태 */
.intro-line {
  opacity: 0;
  transform: translateY(20px);
  font-size: 2.5rem;
  color: #fff;
  animation: fadeInUp 0.8s ease forwards;
}
.intro-logo-img {
  width: 130%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform: translate(-15%, 20px);
  transition: none; 
}
.intro-logo-img.loaded {
  animation: fadeInUpCentered 1s ease forwards;
}
/* 각 줄의 등장 타이밍 차이 */
.intro-line:nth-child(1) {
  animation-delay: 0.3s;
}
.intro-line:nth-child(2) {
  animation-delay: 0.8s;
}
.intro-line:nth-child(3) {
  animation-delay: 1.3s;
}

/* 애니메이션 정의 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUpCentered {
  0% {
    opacity: 0;
    transform: translate(-15%, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(-15%, 0);
  }
}
/* CTA 버튼 */
.cta-button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 28px;
  font-size: 1rem;
  background-color: #68beff;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  animation-delay: 0.8s;
}

.cta-button:hover, .result-btn:hover, .form-submit-btn:hover {	
  color: #fff;
  background-color: #4fb4ff;
  transform: translateY(-2px);
}

/* 스크롤 유도 아이콘 */
.scroll-down {
  position: absolute;
  bottom: 30px;
  font-size: 0.9rem;
  animation: bounce 2s infinite;
  color: var(--sky);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* 큰 섹션 제목 스타일 */
.section-title {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
  color: #111;
}

/* 멤버 소개 전체 영역 */
.member-section {
  background: radial-gradient(circle at top left, #f6fbff 0%, #eaf7ff 100%);
  padding: 70px 20px;
  color: #222;
}

/* 유연한 양옆 배치 */
.member-flex-wrap {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}

/* 왼쪽 이미지 */
.member-image img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border: 4px solid #fff;
  background: #fff;
}

/* 오른쪽 정보 블록 */
.member-info-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 네임카드 느낌 */
.member-info {
  background: #fff;
  border-left: 6px solid var(--sky);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

.member-info h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.member-info p {
  margin: 6px 0;
  font-size: 1rem;
  line-height: 1.5;
}
.info-line {
  display: flex;
  align-items: flex-start;
}

.label {
  width: 80px; /* 라벨 너비 고정 */
  font-weight: bold;
  color: #444;
  flex-shrink: 0;
}

.value {
  flex: 1;
  color: #333;
}

/* 코치 소제목 */
.section-label {
  display: inline-block; /* ✅ 글자 길이만큼만 배경 영역 */
  background-color: var(--sky);
  color: #000;
  font-size: 1.2rem;
  padding: 6px 14px;
  margin: 10px 0 10px 0; /* 좌우 여백 제거 */
}

/* 스페셜 코치 설명 */
.coach-note {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 16px;
  text-align: left;
}

/* 코치 카드 그리드 */
.coach-grid {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap; /* ✅ 줄바꿈 방지 */
  overflow-x: auto;   /* ✅ 작아질 경우 가로 스크롤 허용 (선택사항) */
}

/* 코치 개별 카드 */
.coach-card {
  flex: 1 1 20%; /* ✅ 화면 줄어들면 너비 자동 축소 */
  min-width: 120px; /* ✅ 너무 작아지면 스크롤로 넘김 */
  max-width: 180px;

  background: #fff;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid #eee;
}

.coach-card img {
  width: 100%;
  max-height: 210px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.coach-card p {
	font-size: 0.75rem;
	line-heihgt: 1.2rem;
}
.coach-card strong {
	font-size: 0.95rem;
}
/* 중앙 정렬 원할 경우 */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
/* 데스크탑 배치 전환 */
@media (min-width: 992px) {
  .member-flex-wrap {
    flex-direction: row;
    align-items: flex-start;
  }

  .member-image {
    flex: 1;
  }

  .member-info-block {
    flex: 2;
    padding-left: 40px;
  }
}
@media (max-width: 480px) {
  .coach-card {
    min-width: 100px;
    font-size: 0.8rem;
  }

  .coach-card img {
    width: 100%;
    height: auto;
  }
}
/* 카드 영역 */
.card-section {
  background-color: #f6fbff;
  padding: 70px 20px;
  padding-bottom: 30px;
  color: #222;
}

/* 그리드 배치 (2개 고정) */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 800px;
  margin: 40px auto 0;
}

/* 플립 카드 전체 */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
}
/* 앞/뒤 전환 컨테이너 */
.flip-inner {
  position: relative;
  width: 100%;
  height: 260px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* 클릭 시 뒤집기 */
.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

/* 앞면/뒷면 공통 */
.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  backface-visibility: hidden;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
  overflow-wrap: break-word;
  word-break: keep-all;
}

/* 앞면: 키치한 스타일 */
.flip-front {
  background: linear-gradient(145deg, #cbeaff, #e8f9ff);
  border: 2px solid #9ecbff;
}

/* 앞면 */
/* 앞면 카드 키치하게 */
/* 앞면 카드 - 키치하고 하늘색 톤 통일 */
.fancy-card-cute {
  background: radial-gradient(circle at 20% 30%, #e6f7ff 0%, #ffffff 60%);
  border: 2px dashed #4fb4ff;
  color: #003366;
  text-align: center;
  padding: 26px 18px;
  border-radius: 18px;
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #b5e4ff;
  animation: wiggleSoft 2.5s infinite ease-in-out;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fancy-card-cute .emoji {
  font-size: 2.8rem;
  animation: bounceSoft 2s infinite;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.fancy-card-cute h3 {
  font-size: 1.3rem;
  margin: 12px 0 6px;
  background: var(--sky-dark);
  -webkit-background-clip: text;
  color: transparent;
}

.fancy-card-cute .emoji-sub {
  font-size: 0.9rem;
  color: #444;
  letter-spacing: 0.5px;
}

@keyframes wiggleSoft {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

@keyframes bounceSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}


/* 회전 관련 오류 해결 */
.flip-inner {
  position: relative;
  width: 100%;
  height: 260px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

/* 뒷면 */
.flip-back {
  transform: rotateY(180deg);
  background: #fff6cc;
  border: 2px dashed #ffd500;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333;
}

/* 뒷면 강조 */
.flip-back p {
  margin: 0;
  padding: 0 10px;
}

.cute-back {
  background: radial-gradient(circle at 20% 30%, #e6f7ff 0%, #ffffff 60%);
  /* 👆연한 하늘색 → 흰색 번짐 효과 */
  border: 2px dashed #4fb4ff;
  color: #003366;
  padding: 24px 20px;
  border-radius: 18px;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 8px #cdeaff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}


.cute-back p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #222;
  position: relative;
  padding: 12px;
}

.cute-back p::before,
.cute-back p::after {
  content: "🌟✨";
  font-size: 1.2rem;
  position: absolute;
  top: -10px;
  left: 10px;
  animation: twinkle 1.6s infinite alternate;
}

.cute-back p::after {
  content: "💫😈";
  top: auto;
  bottom: -20px;
  right: 10px;
  left: auto;
  animation-delay: 0.8s;
}

/* 카테고리별 장식 이모지 설정 */
.cute-back[data-category="1"] p::before {
  content: "🦥🧩";
}
.cute-back[data-category="1"] p::after {
  content: "📖📍";
}

.cute-back[data-category="2"] p::before {
  content: "🧪🧠";
}
.cute-back[data-category="2"] p::after {
  content: "💡😈";
}
.cute-back strong {
  background: linear-gradient(transparent 60%, #fff89a 60%);
  font-weight: bold;
  padding: 2px 4px;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

@keyframes twinkle {
  from {
    transform: rotate(0deg) scale(1);
    opacity: 0.6;
  }
  to {
    transform: rotate(10deg) scale(1.2);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .flip-inner {
    height: 240px;
  }
}

/* ✅ 이벤트 섹션 전체 */
.event-section {
  background: linear-gradient(180deg, #f6fbff 0%, #eaf7ff 100%);
  padding: 80px 20px;
  text-align: center;
  z-index: 1999;
  position: relative;
  overflow: hidden;
}
/* 이벤트 섹션 안에 깔리는 액체 배경 */
.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30vh; /* 높이 여유있게 확보 */
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  transition: height 0.4s ease;
}
.event-section > *:not(.wave-container) {
  position: relative;
  z-index: 2;
}

.wave-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wave-path-glow {
  animation: shimmer 3s infinite alternate ease-in-out;
  filter: brightness(1.1);
}

@keyframes shimmer {
  0% {
    filter: brightness(1.1);
  }
  100% {
    filter: brightness(1.35);
  }
}


/* ✅ 슬라이더 전체 그룹 */
.slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 600px;
  margin: 40px auto;
}

/* ✅ 개별 슬라이더 박스 */
.slider-block {
  background: #ffffff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
  border: 2px solid #9ecbff;
  position: relative;
}

/* ✅ 슬라이더 라벨 */
.slider-block label {
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
  color: #003366;
}

/* ✅ 슬라이더 바 */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #ddd; /* 비채워진 바 */
  outline: none;
  cursor: pointer;
}

/* 슬라이더 동그라미 (thumb) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #0077b6;
  margin-top: -6px;
  cursor: pointer;
  transition: background 0.3s ease;
}
/* 🎵 노래 */
.slider-block:nth-of-type(1) .slider {
  background: linear-gradient(to right, #a0e9ff, #89c4f4);
}

/* 🎭 연기 */
.slider-block:nth-of-type(2) .slider {
  background: linear-gradient(to right, #ffc6ff, #b28dff);
}

/* 🎨 에너지 */
.slider-block:nth-of-type(3) .slider {
  background: linear-gradient(to right, #ffeaa7, #f6d365);
}

/* ✅ 퍼센트 표시 */
.percent-display {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
}

/* ✅ 결과 버튼 */
.result-btn {
  margin-top: 15px;
  padding: 12px 28px;
  font-size: 1rem;
  background: #68beff;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}


/* ✅ 팝업 배경 */
.result-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
}

/* ✅ 팝업 콘텐츠 */
.slider-result-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 360px;
  background: #f6fbff;
  border: 2px dashed #90e0ef; /* 연한 블루 점선 */
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  text-align: center;
  animation: popupFadeIn 0.4s ease;
}
.slider-result-content h3 {
  font-size: 1.4rem;
  color: #2251a4; /* 강조 색 */
  margin-bottom: 16px;
  border-bottom: 2px dotted #90e0ef;
  display: inline-block;
  padding-bottom: 4px;
}
/* ✅ 팝업 이미지 */
.slider-result-content img {
  width: 80%;
  max-width: 200px;
  margin: 16px 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* 결과 텍스트 */
#resultText {
  font-size: 1.1rem;
  font-weight: bold;
  color: #1c318e;
  margin-bottom: 8px;
  white-space: pre-line;
  line-height: 1.5;
}

/* 서브텍스트 */
#resultSubText {
  font-size: 0.95rem;
  color: #22577a;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: keep-all;
}

/* ✅ 팝업 닫기 버튼 */
.close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.4rem;
  color: #999;
  cursor: pointer;
  transition: color 0.2s;
}
.close-btn:hover {
  color: #333;
}

/* ✅ 팝업 등장 애니메이션 */
@keyframes fadeIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes popupFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 폼 섹션*/
.form-section {
  padding: 80px 20px;
  background: linear-gradient(180deg, #fefefe 0%, #f7fbff 100%);
  color: #333;
  position: relative;
}

.lab-form {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 40px 30px;
  background: #fff;
  border: 2px solid #9ecbff;
  border-radius: 12px;
  box-shadow: 6px 6px 0 rgba(150, 200, 255, 0.4);
  background-image: repeating-linear-gradient(
    to bottom,
    #ffffff 0px,
    #ffffff 28px,
    #eaf6ff 29px,
    #ffffff 30px
  ); /* 줄노트 느낌 */
}

.form-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #448ccf;
  border-bottom: 2px dashed #9ecbff;
  padding-bottom: 10px;
}
.form-subtitle {
  font-size: 13px;
  color: #555;
  margin-bottom: 30px;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 25px;
}

.form-row label {
  width: 70px;
  color: var(--sky-dark);   /* 진한 하늘색으로 가독성 개선 */
  flex-shrink: 0;
}

.form-row input,
.form-row select,
.form-row textarea {
  flex: 1;
  font-family: 'SBAggroL', 'Pretendard', sans-serif;
  padding: 10px 14px;
  border: 2px solid #a0d0ff;
  border-radius: 6px;
  background-color: #fdfdfd;
  box-sizing: border-box;
  font-size: 14px;
  color: #222;
  width: 100%;
}

textarea {
  resize: vertical;
}

.form-submit-btn {
  margin-top: 30px;
  width: 100%;
  padding: 12px 28px;
  font-size: 1rem;
  background-color: #68beff;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 폼 전용 팝업 */
.form-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
}
.form-popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 360px;
  background: #fff;
  border: 2px dashed #9ecbff;
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  text-align: center;
  animation: popupFadeIn 0.4s ease;
}
.form-popup-content h3 {
  font-size: 1.4rem;
  color: #2251a4;
  margin-bottom: 10px;
}
.form-popup-content p {
  font-size: 1rem;
  color: #444;
}
.close-form-popup {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.4rem;
  color: #999;
  cursor: pointer;
}
.close-form-popup:hover {
  color: #333;
}
.result-loading {
  font-size: 1rem;
  color: #2251a4;
  margin: 16px 0px;
  text-align: center;
  animation: blink 1.2s infinite;
  font-family: 'SBAggroM', 'Pretendard', sans-serif;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* 연구 결과 보고서 스타일 */
/* 섹션 전체 스타일 */
#research-results {
  background: radial-gradient(circle at top left, #f7fbff 45%, #cbeaff 100%);
  padding: 70px 20px;
  text-align: center;
}

/* 필터 버튼 스타일 */
.result-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  margin-top: 40px;
}
.filter-btn {
  padding: 8px 16px;
  background-color: #d0eaff;
  border: none;
  border-radius: 20px;
  color: #004b7c;
  cursor: pointer;
  transition: 0.2s ease;
}
.filter-btn.active,
.filter-btn:hover {
  background-color: #6bbefc;
  color: #fff;
}

/* 카드 스크롤 wrapper */
.result-scroll-wrapper {
  overflow-x: auto;
  padding-bottom: 10px;
}
.result-cards {
  display: flex;
  gap: 16px;
  padding: 10px 5px;
  scroll-snap-type: x mandatory;
}

/* 개별 카드 */
.result-card {
  background: white;
  border: 2px dashed #a2cbe9;
  border-radius: 10px;
  padding: 20px;
  width: 280px;
  flex-shrink: 0;
  margin: 0 10px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.05);
  max-height: 390px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.result-card:hover {
  transform: translateY(-5px);
}

.result-category {
  background: #a2cbe9;
  color: #003d66;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.75rem;
  margin-bottom: 10px;
}
.result-nickname {
  font-size: 1rem;
  color: #333;
  margin-bottom: 5px;
}

.result-content {
  position: relative;
  background-color: white;
  padding: 17px;
  line-height: 1.3;
  color: #333;
  border-radius: 12px;
  overflow-wrap: break-word;
  word-break: keep-all;
  font-size: 0.93em;
  margin-top: auto;
  margin-bottom: auto;
}

/* 배너 */
.lab-banner-container {
  background-color: #fffbe5;
  border-top: 2px dashed #f2e7a2;
  border-bottom: 2px dashed #f2e7a2;
  padding: 1rem 0;
  margin: 2rem 0;
  overflow: hidden;
}

.lab-banner {
  position: relative;
  width: 100%;
  height: 2rem;
  overflow: hidden;
}

.lab-banner-track {
  display: flex;
  animation: scroll-left 15s linear infinite;
  width: max-content;
}

.lab-banner-text {
  white-space: nowrap;
  margin-right: 4rem;
  font-size: 1.2rem;
  color: #2251a4;
  letter-spacing: 0.02em;
}
.lab-banner-text strong {
  color: #1c318e;
  background-color: #ffe66d;
  padding: 0 0.4em;
  border-radius: 0.3em;
}

@keyframes scroll-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-33.333%);
  }
}

/* 전체 스크롤바 너비 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 스크롤바 트랙 (바탕) */
::-webkit-scrollbar-track {
  background: #f3f3f3;
  border-radius: 5px;
}

/* 스크롤바 핸들 (움직이는 부분) */
::-webkit-scrollbar-thumb {
  background-color: var(--sky); 
  border-radius: 10px;
  border: 2px solid #f3f3f3; /* 테두리로 둥글고 깔끔한 느낌 */
}

/* 마우스 오버 시 색상 변화 */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--sky-dark); 
}

/* 연구 일지 섹션 전용 카드 디자인 */
#research-log {
  background: linear-gradient(180deg, #f7fbff 0%, #e1f0ff 100%);
}
.log-cards-mask {
  max-width: 900px;
  margin: 40px auto;
  overflow: hidden;
  position: relative;
  transition: max-height 0.6s ease;
}

.log-cards-mask.log-collapsed {
  max-height: 500px; /* 카드 2.5개 정도 높이 */
}

.log-cards-mask.log-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to top, #f7fbff, transparent);
  pointer-events: none;
}

/* 카드 그리드 */
.log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* 카드 디자인 */
.log-card {
  background: #fff;
  border: 1px solid #a0d8ff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(160, 216, 255, 0.3);
  transition: transform 0.2s ease;
}
.log-card:hover {
  transform: translateY(-4px);
}

.log-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 12px;
}
.log-number {
  color: #0077b6;
}
.log-author {
  font-size: 0.8rem;
  font-style: italic;
}
.log-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: #222;
  line-height: 1.5;
}

.log-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px dashed #e0f1ff;
}

.log-text {
  font-weight: 500;
  color: #333;
}

.log-percent {
  color: #0077b6;
  font-weight: bold;
}


/* 얌전한 pill 형태 텍스트 버튼 */
.log-toggle-pill {
  display: inline-block;
  font-size: 0.9rem;
  color: #2251a4;
  background-color: #eef6ff;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-family: 'SBAggroM', 'Pretendard', sans-serif;
}
.log-toggle-pill:hover {
  background-color: #d3ebff;
  color: #1c318e;
}

/* 연구 일지 팝업 */
.log-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
}

.log-popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 360px;
  background: #fff;
  border: 2px dashed #a0d8ff;
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  text-align: center;
  animation: popupFadeIn 0.4s ease;
}
.log-popup-content h3 {
  font-size: 1.2rem;
  color: #0077b6;
  margin-bottom: 12px;
}
.log-popup-content p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  white-space: pre-line;
}
.close-log-popup {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.4rem;
  color: #999;
  cursor: pointer;
}
.close-log-popup:hover {
  color: #333;
}

/* 비커 그리드 */
.beaker-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* 비커 카드 */
.beaker-card {
  display: flex;
  flex-direction: column;
  align-items: center;  /* ✅ 가운데 정렬 */
  cursor: pointer;
  transition: transform 0.3s ease;
  width: 90px; /* ✅ 비커 넓이와 동일하게 */
}
.beaker-card:hover {
  transform: translateY(-5px);
}

/* 비커 본체 */
.beaker.final {
  position: relative;
  width: 80px;
  height: 100px;
  border: 1px solid rgba(180, 180, 180, 0.4); 
  border-top-color: transparent; 
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.05);
  animation: beakerFloat 3s ease-in-out infinite;
}

/* 물 찰랑 */
.beaker-water {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(to top, #4fc3f7, #b3e5fc);
  z-index: 1;
  animation: waveWiggle 2.8s ease-in-out infinite;
  backdrop-filter: blur(0.5px); /* 살짝 번짐 효과 주면 더 물 같음 */
}
@keyframes beakerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes waveWiggle {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(1.05); }
}
/* 수위 */
.water-30 { height: 30%; }
.water-60 { height: 60%; }
.water-90 { height: 90%; }

/* 유광 반사 */
.beaker-gloss {
  position: absolute;
  top: 10px;
  left: 8px;
  width: 12px;
  height: 60px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: rotate(-10deg);
  z-index: 3;
}

/* 눈금 표시 */
.beaker-marks {
  position: absolute;
  left: 6px;
  top: 10px;
  width: 10px;
  height: 100%;
  z-index: 2;
}
.beaker-marks::before,
.beaker-marks::after {
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  background: #99cde9;
  margin: 20px 0;
}
.beaker-marks::after {
  margin-top: 20px;
}
.beaker-marks span {
  display: block;
  width: 10px;
  height: 1px;
  background: #99cde9;
  margin: 16px 0;
}

.beaker-label {
  margin-top: 12px;
  font-size: 0.95rem;
  color: #1c318e;
  font-weight: 600;
}
/* 색상별 비커 */
/* 연분홍 */
.color-pink .beaker-water {
  background: linear-gradient(to top, rgba(244, 143, 177, 0.85), rgba(252, 228, 236, 0.7));
}

/* 연노랑 */
.color-yellow .beaker-water {
  background: linear-gradient(to top, rgba(255, 241, 118, 0.8), rgba(255, 253, 200, 0.6));
}

/* 하늘색 */
.color-sky .beaker-water {
  background: linear-gradient(to top, rgba(135, 206, 250, 0.7), rgba(224, 247, 255, 0.5));
}

.beaker-heart {
  position: absolute;
  bottom: 40%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  font-size: 1.4rem;
  animation: heartPop 0.8s ease forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes heartPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(0.6);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(-20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-40px) scale(1.2);
  }
}


/* 팝업 */
#beakerPopup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.beaker-popup {
  background: #fff;
  width: 90%;
  max-width: 540px;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

#beakerPopupTitle {
  font-size: 1.3rem;
  padding: 18px 22px 12px;
  background: #f4f5f7;
  border-bottom: 1px solid #eee;
}

#beakerPopupBody {
  padding: 20px 18px;
  overflow-y: auto;
  background: #fff;
  color: #2b2b2b;
}

#beakerPopupBody .log-entry {
  background: #f9fbfd;
  border-left: 4px solid #a4c8f0;
  padding: 10px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background 0.3s ease;
}

#beakerPopupBody .log-entry:hover {
  background: #f0f7ff;
}
/* 내용 문장 */
#beakerPopupBody .log-summary {
  font-size: 0.96rem;
  line-height: 1.75;
  margin: 0;
  color: #444;
  position: relative;
}

#beakerPopupBody .log-summary::before {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.95rem;
  color: #7aaadf;
}


.popup-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 22px;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
}


.form-subtitle, button, #footer, .cta-button, .info-line, #resultSubText, .result-content, #formPopupMessage, .coach-card p, .coach-card strong, .flip-back p, .log-content, .log-popup-content, #beakerPopupBody {
	font-family: 'SBAggroL', 'Pretendard', sans-serif;
}
.side-menu, .section-subtitle, .result-nickname, .coach-note, .result-category, .filter-btn, .form-row label, .info-line .label, .flip-back strong, .log-card {
	font-family: 'SBAggroM', 'Pretendard', sans-serif;
}