/* ============================================================
   위니브 AI 코딩 학원 — 페이지 스타일
   값은 design-system 토큰만 사용한다 (hex·radius 직접 입력 금지).
   ============================================================ */

:root {
  --container: 1190px; /* 위니버시티 콘텐츠 폭 */
  --container-narrow: 800px;
  --gutter: var(--space-4);
  --header-height: 70px;
  --section-gap: calc(var(--space-16) + var(--space-8)); /* 96px */
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
  }
}

@media (max-width: 767px) {
  :root {
    --section-gap: var(--space-16);
  }
}

/* ---------- 공통 ---------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: calc(var(--space-16) * -1);
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-btn-surface);
}
.skip-link:focus {
  top: var(--space-4);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 확정 전 내용 표시 — 오픈 전에 모두 없어져야 한다 */
.todo {
  display: inline-block;
  padding: 0 var(--space-1);
  border-radius: var(--radius-chip);
  background: var(--color-lowerror);
  color: var(--color-surface);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
  font-weight: var(--weight-medium);
  vertical-align: middle;
}

/* 이미지·지도 자리 */
.placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-gray-3);
  border-radius: var(--radius-box);
  background: var(--color-gray-1);
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

.card {
  border-radius: var(--radius-card);
  background: var(--color-background);
  box-shadow: var(--shadow-card);
}

.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--color-activation);
  color: var(--color-primary);
}

/* ---------- 버튼 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
  text-decoration: none;
}

.btn--lg {
  min-height: 52px;
  padding-inline: var(--space-6);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-surface);
}
.btn--primary:hover {
  background: var(--code-blue);
}

.btn--secondary {
  border-color: var(--color-gray-2);
  background: var(--color-background);
  color: var(--color-surface);
}
.btn--secondary:hover {
  background: var(--color-gray-1);
}

.btn--inverse {
  background: var(--color-btn-surface);
  color: var(--color-primary);
}
.btn--inverse:hover {
  background: var(--color-activation);
}

.btn--outline-inverse {
  border-color: var(--color-btn-surface);
  color: var(--color-btn-surface);
}
/* 어두운 영상·파란 배경 어디서나 어울리게: 파랑 대신 흰색을 살짝 깐다 */
.btn--outline-inverse:hover {
  background: color-mix(in srgb, var(--color-btn-surface) 16%, transparent);
}

.link-more {
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-medium);
}
.link-more::after {
  content: " \203A";
}

/* ---------- 헤더 ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-gray-2);
  background: var(--color-background);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-surface);
}
.brand:hover {
  text-decoration: none;
}
/* 헤더 로고: weniv + AI academy 한 장 (assets/images/weniv-ai-academy-logo.svg, 308×34)
   위니브 서비스 로고 규격: PC 높이 34, 모바일 26 (위니브 북스 PC-nav 202×34 / mob-top-nav 160×26과 같은 기준) */
.brand img {
  width: auto;
  height: 34px;
}
@media (max-width: 767px) {
  .brand img {
    height: 26px;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-nav__list a {
  display: block;
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-medium);
}
.site-nav__list a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* 현재 페이지 표시 */
.site-nav__list a[aria-current="page"],
.site-nav__trigger.is-current {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* 드롭다운: 교육 후기 */
.site-nav__group {
  position: relative;
}

.site-nav__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-medium);
}
.site-nav__trigger:hover,
.site-nav__trigger[aria-expanded="true"] {
  color: var(--color-primary);
}

/* 아래쪽 꺾쇠, 열리면 뒤집힘 */

.site-nav__sub {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 50%;
  min-width: 160px;
  padding: var(--space-2);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
  background: var(--color-background);
  box-shadow: var(--shadow-card);
  transform: translateX(-50%);
}

.site-nav__sub a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-button);
  white-space: nowrap;
}
.site-nav__sub a:hover {
  background: var(--color-activation);
}

.nav-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: calc(var(--space-2) * -1);
  }

  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: var(--radius-bar);
    background: var(--color-surface);
  }
  .nav-toggle__bar {
    position: relative;
  }
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav-toggle__bar::before {
    top: -6px;
  }
  .nav-toggle__bar::after {
    top: 6px;
  }

  .site-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding: var(--space-4) var(--gutter) var(--space-6);
    border-bottom: 1px solid var(--color-gray-2);
    background: var(--color-background);
  }
  .site-nav.is-open {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav__list a {
    display: block;
    padding: var(--space-3) 0;
  }

  /* 모바일: 드롭다운은 목록 안에서 아래로 펼쳐짐 */
  .site-nav__trigger {
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) 0;
  }

  .site-nav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-2) var(--space-4);
    border: 0; /* 좌측 세로선 없이 들여쓰기로만 하위 메뉴를 구분한다 */
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .site-nav__sub a {
    padding: var(--space-2) 0;
    border-radius: 0;
  }
  .site-nav__sub a:hover {
    background: none;
  }
}

/* ---------- 섹션 공통 ---------- */

.section {
  padding-block: var(--section-gap);
}

.section--tinted {
  background: var(--color-gray-1);
}

.section__head {
  margin-bottom: var(--space-10);
}

.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.section__desc {
  margin-top: var(--space-3);
  color: var(--color-gray-4);
}

@media (max-width: 767px) {
  .section__head {
    margin-bottom: var(--space-8);
  }
}

/* ---------- 1. 히어로: 화면 폭 전체 배경 영상 ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 80vh, 760px);
  padding-block: var(--space-16);
  overflow: hidden;
  background: var(--color-gray-4); /* 영상이 뜨기 전·없을 때 바탕 */
  color: var(--color-btn-surface);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 좁은 화면: 영상 오른쪽의 토끼가 잘리지 않게 오른쪽을 기준으로 자른다.
   영상 높이를 히어로보다 크게(위는 붙이고 아래로 넘치게) 해서 토끼를 살짝 아래로 내린다 → 가운데 제목과 덜 겹친다 (2026-10-27) */
@media (max-width: 767px) {
  .hero__video {
    inset: 0 0 auto;
    height: 125%;
    object-position: 74% top;
  }
}

/* 글씨 대비용 단색 막 (그라데이션 금지) */
.hero__overlay {
  position: absolute;
  inset: 0;
  /* 그라데이션 금지 규칙의 예외(사용자 요청 2026-10-21): 글자가 있는 왼쪽은 진하게, 영상의 토끼가 있는 오른쪽은 투명하게 */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-surface) 75%, transparent) 0%,
    color-mix(in srgb, var(--color-surface) 55%, transparent) 35%,
    color-mix(in srgb, var(--color-surface) 0%, transparent) 75%
  );
}
/* 좁은 화면: 글자가 가로 전체에 걸리므로 고르게 어둡게 */
@media (max-width: 767px) {
  .hero__overlay {
    background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  }
}

.hero__inner {
  position: relative;
}

/* 첫 줄: 방문자의 질문 (작게), 둘째 줄: 원메시지 (크게) */
.hero__question {
  display: block;
  margin-bottom: var(--space-2);
}

.hero__desc {
  margin-top: var(--space-4);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-6);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-btn-surface);
  border-radius: var(--radius-circle);
  color: var(--color-btn-surface);
}
.hero__video-toggle:hover {
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}

/* 정지 아이콘(두 줄) ↔ 재생 아이콘(삼각형) */
.hero__video-toggle-icon {
  width: 12px;
  height: 14px;
  border-inline: 4px solid currentColor;
}
.hero__video-toggle[aria-pressed="true"] .hero__video-toggle-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-block: 8px solid transparent;
  border-inline: 13px solid currentColor;
  border-right-width: 0;
}

.hero__video-toggle[hidden] {
  display: none;
}

/* 모바일에서만 줄을 바꾸는 <br class="br-mobile" /> */
.br-mobile {
  display: none;
}
@media (max-width: 767px) {
  .br-mobile {
    display: inline;
  }
}

@media (max-width: 767px) {
  /* 모바일 히어로: 글자·버튼 가운데 정렬, 가운데보다 살짝 위, 설명 줄은 뺀다 (2026-10-27) */
  .hero {
    min-height: 560px;
    /* 글자 묶음을 가운데보다 살짝 위로: 아래 여백을 더 크게 (위 48 / 아래 112 → 약 32px 위) */
    padding-top: var(--space-12);
    padding-bottom: calc(var(--space-16) + var(--space-12));
    text-align: center;
  }
  .hero__desc {
    display: none;
  }
  /* 모바일: 버튼을 한 줄에 하나씩, 글자 폭만큼 왼쪽 정렬 */
  .hero__actions {
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-6);
  }
}

/* ---------- 3. 수업 방식 ---------- */

.method {
  padding: var(--space-8);
}

/* ---------- 4. 누가 배우나요 ---------- */

.track-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.track {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border: 1px solid var(--color-gray-2);
  box-shadow: none;
}

.track__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.track__info,
.place__info {
  display: grid;
  gap: var(--space-3);
}

.track__info div,
.place__info div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-3);
}

.track__info dt {
  color: var(--color-gray-3);
  font-weight: var(--weight-medium);
}

.place__info dt {
  color: var(--color-gray-3);
}
/* 강의실 대관 문의: 링크·[대관 문의하기](js/rental.js 모달) */
.place__info a,
.place__link {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.place__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.place__info dd {
  word-break: keep-all;
}

.track .btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 1023px) {
  .track-grid {
    grid-template-columns: 1fr;
  }
}
.track-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 1023px) {
  .track-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .track-grid--4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .track {
    padding: var(--space-6);
  }
}

/* ---------- 5. 소개·검증 ---------- */

.proof-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-gray-2);
}

/* 숫자의 기준 표기 (예: 온라인 포함) */

@media (max-width: 767px) {
  .proof-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- 6~7. 결과물·후기 ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.review-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.review {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-8);
}

@media (max-width: 1023px) {
  .review-list {
    grid-template-columns: 1fr;
  }
}

.review__who {
  margin-top: var(--space-4);
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

@media (max-width: 767px) {
  .work-grid,
  .review-list {
    grid-template-columns: 1fr;
  }
}

/* ---------- 9. 강의실 ---------- */

.place {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-12);
}

.place__info {
  margin-top: var(--space-8);
}

@media (max-width: 767px) {
  .place {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* ---------- 8. 자주 묻는 질문 ---------- */

.tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.tabs__tab {
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-pill);
  color: var(--color-gray-4);
}
.tabs__tab[aria-selected="true"] {
  border-color: var(--color-primary);
  background: var(--color-activation);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.faq__item {
  border-bottom: 1px solid var(--color-gray-2);
}
.faq__item:first-child {
  border-top: 1px solid var(--color-gray-2);
}

.faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "+";
  color: var(--color-gray-3);
}
.faq__item[open] summary::after {
  content: "\2212";
}

.faq__item p {
  padding-bottom: var(--space-5);
  color: var(--color-gray-4);
}

/* ---------- 10. 신청하기 ---------- */

.apply {
  background: var(--color-primary);
  color: var(--color-btn-surface);
  text-align: center;
}

.apply__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.apply__desc {
  margin-top: var(--space-4);
}

.apply__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media (max-width: 767px) {
  .apply__actions {
    flex-direction: column;
    width: 100%;
  }
}

/* ---------- 11. 푸터 (위니버시티 FE Footer, 2026-10-22) ----------
   gray-1 바탕, 위아래 60. 1줄: 회색 로고 + [정책 링크(| 구분) / ©] gray-3
   2줄: 학원·회사 정보(| 구분, 줄 높이 1.8) gray-4 + 오른쪽 SNS. 글자는 FE 12를 사이트 규칙대로 한 단계 크게 14 */
.site-footer {
  padding-block: 60px;
  background: var(--color-gray-1);
  color: var(--color-gray-3);
}
.site-footer__copyright {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* 로고: 위니버시티처럼 회색 한 가지 색. 같은 로고를 gray-3(#8D9299)로 칠한 파일 (assets/images/weniv-ai-academy-logo-gray.svg)
   CSS 마스크는 파일로 열거나 일부 환경에서 안 보여서 이미지로 쓴다 */
.site-footer__logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 26px;
}
.site-footer__policy,
.site-footer__info ul {
  display: flex;
  flex-wrap: wrap;
}
.site-footer__policy {
  margin-bottom: 2px;
}
.site-footer__policy a {
  color: inherit;
}
.site-footer__policy a:hover {
  text-decoration: underline;
}
.site-footer__policy .site-footer__ext {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* 목록 사이 세로 구분선 (FE: 1px, 글자 높이 0.8배, gray-3) */
.site-footer__policy li:not(:last-child)::after,
.site-footer__info li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.8em;
  margin: 0 0.5em;
  background: var(--color-gray-3);
  vertical-align: middle;
}
.site-footer__infos {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-4);
}
/* 정보: 학원 / 회사 / 주소 세 줄 (한 줄씩 끊어 줄 끝에 구분선이 남지 않게) */
.site-footer__info {
  margin-top: 2px;
  color: var(--color-gray-4);
  line-height: 1.8;
}
.site-footer__info address {
  display: inline;
  font-style: normal;
}
/* SNS (FE SNSList): 지름 36 원, gray-3 바탕에 gray-2 아이콘 18, 마우스 올리면 흰 아이콘 */
.site-footer__sns {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.site-footer__sns a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: var(--color-gray-3);
  color: var(--color-gray-2);
  transition: color 0.2s;
}
.site-footer__sns a:hover {
  color: var(--color-background);
}
.site-footer__sns svg {
  width: 18px;
  height: 18px;
}
/* 태블릿: 정보 아래로 SNS (오른쪽 정렬) */
@media (max-width: 1023px) {
  .site-footer__infos {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
}
/* 모바일: 가운데 정렬, SNS가 정보 위로 */
@media (max-width: 767px) {
  .site-footer__copyright {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
  /* 모바일: 구분선 없이 정책 링크는 줄바꿈 간격으로, 정보는 한 항목씩 */
  .site-footer__policy {
    justify-content: center;
    gap: var(--space-1) var(--space-3);
  }
  .site-footer__policy li::after,
  .site-footer__info li::after {
    display: none !important;
  }
  .site-footer__info ul {
    flex-direction: column;
    align-items: center;
  }
  .site-footer__infos {
    flex-direction: column-reverse;
    gap: var(--space-6);
  }
  .site-footer__sns {
    margin: 0 auto;
  }
  .site-footer__sns a {
    width: 32px;
    height: 32px;
  }
  .site-footer__info {
    text-align: center;
  }
}

/* ============================================================
   하위 페이지 공통
   ============================================================ */

/* 페이지 머리 */
.page-head {
  padding-block: var(--space-16);
  background: var(--color-background); /* 다른 페이지 히어로와 통일 */
}

.page-head__for {
  color: var(--color-primary);
}

.page-head__title {
  margin-top: var(--space-2);
}

.page-head__desc {
  margin-top: var(--space-3);
  color: var(--color-gray-4);
}

@media (max-width: 767px) {
  .page-head {
    padding-block: var(--space-12);
  }
}

/* 두 칸 카드 목록 (과정·지원 제도) */
.card-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (max-width: 767px) {
  .card-pair {
    grid-template-columns: 1fr;
  }
}

/* 안내 목록 (준비물·교습비 등) */
.info-list {
  display: grid;
  border-top: 1px solid var(--color-gray-2);
}
.info-list div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-gray-2);
}
.info-list dt {
  color: var(--color-gray-4);
  font-weight: var(--weight-semibold);
}

@media (max-width: 767px) {
  .info-list div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* 분류 필터 (후기·결과물) */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.filter__btn {
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-pill);
  color: var(--color-gray-4);
  font-weight: var(--weight-medium);
}
.filter__btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-activation);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

