/* ============================================================
   소리쉼 테마 오버라이드
   - 톤: 딥그린 + 골드 / 고요·절제·여백 (기획안 확정 톤)
   - 헤드라인: 명조체 / 본문: 고딕(Noto Sans KR)
   - 원본 styles.css 뒤에 로드해 외형만 소리쉼 브랜드로 덮어씀
   ============================================================ */

:root {
  --green-deep: #1d3a31;   /* 딥그린 (메인) */
  --green-soft: #2c5346;   /* 보조 그린 */
  --gold:       #c4a558;   /* 골드 (포인트) */
  --gold-light: #ddc485;
  --cream:      #f4efe4;   /* 크림 (밝은 텍스트/여백) */
}

/* ---- 헤드라인: 명조체로 차분하게 ---- */
#secIndex section .contentHolder h1,
#secIndex section .contentHolder h2 {
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #ffffff;
}
#secIndex section .contentHolder h1 { line-height: 1.25; }
/* 원본의 흰색 외곽선(투명글자+stroke) 제거 → 골드 단색 글자 */
#secIndex section .contentHolder h1 span { color: var(--gold-light); -webkit-text-stroke: 0; text-stroke: 0; }

/* 본문 문단: 살짝 밝은 크림 톤, 행간 여유 */
#secIndex section .contentHolder p {
  color: var(--cream);
  line-height: 1.85;
  font-weight: 300;
  letter-spacing: 0.2px;
}

/* ---- CTA 버튼: 골드 라인 박스 (담백·절제) ---- */
#secIndex section .contentHolder a.btnCTA {
  display: inline-block;
  margin-top: 38px;
  padding: 13px 30px;
  text-transform: none;          /* 한글이라 대문자 변환 해제 */
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 14px;
  color: var(--gold-light);
  border: 1px solid var(--gold);
  border-radius: 1px;
  transition: all .35s ease;
}
#secIndex section .contentHolder a.btnCTA:hover {
  background: var(--gold);
  color: var(--green-deep);
}

/* ---- 거대 배경 글씨(bigText): 영문 워드마크, 골드 외곽선, 은은하게 ----
   (한글은 외곽선이 지저분해 어색 → 원본처럼 영문으로. 본문은 한글 유지) */
#secIndex section .bigText {
  font-family: 'Cormorant Garamond', 'Nanum Myeongjo', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-text-stroke: 1px var(--gold);
  text-stroke: 1px var(--gold);
  opacity: 0.16;
  font-size: 22vw;
}

/* ---- 헤더 로고 이미지 ---- */
header .logoHolder { width: auto; height: auto; }
header .logoHolder a { display: inline-block; text-decoration: none; }
header .logoHolder .site-logo {
  height: 42px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.4));
}
/* 원본의 밝기 필터(brightness 400%)가 골드 버튼을 허옇게 날려서 해제 */
#secIndex .btnBook { filter: none; }
header .btnBook a { border: 1px solid var(--gold); }

/* ---- 배경 영상 위 딥그린 틴트 (분위기·가독성) ---- */
.videoHolder::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 글자가 놓이는 왼쪽을 진하게 → 클로즈업 영상 위에서도 글자 또렷, 오른쪽 영상은 살림 */
  background: linear-gradient(
    100deg,
    rgba(12, 26, 22, 0.86) 0%,
    rgba(18, 36, 30, 0.60) 36%,
    rgba(29, 58, 49, 0.32) 70%,
    rgba(29, 58, 49, 0.24) 100%
  );
  pointer-events: none;
}
/* 히어로 임팩트 ↑ : 배경 영상 채도·대비 살짝 올려 선명하게 */
.videoHolder video { filter: saturate(1.18) contrast(1.06) brightness(1.04); }

