feat: strengthen design skill and refresh all showcases

apps/site/public/work/hyang-incense/index.html

@@ -16,13 +16,13 @@
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
+      href="./styles/fonts.css?v=20260912all"
     />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     />
-    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <link rel="stylesheet" href="./styles/main.css?v=20260912all" />
     <link
       rel="icon"
       href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F6F2E9'/%3E%3Cpath d='M16 6c0 3 0 5 0 7m0 4c0 3 2 3 2 5m-2 2c0 2-2 3-2 5' fill='none' stroke='%237C3B24' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"
@@ -45,24 +45,20 @@
     </header>
 
     <main id="main">
-      <!--
-        히어로 — 이 페이지의 리스크: 상품 사진 대신 연기 한 줄기.
-        여백이 주인공이고 사진은 그 여백을 가르는 흔적 하나다.
-      -->
       <section class="hero" aria-labelledby="hero-h">
         <div class="wrap hero-grid">
           <div class="hero-text">
-            <p class="hero-kicker reveal">자연 침향 · 백단 · 서울 삼청동</p>
+            <p class="hero-kicker reveal">가상 향 아카이브 · 기록 형식 예시</p>
             <h1 id="hero-h" class="reveal" style="--delay: 80ms">
               연기는 흩어지고<br />향기만 머뭅니다
             </h1>
             <p class="lead reveal" style="--delay: 160ms">
-              향연은 향을 판매하기 전에 기록부터 남깁니다. 어느 해에 들인 나무인지,
-              수지가 몇이었는지, 연소에 몇 분이 걸렸는지. 향은 사라지는 것이니
-              남는 것은 문서뿐입니다.
+              향연은 향의 산지·숙성·연소 정보를 어떻게 기록할 수 있는지 보여 주는
+              가상 아카이브입니다. 아래 상품·가격·방문 정보는 판매나 예약을 위한
+              정보가 아니라 기록 형식의 예시입니다.
             </p>
             <div class="hero-actions reveal" style="--delay: 220ms">
-              <a class="btn" href="#collection">아카이브 보기</a>
+              <a class="btn" href="#collection">기록 구성 보기</a>
             </div>
           </div>
           <figure class="hero-photo reveal" style="--delay: 120ms">
@@ -74,15 +70,11 @@
               loading="eager"
               fetchpriority="high"
             />
-            <figcaption>침향 한 줄기 · 삼청동 아카이브룸</figcaption>
+            <figcaption>침향 연출 이미지 · 가상 아카이브</figcaption>
           </figure>
         </div>
       </section>
 
-      <!--
-        향목 — 나무의 단면. 침향은 나무가 아니라 나무의 병(병해수지)이라는 것을
-        이 섹션에서만 설명한다.
-      -->
       <section id="wood" class="section" aria-labelledby="wood-h">
         <div class="wrap two">
           <figure class="two-photo reveal">
@@ -103,31 +95,26 @@
               얻을 수 없고, 자연에서 쓰러진 나무에서만 길어 올립니다.
             </p>
             <p class="muted">
-              향연은 인공접종 목재를 다루지 않습니다. 매입 단계에서 수지 함량을
-              측정해 기록하고, 그 기록이 통과하지 못한 나무는 아카이브에 들어오지
-              않습니다.
+              이 섹션은 산지·수지 함량·숙성 상태를 함께 기록하는 방식을 설명합니다.
+              특정 목재의 매입 기준이나 실제 아카이브 운영 정책을 뜻하지 않습니다.
             </p>
           </div>
         </div>
       </section>
 
-      <!--
-        숙성 — 아카이브의 뼈대. 연도가 곧 목록이다.
-        카드가 아니라 장부의 행: 연도 · 입목 · 수지 · 상태.
-      -->
       <section id="aging" class="section band" aria-labelledby="aging-h">
         <div class="wrap">
           <div class="aging-head">
-            <h2 id="aging-h">숙성 장부</h2>
+          <h2 id="aging-h">숙성 기록 예시</h2>
             <p class="muted">
-              들여온 해와 수지 함량, 지금 상태입니다. 향은 재고가 아니라 연도입니다 —
-              같은 나무가 다시 들어오지 않습니다.
+              들여온 해와 수지 함량, 상태를 한 줄에서 읽는 기록 형식입니다. 아래
+              연도·산지·수지 함량은 실제 측정이나 재고를 뜻하지 않습니다.
             </p>
           </div>
           <div class="table-wrap reveal">
             <table>
               <caption class="sr-only">
-                숙성 장부 — 입목 연도, 산지, 수지 함량, 현재 상태
+                숙성 기록 예시 — 입목 연도, 산지, 수지 함량, 상태
               </caption>
               <thead>
                 <tr>