[data-category][hidden] {
  display: none;
}

/* 결과물 카드 */
.work-card__thumb {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
}

.work-card__title {
  margin-top: var(--space-2);
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
  font-weight: var(--weight-bold);
}

.work-card__desc {
  margin-top: var(--space-1);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

/* 강사 소개 (위니브 소개 페이지) */
.teacher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.teacher__photo {
  aspect-ratio: 1;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-card);
}

.teacher__role {
  color: var(--color-primary);
}

.teacher__name {
  margin-top: var(--space-1);
}

@media (max-width: 767px) {
  .teacher-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* 기업·기관 정부 지원 교육 띠 #business (2026-10-27): 일반 섹션보다 얇은 CTA 띠. 가운데 제목·설명 + 지원 과정 버튼 2개.
   위 과정 섹션(회색)·아래 강의실(흰색)과 나뉘게 연한 파랑(activation) 배경, 맨 아래 상담 CTA(진한 파랑)와는 겹치지 않게 연하게 */
.biz {
  padding-block: var(--space-16);
  background: var(--color-activation);
}
.biz__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}
.biz__icon {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-primary);
}
/* 사이트 기본 글 선택 색(design-system ::selection = activation)이 이 띠 배경과 같아 선택이 안 보여서, 띠 안에서만 진한 파랑 + 흰 글자 */
.biz ::selection {
  background: var(--color-primary);
  color: var(--color-btn-surface);
}
.biz__inner .section__desc {
  margin-top: var(--space-3);
}
.biz__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.biz__actions .btn {
  gap: var(--space-1);
}
@media (max-width: 767px) {
  .biz {
    padding-block: var(--space-12);
  }
  .biz__icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-3);
  }
  .biz__actions {
    width: 100%;
    flex-direction: column;
  }
}

.track-more {
  margin-top: var(--space-10);
  text-align: center;
}

/* 페이지 준비 중 (결과물 전시장): 내용이 짧아도 푸터가 화면 맨 아래에 붙는다 */
body {
  display: flex;
  flex-direction: column;
}

#main {
  flex: 1 0 auto;
}

main:has(> .coming-soon) {
  display: flex;
  flex-direction: column;
}

.coming-soon {
  display: flex;
  flex: 1;
  align-items: center;
  padding-block: calc(var(--space-16) * 2);
  background: var(--color-background);
}

.coming-soon__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.coming-soon__image {
  width: 280px;
  height: auto;
  margin-bottom: var(--space-6);
}

.coming-soon__title {
  margin-top: var(--space-2);
  font-size: var(--font-size-32);
  line-height: var(--line-height-32);
  font-weight: var(--weight-bold);
}

.coming-soon__desc {
  margin-top: var(--space-4);
  color: var(--color-gray-4);
}

.coming-soon__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media (max-width: 767px) {
  .coming-soon {
    padding-block: var(--space-16);
  }
  .coming-soon__image {
    width: 200px;
  }
  .coming-soon__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-24);
  }
  .coming-soon__actions {
    flex-direction: column;
    width: 100%;
  }
}

/* 네이버 블로그 글 카드 (성인 과정 "위니브가 진행해 온 성인 AI 교육"): 카드 전체가 글 링크 */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   메인 페이지: 원메시지 흐름 (docs/main-page.md)
   ============================================================ */

.section__head--center {
  text-align: center;
}

/* 사진 자리: 비율을 고정해 두고, 사진이 오면 <img>를 넣는다 */
.media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-card);
  background: var(--color-gray-2);
}
.media img,
.media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--4x3 {
  aspect-ratio: 4 / 3;
}
.media--16x10 {
  aspect-ratio: 16 / 10;
}
.media--3x2 {
  aspect-ratio: 3 / 2;
}
.media__guide {
  padding: var(--space-4);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  text-align: center;
}
.media img + .media__guide {
  display: none;
}

/* 디졸브 사진 칸 (js/main.js [data-dissolve]): 사진을 겹쳐 두고 켜진 사진만 서서히 나타난다 */
.dissolve img {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.dissolve img.is-active {
  opacity: 1;
}
/* 사진 위 아래쪽 가운데 점: 누르면 그 사진으로. 밝은 사진 위에서도 보이게 반투명 어두운 알약 위에 흰 점 */
.dissolve__dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  z-index: 1;
  display: flex;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  transform: translateX(-50%);
}
.dissolve__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.dissolve__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--color-btn-surface);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.dissolve__dot:hover::before {
  opacity: 0.8;
}
.dissolve__dot[aria-current="true"]::before {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .dissolve img {
    transition: none;
  }
}

/* 2. 공감 */
.voice-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 880px;
  margin-inline: auto;
}

.voice {
  padding: var(--space-6);
  border-radius: var(--radius-box);
  background: var(--color-background);
}
.voice::before {
  content: "\201C";
  display: block;
  height: var(--space-5);
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-32);
  line-height: 1;
}

.voice-answer {
  margin-top: var(--space-10);
  color: var(--color-primary);
  text-align: center;
}

@media (max-width: 767px) {
  .voice-list {
    grid-template-columns: 1fr;
  }
}

/* 3. 약속: 사진과 글이 번갈아 */
.promise-list {
  display: grid;
  gap: var(--space-16);
}

.promise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-12);
}
.promise:nth-child(even) .promise__media {
  order: 2;
}

.promise__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
}

.promise__no {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--color-btn-surface);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
  font-weight: var(--weight-bold);
}

.promise__title {
  margin-top: var(--space-3);
}

.promise__desc {
  margin-top: var(--space-4);
  color: var(--color-gray-4);
}

.promise__text .link-more {
  display: inline-block;
  margin-top: var(--space-5);
}

@media (max-width: 767px) {
  .promise-list {
    gap: var(--space-12);
  }
  .promise {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .promise:nth-child(even) .promise__media {
    order: 0;
  }
}

/* 4. 실적 */
.stat-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-background);
  text-align: center;
}

.stat__value {
  color: var(--color-primary);
  font-size: var(--font-size-32);
  line-height: var(--line-height-32);
  font-weight: var(--weight-bold);
}

.stat__label {
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.stat__label small {
  color: var(--color-gray-3);
  font-size: var(--font-size-12);
}

@media (max-width: 1023px) {
  .stat-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .stat__value {
    font-size: var(--font-size-24);
    line-height: var(--line-height-24);
  }
}

/* 5. 과정 안내: 사진이 위에 붙는 카드 */
.track--photo {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.track__media {
  border-radius: 0;
}

.track__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
}

.track__for {
  color: var(--color-gray-3);
}

.track__desc {
  color: var(--color-gray-4);
}

.track--photo .btn {
  margin-top: auto;
}
.track--photo .track__badges {
  margin-bottom: var(--space-3);
}

/* 6. 결과물: 메인에서는 카드 아래 글 */
.work-grid .work-card__title {
  margin-top: var(--space-4);
}

/* 8. 가볍게 시작하기: 입구 카드 3장, 카드마다 자기 버튼 */
.start-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1023px) {
  .start-grid {
    grid-template-columns: 1fr;
  }
}

/* 9. 강의실: 큰 사진 1장 + 작은 사진 2장 */
.place__text .btn {
  margin-top: var(--space-6);
}
/* 강의실 버튼 줄: [강의실 안내 보기](노션) [지도 보기] */
.place__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.place__actions .btn {
  margin-top: 0;
}
/* 버튼 글 옆 새 창 화살표: 헤더 [위니버시티↗]와 같은 간격(4px) */
.btn:has(> .btn__ext) {
  gap: var(--space-1);
}
.btn__ext {
  flex-shrink: 0;
}

.place-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-3);
}
.place-gallery .media {
  aspect-ratio: 4 / 3;
}
.place-gallery .place-gallery__main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* ============================================================
   중·고등 과정 페이지 (docs/youth-page.md)
   ============================================================ */

/* 페이지 히어로: 글과 사진 나란히 */
.page-hero {
  padding-block: var(--space-16);
  background: var(--color-background); /* 바로 아래 고민 섹션(회색)과 구분 */
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-12);
}

.page-hero__title {
  margin-top: var(--space-2);
}

.page-hero__desc {
  margin-top: var(--space-4);
  color: var(--color-gray-4);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media (max-width: 767px) {
  .page-hero {
    padding-block: var(--space-12);
  }
  .page-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .page-hero__actions .btn {
    flex: 1 1 auto;
  }
}

/* 수업 흐름 4단계 */
.step-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  counter-reset: none;
}

.step {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-card);
}

.step__no {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--color-activation);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

.step__title {
  margin-top: var(--space-4);
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
  font-weight: var(--weight-bold);
}

.step__desc {
  margin-top: var(--space-2);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

@media (max-width: 1023px) {
  .step-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .step-list {
    grid-template-columns: 1fr;
  }
}

/* 학부모 안내 */
.notice-list {
  margin-top: var(--space-8);
}
.notice-list div {
  grid-template-columns: 120px 1fr;
}

/* ============================================================
   성인 과정 페이지 (docs/adult-page.md)
   ============================================================ */

/* 이미 해낸 사람들: 직업 칩 */
.people-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  max-width: 880px;
  margin-inline: auto;
}
.people-list li {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  font-weight: var(--weight-semibold);
}

.works-note {
  margin-top: var(--space-6);
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  text-align: center;
}

/* 후기: 한 줄 제목 + 원문 */
.review__text {
  color: var(--color-gray-4);
}

/* 5단계 커리큘럼 */
@media (min-width: 1280px) {
  .step-list--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .step-list--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 페이지 히어로 첫 줄: 방문자의 질문 (문체 규칙 §7 히어로 = 질문 → 큰 답) */
.page-hero__question {
  margin-top: var(--space-3);
  color: var(--color-gray-4);
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
  font-weight: var(--weight-medium);
}
@media (max-width: 767px) {
  .page-hero__question {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16);
  }
}

/* ============================================================
   전체 글자 크기 한 단계 키움 (2026-10-14, 모든 페이지·메뉴·푸터 포함)
   2026-10-27부터 제목·설명·본문·태그·버튼 크기는 맨 끝 '글자 단계'(.type-scale)가 정한다.
   여기에는 글자 단계에 넣지 않은 요소(메뉴, 푸터, 보관 페이지 전용 요소 등)만 남았다.
   ============================================================ */

/* 히어로 */
 {
  font-size: var(--font-size-40);
  line-height: var(--line-height-40);
}
.page-hero__question {
  font-size: var(--font-size-24);
  line-height: var(--line-height-24);
}

/* 섹션 제목 */
 {
  font-size: var(--font-size-32);
  line-height: var(--line-height-32);
}

/* 카드·소제목 */
.work-card__title,
.step__title {
  font-size: var(--font-size-24);
  line-height: var(--line-height-24);
}
.stat__value {
  font-size: var(--font-size-40);
  line-height: var(--line-height-40);
}

