/*
 * 정영탁 수학 최종본 2차 수정(v2) 스타일 — 2026-11-13 사용자가 원본과 비교한 뒤 최종본으로 고른 내용.
 * overrides/final-v2.cjs가 최종 페이지에 연결하고, build.cjs가 site/<assets>/final-v2/로 복사한다.
 * 문구·마크업 변경은 overrides/final-v2.cjs에 있다. 번호가 빈 항목(4, 6)은 넣었다가 뺀 것이다.
 *
 * 1. 파란색 통일   2. 첫 화면 전국 수석 한 줄 + 상담 버튼   3. 스크롤 진행 표시   5. 후기 결과 글자 키우기
 * 7. 휴대폰 첫 화면 "아래로" 안내   8. 상담 카드 안내 문장   9. 강의력 소개 문구 키우기
 * 10. 고정 구간의 부드러운 전환   11. 학생 그림 속 낱말 가운데 맞춤
 */

/* ── 1. 파란색 통일: 버튼·링크·강조 글자를 강의력 배경과 같은 #2450dd 한 색으로 ── */
body.jyt-v2 {
  --jyt-brand: #2450dd;
  --jyt-brand-hover: #1d42bd;
  --jyt-brand-pale: #e9eefc;
  --text-accent: #2450dd !important;
}
body.jyt-v2 .hero-eyebrow,
body.jyt-v2 #hero-title em { color: var(--jyt-brand) !important; }
body.jyt-v2 .primary-button { background: var(--jyt-brand) !important; }
body.jyt-v2 .primary-button:hover { background: var(--jyt-brand-hover) !important; }
body.jyt-v2 .jyt-review-link,
body.jyt-v2 .jyt-review-link span { color: var(--jyt-brand) !important; }
body.jyt-v2 #contact .contact-number strong { color: var(--jyt-brand) !important; }
body.jyt-v2 #winter .grade-winter-term > p,
body.jyt-v2 #winter .grade-course-slot { color: var(--jyt-brand) !important; }
body.jyt-v2 #winter .grade-tabs button[aria-selected="true"] { background: var(--jyt-brand) !important; }
body.jyt-v2 #winter .grade-tabs button[aria-selected="true"]:hover { background: var(--jyt-brand-hover) !important; }

