/* ============================================================
   소리쉼 테마 오버라이드
   - 톤: 딥그린 + 골드 / 고요·절제·여백 (기획안 확정 톤)
   - 헤드라인: 명조체 / 본문: 고딕(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; }

/* 본문 문단: 고딕(Noto Sans KR) — 헤드라인 명조와 대비. 살짝 밝은 크림 톤, 행간 여유 */
#secIndex section .contentHolder p {
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--cream);
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* ---- 소개: 추천 대상 블록 (골드 라인 + 점 리스트) ---- */
#secIndex .sec02 .about-target {
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
}
#secIndex .sec02 .about-target-title {
  font-family: 'Nanum Myeongjo', serif;
  color: var(--gold-light);
  font-size: 15px;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
}
#secIndex .sec02 .about-target ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#secIndex .sec02 .about-target li {
  position: relative;
  padding-left: 16px;
  font-family: 'Noto Sans KR', sans-serif;
  color: var(--cream);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.2px;
}
#secIndex .sec02 .about-target li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 5px;
  height: 5px;
  background: var(--gold);
}
#secIndex .sec02 .about-target-foot {
  margin: 12px 0 0;
  color: var(--gold-light);
  font-size: 13.5px;
  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;
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: 0.2px;         /* 한글 자간 과하지 않게 */
  font-size: 14px;
  font-weight: 500;
  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);
}

/* ---- 문의 섹션: 네이버 예약 / 전화 문의를 각각 버튼으로 구분 ---- */
#secIndex #secContactUs #c-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
#secIndex section .contentHolder #c-contact-links a.btnCTA { margin-top: 0; }
/* 네이버 예약 = 채운 골드(주요 행동), 전화 = 골드 라인(보조) */
#secIndex section .contentHolder a.btnCTA.btnCTA--fill {
  background: var(--gold);
  color: var(--green-deep);
  font-weight: 600;
}
#secIndex section .contentHolder a.btnCTA.btnCTA--fill:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}
@media screen and (max-width: 959px) {
  /* 좁은 폰에서 한 줄에 안 들어가 어긋나므로 세로로 쌓되, 다른 섹션 버튼과 동일하게 왼쪽(본문선) 정렬·자동 너비 */
  #secIndex #secContactUs #c-contact-links { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- 거대 배경 글씨(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; }
}

/* ===== [비활성] 옛 모바일 가로 캐러셀 — 레퍼런스(skrollr 세로스와이프→가로슬라이드) 모드로 전환하며 끔.
   되돌리려면 아래 max-width:0px → 959px 로. (원본 styles.css 모바일 규칙이 대신 동작) ===== */
@media screen and (max-width: 0px) {
  /* 페이지 자체 스크롤 잠금 → 가로 캐러셀(#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,
  #secIndex > section .imgWrapper video { 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; }
  /* 프로그램 슬라이드(목록 있는 카드)는 사진/영상을 줄여 목록·예약버튼이 덜 잘리게
     (기존 '#secIndex > section .imgWrapper' 규칙보다 특이성 높게 id 두 개로 지정) */
  #secIndex > #secProgram .imgWrapper,
  #secIndex > #secProgram2 .imgWrapper { height: 24dvh !important; margin-bottom: 16px !important; }
  #secProgram .program-intro, #secProgram2 .program-intro { margin: 4px 0 10px; }
  /* +α(별자리) 박스는 가독성 위해 왼쪽 정렬 유지 */
  #c-program-plus, #c-program-plus p, #c-program-plus .program-header { text-align: left !important; }

  /* 푸터: 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: 14px;
  padding-right: 12px;
  border-top: 1px solid rgba(196, 165, 88, 0.15);
  border-bottom: 1px solid rgba(196, 165, 88, 0.15);
}
/* 데스크탑: 슬라이드가 두 개로 나뉘어 항목이 적으므로 잘리지 않게 충분히 펼침 */
@media screen and (min-width: 960px) {
  .program-list { max-height: 440px; }
}

/* 스크롤바 커스텀 */
.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-plus {
  margin-top: 14px;
}
.plus-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px dashed rgba(196, 165, 88, 0.45);
  border-radius: 6px;
  background: rgba(196, 165, 88, 0.06);
}
.plus-mark {
  flex-shrink: 0;
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.02em;
  padding-top: 1px;
}
.plus-body { flex: 1; }
/* 별자리 +α 박스 안 예약 버튼 — 기본 CTA보다 작고 여백 좁게 */
#secIndex section .contentHolder a.btnCTA.plus-book {
  margin-top: 12px;
  padding: 8px 20px;
  font-size: 13px;
}