/* 설명·리드 */
 {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
}

/* 보조 글 (14 → 16) */
.site-nav__list a,
.site-nav__trigger,
.link-more,
.work-card__desc,
.review__who,
.step__desc,
.stat__label,
.works-note {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
}
.site-footer {
  font-size: var(--font-size-14); /* 위니버시티 푸터 12의 한 단계 위 */
  line-height: var(--line-height-14);
}

/* 칩·날짜 (12 → 14) */
.stat__label small {
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

@media (max-width: 767px) {
   {
    font-size: var(--font-size-32);
    line-height: var(--line-height-32);
  }
  .page-hero__question {
    font-size: var(--font-size-16);
    line-height: var(--line-height-16);
  }
   {
    font-size: var(--font-size-24);
    line-height: var(--line-height-24);
  }
  .work-card__title,
  .step__title {
    font-size: var(--font-size-18);
    line-height: var(--line-height-18);
  }
  .stat__value {
    font-size: var(--font-size-32);
    line-height: var(--line-height-32);
  }
}

/* 성인 과정 v2: 지원 제도 카드 */
.support-card__point {
  color: var(--color-primary);
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
  font-weight: var(--weight-bold);
}
.support-card__point small {
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  font-weight: var(--weight-medium);
}
.support-card__note {
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

/* 학원 소개: 위니브가 만든 학습 플랫폼 (피그마 2065:215)
   회색 띠 높이 386, 왼쪽 글 558 / 오른쪽 강의 화면 646(모서리 16, 그림자)이 위에서 64 내려와 띠 아래 끝에서 잘린다 */
.platform-band {
  overflow: hidden;
  padding-block: 0;
  background: var(--color-gray-1);
}
.platform-cta {
  display: grid;
  grid-template-columns: 558px minmax(0, 1fr);
  min-height: 386px;
}
.platform-cta__text {
  display: grid;
  align-content: center;
  justify-items: start;
  padding-block: var(--space-12);
}
.platform-cta__logo {
  display: block;
  width: 138px;
  height: auto;
  margin-bottom: var(--space-6);
}
.platform-cta__brand {
  color: var(--color-primary);
}
.platform-cta__desc {
  margin-top: var(--space-4);
  color: var(--color-gray-4);
  word-break: keep-all;
}
.platform-cta__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-8);
  color: var(--color-surface);
}
.platform-cta__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.platform-cta__arrow {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.platform-cta__link:hover .platform-cta__arrow {
  transform: translateX(2px);
}
.platform-cta__shot {
  position: relative;
}
.platform-cta__shot img {
  position: absolute;
  top: 64px;
  left: -14px;
  display: block;
  width: 646px;
  max-width: none;
  height: auto;
  border-radius: var(--radius-soft);
  background: var(--color-background);
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.04);
}
@media (max-width: 1023px) {
  .platform-cta {
    grid-template-columns: 1fr;
  }
  .platform-cta__text {
    padding-block: var(--space-12) var(--space-8);
  }
  /* 칸 높이를 그림 폭에 비례해 그림 높이(폭의 53%)보다 낮게: 어느 폭에서도 그림 아래가 띠 끝에서 잘린다 */
  .platform-cta__shot {
    width: min(100%, 646px);
    height: auto;
    aspect-ratio: 646 / 290;
  }
  .platform-cta__shot img {
    top: 0;
    left: 0;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .platform-cta__desc br {
    display: none;
  }
}

/* ============================================================
   스크롤 리빌 (js/main.js): 자바스크립트가 켜졌을 때만 숨겼다가 나타낸다
   ============================================================ */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   기업 AX 페이지 (docs/business-page.md)
   ============================================================ */

/* 함께한 기관과 기업: 구분 라벨 + 이름 나열 */
.client-table {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-gray-2);
}
.client-table div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-gray-2);
}
.client-table dt {
  color: var(--color-gray-4);
  font-weight: var(--weight-semibold);
}
@media (max-width: 767px) {
  .client-table div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ============================================================
   메인 페이지: 피그마 랜딩 템플릿에서 가져온 요소 (2026-10-14)
   출처: 메이커리(새소식 띠, 지그재그 글 구조, 이미지 카드) / 퀘스트데이(말풍선, Q·A 배지)
   둥글기는 디자인 시스템 7단계로 맞춤 (카드 20 / 박스 10 / 칩 4)
   ============================================================ */

/* 2. 고민: 말풍선 좌우 번갈아 — 퀘스트데이 공감 섹션 */
.voice-list--chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 560px;
  margin-inline: auto;
}
.voice-list--chat .voice {
  align-self: flex-start;
  max-width: 80%;
  border-radius: var(--radius-card);
  border-top-left-radius: var(--radius-chip);
  box-shadow: var(--shadow-card);
}
.voice-list--chat .voice::before {
  display: none;
}
.voice-list--chat .voice--right {
  align-self: flex-end;
  border-top-left-radius: var(--radius-card);
  border-top-right-radius: var(--radius-chip);
  background: var(--color-primary);
  color: var(--color-btn-surface);
}
@media (max-width: 767px) {
  .voice-list--chat .voice {
    max-width: 92%;
  }
}

/* 3. 약속: 메이커리 지그재그 글 구조 (라벨 18 → 제목 40 → 설명 18, 간격 12·24) */
.promise__title {
  margin-top: var(--space-3);
}
.promise__desc {
  margin-top: var(--space-6);
}
/* 설명 아래 버튼 한 개 (2번 칸 [결과물 갤러리↗]) */
.promise__action {
  margin-top: var(--space-6);
}
@media (max-width: 767px) {
  .promise__desc {
    margin-top: var(--space-4);
  }
}

/* 3. 약속 사진: 이미지 카드 (위니버시티 카드처럼 1px 연회색 테두리 + 그림자, 2026-10-22 연파랑 2px에서 변경). 둥글기는 카드 20 */
.promise__media {
  border: 1px solid var(--color-gray-2);
  box-shadow: var(--shadow-card);
}

/* FAQ: Q·A 배지 — 퀘스트데이 */
.faq__q,
.faq__a {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: var(--space-3);
  border-radius: var(--radius-circle);
  font-size: var(--font-size-14);
  line-height: 1;
  font-weight: var(--weight-bold);
}
.faq__q {
  background: var(--color-primary);
  color: var(--color-btn-surface);
}
.faq__a {
  background: var(--color-gray-2);
  color: var(--color-gray-4);
}
.faq__item summary {
  justify-content: flex-start;
  align-items: center;
}
.faq__item summary::after {
  margin-left: auto;
}
.faq__item p {
  display: flex;
  align-items: flex-start;
}
.faq__item p .faq__a {
  margin-top: 1px;
}
/* 답변 안 링크: 다른 페이지·바깥 누리집은 <a>, 상담·문의 모달은 <button>을 링크 모양으로. 답변 글은 <span> 하나로 감싸 flex에서 문장이 끊기지 않게 한다 */
button.faq__link {
  display: inline;
  padding: 0;
}
.faq__link {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   교육 사례집 페이지 (docs/cases-page.md)
   ============================================================ */
.cases-count {
  margin-left: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* 필터 2줄 */
.cases-filters {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
.cases-filter {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: var(--space-3);
}
.cases-filter__label {
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-semibold);
}
.cases-filter .filter {
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .cases-filter {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* 연도 묶음 */
.cases-grid {
  display: grid;
  gap: var(--space-12);
}
.cases-year__title {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-2);
  color: var(--color-gray-4);
  font-size: var(--font-size-24);
  line-height: var(--line-height-24);
  font-weight: var(--weight-bold);
}
.cases-year__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1023px) {
  .cases-year__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .cases-year__list {
    grid-template-columns: 1fr;
  }
}

/* 카드 */
.case-card__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-background);
  box-shadow: var(--shadow-card);
  color: var(--color-surface);
  text-align: left;
  transition: transform 0.15s ease;
}
button.case-card__inner:hover {
  transform: translateY(-2px);
}
button.case-card__inner:hover .case-card__title {
  color: var(--color-primary);
}
.case-card--static .case-card__inner {
  opacity: 0.85;
}
.case-card__media {
  border-radius: 0;
}
.case-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
}
.case-card__title {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
  font-weight: var(--weight-bold);
}
.case-card__meta {
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.case-card__more {
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-semibold);
}
.case-card__more::after {
  content: " \203A";
}
.cases-empty {
  padding: var(--space-12) 0;
  color: var(--color-gray-4);
  text-align: center;
}

/* 모달: dialog는 틀만, 스크롤은 __body가 맡는다 (모서리 안쪽에서 스크롤바가 돌게) */
.case-dialog {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100% - var(--space-8)));
  max-height: calc(100dvh - var(--space-16));
  margin: auto; /* reset.css가 margin을 0으로 만들어 가운데 정렬이 풀린다 */
  padding: 0;
  overflow: hidden;
  overflow: clip; /* 안쪽 요소의 scrollIntoView가 모달 틀 자체를 밀어 올리지 못하게 */
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.case-dialog:not([open]) {
  display: none;
}
.case-dialog::backdrop {
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}
.dialog-open {
  overflow: hidden;
}
.case-dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-circle);
  background: var(--color-background);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-16);
}
.case-dialog__close:hover {
  background: var(--color-gray-1);
}
.case-dialog__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 모달 스크롤바 (시안 B, 2026-10-21): 얇은 회색 알약. 가장자리에서 띄우고 위아래 둥근 모서리는 비운다.
   크롬·엣지·사파리는 ::-webkit-scrollbar, 파이어폭스만 scrollbar-* (둘을 같이 쓰면 크롬이 webkit 모양을 무시한다) */
@supports not selector(::-webkit-scrollbar) {
  .case-dialog__body {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-3) transparent;
  }
}
.case-dialog__body::-webkit-scrollbar {
  width: 12px;
}
.case-dialog__body::-webkit-scrollbar-track {
  margin-block: var(--space-3);
  background: transparent;
}
.case-dialog__body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-gray-2);
  background-clip: padding-box;
}
.case-dialog__body::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-3);
}
.case-dialog__media {
  border-radius: 0;
}
.media--16x9 {
  aspect-ratio: 16 / 9;
}
.case-dialog__content {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-8);
}
.case-dialog__head {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}
.case-dialog__program {
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.case-dialog__summary {
  color: var(--color-gray-4);
}
.case-dialog__table div {
  grid-template-columns: 96px 1fr;
}
.case-dialog__section h3 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
  font-weight: var(--weight-bold);
}
.case-dialog__links li + li {
  margin-top: var(--space-2);
}
.case-dialog__quote {
  padding: var(--space-5);
  border-radius: var(--radius-box);
  background: var(--color-gray-1);
}
.case-dialog__quote footer {
  margin-top: var(--space-3);
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.case-dialog__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.case-dialog__gallery img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-box);
}
.case-dialog__action {
  text-align: center;
}
@media (max-width: 767px) {
  .case-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .case-dialog__content {
    padding: var(--space-6) var(--space-4);
  }
  .case-dialog__table div {
    grid-template-columns: 1fr;
  }
  .case-dialog__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   과정 안내: 월 달력 + 과정 모달 (courses.html, docs/courses-page.md, js/course-calendar.js)
   ============================================================ */
.cal {
  overflow: hidden;
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-card);
  background: var(--color-background);
  box-shadow: var(--shadow-card);
}
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
}
.cal__nav {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background: var(--color-gray-1);
  color: var(--color-surface);
}
.cal__nav:hover:not(:disabled) {
  background: var(--color-activation);
  color: var(--color-primary);
}
.cal__nav:disabled {
  color: var(--color-gray-2);
  cursor: default;
}
.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal__weekdays {
  border-top: 1px solid var(--color-gray-2);
  background: var(--color-gray-1);
}
.cal__weekdays span {
  padding: var(--space-3) 0;
  color: var(--color-gray-4);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  font-weight: var(--weight-semibold);
  text-align: center;
}
.cal__weekdays .is-sat,
.cal__day.is-sat .cal__date {
  color: var(--color-primary);
}
/* 일요일·공휴일은 빨강. 토요일 공휴일도 빨강이 이기도록 뒤에 둔다 */
.cal__weekdays .is-sun,
.cal__day.is-sun .cal__date,
.cal__day.is-holiday .cal__date {
  color: var(--color-error);
}
.cal__day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 168px;
  padding: var(--space-3);
  border-top: 1px solid var(--color-gray-2);
  border-left: 1px solid var(--color-gray-2);
  cursor: pointer;
}
.cal__day:nth-child(7n + 1) {
  border-left: 0;
}
.cal__day--empty {
  background: var(--color-gray-1);
  cursor: default;
}
.cal__day.is-holiday {
  background: color-mix(in srgb, var(--color-error) 6%, var(--color-background));
}
.cal__date {
  align-self: flex-start;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  color: var(--color-surface);
  font-size: var(--font-size-16);
  line-height: 32px;
  font-weight: var(--weight-semibold);
}
.cal__day.is-today .cal__date {
  background: var(--color-primary);
  color: var(--color-background);
}
.cal__holiday {
  color: var(--color-error);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.cal__events {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 긴 과정명이 날짜 칸 밖으로 밀고 나가지 않게 */
  gap: var(--space-2);
}

/* 일정 칩: 대상별 색. 모집 마감·시작은 흰 바탕 + 테두리 */
.cal-event {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-semibold);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: color-mix(in srgb, var(--track) 14%, var(--color-background));
  color: var(--color-surface);
}
/* 분류별 색 (js가 cal-group-*를 붙인다): 중·고등 노랑 / 성인 국비지원 파랑 / 성인 일반 초록 / 특강·협력 회색 */
.cal-group-youth {
  --track: var(--weniv-yellow);
}
.cal-group-adult-support {
  --track: var(--color-primary);
}
.cal-group-adult-paid {
  --track: var(--weniv-green);
}
.cal-group-special {
  --track: var(--color-gray-3);
}

