/* ------------ header ------------------------------ */
.header {
  align-content: center;
  box-shadow: 0px 4px 5px 0 rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0;
  z-index: 1000;
  /* height: 64px; */
  background: var(--color-white);
}
.header .container {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.header .container .header-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header input {
  display: none;
}
.header .container .header-mobile label {
  display: none;
}
/* logo */
.header .container .logo {
  display: flex;
  gap: 8px;
  align-items: center;
  transition: 0.3s ease;
  height: 64px;
}
.header .container .logo:hover {
  transform: scale(1.03);
}
/* 메뉴 */
.header .container nav {
  align-content: center;
}
.header .container nav ul {
  display: flex;
  gap: 24px;
}
.header .container nav ul li {
  display: flex;
  justify-content: center;
}
.header .container nav .text-nav {
  font-size: var(--base-font);
  line-height: var(--base-unit);
}
.header .container nav .text-nav:hover {
  color: var(--color-primary);
}
/* ------header - 모바일----- */
@media (max-width: 768px) {
  .header .container {
    flex-direction: column;
  }
  .header .container nav ul {
    padding: 24px 0;
    flex-direction: column;
    background-color: white;
  }
  .header .container nav ul li {
    justify-content: left;
  }
  .header .container .header-mobile .menu-button1 {
    display: block;
  }
  .header .container nav {
    display: none;
  }
  .header .container nav .btn {
    width: 100%;
    height: 50px;
    text-align: center;
    align-content: center;
  }
}
.header-menu:checked
  ~ .container
  .header-mobile
  .header-menu-box
  .menu-button2 {
  display: block;
}
.header-menu:checked
  ~ .container
  .header-mobile
  .header-menu-box
  .menu-button1 {
  display: none;
}
.header-menu:checked ~ .container nav {
  display: block;
  border-top: 1px solid black;
}

/* ------------ hero ------------------------------ */
/* 배경색 */
.hero {
  position: relative;
  background: var(--gradient-bg-blue-green);
}
/* 레이아웃 */
.hero-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* content - 좌측 레이아웃 */
.hero-content {
  display: flex;
  gap: 35px;
  align-items: flex-start;
  flex-direction: column;
}

/* 뱃지 */
.badge-wrapper {
  display: flex;
  gap: 12px;
}
.hero-badge-highlight {
  border: 1px solid rgba(21, 93, 252, 0.2);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  background: var(--color-white);
  color: var(--color-primary);
}
/* hero - 하이라이트 */
.hero-highlight {
  background: linear-gradient(90deg, #155dfc 0%, #00c950 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
/* hero - 설명 */
.hero-proposal p {
  font-size: var(--body-l);
  line-height: var(--base-unit);
  color: var(--color-gray);
}
.hero-proposal p:first-child {
  margin-bottom: 11px;
}
/* hero - 우측 media 레이아웃 */
.hero-media {
  display: flex;
  gap: 28px;
  flex-direction: column;
}
/* hero - 우측 비디오 */
.hero-video {
  overflow: hidden;
  border-radius: 20px;
}
.hero-video iframe {
  display: block;
  width: 600px;
  height: 337px;
  border-radius: 20px;
  transform: scale(1.03);
}
/* hero - status */
.hero-stat-wrapper {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.hero-stat-wrapper .stat-item {
  flex: 1;
  border-radius: 14px;
}
/* 아래 화살표 */
.arrow-down {
  position: absolute;
  bottom: calc(var(--base-unit) * 2);
  left: 50%;
  font-size: var(--body-s);
  animation: arrow-bounce 1.5s infinite ease-in-out;
  transform: translateX(-50%);
}
@keyframes arrow-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}
/* ------hero - 태블릿----- */
@media (max-width: 1160px) {
  .hero-wrapper {
    gap: calc(var(--base-unit) * 2);
    flex-direction: column;
  }
  .hero-content {
    align-items: center;
  }
  .hero-content h2 {
    text-align: center;
  }
  .hero-proposal {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .arrow-down {
    bottom: calc(var(--base-unit) * 1);
  }
}
@media (max-width: 650px) {
  .hero-content h2 {
    font-size: clamp(var(--heading-xl), 11vw, var(--heading-3xl));
    line-height: clamp(37px, 11vw, calc(var(--base-unit) * 3));
  }
  .hero-video iframe {
    width: clamp(328px, 92vw, 600px);
    height: auto;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 360px) {
  .hero-content h2 {
    font-size: var(--heading-xl);
    line-height: 37px;
  }
  .badge-wrapper {
    flex-direction: column;
  }
  .hero-video iframe {
    width: 328px;
    aspect-ratio: 16 / 9;
  }
  .hero-proposal p {
    font-size: var(--body-s);
  }
  .mobile-br {
    display: block;
  }
  .hero-content .btn {
    align-self: stretch;
    text-align: center;
  }
  .arrow-down {
    bottom: calc(var(--base-unit) * 0.5);
  }
}

/* ------------ problem ------------------------------ */
.problem {
  background-color: var(--color-white);
}
.problem-wrapper {
  display: flex;
  gap: 54px;
  flex-direction: column;
}
.problem-content {
  display: flex;
  gap: 18px;
  text-align: center;
}
.problem-content h2 span {
  color: var(--color-primary);
}
.problem-content p {
  font-size: var(--body-l);
  font-weight: var(--weight-regular);
  line-height: var(--base-unit);
}
/*problem-slide */
.problem-slide {
  overflow: hidden;
}
.problem-slide input {
  display: none;
}

.problem-slide .slide {
  display: flex;
  gap: 28px;
  width: 200%;
}
.problem-slide .slide .question {
  display: flex;
  gap: 16px;
  flex-direction: column;
  padding: 25px 21px;
  border: 1px solid #0000001a;
  position: relative;
  width: calc(100% / 3);
  transition: transform 0.5s ease;
  border-radius: 1.5rem;
}
.question .answer-box {
  display: flex;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border-radius: 1.5rem;
}
.question .answer-box span {
  color: var(--color-primary);
}
.question .answer-box .answer {
  font-size: var(--body-s);
  font-weight: var(--weight-regular);
  line-height: var(--base-unit);
}

.question .answer-box .answer p:nth-child(1) {
  color: var(--color-primary);
}
/* 슬라이드 */
.problem-slide [id="slide01"]:checked ~ .slide .question {
  transform: translateX(0);
}
.problem-slide [id="slide02"]:checked ~ .slide .question {
  transform: translateX(calc(-100% + -28px));
}
.problem-slide [id="slide03"]:checked ~ .slide .question {
  transform: translateX(calc(-200% + -56px));
}
.problem-slide [id="slide04"]:checked ~ .slide .question {
  transform: translateX(calc(-300% + -84px));
}
/* 버튼 */
.slide-button {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 24px;
  margin-inline: auto;
}
.slide-button label {
  display: none;
  align-content: center;
  box-shadow:
    0 10px 15px -3px #0000001a,
    0 4px 6px -4px #0000001a;
  top: 7px;
  width: 40px;
  height: 40px;
  background-color: white;
  color: #000;
  text-align: center;
  border-radius: 50%;
}
.slide-button label:hover {
  background-color: var(--color-primary);
  color: white;
}
.problem-slide [id="slide01"]:checked ~ .slide-button div label:nth-child(1) {
  display: inline-block;
}
.problem-slide [id="slide02"]:checked ~ .slide-button div label:nth-child(2) {
  display: inline-block;
}
.problem-slide [id="slide03"]:checked ~ .slide-button div label:nth-child(3) {
  display: inline-block;
}
.problem-slide [id="slide04"]:checked ~ .slide-button div label:nth-child(4) {
  display: inline-block;
}
/* nav */
.problem-nav {
  display: inline-flex;
  gap: 0.5rem;
  margin-inline: auto;
}
.problem-nav > * {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #ccc;
  border-radius: 50%;
}
.problem-slide
  [id="slide01"]:checked
  ~ .slide-button
  .problem-nav
  div:nth-child(1) {
  width: 3rem;
  background: var(--gradient-blue-green);
  border-radius: 999px;
}
.problem-slide
  [id="slide02"]:checked
  ~ .slide-button
  .problem-nav
  div:nth-child(2) {
  width: 3rem;
  background: var(--gradient-blue-green);
  border-radius: 999px;
}
.problem-slide
  [id="slide03"]:checked
  ~ .slide-button
  .problem-nav
  div:nth-child(3) {
  width: 3rem;
  background: var(--gradient-blue-green);
  border-radius: 999px;
}
.problem-slide
  [id="slide04"]:checked
  ~ .slide-button
  .problem-nav
  div:nth-child(4) {
  width: 3rem;
  background: var(--gradient-blue-green);
  border-radius: 999px;
}
/* ------problem - 태블릿----- */
@media (max-width: 1024px) {
  .problem-slide .slide {
    width: 300%;
  }
  .problem-slide .slide .question {
    width: calc(100% / 2);
  }
}
/* ------problem - 모바일----- */
@media (max-width: 640px) {
  .problem-slide .slide {
    width: 600%;
  }
  .problem-slide .slide .question {
    width: 100%;
  }
}
/* ------------ solution ------------------------------ */
/* 레이아웃 */
.solution {
  display: flex;
  gap: 29px;
  flex-direction: column;
}
.solution header {
  display: flex;
  gap: 29px;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
/* 뱃지 */
.solution-badge {
  background: var(--color-primary-10);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
.solution-highlight {
  color: var(--color-primary);
}
/* 설명 */
.solution-desc {
  font-size: var(--body-l);
  line-height: var(--base-unit);
  color: var(--color-gray);
}
/* 카드 */
.solution-card-container {
  display: flex;
  gap: 24px;
  flex-direction: column;
}
.solution-card-wrapper {
  display: flex;
  gap: 24px;
}
.solution-card {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1;
  padding: 24px;
  border: 1px solid var(--color-gray-20);
  box-sizing: border-box;
  border-radius: 16px;
}
.solution-card-text {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.solution-card-desc {
  font-size: var(--body-s);
  line-height: var(--base-unit);
}
@media (max-width: 768px) {
  .solution-card-wrapper {
    flex-direction: column;
  }
}
@media (max-width: 360px) {
  .solution,
  .solution header,
  .solution-card-container,
  .solution-card-wrapper {
    gap: 16px;
  }
  .solution header h3 {
    font-size: var(--heading-xl);
    line-height: 37px;
  }
  .solution-desc {
    font-size: var(--body-s);
  }
}
/* ------------ result ------------------------------ */
.result {
  padding: 80px 0;
  background: linear-gradient(135deg, #1e69ff 0%, #00ba71 100%);
  color: var(--color-white);
  text-align: center;
}

.result .result-header {
  margin-bottom: 48px;
}

.result .result-header h2 {
  margin-bottom: 12px;
  font-weight: 800;
}

/* ── Result Grid & Card ── */
.result .result-grid {
  display: grid;
  gap: 20px;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(4, 1fr);
}

.result .result-card {
  padding: 48px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
}

.result .result-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-8px);
}

.result .result-card .result-icon {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 2.5rem;
}

.result .result-card .result-value {
  margin-bottom: 8px;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.result .result-card .result-label {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}

.result .result-card .result-label span {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.7;
}

/* ── Partner Section ── */
.result .partner-footer {
  margin-top: 70px;
}

.result .partner-title {
  margin-bottom: 24px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
}

.result .partner-list {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: none; /* 너비 제한 해제 */
  width: 100%;
}

.result .partner-chip {
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* 기업 칩 스타일 (유리 효과 공통 적용) */
.result .partner-chip {
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  outline: none;
  background-color: rgba(255, 255, 255, 0.12);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-white);
  letter-spacing: 0; /* 자간 초기화 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  transition: all 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
}

.result .partner-chip:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px);
}

/* ── Mobile Responsive ── */
@media screen and (max-width: 1024px) {
  .result .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 640px) {
  .result .result-card .result-value {
    font-size: 2.2rem;
  }
  .result .result-card .result-label {
    font-size: 0.95rem;
  }
}
/* ------------ review ------------------------------ */
.review {
  /* section의 상하 패딩은 common.css 가이드(calc(var(--base-unit) * 3))를 따름 */
  background-color: var(--color-bg-light);
}

.review-header {
  /* 여백을 base-unit(27px)의 배수로 설정하여 일관성 유지 */
  margin-bottom: calc(var(--base-unit) * 2);
  text-align: center;
}

.review-subtitle {
  margin-top: 8px;
  font-size: var(--body-l); /* common.css 20px 반영 */
  color: var(--color-gray);
}

/* Review Grid */
.review-grid {
  display: grid;
  gap: var(--base-unit); /* 27px 간격 */
  margin-bottom: calc(var(--base-unit) * 1.5);
  grid-template-columns: repeat(3, 1fr);
}

/* Review Card */
.review-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-20);
  box-shadow: 4px 16px 15px -7px rgba(0, 0, 0, 0.1); /* badge의 그림자값 활용 */
  background: var(--color-white);
  transition: all 0.2s ease; /* .btn의 트랜지션 타임 0.2s와 통일 */
  border-radius: 14px; /* icon-box의 곡률과 통일 */
}

.review-card:hover {
  border-color: var(--color-primary-75);
  transform: translateY(-8px);
}

/* 별점 영역 */
.review-rating {
  margin: 20px 20px 0; /* 내부 위치만 마진으로 고정 */
  color: #966200; /* 포인트 컬러 */
}

.review-rating span {
  font-size: var(--body-l);
}

/* 후기 본문 */
.review-text {
  flex-grow: 1;
  margin: 16px 20px calc(var(--base-unit) * 1);
  font-size: var(--body-m); /* 16px */
  line-height: var(--base-unit); /* 27px */
  color: var(--color-black);
}

/* 작성자 정보 영역 */
.review-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20px 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-bg-gray);
}

.author-name {
  display: block;
  font-size: var(--body-m);
  font-weight: var(--weight-bold);
}

.author-path {
  font-size: var(--body-s); /* 14px */
  color: var(--color-gray);
}

/* 기업 배지 - common.css의 뱃지 느낌 차용 */
.company-badge {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  border-radius: 9999px;
}

.naver {
  background: #e7f9ed;
  color: #037c3a;
}
.kakao {
  background: #fff9e6;
  color: #3c1e1e;
}
.toss {
  background: #ebf3ff;
  color: #0062f5;
}

/* 하단 버튼 */
.btn-review-more {
  display: block;
  border: 1px solid var(--color-primary);
  width: 100%;
  background-color: transparent;
  color: var(--color-primary);
  text-align: center;
}

.btn-review-more:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* 반응형 */
@media screen and (max-width: 1024px) {
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .review-grid {
    grid-template-columns: 1fr;
  }
  .review-header {
    margin-bottom: var(--base-unit);
  }
}

/* ------------ curriculum(안건욱) ------------------------------ */
/* 커리큘럼 블록
   - 커리큘럼 전체 섹션의 레이아웃과 배경을 담당
   - 패딩은 섹션 상하 여백을 정의, 배경은 위->아래 그라데이션으로 시각적 구분을 줌 */
.curriculum {
  background: linear-gradient(
    to bottom,
    var(--color-white),
    oklab(0.944223 0.00154194 -0.00510824 / 0.3)
  );
}

/* ── Header ─────────────────────────────────── */
/* 커리큘럼 헤더
   - 섹션 제목과 부제목을 가운데 정렬
   - 모바일 시 폰트 크기 및 간격을 조절할 여지 있음 */
.curriculum-header {
  margin-bottom: 48px;
  text-align: center;
}
.curriculum-header h3 {
  margin-bottom: 16px;
}
.curriculum-header p {
  margin-bottom: 16px;
  color: var(--color-gray);
}

/* ── Track (scroll container) ───────────────── */
/* 트랙(스크롤 컨테이너)
   - 가로 스크롤로 슬라이드를 보여주는 컨테이너
   - `scroll-snap`을 사용해 슬라이드 정렬을 보장
   - `overscroll-behavior-x: contain`으로 페이지 스크롤과 분리 */
.curriculum-track {
  display: flex;
  gap: 32px;
  flex-wrap: nowrap;
  overflow-x: hidden;
  width: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

/* 포커스 스타일
   - 키보드 접근성을 위해 포커스 시 시각적 표시를 제공 */
.curriculum-track:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* ── Slide ──────────────────────────────────── */
/* 개별 슬라이드
   - 트랙 내부의 각 카드(슬라이드)를 표현
   - 기본적으로 100% 너비로 설정해 뷰포트 하나에 하나의 슬라이드가 보이도록 함
   - 패딩과 테두리로 카드 스타일링, 반응형에서 세로 정렬로 전환 */
.curriculum-slide {
  display: flex;
  gap: 32px;
  flex: 0 0 100%;
  margin: 0;
  padding: 48px;
  border: 1px solid #0000001a;
  max-width: 100%;
  background-color: var(--color-white);
  scroll-snap-align: center;
  border-radius: 1.25rem;
  box-sizing: border-box;
}

/* 슬라이드 내부 컬럼 분배
   - 좌우 열 비율을 동일하게 주기 위해 `flex:1` 사용
   - `min-width:0`으로 내용이 넘칠 때 flexbox 축소를 허용 */
.curriculum-slide > * {
  flex: 1;
  min-width: 0;
}
.curriculum-slide-content > h4,
.curriculum-slide-content > p {
  margin-bottom: 24px;
}

/* 슬라이드 제목 스타일
   - 큰 제목은 줄 바꿈을 허용하여 레이아웃 깨짐 방지 */
.curriculum-slide-content h4 {
  font-size: var(--heading-xl);
  font-weight: 700;
  overflow-wrap: break-word;
}

/* ── Slide Tag (pill label) ─────────────────── */
/* 슬라이드 태그(필형 레이블)
   - 작은 라벨 형태로 단계(1단계/2단계 등)를 표시
   - 둥근 pill 스타일로 가독성 제공 */
.curriculum-slide-tag {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 16px;
  background: var(--gradient-blue-cyan);
  color: var(--color-white);
  border-radius: 9999px;
}

/* ── Details / Accordion base ───────────────── */
/* details/summary 아코디언 기본 */
.curriculum-core,
.curriculum-ai {
  overflow: hidden;
}

/* summary(아코디언 제목)
   - 제목은 좌우 정렬로 요약 텍스트와 상태 아이콘을 배치
   - 포커스 시 접근성 표시를 추가하여 키보드 사용자에게 명확히 함
   - 커스텀 마커(아이콘)는 `::after`로 삽입해 회전 애니메이션 적용 */
.curriculum-core-title,
.curriculum-ai-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.curriculum-core-title:focus-visible,
.curriculum-ai-title:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: 8px;
}

.curriculum-core-title > span,
.curriculum-ai-title > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* 기본 마커를 material icons로 대체 */
.curriculum-core-title::-webkit-details-marker,
.curriculum-ai-title::-webkit-details-marker {
  display: none;
}

.curriculum-core-title::after,
.curriculum-ai-title::after {
  font-family: "Material Icons Outlined";
  transition: transform 0.3s;
  content: "\e313";
}

.curriculum-core[open] summary::after,
.curriculum-ai[open] summary::after {
  transform: rotate(180deg);
}

/* ── Core Accordion ─────────────────────────── */
/* 핵심 학습(코어) 아코디언 스타일
   - 핵심 학습 목록의 제목과 항목 스타일을 정의
   - 각 항목은 좌측 점(원)으로 강조하여 목록성이 높음 */
.curriculum-core {
  margin-bottom: 16px;
}

.curriculum-core-title {
  margin-bottom: 16px;
  font-size: 18px;
}

.curriculum-core-title .material-icons-outlined {
  font-size: 18px;
  color: var(--color-primary);
}

.curriculum-core-title,
.curriculum-core-list li {
  margin-top: 8px;
  padding: 12px 16px;
  background-color: var(--color-bg-gray);
  border-radius: 12px;
}

.curriculum-core-list {
  margin: 0;
  padding-left: 0;
}

.curriculum-core-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  list-style: none;
}

.curriculum-core-list li::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  content: "";
  border-radius: 50%;
}

/* ── AI Accordion ───────────────────────────── */
/* AI 활용 학습 블록
   - AI 관련 학습 항목을 시각적으로 구분하기 위한 스타일
   - 배경/테두리 색상으로 카드 느낌을 줌 */
.curriculum-ai-title {
  padding: 12px 16px;
  background-color: var(--color-bg-purple);
  font-size: 18px;
  border-radius: 12px;
}

.curriculum-ai-title .material-icons-outlined {
  font-size: 18px;
  color: #9f29ff;
}

.curriculum-ai-list {
  margin: 0;
  padding-left: 0;
}

.curriculum-ai-list li {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
  padding: 12px 16px;
  border: 1px solid #e9d4ff;
  background-color: #fdf2f8;
  list-style: none;
  border-radius: 12px;
  box-sizing: border-box;
}

.curriculum-ai-list li .material-icons-outlined {
  font-size: 16px;
  color: #9f29ff;
}

/* ── Slide Visual (right column) ────────────── */
/* 슬라이드 비주얼 열(오른쪽 열)
   - 이미지, 프로젝트 카드, 통계 등 시각 요소들의 공통 마진을 정의 */
.curriculum-slide-visual > * {
  margin-bottom: 24px;
}

/* ── Project ────────────────────────────────── */
/* 프로젝트 카드
   - 각 슬라이드의 대표 프로젝트를 보여주는 카드 스타일
   - 주요 색상과 패딩으로 강조함 */
.curriculum-project {
  margin-bottom: 24px;
  padding: 24px;
  background: var(--gradient-blue-cyan);
  color: var(--color-white);
  border-radius: 16px;
}

/* 슬라이드별 변형 배경
   - 2번째, 3번째 슬라이드에 대해 태그/프로젝트 카드 색상을 별도 지정하여 구분 */
.curriculum-slide:nth-child(2) .curriculum-project,
.curriculum-slide:nth-child(2) .curriculum-slide-tag {
  background: var(--gradient-yellow-orange);
}

.curriculum-slide:nth-child(3) .curriculum-project,
.curriculum-slide:nth-child(3) .curriculum-slide-tag {
  background: var(--gradient-purple-pink);
}

.curriculum-project h5 {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 12px;
  font-weight: 600;
}

.curriculum-project p:last-child {
  margin: 0;
}

.curriculum-project-name {
  margin: 0 0 12px;
  font-size: var(--body-xl);
  font-weight: 700;
}

/* ── Image ──────────────────────────────────── */
/* 프로젝트 이미지
   - 반응형으로 이미지가 영역을 넘지 않도록 `max-width:100%` 적용
   - `object-fit:cover`로 비율 유지하며 잘림 허용 */
.curriculum-image {
  max-width: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* ── Stats ──────────────────────────────────── */
/* 통계(기간/프로젝트 수) 박스
   - 플렉스로 가로 배치, 각 박스는 동일한 비율로 확장
   - 상단 숫자는 그라데이션 텍스트로 강조 */
.curriculum-stats {
  display: flex;
  gap: 16px;
}

.curriculum-stat {
  flex: 1;
  padding: 16px;
  background-color: var(--color-bg-gray);
  text-align: center;
  border-radius: 16px;
}

.curriculum-stat > p {
  margin: 0;
}

/* 텍스트 그래디언트 */
.curriculum-stat > p:first-child {
  display: inline-block;
  margin-bottom: 4px;
  background: var(--gradient-blue-green);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: var(--body-xl);
  color: transparent;
}
/* 버튼 작동 */

.next,
.previous {
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 15px -3px #0000001a,
    0 4px 6px -4px #0000001a;
  width: 40px;
  height: 40px;
  background-color: white;
  color: #000;
  border-radius: 50%;
}

.next:hover,
.previous:hover {
  background-color: var(--color-primary);
  color: white;
}
.next.next-third,
.previous.previous-first {
  pointer-events: none;
}

/* 각 슬라이드가 선택됐을떼 버튼 보여줌 */
.curriculum-track:not(:has(:target)) ~ .curriculum-navigation .next-first,
.curriculum-track:not(:has(:target)) ~ .curriculum-navigation .previous-first,
.curriculum-track:has(.curriculum-slide-1:target)
  ~ .curriculum-navigation
  .previous-first,
.curriculum-track:has(.curriculum-slide-1:target)
  ~ .curriculum-navigation
  .next-first {
  display: flex;
}

.curriculum-track:has(.curriculum-slide-2:target)
  ~ .curriculum-navigation
  .previous-second,
.curriculum-track:has(.curriculum-slide-2:target)
  ~ .curriculum-navigation
  .next-second {
  display: flex;
}
.curriculum-track:has(.curriculum-slide-3:target)
  ~ .curriculum-navigation
  .previous-third,
.curriculum-track:has(.curriculum-slide-3:target)
  ~ .curriculum-navigation
  .next-third {
  display: flex;
}

/* 내비게이션 그룹 */
.curriculum-navigation {
  display: inline-flex;
  gap: 1.5rem;
  align-items: center;
  margin-top: 24px;
  margin-inline: auto;
}
.navigation-group {
  display: inline-flex;
  gap: 1.5rem;
}
.navigation-group .material-icons-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: white;
  cursor: pointer;
  border-radius: 50%;
}

.navigation-indicators {
  display: inline-flex;
  gap: 0.5rem;
  margin-inline: auto;
}
.navigation-indicators > * {
  width: 0.75rem;
  height: 0.75rem;
  background-color: #ccc;
  border-radius: 50%;
}

/* 슬라이드 선택됐을때 필모양으로 변경 */
.curriculum-track:has(.curriculum-slide:nth-child(1))
  ~ .curriculum-navigation
  .navigation-indicators
  > *:nth-child(1) {
  width: 3rem;
  background: var(--gradient-blue-green);
  border-radius: 999px;
}

.curriculum-track:has(.curriculum-slide:nth-child(2):target)
  ~ .curriculum-navigation
  .navigation-indicators
  > *:nth-child(2) {
  width: 3rem;
  background: var(--gradient-yellow-orange);
  border-radius: 999px;
}

.curriculum-track:has(.curriculum-slide:nth-child(3):target)
  ~ .curriculum-navigation
  .navigation-indicators
  > *:nth-child(3) {
  width: 3rem;
  background: var(--gradient-purple-pink);
  border-radius: 999px;
}
.curriculum-track:has(:target:not(:first-child))
  ~ .curriculum-navigation
  .navigation-indicators
  > *:first-child {
  width: 0.75rem;
  height: 0.75rem;
  background: #ccc;
  border-radius: 50%;
}

/* ── Badge ──────────────────────────────────── */
/* 커리큘럼 배지(섹션 강조 문구)
   - 섹션 하단의 강조 문구를 위한 배경/패딩/라운딩 스타일 */
.curriculum-badge {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-top: 36px;
  padding: 12px 24px;
  border: 1px solid var(--color-primary-10);
  background: linear-gradient(90deg, #eff6ff 0%, #f0fdf4 100%);
  border-radius: 9999px;
}

.curriculum__badge span {
  color: var(--color-primary);
}

/* ── Mobile ─────────────────────────────────── */
/* 모바일 반응형
   - 화면 폭이 작을 때 슬라이드 구조를 세로로 쌓이게 전환하여 가독성 확보 */
@media screen and (max-width: 768px) {
  .curriculum {
    padding: 48px 0;
  }

  .curriculum-track {
    align-items: start;
  }

  .curriculum-slide {
    flex-direction: column;
  }
}

/* ------------ cta ------------------------------ */
.cta {
  padding: 80px 0;
  color: var(--color-black);
  background-color: #ffffff;
  color: var(--color-black);
  text-align: center;
}
.cta-content {
  display: flex;
  gap: 45px;
  align-items: center;
  flex-direction: column;
}
.cta-heading {
  font-size: var(--heading-2xl);
  font-weight: var(--weight-bold);
  line-height: calc(var(--base-unit) * 2);
  color: var(--color-black);
}

.gradient-text {
  background: linear-gradient(90deg, #155dfc 0%, #00c950 100%);
  background-clip: text;
  color: transparent;
}

.cta-desc {
  font-size: var(--body-l);
  line-height: 1.5;
  color: var(--color-gray);
}
.cta-action {
  margin-top: 8px;
}

.cta-divider {
  margin: 45px 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.cta-stats {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: center;
}
.cta-stats .stat-item p:first-child {
  background: linear-gradient(90deg, #155dfc 0%, #00c950 100%);
  background-clip: text;
  font-size: var(--body-2xl);
  font-weight: var(--weight-bold);
  line-height: 40px;
  color: transparent;
}
.stat-item p:last-child {
  font-size: var(--body-s);
  color: var(--color-gray);
  color: var(--color-gray);
}

/* ------------ footer ------------------------------ */
.footer {
  padding: 30px 0;
  background-color: #1a1a1a;
  font-size: var(--body-s);
  color: var(--color-white);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.footer-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-links a {
  font-size: var(--body-s);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-white);
}

.footer-links .bar {
  margin: 0 5px;
  color: rgba(255, 255, 255, 0.5);
}

.footer-social {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-social a {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: var(--color-white);
}

.footer-info {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-info address,
.footer-info p {
  font-size: var(--body-s);
  font-style: normal;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.5);
}

.footer-info .copyright {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.5);
}