/* 강사 성함 */
.teacher-name {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.02em;
  margin: -4px 0 14px;
}
.teacher-name span { font-size: 14px; font-weight: 400; color: var(--gold); margin-left: 6px; }

/* 프로그램 슬라이드 소개 문구 */
.program-intro {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(244, 239, 228, 0.82);
  margin: 6px 0 12px;
  max-width: 92%;
}
@media screen and (max-width: 768px) {
  .program-intro { font-size: 13px; margin: 6px 0 10px; }
}

/* 자격증 과정 — 풀블리드 사진 + 본문을 한 덩어리로 화면 세로 가운데 배치(뷰포트 높이 무관) */
@media screen and (min-width: 960px) {
  #secCert {
    background: #0c100e;
    display: flex; flex-direction: column;
    justify-content: center; align-items: stretch;
    padding: 104px 0 150px;   /* 위: 헤더 로고 / 아래: 인디케이터·푸터 자리 */
    box-sizing: border-box;
  }
  /* 사진: 좌우 풀블리드(가로 꽉), 높이만 제한 */
  #secCert .imgWrapper {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important; height: auto !important;
    margin: 0 !important; flex: 0 0 auto; overflow: hidden;
  }
  #secCert .imgWrapper img {
    width: 100% !important; height: auto !important; max-height: 28vh;
    object-fit: cover; object-position: center 30%;
  }
  /* 사진 하단을 어둠으로 자연스럽게 페이드 → 본문과 매끄럽게 이음(간지) */
  #secCert .imgWrapper::after {
    display: block !important;
    background: linear-gradient(180deg, rgba(12,16,14,0) 42%, rgba(12,16,14,0.55) 68%, rgba(12,16,14,0.9) 86%, #0c100e 100%) !important;
  }
  /* 본문: 가운데 정렬 컨테이너(읽기 좋은 최대폭) */
  #secCert .contentHolder {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: 100% !important; max-width: 1200px !important;
    margin: 36px auto 0 !important;
    padding: 0 6% !important;
    box-sizing: border-box;
    background: none !important;
    display: flex; flex-direction: column; overflow: visible;
  }
  #secCert .contentHolder > * { width: 100%; }
  #secCert .contentHolder h2 { width: 100%; font-size: 34px; letter-spacing: 0; margin-bottom: 10px; text-align: left; }
  #secCert .contentHolder p { text-align: left; word-break: keep-all; }
  #secCert .program-intro { margin: 2px 0 16px; }
  #secCert .cert-notice { margin: 18px 0 0; }
  /* 공지 + 문의 버튼을 한 줄로: 버튼은 공지 오른쪽 빈 공간에 앉혀 하단 인디케이터와 겹치지 않게 */
  #secCert .cert-foot { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
  #secCert .cert-foot .cert-notice { flex: 1 1 auto; margin: 18px 0 0; }
  #secCert .cert-foot a.btnCTA { flex: 0 0 auto; align-self: center; width: auto; max-width: none; margin-top: 18px !important; }
}

/* ===== 모바일: 사진(상단 밴드) + 글씨(아래 어둠) 분리 — 겹침 없이, 경계만 그라데이션 =====
   사진 섹션은 위 42%가 사진, 아래는 어두운 배경에 텍스트. 사진 하단은 어둠으로 자연 페이드. */
@media screen and (max-width: 959px) {
  /* 모바일에선 하단 푸터 숨김(데스크탑은 유지) */
  .siteFooter { display: none !important; }
  /* 모바일에선 음악 재생 버튼 숨김(햄버거와 겹침 방지) */
  #soundToggle { display: none !important; }
  /* 로고: 크기 살짝 줄이고 왼쪽 라인(본문 22px)에 맞춤 + 상단에 아주 옅은 틴트로 가독성↑ */
  #secIndex header {
    padding: 26px 22px !important;
    background: linear-gradient(180deg, rgba(12,16,14,0.34) 0%, rgba(12,16,14,0.10) 58%, rgba(12,16,14,0) 100%) !important;
  }
  header .logoHolder .site-logo { height: 30px !important; }
  #secIndex > section.sec02,
  #secIndex > section.sec03 { background: #0c100e !important; }
  /* 사진: 상단 밴드(실기기 높이에서도 내용이 다 들어오게) */
  #secIndex > section .imgWrapper {
    height: 37% !important;
    top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important;
  }
  #secIndex > section .imgWrapper img,
  #secIndex > section .imgWrapper video {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  /* 사진 하단만 어둠으로 부드럽게 페이드(경계 이음) */
  #secIndex > section .imgWrapper::after {
    content: "" !important;
    position: absolute !important; inset: 0 !important; pointer-events: none !important;
    background: linear-gradient(180deg,
      rgba(12,16,14,0.20) 0%,
      rgba(12,16,14,0.05) 55%,
      rgba(12,16,14,0.65) 85%,
      #0c100e 100%) !important;
  }
  /* 본문: 사진 아래에서 시작, 안쪽 스크롤 없음(이중 스크롤 방지) */
  #secIndex > section:not(.sec01) .contentHolder {
    top: 39% !important; bottom: 16px !important;
    left: 22px !important; right: 22px !important; width: auto !important;
    transform: none !important;
    overflow: hidden !important;
  }
  /* 첫화면·문의(sec01)도 본문 왼쪽 라인을 22px로 통일(로고와 정렬) */
  #secIndex .sec01 .contentHolder {
    left: 22px !important; right: 22px !important; width: auto !important;
  }
  /* 모바일 프로그램: 인트로·설명 빼고 이름·가격만 깔끔하게(한 화면에 맞음) */
  #secProgram .program-intro, #secProgram2 .program-intro,
  #secProgram .program-desc, #secProgram2 .program-desc { display: none !important; }
  #secProgram .program-item, #secProgram2 .program-item { padding: 10px 0 !important; }
  .program-list { max-height: none !important; overflow: visible !important; }
  /* 모바일 자격증: 사진 밴드·본문 위치는 다른 섹션과 동일하게 두고(레이아웃 통일),
     인트로만 빼고 3단계·공지 간격만 살짝 좁혀 문의 버튼 자리를 확보 */
  #secCert .program-intro { display: none !important; }
  #secCert .contentHolder h2 { margin-bottom: 4px !important; }
  #secCert .cert-step { padding: 3px 0 !important; }
  #secCert .cert-step-name { margin-bottom: 2px !important; }
  #secCert .cert-step p { line-height: 1.35 !important; }
  #secCert .cert-notice { margin-top: 6px !important; }
  #secCert .cert-notice li { margin: 3px 0 !important; }
  /* 문의 버튼: 다른 섹션 버튼과 동일(왼쪽 정렬·자동 너비·같은 패딩) */
  #secCert .cert-foot a.btnCTA { display: inline-block; width: auto; margin-top: 10px !important; }
}

/* 자격증 3단계 — 가로 3칼럼(탐구·실전·몰입) */
.cert-steps {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(196, 165, 88, 0.28);
  border-bottom: 1px solid rgba(196, 165, 88, 0.28);
}
.cert-step {
  flex: 1 1 0;
  padding: 14px 22px 14px 0;
}
.cert-step + .cert-step {
  padding-left: 22px;
  border-left: 1px solid rgba(196, 165, 88, 0.14);
}
.cert-step-name {
  display: block;
  font-family: 'Nanum Myeongjo', serif;
  font-size: 17px;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.cert-step p {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 239, 228, 0.78);
  word-break: keep-all;
}
@media screen and (max-width: 959px) {
  .cert-steps { flex-direction: column; }
  .cert-step { padding: 12px 0; text-align: left; }
  .cert-step + .cert-step { padding-left: 0; border-left: none; border-top: 1px solid rgba(196, 165, 88, 0.12); }
  .cert-step p { text-align: left; }
}

/* 자격증 과정 — 공지(수료비·모집·일정·수료증) */
.cert-notice {
  list-style: none;
  margin: 14px 0 20px;
  padding: 0;
}
.cert-notice li {
  position: relative;
  padding-left: 14px;
  margin: 7px 0;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 239, 228, 0.82);
  word-break: keep-all;
}
.cert-notice li::before {
  content: "·";
  position: absolute;
  left: 3px;
  color: var(--gold);
}
.cert-notice .program-price {
  font-size: 15px;
  color: var(--gold-light);
}
@media screen and (max-width: 768px) {
  .cert-notice li { font-size: 13px; margin: 6px 0; }
}

/* (구) 두 갈래 소제목 — 슬라이드 분리 후 미사용, 잔존 안전 */
.program-group {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 20px 0 6px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(196, 165, 88, 0.28);
}
.program-group:first-child { margin-top: 4px; }

.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,
#secIndex section .imgWrapper video {
  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; }
}

/* ============================================================
   [수정] 세로 짧은 데스크탑 노트북 대응 (폭 넓음 + 높이 낮음)
   1366×768 등에서 100vh 고정 레이아웃이 짧은 세로에 안 들어가
   하단 타임라인 네비(bottom:130px)와 겹치고 텍스트가 잘리던 문제.
   → 하단 여백(네비 자리)은 그대로 두고, 세로 치수(사진·상단여백·간격·글자)만
     한 단계 압축. 세로 큰 외부 모니터(900px 초과)만 이 분기가 안 걸려 원본 그대로.
     노트북(실높이 ~600~800px)은 전부 이 압축 모드가 잡도록 900px 이하에서 발동.
   ============================================================ */
@media screen and (min-width: 960px) and (max-height: 900px) {
  /* 헤더(로고) 한 단계 축소 → 상단 공간 확보(짧은 화면서 섹션 제목이 로고와 안 겹치게) */
  #secIndex header { padding: 16px 40px !important; }
  header .logoHolder .site-logo { height: 30px !important; }

  /* 프로그램 섹션(싱잉볼체험·차명상말차): 본문이 세로 가운데 정렬(top:48%)인데
     짧은 화면선 콘텐츠를 '압축 모드'로 줄이고 정렬 기준만 살짝 위(46%)로.
     압축돼 짧아진 블록이 가운데 정렬되므로 상·하 여백이 자연히 생겨 헤더·네비와 안 겹침.
     (가운데 정렬 유지 → 어느 높이서든 균형있게 보임) */
  #secIndex #secProgram .contentHolder,
  #secIndex #secProgram2 .contentHolder { top: 46% !important; }
  /* 제목 한 단계 축소 */
  #secIndex #secProgram .contentHolder h2,
  #secIndex #secProgram2 .contentHolder h2 { font-size: 32px !important; margin-bottom: 4px !important; }
  #secProgram .program-list, #secProgram2 .program-list { max-height: calc(100vh - 380px); }
  /* 압축 모드: 맛보기 소개문구·항목 설명문을 접어 제목·이름·가격·버튼만.
     (큰 화면은 그대로 유지 — 이 분기 밖) */
  #secProgram .program-intro, #secProgram2 .program-intro { display: none !important; }
  #secProgram .program-desc, #secProgram2 .program-desc { display: none !important; }
  #secProgram .program-item, #secProgram2 .program-item { padding: 9px 0; }
  #secProgram2 .program-plus { margin-top: 8px; }
  #secProgram2 .plus-item { padding: 7px 12px; }
  #secIndex #secProgram .contentHolder a.btnCTA,
  #secIndex #secProgram2 .contentHolder a.btnCTA { margin-top: 14px; }

  /* 자격증 섹션: 하단 150px(네비 자리)는 유지, 위·내부만 압축 */
  #secCert { padding: 76px 0 150px; }
  #secCert .imgWrapper img { max-height: 18vh; }
  #secCert .contentHolder { margin-top: 16px !important; }
  #secCert .contentHolder h2 { font-size: 27px; margin-bottom: 6px; }
  #secCert .program-intro { margin: 0 0 8px !important; font-size: 13px; line-height: 1.5; }
  #secCert .cert-step { padding-top: 8px; padding-bottom: 8px; }
  #secCert .cert-step-name { font-size: 15px; margin-bottom: 3px; }
  #secCert .cert-step p { font-size: 12px; line-height: 1.45; }
  #secCert .cert-notice { margin: 8px 0 0 !important; }
  #secCert .cert-notice li { font-size: 12px; margin: 3px 0; }
  #secCert .cert-foot a.btnCTA { margin-top: 8px !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;
}