/* 헤더 전체를 flex로 → 로고와 우측(소리+예약)이 한 줄에서 세로중앙 정렬 (브라우저 무관) */
#secIndex header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  box-sizing: border-box;        /* padding 포함 폭 계산 → 가로 넘침 방지 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 60px;
  z-index: 121;
  pointer-events: none;          /* 헤더 빈 공간 클릭 통과 */
}
/* 전역 가로 스크롤(옆으로 튐) 차단 */
html, body { overflow-x: hidden; max-width: 100%; }
#secIndex header > * { pointer-events: auto; }
#secIndex header .logoHolder { position: static !important; width: auto; top: auto; left: auto; }

/* 헤더 우측: 소리버튼 + 예약버튼 묶음 */
.headerRight {
  display: flex;
  align-items: center;
  gap: 14px;
}
.headerRight .btnBook { position: static; top: auto; right: auto; }

/* 배경음악 소리 토글 버튼 (헤더 안 골드 원형) */
.sound-toggle {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(29, 58, 49, 0.7);
  color: var(--gold-light);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background .3s, transform .3s, opacity .3s;
}
.sound-toggle:hover { background: var(--gold); color: var(--green-deep); transform: scale(1.06); }
/* 꺼진 상태: 흐리게 + 사선 줄(음소거 느낌) */
.sound-toggle.muted { opacity: 0.65; }
.sound-toggle.muted .ico { position: relative; }
.sound-toggle.muted .ico::after {
  content: "";
  position: absolute;
  left: -3px; right: -3px; top: 50%;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
}
/* 켜진 상태: 잔잔한 호흡 애니메이션 */
.sound-toggle.on { animation: soundPulse 2.6s ease-in-out infinite; }
@keyframes soundPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,165,88,0.4); }
  50% { box-shadow: 0 0 0 7px rgba(196,165,88,0); }
}

/* 진입 시 '소리 켜기' 유도 — 버튼 강조 펄스(말풍선은 헤더 정렬을 흐려 제거) */
.sound-toggle.hint {
  animation: soundHint 1.6s ease-in-out infinite;
  opacity: 1;
}
@keyframes soundHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,165,88,0.55); }
  50% { box-shadow: 0 0 0 11px rgba(196,165,88,0); }
}

/* 섹션 인디케이터: 섹션 이름을 점 위에 항상 작게 표시 + 글씨도 클릭 시 이동 */
.theNavigator li { position: relative; cursor: pointer; }
.theNavigator li .navLabel {
  position: absolute;
  bottom: 220%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--gold-light);
  white-space: nowrap;
  opacity: 0.55;             /* 평소엔 은은하게 항상 보임 */
  cursor: pointer;
  padding: 5px 6px;          /* 글씨 클릭영역 확보 */
  transition: opacity .25s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.theNavigator li:hover .navLabel { opacity: 1; }

/* ===== 소리쉼Tea 제목 위계: 주제목(소리쉼Tea) + 부제목(공간에서 만나는 쉼) ===== */
#c-tea-title .tea-sub {
  display: block;
  margin-top: 10px;
  font-size: 0.5em;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.82);
}

/* ===== 항상 하단에 깔리는 한 줄 푸터(사업자 정보) ===== */
.siteFooter {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 7px 16px;
  font-size: 11px;
  letter-spacing: .3px;
  color: rgba(244, 239, 228, 0.5);
  background: linear-gradient(to top, rgba(13, 25, 21, 0.6), rgba(13, 25, 21, 0));
  white-space: normal;
  word-break: keep-all;       /* 어절 단위 줄바꿈(글자 깨짐 방지) */
  line-height: 1.6;
  pointer-events: none;       /* 위 요소(인디케이터 등) 클릭을 막지 않게 */
  z-index: 60;
}
.siteFooter .ph { opacity: .8; }