.cal-event.cal-group-youth {
  background: color-mix(in srgb, var(--track) 30%, var(--color-background));
}
/* 수업 칩은 테두리 없이 (모집 마감만 테두리). 테두리 칸만큼 안쪽 여백을 늘려 크기는 그대로, 삼각형은 모서리에 딱 붙는다 */
.cal-event:not(.cal-event--recruit) {
  padding: calc(var(--space-1) + 1px) calc(var(--space-2) + 1px);
  border: 0;
}
/* 개강·종강: 다른 수업 날과 같은 연한 칩 + 모서리 삼각형 (개강 = 왼쪽 위, 종강 = 오른쪽 아래) */
.cal-event--start::before,
.cal-event--end::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--track);
}
.cal-event--start::before {
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cal-event--end::after {
  right: 0;
  bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.cal-event--recruit {
  border-color: var(--track);
  background: var(--color-background);
  color: var(--track);
}
.cal-group-youth.cal-event--recruit {
  color: var(--color-surface);
}
/* 칩 안: 이름 줄 + 시간 줄(해·달 아이콘) */
/* 과정명은 칸 폭에서 줄을 바꿔 다 보이게 (말줄임 대신) */
.cal-event__name {
  display: block;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.cal-event__time {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-weight: var(--weight-regular);
  opacity: 0.85;
}
/* 달력 칸이 좁으면(일정 칸 폭 140 이하) 시간 수(· 3h)를 숨겨 시간이 한 줄에 들어가게 */
.cal__events {
  container-type: inline-size;
}
@container (max-width: 140px) {
  .cal-event__hours {
    display: none;
  }
}
.cal-event__time svg {
  flex-shrink: 0;
}
/* 지난 날은 한 단계 흐리게 */
.cal__day.is-past .cal__events {
  opacity: 0.5;
}
.cal__day.is-past .cal__date {
  color: var(--color-gray-3);
}
.cal-event:hover {
  filter: brightness(0.95);
}

/* 분류 필터 (달력 위) */
.cal-filter {
  margin-bottom: var(--space-8);
}
.cal-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cal-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-gray-4);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  font-weight: var(--weight-medium);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cal-filter__btn:hover {
  border-color: var(--track, var(--color-primary));
  color: var(--color-surface);
}
.cal-filter__btn[aria-pressed="true"] {
  border-color: var(--track, var(--color-primary));
  background: color-mix(in srgb, var(--track, var(--color-primary)) 14%, var(--color-background));
  color: var(--color-surface);
  font-weight: var(--weight-semibold);
}
.cal-filter__hint {
  margin-top: var(--space-4);
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

/* 달력 표시 안내 (달력 아래, 누를 수 없음) */
.cal-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.cal-key li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.cal-key__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-bar);
}
.cal-key__swatch--start,
.cal-key__swatch--end {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-background));
}
.cal-key__swatch--start::before,
.cal-key__swatch--end::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
}
.cal-key__swatch--start::before {
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cal-key__swatch--end::after {
  right: 0;
  bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.cal-key__swatch--recruit {
  border: 1px solid var(--color-primary);
  background: var(--color-background);
}
.cal-key__swatch--holiday {
  background: color-mix(in srgb, var(--color-error) 20%, var(--color-background));
}

/* 이달의 과정 목록 */
.cal-list {
  margin-top: var(--space-16);
}
.cal-list__title {
  margin-bottom: var(--space-6);
}
.cal-list__title--sub {
  margin-top: var(--space-16);
}
/* 개설 예정 안내 한 줄: 제목에 붙여서 */
.cal-list__title:has(+ .cal-list__note:not([hidden])) {
  margin-bottom: var(--space-2);
}
.cal-list__note {
  margin-bottom: var(--space-6);
  color: var(--color-gray-4);
  word-break: keep-all;
}
.cal-list__note[hidden] {
  display: none;
}
.cal-list__day-note {
  display: none; /* 날짜 선택 강조는 모바일에서만 */
}
/* 누른 날짜의 일정 (모바일에서만, 데스크톱은 칸 안에 다 보인다) */
.cal-day {
  display: none;
}
.cal-list__count {
  margin-left: var(--space-2);
  color: var(--color-primary);
}
.cal-list__empty {
  padding: var(--space-8) 0;
  color: var(--color-gray-3);
  text-align: center;
}
/* 과정 카드 (위니버시티 캠프 카드 참고, 4열) */
.cal-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.cal-cards > li {
  display: flex;
}
.cal-card {
  position: relative; /* 제목 버튼을 카드 전체로 늘리는 기준 */
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-surface);
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cal-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
}
.cal-card:hover .cal-card__title {
  color: var(--color-primary);
}
/* 키보드로 들어왔을 때만 테두리 (마우스로 모달을 열고 닫은 뒤 포커스가 돌아와도 테두리가 남지 않게) */
.cal-card:has(:focus-visible) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
/* 제목 버튼이 카드 전체를 덮어 어디를 눌러도 모달이 열린다 */
.cal-card__open {
  color: inherit;
  font: inherit;
  text-align: left;
}
.cal-card__open::after {
  content: "";
  position: absolute;
  inset: 0;
}
.cal-card__open:focus-visible {
  outline: none; /* 카드 테두리(:has(:focus-visible))로 대신 표시 */
}
.cal-card__thumb {
  position: relative; /* D-day 태그 기준 */
  aspect-ratio: 2 / 1; /* 피그마 380×200 비율에 가깝게, 세로로 길어지지 않게 */
  border-bottom: 1px solid var(--color-gray-2);
  border-radius: 0;
}
/* 바우처 사용 가능 과정: 썸네일 오른쪽 위 배지 (모양은 아래 FE 맞춤 묶음) */
.cal-card__voucher {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}
.cal-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-6);
}
.cal-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.cal-card__status,
.cal-card__tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-chip);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.cal-card__status {
  background: var(--color-gray-1);
  color: var(--color-gray-4);
}
.cal-card__status--open {
  background: var(--color-primary);
  color: var(--color-background);
}
.cal-card__status--ongoing {
  background: var(--color-activation);
  color: var(--color-primary);
}
/* 분류 태그: 달력 칩과 같은 연한 분류색 */
.cal-card__tag {
  background: color-mix(in srgb, var(--track) 14%, var(--color-background));
  color: var(--color-surface);
}
.cal-card.cal-group-youth .cal-card__tag {
  background: color-mix(in srgb, var(--track) 30%, var(--color-background));
}
/* 바우처 사용 가능: 분류 색과 섞이지 않게 흰 바탕 + 테두리 (결제 방법 표시) */
.chip.chip--voucher {
  border: 1px solid var(--color-gray-2);
  background: var(--color-background);
  color: var(--color-gray-4);
}
.cal-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(var(--line-height-18) * 2); /* 제목 줄 수가 달라도 아래 줄 위치를 맞춘다 */
  transition: color 0.15s ease;
}
.cal-card__info {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-2);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-medium);
}
.cal-card__info li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cal-card__info img,
.cal-card__info svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-gray-3);
}
.cal-card__foot {
  display: flex;
  flex-direction: column; /* 교습비 아래 마감일: 카드마다 같은 자리 */
  gap: var(--space-1);
  margin-top: auto; /* 카드 높이가 달라도 교습비 줄을 바닥에 맞춘다 */
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-gray-2);
}
.cal-card__fee {
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  font-weight: var(--weight-bold);
}
.cal-card__deadline {
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
@media (max-width: 1023px) {
  .cal-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 과정 모달: .case-dialog 위에 얹는 부분 */
.course-dialog__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2); /* 태그와 과정명 사이를 띄운다 (머리 간격 8 + 8 = 16) */
}
.course-dialog__status {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-gray-1);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-semibold);
}
.course-dialog__status--open {
  background: var(--color-primary);
  color: var(--color-background);
}
.course-dialog__status--ongoing {
  background: var(--color-activation);
  color: var(--color-primary);
}
/* 버튼 줄은 모달 아래에 붙어 있다(스크롤해도 보이게, 2026-10-27). 내용 칸의 여백(32)만큼 양옆·아래로 넓혀 모달 끝까지 채운다 */
.course-dialog__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: var(--space-3);
  margin: 0 calc(var(--space-8) * -1) calc(var(--space-8) * -1);
  padding: var(--space-4) var(--space-8) var(--space-6);
  border-top: 1px solid var(--color-gray-2);
  background: var(--color-background);
}
.course-dialog__actions:not(:has(*)) {
  display: none; /* 버튼이 없는 과정(개설 예정 등)은 빈 줄을 띄우지 않는다 */
}
.course-dialog__actions .btn {
  flex: 1;
}
.course-dialog__actions .course-dialog__main {
  flex: 2; /* 주 행동(수강 신청)은 옆 버튼의 두 배 */
}
.course-dialog__note {
  margin-top: calc(var(--space-4) * -1);
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  text-align: center;
}

@media (max-width: 767px) {
  /* 좌우 여백은 아래 일정 목록·범례와 같은 gutter에 맞춘다 */
  .cal__head {
    padding: var(--space-4) var(--space-5);
  }
  .cal__day {
    align-items: center;
    min-height: 72px;
    padding: var(--space-2) var(--space-1);
  }
  .cal__date {
    align-self: center;
  }
  .cal__holiday {
    display: none;
  }
  /* 칸 안 일정은 색 막대로만. 글은 아래 목록에서 */
  .cal__events {
    width: 100%;
    gap: var(--space-1);
  }
  .cal__events .cal-event {
    height: 4px;
    padding: 0;
    border-width: 0;
    border-radius: var(--radius-bar);
    font-size: 0;
    pointer-events: none;
  }
  .cal__events .cal-event--recruit {
    background: var(--track);
    opacity: 0.4;
  }
  .cal__events .cal-event--start,
  .cal__events .cal-event--end {
    background: var(--track);
  }
  .cal__events .cal-event::before,
  .cal__events .cal-event::after {
    content: none;
  }
  .cal__events .cal-event__time {
    display: none;
  }
  .cal__events li:nth-child(n + 4) {
    display: none;
  }
  .cal__day.is-selected {
    box-shadow: inset 0 0 0 2px var(--color-primary);
  }
  .cal-day:not([hidden]) {
    display: block;
    padding: var(--space-5);
    border-top: 1px solid var(--color-gray-2);
  }
  .cal-day__title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-16);
    line-height: var(--line-height-16);
    font-weight: var(--weight-semibold);
  }
  .cal-day__holiday {
    margin-left: var(--space-1);
    color: var(--color-error);
    font-size: var(--font-size-14);
    font-weight: var(--weight-regular);
  }
  .cal-day__list {
    display: grid;
    gap: var(--space-2);
  }
  .cal-day__empty {
    color: var(--color-gray-4);
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
  }
  .cal-filter__list {
    gap: var(--space-2);
  }
  .cal-filter__btn {
    padding: var(--space-2) var(--space-4);
  }
  .cal-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  /* 누른 날짜에 일정이 있는 과정 강조 */
  .cal-card.is-on-day {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
  }
  /* 모바일: 버튼 둘이면 가로로 반씩(사용자 요청 2026-10-27), 내용 칸 여백(옆 16·아래 24)만큼 넓힌다 */
  .course-dialog__actions {
    gap: var(--space-2);
    margin: 0 calc(var(--space-4) * -1) calc(var(--space-6) * -1);
    padding: var(--space-3) var(--space-4) var(--space-4);
  }
  .course-dialog__actions .btn,
  .course-dialog__actions .course-dialog__main {
    flex: 1;
    padding-inline: var(--space-2);
  }
}


/* ============================================================
   대상별 페이지 → 과정 안내 연결 CTA (youth.html, adult.html)
   ============================================================ */
