feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
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.
This commit is contained in:
Yun Chan
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
|
@ -1,13 +0,0 @@
|
|||
# MaruBuri source record
|
||||
|
||||
Downloaded 2026-09-12 from the official NAVER Hangeul static host. The files are retained unchanged: no conversion or subsetting was performed.
|
||||
|
||||
| File | Official URL | HTTP content type | Size | SHA-256 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `MaruBuri-Regular.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2 | `font/woff2` | 433776 bytes | `4CF1341CF2F23FB3E263712DFDE1D8F25EEDCC328B696A2E5A2C8ADD55E5C17B` |
|
||||
| `MaruBuri-SemiBold.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2 | `font/woff2` | 466108 bytes | `7AEF4862FA3219B0A7DEB6746E27116A38C4069F4424EB51EDF103B29795F5C2` |
|
||||
|
||||
- Official stylesheet checked: https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css
|
||||
- Official NAVER license page saved verbatim as `LICENSE.html`: https://help.naver.com/service/11029/contents/18088?lang=ko&osType=PC
|
||||
- `LICENSE.html` SHA-256: `8538F7921744D5E040F603BC301465EFBD038F1054D0754B7508DE3286452EC3`
|
||||
- The saved official page includes the NAVER copyright notice and the SIL Open Font License 1.1 text for MaruBuri.
|
||||
|
|
@ -1,17 +1,91 @@
|
|||
# 목요일의 화원
|
||||
# design.md — 목요일의 화원
|
||||
|
||||
크림색 종이와 차분한 세리프, 세 장의 꽃 사진을 유지한다. 히어로는 제목·설명·상담 CTA와 사진을 분리한 0.9:1.1 두 칼럼으로 두고, 사진은 중심 꽃다발 하나와 보조 두 장을 공통 캡션선으로 묶는다. 아래 작업 기록도 대표 한 장과 보조 두 장의 크기 차이를 유지한다.
|
||||
## 진행 상태
|
||||
|
||||
| 판단 축 | 적용 | 한계 |
|
||||
| --- | --- | --- |
|
||||
| 구도 | Hofmann의 정렬과 대비를 참고해 사진 겹침을 기준선·캡션으로 바꿨다. | 원전의 방법을 보편적 시선 법칙으로 간주하지 않는다. |
|
||||
| 타입 | Ruder의 위계 구분을 참고해 큰 제목, 본문, 작은 캡션의 역할을 분리했다. | 실제 읽기 성과는 브라우저 검증에서 확인한다. |
|
||||
| 색 | Albers의 관계 관점을 참고해 크림 바탕과 적갈색 강조를 유지했다. | 색의 효과를 사용자 반응으로 단정하지 않는다. |
|
||||
- 0 현행 감사 완료(2026-10-06) → 1 레퍼런스 3슬롯 → 2 방향 A 선택(위임) → 3 토큰 → 4 구현 → 5 검증 통과 → 6 이 문서. 다음 작업은 "변경 기록"부터 읽는다.
|
||||
|
||||
토큰은 `--paper`, `--ink`, `--accent`, `--space-*`, `--step-*`에 유지한다. 로컬 MaruBuri 400/600은 `styles/fonts.css`에서, 본문 Pretendard는 기존 CDN에서 로드한다. 가상 문의·구독·가격성 안내와 기존 앵커 계약은 보존했다.
|
||||
## 브리프
|
||||
|
||||
## 2026-09-12 현재 검증 기록
|
||||
```
|
||||
무엇을: 매주 목요일에만 여는 서촌 꽃집의 한 페이지 사이트 리디자인(쇼케이스). 이번 주 꽃 목록이 첫 화면.
|
||||
누구에게: 이번 주 꽃을 사려는 사람이 목록을 보고 수요일 18시 전에 예약(전화·메일·인스타)한다. 보조: 격주 정기 구독 상담.
|
||||
제약: 정적 HTML/CSS, 사진 5장(flower-01~05.webp) 외 새 이미지 없음, 폰트는 jsdelivr OFL, 기본 언어 ko-KR(기존 사이트), 한자 금지, 재작업 배정값(plan.md thursday-flowers 행).
|
||||
```
|
||||
|
||||
- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
|
||||
- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
확정 슬롯(기존 파일 + plan.md 배정): 업종 꽃집·목요일 하루 운영, 목표 행동 예약 하나, 톤 평이한 사실 문장, 자산 사진 5장·상호·연락처·주소. 화면: `index.html` 한 장.
|
||||
|
||||
## 미확정
|
||||
|
||||
- 방향 선택(카드 A)은 사용자 위임으로 내가 골랐다. 이유는 "방향"에.
|
||||
- 이번 주 꽃 목록 여섯(작약·라넌큘러스·다알리아·스카비오사·유칼립투스·스위트피)은 사진에서 읽은 가설 목록이다. 실제 운영이면 주마다 바뀌는 값 — 가격·수량은 넣지 않았다.
|
||||
- 사진 없는 칸 둘("사진은 목요일 아침에 올립니다")은 정적 페이지라 갱신되지 않는다.
|
||||
- 리디바탕 배포처 원문(ridicorp.com)은 403으로 미확인. 미러 README의 OFL 1.1 전문으로 확인.
|
||||
|
||||
## 레퍼런스
|
||||
|
||||
| 슬롯 | URL | 가져온 원리 |
|
||||
|---|---|---|
|
||||
| R1 구조 | https://www.bloomandwild.com/send-flowers | h1 32px 작게, 격자가 첫 화면(1440 3열 1:1, 390 2열), 이름은 사진 아래. 원형 크롭 + 아래 라벨 |
|
||||
| R2 톤 | https://kukka.kr/ (푸터) | 연락처·운영시간·주소가 푸터의 본문 |
|
||||
| R3 디테일 | https://kukka.kr/kukka-scent/products/7648/ (390) | 하단 고정 바 74px, 버튼 52px 전폭, 행동 하나 |
|
||||
|
||||
미검증: 아치 크롭을 쓰는 실제 사이트(The Sill·Jenni Kayne·Flamingo Estate 열었으나 현재 아치 없음). 실측 기록은 `outputs/rework-2026-10-06/thursday-flowers.md`.
|
||||
|
||||
## 방향
|
||||
|
||||
격자·목록(3열 아치 창 6칸, 표제 1.5rem 한 줄, 리드 대신 사실 2개) · 리디바탕 400 / Pretendard 400 · #f7ebe9 분홍 · 142° 잎 녹색 #2f6b33 · 12px · 꽃 목록 격자 → 목요일 운영(사실 3줄 + 작업실 아치) → 구독 띠 → 예약·문의 → 연락처·영업시간 카드 푸터 → 하단 행동 바(≤767px) · 내비 없음(워드마크 + 예약 버튼, 모바일은 하단 고정 바) · 연락처·영업시간 카드 · 아치 마스크 4:5(원본 사각 유지, object-view-box 크롭) · 로드 때 스태거 한 번 + hover, 감소 모션 정지
|
||||
|
||||
**한 문장 컨셉**: 이번 주 꽃을 사러 올 사람이 여섯 칸을 훑고 수요일 18시 전에 예약한다.
|
||||
|
||||
**프리셋**: quiet-commerce 지배(목록이 설득, 행동 하나). 보조 없음. 재질 없음.
|
||||
|
||||
**표현 리스크**: 아치 마스크. 근거는 꽃다발을 세워 둔 실루엣(flower-01의 둥근 머리 + 곧은 줄기)이고, 검증은 1440·390 캡처에서 주피사체가 창 안에 남는지(통과)와 크림 사진이 분홍에 녹지 않는지(1px 안쪽 링으로 해결).
|
||||
|
||||
**카드**: A 목요일 장부(3열 아치 격자) · B 이름이 먼저(썸네일 + 큰 이름 세로 목록) · C 창가 진열대(가로 스냅 띠). **A 선택** — 재료가 "여섯 가지"라 1440에서 두 줄, 390에서 2열 네 칸이 첫 화면에 들어온다(R1 실측과 같은 열 수). B는 사진의 설득을 버리고, C는 390에서 격자가 아니다. 위임이므로 미확정에 올렸다.
|
||||
|
||||
**반사실**: 고유 요소 3(꽃 이름 아치 목록, 마감 수요일 18:00 + 최대 20건, 사진 없는 칸의 운영 문장). 세무사무소 치환 실패(격자·사실 모두 바꿔야 함) → 통과. 수렴: hannam(격자) 구도 1축 같음, hyang 내비 없음 1축 같음. 토큰 최고 유사도 0.53(twentyoz).
|
||||
|
||||
**보존 자산**: 상호, 사실·연락처·주소, 사진 5장, 앵커 `#main #work #thursday #subscribe #contact #visit`, 문장 "남는 꽃이 없어서 시들 일도 없습니다".
|
||||
|
||||
## 토큰과 예산
|
||||
|
||||
값은 `styles/tokens.css`. 역할: `--surface` 분홍 바탕(흰 꽃 사진이 크림 종이에서 사라졌던 문제를 분홍이 해결) · `--surface-deep` 사진 없는 칸·띠 · `--accent` 잎 녹색은 예약 버튼·링크·hover 이름에만(분홍 위 5.51:1, 흰 글자 6.42:1) · `--ink-muted` 6.54:1 · `--arch` 윗모서리 50%/40% + 아랫모서리 12px · `--step-name`(2rem) > `--step-title`(1.5rem) — 칸이 주인 · 본문 웨이트 400 하나(가변 서브셋 349KB → 정적 400 153KB 실측).
|
||||
|
||||
예산(tokens §5 기본선): JS 0KB · LCP 172ms(로컬) · CLS 0.0002 · **폰트 328KB(25파일) — 100KB 예산을 올렸다.** 이유: 한글 두 패밀리를 CDN 다이나믹 서브셋으로 싣고 페이지 글자가 청크 13개에 걸친다. 자체 서브셋은 규칙(CDN 링크)과 충돌해 쓰지 않았다.
|
||||
|
||||
## 이펙트와 폴백
|
||||
|
||||
- 스태거 등장: `.cell`·`.hero-head`에 `rise` 700ms, `--i × 70ms`. `prefers-reduced-motion: reduce`면 애니메이션 없음(실측 opacity 1). 스크롤 리빌 없음.
|
||||
- hover: 사진 1.04 확대 + 이름 녹색. `(hover: hover)`에서만.
|
||||
- `object-view-box`(다알리아·스카비오사 창): 미지원 엔진은 `object-position` 크롭으로 떨어진다. 깨지지 않는다.
|
||||
- 하단 바: `viewport-fit=cover` + `env(safe-area-inset-bottom)`, `html { scroll-padding-bottom }`·`body { padding-bottom }`.
|
||||
|
||||
## 하지 않기로 한 것
|
||||
|
||||
- 상단 바 내비·sticky·backdrop-filter — 섹션 넷, 행동 하나라 내비 없음(layout §2-c).
|
||||
- 스크롤 리빌(IntersectionObserver `.reveal`) — 배정표에 없고 05 계측의 수렴 항목. 지웠다.
|
||||
- 큰 표제·리드 문단·eyebrow 라벨 — 격자가 주인. 사실 2개가 리드를 대신한다.
|
||||
- 가격·수량·후기 — 사용자가 준 값이 아니다.
|
||||
- 사진 재사용(같은 파일 두 번) — 이전 판의 R6 결함. 사진 없는 칸은 아치 + 잎으로 비워 두었다.
|
||||
- 종이 재질·필터 — 배정 "재질 없음".
|
||||
- 로컬 MaruBuri(900KB) — jsdelivr 리디바탕으로 교체, `assets/fonts/`·`styles/fonts.css` 삭제.
|
||||
- 가운뎃점 메타 문자열 — 가시 텍스트에서 전부 제거.
|
||||
|
||||
## 검증
|
||||
|
||||
검증 줄: html-validate 0 · stylelint 0 · no-hanja PASS · showcase-audit PASS 6/0 · design-gate 충족 13/미검증 0/실패 0(static·visual·webkit 꺼짐) · 키보드 순서·포커스 가림 없음 · 감소 모션 정지 · 이펙트 끔 구조 유지 · similarity 최고 0.53.
|
||||
|
||||
시각 루브릭(캡처 `scratch/thursday/shots/final-*`, 약한 축부터): R6 1(손질 사진은 손이 주인공, 다알리아 창에 가위) · R9 1(200% 확대 2행만, 잎 SVG 평면) · R1 2 · R2 2 · R3 2 · R4 2 · R5 2 · R7 2 · R8 2 · R10 2 — 18/20, 통과선 충족. 근거 전문은 작업 노트.
|
||||
|
||||
미검증: WebKit 렌더(게이트 webkit 꺼짐), 실기기 safe area, 아치 레퍼런스 실측, ridicorp 라이선스 원문.
|
||||
|
||||
## 피드백 기록 · 보존 목록
|
||||
|
||||
- 보존: 상호·사실·연락처·사진·앵커 id, "남는 꽃이 없어서 시들 일도 없습니다"(이전 판에서 가장 사람 같은 문장으로 기록됨).
|
||||
- 피드백 없음(위임 재작업).
|
||||
|
||||
## 변경 기록
|
||||
|
||||
- 2026-10-06 · 재작업(plan.md 배정). 분할 히어로 → 아치 꽃 목록 격자, 상단 바 → 내비 없음 + 모바일 하단 예약 바, 마지막 섹션 → 연락처·영업시간 카드 `<footer>`, 마루 부리·크림·갈색 → 리디바탕·분홍·잎 녹색, radius 0 → 12px, 스크롤 리빌 → 로드 스태거 한 번. 로컬 폰트 삭제.
|
||||
- 2026-10-02 · (이전 판) 레드팀 06: 워드마크 한 줄 고정, 한글 라벨 자간 0.14em → 0.04em. 카피를 사장님 말투로(잠언·감성 캡션 제거). — 이번 판에서 라벨 자간은 0, 워드마크는 그대로 한 줄.
|
||||
- 2026-09-12 · (이전 판) editorial 프리셋, 0.9:1.1 분할 히어로, 로컬 MaruBuri 400/600, 크림 #f8f6f0, 마른 장미 #7c4a3f.
|
||||
|
|
|
|||
|
|
@ -2,303 +2,278 @@
|
|||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>목요일의 화원 · 플로럴 스튜디오</title>
|
||||
<!-- viewport-fit=cover 가 있어야 하단 행동 바의 env(safe-area-inset-bottom) 이 0이 아니다 -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>목요일의 화원 | 목요일에만 여는 서촌 꽃집</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 그 주에 좋은 꽃만 들여 주문받은 만큼만 만듭니다. 서울 서촌."
|
||||
content="매주 목요일 10시부터 19시까지만 여는 서울 서촌의 꽃집. 이번 주 목요일에 들이는 꽃 여섯 가지와 주문 마감(수요일 18시), 격주 정기 구독, 오시는 길."
|
||||
/>
|
||||
<meta property="og:title" content="목요일의 화원 · 플로럴 스튜디오" />
|
||||
<meta property="og:title" content="목요일의 화원 | 목요일에만 여는 서촌 꽃집" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="한 주에 한 번, 목요일에만 문을 여는 플로럴 스튜디오. 서울 서촌."
|
||||
content="이번 주 목요일에 들이는 꽃 여섯 가지. 주문 마감은 수요일 18시, 제작은 최대 20건."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta property="og:image" content="./assets/flower-01.webp" />
|
||||
<meta name="theme-color" content="#f8f6f0" />
|
||||
<meta name="theme-color" content="#f7ebe9" />
|
||||
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<!-- 한글 세리프. 라틴 세리프만 지정하면 한글이 시스템 기본으로 떨어져 전부 무너진다 -->
|
||||
<!--
|
||||
표제: 리디바탕(리디주식회사, SIL OFL 1.1). 배포처 ridicorp.com/ridibatang 은 페처에 403을 내
|
||||
fonts-archive 미러(README에 OFL 전문 인용)의 다이나믹 서브셋 CSS로 싣는다. 패밀리명 "RIDI Batang".
|
||||
본문: Pretendard 가변 다이나믹 서브셋.
|
||||
-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./styles/fonts.css?v=20260912all"
|
||||
href="https://cdn.jsdelivr.net/gh/fonts-archive/RIDIBatang/subsets/RIDIBatang-dynamic-subset.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 30V16a10 10 0 0 1 20 0v14z' fill='%232f6b33'/%3E%3C/svg%3E"
|
||||
/>
|
||||
<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%3Ctext y='26' font-size='26'%3E🌿%3C/text%3E%3C/svg%3E" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
||||
|
||||
<!--
|
||||
내비 없음. 한 장짜리이고 섹션이 넷, 행동은 "예약" 하나다(layout §2-c).
|
||||
브랜드 표기와 행동 하나만 둔다. 모바일에서는 이 행동이 하단 고정 바로 내려간다.
|
||||
-->
|
||||
<header class="site-head wrap">
|
||||
<a class="wordmark" href="#main">
|
||||
<span>목요일의</span> <span>화원</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="섹션">
|
||||
<a href="#work">작업</a>
|
||||
<a href="#thursday">목요일</a>
|
||||
<a href="#subscribe">정기</a>
|
||||
<a href="#visit">찾아오기</a>
|
||||
</nav>
|
||||
<p class="wordmark">목요일의 화원</p>
|
||||
<a class="btn head-cta" href="#contact">이번 주 주문 예약</a>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<!--
|
||||
히어로. 큰 사진 한 장을 깔지 않는다 — 그게 이 카테고리의 기본값이다.
|
||||
크기도 비율도 다른 사진 넷을 공통 정렬선 없이 흩뿌리고,
|
||||
그 사이 여백에 글자를 세로로 세운다. (R1: sarahwinward.com)
|
||||
히어로 = 이번 주 꽃 목록 격자. 표제는 작고 격자가 주인이다(layout §2-b 격자·목록).
|
||||
사진이 있는 꽃 넷은 아치 창으로, 아직 사진이 없는 둘은 같은 아치에 이름만 둔다.
|
||||
첫 화면에서 한 번만 순서대로 떠오른다(스태거). 스크롤 리빌은 없다.
|
||||
-->
|
||||
<section class="hero" aria-labelledby="hero-h">
|
||||
<div class="hero-inner wrap">
|
||||
<div class="hero-text">
|
||||
<p class="hero-role reveal">플로럴 스튜디오 / 서울 서촌 / 2019</p>
|
||||
|
||||
<div class="hero-body">
|
||||
<h1 id="hero-h" class="hero-h reveal">
|
||||
그 주에 좋은 꽃만<br />들입니다
|
||||
</h1>
|
||||
|
||||
<p class="lead hero-lead reveal" style="--delay: 120ms">
|
||||
목요일 아침에 시장에서 그 주의 꽃을 고르고, 주문받은 만큼만 만듭니다.
|
||||
남는 꽃이 없어서 시들 일도 없습니다.
|
||||
</p>
|
||||
|
||||
<a class="btn hero-cta reveal" href="#contact" style="--delay: 200ms">
|
||||
상담 신청하기
|
||||
</a>
|
||||
<section id="work" class="hero wrap" aria-labelledby="hero-h">
|
||||
<div class="hero-head">
|
||||
<h1 id="hero-h" class="hero-h">이번 주 목요일에 들이는 꽃 여섯 가지</h1>
|
||||
<dl class="hero-facts">
|
||||
<div>
|
||||
<dt>주문 마감</dt>
|
||||
<dd>수요일 18:00</dd>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<dt>이번 주 제작</dt>
|
||||
<dd>최대 20건</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="hero-photos">
|
||||
<figure class="ph ph-a reveal" style="--delay: 80ms">
|
||||
<ol class="flower-grid" aria-label="이번 주 꽃 목록">
|
||||
<li class="cell" style="--i: 0">
|
||||
<figure class="arch">
|
||||
<img
|
||||
src="./assets/flower-01.webp"
|
||||
alt="흰 라넌큘러스와 작약, 유칼립투스로 묶은 꽃다발"
|
||||
alt="흰 작약과 라넌큘러스, 유칼립투스를 묶은 꽃다발"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<figcaption>이번 주의 중심 꽃다발</figcaption>
|
||||
</figure>
|
||||
<figure class="ph ph-b reveal" style="--delay: 260ms">
|
||||
<h2 class="name">작약</h2>
|
||||
<p class="note">흰색. 이번 주 꽃다발의 중심입니다.</p>
|
||||
</li>
|
||||
<li class="cell" style="--i: 1">
|
||||
<figure class="arch">
|
||||
<img
|
||||
src="./assets/flower-03.webp"
|
||||
alt="꽃 한 송이의 꽃잎 결이 보이는 접사"
|
||||
alt="크림색 라넌큘러스 꽃잎을 가까이 찍은 사진"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="eager"
|
||||
/>
|
||||
</figure>
|
||||
<h2 class="name">라넌큘러스</h2>
|
||||
<p class="note">크림색. 꽃잎이 얇아 화병에 오래 둡니다.</p>
|
||||
</li>
|
||||
<li class="cell" style="--i: 2">
|
||||
<figure class="arch arch-dahlia">
|
||||
<img
|
||||
src="./assets/flower-02.webp"
|
||||
alt="나무 작업대 위에 놓인 연분홍 다알리아 한 송이"
|
||||
width="1448"
|
||||
height="1086"
|
||||
loading="eager"
|
||||
/>
|
||||
</figure>
|
||||
<h2 class="name">다알리아</h2>
|
||||
<p class="note">연분홍. 한 송이로 쓰거나 꽃다발 가운데에 둡니다.</p>
|
||||
</li>
|
||||
<li class="cell" style="--i: 3">
|
||||
<figure class="arch arch-scabiosa">
|
||||
<img
|
||||
src="./assets/flower-05.webp"
|
||||
alt="손으로 줄기를 잡고 가위로 다듬는 자줏빛 스카비오사"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>꽃잎의 결</figcaption>
|
||||
</figure>
|
||||
<figure class="ph ph-c reveal" style="--delay: 340ms">
|
||||
<img
|
||||
src="./assets/flower-02.webp"
|
||||
alt="작업대 위에 놓인 꽃 줄기와 가위, 노끈"
|
||||
width="1448"
|
||||
height="1086"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>목요일의 작업대</figcaption>
|
||||
</figure>
|
||||
<p class="hero-tags reveal" style="--delay: 420ms">
|
||||
주문 제작 / 정기 구독 / 공간 장식
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="name">스카비오사</h2>
|
||||
<p class="note">자줏빛. 줄기를 길게 남겨 손질합니다.</p>
|
||||
</li>
|
||||
<li class="cell" style="--i: 4">
|
||||
<div class="arch arch-empty" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" class="leaf" focusable="false">
|
||||
<path d="M8 40C8 22 20 10 40 8c-2 20-14 32-32 32z" />
|
||||
<path d="M10 38 36 12" stroke-linecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="name">유칼립투스</h2>
|
||||
<p class="note">사진은 목요일 아침에 올립니다. 꽃다발의 잎으로 씁니다.</p>
|
||||
</li>
|
||||
<li class="cell" style="--i: 5">
|
||||
<div class="arch arch-empty" aria-hidden="true">
|
||||
<svg viewBox="0 0 48 48" class="leaf" focusable="false">
|
||||
<path d="M8 40C8 22 20 10 40 8c-2 20-14 32-32 32z" />
|
||||
<path d="M10 38 36 12" stroke-linecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="name">스위트피</h2>
|
||||
<p class="note">사진은 목요일 아침에 올립니다. 연보라와 분홍이 섞여 옵니다.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p class="hero-foot">
|
||||
목요일 새벽 시장에서 그날 상태를 보고 들입니다. 상태가 나쁜 꽃은 목록에 있어도 빼고,
|
||||
대신 들인 꽃은 당일 알려 드립니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 왜 목요일인가 — 이름이 곧 운영 방식이라는 것을 여기서 푼다 -->
|
||||
<section id="thursday" class="section band" aria-labelledby="thursday-h">
|
||||
<div class="wrap two">
|
||||
<div class="two-text">
|
||||
<h2 id="thursday-h">
|
||||
일주일에 하루만 문을 엽니다
|
||||
</h2>
|
||||
<p>
|
||||
수요일 밤에 경매가 끝나고, 목요일 새벽 시장에 그 주의 꽃이 나옵니다.
|
||||
그날 좋은 것만 골라 그날 만듭니다.
|
||||
</p>
|
||||
<p>
|
||||
나머지 엿새는 만들지 않습니다. 미리 사다 두면 파는 날까지 꽃이 기다려야
|
||||
하고, 기다린 꽃은 이미 한 번 시든 꽃입니다.
|
||||
</p>
|
||||
<dl class="facts">
|
||||
<div>
|
||||
<dt>여는 날</dt>
|
||||
<dd>매주 목요일 10:00–19:00</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>주문 마감</dt>
|
||||
<dd>수요일 18:00</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>그 주 제작 수</dt>
|
||||
<dd>최대 20건</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<figure class="two-photo">
|
||||
<img
|
||||
src="./assets/flower-05.webp"
|
||||
alt="꽃 줄기를 가위로 다듬는 손"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption class="label">목요일 아침, 손질</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 작업 — 사진이 설득의 주체다. 크기 차이가 리듬이다 -->
|
||||
<section id="work" class="section" aria-labelledby="work-h">
|
||||
<div class="wrap">
|
||||
<p class="label">작업</p>
|
||||
<h2 id="work-h">같은 꽃을 두 번 쓰지 않습니다</h2>
|
||||
<p class="lead">
|
||||
주에 따라 들어오는 꽃이 다르니 결과도 매번 다릅니다. 지난 작업을 그대로
|
||||
다시 만들어 달라는 요청은 받지 않습니다.
|
||||
<!-- 왜 목요일인가 — 이름이 곧 운영 방식이다. 사실 세 줄과 작업실 사진 하나 -->
|
||||
<section id="thursday" class="section wrap two" aria-labelledby="thursday-h">
|
||||
<div class="two-text">
|
||||
<h2 id="thursday-h">목요일 10시부터 19시까지, 일주일에 하루만 엽니다</h2>
|
||||
<p>
|
||||
수요일 밤에 경매가 끝나고 목요일 새벽 시장에 그 주의 꽃이 나옵니다. 그날 좋은 것만
|
||||
골라 그날 만듭니다. 남는 꽃이 없어서 시들 일도 없습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap gallery">
|
||||
<figure class="g g-1">
|
||||
<img
|
||||
src="./assets/flower-04.webp"
|
||||
alt="창가 자연광이 드는 작업실, 양철 양동이에 담긴 꽃들과 나무 선반"
|
||||
width="1600"
|
||||
height="900"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>작업실 · 서촌</figcaption>
|
||||
</figure>
|
||||
<figure class="g g-2">
|
||||
<img
|
||||
src="./assets/flower-01.webp"
|
||||
alt="흰색과 크림색 위주로 묶은 꽃다발"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>화이트 온 화이트 · 6월</figcaption>
|
||||
</figure>
|
||||
<figure class="g g-3">
|
||||
<img
|
||||
src="./assets/flower-02.webp"
|
||||
alt="꽃 줄기와 가위, 노끈이 놓인 작업대를 위에서 본 모습"
|
||||
width="1448"
|
||||
height="1086"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>손질 전 · 목요일 오전</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<p class="muted work-note">
|
||||
더 많은 작업은
|
||||
<a class="link" href="https://instagram.com" rel="noopener">인스타그램</a>에
|
||||
주 단위로 올립니다.
|
||||
<p>
|
||||
나머지 요일에는 제작하지 않습니다. 꽃을 미리 사 두면 파는 날까지 신선도가 떨어지기
|
||||
때문입니다.
|
||||
</p>
|
||||
<dl class="facts">
|
||||
<div>
|
||||
<dt>여는 날</dt>
|
||||
<dd>매주 목요일 10:00–19:00</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>주문 마감</dt>
|
||||
<dd>수요일 18:00</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>그 주 제작 수</dt>
|
||||
<dd>최대 20건</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<figure class="two-photo">
|
||||
<img
|
||||
src="./assets/flower-04.webp"
|
||||
alt="창가 자연광이 드는 작업실, 양철 양동이에 담긴 꽃들과 나무 선반"
|
||||
width="1600"
|
||||
height="900"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>서촌 작업실, 목요일 아침</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- 정기구독. 주 CTA(상담)와 경쟁하지 않게 아래쪽에 조용히 둔다 -->
|
||||
<!-- 정기 구독. 주 행동(예약)과 경쟁하지 않게 조용한 링크 하나 -->
|
||||
<section id="subscribe" class="section band" aria-labelledby="sub-h">
|
||||
<div class="wrap two two-reverse">
|
||||
<div class="two-text">
|
||||
<h2 id="sub-h">격주 목요일, 같은 자리에</h2>
|
||||
<div class="wrap sub-inner">
|
||||
<h2 id="sub-h">격주 목요일에 새 꽃을 놓고 지난 꽃을 거둬 갑니다</h2>
|
||||
<div class="sub-text">
|
||||
<p>
|
||||
사무실 응접실이나 매장 카운터처럼 꽃이 늘 있어야 하는 자리를 위한
|
||||
것입니다. 격주로 그 주의 꽃을 가져다 놓고, 지난 것을 가져옵니다.
|
||||
사무실 응접실, 매장 카운터처럼 꽃을 늘 두어야 하는 곳을 위한 정기 구독입니다.
|
||||
화병은 저희 것을 놓아 드립니다.
|
||||
</p>
|
||||
<p class="muted">
|
||||
화병은 저희 것을 두고 씁니다. 자리와 조도를 먼저 보고 정하기 때문에
|
||||
첫 회는 방문 상담으로 시작합니다.
|
||||
<p>
|
||||
놓을 자리와 조명을 먼저 확인해야 해서 첫 회는 방문 상담으로 시작합니다. 상담은
|
||||
목요일 영업시간 안에 잡습니다.
|
||||
</p>
|
||||
<a class="btn btn-quiet" href="#contact">정기 상담 신청</a>
|
||||
<a class="link" href="#contact">정기 구독 상담도 아래 연락처로 받습니다</a>
|
||||
</div>
|
||||
<figure class="two-photo">
|
||||
<img
|
||||
src="./assets/flower-03.webp"
|
||||
alt="꽃잎의 결이 보이는 접사"
|
||||
width="1086"
|
||||
height="1448"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption class="label">이번 주 · 라넌큘러스</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 문의 — 이 페이지의 유일한 주 CTA가 도착하는 곳 -->
|
||||
<section id="contact" class="section contact" aria-labelledby="contact-h">
|
||||
<div class="wrap contact-inner">
|
||||
<p class="label">문의</p>
|
||||
<h2 id="contact-h">무엇에 쓸 꽃인지부터 듣습니다</h2>
|
||||
<p class="lead">
|
||||
받는 분과 자리, 예산을 알려주시면 그 주에 가능한 것을 먼저 말씀드립니다.
|
||||
가능하지 않은 주에는 그렇다고 말씀드립니다.
|
||||
</p>
|
||||
<ul class="contact-list">
|
||||
<li>
|
||||
<span class="label">전화</span>
|
||||
<a class="link" href="tel:0212345678">02-1234-5678</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">메일</span>
|
||||
<a class="link" href="mailto:hello@thursday.flowers"
|
||||
>hello@thursday.flowers</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">인스타그램</span>
|
||||
<a class="link" href="https://instagram.com" rel="noopener"
|
||||
>@thursday.flowers</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 찾아오기. 푸터를 따로 두지 않고 마지막 섹션이 그 역할을 한다 -->
|
||||
<section id="visit" class="section visit" aria-labelledby="visit-h">
|
||||
<div class="wrap visit-inner">
|
||||
<div>
|
||||
<h2 id="visit-h">서촌, 목요일에만</h2>
|
||||
<address class="visit-address">
|
||||
서울 종로구 자하문로 00길 00, 2층<br />
|
||||
경복궁역 3번 출구에서 도보 8분
|
||||
</address>
|
||||
</div>
|
||||
<p class="visit-note muted">
|
||||
목요일 외에는 상주하지 않습니다. 다른 요일 방문은 미리 연락 주세요.
|
||||
</p>
|
||||
<p class="visit-mark">목요일의 화원</p>
|
||||
</div>
|
||||
<!-- 예약·문의 — 페이지의 유일한 행동이 도착하는 곳. 폼은 없고 연락처 셋이다 -->
|
||||
<section id="contact" class="section wrap contact" aria-labelledby="contact-h">
|
||||
<h2 id="contact-h">수요일 18시 전에 예약하면 이번 주 목요일에 받습니다</h2>
|
||||
<p class="lead">
|
||||
받는 분, 놓을 장소, 예산을 알려 주시면 이번 주 꽃으로 가능한 구성을 답해 드립니다.
|
||||
20건이 차면 바로 알려 드립니다.
|
||||
</p>
|
||||
<ul class="contact-list">
|
||||
<li>
|
||||
<span class="label">전화</span>
|
||||
<a class="link" href="tel:0212345678">02-1234-5678</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">메일</span>
|
||||
<a class="link" href="mailto:hello@thursday.flowers">hello@thursday.flowers</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="label">인스타그램</span>
|
||||
<a class="link" href="https://instagram.com" rel="noopener">@thursday.flowers</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
<!-- 푸터 = 연락처·영업시간 카드(layout §2-d). 찾아가는 곳이라 이 형태다 -->
|
||||
<footer id="visit" class="site-foot wrap" aria-labelledby="visit-h">
|
||||
<div class="foot-card">
|
||||
<div class="foot-col">
|
||||
<h2 id="visit-h" class="foot-h">찾아오는 길과 여는 시간</h2>
|
||||
<address class="foot-address">
|
||||
서울 종로구 자하문로 00길 00, 2층<br />
|
||||
경복궁역 3번 출구에서 도보 8분
|
||||
</address>
|
||||
</div>
|
||||
<dl class="foot-hours">
|
||||
<div>
|
||||
<dt>목요일</dt>
|
||||
<dd>10:00–19:00</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>금요일부터 수요일</dt>
|
||||
<dd>쉽니다. 방문은 미리 연락 주세요</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>전화</dt>
|
||||
<dd><a class="link" href="tel:0212345678">02-1234-5678</a></dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>메일</dt>
|
||||
<dd><a class="link" href="mailto:hello@thursday.flowers">hello@thursday.flowers</a></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<p class="foot-mark">목요일의 화원</p>
|
||||
</footer>
|
||||
|
||||
<!--
|
||||
모바일 하단 고정 행동 바(layout §2-c). 768px 이하에서만 보인다.
|
||||
본문 가림은 body 의 padding-bottom 과 섹션의 scroll-margin-bottom 으로 막는다.
|
||||
-->
|
||||
<div class="action-bar">
|
||||
<a class="btn btn-bar" href="#contact">이번 주 주문 예약</a>
|
||||
<a class="btn btn-quiet btn-bar-phone" href="tel:0212345678">전화</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
@font-face {
|
||||
font-family: "MaruBuri";
|
||||
src: url("../assets/fonts/MaruBuri-Regular.woff2") format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "MaruBuri";
|
||||
src: url("../assets/fonts/MaruBuri-SemiBold.woff2") format("woff2");
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import url("./tokens.css?v=20260912all");
|
||||
@import url("./tokens.css?v=20261006");
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
리셋 — 필요한 것만
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
scroll-behavior: smooth;
|
||||
font-synthesis-style: none;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
|
|
@ -22,34 +23,41 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background: var(--paper);
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--step-body);
|
||||
line-height: var(--leading-body);
|
||||
font-weight: var(--weight-regular);
|
||||
/* 종이 질감. 에디토리얼 프리셋의 기본 재질이고, 아주 약해야 한다.
|
||||
세게 걸면 화면이 지저분해지고 사진의 디테일과 싸운다. */
|
||||
background-image: url("#");
|
||||
background-attachment: fixed;
|
||||
letter-spacing: var(--track-body);
|
||||
}
|
||||
|
||||
img,
|
||||
picture {
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
/* CLS 를 막으려고 HTML 에 width/height 속성을 적어두면, height 속성이
|
||||
그대로 계산된 높이가 되어 **aspect-ratio 가 무시된다.**
|
||||
실측: aspect-ratio 는 "3 / 4" 로 적용돼 있는데 높이는 원본 1448px 이었다.
|
||||
height:auto 를 줘야 비율이 높이를 정한다. */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 한글 조판. 서구 레퍼런스에는 이 정보가 없어서 직접 정한다.
|
||||
keep-all 이 없으면 어절 한가운데서 줄이 바뀐다. */
|
||||
:where(p, li, h1, h2, h3, figcaption, dd, dt) {
|
||||
/* 한글 조판(typography §6-5). keep-all 은 anywhere 와 반드시 짝이다 */
|
||||
:lang(ko) {
|
||||
word-break: keep-all;
|
||||
overflow-wrap: anywhere;
|
||||
line-break: strict;
|
||||
}
|
||||
:lang(ko) :is(p, li, dd, dt, figcaption, address) {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
:lang(ko) :is(h1, h2, h3) {
|
||||
line-height: var(--leading-tight);
|
||||
text-wrap: balance;
|
||||
}
|
||||
:lang(ko) :is(em, i, cite, address) {
|
||||
font-style: normal;
|
||||
}
|
||||
:lang(ko) a {
|
||||
text-underline-position: under;
|
||||
}
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
|
|
@ -68,8 +76,9 @@ a {
|
|||
left: -9999px;
|
||||
top: 0;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
color: var(--surface);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--radius);
|
||||
z-index: 100;
|
||||
}
|
||||
.skip:focus {
|
||||
|
|
@ -78,57 +87,87 @@ a {
|
|||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
타이포그래피 — 크기 4종, 웨이트 2종. 그 이상 늘리지 않는다
|
||||
타이포그래피 — 부리는 표제·꽃 이름, 고딕은 나머지 전부
|
||||
──────────────────────────────────────────────────────── */
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
h2 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: var(--weight-regular); /* 큰 글자일수록 가늘게 */
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: var(--weight-regular);
|
||||
letter-spacing: var(--track-display);
|
||||
text-wrap: balance;
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--step-display);
|
||||
font-size: var(--step-title);
|
||||
}
|
||||
h2 {
|
||||
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
|
||||
letter-spacing: var(--track-lead);
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.15rem;
|
||||
letter-spacing: var(--track-lead);
|
||||
font-size: var(--step-h2);
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: var(--step-lead);
|
||||
letter-spacing: var(--track-lead);
|
||||
color: var(--ink-muted);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
|
||||
/* 작은 라벨만 굵고 자간이 넓다. 크기 위계의 반대쪽 끝이다 */
|
||||
.label {
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
color: var(--ink-muted);
|
||||
text-transform: none; /* 한글에 uppercase 는 아무 효과가 없고 라틴만 튄다 */
|
||||
}
|
||||
|
||||
.muted {
|
||||
font-size: var(--step-small);
|
||||
font-weight: var(--weight-strong);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* 제목 다음에 오는 것은 반드시 떨어진다.
|
||||
h2 는 margin: 0 이고 p 도 margin-top: 0 이라 그냥 두면 붙는다. */
|
||||
h1 + *,
|
||||
h2 + *,
|
||||
h3 + * {
|
||||
h2 + p,
|
||||
h2 + .lead,
|
||||
h2 + .sub-text,
|
||||
h2 + address {
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
/* ── 링크 ── */
|
||||
.link {
|
||||
display: inline-block; /* 터치 타깃 24px 이상(WCAG 2.5.8) — 줄 높이만으로는 19px 이었다 */
|
||||
padding-block: var(--space-1);
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0.2em;
|
||||
transition: color var(--dur) var(--ease-out);
|
||||
}
|
||||
.link:hover {
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
/* ── 버튼: 예약 하나. 잎 녹색 채움은 여기에만 ── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 3rem;
|
||||
padding: 0 var(--space-4);
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-size: var(--step-body);
|
||||
font-weight: var(--weight-medium);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: var(--radius);
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background var(--dur) var(--ease-out),
|
||||
border-color var(--dur) var(--ease-out),
|
||||
color var(--dur) var(--ease-out);
|
||||
}
|
||||
.btn:hover {
|
||||
background: var(--accent-deep);
|
||||
border-color: var(--accent-deep);
|
||||
}
|
||||
.btn-quiet {
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.btn-quiet:hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
레이아웃
|
||||
──────────────────────────────────────────────────────── */
|
||||
|
|
@ -137,231 +176,185 @@ h3 + * {
|
|||
margin-inline: auto;
|
||||
padding-inline: var(--gutter);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: var(--space-8);
|
||||
}
|
||||
.section[id] {
|
||||
scroll-margin-top: 5rem;
|
||||
.section[id],
|
||||
.hero[id],
|
||||
.site-foot[id] {
|
||||
/* 하단 고정 바가 앵커 도착 지점을 가리지 않게(A12) */
|
||||
scroll-margin-bottom: var(--action-bar-h);
|
||||
}
|
||||
|
||||
/* 가로 정보 라벨. 여백은 글자를 세우지 않고도 충분히 구분된다. */
|
||||
.hero-role,
|
||||
.hero-tags,
|
||||
.visit-mark {
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ink-faint);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ── 링크: 밑줄이 글자를 침범하지 않게 ── */
|
||||
.link {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 0.25em;
|
||||
transition: text-decoration-color 250ms var(--ease-out);
|
||||
}
|
||||
.link:hover {
|
||||
text-decoration-color: transparent;
|
||||
}
|
||||
|
||||
/* ── 버튼: 하나뿐인 주 CTA ── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
/* ── 머리: 워드마크 + 행동 하나. 고정하지 않는다(화면 서너 개 길이) ── */
|
||||
.site-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: 3rem;
|
||||
padding: 0 var(--space-5);
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
font-size: var(--step-body);
|
||||
font-weight: var(--weight-regular);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 0; /* 이 페이지의 모서리는 전부 각지다. 하나만 둥글면 그게 튄다 */
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding-top: var(--space-4);
|
||||
}
|
||||
.wordmark {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
text-wrap: nowrap;
|
||||
transition:
|
||||
background 250ms var(--ease-out),
|
||||
color 250ms var(--ease-out);
|
||||
}
|
||||
.btn:hover {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
.btn-quiet {
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
border-color: var(--line);
|
||||
white-space: nowrap;
|
||||
word-break: keep-all;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
.btn-quiet:hover {
|
||||
border-color: var(--ink);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────
|
||||
등장 — 페이드와 10px 상승뿐.
|
||||
R1 의 스크롤 이동량이 0px 이었다. 하이엔드는 움직이지 않는다.
|
||||
──────────────────────────────────────────────────────── */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(var(--rise));
|
||||
transition:
|
||||
opacity var(--dur-slow) var(--ease-out),
|
||||
transform var(--dur-slow) var(--ease-out);
|
||||
transition-delay: var(--delay, 0ms);
|
||||
/* ── 히어로: 격자가 주인 ─────────────────────────────── */
|
||||
.hero {
|
||||
padding-top: var(--space-6);
|
||||
}
|
||||
.hero-head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-5);
|
||||
padding-bottom: var(--space-4);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.hero-h {
|
||||
max-width: 24em;
|
||||
}
|
||||
.hero-facts {
|
||||
display: flex;
|
||||
gap: var(--space-5);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hero-facts div {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
.hero-facts dt {
|
||||
font-size: var(--step-small);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.hero-facts dd {
|
||||
font-weight: var(--weight-medium);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.flower-grid {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: var(--space-5);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-6) var(--space-5);
|
||||
}
|
||||
.cell {
|
||||
min-width: 0;
|
||||
}
|
||||
.name {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step-name);
|
||||
transition: color var(--dur) var(--ease-out);
|
||||
}
|
||||
.note {
|
||||
margin-top: var(--space-1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* 아치 창. 원본은 사각으로 두고 마스크로만 자른다(images §2) */
|
||||
.arch {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--arch);
|
||||
aspect-ratio: var(--arch-ratio);
|
||||
background: var(--surface-deep);
|
||||
}
|
||||
.arch img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: 50% 40%;
|
||||
transition: transform calc(var(--dur) * 2) var(--ease-out);
|
||||
}
|
||||
/* 아치 테두리. 크림 바탕 사진은 분홍 위에서 윗선이 사라져 1px 안쪽 선을 둔다 */
|
||||
.arch::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 1px var(--arch-ring);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 넓은 원본(작업대·손질)은 꽃 한 송이가 작다. object-view-box 로 그 송이만 창에 넣는다 —
|
||||
transform 확대는 320px 에서 이미지 박스가 뷰포트를 넘어 감사에 걸렸다(showcase-audit 실측).
|
||||
미지원 엔진은 object-position 크롭으로 떨어진다. 원본 파일은 그대로다 */
|
||||
.arch-dahlia img {
|
||||
object-position: 100% 25%;
|
||||
}
|
||||
.arch-scabiosa img {
|
||||
object-position: 100% 0%;
|
||||
}
|
||||
@supports (object-view-box: inset(0)) {
|
||||
.arch-dahlia img {
|
||||
object-view-box: inset(8% 2% 33.7% 63%);
|
||||
}
|
||||
.reveal.is-in {
|
||||
.arch-scabiosa img {
|
||||
object-view-box: inset(0 0 43.75% 40%);
|
||||
}
|
||||
}
|
||||
.arch-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.leaf {
|
||||
width: 28%;
|
||||
height: auto;
|
||||
fill: var(--accent-soft);
|
||||
stroke: var(--accent);
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
/* hover: 사진이 아치 안에서 조금 커지고 이름이 녹색으로 ── */
|
||||
@media (hover: hover) {
|
||||
.cell:hover .arch img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
.cell:hover .name {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-foot {
|
||||
margin-top: var(--space-6);
|
||||
max-width: var(--measure);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* ── 등장: 첫 화면의 칸이 한 번 순서대로 떠오른다 ────────
|
||||
스크롤 리빌이 아니다 — 페이지 로드에 한 번뿐이고, 감소 모션이면 정지다. */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.cell {
|
||||
animation: rise var(--dur-enter) var(--ease-out) both;
|
||||
animation-delay: calc(var(--i, 0) * var(--stagger));
|
||||
}
|
||||
.hero-head {
|
||||
animation: rise var(--dur-enter) var(--ease-out) both;
|
||||
}
|
||||
}
|
||||
@keyframes rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════════
|
||||
섹션별 레이아웃
|
||||
════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── 헤더 ─────────────────────────────────────────────
|
||||
워드마크 좌상단, 내비 우상단. R1 이 이렇게 놓는다.
|
||||
고정하지 않는다 — 에디토리얼에서 떠다니는 바는 읽기를 방해한다. */
|
||||
.site-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-5);
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
/* 넓은 화면에서는 두 줄, 좁은 화면에서는 한 줄로 쓴다.
|
||||
<br> 을 display:none 으로 지우면 줄만 붙는 게 아니라 **공백까지 사라져**
|
||||
"목요일의화원" 이 된다. span 두 개로 두고 display 를 바꾼다. */
|
||||
.wordmark span {
|
||||
display: block;
|
||||
}
|
||||
.wordmark {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.35rem;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0.06em;
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: var(--ink-muted);
|
||||
transition: color 250ms var(--ease-out);
|
||||
}
|
||||
.nav a:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* ── 히어로 ─────────────────────────────────────────── */
|
||||
.hero {
|
||||
padding-block: var(--space-6) var(--space-8);
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
gap: var(--space-7);
|
||||
align-items: center;
|
||||
}
|
||||
.hero-inner > *,
|
||||
.two > *,
|
||||
.gallery > *,
|
||||
.visit-inner > * {
|
||||
min-width: 0;
|
||||
}
|
||||
.hero-text {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--space-5);
|
||||
align-items: start;
|
||||
}
|
||||
.hero-body > * + * {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.hero-role {
|
||||
align-self: start;
|
||||
white-space: normal;
|
||||
}
|
||||
.hero-cta {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.hero-photos {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
gap: var(--space-3) var(--space-4);
|
||||
align-items: start;
|
||||
}
|
||||
.ph {
|
||||
margin: 0;
|
||||
}
|
||||
.ph img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
.ph figcaption {
|
||||
margin-top: var(--space-2);
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
}
|
||||
.ph-a {
|
||||
grid-column: 1 / 9;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
.ph-b {
|
||||
grid-column: 9 / -1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.ph-c {
|
||||
grid-column: 9 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
.hero-tags {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
/* ── 섹션 공통 ────────────────────────────────────── */
|
||||
.band {
|
||||
background: var(--paper-deep);
|
||||
}
|
||||
|
||||
/* 이미지와 글의 2단. 같은 스플릿을 세 번 이상 쓰지 않는다 —
|
||||
두 번째는 좌우를 뒤집어 리듬을 준다 */
|
||||
/* ── 목요일: 글 + 아치 작업실 ─────────────────────────── */
|
||||
.two {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
gap: var(--space-7);
|
||||
align-items: start;
|
||||
}
|
||||
.two-reverse .two-text {
|
||||
order: 2;
|
||||
}
|
||||
.two-text > * + * {
|
||||
margin-top: var(--space-4);
|
||||
.two-text > p + p {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.two-text p {
|
||||
max-width: var(--measure);
|
||||
|
|
@ -371,233 +364,218 @@ h3 + * {
|
|||
}
|
||||
.two-photo img {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 4;
|
||||
aspect-ratio: var(--arch-ratio);
|
||||
object-fit: cover;
|
||||
object-position: 18% 50%;
|
||||
border-radius: var(--arch);
|
||||
background: var(--surface-deep);
|
||||
}
|
||||
.two-photo figcaption {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step-small);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* 숫자와 사실. 표가 아니라 조판으로 둔다 */
|
||||
.facts {
|
||||
margin-top: var(--space-6);
|
||||
margin-top: var(--space-5);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
.facts > div {
|
||||
display: grid;
|
||||
grid-template-columns: 7.5rem 1fr;
|
||||
grid-template-columns: 8rem 1fr;
|
||||
gap: var(--space-3);
|
||||
padding-top: var(--space-3);
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.facts dt {
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
font-size: var(--step-small);
|
||||
color: var(--ink-muted);
|
||||
padding-top: 0.35rem;
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
.facts dd {
|
||||
margin: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ── 작업 갤러리 ────────────────────────────────────── */
|
||||
.gallery {
|
||||
margin-top: var(--space-7);
|
||||
/* ── 구독: 한 단 어두운 분홍 띠 ─────────────────────── */
|
||||
.band {
|
||||
background: var(--surface-deep);
|
||||
}
|
||||
.sub-inner {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--space-5) var(--space-4);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: var(--space-6);
|
||||
align-items: start;
|
||||
}
|
||||
.g {
|
||||
margin: 0;
|
||||
.sub-inner h2 {
|
||||
max-width: 14em;
|
||||
}
|
||||
.g img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.g figcaption {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--step-label);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: var(--track-label);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.g-1 {
|
||||
grid-column: 1 / 8;
|
||||
}
|
||||
.g-1 img {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
.g-2 {
|
||||
grid-column: 8 / 13;
|
||||
.sub-text {
|
||||
margin-top: 0;
|
||||
}
|
||||
.g-2 img {
|
||||
aspect-ratio: 3 / 4;
|
||||
.sub-text p + p,
|
||||
.sub-text p + .link {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.g-3 {
|
||||
grid-column: 8 / 13;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.g-3 img {
|
||||
aspect-ratio: 4 / 3;
|
||||
.sub-text .link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.work-note {
|
||||
margin-top: var(--space-6);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
|
||||
/* ── 문의 ─────────────────────────────────────────── */
|
||||
.contact-inner {
|
||||
max-width: 46rem;
|
||||
/* ── 예약·문의 ──────────────────────────────────────── */
|
||||
.contact h2 {
|
||||
max-width: 22em;
|
||||
}
|
||||
.contact-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: var(--space-6);
|
||||
margin-top: var(--space-5);
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
gap: var(--space-2);
|
||||
max-width: var(--measure);
|
||||
}
|
||||
.contact-list li {
|
||||
display: grid;
|
||||
grid-template-columns: 7rem 1fr;
|
||||
grid-template-columns: 8rem 1fr;
|
||||
gap: var(--space-3);
|
||||
align-items: baseline;
|
||||
padding-top: var(--space-3);
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* ── 찾아오기 (푸터를 대신한다) ───────────────────── */
|
||||
.visit {
|
||||
padding-bottom: var(--space-7);
|
||||
/* ── 푸터: 연락처·영업시간 카드 ────────────────────── */
|
||||
.site-foot {
|
||||
padding-block: var(--space-6) var(--space-7);
|
||||
}
|
||||
.visit-inner {
|
||||
.foot-card {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--space-5);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) auto;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: var(--space-6);
|
||||
align-items: end;
|
||||
}
|
||||
.visit-address {
|
||||
margin-top: var(--space-4);
|
||||
font-style: normal;
|
||||
.foot-h {
|
||||
font-size: var(--step-name);
|
||||
}
|
||||
.foot-address {
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.visit-note {
|
||||
max-width: 24ch;
|
||||
.foot-hours {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
align-content: start;
|
||||
}
|
||||
.visit-mark {
|
||||
/* 장식이라도 실제 문장이므로 배경선 색을 그대로 쓰지 않는다. */
|
||||
.foot-hours > div {
|
||||
display: grid;
|
||||
grid-template-columns: 9rem 1fr;
|
||||
gap: var(--space-3);
|
||||
padding-top: var(--space-2);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.foot-hours dt {
|
||||
font-size: var(--step-small);
|
||||
color: var(--ink-muted);
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
.foot-hours dd {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.foot-mark {
|
||||
margin-top: var(--space-5);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.2em;
|
||||
font-size: var(--step-small);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* ── 모바일 하단 고정 행동 바 — 768px 이하에서만 ────── */
|
||||
.action-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════════
|
||||
좁은 화면 — 흩뿌림은 넓은 화면의 사치다.
|
||||
320px 에서 정렬선 여섯 개를 유지하면 그냥 부서진 페이지가 된다.
|
||||
좁은 화면
|
||||
════════════════════════════════════════════════════════ */
|
||||
@media (max-width: 900px) {
|
||||
/* 히어로를 한 칸으로 내린다. 흩뿌림은 넓은 화면의 사치다 —
|
||||
390px 에서 정렬선 셋을 유지하면 사진이 서로를 가린다. */
|
||||
.hero-inner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
/* 여기가 실제 사고 지점이었다. .hero-text 가 `auto 1fr` 2칸인데
|
||||
정보 라벨이 긴 문장을 차지하자 auto 칸을 통째로 먹어
|
||||
h1 칸이 짜부라졌다 — 390px 에서 헤드라인이 6줄, 320px 에서 11줄이 됐다. */
|
||||
.hero-text {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.hero-role {
|
||||
max-width: 100%;
|
||||
}
|
||||
/* 히어로의 텍스트 요소는 넷을 넘지 않는다(카운트 규칙) */
|
||||
.hero-tags {
|
||||
display: none;
|
||||
}
|
||||
.hero-photos {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.ph-a,
|
||||
.ph-b,
|
||||
.ph-c,
|
||||
.hero-tags {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
}
|
||||
.ph-a {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.visit-mark {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.two,
|
||||
.visit-inner {
|
||||
.sub-inner,
|
||||
.foot-card {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-6);
|
||||
gap: var(--space-5);
|
||||
}
|
||||
.two-reverse .two-text {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.g-1,
|
||||
.g-2,
|
||||
.g-3 {
|
||||
grid-column: 1;
|
||||
margin-top: 0;
|
||||
.two-photo {
|
||||
max-width: 28rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.facts > div,
|
||||
.contact-list li {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-1);
|
||||
@media (max-width: 767px) {
|
||||
html {
|
||||
/* 앵커 도착·포커스 스크롤이 고정 바 아래로 들어가지 않게(A12) */
|
||||
scroll-padding-bottom: calc(var(--action-bar-h) + var(--safe-bottom));
|
||||
}
|
||||
/* 워드마크와 내비를 한 줄에 나란히 두면 320px 에서 둘 다 접힌다.
|
||||
실측: 내비 링크가 두 줄(top 46/77)에 걸리고 워드마크는 3줄이 됐다.
|
||||
좁은 화면에서는 위아래로 쌓는다 — 접히는 것보다 쌓는 것이 낫다. */
|
||||
.site-head {
|
||||
body {
|
||||
/* 하단 바가 마지막 내용을 가리지 않게 */
|
||||
padding-bottom: calc(var(--action-bar-h) + var(--safe-bottom));
|
||||
}
|
||||
.head-cta {
|
||||
display: none; /* 행동은 하단 바로 내려간다 */
|
||||
}
|
||||
.hero {
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
.hero-head {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.wordmark {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
/* 세로로 쌓았으니 폭에 여유가 있다. 워드마크를 한 줄로 편다 */
|
||||
.wordmark span {
|
||||
display: inline;
|
||||
}
|
||||
.nav {
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
letter-spacing: 0.04em;
|
||||
padding-top: 0;
|
||||
}
|
||||
/* 버튼 라벨이 2줄로 접히면 하드 게이트 6 위반이다.
|
||||
좌우 패딩을 줄이고 줄바꿈을 막는다. */
|
||||
.btn {
|
||||
padding-inline: var(--space-4);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hero-photos {
|
||||
grid-template-columns: 1fr;
|
||||
.hero-facts {
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.ph-a,
|
||||
.ph-b,
|
||||
.ph-c,
|
||||
.hero-tags { grid-column: 1; }
|
||||
/* 2열. 첫 화면에 두 점 이상 보이게 한다(layout §2-b) */
|
||||
.flower-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-5) var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
.name {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.facts > div,
|
||||
.contact-list li,
|
||||
.foot-hours > div {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
.foot-card {
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
padding-bottom: max(var(--space-2), var(--safe-bottom));
|
||||
background: var(--surface);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.btn-bar {
|
||||
min-height: 3.25rem;
|
||||
}
|
||||
.btn-bar-phone {
|
||||
min-height: 3.25rem;
|
||||
min-width: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 초광폭: 격자는 컨테이너 안에서만 넓어진다(layout §4-d) ── */
|
||||
@media (min-width: 1600px) {
|
||||
.flower-grid {
|
||||
gap: var(--space-7) var(--space-6);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,84 +1,92 @@
|
|||
/*
|
||||
목요일의 화원 — 디자인 토큰
|
||||
전부 3단계에서 확정한 값이고, 근거는 design.md 에 있다.
|
||||
목요일의 화원 — 디자인 토큰 (2026-10-06 재작업)
|
||||
값의 근거는 design.md "토큰과 예산"에 있다. 토큰은 이 파일에만 정의한다 —
|
||||
main.css 에서 같은 이름을 다시 정의하지 않는다(05 Q-25).
|
||||
|
||||
값의 출처는 취향이 아니라 실측이다.
|
||||
Aesop(#FFFEF2) · Sarah Winward(#F8F7F3) · Cereal(#F7F6EF) 세 곳이
|
||||
전부 순백을 피하고 따뜻한 오프화이트를 쓴다. 글자도 순검정이 아니다.
|
||||
배경은 유채·분홍빛(#f7ebe9)이다. 흰 라넌큘러스·작약 사진의 바탕이 이미 크림이라
|
||||
크림 종이 위에 놓으면 사진 가장자리가 사라졌다(이전 판 실측). 분홍은 흰 꽃을
|
||||
띄우고, 잎의 녹색(120°)과 보색에 가까워 강조가 한 곳이면 충분히 보인다.
|
||||
*/
|
||||
:root {
|
||||
/* ── 색 ──────────────────────────────────────────────
|
||||
강조색은 하나다. 그리고 **면이 아니라 점**으로만 쓴다.
|
||||
꽃 사진에는 이미 온갖 색이 들어 있어서, 화면에 색을 더 칠하면
|
||||
사진과 싸운다. 링크·라벨·구분선 정도가 강조색이 쓰이는 전부다. */
|
||||
--paper: #f8f6f0;
|
||||
--paper-deep: #f1ede4; /* 섹션 하나만 살짝 눕힌다. 리듬용 */
|
||||
--ink: #2a2723;
|
||||
--ink-muted: #6b655c;
|
||||
--ink-faint: #746c60;
|
||||
--accent: #7c4a3f; /* 마른 장미. 꽃의 초록과 충돌하지 않는다 */
|
||||
--line: #ddd7ca;
|
||||
강조는 잎 녹색 하나. 예약 버튼·링크·선택 상태에만 쓴다.
|
||||
분홍 바탕 위 녹색 글자 5.51:1, 녹색 버튼 위 흰 글자 6.42:1 (실측, scratch/contrast.mjs). */
|
||||
--surface: #f7ebe9;
|
||||
--surface-deep: #efd9d5; /* 사진 없는 아치 칸·띠. 먹 11.25:1, 녹색 4.75:1 */
|
||||
--surface-card: #fcf5f3; /* 푸터 카드. 바탕보다 한 단 밝게 */
|
||||
--ink: #2b2426;
|
||||
--ink-muted: #5f5052; /* 바탕 위 6.54:1 */
|
||||
--accent: #2f6b33;
|
||||
--accent-deep: #255629; /* hover */
|
||||
--accent-soft: #e4ece0; /* 녹색 위 글자 5.31:1 — 사진 없는 칸의 잎 표식 */
|
||||
--line: #e2cdc8;
|
||||
--arch-ring: rgb(43 36 38 / 0.08); /* 크림 사진이 분홍에 녹지 않게 아치 안쪽 1px */
|
||||
--on-accent: #ffffff;
|
||||
|
||||
/* ── 타입 ────────────────────────────────────────────
|
||||
크기를 4종으로 묶는다. Aesop 이 3종(31/14/12), Cereal 이 2종(12/11)이었다.
|
||||
종류를 늘리면 위계가 아니라 소음이 된다.
|
||||
|
||||
자간은 크기에 따라 **방향이 뒤집힌다**(Kinfolk 실측).
|
||||
50px → -0.5px(-1%) · 15px → +0.15px(+1%)
|
||||
큰 글자는 조여서 덩어리로, 작은 글자는 풀어서 낱글자로 읽히게 한다. */
|
||||
--font-display: "MaruBuri", "Nanum Myeongjo", Georgia, serif;
|
||||
표제 리디바탕 400 한 웨이트, 본문 Pretendard. 리디바탕은 전자책 본문용이라
|
||||
대비가 낮고 1.25rem 이상에서 또렷하다 — 꽃 이름·표제에만 쓰고 본문에는 쓰지 않는다.
|
||||
"RIDIBatang"은 설치본 패밀리명(로컬 폴백), "RIDI Batang"은 jsdelivr 배포 CSS의 이름이다. */
|
||||
--font-display: "RIDI Batang", "RIDIBatang", "Nanum Myeongjo", serif;
|
||||
--font-body: "Pretendard", -apple-system, "Segoe UI", sans-serif;
|
||||
|
||||
/* 가장 긴 줄이 "그 주에 좋은 꽃만"(한글 7 + 공백 2 ≒ 7.7em)이다.
|
||||
정보 라벨이 왼쪽에서 60px 을 먹으므로 텍스트 칼럼은 화면 폭의 절반보다 좁다.
|
||||
1024px 에서 55.7px 로 잡히자 딱 넘쳐 3줄이 됐다(카운트 규칙 위반).
|
||||
기울기를 낮춰 전 구간에서 2줄을 유지한다. */
|
||||
--step-display: clamp(2.2rem, 1.5rem + 2.4vw, 3.5rem);
|
||||
--step-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
|
||||
/* 표제는 작다(격자가 주인). 꽃 이름이 표제보다 크다 — 칸이 곧 내용이다. */
|
||||
--step-title: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
|
||||
--step-name: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
|
||||
--step-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
|
||||
--step-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
|
||||
--step-body: 1rem;
|
||||
--step-label: 0.75rem;
|
||||
--step-small: 0.875rem; /* 14px — 한글 보조 13px 이상 */
|
||||
|
||||
--track-display: -0.02em;
|
||||
--track-lead: -0.005em;
|
||||
--track-display: -0.01em; /* 부리 표제, 2rem 이하라 -0.02em 까지 안 간다 */
|
||||
--track-body: 0;
|
||||
--track-label: 0.14em;
|
||||
|
||||
/* 웨이트는 둘이면 충분하다. 굵기로 소리치지 않는다.
|
||||
큰 글자일수록 가늘게 — Aesop 의 31px 이 400 이었고 12px 라벨이 700 이었다. */
|
||||
/* 본문 웨이트는 400 하나다. 가변 서브셋은 1440 첫 화면에서 349KB, 정적 400+600은 202KB 였다(실측).
|
||||
굵기 대신 크기·색·부리/고딕 차이로 위계를 낸다. 토큰 이름은 역할로 남긴다 */
|
||||
--weight-regular: 400;
|
||||
--weight-bold: 700;
|
||||
--weight-medium: 400;
|
||||
--weight-strong: 400;
|
||||
|
||||
--leading-tight: 1.2;
|
||||
--leading-body: 1.85; /* 한글은 라틴보다 넉넉해야 한다. 받침 때문에 줄이 붙어 보인다 */
|
||||
--leading-tight: 1.3;
|
||||
--leading-body: 1.7;
|
||||
|
||||
/* 한글 본문은 25~35자가 읽기 폭이다. 라틴 기준 65자를 그대로 쓰면 너무 넓다 */
|
||||
--measure: 32ch;
|
||||
--measure: 34em; /* 한글 본문 32~40자 */
|
||||
|
||||
/* ── 간격 ────────────────────────────────────────────
|
||||
여백이 콘텐츠다. 섹션 간격을 본문 간격의 5배 이상으로 벌린다. */
|
||||
/* ── 간격·형태 ───────────────────────────────────────── */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 1rem;
|
||||
--space-4: 1.5rem;
|
||||
--space-5: 2.5rem;
|
||||
--space-6: 4rem;
|
||||
--space-7: 6.5rem;
|
||||
--space-8: clamp(6rem, 4rem + 8vw, 11rem); /* 섹션 사이 */
|
||||
--space-7: 6rem;
|
||||
--space-8: clamp(5rem, 3rem + 6vw, 9rem); /* 섹션 사이 */
|
||||
|
||||
--gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
|
||||
--container: 1240px;
|
||||
--gutter: clamp(1rem, 0.5rem + 2.4vw, 3rem);
|
||||
--container: 1280px;
|
||||
|
||||
--radius: 12px; /* 버튼·카드·아치 아랫모서리 전부 이 값 하나 */
|
||||
/* 아치: 윗모서리만 폭의 절반. 꽃다발을 세워 둔 실루엣(둥근 머리, 곧은 줄기)과 같다 */
|
||||
--arch: 50% 50% var(--radius) var(--radius) / 40% 40% var(--radius) var(--radius);
|
||||
--arch-ratio: 4 / 5;
|
||||
|
||||
/* ── 모션 ────────────────────────────────────────────
|
||||
R1(sarahwinward.com)의 스크롤 이동량을 쟀더니 **0px** 이었다.
|
||||
하이엔드 플로럴은 움직이지 않는다. 등장만 조용히 처리한다. */
|
||||
--dur-slow: 900ms;
|
||||
첫 화면의 아치 칸이 한 번 순서대로 떠오른다(스태거). 그 뒤는 hover 만.
|
||||
감소 모션에서는 등장 애니메이션을 끄고 hover 색 변화만 남긴다. */
|
||||
--dur: 220ms;
|
||||
--dur-enter: 700ms;
|
||||
--stagger: 70ms;
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--rise: 10px;
|
||||
|
||||
/* ── 모바일 하단 행동 바 ─────────────────────────────
|
||||
env() 는 viewport-fit=cover 가 있어야 값이 들어온다(index.html meta). */
|
||||
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
||||
--action-bar-h: 4.5rem;
|
||||
}
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
:root {
|
||||
--ink-muted: #4a453e;
|
||||
--line: #b9b0a0;
|
||||
--ink-muted: #3f3537;
|
||||
--line: #c9aea8;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue