/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-bg:    #deeeff;
  --blue-mid:   #c4dfff;
  --blue-light: #eaf4ff;
  --blue-border: #a8cff0;
  --accent:  #2979ff;
  --text:    #1a2a4a;
  --sub:     #4a6080;
  --shadow:  0 8px 32px rgba(30,90,180,0.13);
  --radius:  28px;
}

/* ============================================================
   ROOT LAYOUT  ← 핵심: fixed 완전 제거, flex 컬럼으로 전체 높이 잡기
   ============================================================ */
html {
  height: 100%;
  /* iframe 안에서도 스크롤 차단 */
  overflow: hidden;
}

body {
  height: 100%;
  min-height: 100dvh;          /* dvh: iframe 뷰포트 정확히 반영 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Nunito', 'Apple SD Gothic Neo', sans-serif;
  background: var(--blue-bg);
  color: var(--text);
  /* 배경이 반드시 보이도록 */
  background-attachment: local;
}

/* ============================================================
   TOP BAR  ← position:fixed 제거 → flex 아이템
   ============================================================ */
.top-bar {
  flex: 0 0 auto;              /* 높이 고정 */
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(196,223,255,0.95);
  border-bottom: 1.5px solid var(--blue-border);
  z-index: 10;
}

.brand {
  font-weight: 900;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: 1px;
}

.progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-track {
  width: 150px;
  height: 7px;
  background: var(--blue-mid);
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #2979ff, #82b1ff);
  width: 20%;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}

.progress-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--sub);
  min-width: 34px;
}

/* ============================================================
   GUIDE CONTAINER  ← flex:1 → 남은 공간 전부 차지
   ============================================================ */
.guide-container {
  flex: 1 1 0;                 /* 남은 세로 공간 전부 */
  position: relative;
  overflow: hidden;
  min-height: 0;               /* flex 자식 overflow 허용 */
}

/* ============================================================
   PAGES
   ============================================================ */
.guide-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;      /* 콘텐츠 영역 + 하단 로고 footer 세로 배치 */
  padding: 16px 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition:
    opacity  0.42s cubic-bezier(0.4,0,0.2,1),
    transform 0.42s cubic-bezier(0.4,0,0.2,1),
    visibility 0s linear 0.42s;
  pointer-events: none;
}

.guide-page.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: all;
  transition:
    opacity  0.42s cubic-bezier(0.4,0,0.2,1),
    transform 0.42s cubic-bezier(0.4,0,0.2,1),
    visibility 0s linear 0s;
}

.guide-page.exit-left {
  opacity: 0;
  transform: translateX(-60px);
  visibility: visible;
  pointer-events: none;
  transition:
    opacity  0.42s cubic-bezier(0.4,0,0.2,1),
    transform 0.42s cubic-bezier(0.4,0,0.2,1);
}

.guide-page.exit-right {
  opacity: 0;
  transform: translateX(60px);
  visibility: visible;
  pointer-events: none;
  transition:
    opacity  0.42s cubic-bezier(0.4,0,0.2,1),
    transform 0.42s cubic-bezier(0.4,0,0.2,1);
}

.guide-page.enter-right {
  opacity: 0;
  transform: translateX(60px);
  visibility: visible;
}

.guide-page.enter-left {
  opacity: 0;
  transform: translateX(-60px);
  visibility: visible;
}

/* ============================================================
   PAGE BODY / FOOTER  ← 콘텐츠 영역과 로고 footer를 세로로 분리
   (position:fixed/absolute 오버레이 아님 – 정상 flex 흐름 내 배치)
   ============================================================ */
.page-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PAGE 6은 내부 콘텐츠가 세로 전체를 채워야 하며, 콘텐츠가 길어지면
   세로 스크롤이 자연스럽게 발생하도록 stretch + flex-start 정렬 */
#page6 .page-body {
  align-items: stretch;
  justify-content: flex-start;
}

/* PAGE 3: 기존 안내 + 신규 "감지 지연 시간 설정" 카드가 추가되어
   콘텐츠 총 높이가 늘어남 → 내부 스크롤 컨테이너로 감싸 레이아웃 보존 */
#page3 .page-body {
  align-items: stretch;
  justify-content: flex-start;
}

.page3-stack {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 4px 2px 6px;
}

.page-footer {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* 로고를 페이지 컨테이너의 우측 끝에 배치 */
  padding: 4px 4px 0;          /* 안전 여백(Safe Area) — 콘텐츠 영역을 침범하지 않는 최소 여백 */
}

.page-footer-logo {
  display: block;
  width: 66px;                 /* 기존 132px의 약 50% 축소 */
  max-width: 75px;
  height: auto;                 /* 비율 유지 */
  object-fit: contain;
  opacity: 0.95;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .page-footer-logo { width: 56px; }
}