/* ── 2. 첫 화면: 전국 수석 한 줄 + 상담 버튼 ── */
.jyt-hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: var(--jyt-brand-pale, #e9eefc);
  color: #333d4b;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.jyt-hero-proof b { color: var(--jyt-brand, #2450dd); font-weight: 700; }
.jyt-hero-proof span::before { content: '·'; margin-right: 8px; color: #8b95a1; }
.jyt-hero-proof i { font-style: normal; color: var(--jyt-brand, #2450dd); }
.jyt-hero-proof:hover b { text-decoration: underline; text-underline-offset: 3px; }
.jyt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.jyt-hero-consult {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 13px 22px;
  border-radius: 14px;
  background: var(--jyt-brand-pale, #e9eefc);
  color: var(--jyt-brand, #2450dd);
  font-size: 17px;
  font-weight: 650;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.jyt-hero-consult:hover { background: #dbe4fb; transform: translateY(-2px); }
@media (max-width: 700px) {
  .jyt-hero-proof { margin-bottom: 18px; padding: 7px 12px 7px 11px; font-size: 13.5px; }
  .jyt-hero-consult { min-height: 48px; padding: 11px 16px; gap: 10px; font-size: 15px; }
}

/* ── 3. 스크롤 진행 표시: 화면이 고정된 구간에서 내린 만큼 선이 차오른다 ── */
/* v2.js가 data-*-progress 값을 --jyt-seq(0~1)로 옮긴다. 고정되지 않을 때(reduced-motion 포함)는 표시하지 않는다. */
body.jyt-v2 #teaching.is-pinned .teaching-choices { position: relative; }
body.jyt-v2 #teaching.is-pinned .teaching-choices::after,
body.jyt-v2 #care.is-pinned .care-chapters::before {
  content: '';
  position: absolute;
  left: 0;
  width: min(100%, 320px);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #fff calc(var(--jyt-seq, 0) * 100%), rgba(255, 255, 255, .26) 0);
  pointer-events: none;
}
body.jyt-v2 #teaching.is-pinned .teaching-choices::after { top: calc(100% + 10px); }
body.jyt-v2 #care.is-pinned .care-chapters::before { top: -14px; }
@media (max-width: 760px) {
  /* 휴대폰: "스크롤 ↓" 안내를 함께 두고, 첫 내용을 지나면 흐려진다 */
  /* 강의력: 작은 휴대폰에서는 탭 바로 아래가 후기 칸이라, 선은 탭 위 틈에 두고 안내는 화면 오른쪽 아래에 둔다 */
  body.jyt-v2 #teaching.is-pinned .teaching-choices::after { left: 4px; right: 4px; width: auto; top: auto; bottom: calc(100% + 2.5px); }
  body.jyt-v2 #care.is-pinned .care-chapters::before { width: auto; right: 66px; top: -11px; }
  body.jyt-v2 #teaching.is-pinned .teaching-stage::after,
  body.jyt-v2 #care.is-pinned .care-chapters::after {
    content: '스크롤 ↓';
    position: absolute;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .78);
    pointer-events: none;
    transition: opacity .3s;
  }
  body.jyt-v2 #teaching.is-pinned .teaching-stage::after { right: 2px; bottom: 10px; }
  body.jyt-v2 #care.is-pinned .care-chapters::after { right: 0; top: -15px; }
  body.jyt-v2 #teaching[data-jyt-seq-started] .teaching-stage::after,
  body.jyt-v2 #care[data-jyt-seq-started] .care-chapters::after { opacity: .28; }
}

/* ── 4. (뺌) 강의력 구간 맨 위 수업 사진 — 2026-11-13 사용자 요청으로 제거 ── */

/* ── 5. 후기 결과(서울대 의대, 3등급 → 1등)를 더 크게 ── */
@media (min-width: 761px) {
  body.jyt-v2 .teaching-showcase .story-outcome { font-size: 40px !important; line-height: 1.25 !important; }
}
@media (max-width: 760px) {
  body.jyt-v2 .teaching-showcase .story-outcome { font-size: 27px !important; line-height: 1.2 !important; }
}

/* ── 6. (되돌림) 순서는 최종본 그대로: 시간표 → 상담 신청 → 수업 사진 엔딩 → 문의 ── */

/* ── 8. 상담 카드: 제목을 빼고 안내 문장("학교와 학년, 궁금한 내용을 남겨주세요. …")만 남김 ── */
/* 작은 회색 보조 글씨였던 문장이 카드의 유일한 글이 됐으므로 크기와 색을 본문 제목 수준으로 올린다. */
body.jyt-v2 #jyt-consultation-designs .jyt-integrated .jyt-card .jyt-description {
  margin-top: 0;
  color: #191f28;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: -.02em;
  word-break: keep-all;
  text-wrap: balance;
}
@media (max-width: 860px) {
  body.jyt-v2 #jyt-consultation-designs .jyt-integrated .jyt-card .jyt-description { font-size: 21px; }
}
@media (max-width: 600px) {
  body.jyt-v2 #jyt-consultation-designs .jyt-integrated .jyt-card .jyt-description { font-size: 18px; }
}

/* ── 9. 강의력 소개 문구("반포·대치에서 10년 이상, …") 글자 키우기 ── */
/* 휴대폰 14px → 16px(문구가 길어져 세 줄로 끊음), PC 20px → 22px, 화면이 낮은 PC 16px → 18px */
.jyt-intro-break { display: none; }
@media (min-width: 761px) {
  body.jyt-v2 #teaching .proof-intro { font-size: 22px; line-height: 1.6; text-wrap: balance; }
  body.jyt-v2 #teaching.is-compact .proof-intro { font-size: 18px; line-height: 1.55; }
}
@media (max-width: 760px) {
  .jyt-intro-break { display: inline; }
  body.jyt-v2 #teaching .proof-intro,
  body.jyt-v2 #teaching.is-enhanced .proof-intro { font-size: 16px; line-height: 1.5; font-weight: 500; }
}

/* ── 10. 화면이 고정되는 구간(강의력, 앱 관리)의 내용 전환을 부드럽게 ── */
/* 원래는 내용이 스크롤 위치에만 묶여 있어 100px 남짓 내리는 사이에
   [앞 내용 사라짐 → 아무것도 없는 순간 → 다음 내용 나타남] 순서로 바뀌었다.
   손가락으로 한 번 쓸면 0.1초도 안 걸려서 툭 끊겨 보인다.
   여기서는 바뀌는 순간(is-active)에 맞춰 약 0.6초 동안 앞 내용이 위로 사라지고
   다음 내용이 아래에서 올라오며 겹쳐서 바뀐다. 스크롤 속도와 상관없이 같은 속도로 움직인다.
   고정되지 않는 경우(모션 줄이기 설정 등)에는 적용하지 않는다. */
body.jyt-v2 #teaching.is-enhanced.is-pinned .teaching-panel,
body.jyt-v2 #teaching.is-enhanced.is-pinned .teaching-quote,
body.jyt-v2 #care.is-enhanced.is-pinned .care-screen,
body.jyt-v2 #care.is-enhanced.is-pinned .care-chapter p {
  opacity: 0 !important;
  visibility: hidden !important; /* 스크롤 스크립트가 넣는 inline visibility 대신 is-active로 판단한다 */
  clip-path: none !important;
  transform: translate3d(0, -14px, 0) !important; /* 지나간 내용은 위로 */
  transition: opacity .34s ease-out, transform .55s cubic-bezier(.3, 0, .3, 1), visibility 0s linear .36s !important;
}
/* 아직 안 본 내용은 아래에서 기다린다 */
body.jyt-v2 #teaching.is-enhanced.is-pinned .teaching-panel.is-active ~ .teaching-panel,
body.jyt-v2 #teaching.is-enhanced.is-pinned .teaching-quote.is-active ~ .teaching-quote,
body.jyt-v2 #care.is-enhanced.is-pinned .care-screen.is-active ~ .care-screen,
body.jyt-v2 #care.is-enhanced.is-pinned .care-chapter.is-active ~ .care-chapter p {
  transform: translate3d(0, 14px, 0) !important;
}
/* 지금 보는 내용 */
body.jyt-v2 #teaching.is-enhanced.is-pinned .teaching-panel.is-active,
body.jyt-v2 #teaching.is-enhanced.is-pinned .teaching-quote.is-active,
body.jyt-v2 #care.is-enhanced.is-pinned .care-screen.is-active,
body.jyt-v2 #care.is-enhanced.is-pinned .care-chapter.is-active p {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: opacity .5s ease .06s, transform .6s cubic-bezier(.2, .75, .25, 1) .06s, visibility 0s linear 0s !important;
}
/* 탭 표시도 툭 바뀌지 않게 */
body.jyt-v2 #teaching.is-pinned .teaching-choice { transition: background-color .35s ease, color .3s ease, box-shadow .35s ease; }
/* PC: 앱 관리 구간의 항목 줄이 위아래로 자리를 옮길 때도 미끄러지듯 움직인다 */
@media (min-width: 761px) {
  body.jyt-v2 #care.is-enhanced.is-pinned .care-chapter { transition: transform .55s cubic-bezier(.3, 0, .3, 1); }
}

/* ── 11. 강의력 학생 그림 속 낱말(인식·분석·체득 등)을 몸통 한가운데로 ── */
/* 낱말은 그림 칸의 가로 가운데에 놓이는데, 세 그림의 몸통 중심은 칸 중심과 조금씩 다르다
   (724px 그림 기준 상문고 +39px, 서울고 −10px, 세화여고 +4.5px). 그래서 상문고는 낱말이 왼쪽으로 쏠려 보였다.
   그림은 칸을 꽉 채우도록 확대되므로(slice) 어긋난 거리는 칸의 긴 변에 비례한다 → cqmax 단위로 보정한다.
   이 단위를 모르는 오래된 브라우저에서는 이 규칙이 무시되어 예전처럼 칸 가운데에 놓인다. */
body.jyt-v2 #teaching .student-art { container-type: size; }
body.jyt-v2 #teaching #teaching-panel-0 .student-art .word-stage { left: calc(50% + 5.39cqmax) !important; }
body.jyt-v2 #teaching #teaching-panel-1 .student-art .word-stage { left: calc(50% - 1.38cqmax) !important; }
body.jyt-v2 #teaching #teaching-panel-2 .student-art .word-stage { left: calc(50% + 0.62cqmax) !important; }

/* ── 7. 휴대폰 첫 화면: 처음 볼 때만 뜨는 "아래로" 안내 ── */
/* 첫 화면이 멈춘 화면처럼 보이지 않도록, 왼쪽 아래(글 시작선, 사진 속 인물을 가리지 않는 자리)에 둔다. */
/* v2.js가 맨 위에 있을 때만 보여 주고, 처음 스크롤하면 없앤다. 누르면 다음 섹션으로 내려간다. */
.jyt-scroll-cue { display: none; }
@media (max-width: 700px) {
  .jyt-scroll-cue {
    position: fixed;
    z-index: 40;
    left: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 16px 8px 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 8px 24px rgba(25, 31, 40, .14), 0 0 0 1px rgba(25, 31, 40, .06);
    color: #333d4b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s;
  }
  .jyt-scroll-cue.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .jyt-scroll-cue svg { color: var(--jyt-brand, #2450dd); overflow: visible; }
  .jyt-scroll-cue svg path { opacity: .9; }
  .jyt-scroll-cue.is-visible svg path { animation: jyt-cue-chevron 1.5s cubic-bezier(.45, 0, .3, 1) infinite; }
  .jyt-scroll-cue.is-visible svg path:nth-child(2) { animation-delay: .18s; }
  .jyt-scroll-cue.is-paused svg path { animation-play-state: paused; }
  .jyt-scroll-cue:focus-visible { outline: 2px solid var(--jyt-brand, #2450dd); outline-offset: 3px; }
}
@keyframes jyt-cue-chevron {
  0% { opacity: .18; transform: translateY(-3px); }
  45% { opacity: 1; transform: translateY(0); }
  100% { opacity: .18; transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .jyt-hero-consult { transition: none; }
  .jyt-hero-consult:hover { transform: none; }
  /* 모션 줄이기: 안내는 보여 주되 움직이지 않는다 */
  .jyt-scroll-cue { transition: none !important; transform: none !important; }
  .jyt-scroll-cue svg path { animation: none !important; }
}