.course-cta__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}
.course-cta__inner .section__desc {
  margin: 0;
}
.course-cta__inner .btn {
  margin-top: var(--space-2);
}
.course-cta__more {
  margin-top: var(--space-2);
  color: var(--color-gray-4);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
}
.course-cta__more a {
  margin-left: var(--space-1);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.course-cta__more a::after {
  content: " \203A";
}
@media (max-width: 767px) {
  .course-cta__inner .btn {
    width: 100%;
  }
}


/* 과정 안내: 페이지 머리와 달력을 한 흐름으로 (섹션 구분 없이) */
.course-board {
  padding-top: 0;
}


/* 메인 페이지 머리는 짧게: 달력이 첫 화면에 바로 보이게 */
.page-head--compact {
  padding-block: var(--space-12) var(--space-10);
}


/* ============================================================
   상담 신청 모달 (js/consult.js) — .case-dialog 틀 위에 폼
   폼 요소는 위니브 디자인 시스템(피그마 tI1WH3I6GwoCp2WTNkVGjv, 👉 component)을 따른다
   - input: 상자 없이 밑줄 2px. 기본 gray-2 / 포커스 primary / 오류 error. 마우스·포커스 때 배경 gray-1
   - 라벨: Medium gray-4, 포커스 primary, 오류 error (사이트 전체 한 단계 큰 글자 규칙으로 12 → 14)
   - 오류 문구: 칸 아래 "※ …"
   - tag-list: 꺼짐 = 흰 바탕 + gray-2 테두리 / 켜짐 = primary 채움 + 흰 글자
   - 드롭다운·체크박스는 시스템에 없어 input·토큰으로 만든다
   ============================================================ */
.consult-dialog {
  width: min(640px, calc(100% - var(--space-8)));
}
.consult[hidden],
.consult__error[hidden],
.consult-dialog [hidden] {
  display: none; /* display: grid·flex가 hidden 속성을 덮지 않게 */
}
.consult {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-8) var(--space-8);
}
.consult__head {
  display: grid;
  gap: var(--space-2);
}
.consult__title {
  margin-bottom: var(--space-2);
}
.consult__lead {
  color: var(--color-gray-4);
}
.consult__lead a {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* 라벨 */
.consult__label {
  display: block;
  margin-bottom: var(--space-2);
  padding: 0;
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-medium);
  transition: color 0.15s ease;
}
.consult__req,
.consult__opt {
  margin-left: var(--space-1);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
}
.consult__req {
  color: var(--color-primary);
}
.consult__opt {
  color: var(--color-gray-3);
}

/* 입력 칸 (디자인 시스템 input) */
.field {
  display: grid;
}
.field__input {
  width: 100%;
  min-height: 42px;
  padding: var(--space-2);
  border: 0;
  border-bottom: 2px solid var(--color-gray-2);
  border-radius: 0;
  background: var(--color-background);
  color: var(--color-surface);
  font: inherit;
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder {
  color: var(--color-gray-3);
}
.field__input:hover,
.field__input:focus {
  background: var(--color-gray-1);
}
.field__input:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}
.field:focus-within > .consult__label {
  color: var(--color-primary);
}
.field__input--area {
  min-height: 112px;
  resize: vertical;
}
/* 드롭다운: input 모양 + 오른쪽 아래 화살표 */
.field__select {
  position: relative;
  display: block;
}
.field__select .field__input {
  padding-right: var(--space-10);
  cursor: pointer;
}
.field__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-3);
  width: 16px;
  height: 16px;
  background: var(--color-gray-4);
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field__select:focus-within::after {
  background: var(--color-primary);
}

/* 오류 (디자인 시스템 input type=error) */
.consult__msg {
  margin-top: var(--space-2);
  color: var(--color-error);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.consult__msg:empty {
  display: none;
}
.is-error > .consult__label,
.is-error > legend.consult__label {
  color: var(--color-error);
}
.is-error .field__input,
.is-error .field__input:focus {
  border-bottom-color: var(--color-error);
}
.is-error .field__select::after {
  background: var(--color-error);
}

/* 선택지 묶음 */
.consult__group {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.consult__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* 태그형 선택지 (디자인 시스템 tag-list) */
.tag-choice {
  position: relative;
  cursor: pointer;
}
.tag-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tag-choice span {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-pill);
  background: var(--color-background);
  color: var(--color-surface);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-medium);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tag-choice:hover span {
  background: var(--color-gray-1);
}
.tag-choice input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-background);
  font-weight: var(--weight-semibold);
}
.tag-choice input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.is-error .tag-choice span {
  border-color: var(--color-error);
}
.consult__hint {
  margin-top: var(--space-3);
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.consult__hint a,
.consult__hint-link {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.consult__hint-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consult__age {
  margin-top: var(--space-3);
}

/* 네모 체크박스 (시스템에 없어 토큰으로: 20px, 칩 모서리 4, 켜짐 = primary 채움 + 흰 체크) */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}
.check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.check__box {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-chip);
  background: var(--color-background);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.check__box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--color-background);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check:hover .check__box {
  border-color: var(--color-primary);
}
.check input:checked + .check__box {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.check input:checked + .check__box::after {
  opacity: 1;
}
.check input:focus-visible + .check__box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.check__text {
  color: var(--color-surface);
}
.is-error .check__box {
  border-color: var(--color-error);
}

.consult__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start; /* 한쪽 칸에만 안내 문구가 있어도 입력칸 높이를 맞춘다 (수강 신청 학생 이름·연락처) */
  gap: var(--space-6);
}
.consult__trap {
  position: absolute;
  left: -9999px;
}
.consult__agree {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-box);
  background: var(--color-gray-1);
}
.consult__agree > .consult__msg {
  margin-top: 0;
}
.consult__policy {
  padding-left: var(--space-8); /* 체크박스 글 시작선에 맞춤 */
}
.consult__policy summary {
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  cursor: pointer;
}
.consult__policy dl {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.consult__policy dl div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-3);
}
.consult__policy dt,
.consult__policy dd,
.consult__policy p {
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.consult__policy dt {
  font-weight: var(--weight-semibold);
}
.consult__policy p {
  margin-top: var(--space-3);
}
/* 수강 신청 페이지(apply.html) 위쪽 제목 줄: 신청서와 붙여 보이게 아래 여백을 줄인다 (2026-10-27) */
.page-head.apply-head {
  padding-bottom: var(--space-8);
}
/* 과정 요약(안내 한 줄 + 과정 이름 + 일정·교습비·모집 마감)은 연한 회색 바탕 상자(입력 칸·확인 사항 상자와 구분),
   확인 사항(제목 + 점 목록 + [확인했습니다])은 회색 테두리 상자 */
.apply-course {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-box);
  background: var(--color-gray-1);
}
/* 박스 맨 위 안내: 느낌표 아이콘(위니버시티 FE icons/SVGCircleAlertFill) + 파란 글자 */
.apply-course__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-semibold);
}
.apply-course__check svg {
  flex-shrink: 0;
}
.apply-notice {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
}
.apply-notice {
  gap: var(--space-4);
}
/* 알게 된 경로 '기타'를 고르면 나오는 입력 칸 */
.apply-source-etc {
  margin-top: var(--space-3);
}
.apply-source-etc[hidden] {
  display: none; /* .field의 display: grid가 hidden을 덮지 않게 */
}
.apply-notice__list {
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-5);
  list-style: disc;
}
.apply-notice > .consult__msg {
  margin-top: 0;
}
/* 수강 신청 페이지 apply.html: 모달용 안쪽 여백·바닥 고정 줄을 풀고 페이지 흐름대로 */
.apply-page {
  padding-top: 0;
}
.apply-page.is-done {
  padding-top: var(--space-16); /* 완료 화면은 위 제목을 숨겨서 헤더 아래 여백을 직접 준다 */
}
.apply-form.consult {
  padding: 0;
}
.apply-form .consult__foot {
  position: static;
  margin: 0;
  padding: 0;
  border-top: 0;
}
/* 신청 완료 / 신청 기간 아님 / 과정 없음 안내 */
.apply-state {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-8);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
}
.apply-state__title {
  font-size: var(--font-size-24);
  line-height: var(--line-height-24);
  font-weight: var(--weight-bold);
}
.apply-state__desc {
  color: var(--color-gray-4);
}
.apply-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
/* 신청 완료: 위니버시티 FE ui/Result.Success 모양(가운데 정렬, 체크 아이콘 100px activation 색, 테두리 없음) */
.apply-state--done {
  justify-items: center;
  gap: var(--space-5);
  padding-block: var(--space-10);
  border: 0;
  text-align: center;
}
.apply-state__icon {
  display: block;
  fill: var(--color-activation);
}
.apply-state--done .apply-state__title {
  font-size: var(--font-size-32);
  line-height: var(--line-height-32);
}
.apply-state--done .apply-state__actions {
  justify-content: center;
}
@media (max-width: 767px) {
  .apply-state {
    padding: var(--space-6) var(--space-5);
  }
  .apply-state__actions {
    width: 100%;
    flex-direction: column;
  }
  .apply-state--done {
    padding-inline: 0;
  }
  .apply-state__icon {
    width: 80px;
    height: 80px;
  }
  .apply-state--done .apply-state__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-24);
  }
}
 {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
  font-weight: var(--weight-bold);
}
/* 항목: 표 형태 — 왼쪽 이름(연한 회색 14, 폭 고정) + 오른쪽 내용(진한 16). 점 없이, 줄 사이 넉넉히 (2026-10-27) */
.apply-course__facts {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.apply-course__facts div {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: baseline;
  gap: var(--space-4);
}
.apply-course__facts dt {
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-16);
}
.apply-course__facts dd {
  color: var(--color-surface);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
}
/* 모집 마감 옆 D-n (파란 글자) */
.apply-course__dday {
  margin-left: var(--space-1);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.consult__error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-box);
  background: color-mix(in srgb, var(--color-error) 8%, var(--color-background));
  color: var(--color-error);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.consult__submit {
  width: 100%;
}
/* 필수 항목을 다 채우기 전: FE 버튼 disabled (gray-2 채움 + gray-3 글자) */
.consult__submit:disabled,
.consult__submit:disabled:hover {
  background: var(--color-gray-2);
  color: var(--color-gray-3);
  cursor: not-allowed;
}
/* 신청하기 버튼 줄: 모달 안쪽 스크롤 칸 바닥에 고정 (폼 여백만큼 바깥으로 넓혀 모달 끝까지) */
.consult__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-3);
  margin: 0 calc(var(--space-8) * -1) calc(var(--space-8) * -1);
  padding: var(--space-4) var(--space-8) var(--space-6);
  border-top: 1px solid var(--color-gray-2);
  background: var(--color-background);
}
/* 보내기 완료 팝업 (위니버시티 FE ui/AlertModal) */
.alert-modal {
  width: calc(100% - var(--space-8));
  max-width: 350px;
  margin: 22vh auto auto;
  padding: 28px var(--space-8);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
  background: var(--color-background);
  box-shadow: var(--shadow-card);
  color: var(--color-surface);
}
.alert-modal[open] {
  display: grid;
  gap: var(--space-5);
  animation: alert-up 0.3s;
}
.alert-modal::backdrop {
  background: var(--dim);
}
@keyframes alert-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .alert-modal[open] {
    animation: none;
  }
}
.alert-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-chip);
  color: var(--color-gray-4);
}
.alert-modal__close:hover {
  background: var(--color-gray-1);
}
.alert-modal__head {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
}
.alert-modal__icon {
  display: grid;
  color: var(--color-primary);
}
.alert-modal__desc {
  color: var(--color-gray-4);
  word-break: keep-all;
}
.alert-modal__desc a {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.alert-modal__actions {
  display: grid;
  gap: var(--space-3);
}
@media (max-width: 767px) {
  .consult {
    gap: var(--space-6);
    padding: var(--space-12) var(--space-5) var(--space-6);
  }
  .consult__row {
    grid-template-columns: 1fr;
  }
  .consult__foot {
    margin: 0 calc(var(--space-5) * -1) calc(var(--space-6) * -1);
    padding: var(--space-3) var(--space-5) var(--space-5);
  }
  .consult__agree {
    padding: var(--space-5);
  }
}

/* ============================================================
   기업·기관 교육 메일 문의 (business.html #apply, js/inquiry.js)
   ============================================================ */
.inquiry {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 640px;
  margin: var(--space-4) auto 0;
}


/* 학원 소개 기업 AX [교육 문의하기] 모달: 상담 모달과 같은 틀(.case-dialog), 폭 640 */
.inquiry-dialog {
  width: min(640px, calc(100% - var(--space-8)));
}
/* 모바일: 상담·문의 모달도 다른 모달처럼 아래에서 올라오는 전체 폭 시트로 (위 폭 규칙이 .case-dialog 모바일 규칙을 덮지 않게) */
@media (max-width: 767px) {
  .consult-dialog,
  .inquiry-dialog {
    width: 100%;
  }
}
.inquiry-dialog .inquiry {
  margin-top: var(--space-4);
}


/* ============================================================
   위니버시티 FE 디자인 시스템 맞춤 (2026-10-15, docs/weniversity-design-system.md)
   위니버시티 실서비스 코드(weniversity-FE)의 값으로 덮어쓴다. 앞쪽 규칙보다 뒤에 있어야 한다.
   사용자 결정: 최대한 위니버시티에 맞추고, 금지 규칙(토큰 밖 모서리·반투명 등)은 보수적으로 보지 않는다.
   글자 크기는 사용자가 요청한 "사이트 전체 한 단계 크게" 규칙을 유지한다.
   ============================================================ */
:root {
  --color-primary-a11y: #2861d2; /* FE --primaryA11y: primary 버튼 마우스 올림 */
  --color-gray-3-a11y: #6c7074; /* FE --grayLv3A11y */
  --radius-tag: 6px; /* FE ui/Tag */
  --radius-soft: 16px; /* FE 강사 카드·검색창 */
  --dim: rgba(0, 0, 0, 0.3); /* FE 모달 뒤 배경 */
}

/* ---------- 버튼 (FE ui/Button: Medium, 마우스 올림 primaryA11y) ---------- */
.btn {
  transition: all 0.2s;
}
.btn--primary:hover {
  background: var(--color-primary-a11y);
}
.btn--secondary:hover {
  background: var(--color-gray-1);
}

/* ---------- 카드 (FE CourseCard: 그림자 대신 1px 테두리, 마우스 올림 = 테두리 색 + 그림자, 움직임 없음) ---------- */
.card {
  border: 1px solid var(--color-gray-2);
  box-shadow: none;
}
.cal-card,
button.case-card__inner {
  border: 1px solid var(--color-gray-2);
  box-shadow: none;
  transition: all 0.2s;
}
.cal-card:hover,
button.case-card__inner:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-gray-2));
  box-shadow: var(--shadow-card);
}
.cal-card:hover .cal-card__title,
button.case-card__inner:hover .case-card__title {
  color: inherit;
}
/* 썸네일 비율 380:200, 썸네일과 글 사이 20, 글 양옆 28 (태블릿 24, 모바일 20) */
.cal-card__thumb {
  aspect-ratio: 380 / 200;
  border-bottom: 0;
}
/* 과정 모달 썸네일: 카드와 같은 비율(썸네일 원본 1200×632). 16:9면 세로로 길어져 좌우가 잘린다 */
.course-dialog__thumb {
  aspect-ratio: 380 / 200;
}
.cal-card__body {
  padding: var(--space-5) 28px 28px;
}
@media (max-width: 1023px) {
  .cal-card__body {
    padding: var(--space-5) var(--space-6) var(--space-6);
  }
}
@media (max-width: 480px) {
  .cal-card__body {
    padding: var(--space-5);
  }
}

