<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta
    name="description"
    content="AI 프롬프트, 엑셀·노션 템플릿, PPT 템플릿, 디자인 소스, 전자책, 온라인 강의를 판매하는 디지털 상품 스토어"
  />
  <title>PixelMarket | 디지털 상품 스토어</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://js.tosspayments.com/v2/standard" defer></script>
  <script src="script.js" defer></script>
</head>
<body>
  <header class="site-header">
    <div class="container nav">
      <a class="logo" href="#home" aria-label="PixelMarket 홈">
        <span class="logo-mark">P</span>
        PixelMarket
      </a>

      <button class="menu-button" type="button" aria-label="메뉴 열기" aria-expanded="false">
        ☰
      </button>

      <nav class="nav-links" aria-label="주요 메뉴">
        <a href="#products">상품</a>
        <a href="#benefits">장점</a>
        <a href="#reviews">후기</a>
        <a href="#faq">FAQ</a>
      </nav>

      <button class="cart-button" type="button" aria-label="장바구니 열기">
        장바구니
        <span id="cartCount" class="cart-count">0</span>
      </button>
    </div>
  </header>

  <main>
    <section id="home" class="hero">
      <div class="container hero-grid">
        <div class="hero-content">
          <span class="eyebrow">CREATE FASTER, WORK SMARTER</span>
          <h1>당신의 작업 시간을 줄여주는<br />디지털 상품 스토어</h1>
          <p>
            검증된 AI 프롬프트, 업무 템플릿, 디자인 소스와 실전 강의를
            다운로드 즉시 사용할 수 있습니다.
          </p>
          <div class="hero-actions">
            <a class="button primary-button" href="#products">상품 둘러보기</a>
            <a class="button secondary-button" href="#benefits">왜 디지털 상품인가요?</a>
          </div>
          <div class="hero-stats">
            <div>
              <strong>120+</strong>
              <span>판매 상품</span>
            </div>
            <div>
              <strong>4.9/5</strong>
              <span>평균 만족도</span>
            </div>
            <div>
              <strong>즉시</strong>
              <span>자동 다운로드</span>
            </div>
          </div>
        </div>

        <div class="hero-card" aria-label="추천 상품 미리보기">
          <span class="hero-card-label">이번 주 인기 상품</span>
          <div class="hero-product-icon">✨</div>
          <h2>AI 업무 자동화 프롬프트 100</h2>
          <p>기획, 마케팅, 문서 작성에 바로 적용하는 실전 프롬프트 모음</p>
          <div class="hero-price">
            <span class="old-price">29,000원</span>
            <strong>19,900원</strong>
          </div>
          <button
            class="button primary-button add-to-cart"
            type="button"
            data-id="1"
            data-name="AI 업무 자동화 프롬프트 100"
            data-price="19900"
          >
            장바구니 담기
          </button>
        </div>
      </div>
    </section>

    <section class="category-section">
      <div class="container">
        <div class="section-heading">
          <span class="eyebrow">CATEGORY</span>
          <h2>필요한 자료를 빠르게 찾아보세요</h2>
        </div>

        <div class="category-buttons" role="group" aria-label="상품 카테고리">
          <button class="category-button active" type="button" data-category="all">전체</button>
          <button class="category-button" type="button" data-category="prompt">AI 프롬프트</button>
          <button class="category-button" type="button" data-category="template">엑셀·노션</button>
          <button class="category-button" type="button" data-category="ppt">PPT</button>
          <button class="category-button" type="button" data-category="design">디자인 소스</button>
          <button class="category-button" type="button" data-category="ebook">전자책</button>
          <button class="category-button" type="button" data-category="course">온라인 강의</button>
        </div>
      </div>
    </section>

    <section id="products" class="products-section">
      <div class="container">
        <div class="section-heading heading-row">
          <div>
            <span class="eyebrow">BEST PRODUCTS</span>
            <h2>지금 가장 인기 있는 상품</h2>
          </div>
          <label class="search-box">
            <span class="sr-only">상품 검색</span>
            <input id="searchInput" type="search" placeholder="상품 검색" />
          </label>
        </div>

        <div id="productGrid" class="product-grid">
          <article class="product-card" data-category="prompt" data-name="AI 업무 자동화 프롬프트">
            <div class="product-thumbnail gradient-one">
              <span class="product-badge">BEST</span>
              <span class="product-emoji">🤖</span>
            </div>
            <div class="product-info">
              <span class="product-category">AI 프롬프트</span>
              <h3>AI 업무 자동화 프롬프트 100</h3>
              <p>기획, 보고서, 마케팅 업무에 바로 적용하는 프롬프트 모음입니다.</p>
              <div class="product-footer">
                <strong>19,900원</strong>
                <button class="icon-button add-to-cart" type="button" data-id="1" data-name="AI 업무 자동화 프롬프트 100" data-price="19900" aria-label="장바구니 담기">+</button>
              </div>
            </div>
          </article>

          <article class="product-card" data-category="template" data-name="올인원 노션 업무 시스템">
            <div class="product-thumbnail gradient-two">
              <span class="product-badge new">NEW</span>
              <span class="product-emoji">📋</span>
            </div>
            <div class="product-info">
              <span class="product-category">노션 템플릿</span>
              <h3>올인원 노션 업무 시스템</h3>
              <p>프로젝트, 일정, 고객, 콘텐츠를 한 번에 관리하는 실무 템플릿입니다.</p>
              <div class="product-footer">
                <strong>24,900원</strong>
                <button class="icon-button add-to-cart" type="button" data-id="2" data-name="올인원 노션 업무 시스템" data-price="24900" aria-label="장바구니 담기">+</button>
              </div>
            </div>
          </article>

          <article class="product-card" data-category="template" data-name="매출 관리 엑셀 대시보드">
            <div class="product-thumbnail gradient-three">
              <span class="product-emoji">📊</span>
            </div>
            <div class="product-info">
              <span class="product-category">엑셀 템플릿</span>
              <h3>매출 관리 엑셀 대시보드</h3>
              <p>월별 매출과 비용, 순이익을 자동으로 집계하고 시각화합니다.</p>
              <div class="product-footer">
                <strong>15,900원</strong>
                <button class="icon-button add-to-cart" type="button" data-id="3" data-name="매출 관리 엑셀 대시보드" data-price="15900" aria-label="장바구니 담기">+</button>
              </div>
            </div>
          </article>

          <article class="product-card" data-category="ppt" data-name="모던 비즈니스 PPT 템플릿">
            <div class="product-thumbnail gradient-four">
              <span class="product-emoji">🖥️</span>
            </div>
            <div class="product-info">
              <span class="product-category">PPT 템플릿</span>
              <h3>모던 비즈니스 PPT 80장</h3>
              <p>제안서, 보고서, 포트폴리오에 활용할 수 있는 프레젠테이션입니다.</p>
              <div class="product-footer">
                <strong>18,900원</strong>
                <button class="icon-button add-to-cart" type="button" data-id="4" data-name="모던 비즈니스 PPT 80장" data-price="18900" aria-label="장바구니 담기">+</button>
              </div>
            </div>
          </article>

          <article class="product-card" data-category="design" data-name="미니멀 아이콘 디자인 소스">
            <div class="product-thumbnail gradient-five">
              <span class="product-emoji">🎨</span>
            </div>
            <div class="product-info">
              <span class="product-category">디자인 소스</span>
              <h3>미니멀 아이콘 500종</h3>
              <p>웹과 앱 디자인에 활용하기 좋은 SVG·PNG 아이콘 세트입니다.</p>
              <div class="product-footer">
                <strong>12,900원</strong>
                <button class="icon-button add-to-cart" type="button" data-id="5" data-name="미니멀 아이콘 500종" data-price="12900" aria-label="장바구니 담기">+</button>
              </div>
            </div>
          </article>

          <article class="product-card" data-category="ebook" data-name="1인 디지털 상품 판매 전자책">
            <div class="product-thumbnail gradient-six">
              <span class="product-emoji">📘</span>
            </div>
            <div class="product-info">
              <span class="product-category">전자책</span>
              <h3>1인 디지털 상품 판매 가이드</h3>
              <p>상품 기획부터 상세페이지, 결제와 마케팅까지 단계별로 설명합니다.</p>
              <div class="product-footer">
                <strong>13,900원</strong>
                <button class="icon-button add-to-cart" type="button" data-id="6" data-name="1인 디지털 상품 판매 가이드" data-price="13900" aria-label="장바구니 담기">+</button>
              </div>
            </div>
          </article>

          <article class="product-card" data-category="course" data-name="챗GPT 실무 활용 온라인 강의">
            <div class="product-thumbnail gradient-seven">
              <span class="product-badge">HOT</span>
              <span class="product-emoji">🎓</span>
            </div>
            <div class="product-info">
              <span class="product-category">온라인 강의</span>
              <h3>챗GPT 실무 활용 마스터</h3>
              <p>반복 업무 자동화와 콘텐츠 제작을 배우는 20강 온라인 과정입니다.</p>
              <div class="product-footer">
                <strong>49,000원</strong>
                <button class="icon-button add-to-cart" type="button" data-id="7" data-name="챗GPT 실무 활용 마스터" data-price="49000" aria-label="장바구니 담기">+</button>
              </div>
            </div>
          </article>

          <article class="product-card" data-category="design" data-name="SNS 배너 디자인 템플릿">
            <div class="product-thumbnail gradient-eight">
              <span class="product-emoji">📱</span>
            </div>
            <div class="product-info">
              <span class="product-category">디자인 소스</span>
              <h3>SNS 배너 템플릿 120종</h3>
              <p>인스타그램과 광고 콘텐츠 제작에 활용할 수 있는 편집 소스입니다.</p>
              <div class="product-footer">
                <strong>16,900원</strong>
                <button class="icon-button add-to-cart" type="button" data-id="8" data-name="SNS 배너 템플릿 120종" data-price="16900" aria-label="장바구니 담기">+</button>
              </div>
            </div>
          </article>
        </div>

        <p id="emptyMessage" class="empty-message" hidden>검색 조건에 맞는 상품이 없습니다.</p>
      </div>
    </section>

    <section id="benefits" class="benefits-section">
      <div class="container">
        <div class="section-heading centered">
          <span class="eyebrow">WHY PIXELMARKET</span>
          <h2>구매 즉시, 바로 사용할 수 있습니다</h2>
          <p>배송을 기다리지 않고 결제가 완료되면 디지털 파일을 바로 받아보세요.</p>
        </div>

        <div class="benefit-grid">
          <article>
            <span>⚡</span>
            <h3>즉시 다운로드</h3>
            <p>결제 완료 후 다운로드 링크가 자동으로 제공됩니다.</p>
          </article>
          <article>
            <span>♾️</span>
            <h3>반복 사용</h3>
            <p>구매한 파일은 개인 작업에 여러 번 활용할 수 있습니다.</p>
          </article>
          <article>
            <span>🔒</span>
            <h3>안전한 결제</h3>
            <p>결제 정보가 안전하게 처리되는 구조를 가정한 데모입니다.</p>
          </article>
          <article>
            <span>💬</span>
            <h3>구매자 지원</h3>
            <p>상품 사용 중 궁금한 점을 이메일로 문의할 수 있습니다.</p>
          </article>
        </div>
      </div>
    </section>

    <section id="reviews" class="reviews-section">
      <div class="container">
        <div class="section-heading">
          <span class="eyebrow">REVIEWS</span>
          <h2>구매자가 직접 남긴 후기</h2>
        </div>

        <div class="review-grid">
          <blockquote>
            <div class="stars">★★★★★</div>
            <p>“노션 템플릿을 적용하고 매주 반복하던 정리 시간이 크게 줄었습니다.”</p>
            <footer>김민지 · 콘텐츠 마케터</footer>
          </blockquote>
          <blockquote>
            <div class="stars">★★★★★</div>
            <p>“PPT 디자인이 깔끔해서 제안서 제작 속도가 훨씬 빨라졌어요.”</p>
            <footer>박준호 · 프리랜서</footer>
          </blockquote>
          <blockquote>
            <div class="stars">★★★★★</div>
          …10695 tokens truncated…}

