designpaca/apps/site/public/work/saebyeok-cheonggwa/index.html
Yun Chan 4d813420dc
Some checks failed
ci / build (push) Failing after 1m52s
feat(showcase): 신규 쇼케이스 3종 — RFS · 트웬티온스 · 새벽청과
각 워크를 서로 다른 클라이언트로 보고 0~6단계를 따로 돌았다(토큰 체계 신규 정의 =
전체 경로). 셋 모두 라이트/다크 반전을 .band-light / .band-dark 가 --band-* 를
재정의하는 규칙으로 정의해 하드 게이트 4를 통과시켰다 — 반전이 섹션마다의 기분이
아니라 두 클래스가 만드는 규칙이다.

RFS — 실시간 유체 시뮬레이터 (rfs-cfd)
  프리셋 darkroom-spec · 컨셉 "암실과 사양서"
  R1 luminary.ai · R2 teenage.engineering EP-133 · 보조 simscale.com (전부 실측)
  히어로에서 브라우저가 실제로 Navier–Stokes 를 푼다. 순수 WebGL2, three.js 미사용.
  이류 → 온도 소스 → 부력·설비 힘 → 발산 → 압력 Jacobi → 투영 → 파티클 전진.
  격자 224×126 / 파티클 26,000 / Jacobi 22회, 좁은 화면은 절반으로 줄인다.
  prefers-reduced-motion 이면 시작하지 않고 그 자리에 RFS 실물 파티클 렌더가 남는다.
  단위계로 세 번 실패했다: dt 를 프레임 단위로 넘겨 파티클이 0.2초 만에 소멸했고,
  전부 급기구에서만 재생성해 실 한 가닥이 됐으며, 랙이 위로 뿜어 핫/콜드 아일이
  갈라지지 않았다. dt 를 초로 못박고 속도를 초당 격자 셀로 통일해 해결했다.
  수치는 전부 RFS 저장소 README 출처. 정확도 지표는 싣지 않았다 — 사내 검증 자료이고
  현재 통과 상태가 아니다.

트웬티온스 (twentyoz-corp)
  프리셋 field-record · 컨셉 "네 개의 현장"
  R1 samsara.com · R2 lars-mueller-publishers.com · R3 = 현행 twentyoz.kr 감사
  현행 사이트 실측: 대비 실패 172개 요소(9~11px 가 3.61:1), 한글 폰트 미지정으로
  한글이 시스템 기본으로 떨어짐, h1 자간 −0.06em(한글 상한의 세 배), 배경 #020202.
  'Digital Genetics' 은유가 산업용 IoT 사업을 가리고 있었다.
  유지한 자산은 radius 0 과 무채색·모노 기조.
  첫 화면에 회사 이름 대신 현장 선택기를 뒀다 — 라디오 그룹이라 JS 0바이트이고
  좌우 화살표 키가 그냥 먹는다. 파트너 19곳은 원본에 도메인 표기가 없어 나누지 않았다.

새벽청과 (saebyeok-cheonggwa)
  프리셋 market-board · 컨셉 "오늘 새벽 두 시의 값"
  R1 natoora.com · R2 phillips.com · R3 제철 12개월 띠
  커머스가 감추는 시세 변동을 히어로의 주인공으로 삼았다. 상품 사진은 아래로 내렸다.
  경매 시각·경락가격·등급·당도 표시 규정을 조사해 카피의 근거로 썼다.
  무화과 당도를 "—" 로 두고 값이 없는 게 아니라 표시가 허용되지 않는 품목이라고 적었다.
  등락은 색이 아니라 ▲▼보합 기호가 먼저다.
  표의 숫자가 예시임을 판 아래와 푸터 두 곳에 명시하고, 주소·전화는 비웠다(게이트 11).
  사진 4장은 codex 내장 image_gen 생성물이며 합계 341KB.

