@charset "utf-8";
/* ============================================================
   WORKNEST — 한 화면씩 넘기는 「풀페이지」 (공용 · js/fullpage.js 와 짝)

   메인 화면(index.php)은 아직 css/home.css 에 같은 규칙을 따로 갖고 있다.
   새로 쓰는 화면은 이 파일을 쓴다. 지금 쓰는 곳: 레슨 신청(lesson.php — MATE).

   ┌ .fp              바깥 틀. 풀페이지일 때 화면에 고정된다 (--fp-accent: 이 화면의 색)
   │ └ .fp-track      칸들을 세로로 이어 붙인 띠. 통째로 위아래로 움직인다
   │    └ .fp-panel   한 화면 (--i 에 자기 번호). 첫 칸(영상)은 .is-hero
   └ .fp-dots         오른쪽 점

   자바스크립트가 없거나 휴대폰이면 body 에 .fp-on 이 붙지 않는다.
   그때는 아래 규칙이 대부분 꺼지고 평범하게 아래로 이어지는 화면이 된다.
   그라데이션은 쓰지 않는다 (지침/웹디자인가이드.md 3-6).
   ============================================================ */

:root {
  --fp-dur:  .95s;
  --fp-ease: cubic-bezier(.62,.03,.2,1);
}

/* ── 틀 ───────────────────────────────────────────────────── */
.fp { position: relative; }
.fp-panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  --d: calc(var(--i) - var(--cur));
}
.fp-inner { position: relative; z-index: 2; width: 100%; }

body.fp-on { overflow: hidden; }
body.fp-on .fp {
  position: fixed; inset: 0; z-index: 1;
  overflow: hidden;
}
body.fp-on .fp-track {
  height: 100%;
  /* 올리는 거리는 js/fullpage.js 가 칸 높이를 재어 적는다 (맨 끝 맺음말 칸은 제 높이만큼만) */
  transition: transform var(--fp-dur) var(--fp-ease);
  will-change: transform;
}
body.fp-on .fp-panel { height: 100vh; min-height: 0; overflow: hidden; }
/* 화면보다 내용이 길면 그 칸 안에서만 굴러간다 */
body.fp-on .fp-inner {
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: calc(var(--header-h) + 14px) 24px;
  scrollbar-width: none;
}
body.fp-on .fp-inner::-webkit-scrollbar { display: none; }

/* 첫 칸 — 맨 위 영상(inc/page_hero.php). 칸을 꽉 채운다.
   (영상 칸은 원래 머리말 높이만큼 위로 당겨져 있는데, 풀페이지 틀은 이미 화면 맨 위부터 시작한다) */
body.fp-on .fp-panel.is-hero { justify-content: flex-start; }
body.fp-on .fp-panel.is-hero > .ph-hero { flex: 1 1 auto; margin-top: 0; min-height: 0; height: 100%; }

/* ── 칸 안의 글이 떠오르는 효과 ───────────────────────────── */
.fp.fp-ready [data-rise] {   /* 스크립트가 돌 때만 숨겼다가 띄운다 — 스크립트가 없으면 그대로 보인다 */
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fp-panel.is-on [data-rise] { opacity: 1; transform: none; }
.fp-panel.is-on [data-rise="1"] { transition-delay: .10s; }
.fp-panel.is-on [data-rise="2"] { transition-delay: .20s; }
.fp-panel.is-on [data-rise="3"] { transition-delay: .30s; }
.fp-panel.is-on [data-rise="4"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .fp.fp-ready [data-rise] { opacity: 1; transform: none; transition: none; }
  body.fp-on .fp-track { transition-duration: .01s; }
}

/* ── 오른쪽 점 ────────────────────────────────────────────── */
.fp-dots {
  position: absolute; z-index: 30;
  right: 26px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
}
.fp-dots[hidden] { display: none; }
.fp-dot {
  position: relative;
  width: 10px; height: 10px; padding: 0;
  border-radius: 50%;
  background: rgba(20,26,38,.22);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.fp-dot:hover { background: rgba(20,26,38,.44); transform: scale(1.2); }
.fp-dot.is-on { background: var(--fp-accent, var(--brand)); transform: scale(1.35); }
.fp-dot::after {                          /* 점 옆에 이름 */
  content: attr(data-label);
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(17,24,39,.88); color: #fff;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease);
}
.fp-dot:hover::after, .fp-dot:focus-visible::after { opacity: 1; }

/* ── 마지막 칸 — 맺음말(footer)이 이 칸 아래로 옮겨진다 ──────── */
.fp-foot { position: relative; z-index: 2; }
/* 맨 끝 맺음말 칸(.is-foot) — 한 화면이 아니라 맺음말 높이만큼만. 마지막 칸 다음에 아래에서 올라온다 */
body.fp-on .fp-panel.is-foot { height: auto; display: block; overflow: visible; }
.fp-panel.is-foot .site-footer { margin-top: 0; }
/* (예전처럼 마지막 칸 안에 맺음말을 함께 넣을 때 — .fp-last 안의 .fp-foot) */
body.fp-on .fp-last { justify-content: flex-start; }
body.fp-on .fp-last .fp-inner { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; max-height: none; }
body.fp-on .fp-last .fp-foot .site-footer { margin-top: 0; padding: 34px 0 26px; }

/* ── 머리말 아래 색 줄 (js/fullpage.js 가 만든다) ─────────────
   영상 칸이 아닌 칸에 들어오면 이 화면의 색(--fp-accent)으로 왼쪽에서 오른쪽으로 그어진다. 단색. */
.hd-line {
  position: absolute; left: 0; right: 0; top: 100%;
  height: 3px;
  background: var(--hd-line, var(--brand));
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.hd-line.is-on { transform: scaleX(1); transition: transform 1s var(--ease) .2s; }
@media (prefers-reduced-motion: reduce) { .hd-line.is-on { transition: none; } }

@media (max-width: 980px) {
  .fp-dots { display: none; }
}