.newsletter-section {
  padding: 72px 0;
  color: white;
  background: linear-gradient(135deg, #4438bd, #755ff7);
}

.newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.newsletter h2 {
  max-width: 600px;
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.045em;
}

.newsletter-form {
  display: flex;
  gap: 10px;
}

.newsletter-form input {
  min-width: 280px;
  padding: 14px 16px;
  border: 0;
  border-radius: 13px;
  outline: none;
}

.newsletter-form button {
  padding: 0 20px;
  border: 0;
  border-radius: 13px;
  color: var(--primary);
  background: white;
  font-weight: 900;
}

.site-footer {
  padding: 70px 0 28px;
  color: #c9c9d6;
  background: #171724;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 70px;
}

.footer-logo {
  color: white;
}

.footer-grid p {
  max-width: 390px;
}

.footer-grid h3 {
  margin: 0 0 13px;
  color: white;
  font-size: 0.94rem;
}

.footer-grid > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer-grid a:not(.logo):hover {
  color: white;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 55px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.8rem;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(19, 18, 35, 0.48);
  backdrop-filter: blur(3px);
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  width: min(430px, 100%);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--surface);
  box-shadow: -18px 0 60px rgba(23, 23, 36, 0.2);
  transform: translateX(105%);
  transition: transform 0.25s ease;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.cart-header h2 {
  margin: 0;
}

.close-button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--background);
  font-size: 1.6rem;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 18px 0;
}