/* ---------- 태그 (FE ui/Tag: 14 SemiBold, 여백 6·12, 모서리 6) ---------- */
.cal-card__status,
.cal-card__tag,
.course-dialog__status {
  padding: 6px 12px;
  border-radius: var(--radius-tag);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  font-weight: var(--weight-semibold);
}
.chip {
  padding: 6px 12px;
  border-radius: var(--radius-tag);
}
/* 상태: 모집 중 = primary, 진행 중 = activation, 모집 예정·마감 = dark(gray-4) */
.cal-card__status,
.course-dialog__status {
  background: var(--color-gray-4);
  color: var(--color-background);
}
.cal-card__status--open,
.course-dialog__status--open {
  background: var(--color-primary);
  color: var(--color-background);
}
.cal-card__status--ongoing,
.course-dialog__status--ongoing {
  background: var(--color-activation);
  color: var(--color-primary);
}
/* 썸네일 오른쪽 위 '바우처 사용 가능': 글자 12 SemiBold, 태그 높이는 중간 크기(28) 그대로라 위아래 여백을 늘림. 흰 바탕 + 테두리 */
.cal-card__voucher {
  padding: 5px 9px;
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-tag);
  background: var(--color-background);
  color: var(--color-gray-4);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
  font-weight: var(--weight-semibold);
}
/* 마감 줄 D-day: "10. 26.(월) 마감 (D-5)" 중 (D-5)만 primary로 */
.cal-card__dday {
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* ---------- 선택 버튼 (피그마 tag-list: 켜짐 = primary 채움 + 흰 글자) ---------- */
.cal-filter__btn {
  border-color: var(--color-gray-2);
  color: var(--color-surface);
  transition: all 0.2s;
}
.cal-filter__btn:hover {
  border-color: var(--color-gray-2);
  background: var(--color-gray-1);
  color: var(--color-surface);
}
.cal-filter__btn[aria-pressed="true"],
.cal-filter__btn[aria-pressed="true"]:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-background);
}

/* ---------- 탭 (FE SearchTabs: 아래 2px 선) ---------- */
.tabs {
  gap: 0;
  overflow-x: auto;
  box-shadow: inset 0 -2px 0 var(--color-gray-2);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs .tabs__tab {
  flex-shrink: 0;
  width: 120px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-gray-3);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  font-weight: var(--weight-medium);
  transition: color 0.2s;
}
.tabs .tabs__tab:hover {
  color: var(--color-surface);
}
.tabs .tabs__tab[aria-selected="true"] {
  border: 0;
  border-bottom: 2px solid var(--color-primary); /* 그림자 대신 테두리: 소수점 위치에서 옆에 흐린 선이 생기지 않게 */
  background: none;
  color: var(--color-surface);
  font-weight: var(--weight-semibold);
  box-shadow: none;
}
@media (max-width: 768px) {
  .tabs .tabs__tab {
    width: 100px;
  }
}

/* ---------- 섹션 제목 (FE MainSection: SemiBold, 화면 폭에 따라 32 → 24) ---------- */
 {
  font-weight: var(--weight-semibold);
}

/* ---------- 모달 (FE AlertModal: 모서리 10, 1px 테두리, 뒤 배경 검정 30%) ---------- */
.case-dialog {
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
}
.case-dialog::backdrop {
  background: var(--dim);
}
@media (max-width: 767px) {
  .case-dialog {
    border-radius: var(--radius-box) var(--radius-box) 0 0;
  }
}
/* ---------- 상담 폼 입력 (FE auth/Input: 라벨 12 Bold, 밑줄 2px, 오류 = 배경 gray-1 + 밑줄 error) ---------- */
.consult__label {
  margin-bottom: var(--space-3); /* 항목 이름과 아래 입력·선택지 사이를 띄운다 */
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
  font-weight: var(--weight-bold);
}
.consult__label .consult__req,
.consult__label .consult__opt {
  font-weight: var(--weight-medium);
}
.field__input {
  min-height: 0;
  padding: 10px 8px 8px;
  font-weight: var(--weight-regular);
  transition: border-color 0.2s;
}
.field__input:hover,
.field__input:focus {
  background: var(--color-background);
}
.is-error .field__input,
.is-error .field__input:focus {
  background: var(--color-gray-1);
}
.consult__msg {
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
}

/* ---------- 목록형 드롭다운 (FE ui/Select) ---------- */
.field__select::after {
  content: none; /* 화살표는 버튼 안 SVG로 */
}
.sel__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  cursor: pointer;
}
.field__select .sel__btn {
  padding-right: 8px; /* 화살표가 버튼 안에 있으니 다른 칸과 같은 오른쪽 여백 */
}
.sel__btn.is-placeholder .sel__value {
  color: var(--color-gray-3);
}
.sel__btn:focus-visible {
  outline: none;
  border-bottom-color: var(--color-primary);
}
.sel__arrow {
  flex-shrink: 0;
  color: var(--color-gray-4);
  transition: transform 0.2s;
}
.field__select.is-open .sel__arrow {
  transform: rotate(-180deg);
}
.field__select.is-open .sel__btn {
  border-bottom-color: var(--color-primary);
}
.sel__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 240px;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
  background: var(--color-background);
  box-shadow: var(--shadow-card);
  animation: sel-down 0.2s;
}
@supports not selector(::-webkit-scrollbar) {
  .sel__list {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-2) transparent;
  }
}
.sel__list[hidden] {
  display: none;
}
@keyframes sel-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sel__option {
  padding: 10px 20px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color 0.2s;
}
.sel__option[aria-selected="true"] {
  background: var(--color-gray-1);
}
.sel__option.is-active {
  background: var(--color-activation);
}
.sel__list::-webkit-scrollbar {
  width: 8px;
}
.sel__list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--color-gray-2);
}
.sel__list::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-3);
}

/* ---------- 체크박스 (FE SVGCheckBox: 꺼짐 = gray-2 테두리 + 흐린 체크, 켜짐 = primary) ---------- */
.check__box,
.check input:checked + .check__box,
.check:hover .check__box {
  width: 20px;
  height: 20px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.check__box {
  color: var(--color-gray-2);
}
.check__box::after {
  content: none;
}
.check__box svg {
  display: block;
}
.check__box .check__on,
.check input:checked + .check__box .check__off {
  display: none;
}
.check input:checked + .check__box .check__on {
  display: block;
}
.check:hover .check__box {
  color: var(--color-gray-3);
}
.check input:checked + .check__box,
.check:hover input:checked + .check__box {
  color: var(--color-primary);
}
.is-error .check__box {
  color: var(--color-error);
}

/* ---------- 강사 소개 (피그마 2089:8581 구성): 정사각 사진(모서리 20) / 역할 16 primary / 이름 24 + 별명 14 gray-3 / 분야 태그 gray-4 채움
   글자 크기는 시안(24·32·16)보다 한 단계씩 줄여 이 페이지 카드 제목(24)과 맞춘다 ---------- */
.teacher-grid {
  gap: var(--space-6);
}
.teacher__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0 0 var(--space-5);
  border-radius: var(--radius-card);
  object-fit: cover;
}
.teacher__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
  margin-top: var(--space-1);
}
.teacher__nick {
  color: var(--color-gray-3);
}
.teacher__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.teacher__tags li {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-tag);
  background: var(--color-gray-4);
  color: var(--color-background);
}
@media (max-width: 767px) {
  .teacher-grid {
    gap: var(--space-10);
  }
}
/* 카드: 과목 수가 달라도 [강사 소개 보기]가 같은 높이에 오게 아래로 민다 */
.teacher {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.teacher__label {
  margin-top: var(--space-5);
  color: var(--color-gray-3);
}
.teacher__label + .teacher__tags {
  margin-top: var(--space-2);
}
.teacher__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-5);
  color: var(--color-surface);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
  font-weight: var(--weight-semibold);
}
.teacher__more:hover {
  color: var(--color-primary);
}
.teacher__more-arrow {
  flex-shrink: 0;
  transition: transform 0.2s;
}
.teacher__more:hover .teacher__more-arrow {
  transform: translateX(2px);
}

/* 강사 소개 모달 (js/teacher.js): 머리(사진 120 + 역할·이름) / 강의 과목 / 지금 하는 일·이전 경력·강의 경력 */
.teacher-dialog {
  width: min(560px, calc(100% - var(--space-8)));
}
.teacher-dialog__content {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-12) var(--space-8) var(--space-8);
}
.teacher-dialog__head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.teacher-dialog__photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-card);
  object-fit: cover;
}
.teacher-dialog__name {
  margin-top: var(--space-1);
}
.teacher-detail__group {
  display: grid;
  gap: var(--space-2);
}
.teacher-detail__label {
  color: var(--color-gray-3);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
  font-weight: var(--weight-semibold);
}
.teacher-dialog .teacher__tags {
  margin-top: 0;
}
.teacher-detail__list {
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-5);
  list-style: disc;
  color: var(--color-gray-4);
}
@media (max-width: 767px) {
  .teacher-dialog {
    width: 100%;
  }
  .teacher-dialog__content {
    padding: var(--space-10) var(--space-5) var(--space-8);
  }
  .teacher-dialog__photo {
    width: 88px;
    height: 88px;
  }
}

/* ---------- 달력 이전·다음 (FE Pagination navButton: gray-1 상자, 모서리 10) ---------- */
.cal__nav {
  border-radius: var(--radius-box);
  background: var(--color-gray-1);
  color: var(--color-gray-4);
}
.cal__nav:hover:not(:disabled) {
  background: var(--color-gray-1);
  color: var(--color-primary);
}
.cal__nav:disabled {
  color: var(--color-gray-2);
}

/* ---------- 자주 묻는 질문 (FE ui/Accordion: 질문마다 카드, 모서리 16, 큰 Q, 아래 화살표) ---------- */
.faq__item {
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-soft);
  background: var(--color-background);
  transition: box-shadow 0.2s;
}
.faq__item:first-child {
  border-top: 1px solid var(--color-gray-2);
}
.faq__item + .faq__item {
  margin-top: 12px;
}
.faq__item[open] {
  box-shadow: var(--shadow-card);
}
.faq__item:has(summary:focus-visible) {
  box-shadow: 0 0 0 2px var(--color-primary);
}
.faq__item[open]:has(summary:focus-visible) {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--color-primary);
}
.faq__item summary {
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 24px 24px 24px 28px;
  transition: color 0.2s;
  user-select: none;
}
.faq__item summary:focus-visible {
  outline: none;
}
/* Q: 배지 대신 큰 primary 글자 (FE .q = 24 SemiBold) */
.faq__q {
  display: inline;
  align-self: flex-start;
  width: auto;
  height: auto;
  margin-right: 0;
  border-radius: 0;
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-24);
  line-height: var(--line-height-24);
  font-weight: var(--weight-semibold);
}
/* 오른쪽 아래 화살표 (FE SVGDown): 열리면 위로 돌아감 */
.faq__item summary::after,
.faq__item[open] summary::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: auto;
  background: var(--color-gray-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s, background-color 0.2s;
}
.faq__item[open] summary::after {
  transform: rotate(-180deg);
}
.faq__item summary:hover {
  color: var(--color-primary);
}
.faq__item summary:hover::after {
  background: var(--color-primary);
}
/* 답변: A 배지 없이 gray-4 글, 줄 높이 1.6, 천천히 나타남 */
.faq__a {
  display: none;
}
.faq__item p {
  display: block;
  padding: 0 24px 24px 28px;
  color: var(--color-gray-4);
  word-break: keep-all;
  animation: faq-fade 0.3s ease;
}
@keyframes faq-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 767px) {
  .faq__item summary {
    min-height: 0;
    padding: 20px 20px 20px 24px;
  }
  .faq__item p {
    padding: 0 20px 20px 24px;
  }
}