검증: Astro 빌드 통과, verify 체인 L0~L6 10계층 전부 통과,
showcase-audit 신규 3종 12/12 통과(320/390/768/1440).
성능 실측(RFS): JS 24KB · 총 704KB. 폰트만 530KB 로 예산(200KB) 초과 —
한글 웹폰트 자체가 원인이고 기존 cheongon-care 는 650KB 로 더 크다.
저장소 공통 baseline 이라 이번 판은 기록만 남기고 넘어간다.

기존 16종에서 발견된 70건(대비 미달·히어로 줄 수 초과)은 이번 범위를 넘어
design.md 에 목록만 남겼다.
2026-08-24 12:51:48 +09:00

573 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<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="#16181a" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<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="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css" />
<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='%2316181A'/%3E%3Cpath d='M6 20h20' stroke='%237FA8D9' stroke-width='2'/%3E%3Ccircle cx='13' cy='14' r='4.5' fill='none' stroke='%23F3F1EC' stroke-width='2'/%3E%3Cpath d='M13 9.5V7' stroke='%23F3F1EC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#top">
새벽청과 <span class="wordmark-han" aria-hidden="true">曉靑果</span>
</a>
<nav class="nav" aria-label="주요 섹션">
<a href="#route">오는 길</a>
<a href="#grade">고르는 법</a>
<a href="#season">제철</a>
<a href="#wholesale">납품</a>
</nav>
<p class="head-meta mono">02:00 경매</p>
</div>
</header>
<main id="main">
<!-- ══════════════════════════════════════════════════════════
1 · 히어로 = 오늘의 판. 새벽 두 시라서 어둡다
══════════════════════════════════════════════════════════ -->
<section class="band band-dark hero" id="top" aria-labelledby="heroHeading">
<!-- 새벽 두 시의 시장 통로. 판 뒤에 깔리므로 어둡게, 과일만 색을 갖게 찍었다 -->
<img
class="hero-bg"
src="./assets/dawn-aisle.webp"
width="1600"
height="900"
alt=""
aria-hidden="true"
/>
<div class="wrap hero-inner">
<p class="hero-stamp mono">
<span>오늘 경매</span>
<time datetime="2026-08-24T02:00+09:00">08월 24일 02:00</time>
<span class="stamp-sep" aria-hidden="true">·</span>
<span>하절기 기준</span>
</p>
<h1 id="heroHeading">
오늘 새벽<br />
두 시의 값
</h1>
<p class="hero-lead">
값은 매일 바뀝니다. 바뀌는 값을 감추고 파는 대신, 오늘 얼마에 받아 왔는지를
먼저 적습니다.
</p>
<table class="board">
<caption class="sr-only">
오늘 낙찰 품목 여섯 가지 — 산지, 등급, 당도, 규격, 낙찰가, 전일 대비
</caption>
<thead>
<tr>
<th scope="col">품목</th>
<th scope="col">산지</th>
<th scope="col" class="c-num">등급</th>
<th scope="col" class="c-num">당도</th>
<th scope="col" class="c-num">규격</th>
<th scope="col" class="c-num">낙찰가</th>
<th scope="col" class="c-num">전일 대비</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">백도 복숭아</th>
<td data-label="산지">경북 청도</td>
<td data-label="등급" class="c-num mono">특</td>
<td data-label="당도" class="c-num mono">12.5<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">4.5<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">38,000</td>
<td data-label="전일 대비" class="c-num mono delta up">▲ 2,000</td>
</tr>
<tr>
<th scope="row">샤인머스캣</th>
<td data-label="산지">경북 상주</td>
<td data-label="등급" class="c-num mono">특</td>
<td data-label="당도" class="c-num mono">18.2<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">2<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">26,500</td>
<td data-label="전일 대비" class="c-num mono delta down">▼ 1,500</td>
</tr>
<tr>
<th scope="row">캠벨얼리</th>
<td data-label="산지">충북 영동</td>
<td data-label="등급" class="c-num mono">상</td>
<td data-label="당도" class="c-num mono">15.4<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">5<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">31,000</td>
<td data-label="전일 대비" class="c-num mono delta flat">보합</td>
</tr>
<tr>
<th scope="row">홍로 사과</th>
<td data-label="산지">경북 영주</td>
<td data-label="등급" class="c-num mono">특</td>
<td data-label="당도" class="c-num mono">14.1<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">5<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">44,000</td>
<td data-label="전일 대비" class="c-num mono delta up">▲ 3,500</td>
</tr>
<tr>
<th scope="row">원황 배</th>
<td data-label="산지">전남 나주</td>
<td data-label="등급" class="c-num mono">상</td>
<td data-label="당도" class="c-num mono">12.8<span class="unit">Bx</span></td>
<td data-label="규격" class="c-num mono">7.5<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">52,000</td>
<td data-label="전일 대비" class="c-num mono delta down">▼ 2,000</td>
</tr>
<tr>
<th scope="row">무화과</th>
<td data-label="산지">전남 영암</td>
<td data-label="등급" class="c-num mono">특</td>
<td data-label="당도" class="c-num mono blank" title="당도 표시 대상 품목이 아닙니다">—</td>
<td data-label="규격" class="c-num mono">1.2<span class="unit">kg</span></td>
<td data-label="낙찰가" class="c-num mono price">24,000</td>
<td data-label="전일 대비" class="c-num mono delta up">▲ 1,000</td>
</tr>
</tbody>
</table>
<ul class="board-notes">
<li>
사과와 배는 같은 날 <span class="mono">08:30</span> 경매입니다. 나머지 넷은
<span class="mono">02:00</span> 에 붙습니다.
</li>
<li>
당도 칸의 <span class="mono">—</span> 는 값이 없다는 뜻이 아니라
<strong>표시가 허용되지 않는 품목</strong>이라는 뜻입니다. 무화과는 당도 표기
대상 13개 품목에 들어 있지 않습니다.
</li>
<li>
낙찰가는 경매에서 받아 온 값이고, 여기에 선별·포장·배송이 붙어 판매가가 됩니다.
두 값을 같은 것처럼 적지 않습니다.
</li>
<li class="note-demo">
위 표의 숫자는 <strong>이 쇼케이스를 위한 예시</strong>입니다. 실제 운영에서는
그날 경매 결과가 그대로 들어옵니다.
</li>
</ul>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
2 · 어떻게 오는가
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-route" id="route" aria-labelledby="routeHeading">
<div class="wrap">
<h2 id="routeHeading">밭에서 문 앞까지 다섯 번 손이 바뀝니다</h2>
<p class="section-lead">
이 경로는 우리가 만든 것이 아니라 도매시장이 원래 그렇게 돌아갑니다.
우리는 네 번째 자리에 서 있습니다.
</p>
<ol class="route">
<li>
<p class="route-num mono">01</p>
<h3>출하</h3>
<p>산지에서 따고 골라 담아 시장으로 보냅니다.</p>
</li>
<li>
<p class="route-num mono">02</p>
<h3>수집</h3>
<p>도매법인이 그날 들어온 물량을 받아 경매에 올립니다.</p>
</li>
<li>
<p class="route-num mono">03</p>
<h3>경매</h3>
<p>새벽 두 시. 값이 여기서 정해집니다. 낙찰된 값을 경락가격이라 부릅니다.</p>
</li>
<li class="route-here">
<p class="route-num mono">04</p>
<h3>낙찰 — 우리가 서는 자리</h3>
<p>
중도매인 자격으로 직접 받습니다. 어느 산지의 어느 등급을 얼마에 받았는지가
위의 판에 그대로 올라갑니다.
</p>
</li>
<li>
<p class="route-num mono">05</p>
<h3>그날 아침 배송</h3>
<p>다시 창고에 재우지 않습니다. 경매장에서 나온 상자가 그대로 갑니다.</p>
</li>
</ol>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
3 · 고르는 법
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-grade" id="grade" aria-labelledby="gradeHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="gradeHeading">판에 적힌 네 글자를 읽는 법</h2>
</div>
<div class="split-body">
<dl class="terms">
<div>
<dt>등급 <span class="term-en mono">특 · 상 · 보통</span></dt>
<dd>
크기가 고른가, 흠이 없는가, 색이 제대로 들었는가를 봅니다. 농산물 표준규격이
품목마다 따로 정해 두고 있습니다. <strong>당도를 표시할 수 있는 것은
특·상 등급뿐</strong>입니다.
</dd>
</div>
<div>
<dt>당도 <span class="term-en mono">Brix</span></dt>
<dd>
용액 100g 에 든 당이 몇 g 인지를 나타냅니다. 굴절당도계에 과즙 한 방울을
올려 잽니다. 높다고 늘 맛있는 것은 아니고 산도와의 균형이 맛을 정합니다 —
그래서 숫자만 크게 적지 않습니다.
</dd>
</div>
<div>
<dt>선과 <span class="term-en mono">選果</span></dt>
<dd>
기계로 골라내는 일입니다. 드럼식은 지름으로, 중량식은 무게로 나눕니다.
같은 상자 안의 알이 고른 이유가 여기 있습니다.
</dd>
</div>
<div>
<dt>규격 <span class="term-en mono">kg</span></dt>
<dd>
상자 단위입니다. 사과는 2·5·7.5·10kg, 포도는 2·3·4·5kg 로 거래됩니다.
같은 값이라도 규격이 다르면 비교가 안 되므로 판에 함께 적습니다.
</dd>
</div>
</dl>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
4 · 제철 띠 — 12개월
══════════════════════════════════════════════════════════ -->
<section class="band band-dark section-season" id="season" aria-labelledby="seasonHeading">
<div class="wrap">
<p class="eyebrow">제철</p>
<h2 id="seasonHeading">없을 때는 없다고 적습니다</h2>
<p class="section-lead">
철이 아닌 것을 굳이 구해 오지 않습니다. 아래 띠에서 칸이 찬 달에만 그 품목이
판에 오릅니다.
</p>
<div class="season-scroll">
<table class="season">
<caption class="sr-only">품목별 제철 달력 — 가로축은 1월부터 12월</caption>
<thead>
<tr>
<th scope="col" class="season-item">품목</th>
<th scope="col" data-m="1">1</th>
<th scope="col" data-m="2">2</th>
<th scope="col" data-m="3">3</th>
<th scope="col" data-m="4">4</th>
<th scope="col" data-m="5">5</th>
<th scope="col" data-m="6">6</th>
<th scope="col" data-m="7">7</th>
<th scope="col" data-m="8">8</th>
<th scope="col" data-m="9">9</th>
<th scope="col" data-m="10">10</th>
<th scope="col" data-m="11">11</th>
<th scope="col" data-m="12">12</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">딸기</th>
<td class="on" data-m="1"><span class="sr-only">제철</span></td>
<td class="on" data-m="2"><span class="sr-only">제철</span></td>
<td class="on" data-m="3"><span class="sr-only">제철</span></td>
<td class="on" data-m="4"><span class="sr-only">제철</span></td>
<td data-m="5"></td><td data-m="6"></td><td data-m="7"></td><td data-m="8"></td>
<td data-m="9"></td><td data-m="10"></td><td data-m="11"></td>
<td class="on" data-m="12"><span class="sr-only">제철</span></td>
</tr>
<tr>
<th scope="row">참외</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td class="on" data-m="4"><span class="sr-only">제철</span></td>
<td class="on" data-m="5"><span class="sr-only">제철</span></td>
<td class="on" data-m="6"><span class="sr-only">제철</span></td>
<td class="on" data-m="7"><span class="sr-only">제철</span></td>
<td data-m="8"></td><td data-m="9"></td><td data-m="10"></td>
<td data-m="11"></td><td data-m="12"></td>
</tr>
<tr>
<th scope="row">복숭아</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td>
<td class="on" data-m="6"><span class="sr-only">제철</span></td>
<td class="on" data-m="7"><span class="sr-only">제철</span></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td data-m="10"></td><td data-m="11"></td><td data-m="12"></td>
</tr>
<tr>
<th scope="row">포도</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
<td class="on" data-m="7"><span class="sr-only">제철</span></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td data-m="11"></td><td data-m="12"></td>
</tr>
<tr>
<th scope="row">무화과</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
<td data-m="7"></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td data-m="11"></td><td data-m="12"></td>
</tr>
<tr>
<th scope="row">사과</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
<td data-m="7"></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td class="on" data-m="11"><span class="sr-only">제철</span></td>
<td class="on" data-m="12"><span class="sr-only">제철</span></td>
</tr>
<tr>
<th scope="row">배</th>
<td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
<td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
<td data-m="7"></td>
<td class="on" data-m="8"><span class="sr-only">제철</span></td>
<td class="on" data-m="9"><span class="sr-only">제철</span></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td class="on" data-m="11"><span class="sr-only">제철</span></td>
<td data-m="12"></td>
</tr>
<tr>
<th scope="row">감귤</th>
<td class="on" data-m="1"><span class="sr-only">제철</span></td>
<td class="on" data-m="2"><span class="sr-only">제철</span></td>
<td data-m="3"></td><td data-m="4"></td><td data-m="5"></td>
<td data-m="6"></td><td data-m="7"></td><td data-m="8"></td>
<td data-m="9"></td>
<td class="on" data-m="10"><span class="sr-only">제철</span></td>
<td class="on" data-m="11"><span class="sr-only">제철</span></td>
<td class="on" data-m="12"><span class="sr-only">제철</span></td>
</tr>
</tbody>
</table>
</div>
<p class="season-note">
달마다 굵은 세로선이 이번 달입니다. 산지와 그해 날씨에 따라 두 주쯤은 앞뒤로
움직입니다.
</p>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
5 · 오늘 들어온 것 — 사진이 색을 갖는 자리
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-today" id="today" aria-labelledby="todayHeading">
<div class="wrap">
<h2 id="todayHeading">오늘 들어온 것</h2>
<p class="section-lead">
같은 품목이라도 산지가 바뀌면 다른 물건입니다. 누가 어디서 길렀는지를 함께 적습니다.
</p>
<div class="today-grid">
<figure class="today-card">
<img
src="./assets/pear-crate.webp"
width="1100"
height="825"
loading="lazy"
decoding="async"
alt="흰 그물망에 하나씩 싼 배가 얕은 나무 상자에 담겨 있고, 한 알은 상자 옆에 꺼내 놓여 있습니다"
/>
<figcaption>
<p class="card-name">원황 배 <span class="card-origin">전남 나주</span></p>
<dl class="card-spec mono">
<div><dt>등급</dt><dd>상</dd></div>
<div><dt>당도</dt><dd>12.8 Bx</dd></div>
<div><dt>규격</dt><dd>7.5 kg</dd></div>
</dl>
<p class="card-note">
나주 배는 물이 많고 단맛이 늦게 옵니다. 그물망은 멋이 아니라 눌림을 막는
포장입니다.
</p>
</figcaption>
</figure>
<figure class="today-card">
<img
src="./assets/grape-bloom.webp"
width="900"
height="1200"
loading="lazy"
decoding="async"
alt="흰 종이 위에 놓인 진자주색 포도 송이. 껍질에 하얀 과분이 그대로 남아 있습니다"
/>
<figcaption>
<p class="card-name">캠벨얼리 <span class="card-origin">충북 영동</span></p>
<dl class="card-spec mono">
<div><dt>등급</dt><dd>상</dd></div>
<div><dt>당도</dt><dd>15.4 Bx</dd></div>
<div><dt>규격</dt><dd>5 kg</dd></div>
</dl>
<p class="card-note">
껍질에 앉은 흰 가루는 과분입니다. 씻겨 나간 것이 아니라 남아 있는 쪽이
덜 만져진 것입니다.
</p>
</figcaption>
</figure>
<figure class="today-card today-card-wide">
<img
src="./assets/refractometer.webp"
width="1100"
height="825"
loading="lazy"
decoding="async"
alt="스테인리스 작업대 위 굴절당도계의 프리즘 판에 과즙 한 방울이 올려져 있습니다"
/>
<figcaption>
<p class="card-name">당도는 이렇게 잽니다</p>
<p class="card-note">
굴절당도계에 과즙을 한 방울 올리고 빛이 꺾이는 각을 봅니다.
상자마다 재는 것이 아니라 들어온 로트에서 표본을 뽑아 잽니다 —
그래서 판의 당도는 그 로트의 값입니다.
</p>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
6 · 납품
══════════════════════════════════════════════════════════ -->
<section class="band band-dark section-wholesale" id="wholesale" aria-labelledby="wsHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="wsHeading">가게에 넣는 경우</h2>
</div>
<div class="split-body">
<p class="lead">
카페·베이커리·식당처럼 매일 같은 품질이 필요한 곳은 소매와 다른 조건으로
봅니다. 값보다 <strong>편차</strong>가 문제이기 때문입니다.
</p>
<dl class="ws-rows">
<div>
<dt>주문 마감</dt>
<dd>전날 <span class="mono">21:00</span> — 그래야 새벽 경매에서 물량을 잡습니다</dd>
</div>
<div>
<dt>배송</dt>
<dd>같은 날 오전. 수도권은 직접 돌고, 그 밖은 새벽 물류로 보냅니다</dd>
</div>
<div>
<dt>등급 고정</dt>
<dd>
등급을 계약으로 묶습니다. 그날 시세가 올라도 등급을 낮춰 값을 맞추지
않습니다
</dd>
</div>
<div>
<dt>시세 공유</dt>
<dd>낙찰가를 그대로 전달합니다. 마진은 별도 항목으로 적습니다</dd>
</div>
<div>
<dt>최소 물량</dt>
<dd>품목당 상자 <span class="mono">3</span> 개부터</dd>
</div>
</dl>
<a class="btn" href="mailto:order@saebyeok-cheonggwa.example?subject=%EB%82%A9%ED%92%88%20%EB%AC%B8%EC%9D%98">
납품 조건 문의
</a>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
7 · 문의
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-contact" id="contact" aria-labelledby="contactHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="contactHeading">문의</h2>
</div>
<div class="split-body">
<dl class="contact-rows">
<div>
<dt>여는 시각</dt>
<dd>새벽 <span class="mono">01:30</span> – 낮 <span class="mono">12:00</span> · 일요일 휴무</dd>
</div>
<div>
<dt>주문 마감</dt>
<dd>전날 <span class="mono">21:00</span></dd>
</div>
<div>
<dt>메일</dt>
<dd><a class="mono" href="mailto:order@saebyeok-cheonggwa.example">order@saebyeok-cheonggwa.example</a></dd>
</div>
</dl>
<p class="contact-fine">
주소·전화·사업자 정보는 실제 상호가 정해진 뒤에 채웁니다.
지어낸 값을 임시로 적어 두지 않습니다.
</p>
</div>
</div>
</section>
</main>
<footer class="band band-dark site-foot">
<div class="wrap foot-inner">
<p class="foot-name">새벽청과 <span aria-hidden="true">曉靑果</span></p>
<p class="foot-line">새벽 경매에서 받아 그날 아침에 보냅니다</p>
<p class="foot-fine">
이 페이지는 designpaca 쇼케이스입니다. 실제 영업하는 상호가 아니며,
판의 숫자는 화면 구성을 보이기 위한 예시입니다. 경매 시각·등급·당도 표시 규정 등
제도에 관한 설명은 실제 농산물 표준규격과 도매시장 운영 방식을 따릅니다.
</p>
</div>
</footer>
<script>
/* 이번 달 칸에 표시를 남긴다. 달이 바뀌면 저절로 따라가야 하므로 이것만 스크립트다. */
(() => {
const m = new Date().getMonth() + 1;
document.querySelectorAll(`.season [data-m="${m}"]`).forEach((el) => {
el.classList.add("is-now");
});
const head = document.querySelector(`.season thead [data-m="${m}"]`);
if (head) head.setAttribute("aria-current", "date");
})();
</script>
</body>
</html>