<!-- web-practice/portfolio/projects.html -->
<div class="project-grid">
  <article class="project-card">
    <img src="images/project-01.svg" alt="오늘의 날씨 프로젝트 화면" width="1200" height="800" />
    <h3>오늘의 날씨</h3>
    <p>위치 기반 날씨를 카드로 보여주는 웹앱입니다. 오프라인에서도 마지막 데이터를 보여줍니다.</p>
    <ul class="tags">
      <li>
        <button type="button" class="tag" popovertarget="tip-weather-js">JavaScript</button>
        <div id="tip-weather-js" class="tooltip" popover role="tooltip">순수 자바스크립트로 위치 조회와 화면 갱신을 구현했습니다.</div>
      </li>
      <li>
        <button type="button" class="tag" popovertarget="tip-weather-pwa">PWA</button>
        <div id="tip-weather-pwa" class="tooltip" popover role="tooltip">Service Worker로 오프라인에서도 마지막 데이터를 보여줍니다.</div>
      </li>
    </ul>
    <button type="button" class="btn-detail" data-project-id="weather">자세히</button>
  </article>
 
  <article class="project-card">
    <img src="images/project-02.svg" alt="독서 기록 bookshelf 프로젝트 화면" width="1200" height="800" />
    <h3>독서 기록 bookshelf</h3>
    <p>읽은 책과 별점을 기록하고 통계를 보는 React 앱입니다.</p>
    <ul class="tags">
      <li>
        <button type="button" class="tag" popovertarget="tip-bookshelf-react">React</button>
        <div id="tip-bookshelf-react" class="tooltip" popover role="tooltip">컴포넌트 단위로 책 목록과 상세 화면을 구성했습니다.</div>
      </li>
      <li>
        <button type="button" class="tag" popovertarget="tip-bookshelf-vite">Vite</button>
        <div id="tip-bookshelf-vite" class="tooltip" popover role="tooltip">개발 서버와 번들링에 Vite를 사용했습니다.</div>
      </li>
    </ul>
    <button type="button" class="btn-detail" data-project-id="bookshelf">자세히</button>
  </article>
  <!-- notes, a11y, tokens, todo-cli 카드도 동일한 tag+tooltip 패턴 -->
</div>
 
<dialog id="project-dialog" class="project-dialog">
  <form method="dialog">
    <button type="submit" value="closed" class="dialog-close" aria-label="닫기">×</button>
  </form>
  <h2 class="dialog-title"></h2>
  <p class="dialog-background"></p>
  <p class="dialog-role"></p>
  <p class="dialog-learned"></p>
</dialog>