/* ---------- 개인정보처리방침 (privacy.html) ---------- */
.policy {
  padding-top: 0;
}
.policy__inner > * {
  max-width: 880px; /* 글 폭만 줄이고 왼쪽은 페이지 제목과 맞춘다 */
}
.policy__inner {
  line-height: 1.7;
  word-break: keep-all;
}
.policy__inner > * + * {
  margin-top: var(--space-4);
}
.policy__inner h2 {
  margin-top: var(--space-12);
  padding-top: var(--space-2);
  scroll-margin-top: 96px;
}
/* 본문이 제목(h2)으로 바로 시작하면(교습비 게시표) 위 제목 영역과 사이가 벌어지지 않게 */
.policy__inner > h2:first-child {
  margin-top: 0;
  padding-top: 0; /* 개인정보처리방침(첫 줄이 문단)과 같은 64px */
}
.policy__inner ol,
.policy__inner ul {
  padding-left: var(--space-5);
}
.policy__inner ol {
  list-style: decimal;
}
.policy__inner ul {
  list-style: disc;
}
.policy__inner li + li {
  margin-top: var(--space-2);
}
.policy__inner a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policy__toc {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
  background: var(--color-gray-1);
}
.policy__toc ol {
  columns: 2;
  column-gap: var(--space-8);
}
.policy__toc li {
  break-inside: avoid;
}
.policy__toc a {
  color: inherit;
  text-decoration: none;
}
.policy__toc a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.policy__table-wrap {
  overflow-x: auto;
}
.policy__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  border-top: 1px solid var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: 1.6;
}
.policy__table th,
.policy__table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-gray-2);
  text-align: left;
  vertical-align: top;
}
.policy__table thead th {
  background: var(--color-gray-1);
  font-weight: var(--weight-semibold);
}
.policy__table tbody th {
  width: 26%;
  font-weight: var(--weight-semibold);
}
.policy__list div {
  padding-block: var(--space-3);
}
/* 교습비 게시표 (tuition.html): 값 아래 회색 한 줄(하루 시간×횟수, 과정 주차, 시간당 단가) */
.tuition__sub {
  display: block;
  color: var(--color-gray-3);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
}
.tuition__fee {
  font-weight: var(--weight-semibold);
}
.tuition__table tbody th {
  width: 34%;
}
/* 개정 안내: 목차 위 회색 상자 (인쇄해도 흐리게) */
.policy__notice {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
  background: var(--color-gray-1);
}
.policy__inner .policy__notice-title {
  margin-top: 0;
  padding-top: 0;
}
.policy__notice p {
  margin-top: var(--space-2);
}
@media (max-width: 767px) {
  .policy__toc {
    padding: var(--space-5);
  }
  .policy__toc ol {
    columns: 1;
  }
  .policy__inner h2 {
    margin-top: var(--space-10);
  }
  /* 표는 옆으로 밀지 않고 칸 안에서 줄바꿈 */
  .policy__table {
    min-width: 0;
  }
  .policy__table th,
  .policy__table td {
    padding: var(--space-3) var(--space-2);
  }
  .policy__table tbody th {
    width: 32%;
  }
}

/* ---------- 메뉴의 바깥 링크 (위니버시티, 새 창): 글 옆 대각선 화살표 ---------- */
.site-nav__list .site-nav__link-ext {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.site-nav__ext {
  flex-shrink: 0;
}
@media (max-width: 1023px) {
  .site-nav__list .site-nav__link-ext {
    display: flex;
  }
}

/* ---------- 메뉴 강조: 게임 아카데미아 (2026-10-27, 콜로소 메뉴 방식) ----------
   색 있는 게임기 아이콘(검정 몸통 + 초록 버튼) + 굵은 글자 + 글자 오른쪽 아래 파란 점(위니브 로고의 점). 이모지 대신 SVG */
.site-nav__list .site-nav__game {
  display: flex; /* inline-flex면 li에 글줄 여백이 생겨 다른 메뉴보다 3px 위로 뜬다 */
  align-items: center;
  gap: var(--space-1);
  color: var(--color-surface);
  font-weight: var(--weight-bold);
}
.site-nav__list .site-nav__game:hover,
.site-nav__list .site-nav__game[aria-current="page"] {
  color: var(--color-primary);
}
.site-nav__game-icon {
  flex-shrink: 0;
}
.site-nav__game-body {
  fill: var(--color-surface);
}
.site-nav__game-pad {
  fill: var(--color-background);
}
.site-nav__game-key {
  fill: var(--weniv-green);
}
.site-nav__game-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: calc(var(--space-1) / 2); /* 2px (사용자 요청 2026-10-27) */
  border-radius: 50%;
  background: var(--color-primary);
}

/* ============================================================
   위니브 게임 아카데미아 (game-academia.html, 2026-10-27)
   academia.wenivops.co.kr 내용을 학원 디자인으로 옮긴 과정 소개 페이지. 카드 안 여백 24, 카드 사이 24
   ============================================================ */
.ga-eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}
.ga-prose p + p {
  margin-top: var(--space-4);
}
.ga-prose p {
  color: var(--color-gray-4);
  word-break: keep-all;
}

/* 카드 묶음 */
.ga-grid {
  display: grid;
  gap: var(--space-6);
}
.ga-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.ga-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
ol.ga-grid {
  list-style: none;
  padding: 0;
}
@media (max-width: 1023px) {
  .ga-grid--3,
  .ga-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .ga-grid--3,
  .ga-grid--4 {
    grid-template-columns: 1fr;
  }
}

.ga-card,
.ga-tool,
.ga-month {
  padding: var(--space-6);
}
.ga-card--good {
  border-color: var(--color-primary);
  background: var(--color-activation);
}
.ga-card__label {
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}
.ga-card__title {
  word-break: keep-all;
}
.ga-card__desc {
  margin-top: var(--space-2);
  color: var(--color-gray-4);
  word-break: keep-all;
}

/* 히어로 코드 카드: AI에게 지시 → 코드 → 게임 */
.ga-code {
  padding: var(--space-6);
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-card);
  background: var(--color-gray-1);
}
.ga-code__prompt {
  padding: var(--space-4);
  border-radius: var(--radius-box);
  background: var(--color-background);
  font-weight: var(--weight-semibold);
}
.ga-code__who {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-primary);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
}
.ga-code__file {
  margin-top: var(--space-3);
  overflow: hidden;
  border: 1px solid var(--color-gray-2);
  border-radius: var(--radius-box);
  background: var(--color-background);
}
.ga-code__name {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-gray-2);
  color: var(--color-gray-3);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
}
.ga-code__body {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--code-size-14);
  line-height: var(--line-height-16);
  white-space: pre;
}
.ga-k { color: var(--code-purple); }
.ga-f { color: var(--code-blue); }
.ga-s { color: var(--code-green); }
.ga-code__caption {
  margin-top: var(--space-3);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

/* 교재 카드 */
.ga-book {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding: var(--space-6);
}
.ga-book__cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 3 / 4;
  padding: var(--space-3);
  border-radius: var(--radius-chip);
  background: var(--color-surface);
  color: var(--color-btn-surface);
  font-size: var(--font-size-12);
  line-height: var(--line-height-12);
  font-weight: var(--weight-bold);
}
.ga-book__author {
  color: var(--weniv-yellow);
  font-size: var(--font-size-10);
  line-height: var(--line-height-10);
}
@media (max-width: 767px) {
  .ga-book {
    grid-template-columns: 1fr;
  }
  .ga-book__cover {
    width: 96px;
  }
}

/* 도구 카드 */
.ga-tool__logo {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  object-fit: contain;
}

/* 커리큘럼 달 카드 */
.ga-month {
  display: flex;
  flex-direction: column;
}
.ga-month__when {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.ga-month__make {
  margin-top: auto;
  padding-top: var(--space-5);
}
.ga-month__make::before {
  content: "";
  display: block;
  margin-bottom: var(--space-5);
  border-top: 1px solid var(--color-gray-2);
}
.ga-month__make-label {
  color: var(--color-gray-3);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.ga-month__make-title {
  margin-top: var(--space-1);
  font-weight: var(--weight-semibold);
}
.ga-month__make-desc {
  margin-top: var(--space-1);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}

/* 교육과정의 강점: 그림은 잘리지 않게 원래 비율 그대로 */
.ga-strength {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ga-strength__media img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--color-gray-2);
}
.ga-strength__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6);
}
.ga-strength .platform-cta__link {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--font-size-16);
  line-height: var(--line-height-16);
}

