/*
 * 마케팅 강의(sub/lecture.php) 전용 스타일(2026-10-21). 움직임은 sub/lecture/lecture.js.
 * 테마 style.css의 .sub-01-* 규칙은 theme/ybusiness_1/sub01.php도 쓰므로 고치지 않고, <main class="lec"> 아래에서만 덮어쓴다.
 * 새 블록(성공 사례 그래프·카톡 카드·오프라인 안내·장점 카드)은 .lec-* 클래스로 이 파일에서만 모양을 정한다.
 * 대표 소개는 메인과 같은 부품(section/expert/expert-profile.php, 테마의 .main-03-03-*)을 쓴다.
 * 마우스 효과는 유튜브상위노출 페이지(sub/youtube/youtube.css)처럼 빨간 채움·빨간 선이 그어짐 정도로 절제한다.
 * 빨간 그림자(액자·빛 번짐)는 쓰지 않는다(2026-10-21 사용자 요청). 장점 카드·자주 묻는 질문은 첫 버전 효과를 유지한다.
 * .lec-anim은 lecture.js가 붙인다. 붙지 않으면(움직임 줄이기 설정, JS 오류) 숨기는 규칙이 걸리지 않아 최종 화면이 그대로 보인다.
 * 이 파일은 add_stylesheet()로 넣지 않는다(테마 헤드에서 빠진다, .claude/rules/10-theme.md). sub/lecture.php가 <link>를 직접 출력한다.
 */

/* 사이트 @font-face는 굵기마다 이름이 달라(Pretendard Variable Subset Bold 등) font-weight로 고를 수 없다.
   그래서 새 블록의 600·700이 가짜 굵기로 그려지고 h3는 맑은 고딕으로 빠졌다. 유튜브 페이지("YT Pretendard")처럼 굵기별로 다시 묶는다.
   글꼴 파일은 화면에 쓰인 굵기만 받는다. */
@font-face { font-family: "LEC Pretendard"; font-style: normal; font-weight: 300; font-display: swap; src: url("../../theme/ybusiness_1/fonts/Pretendard-Light.woff2") format("woff2"), url("../../theme/ybusiness_1/fonts/Pretendard-Light.woff") format("woff"); }
@font-face { font-family: "LEC Pretendard"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../theme/ybusiness_1/fonts/Pretendard-Regular.woff2") format("woff2"), url("../../theme/ybusiness_1/fonts/Pretendard-Regular.woff") format("woff"); }
@font-face { font-family: "LEC Pretendard"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../theme/ybusiness_1/fonts/Pretendard-Medium.woff2") format("woff2"), url("../../theme/ybusiness_1/fonts/Pretendard-Medium.woff") format("woff"); }
@font-face { font-family: "LEC Pretendard"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../theme/ybusiness_1/fonts/Pretendard-SemiBold.woff2") format("woff2"), url("../../theme/ybusiness_1/fonts/Pretendard-SemiBold.woff") format("woff"); }
@font-face { font-family: "LEC Pretendard"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../theme/ybusiness_1/fonts/Pretendard-Bold.woff2") format("woff2"), url("../../theme/ybusiness_1/fonts/Pretendard-Bold.woff") format("woff"); }

.lec {
  --lec-red: #c23a31;
  --lec-red-bright: #e0473d;
  --lec-muted: rgba(255, 255, 255, 0.68);
  --lec-line: rgba(255, 255, 255, 0.1);
  --lec-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lec-font: "LEC Pretendard", "Pretendard Variable Subset Regular", sans-serif;
}
.lec-stories__lead, .lec-chart, .lec-chats__copy, .lec-offline__copy, .lec-adv__item,
.lec .sub-01-09-03 {
  font-family: var(--lec-font);
}
.lec-stories__lead *, .lec-chart *, .lec-chats__copy *, .lec-offline__copy *, .lec-adv__item *,
.lec .sub-01-09-03 * {
  font-family: inherit;
}

/* 3. 줄바꿈: 낱자 단위로 끊기지 않게 어절 단위로 바꾼다. 테마의 break-all(예: .sub-01-07-03 li p)보다 우선하도록 body를 붙인다 */
body .lec :is(p, li, h2, h3, h4, dt, dd, figcaption, span, strong, blockquote) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 스크롤 등장(lecture.js가 .lec-reveal → .is-in) */
.lec-anim .lec-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s var(--lec-ease);
}
.lec-anim .lec-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ───────── 첫 섹션 ───────── */
/* 2. 헤더와 간격: 위 여백 380px → 220px(헤더 150px 아래 70px). 휴대폰은 같은 비율로 줄인다(59.375vw → 38vw) */
.lec .sub-01-01-01 {
  padding-top: min(12.2222222222em, 38vw);
}
/* 휴대폰의 원장님 사진은 위에서부터 위치를 잡으므로 줄인 여백만큼 함께 올린다 */
@media (max-width: 1024px) {
  .lec .sub-01-01-01::before {
    top: calc(57.1428571429vw - (min(21.1111111111em, 59.375vw) - min(12.2222222222em, 38vw)));
  }
}
/* 동그라미 6개: 안쪽 여백을 줄여 어절이 한 줄에 들어가게 한다.
   마우스를 올리면 유튜브 페이지 말풍선처럼 빨갛게 채워진다.
   등장 효과의 transform 지연이 남아 있어 hover에는 transform을 쓰지 않는다 */
.lec .sub-01-01-01-04-03 li {
  padding: 0.6em;
  line-height: 1.4;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.lec .sub-01-01-01-04-03 li:hover {
  border-color: var(--lec-red);
  background-color: var(--lec-red);
  color: #fff;
}
.lec .sub-01-01-01-04-03 li:hover strong {
  color: #fff;
}
.lec .sub-01-01-01-04-04 {
  color: var(--lec-muted);
}
.lec .sub-01-01-01-04-04 strong {
  color: var(--lec-red-bright);
}

/* 1. 첫 섹션 등장: 한 줄 문구 → 제목(밑줄이 그어짐) → 소개 → 사진 → 상자 → 동그라미 차례 */
.lec-anim .sub-01-01-01 > p,
.lec-anim .sub-01-01-01 > h2,
.lec-anim .sub-01-01-01-04,
.lec-anim .sub-01-01-01-04 > :not(ul) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s var(--lec-ease);
}
.lec-anim .sub-01-01-01::before {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 1s ease 0.2s, transform 1.1s var(--lec-ease) 0.2s;
}
.lec-anim .sub-01-01-01-01::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--lec-ease) 0.55s;
}
.lec-anim .sub-01-01-01-04-03 li {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s, border-color 0.3s, color 0.3s;
}
/* 지연은 위 transition 묶음보다 우선해야 하므로 .lec.lec-anim으로 쓴다 */
.lec.lec-anim .sub-01-01-01-02 { transition-delay: 0.05s; }
.lec.lec-anim .sub-01-01-01-01 { transition-delay: 0.2s; }
.lec.lec-anim .sub-01-01-01-03 { transition-delay: 0.4s; }
.lec.lec-anim .sub-01-01-01-04 { transition-delay: 0.55s; }
.lec.lec-anim .sub-01-01-01-04-01 { transition-delay: 0.75s; }
.lec.lec-anim .sub-01-01-01-04-02 { transition-delay: 0.85s; }
.lec-anim .sub-01-01-01-04-03 li:nth-child(1) { transition-delay: 0.95s, 0.95s, 0s, 0s, 0s; }
.lec-anim .sub-01-01-01-04-03 li:nth-child(2) { transition-delay: 1.03s, 1.03s, 0s, 0s, 0s; }
.lec-anim .sub-01-01-01-04-03 li:nth-child(3) { transition-delay: 1.11s, 1.11s, 0s, 0s, 0s; }
.lec-anim .sub-01-01-01-04-03 li:nth-child(4) { transition-delay: 1.19s, 1.19s, 0s, 0s, 0s; }
.lec-anim .sub-01-01-01-04-03 li:nth-child(5) { transition-delay: 1.27s, 1.27s, 0s, 0s, 0s; }
.lec-anim .sub-01-01-01-04-03 li:nth-child(6) { transition-delay: 1.35s, 1.35s, 0s, 0s, 0s; }
.lec.lec-anim .sub-01-01-01-04-04 { transition-delay: 1.5s; }
.lec-hero-in .sub-01-01-01 > p,
.lec-hero-in .sub-01-01-01 > h2,
.lec-hero-in .sub-01-01-01-04,
.lec-hero-in .sub-01-01-01-04 > :not(ul),
.lec-hero-in .sub-01-01-01::before,
.lec-hero-in .sub-01-01-01-04-03 li {
  opacity: 1;
  transform: none;
}
.lec-hero-in .sub-01-01-01-01::after {
  transform: scaleX(1);
}
/* "3개월만에 500% 의뢰 증가" 옆 빨간 화살표가 천천히 오르내린다 */
.lec-anim .sub-01-01-01-04-01::after {
  animation: lec-float 2.4s ease-in-out 2s infinite;
}
@keyframes lec-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ───────── 실제 마케팅 성공 사례 ───────── */
.lec .lec-stories {
  display: block;
}
.lec-stories__lead {
  margin: min(3.3333333333em, 9vw) 0 min(4.4444444444em, 12vw);
}
.lec-stories__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 35px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: #fff;
}
.lec-stories__title strong {
  font-weight: 700;
  color: var(--lec-red-bright);
}
.lec-stories__desc {
  max-width: 46em;
  margin: 1em 0 0;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: -0.02em;
  color: var(--lec-muted);
}

/* 4. 조회수 그래프(네이버 통계 캡처를 다시 그림). 좌표는 lecture1.php의 lec_chart_geometry() */
.lec-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 1024px) {
  .lec-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.lec-chart {
  position: relative;
  margin: 0;
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2.4vw, 34px) clamp(18px, 2vw, 26px);
  border: 1px solid var(--lec-line);
  background: linear-gradient(180deg, #17181c 0%, #0c0c0e 100%);
  overflow: hidden;
  transition: border-color 0.3s;
}
/* 위쪽 빨간 선: 평소에는 짧고, 마우스를 올리면 카드 끝까지 그어진다 */
.lec-chart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  background: var(--lec-red);
  transition: width 0.6s var(--lec-ease);
}
.lec-chart:hover {
  border-color: rgba(194, 58, 49, 0.5);
}
.lec-chart:hover::before {
  width: 100%;
}
.lec-chart__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.lec-chart__label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.75);
}
.lec-chart__num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.lec-chart__num small {
  font-size: 0.42em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.lec-chart__num em {
  align-self: center;
  margin-left: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(224, 71, 61, 0.6);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--lec-red-bright);
}
.lec-chart__plot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lec-chart__grid {
  stroke: rgba(255, 255, 255, 0.1);
  stroke-dasharray: 4 6;
}
.lec-chart__base {
  stroke: rgba(255, 255, 255, 0.25);
}
.lec-chart__line {
  fill: none;
  stroke: var(--lec-red-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lec-chart__dot {
  fill: #fff;
  stroke: var(--lec-red-bright);
  stroke-width: 3;
}
.lec-chart__ring {
  fill: none;
  stroke: var(--lec-red-bright);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
/* 달 이름. 그래프 점과 같은 13칸이다. 좁은 화면은 한 달씩 건너뛴다(처음·마지막 달은 남김) */
.lec-chart__x {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}
.lec-chart__x li {
  white-space: nowrap;
}
.lec-chart__x li:last-child {
  font-weight: 700;
  color: #fff;
}
@media (max-width: 640px) {
  .lec-chart__x li:nth-child(even) {
    visibility: hidden;
  }
}
/* 그래프 등장: 선이 왼쪽부터 그려지고 → 아래가 채워지고 → 최고치 점이 나타나 맥박처럼 퍼진다 */
.lec-anim .lec-chart__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.3s;
}
.lec-anim .lec-chart__area {
  opacity: 0;
  transition: opacity 0.9s ease 1.4s;
}
.lec-anim .lec-chart__dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.95s;
}
.lec-anim .lec-chart.is-in .lec-chart__line { stroke-dashoffset: 0; }
.lec-anim .lec-chart.is-in .lec-chart__area { opacity: 1; }
.lec-anim .lec-chart.is-in .lec-chart__dot { transform: scale(1); }
.lec-anim .lec-chart.is-in .lec-chart__ring { animation: lec-pulse 2s ease-out 2.3s infinite; }
@keyframes lec-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* 4. 카카오톡 대화: 캡처 1장(577×338, 대화 2개가 붙어 있음)을 반씩 잘라 휴대폰 카드 2개로 보인다.
   카드 비율은 대화 하나(285×338), 이미지는 카드 폭의 577/285배로 늘려 왼쪽·오른쪽 끝에 붙인다 */
.lec-chats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(72px, 9vw, 130px);
}
@media (max-width: 1024px) {
  .lec-chats {
    grid-template-columns: minmax(0, 1fr);
  }
}
.lec-chats__eyebrow {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lec-red-bright);
}
.lec-chats__quote {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: #fff;
}
.lec-chats__quote strong {
  font-weight: 700;
  color: var(--lec-red-bright);
}
.lec-chats__note {
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}
.lec-chats__phones {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 8px 0 36px;
}
.lec-phone {
  --lec-r: 0deg;
  --lec-y: 0px;
  position: relative;
  flex: none;
  width: min(46%, 270px);
  aspect-ratio: 285 / 338;
  margin: 0;
  border: 6px solid #26272c;
  border-radius: 22px;
  background: #9db0c5;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: rotate(var(--lec-r)) translateY(var(--lec-y));
}
.lec-phone--a { --lec-r: -3deg; }
.lec-phone--b { --lec-r: 3deg; --lec-y: 28px; }
.lec .lec-phone img {
  position: absolute;
  top: 0;
  width: 202.4561403509%;
  max-width: none;
  height: 100%;
}
.lec-phone--a img { left: 0; }
.lec .lec-phone--b img { right: 0; left: auto; }
/* 그래프 아래(카톡·오프라인)는 움직임을 덜어 블록째 한 번만 떠오르고(lecture.js), 마우스 효과는 두지 않는다 */

/* 오프라인 강의 안내: 왼쪽 제목 + 특징 3줄, 오른쪽 강의 사진. PC 두 칸, 1024px 이하 한 칸 */
.lec-offline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(72px, 9vw, 130px);
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--lec-line);
}
@media (max-width: 1024px) {
  .lec-offline {
    grid-template-columns: minmax(0, 1fr);
  }
}
.lec-offline__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--lec-red-bright);
}
/* 유튜브 페이지 소제목(.yt-kicker)처럼 앞에 빨간 선 */
.lec-offline__eyebrow::before {
  content: "";
  flex: 0 0 32px;
  height: 2px;
  background: var(--lec-red);
}
.lec-offline__title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: #fff;
}
.lec-offline__title strong {
  font-weight: 700;
  color: var(--lec-red-bright);
}
.lec-offline__points {
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lec-line);
  counter-reset: lec-point;
}
/* 특징 한 줄: 번호 + 굵은 이름 + 설명 */
.lec-offline__points li {
  counter-increment: lec-point;
  display: grid;
  grid-template-columns: 2.4em 7.5em minmax(0, 1fr);
  align-items: baseline;
  gap: 0 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--lec-line);
}
.lec-offline__points li::before {
  content: "0" counter(lec-point);
  font-size: 14px;
  font-weight: 600;
  color: var(--lec-red-bright);
}
.lec-offline__points strong {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 600;
  color: #fff;
}
.lec-offline__points span {
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--lec-muted);
}
@media (max-width: 640px) {
  .lec-offline__points li {
    grid-template-columns: 2.4em minmax(0, 1fr);
    row-gap: 6px;
  }
  .lec-offline__points span {
    grid-column: 2;
  }
}
/* 강의 사진: 테마의 .sub-01-02-05 폭 지정을 풀어 칸에 맞춘다 */
.lec .lec-offline .lec-offline__photo {
  flex: none;
  width: auto;
  max-width: none;
  margin: 0;
}

/* ───────── 강의 장점: 번호 카드 2×2 ───────── */
/* 테마 섹션과 같은 여백(style.css의 .sub-01-04 padding·좌우 여백) */
.lec-sec {
  padding: min(8.3333333333em, 23.4375vw) max(min(3.3vw, 3.3333333333em), calc(50vw - 660px)) min(8.8888888889em, 25vw);
  background-color: #000;
  color: #fff;
}
.lec-adv__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: min(3.4em, 10vw) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .lec-adv__list {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 마우스를 올리면 위쪽 빨간 선이 왼쪽부터 그어지고 테두리가 붉어진다(첫 버전 효과, 2026-10-21 사용자 요청으로 되돌림) */
.lec-adv__item {
  position: relative;
  padding: clamp(26px, 3vw, 44px);
  border: 1px solid var(--lec-line);
  border-radius: 6px;
  background: #111216;
  overflow: hidden;
  transition: border-color 0.3s, background-color 0.3s;
}
.lec-adv__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--lec-red);
  transition: width 0.5s var(--lec-ease);
}
.lec-adv__item:hover {
  border-color: rgba(194, 58, 49, 0.45);
  background: #15161b;
}
.lec-adv__item:hover::before {
  width: 100%;
}
.lec-adv__num {
  display: block;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lec-red-bright);
}
.lec-adv__title {
  margin: 0 0 14px;
  font-size: clamp(19px, 1.75vw, 25px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: #fff;
}
.lec-adv__title strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(194, 58, 49, 0.55) 62%);
}
.lec-adv__desc {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: -0.02em;
  color: var(--lec-muted);
}

/* ───────── 그 밖의 섹션 ───────── */
/* 후기 카드: 테마는 PC에서 마우스를 올리면 칸 전체가 흰색으로 바뀐다(전환 없음).
   칸 대신 말풍선만 흰색으로 채우고 꼬리도 같이 바꾼다. 글자는 검정, 이름은 테마의 회색, 별은 빨간 그대로 */
.lec .sub-01-03-02-01-02 {
  line-height: 1.75;
}
.lec .sub-01-03-02 .swiper:not(.swiper-initialized) .swiper-slide:hover {
  background-color: transparent;
}
.lec .sub-01-03-02 .swiper-slide div {
  transition: background-color 0.3s ease;
}
.lec .sub-01-03-02 .swiper-slide p,
.lec .sub-01-03-02 .swiper-slide span {
  transition: color 0.3s ease;
}
.lec .sub-01-03-02 .swiper-slide:hover div {
  background-color: #fff;
}
.lec .sub-01-03-02 .swiper-slide:hover p {
  color: #000;
}
.lec .sub-01-03-02 .swiper-slide:hover .sub-01-03-02-03 {
  color: #585858;
}

/* 강의 신청 버튼: 마우스를 올리면 빨갛게 채워지고 화살표가 오른쪽 위로 살짝 움직인다(유튜브 .yt-btn).
   마감된 버튼(disabled)은 테마의 가림막이 있어 그대로 둔다. 등장 효과(.lec-reveal)의 전환도 함께 둔다 */
.lec .sub-01-10-01 {
  transition: opacity 0.8s ease, transform 0.8s var(--lec-ease), background-color 0.3s, color 0.3s;
}
.lec .sub-01-10-01::after {
  transition: transform 0.25s var(--lec-ease), filter 0.25s;
}
.lec .sub-01-10-01:not([disabled]):hover {
  background-color: var(--lec-red);
  color: #fff;
}
.lec .sub-01-10-01:not([disabled]):hover::after {
  filter: brightness(0) invert(1);
  transform: translate(3px, -3px);
}

/* 대표 소개(메인과 같은 .main-03-03 부품): 제목과 간격, 경력 아래 작은 설명 */
.lec .sub-01-05 .main-03-03 {
  margin-top: min(3.3333333333em, 9vw);
}
.lec .main-03-03-03-02 li + li {
  margin-top: 0.15em;
}
.lec .main-03-03-03-02 small {
  display: block;
  font-size: 0.82em;
  color: #888;
}

/* 추천 대상 말풍선: 높이를 고정하면 휴대폰에서 두 줄이 넘칠 수 있어 내용만큼 늘린다.
   테마의 빨간 채움에 전환을 붙이고 꼬리 색도 같이 바뀌게 한다 */
.lec .sub-01-06-03 li {
  height: auto;
  min-height: 3.85em;
  line-height: 1.5;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.lec .sub-01-06-03 li::before {
  transition: border-color 0.3s ease;
}
.lec .sub-01-06-03 li:hover {
  border-color: var(--lec-red);
}

/* 커리큘럼: 설명 글자색. 마우스를 올리면 제목 아래 빨간 선이 가운데에서 양쪽으로 그어진다 */
.lec .sub-01-07-03 li p,
.lec .sub-01-07-05 li p {
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}
.lec .sub-01-07-03 li h4,
.lec .sub-01-07-05 li h4 {
  padding-bottom: 6px;
  background: linear-gradient(var(--lec-red), var(--lec-red)) no-repeat center bottom / 0 2px;
  transition: background-size 0.4s var(--lec-ease), color 0.3s;
}
.lec .sub-01-07-03 li:hover h4,
.lec .sub-01-07-05 li:hover h4 {
  background-size: 100% 2px;
  color: #fff;
}

/* 자주 묻는 질문: 둥근 상자에 마우스를 올리면 옅은 그림자(첫 버전 효과, 2026-10-21 사용자 요청으로 되돌림) */
.lec .sub-01-08-01 > div {
  border-radius: 6px;
  transition: box-shadow 0.3s;
}
.lec .sub-01-08-01 > div:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.lec .sub-01-08-01 dd {
  line-height: 1.8;
  color: #333;
}

/* 강의로 알게 되는 것: 마우스를 올리면 설명 글자만 빨갛게 바뀐다 */
.lec .sub-01-09-02 figcaption {
  line-height: 1.6;
  transition: color 0.3s;
}
.lec .sub-01-09-02 figure:hover figcaption {
  color: var(--lec-red);
}

/* 6. 정가: 테마의 원 그림(sub_01_09_circle.png) 대신 어두운 원. 바깥으로 회색 링 3겹이 차례로 퍼진다.
   링은 원(dl) 바로 뒤의 .lec-price__rings(lecture1.php)이고, 원이 나타난 뒤(.active)에만 돈다.
   숫자는 테마가 선언해 둔 세리프 'hahmlet'(theme/ybusiness_1/head.sub.php)을 굵게 쓰고, "만원"만 빨간색.
   이 글꼴 파일은 이름과 달리 굵기 축이 없는 보통 굵기 하나라, 굵기는 브라우저가 합성한다 */
.lec-price {
  position: relative;
  isolation: isolate;
  width: fit-content;
  margin: 0 auto;
}
.lec .sub-01-09-03 {
  position: relative;
  isolation: isolate;
  background: none;
}
.lec .sub-01-09-03::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid rgba(224, 71, 61, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2a2b31 0%, #121316 62%, #0a0a0c 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}
.lec-price__rings {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.lec-price__rings i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(110, 112, 120, 0.9);
  border-radius: 50%;
  opacity: 0;
}
.lec-anim .sub-01-09-03.active + .lec-price__rings i {
  animation: lec-price-ring 3.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.lec-anim .sub-01-09-03.active + .lec-price__rings i:nth-child(1) { animation-delay: 0.6s; }
.lec-anim .sub-01-09-03.active + .lec-price__rings i:nth-child(2) { animation-delay: 1.8s; }
.lec-anim .sub-01-09-03.active + .lec-price__rings i:nth-child(3) { animation-delay: 3s; }
@keyframes lec-price-ring {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}
.lec .sub-01-09-03 dt {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}
.lec .sub-01-09-03-01,
.lec .sub-01-09-03-01-02 {
  align-items: baseline;
}
.lec .sub-01-09-03-01-01 {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}
.lec .sub-01-09-03-01-02 span {
  font-family: hahmlet, "Times New Roman", serif;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}
.lec .sub-01-09-03-01-02 small {
  font-weight: 600;
  color: var(--lec-red-bright);
}