@media (max-width: 640px) {
  .page-footer      { padding-top: 3px; }
  .page-footer-logo { width: 46px; }
}

/* ============================================================
   PAGE INNER LAYOUT
   ============================================================ */
.page-inner {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
}

.page-inner.center-all {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

@media (max-width: 640px) {
  .page-inner { flex-direction: column; gap: 14px; }
}

/* ============================================================
   ILLUSTRATION AREA
   ============================================================ */
.illust-wrap {
  flex: 0 0 auto;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.illust-wrap--wide {
  width: 300px;
  height: 290px;
}

#page5 .illust-wrap--wide {
  width: 240px;
  height: 240px;
}

@media (max-width: 900px) {
  .illust-wrap       { width: 220px; height: 220px; }
  .illust-wrap--wide { width: 240px; height: 230px; }
  #page5 .illust-wrap--wide { width: 200px; height: 200px; }
}

@media (max-width: 640px) {
  .illust-wrap       { width: 180px; height: 180px; }
  .illust-wrap--wide { width: 190px; height: 185px; }
  #page5 .illust-wrap--wide { width: 170px; height: 170px; }
}

.illust {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #deeeff 0%, #c8e2ff 60%, #d6ecff 100%);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.illust--product {
  background: linear-gradient(145deg, #deeeff 0%, #c8e2ff 60%, #d6ecff 100%);
}

.svg-illust {
  width: 100%;
  height: 100%;
}

/* ============================================================
   PAGE CONTENT
   ============================================================ */
.page-content {
  flex: 1;
  min-width: 0;
}

.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 99px;
  background: rgba(41,121,255,0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 10px;
  border: 1.5px solid rgba(41,121,255,0.25);
}

.page-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 12px;
}

.done-title { color: #00b86b; font-size: clamp(24px, 3.5vw, 32px); }

.page-desc {
  font-size: clamp(14px, 1.8vw, 17px);
  color: var(--sub);
  line-height: 1.85;
  margin-bottom: 16px;
}

.page-desc strong { color: var(--text); font-weight: 800; }

.tip-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tip-list li {
  font-size: clamp(12px, 1.4vw, 15px);
  color: var(--sub);
  background: var(--blue-light);
  border-radius: 10px;
  padding: 8px 14px;
  border-left: 3.5px solid var(--blue-border);
}

.tip-list li.warn {
  background: #fff8ec;
  border-left-color: #ff9800;
  color: #7a4500;
  font-weight: 700;
}

.tip-list li.warn strong { color: #cc4e00; }

/* LED 강조 텍스트 */
.led-text {
  color: #ff1744;
  font-weight: 800;
  background: #fff0f2;
  padding: 2px 6px;
  border-radius: 5px;
  font-style: normal;
}

/* ============================================================
   PAGE 3 – 감지 지연 시간 설정 안내 카드 (신규 추가 섹션)
   기존 3페이지 콘텐츠(설치 위치 안내)는 그대로 유지되고,
   이 카드는 그 아래에 별도 섹션으로만 추가됩니다.
   ============================================================ */
.detect-delay-card {
  width: 100%;
  max-width: 820px;
  background: #fff;
  border-radius: var(--radius);
  padding: 22px 28px 26px;
  box-shadow: var(--shadow);
  border: 1.5px solid rgba(168,207,240,0.5);
  flex: 0 0 auto;
}

.detect-delay-card__head {
  text-align: left;
  margin-bottom: 8px;
}

.step-badge--delay {
  color: #7c6fff;
  background: rgba(124,111,255,0.12);
  border-color: rgba(124,111,255,0.28);
}

.detect-delay-card__title {
  font-size: clamp(19px, 2.4vw, 24px);
  margin-bottom: 0;
}

.detect-delay-card__desc {
  margin-top: 8px;
  margin-bottom: 18px;
}

/* ── 단계형(Step) UI ── */
.delay-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-bottom: 18px;
}

.delay-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--blue-light);
  border-radius: 14px;
  padding: 12px 16px;
  border-left: 3.5px solid var(--blue-border);
}

.delay-step__num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2979ff, #5c9eff);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(41,121,255,0.35);
}

.delay-step__body { min-width: 0; }

.delay-step__title {
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 3px;
}

.delay-step__desc {
  font-size: clamp(12px, 1.3vw, 14px);
  color: var(--sub);
  line-height: 1.6;
}

.delay-step-arrow {
  align-self: center;
  color: var(--blue-border);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  padding: 1px 0;
}

/* F / + / − 버튼 강조 배지 */
.key-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 7px;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  vertical-align: -4px;
}