.empty-cart {
  color: var(--muted);
  text-align: center;
}

.cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.cart-item h3 {
  margin: 0 0 5px;
  font-size: 0.98rem;
}

.cart-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.remove-item {
  align-self: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  color: var(--danger);
  background: #fff0f3;
  font-weight: 800;
}

.cart-summary {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.cart-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.cart-summary strong {
  font-size: 1.35rem;
}

.checkout-button {
  width: 100%;
}

.cart-summary p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 70;
  padding: 12px 18px;
  border-radius: 12px;
  color: white;
  background: #242333;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 0.8fr;
    gap: 35px;
  }

  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .nav {
    flex-wrap: wrap;
  }

  .menu-button {
    display: block;
  }

  .nav-links {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    order: 4;
    margin: 0;
    padding-bottom: 14px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 12px 2px;
    border-top: 1px solid var(--border);
  }

  .cart-button {
    margin-left: 0;
  }

  .hero {
    padding-top: 70px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-card {
    max-width: 520px;
    transform: none;
  }

  .product-grid,
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .newsletter {
    align-items: stretch;
    flex-direction: column;
  }

  .newsletter-form input {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .site-header .container {
    width: min(calc(100% - 20px), var(--container));
  }

  .hero {
    padding: 56px 0 70px;
  }

  .hero h1 {
    font-size: 2.45rem;
  }

  .hero-stats {
    gap: 22px;
  }

  .hero-card {
    padding: 26px;
  }

  .heading-row {
    align-items: stretch;
    flex-direction: column;
  }

  .search-box input {
    width: 100%;
  }

  .product-grid,
  .benefit-grid,
  .review-grid {
    grid-template-columns: 1fr;
  }

  .product-info p {
    min-height: auto;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form button {
    min-height: 48px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}