/* ===== PC(≥960px): 좌측 슬라이드 메뉴·햄버거 숨김 — 인디케이터로 이동 ===== */
@media screen and (min-width: 960px) {
  aside, #btnMenu { display: none !important; }
  /* 푸터: 바닥에 붙여 맨아래 잘림만 해결(크기는 원래대로) */
  .siteFooter {
    bottom: 0;
    padding: 14px 16px 9px;
    background: linear-gradient(to top, rgba(13,25,21,0.9), rgba(13,25,21,0));
  }
  /* 첫화면 제목 120% 키우고 행간 살짝 넓힘 (영역 넓혀 한 줄 유지) */
  #secIndex .sec01 .contentHolder { width: 52%; }
  #secIndex .sec01 .contentHolder h1 {
    font-size: 54px; line-height: 1.45; letter-spacing: 0;
    /* 밝은 배경 가독성 — 은은한 그림자(과하지 않게) */
    text-shadow: 0 1px 10px rgba(0,0,0,0.38);
  }
  /* 첫화면 원형 파동(리플) 제거 — PC에선 안 씀 */
  #secIntro .sori-ripple { display: none !important; }
}

/* ===== 모바일/태블릿(≤959px): 좌우 스와이프 가로 캐러셀 ===== */
@media screen and (max-width: 959px) {
  /* 페이지 자체 스크롤 잠금 → 가로 캐러셀(#secIndex)만 스크롤 */
  html, body { height: 100dvh !important; overflow: hidden !important; max-width: 100vw; }
  #secIndex, #secIndex * { box-sizing: border-box; }

  /* 헤더: 캐러셀 위에 고정(스와이프에 안 끼게) */
  #secIndex header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    padding: 12px 18px;
    background: linear-gradient(180deg, rgba(10,14,12,0.6), rgba(10,14,12,0));
  }
  #btnMenu { display: none !important; }
  .theNavigator { display: none !important; }

  /* 배경 영상: 화면 뒤 고정 */
  .videoHolder { position: fixed !important; inset: 0; width: 100% !important; height: 100dvh !important; z-index: 0; }

  /* 캐러셀 트랙: 가로 flex + 가로 스냅 */
  #secIndex {
    position: relative; z-index: 1;
    display: flex; flex-direction: row; flex-wrap: nowrap;
    width: 100vw; height: 100dvh;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #secIndex::-webkit-scrollbar { display: none; }

  /* 각 섹션 = 풀스크린 한 장(내용 길면 카드 안에서 세로 스크롤) */
  #secIndex > section {
    position: relative !important;
    flex: 0 0 100vw; width: 100vw; height: 100dvh;
    transform: none !important;
    scroll-snap-align: start; scroll-snap-stop: always;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* 사진 카드는 위에서부터 쌓되, 헤더와 살짝 띄워 가운데 쪽으로 내림 → 카드마다 시작점 통일 */
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 13dvh 0 6dvh;
    background: rgba(12, 18, 16, 0.86);
  }
  /* 텍스트형 카드(첫화면·문의)는 완전 세로 가운데 정렬
     ('#secIndex > section'이 우선순위가 높아 같은 강도로 올려야 적용됨) */
  #secIndex > #secIntro, #secIndex > #secContactUs { justify-content: center; }
  #secIndex > #secContactUs { padding: 0; }
  #secIndex > section::-webkit-scrollbar { display: none; }

  /* 첫 화면: 배경 영상 보이게(투명) + 중앙 정렬 */
  #secIntro {
    background: transparent !important;
    align-items: center; text-align: center;
  }
  #secIndex > #secIntro { padding: 0 28px; }
  #secIndex #secIntro .contentHolder h1,
  #secIndex #secIntro .contentHolder p { text-align: center !important; }

  /* 본문 블록 */
  #secIndex > section .contentHolder,
  #secIndex .sec01 .contentHolder {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important; margin: 0 !important;
    padding: 0 26px !important;
    opacity: 1 !important; transform: none !important;
    flex: 0 0 auto;
  }
  #secIntro .contentHolder { padding: 0 !important; }

  /* 사진: 풀폭, 카드 위쪽 */
  #secIndex > section .imgWrapper {
    position: relative !important;
    width: 100% !important; height: 34dvh !important;
    top: auto !important; left: auto !important; right: auto !important;
    margin: 0 0 22px !important;
    display: block; overflow: hidden;
    opacity: 1 !important; transform: none !important;
    flex: 0 0 auto;
  }
  #secIndex > section .imgWrapper img { width: 100% !important; height: 100% !important; object-fit: cover; }
  #secTeacher .imgWrapper { background: none; }

  /* 어중간한 버튼·배경 영문 숨김 */
  #secAbout .btnCTA, #secTeacher .btnCTA { display: none !important; }
  #secIndex section .bigText { display: none !important; }

  /* 제목·프로그램 */
  #secIndex section .contentHolder h2 { font-size: 24px; line-height: 1.35; margin-bottom: 14px; }
  #secIndex section .contentHolder h1 { font-size: 28px; line-height: 1.35; }
  /* 모바일 카드: 문구 전부 가운데 정렬(프로그램 가격 리스트만 왼쪽) */
  #secIndex > section .contentHolder,
  #secIndex > section .contentHolder h2,
  #secIndex > section .contentHolder p { text-align: center !important; }
  #secProgram .program-list, #secProgram .program-desc { text-align: left !important; }
  .program-list { max-height: 38dvh !important; overflow-y: auto !important; }
  .program-header { align-items: baseline; gap: 6px; }
  .program-name { flex: 1; }
  .program-price { white-space: nowrap; flex-shrink: 0; }

  /* 푸터: JS가 '문의' 카드 안으로 옮김 → 카드 맨 하단에 고정(점 인디케이터 자리 남김) */
  .siteFooter {
    position: absolute !important; left: 0; right: 0; bottom: 0;
    z-index: 5; margin: 0; background: transparent;
    color: rgba(244, 239, 228, 0.5);
    font-size: 10px; letter-spacing: 0;
    white-space: normal; word-break: keep-all; line-height: 1.7;
    padding: 14px 26px 30px; text-align: center;
  }

  /* 좌우 넘김 점 인디케이터(하단 고정) */
  .mDots {
    position: fixed; bottom: 15px; left: 0; right: 0; z-index: 40;
    display: flex; justify-content: center; gap: 8px;
  }
  .mDots b {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(244, 239, 228, 0.32); transition: all .3s; cursor: pointer;
  }
  .mDots b.on { background: var(--gold); width: 20px; border-radius: 4px; }

  .sound-toggle { width: 34px; height: 34px; }
  .sound-toggle.hint { animation: none; }
}

