8e3cdb0d3b
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
263 lines
12 KiB
HTML
263 lines
12 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="서울 삼청동의 가상 침향 전문점 향연. 2001년부터 들여온 자연 침향의 산지, 수지 함량, 입고 연도를 적어 절편과 선향을 팔고, 화요일부터 토요일 하루 세 번 시향 방문을 받습니다."
|
|
/>
|
|
<meta property="og:title" content="향연 — 삼청동 자연 침향 전문점" />
|
|
<meta property="og:description" content="산지, 수지 함량, 입고 연도를 적어 파는 자연 침향과 시향 방문 안내." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://designpaca.chanpaca.net/work/hyang-incense/assets/smoke.webp" />
|
|
<meta property="og:image:alt" content="검은 돌 받침에 꽂힌 침향 한 자루에서 연기가 오르는 모습" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="theme-color" content="#e6e1ea" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<!-- Gowun Batang은 표제·워드마크·연도·상품명·가격에만 쓰므로 text= 로 그 글자(59자)만 싣는다.
|
|
(풀 패밀리는 168KB, 서브셋은 수 KB — tokens §5 폰트 예산.) 표제·상품명 글자를 바꾸면
|
|
design.md "토큰과 예산"의 명령으로 text= 를 다시 만든다. -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Gowun+Batang&text=%2C0124689%EA%B0%80%EA%B5%B3%EA%B8%88%EA%B9%81%EB%82%98%EB%82%9C%EB%85%84%EB%8A%94%EB%8B%88%EB%8B%A4%EB%8B%A8%EB%90%9C%EB%93%A4%EB%9E%98%EB%A3%A8%EB%AC%B4%EB%B0%B1%EB%B2%88%EB%B6%80%EC%82%B4%EC%83%81%EC%83%9D%EC%84%A0%EC%84%B8%EC%88%98%EC%8A%B5%EC%8B%9C%EC%96%B4%EC%97%90%EC%97%B0%EC%98%A4%EC%99%94%EC%9A%94%EC%9B%90%EC%9D%80%EC%9D%BC%EC%9E%85%EC%9E%88%EC%9E%90%EC%9E%A5%EC%A0%88%EC%A7%80%EC%B2%98%EC%B9%A8%EC%B9%A9%ED%84%B0%ED%86%A0%ED%8E%B8%ED%95%98%ED%96%A5%ED%99%94&display=swap"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
|
|
/>
|
|
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
|
|
<!-- 히어로 누끼는 CSS 배경으로 오리므로(요소 넘침 없이 확대 크롭) LCP용 preload를 둔다(images §3-c). -->
|
|
<link rel="preload" as="image" href="./assets/smoke.webp" fetchpriority="high" />
|
|
<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='%23e6e1ea'/%3E%3Cpath d='M16 7c-2 3 2 5 0 8s2 5 0 8' fill='none' stroke='%236f6678' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='24' r='1.6' fill='%23b62752'/%3E%3Cellipse cx='16' cy='27' rx='7' ry='2.4' fill='%232a2530'/%3E%3C/svg%3E"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
|
|
|
<!-- 연기 재질. 글자에는 걸지 않는다 — 히어로의 .smoke 한 곳만 쓴다(svg-filters §2·§6). -->
|
|
<svg class="defs" aria-hidden="true" focusable="false">
|
|
<defs>
|
|
<filter id="smoke-wisp" x="-120%" y="-15%" width="340%" height="130%" color-interpolation-filters="sRGB">
|
|
<feTurbulence type="fractalNoise" baseFrequency="0.005 0.011" numOctaves="3" seed="11" result="n" />
|
|
<feDisplacementMap in="SourceGraphic" in2="n" scale="46" xChannelSelector="R" yChannelSelector="G" result="d" />
|
|
<feGaussianBlur in="d" stdDeviation="1.3" />
|
|
</filter>
|
|
<filter id="smoke-haze" x="-160%" y="-20%" width="420%" height="140%" color-interpolation-filters="sRGB">
|
|
<feTurbulence type="fractalNoise" baseFrequency="0.006 0.012" numOctaves="3" seed="4" result="n" />
|
|
<feDisplacementMap in="SourceGraphic" in2="n" scale="70" xChannelSelector="R" yChannelSelector="G" result="d" />
|
|
<feGaussianBlur in="d" stdDeviation="11" />
|
|
</filter>
|
|
<linearGradient id="smoke-fade" x1="0" y1="1" x2="0" y2="0">
|
|
<stop offset="0" stop-color="#fff" />
|
|
<stop offset="0.55" stop-color="#fff" stop-opacity="0.7" />
|
|
<stop offset="1" stop-color="#fff" stop-opacity="0" />
|
|
</linearGradient>
|
|
<!-- 마스크 영역을 경로 bbox보다 넓게 잡는다 — 기본 -10%~120%면 블러로 번진 연기가 세로로 잘린다. -->
|
|
<mask id="smoke-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="-1.5" y="-0.1" width="4" height="1.2">
|
|
<rect x="-1.5" y="-0.1" width="4" height="1.2" fill="url(#smoke-fade)" />
|
|
</mask>
|
|
</defs>
|
|
</svg>
|
|
|
|
<header class="brand-bar">
|
|
<div class="wrap bar-inner">
|
|
<p class="wordmark">향연</p>
|
|
<a class="action" href="#visit">시향 방문 안내</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section class="hero" aria-labelledby="hero-h">
|
|
<div class="wrap hero-grid">
|
|
<div class="stage">
|
|
<figure class="product">
|
|
<div class="smoke" aria-hidden="true">
|
|
<svg class="smoke-svg" viewBox="0 0 200 720" preserveAspectRatio="xMidYMax meet">
|
|
<g mask="url(#smoke-mask)">
|
|
<path
|
|
class="smoke-cloud"
|
|
d="M92 430 C 150 360 150 260 118 200 S 64 100 96 0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="54"
|
|
stroke-linecap="round"
|
|
filter="url(#smoke-haze)"
|
|
/>
|
|
<path
|
|
class="smoke-haze"
|
|
d="M100 673 C 102 600 60 540 86 450 S 156 310 120 220 S 62 100 96 0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="20"
|
|
stroke-linecap="round"
|
|
filter="url(#smoke-haze)"
|
|
/>
|
|
<path
|
|
class="smoke-wisp"
|
|
d="M100 673 C 102 600 60 540 86 450 S 156 310 120 220 S 62 100 96 0"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.6"
|
|
stroke-linecap="round"
|
|
filter="url(#smoke-wisp)"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="cut"
|
|
role="img"
|
|
aria-label="검은 돌 받침에 꽂힌 침향 한 자루"
|
|
></div>
|
|
</figure>
|
|
</div>
|
|
<h1 id="hero-h">자연 침향</h1>
|
|
<ul class="facts">
|
|
<li>삼청동, 2001년부터</li>
|
|
<li>입고 연도와 산지, 수지 함량을 적어 팝니다</li>
|
|
<li>시향은 화요일부터 토요일, 하루 세 번</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="wood" class="section" aria-labelledby="wood-h">
|
|
<div class="wrap two">
|
|
<figure class="slab">
|
|
<div class="slab-cut">
|
|
<img
|
|
src="./assets/agarwood.webp"
|
|
alt="자연 침향 절편의 단면. 짙은 수지 결과 밝은 목질이 함께 보인다"
|
|
width="1100"
|
|
height="825"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<figcaption>자연 침향 단면. 검은 부분이 수지, 밝은 부분이 목질입니다.</figcaption>
|
|
</figure>
|
|
<div class="two-text">
|
|
<h2 id="wood-h">침향은 상처 난 나무에 수지가 굳어 생깁니다</h2>
|
|
<p>
|
|
침향나무는 상처를 입으면 스스로를 지키려고 수지를 내놓습니다. 이 수지가 오랜 세월
|
|
나무 속에서 굳은 것이 침향입니다. 심은 나무에서는 얻기 어려워서, 향연은 자연에서
|
|
쓰러진 나무에서 거둔 침향만 들여옵니다.
|
|
</p>
|
|
<p class="muted">
|
|
수지가 많을수록 절편은 무겁고 검으며, 물에 넣으면 가라앉습니다. 그래서 향연은
|
|
무게보다 수지 함량을 먼저 적습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="aging" class="section record" aria-labelledby="aging-h">
|
|
<div class="wrap">
|
|
<div class="record-head">
|
|
<h2 id="aging-h">가장 오래된 절편은 2001년에 들어왔습니다</h2>
|
|
<p class="muted">들여온 해와 산지, 수지 함량, 지금 상태를 한 줄에 적습니다.</p>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<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 class="is-aging">숙성 중</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3 id="collection" class="collection-h">지금 살 수 있는 향은 세 가지입니다</h3>
|
|
<ol class="collection">
|
|
<li class="item">
|
|
<div class="item-text">
|
|
<p class="item-name">자연 침향 절편</p>
|
|
<p>2001년 입고, 수지 64.2%, 10g</p>
|
|
</div>
|
|
<p class="item-price">180,000원</p>
|
|
</li>
|
|
<li class="item">
|
|
<div class="item-text">
|
|
<p class="item-name">백단 선향</p>
|
|
<p>인도 마이소르산 노목, 20g, 한 개비 45분</p>
|
|
</div>
|
|
<p class="item-price">42,000원</p>
|
|
</li>
|
|
<li class="item">
|
|
<div class="item-text">
|
|
<p class="item-name">침향 칩</p>
|
|
<p>인도네시아 리아우산, 2012년 입고, 3g</p>
|
|
</div>
|
|
<p class="item-price">96,000원</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="visit" class="section visit" aria-labelledby="visit-h">
|
|
<div class="wrap visit-grid">
|
|
<h2 id="visit-h">시향은 화요일부터 토요일, 하루 세 번입니다</h2>
|
|
<dl class="visit-info">
|
|
<div>
|
|
<dt>시간</dt>
|
|
<dd>11시, 14시, 16시. 회당 50분</dd>
|
|
</div>
|
|
<div>
|
|
<dt>인원</dt>
|
|
<dd>회당 최대 4명</dd>
|
|
</div>
|
|
<div>
|
|
<dt>방식</dt>
|
|
<dd>절편을 직접 데워 향을 맡아 봅니다</dd>
|
|
</div>
|
|
<div>
|
|
<dt>예약</dt>
|
|
<dd>가상 매장이라 예약과 문의를 받지 않습니다</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 페이지 범위의 가상 고지는 푸터 한 곳이 소유한다(trustworthy-showcases §4-b). -->
|
|
<footer class="site-foot">
|
|
<div class="wrap">
|
|
<p class="foot-mark">향연</p>
|
|
<p class="foot-line">
|
|
<span>삼청동 자연 침향 전문점</span>
|
|
<span>향연은 가상 브랜드 쇼케이스입니다. 기록과 가격, 방문 정보는 예시이며 실제 판매나 시향, 예약을 제공하지 않습니다.</span>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|