/* 티음 — 티음 이용 안내 전용 스타일
   구조: 소개 → [탭] 강의 요청 가이드 / 강의 등록 가이드(각 스텝 = 텍스트 + 듀얼 목업 SVG 씬) → 왜 → FAQ → CTA
   씬: 데스크톱 브라우저 목업(뒤) + 모바일 폰 목업(앞) 겹침 구도. 알림톡(A6)만 단독 버블.
   모션: 루프는 인라인 IntersectionObserver 가 .g-scene 에 .is-on 을 줄 때만 재생.
   텍스트 선명도: <text> 에는 scale 계열 금지 — 팝인은 opacity+translate, 타이핑은 리트리트 커버(rect)로만 구동. */

.guide-section { padding: 40px 0 24px; }
.guide-section .t-sub { margin-top: 12px; }

/* 소개·마무리 강조 카드 */
.guide-card { padding: 32px; margin-top: 24px; }
.guide-card p { color: var(--ink-2); font-size: 16px; line-height: 1.8; }
.guide-card p strong { color: var(--ink); }
.guide-card p .accent { color: var(--dot-ink); font-weight: 700; }
.guide-card-story p { font-size: 15.5px; line-height: 1.9; }

/* ---------- 가이드 탭 ---------- */
.guide-tabs { margin-top: 20px; }
.guide-tabs .tab { padding: 13px 20px; font-size: 15.5px; }
.guide-tabs .tab-ico { display: inline-flex; width: 17px; height: 17px; margin-right: 7px; vertical-align: -3px; color: var(--ink-4); }
.guide-tabs .tab[aria-selected="true"] .tab-ico { color: var(--dot); }