@@ -142,85 +129,80 @@
                   <th scope="row">2001년</th>
                   <td>베트남 카호아</td>
                   <td class="num">64.2%</td>
-                  <td>열매 · 매진 임박</td>
+                  <td>열매 · 상태 예시</td>
                 </tr>
                 <tr>
                   <th scope="row">2012년</th>
                   <td>인도네시아 리아우</td>
                   <td class="num">51.8%</td>
-                  <td>침향 절편 · 소량</td>
+                  <td>침향 절편 · 상태 예시</td>
                 </tr>
                 <tr>
                   <th scope="row">2024년</th>
                   <td>캄보디아 프놈펜 인근</td>
                   <td class="num">47.3%</td>
-                  <td>숙성 중 · 비매품</td>
+                  <td>숙성 중 · 상태 예시</td>
                 </tr>
               </tbody>
             </table>
           </div>
           <p class="aging-note muted">
-            수지 함량: 에탄올 용출법 실측. 열매(초험)는 기증용으로만 남겨둡니다.
+            수지 함량과 상태 표기는 기록 형식을 설명하기 위한 예시 값입니다.
           </p>
         </div>
       </section>
 
-      <!--
-        아카이브 — 세 개의 물건. 사진 없는 목록.
-        종이의 물성을 믿고 글자로만 판다(R2: 텍스트가 상품).
-      -->
       <section id="collection" class="section" aria-labelledby="collection-h">
         <div class="wrap">
-          <h2 id="collection-h">지금 만질 수 있는 것</h2>
+          <h2 id="collection-h">기록으로 살펴보는 구성</h2>
           <ol class="collection">
             <li class="item reveal">
               <div class="item-text">
                 <h3>자연 침향 절편</h3>
                 <p>2001년 입목 · 수지 64.2% · 10g</p>
               </div>
-              <p class="item-price">180,000원</p>
+              <p class="item-price">예시 180,000원</p>
             </li>
             <li class="item reveal" style="--delay: 80ms">
               <div class="item-text">
                 <h3>백단 침 향</h3>
                 <p>인도 마이소르 노목 · 20g · 연소 45분</p>
               </div>
-              <p class="item-price">42,000원</p>
+              <p class="item-price">예시 42,000원</p>
             </li>
             <li class="item reveal" style="--delay: 160ms">
               <div class="item-text">
                 <h3>침향 인엽</h3>
                 <p>리아우산 · 2012년 입목 · 3g</p>
               </div>
-              <p class="item-price">96,000원</p>
+              <p class="item-price">예시 96,000원</p>
             </li>
           </ol>
           <p class="muted collection-note">
-            모든 물건은 삼청동 아카이브룸에서 직접 내어드립니다. 향을 맡아 보고
-            정하시면 됩니다 — 예약제이며 회당 한 분만 들어갑니다.
+            이 목록은 상품명·단위·가격을 기록하는 방식을 보여 줍니다. 실제 상품 판매,
+            향 시향, 예약 또는 방문을 제공하지 않습니다.
           </p>
         </div>
       </section>
 
-      <!-- 방문 — 마지막 섹션이 푸터 역할 -->
       <section id="visit" class="section visit" aria-labelledby="visit-h">
         <div class="wrap visit-grid">
           <div>
-            <h2 id="visit-h">삼청동, 예약제</h2>
+            <h2 id="visit-h">방문 정보 예시</h2>
             <address>
-              서울 종로구 삼청로 00길 00<br />
-              경복궁역 5번 출구에서 도보 6분
+              가상 아카이브 안내<br />
+              실제 장소와 방문 경로를 제공하지 않습니다.
             </address>
           </div>
           <div class="visit-info">
             <dl>
               <div>
-                <dt>예약</dt>
+                <dt>방문 시간 예시</dt>
                 <dd>화–토 · 11:00, 14:00, 16:00 회당 50분</dd>
               </div>
               <div>
-                <dt>문의</dt>
-                <dd><a class="link" href="mailto:archive@hyang.kr">archive@hyang.kr</a></dd>
+                <dt>예약</dt>
+                <dd>실제 예약 및 문의를 받지 않습니다.</dd>
               </div>
             </dl>
           </div>
@@ -229,18 +211,5 @@
       </section>
     </main>
 
-    <script>
-      const io = new IntersectionObserver(
-        (entries) => {
-          for (const e of entries) {
-            if (!e.isIntersecting) continue;
-            e.target.classList.add("is-in");
-            io.unobserve(e.target);
-          }
-        },
-        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
-      );
-      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
-    </script>
   </body>
 </html>