/* ---- 헤더: 예약 버튼 골드 ---- */
header .btnBook a {
  color: var(--green-deep);
  background: var(--gold);
  padding: 9px 20px;
  border-radius: 1px;
  text-decoration: none;
  letter-spacing: 1px;
}
header .lingualHolder a { color: var(--cream); }

/* ---- 우측 섹션 인디케이터: 골드 ---- */
.theNavigator .theLine { background: rgba(196, 165, 88, 0.35); }
.theNavigator .maskHighlight { background: var(--gold); }
.theNavigator .textInd { color: var(--gold-light); }

/* ---- 좌측 슬라이드 메뉴: 딥그린 단색 배경 ---- */
aside {
  background: var(--green-deep) !important;
}
aside .secMainNavi li a { color: var(--cream); }
aside .secMainNavi li a:hover { color: var(--gold-light); }
aside .secContD a { color: var(--gold-light); }
aside .secCopyright { color: rgba(244, 239, 228, 0.5); }

/* ---- 푸터 소셜 ---- */
footer .socialHolder li a,
footer .copyHolder { color: var(--cream); }

/* ---- 햄버거 버튼 바: 크림색 ---- */
#btnMenu .bar1, #btnMenu .bar2 { background-color: var(--cream); }

/* ---- 자료 채울 자리 표시(작업용) ---- */
.ph {
  display: inline-block;
  font-size: 12px;
  color: var(--gold-light);
  border: 1px dashed rgba(196, 165, 88, 0.6);
  border-radius: 2px;
  padding: 1px 8px;
  opacity: 0.85;
}

/* ---- 프로그램 리스트 스타일링 ---- */
.program-list {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 20px;
  padding-right: 12px;
  border-top: 1px solid rgba(196, 165, 88, 0.15);
  border-bottom: 1px solid rgba(196, 165, 88, 0.15);
}

