/* 홈 "AI 도구" 목업 — 새 도구 페이지 디자인(회색 패널 + 흰 입력칸 + 초록 버튼)에 맞춘 데모.
   home.css 뒤에 로드되어 기존 .hd-* 규칙을 덮어쓴다. 타임라인은 한 사이클 10초(--hd-cycle).
   0.4초 커서 등장 → 1.0초 버튼 위 도착 → 1.15초 클릭 → 1.3~1.8초 결과 → 2.2~5초 스크롤 → 9.4초 페이드아웃 → 반복 */
.hd-window { --hd-cycle: 10.5s; --hd-view: 320px; }

/* ── 왼쪽: 입력 폼 (입력 완료 상태) ── */
.hd-body { grid-template-columns: minmax(0, 360px) 1fr; }
.hd-form { display: flex; flex-direction: column; padding: 18px 20px; overflow: hidden; }
.hd-card-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #111; font-size: 14px; }
.hd-card-head b { font-weight: 700; letter-spacing: -.02em; }
.hd-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1db954; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.hd-panel { padding: 14px; border-radius: 14px; background: #f9f9f9; }
.hd-lb { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #111; font-size: 11.5px; font-weight: 700; }
.hd-lb em { padding: 1px 7px; border-radius: 999px; background: #e8f8ee; color: #17a449; font-size: 10px; font-style: normal; font-weight: 700; }
.hd-lb em.opt { background: #e8e8e4; color: #6f6f6a; }
.hd-fld { min-height: 36px; margin: 0 0 10px; padding: 9px 12px; border: 1px solid #deded9; border-radius: 10px; background: #fff; color: #111; font-size: 12.5px; line-height: 1.45; }
.hd-panel .hd-fld:last-child { margin-bottom: 0; }
.hd-wrap { position: relative; display: flex; margin-top: 12px; }
.hd-btn { width: 100%; height: 44px; justify-content: center; margin: 0; padding: 0 18px; border-radius: 12px; background: #1db954; font-size: 13.5px; font-weight: 700; }
.hd-btn:hover svg { transform: none; }
.hd-cursor { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; opacity: 0; pointer-events: none; fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }

/* ── 오른쪽: 결과 영역 ── */
.hd-preview { background: #f5f5f3; border-left: 1px solid #ececea; }
.hd-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #a8a8a3; font-size: 12.5px; font-weight: 600; }
.hd-result { transition: none; }
.hd-r-head { margin: 0; padding: 12px 18px; background: #fff; border-bottom: 1px solid #f0f0ee; }
.hd-r-head .hd-num { width: 22px; height: 22px; border-radius: 50%; background: #1db954; }
.hd-r-body { flex: 1; min-height: 0; padding: 14px 16px; overflow: hidden; background: #fff; }
.hd-r-track { will-change: transform; }
.hd-detail + .hd-detail { margin-top: 12px; }
.hd-detail { padding: 14px 16px 16px; border: 1px solid #e7e7e4; border-radius: 14px; background: #fff; }
.hd-t-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; color: #111; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.hd-t-head span { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #111; color: #fff; font-size: 11px; font-weight: 700; }
.hd-detail h6 { margin: 14px 0 5px; color: #777; font-size: 10.5px; font-weight: 700; }
.hd-detail ul { margin: 0; padding-left: 15px; color: #333; font-size: 11.5px; line-height: 1.7; }
.hd-detail p { margin: 0; color: #444; font-size: 11.5px; line-height: 1.65; }
.hd-src { margin-top: 7px; padding: 9px 11px; border-radius: 10px; background: #f7f7f5; }
.hd-src b { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 6px; background: #fde8ea; color: #b0303c; font-size: 10px; font-weight: 700; }
.hd-src u { color: #111; font-size: 11px; font-weight: 700; text-decoration: underline; }
.hd-src p { margin-top: 5px; color: #666; font-size: 10.5px; line-height: 1.55; }
.hd-outline { margin: 0; }
.hd-outline > div { display: flex; gap: 14px; padding: 2px 0; font-size: 11.5px; line-height: 1.6; }
.hd-outline dt { flex: none; width: 46px; color: #111; font-weight: 700; }
.hd-outline dd { margin: 0; color: #444; }

/* ── 재생 타임라인 (화면에 보일 때만) ── */
.hd-window.is-inview .hd-cursor { animation: hd-cursor var(--hd-cycle) ease-in-out infinite; }
.hd-window.is-inview .hd-btn { animation: hd-press var(--hd-cycle) ease-in-out infinite; }
.hd-window.is-inview .hd-result { animation: hd-result var(--hd-cycle) cubic-bezier(.2, .8, .2, 1) infinite; }
.hd-window.is-inview .hd-ph { animation: hd-ph var(--hd-cycle) ease infinite; }
.hd-window.is-inview .hd-r-track { animation: hd-scroll var(--hd-cycle) cubic-bezier(.35, 0, .45, 1) infinite; }

@keyframes hd-cursor {
  0% { opacity: 0; transform: translate(70px, 60px); }
  3.8% { opacity: 1; transform: translate(70px, 60px); }
  9.5% { opacity: 1; transform: translate(4px, 6px) scale(1); }
  11% { opacity: 1; transform: translate(4px, 6px) scale(.8); }
  13.3% { opacity: 1; transform: translate(4px, 6px) scale(1); }
  18.1% { opacity: 1; transform: translate(4px, 6px); }
  21.9%, 100% { opacity: 0; transform: translate(70px, 60px); }
}
@keyframes hd-press {
  0%, 10%, 13.3%, 100% { transform: none; filter: none; box-shadow: none; }
  11% { transform: scale(.95); filter: brightness(.95); box-shadow: 0 3px 8px -4px rgba(29, 185, 84, .6); }
}
@keyframes hd-result {
  0%, 12.4% { opacity: 0; transform: scale(.25); }
  17.1% { opacity: 1; transform: none; }
  89.5% { opacity: 1; transform: none; }
  94.3% { opacity: 0; transform: none; }
  100% { opacity: 0; transform: scale(.25); }
}
@keyframes hd-ph {
  0%, 12.4% { opacity: 1; }
  15.2%, 94.3% { opacity: 0; }
  98%, 100% { opacity: 1; }
}
/* 주제 2개의 긴 상세 내용을 빠르게 훑어 내려간다. 이동 거리는 내용 높이에 맞춰 자동 계산(PC 약 260px/초) */
@keyframes hd-scroll {
  0%, 25.7% { transform: translateY(0); }
  75.2%, 94.3% { transform: translateY(calc(-100% + var(--hd-view))); }
  94.4%, 100% { transform: translateY(0); }
}
/* ── 모바일: 폼 위에 결과가 덮어 나타난다 ── */
@media (max-width: 760px) {
  .hd-stage { height: 520px; }
  .hd-window { --hd-view: 336px; }
  .hd-body { grid-template-columns: 1fr; }
  .hd-form { padding: 14px 16px; }
  .hd-preview { display: block; position: absolute; left: 0; right: 0; top: 40px; bottom: 0; border-left: 0; background: transparent; pointer-events: none; }
  .hd-ph { display: none; }
  .hd-fld { min-height: 34px; padding: 8px 11px; }
}

/* ── 동작 줄이기: 애니메이션 없이 결과 화면을 정지 상태로 ── */
@media (prefers-reduced-motion: reduce) {
  .hd-result { opacity: 1; transform: none; }
  .hd-ph, .hd-cursor { display: none; }
  .hd-r-track { transform: none; }
}