<div class="rpt-sec-hd">
  <div class="rpt-num-badge">1</div>
  <h3>진동 측정 결과</h3>
</div>
<div class="rpt-divider"></div>

<table class="rpt-table">
  <thead>
    <tr><th>측정 위치</th>...</tr>
  </thead>
  <tbody>
    <tr><td>...</td></tr>
    <tr class="hl">...</tr> <!-- 강조행 -->
    <tr class="tot">...</tr> <!-- 합계행 -->
  </tbody>
</table>

<figure class="rpt-fig">
  <img src="./assets/fig1.png" alt="그래프">
  <figcaption class="rpt-figcap">
    <strong>그림 1.</strong> 설명 텍스트
  </figcaption>
</figure>

<div class="rpt-callout info">
  <span>ℹ️</span>
  <div><strong>참고</strong> — 내용</div>
</div>
<div class="rpt-callout warn">...</div>
<div class="rpt-callout ok">...</div>

<div class="rpt-code-blk">
  f_n = (1/2π) × √(k/m)
</div>

<span class="rpt-hi">3.1</span>
<span class="rpt-unit">g</span>

<div class="mag-card" data-mag>내용</div>

<script>
document.querySelectorAll('[data-mag]').forEach(card => {
  card.addEventListener('mousemove', e => {
    const r = card.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width  - .5;
    const y = (e.clientY - r.top)  / r.height - .5;
    card.style.transform =
      `perspective(600px) rotateY(${x*14}deg) rotateX(${-y*14}deg) scale(1.03)`;
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = '';
  });
});
</script>

<div class="kpi-val" data-kpi="3.1" data-dec="1">
  0<span>g</span>
</div>

<script>
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (!e.isIntersecting) return;
    const el = e.target, end = +el.dataset.kpi;
    const dec = +el.dataset.dec, unit = el.querySelector('span');
    const txt = unit?.outerHTML || '';
    let start = 0, dur = 1200, t0 = null;
    const tick = t => {
      if (!t0) t0 = t;
      const p = Math.min((t - t0) / dur, 1);
      const v = (end * (p < .5 ? 2*p*p : 1-(2*(1-p)**2)));
      el.innerHTML = v.toFixed(dec) + txt;
      if (p < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
    obs.unobserve(el);
  });
});
document.querySelectorAll('[data-kpi]').forEach(el => obs.observe(el));
</script>

<button class="rpl-btn" data-ripple>버튼</button>

<script>
document.querySelectorAll('[data-ripple]').forEach(btn => {
  btn.addEventListener('click', e => {
    const r = btn.getBoundingClientRect();
    const d = Math.max(r.width, r.height);
    const rpl = document.createElement('span');
    rpl.className = 'ripple';
    rpl.style.cssText =
      `width:${d}px;height:${d}px;
       left:${e.clientX-r.left-d/2}px;
       top:${e.clientY-r.top-d/2}px`;
    btn.appendChild(rpl);
    setTimeout(() => rpl.remove(), 600);
  });
});
</script>

<div class="acc-item">
  <div class="acc-head" onclick="toggleAcc(this)">
    제목 <span class="acc-arrow">▼</span>
  </div>
  <div class="acc-body">
    <div class="acc-inner">내용</div>
  </div>
</div>

<script>
function toggleAcc(head) {
  head.closest('.acc-item').classList.toggle('open');
}
</script>

<th onclick="sortTable('id',0,this)">
  컬럼명<span class="sort-ic"></span>
</th>

<script>
function sortTable(id, col, th) {
  const tbl = document.getElementById(id);
  const asc = !th.classList.contains('asc');
  tbl.querySelectorAll('th').forEach(t =>
    t.classList.remove('asc','desc'));
  th.classList.add(asc ? 'asc' : 'desc');
  const rows = [...tbl.tBodies[0].rows];
  rows.sort((a,b) => {
    const av = a.cells[col].textContent.trim();
    const bv = b.cells[col].textContent.trim();
    const n = !isNaN(av) && !isNaN(bv);
    return asc
      ? (n ? av-bv : av.localeCompare(bv))
      : (n ? bv-av : bv.localeCompare(av));
  });
  rows.forEach(r => tbl.tBodies[0].appendChild(r));
}
</script>

<div class="tip-wrap">
  <span class="tip-target">FFT</span>
  <div class="tip">설명 텍스트</div>
</div>

/* JS 불필요 — 순수 CSS hover로 동작 */