/* 스크롤바 커스텀 */
.program-list::-webkit-scrollbar {
  width: 4px;
}
.program-list::-webkit-scrollbar-track {
  background: rgba(29, 58, 49, 0.5);
}
.program-list::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 2px;
}

.program-item {
  border-bottom: 1px solid rgba(196, 165, 88, 0.1);
  padding: 12px 0;
}
.program-item:last-child {
  border-bottom: none;
}
.program-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.program-name {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-light);
}
.program-price {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}
.program-desc {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(244, 239, 228, 0.75) !important;
  margin: 0 !important;
}

/* 모바일 반응형 대응 */
@media screen and (max-width: 768px) {
  .program-list {
    max-height: 220px;
  }
  .program-name {
    font-size: 14px;
  }
  .program-price {
    font-size: 13px;
  }
  .program-desc {
    font-size: 12px !important;
  }
}

/* ============================================================
   [수정] 텍스트 잘림 방지 — 이미지 있는 섹션(소개·프로그램·강사·공간)
   원본은 left:155px + width:50% 라 우측 사진 영역과 겹쳐 글이 잘렸음.
   본문 영역을 좌측에 가둬(우측 사진과 안 겹치게) 해결.
   ============================================================ */
/* 데스크탑(≥960px)에서만 본문을 좌측에 가둠. 모바일/태블릿은 원본 전체폭 유지 */
@media screen and (min-width: 960px) {
  #secIndex .sec02 .contentHolder,
  #secIndex .sec03 .contentHolder {
    left: 8%;
    right: 54%;
    width: auto;
  }
  #secIndex section .contentHolder h2 {
    width: 100%;
    font-size: 42px;
  }
}
/* 본문·제목 줄바꿈(전역): justify 해제 + 어절 단위 줄바꿈(글자 중간에서 안 잘리게) */
#secIndex section .contentHolder p { text-align: left; word-break: keep-all; }
#secIndex section .contentHolder h2 { word-break: keep-all; }

/* [수정] 사진 깨짐 — 원본 img에 height가 없어 object-fit:cover 무력.
   세로/가로 사진 모두 영역을 꽉 채우고 중앙 기준으로 크롭되게. */
#secIndex section .imgWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 레퍼런스 톤: 채도·밝기 낮춰 차분하게(과하지 않게) */
  filter: saturate(0.75) brightness(0.82) contrast(1.0);
}

/* [데스크탑] 레퍼런스처럼 사진 왼쪽(글씨 쪽)을 검정으로 녹여 텍스트 영역과 매끄럽게 잇기 */
@media screen and (min-width: 960px) {
  #secIndex section .imgWrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* 위: 딥그린을 아주 옅게 전체에 한 겹(배경 영상 톤과 묶기) / 아래: 왼쪽 검정 페이드 */
    background:
      linear-gradient(180deg, rgba(29,58,49,0.08) 0%, rgba(20,40,34,0.05) 100%),
      linear-gradient(90deg,
        #0c0c0c 0%,
        rgba(12,12,12,0.48) 22%,
        rgba(12,12,12,0.08) 55%,
        rgba(12,12,12,0.22) 100%);
  }
  /* [강사] 다른 섹션과 동일하게 사진을 50% 꽉 채움(이전 카드 스타일 해제) */
  #secTeacher .imgWrapper { display: block; background: none; }
  #secTeacher .imgWrapper img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
}

/* [모바일] 사진은 위/아래 배치 → 위에서 아래로 가벼운 균일 틴트만 */
@media screen and (max-width: 959px) {
  #secIndex section .imgWrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(29,58,49,0.08) 0%, rgba(20,40,34,0.05) 100%),
      linear-gradient(180deg, rgba(12,12,12,0.30) 0%, rgba(12,12,12,0.12) 100%);
  }
}

/* ============================================================
   [수정] 스크롤 전환 버벅임 1차 개선 — GPU 가속 힌트
   움직이는 요소를 별도 레이어로 올려 합성(composite)만 하도록.
   ============================================================ */
