215 lines
8.7 KiB
HTML
215 lines
8.7 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>향연 · 자연 침향 아카이브</title>
|
|
<meta
|
|
name="description"
|
|
content="연기는 흩어지고 향기만 머뭅니다. 자연 침향목의 수지 함량과 숙성 연도를 기록으로 남기는 향 아카이브. 서울 삼청동."
|
|
/>
|
|
<meta property="og:title" content="향연 · 자연 침향 아카이브" />
|
|
<meta property="og:description" content="수지 함량과 숙성 연도를 기록으로 남기는 침향 아카이브." />
|
|
<meta property="og:type" content="website" />
|
|
<meta name="theme-color" content="#F6F2E9" />
|
|
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
|
<link
|
|
rel="stylesheet"
|
|
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=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"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
|
|
|
<header class="site-head">
|
|
<div class="wrap head-inner">
|
|
<a class="wordmark" href="#main">향연</a>
|
|
<nav class="nav" aria-label="섹션">
|
|
<a href="#wood">향목</a>
|
|
<a href="#aging">숙성</a>
|
|
<a href="#collection">아카이브</a>
|
|
<a href="#visit">방문</a>
|
|
</nav>
|
|
</div>
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<figure class="hero-photo reveal" style="--delay: 120ms">
|
|
<img
|
|
src="./assets/smoke.webp"
|
|
alt="밝은 배경의 검은 받침대에서 한 줄기 침향 연기가 곧게 피어오르는 모습"
|
|
width="900"
|
|
height="1200"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
/>
|
|
<figcaption>침향 연출 이미지 · 가상 아카이브</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="wood" class="section" aria-labelledby="wood-h">
|
|
<div class="wrap two">
|
|
<figure class="two-photo reveal">
|
|
<img
|
|
src="./assets/agarwood.webp"
|
|
alt="자연 침향 단면 — 짙은 수지 결과 하얀 목질이 함께 보이는 절편"
|
|
width="1100"
|
|
height="825"
|
|
loading="lazy"
|
|
/>
|
|
<figcaption>자연 침향 단면 · 수지와 목질</figcaption>
|
|
</figure>
|
|
<div class="two-text">
|
|
<h2 id="wood-h">병든 나무만이<br />이 향을 가집니다</h2>
|
|
<p>
|
|
침향은 나무의 향이 아니라 나무의 상처입니다. 상처 입은 나무가 스스로를
|
|
아무려기 위해 분비한 수지가 오랜 세월 굳은 것 — 그래서 심은 나무에서는
|
|
얻을 수 없고, 자연에서 쓰러진 나무에서만 길어 올립니다.
|
|
</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>
|
|
<p class="muted">
|
|
들여온 해와 수지 함량, 상태를 한 줄에서 읽는 기록 형식입니다. 아래
|
|
연도·산지·수지 함량은 실제 측정이나 재고를 뜻하지 않습니다.
|
|
</p>
|
|
</div>
|
|
<div class="table-wrap reveal">
|
|
<table>
|
|
<caption class="sr-only">
|
|
숙성 기록 예시 — 입목 연도, 산지, 수지 함량, 상태
|
|
</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">입목</th>
|
|
<th scope="col">산지</th>
|
|
<th scope="col" class="num">수지 함량</th>
|
|
<th scope="col">상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">2001년</th>
|
|
<td>베트남 카호아</td>
|
|
<td class="num">64.2%</td>
|
|
<td>열매 · 상태 예시</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2012년</th>
|
|
<td>인도네시아 리아우</td>
|
|
<td class="num">51.8%</td>
|
|
<td>침향 절편 · 상태 예시</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2024년</th>
|
|
<td>캄보디아 프놈펜 인근</td>
|
|
<td class="num">47.3%</td>
|
|
<td>숙성 중 · 상태 예시</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p class="aging-note muted">
|
|
수지 함량과 상태 표기는 기록 형식을 설명하기 위한 예시 값입니다.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="collection" class="section" aria-labelledby="collection-h">
|
|
<div class="wrap">
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
<address>
|
|
가상 아카이브 안내<br />
|
|
실제 장소와 방문 경로를 제공하지 않습니다.
|
|
</address>
|
|
</div>
|
|
<div class="visit-info">
|
|
<dl>
|
|
<div>
|
|
<dt>방문 시간 예시</dt>
|
|
<dd>화–토 · 11:00, 14:00, 16:00 회당 50분</dd>
|
|
</div>
|
|
<div>
|
|
<dt>예약</dt>
|
|
<dd>실제 예약 및 문의를 받지 않습니다.</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<p class="visit-mark">향연</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|