.guide-panel { margin-top: 4px; }
.guide-panel[hidden] { display: none; }
.guide-panel-intro { margin-top: 22px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.guide-panel-intro strong { color: var(--ink); }

/* ---------- 이용 순서 스텝 ---------- */
.steps { display: flex; flex-direction: column; margin-top: 30px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; }
.step .rail { display: flex; flex-direction: column; align-items: center; }
.step .dot-n {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.step:first-child .dot-n { background: var(--dot); }
.step .rail .cord { width: 2px; flex: 1; background: var(--line-strong); margin: 8px 0; border-radius: 2px; }
.step:last-child .rail .cord { display: none; }
.step .step-body { padding-bottom: 44px; }
.step .step-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }
.step .step-desc { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; max-width: 560px; line-height: 1.65; }
.step .info-note { margin-top: 16px; }

/* ---------- 씬 ---------- */
.g-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.g-scene {
  --g-spring: cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  margin: 20px auto 0;
  max-width: 520px;             /* 듀얼(가로형) 씬 */
  line-height: 0;
}
.g-scene--bubble { max-width: 320px; }   /* 알림톡 단독 버블 */
.g-scene svg { display: block; width: 100%; height: auto; }
.g-scene text { font-family: inherit; }
.g-qr-img { image-rendering: pixelated; image-rendering: crisp-edges; }
.g-cap { margin: 12px auto 0; max-width: 520px; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.g-cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: none; }

/* 실 CTA(SVG 아님) — B6 결제 유도 */
.g-cta { margin: 20px auto 0; max-width: 340px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; }
.g-cta .btn { width: 100%; }
.g-cta .g-cta-sub { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.g-cta .g-cta-sub a { color: var(--dot-ink); font-weight: 600; }

/* ---------- 공통 씬 애니메이션 (.is-on 일 때만) ---------- */
/* 오렌지 포커스 링 펄스 (도형에만 적용) */
.g-scene .g-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.g-scene.is-on .g-ring { animation: g-ring 3.2s var(--ease-out) infinite; }
@keyframes g-ring {
  0%   { opacity: 0;   transform: scale(.68); }
  14%  { opacity: 1;   transform: scale(.84); }
  58%  { opacity: 0;   transform: scale(1.34); }
  100% { opacity: 0;   transform: scale(1.34); }
}

/* 탭 리플 (도형에만 적용) */
.g-scene .g-ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
.g-scene.is-on .g-ripple { animation: g-ripple 3.2s var(--ease-out) infinite; }
@keyframes g-ripple {
  0%   { opacity: 0;   transform: scale(.15); }
  12%  { opacity: .55; transform: scale(.4); }
  48%  { opacity: 0;   transform: scale(1.7); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* 밑줄 슬라이드 (도형에만 적용) */
.g-scene .g-underline { transform-box: fill-box; transform-origin: left center; transform: scaleX(.001); }
.g-scene.is-on .g-underline { animation: g-underline 3.2s var(--ease-out) infinite; }
@keyframes g-underline {
  0%, 100% { transform: scaleX(.001); }
  22%      { transform: scaleX(1); }
  78%      { transform: scaleX(1); }
}

/* 타이핑 = 리트리트 커버: 필드 배경색 rect 가 오른쪽으로 물러나며 아래 텍스트를 드러냄.
   텍스트 자체는 변형되지 않아 벡터 선명도가 유지된다. */
.g-scene .g-cover { transform-box: fill-box; transform-origin: right center; transform: scaleX(1); }
.g-scene.is-on .g-cover { animation: g-cover 3.6s var(--ease-out) infinite; }
@keyframes g-cover {
  0%   { transform: scaleX(1); }
  36%  { transform: scaleX(0); }
  90%  { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* 캐럿 깜빡임 (opacity 만) */
.g-scene .g-caret { opacity: 0; }
.g-scene.is-on .g-caret { animation: g-caret 1s steps(1) infinite; }
@keyframes g-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* 팝인 = opacity + translateY (scale 금지 → 내부 텍스트 선명) */
.g-scene .g-pop { opacity: 0; transform: translateY(10px); }
.g-scene.is-on .g-pop { animation: g-pop 3.8s var(--g-spring) infinite; }
@keyframes g-pop {
  0%   { opacity: 0; transform: translateY(10px); }
  16%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(10px); }
}

/* 스프링 슬라이드업 (translateY, scale 없음) */
.g-scene .g-slideup { opacity: 0; transform: translateY(26px); }
.g-scene.is-on .g-slideup { animation: g-slideup 4.2s var(--g-spring) infinite; }
@keyframes g-slideup {
  0%   { opacity: 0; transform: translateY(26px); }
  15%  { opacity: 1; transform: translateY(0); }
  92%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(26px); }
}

/* 강조 보브 = translateY 상하 (scale 금지 → 내부 텍스트 선명) */
.g-scene .g-focusgrow { transform: translateY(0); }
.g-scene.is-on .g-focusgrow { animation: g-focusgrow 3.2s var(--ease-out) infinite; }
@keyframes g-focusgrow {
  0%, 100% { transform: translateY(0); }
  45%, 70% { transform: translateY(-3px); }
}

/* 스파클 반짝임 (path 에만, 텍스트 아님) */
.g-scene .g-spark { transform-box: fill-box; transform-origin: center; opacity: 0; }
.g-scene.is-on .g-spark { animation: g-spark 2.6s ease-in-out infinite; }
@keyframes g-spark {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(-10deg); }
  50%      { opacity: 1; transform: scale(1) rotate(8deg); }
}

/* 스태거 딜레이 */
.g-scene.is-on .g-d1 { animation-delay: .12s; }
.g-scene.is-on .g-d2 { animation-delay: .26s; }
.g-scene.is-on .g-d3 { animation-delay: .40s; }
.g-scene.is-on .g-d4 { animation-delay: .60s; }
.g-scene.is-on .g-slow { animation-delay: .9s; }

/* ---------- reduced-motion: 즉시 최종 상태 ---------- */
@media (prefers-reduced-motion: reduce) {
  .g-scene * { animation: none !important; }
  .g-scene .g-ring { opacity: .9 !important; transform: none !important; }
  .g-scene .g-ripple { opacity: .35 !important; transform: none !important; }
  .g-scene .g-caret, .g-scene .g-spark { opacity: 0 !important; }
  .g-scene .g-underline, .g-scene .g-focusgrow { transform: none !important; }
  .g-scene .g-cover { transform: scaleX(0) !important; }   /* 커버 물러남 = 텍스트 노출 */
  .g-scene .g-pop, .g-scene .g-slideup { opacity: 1 !important; transform: none !important; }
}

/* ---------- 하단 공통 ---------- */
.guide-faq { margin-top: 24px; }
.guide-cta { padding: 40px 0 0; }

/* ---------- 모바일 ---------- */
@media (max-width: 720px) {
  .guide-tabs { gap: 0; }
  .guide-tabs .tab { flex: 1 1 0; text-align: center; padding: 14px 8px; font-size: 15px; }
  .guide-tabs .tab-ico { margin-right: 5px; }
  .step .step-desc { max-width: none; }
}