#secIndex section,
#secIndex section .bigText,
#secIndex section .imgWrapper,
#secIndex section .contentHolder {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* contentHolder는 원본이 translateY(-50%)로 세로 중앙을 잡으므로 보존 */
#secIndex section .contentHolder {
  transform: translateY(-50%) translateZ(0);
}
.videoHolder video { will-change: transform; transform: translateZ(0); }

/* ============================================================
   [인터랙션] 첫화면 싱잉볼 진동 리플 + 모바일 사진 은은한 줌(Ken Burns)
   ============================================================ */

/* 1) 첫 화면: 소리 파동이 은은하게 퍼지는 동심원(골드 라인). 카피 뒤 레이어. */
#secIntro .sori-ripple {
  position: absolute;
  left: 50%;
  top: 58%;            /* 배경 싱잉볼 위치쯤에서 퍼지게 */
  width: 0; height: 0;
  pointer-events: none;
  z-index: 1;          /* 영상 위, 글씨(contentHolder는 더 위) 아래 */
}
#secIntro .sori-ripple span {
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(212,180,120,0.45);  /* 브랜드 골드 */
  border-radius: 50%;
  opacity: 0;
  animation: soriRipple 6s cubic-bezier(0.22,0.61,0.36,1) infinite;
}
#secIntro .sori-ripple span:nth-child(2) { animation-delay: 2s; }
#secIntro .sori-ripple span:nth-child(3) { animation-delay: 4s; }
@keyframes soriRipple {
  0%   { transform: scale(0.3); opacity: 0; }
  12%  { opacity: 0.5; }
  100% { transform: scale(11); opacity: 0; }
}
#secIntro .contentHolder { position: relative; z-index: 2; }  /* 글씨를 리플 위로 */

/* 2) 모바일: 섹션 사진이 아주 천천히 확대·이동(Ken Burns) */
@media screen and (max-width: 959px) {
  #secIndex section .imgWrapper img {
    animation: kenburns 24s ease-in-out infinite alternate;
    transform-origin: 50% 45%;
  }
}
@keyframes kenburns {
  from { transform: scale(1.0)  translate(0, 0); }
  to   { transform: scale(1.09) translate(-1.4%, -1%); }
}

/* 멀미 방지: 모션 줄이기를 켠 기기에서는 움직임 끔 */
@media (prefers-reduced-motion: reduce) {
  #secIntro .sori-ripple span,
  #secIndex section .imgWrapper img { animation: none !important; }
}

/* ---- 강사 약력 모달 ---- */
.bioModal { display: none; position: fixed; inset: 0; z-index: 9999; }
.bioModal.is-open { display: block; }
.bioModal-backdrop { position: absolute; inset: 0; background: rgba(10,18,15,.66); backdrop-filter: blur(2px); }
.bioModal-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 40px)); max-height: 80vh; overflow-y: auto;
  background: var(--green-deep); color: #ffffff;
  border: 1px solid rgba(196,165,88,.45); border-radius: 6px;
  padding: 40px 36px 34px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.bioModal-close {
  position: absolute; top: 14px; right: 16px; background: none; border: 0;
  color: var(--gold-light); font-size: 28px; line-height: 1; cursor: pointer; padding: 4px;
}
.bioModal-box h3 {
  font-family: 'Nanum Myeongjo', serif; font-weight: 700; color: var(--gold-light);
  font-size: 24px; margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(196,165,88,.3);
}
.bioModal-body .bioList { list-style: none; margin: 0; padding: 0; }
.bioModal-body .bioList li {
  position: relative; padding-left: 18px; margin: 0 0 13px;
  line-height: 1.7; font-size: 15px; color: #fff;
}
.bioModal-body .bioList li:last-child { margin-bottom: 0; }
.bioModal-body .bioList li::before {
  content: "·"; position: absolute; left: 4px; top: -1px;
  color: var(--gold-light); font-weight: 700;
}