/* 과정 안내 */
.ga-inline-link {
  margin-left: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-14);
  text-decoration: underline;
}
.ga-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* 강사 */
.ga-teacher {
  display: grid;
  grid-template-columns: 320px 1fr;
  align-items: center;
  gap: var(--space-12);
}
.ga-teacher__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.ga-teacher__name {
  margin-top: var(--space-6);
}
.ga-teacher__career {
  margin-top: var(--space-4);
  padding-left: var(--space-5);
  list-style: disc;
  color: var(--color-gray-4);
}
.ga-teacher__career li + li {
  margin-top: var(--space-1);
}
.ga-teacher__note {
  margin-top: var(--space-6);
  color: var(--color-gray-4);
  word-break: keep-all;
}
@media (max-width: 767px) {
  .ga-teacher {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .ga-teacher__photo {
    max-width: 240px;
  }
}

/* 결과물 영상 */
.ga-video {
  border-radius: var(--radius-card);
}
.ga-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* 히어로 코드 카드가 모바일 폭을 밀어내지 않게 (코드는 카드 안에서 가로 스크롤) */
.ga-hero .page-hero__inner > * {
  min-width: 0;
}

/* ---------- 과정 소개 페이지 하단 고정 바 (js/course-bar.js, 2026-10-27) ----------
   히어로를 지나면 아래에서 올라온다. 바 높이만큼 body 아래 여백을 둬 푸터를 가리지 않는다 */
.has-course-bar {
  padding-bottom: var(--course-bar-h, 0px);
}
.course-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  border-top: 1px solid var(--color-gray-2);
  background: var(--color-background);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.25s, visibility 0s 0.25s;
}
.course-bar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 0.25s;
}
.course-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-3);
}
.course-bar__info {
  flex: 1;
  min-width: 0;
}
.course-bar__title {
  font-size: var(--font-size-18);
  line-height: var(--line-height-18);
  font-weight: var(--weight-bold);
}
.course-bar__meta {
  margin-top: var(--space-1);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
}
.course-bar__deadline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gray-4);
  font-size: var(--font-size-14);
  line-height: var(--line-height-14);
  white-space: nowrap;
}
.course-bar__dday {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--color-activation);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}
.course-bar__btn {
  flex-shrink: 0;
}
.course-bar__btn:disabled,
.course-bar__btn.is-disabled {
  background: var(--color-gray-2);
  color: var(--color-gray-4);
  cursor: default;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .course-bar,
  .course-bar.is-shown {
    transition: none;
  }
}
/* 모바일: 과정명·개강일은 빼고 D-Day(왼쪽) + 버튼(오른쪽, PC와 같은 크기) */
@media (max-width: 767px) {
  .course-bar__inner {
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
  .course-bar__info {
    display: none;
  }
  .course-bar__deadline {
    flex-direction: column;
    align-items: flex-start;
    margin-right: auto;
    gap: var(--space-1);
    font-size: var(--font-size-12);
    line-height: var(--line-height-12);
  }
}

/* ============================================================
   모바일 정리 (2026-10-27, 767px 이하만. PC는 위 규칙 그대로)
   네이버 기업 사이트 모바일을 참고: '나에게 맞는 과정'·강사 소개 카드는 옆으로 넘기는 슬라이드, 버튼 두 개면 나란히,
   섹션 위아래 여백 48. 글자 크기는 맨 끝 '글자 단계'(.type-scale)의 모바일 값이 정하고, 여기에는 그 밖의 요소만 남았다.
   입력 칸 글자(16)는 iOS 확대 방지로 그대로 둔다
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --section-gap: var(--space-12);
  }

  /* 설명·본문 16, 줄 간격 24 (14는 학부모·성인에게 작다는 사용자 의견으로 16, 2026-10-27) */
  .work-card__desc,
  .step__desc {
    font-size: var(--font-size-16);
    line-height: var(--line-height-18);
  }

  /* 보조 글(대상·역할 등) 14, 회색 */
  .review__who,
  .stat__label,
  .works-note,
  .link-more {
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
  }

  /* 고민 말풍선·강의실 정보 16 */
   {
    font-size: var(--font-size-16);
    line-height: var(--line-height-18);
  }

  /* 신청서·문의 모달(상담·대관·기업 교육)과 수강 신청 페이지: 제목은 24 그대로, 글은 16(PC와 같음), 위 여백만 줄인다.
     입력 칸(.field__input)은 16 그대로(iOS 확대 방지) */
  .consult {
    padding-top: var(--space-10);
  }
  .apply-state--done .apply-state__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-24);
  }

  /* 태그 12: 같은 모양인 상태 표시(모집 중·모집 예정)와 달력 카드 태그도 함께 (위니버시티 FE ui/Tag 묶음과 같은 목록) */
  .cal-card__status,
  .cal-card__tag,
  .course-dialog__status {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-12);
    line-height: var(--line-height-12);
  }
  .chip {
    padding: var(--space-1) var(--space-2);
  }

  /* 섹션 머리·버튼 정렬은 PC와 같이 가운데 (왼쪽 정렬은 사용자 반려 2026-10-27) */
  .track-more {
    margin-top: var(--space-5);
  }
  .track-more .btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
  }

  /* '나에게 맞는 과정' 카드: 옆으로 넘기는 슬라이드 (다음 카드가 살짝 보이게 78%) */
  .track-grid--4 {
    display: flex;
    gap: var(--space-3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .track-grid--4::-webkit-scrollbar {
    display: none;
  }
  .track-grid--4 > .track {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .track--photo .track__body {
    gap: var(--space-2);
    padding: var(--space-4);
  }
  .track--photo .track__badges {
    margin-bottom: var(--space-2);
  }
  .track--photo .btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
  }

  /* 강사 소개도 옆으로 넘기는 슬라이드 (카드 72%: 사진이 화면을 다 차지하지 않게), 이름 18 · 태그 12 */
  .teacher-grid {
    display: flex;
    gap: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .teacher-grid::-webkit-scrollbar {
    display: none;
  }
  .teacher-grid > .teacher {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
  .teacher__photo {
    margin-bottom: var(--space-4);
  }
  .teacher__label {
    margin-top: var(--space-4);
  }
  .teacher__tags li {
    padding: var(--space-1) var(--space-2);
  }

  /* 맨 아래 상담 CTA: 제목 24, 버튼 둘 나란히 */
  .apply__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    margin-top: var(--space-6);
  }
  .apply__actions .btn--lg {
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
  }

  /* 기업 정부 지원 띠: 가운데 정렬 그대로, 제목 24, 버튼 둘 나란히 */
  .biz__icon {
    width: 32px;
    height: 32px;
  }
  .biz__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  .biz__actions .btn {
    padding: var(--space-3) var(--space-2);
    font-size: var(--font-size-14);
    line-height: var(--line-height-14);
  }
}

/* 슬라이드 위치 막대(js/main.js가 만든다): 지금 카드는 길고 진하게, 나머지는 짧고 연하게. 모바일에서만 보인다 */
.track-progress {
  display: none;
}
@media (max-width: 767px) {
  .track-progress {
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
  }
  .track-progress span {
    width: 4px;
    height: 4px;
    border-radius: var(--radius-bar);
    background: var(--color-gray-2);
    transition: width 0.2s, background-color 0.2s;
  }
  .track-progress span.is-current {
    width: 16px;
    background: var(--color-surface);
  }
}

/* ============================================================
   글자 단계 (2026-10-27): 역할마다 크기·줄 간격·굵기를 한 곳에서 정한다. 모바일 값은 아래 미디어쿼리에서만 바꾼다.
   <body class="type-scale">인 페이지에 적용(v1 모든 페이지·모달). archive 페이지는 아직 옛 크기. 새 페이지를 만들면 body에 class를 단다.
   | 역할       | PC        | 모바일    | 굵기 |
   | 히어로     | 40        | 32        | 700  |
   | 섹션 제목  | 32        | 24        | 700  |  (이렇게 배워요 단계 제목 포함)
   | 소제목     | 24        | 18        | 700  |
   | 카드 제목  | 18        | 16        | 700  |
   | 리드       | 18        | 16        | 400  |
   | 본문       | 16        | 16        | 400  |
   | 보조       | 14        | 14        | 400 회색 |
   | 라벨·태그  | 14        | 12        | 600  |
   | 버튼       | 16 (큰 18) | 14 (큰 16) | 500 (위니버시티 FE 버튼) |
   ============================================================ */
:root {
  --ts-hero: var(--font-size-40);
  --ts-hero-lh: var(--line-height-40);
  --ts-title: var(--font-size-32);
  --ts-title-lh: var(--line-height-32);
  --ts-sub: var(--font-size-24);
  --ts-sub-lh: var(--line-height-24);
  --ts-lead: var(--font-size-18);
  --ts-lead-lh: var(--line-height-24);
  --ts-body: var(--font-size-16);
  --ts-body-lh: var(--line-height-18);
  --ts-meta: var(--font-size-14);
  --ts-meta-lh: var(--line-height-14);
  --ts-label: var(--font-size-14);
  --ts-label-lh: var(--line-height-14);
  --ts-btn: var(--font-size-16);
  --ts-btn-lh: var(--line-height-16);
  --ts-btn-lg: var(--font-size-18);
  --ts-btn-lg-lh: var(--line-height-18);
}
@media (max-width: 767px) {
  :root {
    --ts-hero: var(--font-size-32);
    --ts-hero-lh: var(--line-height-32);
    --ts-title: var(--font-size-24);
    --ts-title-lh: var(--line-height-24);
    --ts-sub: var(--font-size-18);
    --ts-sub-lh: var(--line-height-18);
    --ts-lead: var(--font-size-16);
    --ts-lead-lh: var(--line-height-18);
    --ts-label: var(--font-size-12);
    --ts-label-lh: var(--line-height-12);
    --ts-btn: var(--font-size-14);
    --ts-btn-lh: var(--line-height-14);
    --ts-btn-lg: var(--font-size-16);
    --ts-btn-lg-lh: var(--line-height-16);
  }
}

/* 히어로 */
.type-scale .hero__title {
  font-size: var(--ts-hero);
  line-height: var(--ts-hero-lh);
  font-weight: var(--weight-bold);
}
/* 섹션 제목: '이렇게 배워요' 단계 제목도 여기(사용자 결정 2026-10-27, 한 단계가 한 섹션처럼 읽히게) */
.type-scale .section__title,
.type-scale .apply__title,
.type-scale .platform-cta__title,
.type-scale .promise__title {
  font-size: var(--ts-title);
  line-height: var(--ts-title-lh);
  font-weight: var(--weight-bold);
}
/* 소제목: 카드 제목, 강사 이름, 고민 섹션 맺음말 */
.type-scale .track__title,
.type-scale .teacher__name,
.type-scale .voice-answer {
  font-size: var(--ts-sub);
  line-height: var(--ts-sub-lh);
  font-weight: var(--weight-bold);
}
/* 리드: 섹션 설명·히어로 첫 줄·고민 말풍선·자주 묻는 질문 질문 줄(질문만 600으로 강조) */
.type-scale .hero__question,
.type-scale .hero__desc,
.type-scale .section__desc,
.type-scale .promise__desc,
.type-scale .apply__desc,
.type-scale .platform-cta__desc,
.type-scale .voice,
.type-scale .faq__item summary {
  font-size: var(--ts-lead);
  line-height: var(--ts-lead-lh);
  font-weight: var(--weight-regular);
}
.type-scale .faq__item summary {
  font-weight: var(--weight-semibold);
}
/* 본문 */
.type-scale .track__desc,
.type-scale .faq__item p,
.type-scale .place__info dd {
  font-size: var(--ts-body);
  line-height: var(--ts-body-lh);
  font-weight: var(--weight-regular);
}
/* 보조(회색) */
.type-scale .track__for,
.type-scale .teacher__nick,
.type-scale .place__info dt {
  color: var(--color-gray-3);
  font-size: var(--ts-meta);
  line-height: var(--ts-meta-lh);
  font-weight: var(--weight-regular);
}
/* 라벨·태그 */
.type-scale .chip,
.type-scale .teacher__tags li,
.type-scale .teacher__label,
.type-scale .teacher__role,
.type-scale .promise__label {
  font-size: var(--ts-label);
  line-height: var(--ts-label-lh);
  font-weight: var(--weight-semibold);
}
/* 버튼 */
.type-scale .btn,
.type-scale .tabs__tab,
.type-scale .platform-cta__link {
  font-size: var(--ts-btn);
  line-height: var(--ts-btn-lh);
  font-weight: var(--weight-medium);
}
.type-scale .btn--lg {
  font-size: var(--ts-btn-lg);
  line-height: var(--ts-btn-lg-lh);
}

/* ---- 글자 단계: 하위 페이지·모달 (2026-10-27, 학원 소개에서 확정한 단계를 모든 v1 페이지로) ----
   카드 제목 단계 추가: 작은 상자·카드의 제목 18 / 모바일 16 · 700 */
:root {
  --ts-card: var(--font-size-18);
  --ts-card-lh: var(--line-height-18);
}
@media (max-width: 767px) {
  :root {
    --ts-card: var(--font-size-16);
    --ts-card-lh: var(--line-height-16);
  }
}
/* 히어로: 게임 아카데미아 첫 화면 */
.type-scale .page-hero__title {
  font-size: var(--ts-hero);
  line-height: var(--ts-hero-lh);
  font-weight: var(--weight-bold);
}
/* 섹션 제목: 하위 페이지 맨 위 제목(과정 안내·수강 신청·교습비·처리방침) */
.type-scale .page-head__title {
  font-size: var(--ts-title);
  line-height: var(--ts-title-lh);
  font-weight: var(--weight-bold);
}
/* 소제목: 문서 h2, 달력 달·목록 제목, 강사 이름, 모달 제목 */
.type-scale .policy__inner h2,
.type-scale .cal__month,
.type-scale .cal-list__title,
.type-scale .ga-teacher__name,
.type-scale .consult__title,
.type-scale .case-dialog__title {
  font-size: var(--ts-sub);
  line-height: var(--ts-sub-lh);
  font-weight: var(--weight-bold);
}
/* 카드 제목 */
.type-scale .cal-card__title,
.type-scale .ga-card__title,
.type-scale .apply-course__title,
.type-scale .apply-notice__title,
.type-scale .policy__inner .policy__notice-title, /* 문서 h2 규칙(.policy__inner h2)보다 우선 */
.type-scale .alert-modal__title {
  font-size: var(--ts-card);
  line-height: var(--ts-card-lh);
  font-weight: var(--weight-bold);
}
.type-scale .cal-card__title {
  min-height: calc(var(--ts-card-lh) * 2); /* 제목 두 줄 자리 (줄 수가 달라도 아래 줄 위치를 맞춘다) */
}
/* 리드 */
.type-scale .page-hero__desc,
.type-scale .page-head__desc {
  font-size: var(--ts-lead);
  line-height: var(--ts-lead-lh);
  font-weight: var(--weight-regular);
}
/* 본문 */
.type-scale .ga-card__desc,
.type-scale .ga-teacher__note,
.type-scale .cal-list__note,
.type-scale .case-dialog__summary,
.type-scale .consult__lead,
.type-scale .check__text,
.type-scale .sel__option,
.type-scale .alert-modal__desc,
.type-scale .apply-notice__list li {
  font-size: var(--ts-body);
  line-height: var(--ts-body-lh);
}
/* 라벨: 제목 위 작은 파란 글 */
.type-scale .page-head__for,
.type-scale .ga-eyebrow,
.type-scale .ga-card__label {
  font-size: var(--ts-label);
  line-height: var(--ts-label-lh);
  font-weight: var(--weight-semibold);
}

/* ---- 글자 단계: 전체 점검에서 빠진 곳 (2026-10-27) ---- */
/* 보조: 과정 카드 날짜·시간 줄(500 → 400), 정보 표 항목 이름(과정 모달·게임 아카데미아 '한눈에 보기', 16/600 → 14 회색)
   표 항목 이름은 같은 줄 내용(본문 16)과 줄 높이를 맞춘다 */
.type-scale .cal-card__info {
  font-size: var(--ts-meta);
  line-height: var(--ts-meta-lh);
  font-weight: var(--weight-regular);
}
.type-scale .info-list dt {
  color: var(--color-gray-3);
  font-size: var(--ts-meta);
  line-height: var(--ts-body-lh);
  font-weight: var(--weight-regular);
}
/* 라벨·태그: 달력 카드 '바우처 사용 가능' (PC 12 → 다른 태그와 같은 14) */
.type-scale .cal-card__voucher {
  font-size: var(--ts-label);
  line-height: var(--ts-label-lh);
  font-weight: var(--weight-semibold);
}

/* 과정 안내 맨 아래 새 과정 알림 띠 (2026-10-27): 파랑 띠(.apply) + 위에 종 아이콘.
   여백은 학원 소개 '기업 임직원 AI 교육' 띠(.biz)와 같게: 위아래 64(모바일 48), 제목-설명 12, 설명-버튼 24 */
.notify-cta {
  padding-block: var(--space-16);
}
.notify-cta .apply__desc {
  margin-top: var(--space-3);
}
.notify-cta .apply__actions {
  margin-top: var(--space-6);
}
.notify-cta__icon {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--color-btn-surface);
}
@media (max-width: 767px) {
  .notify-cta {
    padding-block: var(--space-12);
  }
  .notify-cta__icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-3);
  }
}
@media (max-width: 767px) {
  .apply__actions:has(> :only-child) {
    grid-template-columns: 1fr; /* 버튼이 하나면 가로 전체 */
  }
}