.key-badge--f     { background: #444454; }
.key-badge--plus  { background: #00b86b; }
.key-badge--minus { background: #ff9800; }

/* 0초~1800초 설정 가능 강조 박스 */
.delay-range-highlight {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eef4ff;
  border: 1.5px solid rgba(41,121,255,0.28);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 700;
  color: var(--accent);
}

.delay-range-highlight strong { color: var(--text); font-weight: 900; }

@media (max-width: 640px) {
  .detect-delay-card { padding: 18px 18px 20px; border-radius: 20px; }
  .delay-step { padding: 10px 12px; gap: 10px; }
  .delay-step__num { width: 24px; height: 24px; font-size: 12px; }
}

/* ============================================================
   BOTTOM NAV  ← position:fixed 제거 → flex 아이템
   ============================================================ */
.bottom-nav {
  flex: 0 0 auto;              /* 높이 고정 */
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(196,223,255,0.95);
  border-top: 1.5px solid var(--blue-border);
  z-index: 10;
}

.btn-prev, .btn-next {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 24px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  transition: all 0.22s;
  white-space: nowrap;
}

.btn-prev {
  background: rgba(41,121,255,0.10);
  color: var(--accent);
  border: 1.5px solid rgba(41,121,255,0.25);
}

.btn-prev:hover:not(:disabled) {
  background: rgba(41,121,255,0.18);
  transform: translateX(-2px);
}

.btn-prev:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-next {
  background: linear-gradient(135deg, #2979ff, #5c9eff);
  color: #fff;
  box-shadow: 0 4px 16px rgba(41,121,255,0.38);
}

.btn-next:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(41,121,255,0.48); }
.btn-next:active { transform: translateY(0); }

/* 마지막 페이지에서 버튼 숨김 */
.btn-next.hidden {
  visibility: hidden;
  pointer-events: none;
}

/* ── 스텝 닷 ── */
.step-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--blue-border);
  transition: all 0.32s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer;
}

.dot.active { width: 24px; background: var(--accent); }

/* 처음으로 버튼 */
.btn-restart {
  margin-top: 18px;
  padding: 12px 28px;
  border-radius: 99px;
  border: 2px solid #00b86b;
  background: transparent;
  color: #00b86b;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.22s;
}

.btn-restart:hover { background: #00b86b; color: #fff; transform: translateY(-2px); }

/* ============================================================
   STEP 별 색상 테마
   ============================================================ */
body[data-step="1"] .progress-fill { background: linear-gradient(90deg,#2979ff,#82b1ff); }
body[data-step="1"] .dot.active    { background: #2979ff; }
body[data-step="1"] .btn-next      { background: linear-gradient(135deg,#2979ff,#5c9eff); box-shadow:0 4px 16px rgba(41,121,255,.38); }
body[data-step="1"] .step-badge    { color:#2979ff; }

body[data-step="2"] .progress-fill { background: linear-gradient(90deg,#ff9800,#ffcc80); }
body[data-step="2"] .dot.active    { background: #ff9800; }
body[data-step="2"] .btn-next      { background: linear-gradient(135deg,#ff9800,#ffcc80); box-shadow:0 4px 16px rgba(255,152,0,.38); }
body[data-step="2"] .step-badge    { color:#ff9800; background:rgba(255,152,0,.10); border-color:rgba(255,152,0,.3); }
body[data-step="2"] .tip-list li:not(.warn) { border-left-color:#ffcc80; }

body[data-step="3"] .progress-fill { background: linear-gradient(90deg,#00b86b,#4cde9b); }
body[data-step="3"] .dot.active    { background: #00b86b; }
body[data-step="3"] .btn-next      { background: linear-gradient(135deg,#00b86b,#4cde9b); box-shadow:0 4px 16px rgba(0,184,107,.35); }
body[data-step="3"] .step-badge    { color:#00b86b; background:rgba(0,184,107,.10); border-color:rgba(0,184,107,.3); }
body[data-step="3"] .tip-list li   { border-left-color:#4cde9b; }

body[data-step="4"] .progress-fill { background: linear-gradient(90deg,#2979ff,#82b1ff); }
body[data-step="4"] .dot.active    { background: #2979ff; }
body[data-step="4"] .btn-next      { background: linear-gradient(135deg,#2979ff,#5c9eff); box-shadow:0 4px 16px rgba(41,121,255,.38); }

body[data-step="5"] .progress-fill { background: linear-gradient(90deg,#00b86b,#4cde9b); }
body[data-step="5"] .dot.active    { background: #00b86b; }

body[data-step="6"] .progress-fill { background: linear-gradient(90deg,#2979ff,#82b1ff); }
body[data-step="6"] .dot.active    { background: #2979ff; }
body[data-step="6"] .btn-next      { background: linear-gradient(135deg,#2979ff,#5c9eff); box-shadow:0 4px 16px rgba(41,121,255,.38); }

/* ============================================================
   PAGE 6 – 제품 지원 및 사용 안내 (2열×2행 그리드, 세로 스크롤 허용)
   ============================================================ */

/* page6은 콘텐츠 영역이 세로 전체를 차지 → stretch 정렬,
   콘텐츠가 많아지면 page6-inner 내부에서 자연스럽게 스크롤됨 */
#page6.guide-page {
  align-items: stretch;
  justify-content: flex-start;
  padding: 14px 20px;
}

/* 콘텐츠 총 높이가 화면보다 커지면 이 영역 안에서 세로 스크롤 */
.page6-inner {
  width: 100%;
  max-width: 1300px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.page6-header {
  flex: 0 0 auto;
  text-align: center;
  padding-bottom: 2px;
}

.step-badge--support {
  color: #2979ff;
  background: rgba(41,121,255,0.12);
  border-color: rgba(41,121,255,0.25);
}

.page6-header .page-title {
  font-size: clamp(19px, 2.4vw, 25px);
  margin-bottom: 0;
}

/* ── 2열×2행 그리드: 영상2개(1행) + A/S·다운로드(2행) ──
   행 높이는 auto(콘텐츠 기준)로, 카드가 잘리지 않고 필요한 만큼 늘어남 */
.page6-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 22px;
}

/* ── 지원 카드 공통 (높이는 내용에 맞춰 자동으로 늘어남) ── */
.support-card {
  background: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 6px 22px rgba(30,90,180,0.10);
  border: 1.5px solid rgba(168,207,240,0.5);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
}

.support-card__title {
  flex: 0 0 auto;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
}

.support-card__desc {
  flex: 0 0 auto;
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--sub);
  margin-bottom: 12px;
  line-height: 1.6;
}

/* 다운로드 카드: 버튼을 세로 중앙에 배치 */
.support-card--download {
  align-items: flex-start;
  justify-content: center;
}

/* A/S 카드: 이메일·전화·주소 3항목이 항상 모두 보이도록 자동 높이 */
.support-card--as .contact-list {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* ── 유튜브 영상 래퍼: aspect-ratio로 16:9 비율을 정확히 유지 ──
   (padding-top 트릭 대신 aspect-ratio 사용 → 눌리거나 잘리지 않음)
   기존보다 약 18% 더 큰 임베드 영역을 확보하기 위해
   page6-inner max-width 확장(1180px→1300px) + 카드 패딩 축소 적용 */
.support-card--video {
  padding: 14px 14px 16px;
}

.video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0e1626;
  box-shadow: inset 0 0 0 1.5px rgba(130,177,255,0.25);
}

.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── 다운로드 버튼 ── */
.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 99px;
  background: linear-gradient(135deg, #2979ff, #5c9eff);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(41,121,255,0.38);
  transition: all 0.22s;
}

.btn-download:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(41,121,255,0.48); }
.btn-download:active { transform: translateY(0); }

/* ── A/S 연락처 리스트: 이메일·전화·주소 세 항목 모두 항상 표시 ── */
.contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--blue-light);
  border-radius: 12px;
  padding: 8px 14px;
  border-left: 3.5px solid var(--blue-border);
}

.contact-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.3;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.contact-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--sub);
  letter-spacing: 0.5px;
}

.contact-value {
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.contact-value:hover { text-decoration: underline; }

.contact-value--address {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

/* ── 모바일: 세로 1열로 전환, 세로 스크롤 유지 ── */
@media (max-width: 900px) {
  .page6-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  #page6.guide-page { padding: 10px 14px; }
  .support-card { padding: 16px 16px; border-radius: 16px; }
  .support-card--video { padding: 12px 12px 14px; }
  .page6-inner { gap: 10px; }
  .page6-grid { gap: 14px; }
}

/* ============================================================
   PAGE 1 – Safe Voice 손 애니메이션
   ============================================================ */
@keyframes handMove {
  0%   { transform: translate(60px,8px);  opacity: 0; }
  12%  { transform: translate(60px,8px);  opacity: 1; }
  22%  { transform: translate(0px,0px);   opacity: 1; }
  28%  { transform: translate(-5px,4px);  opacity: 1; }
  68%  { transform: translate(-5px,4px);  opacity: 1; }
  78%  { transform: translate(0px,0px);   opacity: 1; }
  90%  { transform: translate(60px,8px);  opacity: 0.3; }
  100% { transform: translate(60px,8px);  opacity: 0; }
}
.hand-anim { animation: handMove 4.5s cubic-bezier(0.4,0,0.2,1) infinite; }

@keyframes fBtnPress {
  0%,22%  { fill: #5a5a6e; }
  28%,68% { fill: #2979ff; filter: drop-shadow(0 0 5px #2979ff); }
  78%     { fill: #5a5a6e; }
  100%    { fill: #5a5a6e; }
}
.f-btn-base { animation: fBtnPress 4.5s cubic-bezier(0.4,0,0.2,1) infinite; }

@keyframes fBtnGlow {
  0%,22%  { opacity: 0; }
  30%,66% { opacity: 0.28; }
  78%,100%{ opacity: 0; }
}
.f-btn-press-glow { animation: fBtnGlow 4.5s ease-in-out infinite; }

@keyframes pressWaveAnim {
  0%,30%  { opacity: 0; transform: scale(0.5); }
  38%     { opacity: 1; transform: scale(0.5); }
  65%     { opacity: 0; transform: scale(1.6); }
  100%    { opacity: 0; transform: scale(1.6); }
}
@keyframes showWaves {
  0%,32%  { opacity: 0; }
  36%,70% { opacity: 1; }
  78%,100%{ opacity: 0; }
}
#pressWaves { animation: showWaves 4.5s ease-in-out infinite; }
.press-wave { transform-origin: 271px 145px; animation: pressWaveAnim 4.5s ease-out infinite; }
.w1 { animation-delay: 0s; }
.w2 { animation-delay: 0.25s; }
.w3 { animation-delay: 0.5s; }

@keyframes ledBlinkP1 {
  0%,34%  { opacity: 0; }
  38%,42% { opacity: 1; fill: #ff5252; }
  45%,48% { opacity: 0.3; }
  52%,55% { opacity: 1; fill: #ff5252; }
  60%,70% { opacity: 1; fill: #ff5252; }
  78%,100%{ opacity: 0; }
}
.led-blink-p1 { animation: ledBlinkP1 4.5s ease-in-out infinite; }

@keyframes speechPop {
  0%,38%  { opacity:0; transform:scale(0.7) translateY(6px); }
  44%     { opacity:1; transform:scale(1.04) translateY(0); }
  50%,70% { opacity:1; transform:scale(1) translateY(0); }
  78%,100%{ opacity:0; }
}
#speechBubble { transform-origin:113px 90px; animation: speechPop 4.5s cubic-bezier(0.34,1.56,0.64,1) infinite; }

@keyframes shadowBreathP1 {
  0%,100% { opacity:.3; } 50% { opacity:.18; }
}
.p1-shadow { animation: shadowBreathP1 2s ease-in-out infinite; }

@keyframes fLabelPulse {
  0%,100% { opacity:1; } 50% { opacity:0.7; }
}
.f-label-arrow { transform-origin:225px 145px; animation: fLabelPulse 1.8s ease-in-out infinite; }
@keyframes fArrowDash { to { stroke-dashoffset:-15; } }
.f-arrow-dash { animation: fArrowDash 0.8s linear infinite; }
@keyframes fLabelHide {
  0%,25%  { opacity:1; }
  30%,70% { opacity:0; }
  78%,100%{ opacity:1; }
}
.f-label-bg { animation: fLabelHide 4.5s ease-in-out infinite; }

/* ============================================================
   PAGE 2 – 볼륨 점검 시퀀스
   ============================================================ */
@keyframes p2HandMove {
  0%    { transform: translate(62px,-13px); opacity:0; }
  10%   { transform: translate(62px,-13px); opacity:0; }
  20%   { transform: translate(0px,-13px);  opacity:1; }
  22%   { transform: translate(-4px,-10px); opacity:1; }
  32%   { transform: translate(-4px,-10px); opacity:1; }
  34%   { transform: translate(0px,-13px);  opacity:1; }
  44%   { transform: translate(0px,14px);   opacity:1; }
  46%   { transform: translate(-4px,17px);  opacity:1; }
  52%   { transform: translate(-4px,17px);  opacity:1; }
  54%   { transform: translate(0px,14px);   opacity:1; }
  60%   { transform: translate(0px,41px);   opacity:1; }
  62%   { transform: translate(-4px,44px);  opacity:1; }
  68%   { transform: translate(-4px,44px);  opacity:1; }
  70%   { transform: translate(0px,41px);   opacity:1; }
  82%   { transform: translate(0px,0px);    opacity:1; }
  92%   { transform: translate(62px,-13px); opacity:0.3; }
  100%  { transform: translate(62px,-13px); opacity:0; }
}
.p2-hand { animation: p2HandMove 8s cubic-bezier(0.4,0,0.2,1) infinite; }

@keyframes p2FBtnAnim {
  0%,20%  { fill:#5a5a6e; }
  22%,32% { fill:#2979ff; filter:drop-shadow(0 0 5px #2979ff); }
  34%,100%{ fill:#5a5a6e; }
}
.p2-f-btn { animation: p2FBtnAnim 8s ease-in-out infinite; }

@keyframes p2FGlowAnim {
  0%,21%  { opacity:0; }
  24%,30% { opacity:0.28; }
  34%,100%{ opacity:0; }
}
.p2-f-glow { animation: p2FGlowAnim 8s ease-in-out infinite; }

@keyframes p2PlusBtnAnim {
  0%,44%  { fill:#5a5a6e; }
  46%,52% { fill:#00b86b; filter:drop-shadow(0 0 5px #00b86b); }
  55%,100%{ fill:#5a5a6e; }
}
.p2-plus-btn { animation: p2PlusBtnAnim 8s ease-in-out infinite; }

@keyframes p2PlusGlowAnim {
  0%,45%  { opacity:0; }
  47%,51% { opacity:0.3; }
  55%,100%{ opacity:0; }
}
.p2-plus-glow { animation: p2PlusGlowAnim 8s ease-in-out infinite; }

@keyframes p2MinusBtnAnim {
  0%,60%  { fill:#5a5a6e; }
  62%,68% { fill:#ff9800; filter:drop-shadow(0 0 5px #ff9800); }
  71%,100%{ fill:#5a5a6e; }
}
.p2-minus-btn { animation: p2MinusBtnAnim 8s ease-in-out infinite; }

@keyframes p2MinusGlowAnim {
  0%,61%  { opacity:0; }
  63%,67% { opacity:0.3; }
  71%,100%{ opacity:0; }
}
.p2-minus-glow { animation: p2MinusGlowAnim 8s ease-in-out infinite; }

@keyframes p2SpeechAnim {
  0%,30%  { opacity:0; transform:scale(0.7) translateY(5px); }
  34%     { opacity:1; transform:scale(1.04) translateY(0); }
  36%,46% { opacity:1; transform:scale(1) translateY(0); }
  50%,100%{ opacity:0; }
}
.p2-speech { transform-origin:121px 82px; animation: p2SpeechAnim 8s cubic-bezier(0.34,1.56,0.64,1) infinite; }

@keyframes p2FLabelAnim {
  0%,18%  { opacity:1; }
  24%,80% { opacity:0; }
  85%,100%{ opacity:1; }
}
.p2-f-label { transform-origin:220px 145px; animation: p2FLabelAnim 8s ease-in-out infinite; }

@keyframes p2ArrowDash { to { stroke-dashoffset:-15; } }
.p2-arrow-dash { animation: p2ArrowDash 0.8s linear infinite; }

@keyframes p2PlusLabelAnim {
  0%,42%  { opacity:0; }
  44%,54% { opacity:1; }
  57%,100%{ opacity:0; }
}
.p2-plus-label { animation: p2PlusLabelAnim 8s ease-in-out infinite; }

@keyframes p2MinusLabelAnim {
  0%,57%  { opacity:0; }
  59%,69% { opacity:1; }
  72%,100%{ opacity:0; }
}
.p2-minus-label { animation: p2MinusLabelAnim 8s ease-in-out infinite; }

@keyframes p2SoundWavesAnim {
  0%,68%  { opacity:0; transform:scaleX(0.6); }
  72%,78% { opacity:1; transform:scaleX(1); }
  84%,100%{ opacity:0; transform:scaleX(0.6); }
}
.p2-sound-waves { transform-origin:116px 155px; animation: p2SoundWavesAnim 8s ease-in-out infinite; }

@keyframes p2WarningAnim {
  0%,70%  { opacity:0; transform:scale(0.8); }
  73%     { opacity:1; transform:scale(1.05); }
  75%,80% { opacity:1; transform:scale(1); }
  84%,100%{ opacity:0; }
}
.p2-warning { transform-origin:142px 113px; animation: p2WarningAnim 8s cubic-bezier(0.34,1.56,0.64,1) infinite; }

/* ============================================================
   PAGE 3 – 수배전반 큐비클 설치 애니메이션
   ============================================================ */

/* 바닥 그림자 숨쉬기 */
@keyframes p3FloorShadow {
  0%,100% { opacity:0.22; } 50% { opacity:0.12; }
}
.p3-floor-shadow { animation: p3FloorShadow 2.5s ease-in-out infinite; }

/* 아크릴 도어 반짝임 (광택) */
@keyframes p3AcrylicShimmer {
  0%,100% { opacity:0.82; }
  40%     { opacity:0.70; }
  60%     { opacity:0.88; }
}
.p3-acrylic-door { animation: p3AcrylicShimmer 3s ease-in-out infinite; }

/* 안테나 신호 파동 */
@keyframes p3AntennaSignal {
  0%   { opacity:0;   transform:scale(0.5) translateY(5px); }
  30%  { opacity:1;   transform:scale(1)   translateY(0); }
  70%  { opacity:0.6; transform:scale(1.05) translateY(-2px); }
  100% { opacity:0;   transform:scale(1.15) translateY(-5px); }
}
.p3-antenna-signal { transform-origin:69px 60px; animation: p3AntennaSignal 2.2s cubic-bezier(0.4,0,0.2,1) infinite; }

/* 자석 글로우 펄스 */
@keyframes p3MagnetGlow {
  0%,100% { opacity:0.35; rx:18; ry:22; }
  50%     { opacity:0.65; rx:22; ry:26; }
}
.p3-magnet-glow { animation: p3MagnetGlow 1.6s ease-in-out infinite; }

/* 자석 아이콘 흔들림 */
@keyframes p3MagnetPulse {
  0%,100% { transform: translateY(0) scale(1); }
  30%     { transform: translateY(-2px) scale(1.06); }
  60%     { transform: translateY(1px) scale(0.97); }
}
.p3-magnet-icon { transform-origin:54px 175px; animation: p3MagnetPulse 1.8s ease-in-out infinite; }

/* 제품 안착 효과 */
@keyframes p3DeviceSettle {
  0%   { transform: translateX(-6px); opacity:0.5; }
  50%  { transform: translateX(2px);  opacity:1; }
  75%  { transform: translateX(-1px); opacity:1; }
  100% { transform: translateX(0);    opacity:1; }
}
.p3-device { animation: p3DeviceSettle 1s cubic-bezier(0.34,1.56,0.64,1) 0.3s both; }

/* 눈높이 라인 대시 흐름 */
@keyframes p3HeightLineDash { to { stroke-dashoffset: -24; } }
.p3-height-line { animation: p3HeightLineDash 1.8s linear infinite; }

/* 높이 화살표 강조 */
@keyframes p3HeightArrow {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.75; transform:scale(0.96); }
}
.p3-height-arrow { transform-origin:223px 141px; animation: p3HeightArrow 2s ease-in-out infinite; }

/* 문 열림 화살표 대시 흐름 */
@keyframes p3DoorArrowDash { to { stroke-dashoffset:-22; } }
.p3-door-arrow path { animation: p3DoorArrowDash 0.9s linear infinite; }

/* 안테나 레이블 페이드 */
@keyframes p3AntennaLabel {
  0%,100% { opacity:0.93; transform:scale(1); }
  50%     { opacity:0.70; transform:scale(0.97); }
}
.p3-antenna-label { transform-origin:125px 57px; animation: p3AntennaLabel 2.5s ease-in-out infinite; }

/* 설치 완료 뱃지 바운스 */
@keyframes p3DoneBadge {
  0%,100% { transform:scale(1) translateY(0); }
  40%     { transform:scale(1.12) translateY(-3px); }
  65%     { transform:scale(0.95) translateY(1px); }
}
.p3-done-badge { transform-origin:182px 58px; animation: p3DoneBadge 2s cubic-bezier(0.4,0,0.2,1) infinite; }

/* 큐비클 LED 초록 */
@keyframes p3LedGreen {
  0%,100% { opacity:1; fill:#4caf50; }
  50%     { opacity:0.3; fill:#81c784; }
}
.p3-led-g { animation: p3LedGreen 1.4s ease-in-out infinite; }

/* 큐비클 LED 빨강 */
@keyframes p3LedRed {
  0%,100% { opacity:1; fill:#ff5252; }
  50%     { opacity:0.2; fill:#ff8a80; }
}
.p3-led-r { animation: p3LedRed 0.8s ease-in-out infinite; }

/* 제품 LED */
@keyframes p3LedDevice {
  0%,100% { opacity:0.9; } 50% { opacity:0.3; }
}
.p3-led-device { animation: p3LedDevice 1s ease-in-out infinite; }

/* 사람 실루엣 등장 */
@keyframes p3PersonAppear {
  0%   { opacity:0; transform:translateY(12px); }
  100% { opacity:1; transform:translateY(0); }
}
.p3-person { animation: p3PersonAppear 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.5s both; }

/* ── 구형 코드 호환 (이전 page3 클래스) ── */
@keyframes shadowBreath {
  0%,100% { opacity:1; } 50% { opacity:0.6; }
}
.shadow-floor { animation: shadowBreath 2s ease-in-out infinite; }

@keyframes deviceSettle {
  0%   { transform:translateY(-8px); opacity:.6; }
  60%  { transform:translateY(2px); }
  80%  { transform:translateY(-1px); }
  100% { transform:translateY(0); opacity:1; }
}
.device-settle { animation: deviceSettle 1.2s cubic-bezier(0.4,0,0.2,1) forwards; }

@keyframes wifiPulse {
  0%   { opacity:0; transform:scale(0.7); transform-origin:160px 163px; }
  60%  { opacity:1; transform:scale(1);   transform-origin:160px 163px; }
  100% { opacity:0; transform:scale(1.1); transform-origin:160px 163px; }
}
.wifi-arc { animation: wifiPulse 2s ease-out infinite; }

@keyframes sunPulse {
  0%,100% { r:9; fill:#ffe082; } 50% { r:11; fill:#ffd740; }
}
.sun-pulse { animation: sunPulse 2s ease-in-out infinite; }

@keyframes checkBounce {
  0%,100% { transform:scale(1) translateY(0); }
  50%     { transform:scale(1.1) translateY(-4px); }
}
.check-bounce { animation: checkBounce 1.8s ease-in-out infinite; transform-origin:258px 90px; }

@keyframes cordDash { to { stroke-dashoffset:-20; } }
.cord-dash { animation: cordDash 1.5s linear infinite; }

/* ============================================================
   PAGE 4 – 정상 동작 확인
   ============================================================ */
@keyframes ringScale {
  0%,100% { opacity:1; } 50% { opacity:0.6; }
}
.ring-scale { animation: ringScale 2s ease-in-out infinite; }

@keyframes checkCirclePop {
  0%   { r:0;  opacity:0; }
  60%  { r:20; opacity:1; }
  80%  { r:17; }
  100% { r:18; opacity:1; }
}
.check-circle-anim { animation: checkCirclePop 0.8s cubic-bezier(0.4,0,0.2,1) forwards; }

@keyframes ledScan { 0% { x:130; } 100% { x:160; } }
.led-scan { animation: ledScan 1.2s ease-in-out infinite alternate; }

@keyframes twinkle {
  0%,100% { opacity:1; transform:scale(1) rotate(0deg); }
  50%     { opacity:.5; transform:scale(1.3) rotate(20deg); }
}
.twinkle  { animation: twinkle 2s ease-in-out infinite; }
.t1 { animation-delay:0s;   transform-origin:82px 80px; }
.t2 { animation-delay:0.5s; transform-origin:246px 82px; }
.t3 { animation-delay:1s;   transform-origin:240px 210px; }
.t4 { animation-delay:1.5s; transform-origin:82px 215px; }

@keyframes blinkDot {
  0%,100% { opacity:1; } 50% { opacity:.2; }
}
.blink-dot { animation: blinkDot 1.2s ease-in-out infinite; }

/* ============================================================
   PAGE 5 – 완료
   ============================================================ */
@keyframes confFall {
  0%   { opacity:1; transform:translateY(-20px) rotate(0deg); }
  100% { opacity:0; transform:translateY(60px)  rotate(360deg); }
}
.conf { animation: confFall 2.5s ease-in infinite; }
.c1{animation-delay:0s}   .c2{animation-delay:.3s}
.c3{animation-delay:.6s}  .c4{animation-delay:.9s}
.c5{animation-delay:.15s} .c6{animation-delay:.45s}
.c7{animation-delay:.75s} .c8{animation-delay:1.05s}
.c9{animation-delay:1.2s} .c10{animation-delay:.9s}

@keyframes doneRingPop {
  0%  { r:50; opacity:0; } 70% { r:76; opacity:1; } 85% { r:70; } 100% { r:72; opacity:1; }
}
.done-ring { animation: doneRingPop 0.9s cubic-bezier(0.4,0,0.2,1) forwards; }

@keyframes doneCirclePop {
  0%  { r:0;  opacity:0; } 60% { r:60; opacity:1; } 80% { r:52; } 100% { r:55; opacity:1; }
}
.done-circle { animation: doneCirclePop 0.9s cubic-bezier(0.4,0,0.2,1) 0.1s both; }

@keyframes checkDraw {
  from { stroke-dashoffset:100; } to { stroke-dashoffset:0; }
}
.done-check {
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation: checkDraw 0.6s cubic-bezier(0.4,0,0.2,1) 0.7s forwards;
}

@keyframes starPop {
  0%  { opacity:0; transform:scale(0); }
  70% { opacity:1; transform:scale(1.3); }
  100%{ opacity:1; transform:scale(1); }
}
.star { animation: starPop 0.5s cubic-bezier(0.4,0,0.2,1) both; }
.s1{ animation-delay:.9s;  transform-origin:160px 78px; }
.s2{ animation-delay:1.1s; transform-origin:240px 140px; }
.s3{ animation-delay:1.3s; transform-origin:80px 140px; }

/* ============================================================
   SCROLLBAR 숨김
   ============================================================ */
::-webkit-scrollbar { display: none; }