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:
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#f3f4f3">
|
||||
<meta name="theme-color" content="#eceff1">
|
||||
<meta name="description" content="예시 매물의 표시 항목, 확인 근거와 변경 기록을 한 화면에서 살펴보고 공개 전 확인할 순서를 정리하는 운영 안내입니다.">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta property="og:title" content="한남자리 운영 안내 — 매물 확인">
|
||||
|
|
@ -13,14 +13,17 @@
|
|||
<meta name="twitter:title" content="한남자리 운영 안내 — 매물 확인">
|
||||
<meta name="twitter:image" content="../og.png">
|
||||
<title>한남자리 운영 안내 — 매물 확인</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23141413'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial' font-size='19' font-weight='700' fill='%23c6a15b'%3EHJ%3C/text%3E%3C/svg%3E">
|
||||
<link rel="stylesheet" href="../styles/tokens.css?v=20260912all">
|
||||
<link rel="stylesheet" href="../styles/admin.css?v=20260912all">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%232d7639'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='22' font-weight='700' fill='%23ffffff'%3EHJ%3C/text%3E%3C/svg%3E">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;700&display=swap">
|
||||
<link rel="stylesheet" href="../styles/tokens.css?v=20261006">
|
||||
<link rel="stylesheet" href="../styles/admin.css?v=20261006">
|
||||
<script src="../scripts/admin.js?v=20260830e" defer></script>
|
||||
</head>
|
||||
<body class="admin-body">
|
||||
<a class="skip-link" href="#admin-main">본문 바로가기</a>
|
||||
<div class="demo-strip" role="region" aria-label="예시 자료 안내">안내 · 예시 자료 · 사무소, 매물, 고객과 기록은 실제 정보가 아니며 광고·연락·저장은 연결되지 않습니다</div>
|
||||
<div class="demo-strip" role="region" aria-label="예시 자료 안내">예시 자료입니다. 사무소, 매물, 고객과 기록은 실제 정보가 아니며 광고, 연락, 저장은 연결되지 않습니다.</div>
|
||||
|
||||
<div class="admin-shell">
|
||||
<aside class="admin-sidebar" data-sidebar aria-label="관리 메뉴">
|
||||
|
|
|
|||
|
|
@ -1,24 +1,85 @@
|
|||
# 한남자리 디자인 기록
|
||||
# design.md — 한남자리
|
||||
|
||||
## 진행 상태
|
||||
|
||||
- 2026-10-06 · 0 현행 감사 → 1 레퍼런스 3슬롯 실측 → 2 카드 3장 중 A 선택(위임) → 3 토큰 재정의 → 4 구현(격자 히어로·푸터 폼·VT) → 5 검증 통과 → 6 이 문서. 재개하면 "검증"의 남은 위험부터 읽는다.
|
||||
|
||||
## 브리프
|
||||
|
||||
- 무엇을: 다섯 조건으로 예시 주거 후보를 비교하고 공개 전 확인 책임을 분리해 보여 주는 브리핑과 운영 화면.
|
||||
- 누구에게: 조건을 정리하는 이용자와 검수 상태를 확인하는 운영 담당자.
|
||||
- 제약: 가상 매물·AI 참고·생성 이미지·미전송 안내와 기존 선택·검수·이력·대화상자 동작을 보존한다.
|
||||
- 무엇을: 한남 생활권 예시 매물 3곳을 다섯 조건(거래·예산·전용면적·입주일·주차)으로 비교하고 상담 전 확인 항목을 정리하는 공개 화면 + 매물 검수 운영 화면(`admin/`).
|
||||
- 누구에게: 집을 찾는 이용자(목표 행동: 조건을 넣고 분석 결과를 본 뒤 상담 준비 순서를 받는다) · 검수 담당자(운영 화면).
|
||||
- 제약: 정적 HTML/CSS/JS, 기본 언어 ko-KR(저장소 기존 로컬라이제이션), 기존 자산(사진 2장·og.png)만, 가상 매물·AI 참고·미전송 고지와 `landing.js`의 분석·선택·서류철·대화상자 동작, `admin/`의 구조를 보존. 2026-10-06 재작업 분배표(outputs/rework-2026-10-06/plan.md)의 배정값이 방향 제약.
|
||||
- 화면: `index.html`(공개), `admin/index.html`(운영).
|
||||
|
||||
## 판단 기준
|
||||
## 미확정
|
||||
|
||||
| 축 | 질문 | 적용 |
|
||||
| --- | --- | --- |
|
||||
| Warde · 정보 전달 | 다섯 조건의 라벨·입력값·결과 행동이 한 번에 읽히는가 | 13px 이상 라벨, 16px 입력, 결과 행동을 같은 조건판에 유지 |
|
||||
| Ruder · 비교 변수 | 후보 조건의 라벨과 값을 섞지 않고 비교하는가 | 조건 행의 라벨·값·보조 메모를 세 단계로 분리 |
|
||||
| Albers · 상태 맥락 | 가상 자료·AI 참고·중개사 확인의 책임이 구분되는가 | 상태 텍스트와 색조를 함께 사용하고 검수판의 간격·정렬을 통일 |
|
||||
- 방향 카드 선택은 사용자가 위임했다(plan.md "작업자가 그 안에서 방향 카드를 만들고 하나를 고른다"). 고른 이유는 "방향"에 있다.
|
||||
- 사진이 2장뿐이라 home-1과 home-3가 같은 거실 사진을 쓴다(home-3는 창가 크롭). 매물별 사진이 생기면 교체한다.
|
||||
- 월세 가격 문자열 "보증금 5억 · 월 1,200만"은 가운뎃점 메타 문자열이지만 `tools/showcase-duo-e2e.mjs:563`이 정확 일치로 단언해 유지했다.
|
||||
|
||||
Warde, Ruder, Albers는 정보 전달·비교 변수·상태 맥락을 검토하는 참고 질문이며 인과나 성능 법칙이 아니다.
|
||||
## 레퍼런스
|
||||
|
||||
## 역할 토큰과 검증
|
||||
| 슬롯 | 출처 | 가져온 것 |
|
||||
|---|---|---|
|
||||
| R1 구조 | The Modern House 매물 목록 https://www.themodernhouse.com/sales-list (브라우저 실측: 상단 바 64px, 필터 띠 80px에 h1 "Buy" 30px, 3열 389×260 격자, 캡션 두 열, 푸터 뉴스레터 폼) | 표제는 작게 필터 띠와 한 줄, 격자가 첫 화면, 캡션은 이름/가격 두 열, 푸터는 폼 하나 |
|
||||
| R2 톤 | Apple 리퍼비시 Mac 한국 https://www.apple.com/kr/shop/refurbished/mac (실측: 1:1 칸 247px, 간격 0 + 1px 선 격자, 떠 있는 카드 없음) | 선으로 나눈 1:1 칸, 그림자 없음 |
|
||||
| R3 디테일 | Chrome 문서 same-document View Transitions https://developer.chrome.com/docs/web-platform/view-transitions/same-document | `startViewTransition` + 칸별 고유 `view-transition-name`, 감소 모션은 `::view-transition-*` animation none |
|
||||
|
||||
- `--brief-label-size`, `--brief-input-size`, `--brief-panel-radius`, `--brief-rule`, `--admin-body-size`, `--admin-meta-size`가 공개·운영 표면의 역할을 관리한다.
|
||||
- `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이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
미검증: Inigo 매물 목록(텍스트 페처가 제목만 반환).
|
||||
|
||||
## 방향
|
||||
|
||||
지문: 격자·목록 히어로(3열 1:1 매물 칸, 조건 띠 위, h1 작게, 리드 없음) · IBM Plex Sans KR 700 / IBM Plex Sans KR 400 · #eceff1 쿨 회색 · 130° 녹 #2d7639 · 4px · 격자+조건 → 브리핑 → 선택한 집 비교 → 서류철 → 푸터(절차 + 상담 준비 폼) · 상단 바 + 메뉴 버튼(고정, 불투명) · 다음 행동 하나 크게(상담 준비 폼) · 1:1 원본 크롭, 캡션 위 · 분석 시 격자 재정렬 View Transitions 120ms, hover는 선·바탕색만
|
||||
|
||||
- 컨셉: 집을 찾는 사람이 한남 생활권 예시 매물 3곳을 격자에서 한눈에 보고, 위의 조건 다섯 칸을 채워 어느 집이 가까운지와 중개사에게 확인할 것을 가려낸다.
|
||||
- 프리셋: swiss-minimal 계열(격자·선·단색 강조)을 지배로, 보조 없음. 재질 없음.
|
||||
- 표현 리스크: 분석 뒤 격자 재정렬(VT). 전환 중 문서가 히트테스트에서 빠지므로 120ms로 짧게 두고, 실제 클릭 E2E(`showcase-duo-e2e.mjs` "세 후보 장면")로 검증했다. 좁은 화면(≤60rem)에서는 재정렬을 끄고 등록 순서를 지킨다(세 번째 칸을 가로 한 줄로 펴기 때문).
|
||||
- 표면 다이얼: 공개 — 표현 1·밀도 2·모션 1·증거 노출 2 / 운영 — 표현 0·밀도 3·모션 0·증거 노출 3(구조 유지, 토큰·서체만 공유).
|
||||
- 반사실: 첫 화면 고유 요소 — 억 원·㎡·입주일·주차 대수 다섯 필터, 매물 캡션의 실제 수치("매매 118.42㎡ 38억 원"), 캡션 안 "연출 이미지" 고지. 세무사무소로 바꾸면 필터와 1:1 사진 격자 모두 성립하지 않는다.
|
||||
- 수렴(05 계측 19종 대비): 히어로 격자(분할 13종과 다름) · 표제 라벨 없음·1줄·리드 없음(라벨+2줄+리드 16~19종과 다름) · 푸터 폼(고지 띠 14종과 다름) · 캡션 위(아래 캡션 다수와 다름) · 상단 바는 배정대로 유지. 5축 중 같은 것은 "단색 버튼 1 + 밑줄 텍스트 1" CTA 조합 하나.
|
||||
- 카드(위임): **A. 선 격자 3칸(채택)** — 매물이 3곳이라 1440에서 세 칸이 한 줄에 다 보이고(R1 3열), R2의 1:1 선 격자가 배정 비율과 맞으며, E2E가 보는 비교·서류철 표면을 그대로 둘 수 있다. **B. 색인 표** — 숫자 행 + 썸네일. 사진 2장의 역할이 사라지고 390에서 표를 카드로 바꿔야 해 기각. **C. 큰 두 칸** — 2열 큰 사진, 선택 칸 안에서 브리핑 펼침. 첫 화면에 세 집이 다 안 보이고 매트릭스를 칸 안으로 접어야 해 기각.
|
||||
- 보존 자산: 상호·태그라인·HJ 마크, 세 매물의 이름·가격·면적·주차·입주일·관리비, 사진 2장, og.png, 고지 문구("상담은 접수되지 않습니다", "거래 서비스를 제공하지 않습니다"), `data-*` 계약 전부, 서류철 5탭, 상담 대화상자, 로컬 저장 키 `hannam-jari-conditions-v2`, `admin/` 구조.
|
||||
|
||||
## 토큰과 예산
|
||||
|
||||
값은 `styles/tokens.css` 한 곳. `landing.css`·`admin.css`는 토큰을 재정의하지 않는다(05 Q-25).
|
||||
|
||||
- 서체: `--font-display`·`--font-body` = IBM Plex Sans KR(Google Fonts, OFL, 400·700만). 표제는 700, 본문 400. 중간 웨이트를 싣지 않아 합성 볼드가 없다. `--font-sans`는 admin.css가 쓰는 별칭.
|
||||
- 바탕: `--surface` #eceff1(페이지) / `--surface-raised` #f7f9fa(칸·판) / `--surface-sunken`(이미지 바닥). 글자 `--ink` #15191c, 보조 `--ink-3` #566069(#eceff1 위 5.56:1 실측).
|
||||
- 강조: `--accent` #2d7639(130°) — 선택 칸 테두리·주 버튼·현재 탭·탭 밑줄에만. `--accent-deep`(hover·텍스트), `--accent-soft`(어두운 푸터의 보조 글자).
|
||||
- radius: `--radius` 4px 하나. 배지만 `--radius-pill`.
|
||||
- 모션: `--transition` 160ms, VT 120ms. 감소 모션은 tokens.css에서 전역 0.01ms + `::view-transition-*` none.
|
||||
- 예산(tokens §5 기본선)과 실측(1440, 로컬 파일): JS 25KB(비압축, 예산 150KB gzip) · CSS 8+31KB · 첫 화면 이미지 214KB(E2E 예산 350KB/모바일 260KB 통과) · LCP 292ms(로컬, 첫 매물 사진 `fetchpriority="high"`) · CLS 0.0001 · 폰트 전송 229KB(1440)/198KB(390) + Google Fonts CSS. **폰트는 기본선 100KB를 넘는다** — 한글 2웨이트 슬라이스 합계라 데모/포트폴리오 기준 200KB로 올렸고, 그래도 29KB 초과다("검증" 남은 위험).
|
||||
|
||||
## 이펙트와 폴백
|
||||
|
||||
- View Transitions: `document.startViewTransition`이 없거나 감소 모션이면 즉시 갱신(`withViewTransition`). 순서는 CSS `order`로만 바꿔 DOM·키보드 순서를 유지한다.
|
||||
- hover: 칸 바탕 흰색 + 1px 안쪽 선, 버튼 진한 녹, 탭 글자색. 전부 꺼도 상태는 `aria-pressed`·`aria-selected`·테두리 2px로 보인다.
|
||||
- 이미지 실패: `data-image-fallback` 판이 같은 자리에 뜬다(기존 동작).
|
||||
- 무JS: h1·격자·매트릭스·서류철 기본 탭·푸터 폼이 정적으로 읽힌다. 분석·선택·대화상자는 `.no-script` 안내.
|
||||
|
||||
## 하지 않기로 한 것
|
||||
|
||||
- 새 이미지 생성 안 함(브리프). home-3는 같은 거실 사진의 창가 크롭(`.is-crop-window`).
|
||||
- 스크롤 리빌·등장 애니메이션·마퀴 없음. 재질(feTurbulence·유리) 없음. 상단 바에 `backdrop-filter` 없음(바탕이 단색).
|
||||
- 큰 표제·리드 문단·eyebrow를 히어로에 두지 않는다. `.eyebrow`는 `#homes`("예시 매물")·`#dossier`("선택한 예시 매물") 두 곳의 범위 고지뿐이다(E2E가 "예시"·"선택한 예시" 포함을 단언한다).
|
||||
- 상담 대화상자를 없애지 않았다. 푸터 폼에서 고른 항목이 대화상자 체크 상태로 넘어간다.
|
||||
- 운영 화면 구조·문구·밀도는 손대지 않았다(토큰·서체·강조색·고지 띠 문장만).
|
||||
|
||||
## 검증
|
||||
|
||||
- 검증 줄: html-validate 2파일 0건 · stylelint 3파일 0건 · no-hanja 7파일 통과 · showcase-audit 12/12 · design-gate 28/28(미검증 0, 꺼짐 3: static·visual·webkit) · showcase-duo-e2e 한남자리 48시나리오 184단언 통과(스크래치 사본으로 한남자리 블록만, 3회 연속) · audit.mjs 390×320 메뉴 단언 재현 통과.
|
||||
- 시각 루브릭(약한 축부터, 캡처 `outputs/rework-2026-10-06` 노트 참조): R6 1 — 사진 2장을 세 매물·비교·서류철에 다시 쓴다(크롭으로 나눴지만 같은 방). R9 1 — 200% 확대는 캡션·조건 띠만 확인. R1 2 · R2 2(흐림 캡처: 사진 셋 → 녹색 버튼 → 표제) · R3 2(시작선 32/53/78px) · R4 2 · R5 2(촘촘한 격자 ↔ 4~6rem 섹션 ↔ 어두운 푸터) · R7 2 · R8 2 · R10 2. 합계 18/20.
|
||||
- 대비 실측: 어두운 푸터 위 보조 글자 14.18:1, 표제 16.01:1 / 조건 띠 안내문 6.08:1 / 매물 판정문 6.42:1 / 주 버튼 5.58:1 / eyebrow 7.12:1.
|
||||
- 미검증·남은 위험: 폰트 전송량이 올린 예산(200KB)보다 29KB 많다 — 줄이려면 본문 400 한 웨이트로 가거나 자체 서브셋이 필요하다. Firefox·Safari는 VT 미지원 또는 부분 지원이라 즉시 갱신으로 떨어진다(기능은 같다). WebKit 렌더는 E2E의 WebKit 390·1440 단언으로만 봤다.
|
||||
|
||||
## 피드백 기록 · 보존 목록
|
||||
|
||||
- (없음) 납품 뒤 반응이 오면 feedback-loop로 축을 좁혀 여기 적는다.
|
||||
|
||||
## 변경 기록
|
||||
|
||||
- 2026-10-06 · 재작업: 분할 히어로 → 격자·목록, 웜 페이퍼+Pretendard+청동 → 쿨 회색+IBM Plex Sans KR+130° 녹, 고지 띠 푸터 → 상담 준비 폼 푸터, landing.css의 토큰 재정의를 tokens.css로 통합, 가운뎃점 메타 문자열 제거, 섹션 제목을 사실 문장으로. 운영 화면은 토큰·서체·강조색만 따라간다.
|
||||
- 2026-10-02 · 카피: 직역 태그라인·번역체 문장을 평이한 문장으로(outputs/redteam-2026-10-01/copy-criteria.md).
|
||||
- 2026-10-02 · 레드팀 06: h1 자간 -0.07em → -0.02em, `text-wrap: balance`(이번 재작업에서 h1 자체가 바뀌어 더는 해당 없음).
|
||||
- 2026-09 · 초판: 역할 토큰 `--brief-*`·`--admin-*`, verify-final 18묶음, stress 112건 기록.
|
||||
|
|
|
|||
|
|
@ -3,89 +3,128 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#f3f0e8">
|
||||
<meta name="description" content="서울 한남 생활권의 집을 예산, 면적, 입주, 주차 조건으로 비교하고 계약 전 공인중개사가 사실을 다시 확인하는 주거 비교 안내입니다.">
|
||||
<meta property="og:title" content="한남자리 — 내 기준에 맞는 집부터">
|
||||
<meta property="og:description" content="조건을 정리하고 후보를 비교한 뒤 공인중개사가 확인하는 개인 주거 브리핑 데스크">
|
||||
<meta name="theme-color" content="#eceff1">
|
||||
<meta name="description" content="서울 한남 생활권의 예시 매물 3곳을 예산, 전용면적, 입주 희망일, 주차 조건으로 비교하고, 계약 전에 공인중개사가 권리와 현장을 다시 확인하는 주거 비교 안내입니다.">
|
||||
<meta property="og:title" content="한남자리 — 한남 생활권 매물 3곳을 내 조건으로 비교">
|
||||
<meta property="og:description" content="예산, 면적, 입주, 주차 조건으로 한남 생활권의 예시 매물을 비교하고, 계약 전 공인중개사가 다시 확인하는 주거 비교 안내">
|
||||
<meta property="og:image" content="./og.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="한남자리 — 내 기준에 맞는 집부터">
|
||||
<meta name="twitter:description" content="서울의 집을 내 조건으로 대조하는 개인 주거 브리핑 데스크">
|
||||
<meta name="twitter:title" content="한남자리 — 한남 생활권 매물 3곳을 내 조건으로 비교">
|
||||
<meta name="twitter:description" content="내 조건으로 한남 생활권의 예시 매물을 비교하는 주거 비교 안내">
|
||||
<meta name="twitter:image" content="./og.png">
|
||||
<title>한남자리 — 내 기준에 맞는 집부터</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23121311'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial' font-size='19' font-weight='700' fill='%23f3f0e8'%3EHJ%3C/text%3E%3C/svg%3E">
|
||||
<link rel="preload" href="./assets/hannam-evening-1600.webp" as="image" type="image/webp" media="(min-width: 961px)">
|
||||
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all">
|
||||
<link rel="stylesheet" href="./styles/landing.css?v=20260912all">
|
||||
<script src="./scripts/landing.js?v=20260830e" defer></script>
|
||||
<title>한남자리 — 한남 생활권 매물 3곳을 내 조건으로 비교</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='8' fill='%232d7639'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='22' font-weight='700' fill='%23ffffff'%3EHJ%3C/text%3E%3C/svg%3E">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;700&display=swap">
|
||||
<link rel="stylesheet" href="./styles/tokens.css?v=20261006">
|
||||
<link rel="stylesheet" href="./styles/landing.css?v=20261006">
|
||||
<script src="./scripts/landing.js?v=20261006" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#main-content">본문 바로가기</a>
|
||||
<div class="demo-strip" role="region" aria-label="예시 자료 안내">안내 · 예시 자료 · 입력 내용은 전송되지 않으며 상담은 접수되지 않습니다</div>
|
||||
<div class="demo-strip" role="region" aria-label="예시 자료 안내">예시 자료입니다. 상담은 접수되지 않습니다.</div>
|
||||
|
||||
<header class="site-header" data-site-header>
|
||||
<a class="brand-link" href="#top" aria-label="한남자리 처음으로">
|
||||
<span class="brand-mark" aria-hidden="true">HJ</span>
|
||||
<span class="brand-lockup"><strong class="brand">한남자리</strong><small>개인 주거 브리핑 데스크</small></span>
|
||||
<span class="brand-lockup"><strong class="brand">한남자리</strong><small>한남 생활권 주거 비교</small></span>
|
||||
</a>
|
||||
<button class="menu-button" type="button" aria-label="메뉴 열기" aria-expanded="false" aria-controls="site-nav" data-menu-button>
|
||||
<i aria-hidden="true"></i><i aria-hidden="true"></i>
|
||||
</button>
|
||||
<nav class="site-nav" id="site-nav" aria-label="주요 메뉴" data-site-nav>
|
||||
<a href="#briefing">맞춤 브리핑</a>
|
||||
<a href="#homes">세 집 비교</a>
|
||||
<a href="#dossier">선택 서류철</a>
|
||||
<a href="#handoff">중개사 인계</a>
|
||||
<a href="#briefing">조건 브리핑</a>
|
||||
<a href="#homes">다섯 조건 비교</a>
|
||||
<a href="#dossier">서류철</a>
|
||||
<a href="#handoff">상담 준비</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="brief-hero" id="top" aria-labelledby="hero-title">
|
||||
<div class="masthead">
|
||||
<p class="eyebrow">한남 생활권 맞춤 중개</p>
|
||||
<h1 id="hero-title">한남에서, 내 기준에 맞는 집부터.</h1>
|
||||
<p class="hero-copy">예산과 면적, 입주 계획을 먼저 정리합니다. 입력한 기준을 후보와 대조하고, 계약 전에는 공인중개사가 다시 확인합니다.</p>
|
||||
<div class="hero-actions">
|
||||
<button class="button button-primary" type="button" data-focus-condition>내 조건 분석하기</button>
|
||||
<a class="text-link" href="#homes">매물 보기 <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
<section class="listing-hero" id="top" aria-labelledby="hero-title">
|
||||
<div class="hero-head">
|
||||
<h1 id="hero-title">한남 생활권 매물 3곳을 내 조건으로 비교합니다</h1>
|
||||
<dl class="masthead-note">
|
||||
<div><dt>대조 기준</dt><dd>가격 · 면적 · 입주 · 주차</dd></div>
|
||||
<div><dt>비교 기준</dt><dd>가격, 면적, 입주, 주차</dd></div>
|
||||
<div><dt>마지막 판단</dt><dd>공인중개사 확인</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<figure class="hero-scene" data-image-frame>
|
||||
<figcaption>연출 이미지</figcaption>
|
||||
<picture>
|
||||
<source media="(max-width: 640px)" srcset="./assets/hannam-evening-mobile.webp">
|
||||
<source media="(max-width: 960px)" srcset="./assets/hannam-evening-960.webp">
|
||||
<img src="./assets/hannam-evening-1600.webp" width="1600" height="1000" alt="서울 언덕 생활권의 현대 주거를 표현한 이미지" data-fallback-image>
|
||||
</picture>
|
||||
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="주거 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
|
||||
</figure>
|
||||
|
||||
<form class="brief-dock" data-condition-form aria-describedby="condition-note">
|
||||
<div class="dock-heading"><span>내 기준</span><strong>먼저 다섯 가지만 정리해 보세요.</strong></div>
|
||||
<form class="brief-dock" data-condition-form aria-label="비교 조건" aria-describedby="condition-note">
|
||||
<label class="dock-field"><span>거래 형태</span><select name="trade" data-trade-input><option value="sale">매매</option><option value="jeonse">전세</option><option value="monthly">월세</option></select></label>
|
||||
<label class="dock-field"><span>예산 상한</span><span class="input-suffix"><input name="budget" type="number" min="1" max="100" step="1" value="40" inputmode="decimal"><i>억 원</i></span></label>
|
||||
<label class="dock-field"><span>최소 전용면적</span><span class="input-suffix"><input name="minArea" type="number" min="30" max="300" step="1" value="110" inputmode="decimal"><i>㎡</i></span></label>
|
||||
<label class="dock-field"><span>입주 희망일</span><input name="moveIn" type="date" value="2026-12-20"></label>
|
||||
<label class="dock-field"><span>필요 주차</span><select name="parking"><option value="0">상관없음</option><option value="1">1대 이상</option><option value="2" selected>2대 이상</option><option value="3">3대 이상</option></select></label>
|
||||
<div class="dock-actions"><button class="button button-primary" type="submit">분석 결과 보기</button><button class="save-button" type="button" data-save-condition>조건 임시 보관</button></div>
|
||||
<p class="condition-note" id="condition-note">입력은 전송되지 않으며, 임시 보관을 선택하면 지금 사용 중인 기기에만 남습니다.</p>
|
||||
<p class="condition-note" id="condition-note">입력은 전송되지 않습니다. 임시 보관을 누르면 지금 쓰는 기기에만 남습니다.</p>
|
||||
</form>
|
||||
|
||||
<div class="listing-grid" data-candidate-rail role="group" aria-label="비교할 집 선택">
|
||||
<div class="candidate-option is-selected" data-listing="home-1">
|
||||
<button type="button" class="candidate-button" aria-label="정원형 연립주택 선택" aria-pressed="true" data-select-listing="home-1"></button>
|
||||
<div class="candidate-content" aria-hidden="true">
|
||||
<div class="candidate-caption">
|
||||
<span class="candidate-index">01</span>
|
||||
<strong>정원형 연립주택</strong>
|
||||
<span class="candidate-verdict" data-candidate-verdict hidden></span>
|
||||
<span class="candidate-facts"><span>매매</span><small>118.42㎡</small><b data-candidate-price>38억 원</b></span>
|
||||
</div>
|
||||
<figure data-image-frame>
|
||||
<figcaption>연출 이미지</figcaption>
|
||||
<span class="candidate-media"><img src="./assets/hannam-interior-1200.webp" width="1200" height="800" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" fetchpriority="high" data-fallback-image></span>
|
||||
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="거실 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-option" data-listing="home-2">
|
||||
<button type="button" class="candidate-button" aria-label="복층형 공동주택 선택" aria-pressed="false" data-select-listing="home-2"></button>
|
||||
<div class="candidate-content" aria-hidden="true">
|
||||
<div class="candidate-caption">
|
||||
<span class="candidate-index">02</span>
|
||||
<strong>복층형 공동주택</strong>
|
||||
<span class="candidate-verdict" data-candidate-verdict hidden></span>
|
||||
<span class="candidate-facts"><span>전세</span><small>142.80㎡</small><b data-candidate-price>22억 원</b></span>
|
||||
</div>
|
||||
<figure data-image-frame>
|
||||
<figcaption>연출 이미지</figcaption>
|
||||
<span class="candidate-media"><picture>
|
||||
<source media="(max-width: 640px)" srcset="./assets/hannam-evening-640.webp">
|
||||
<source media="(max-width: 1100px)" srcset="./assets/hannam-evening-960.webp">
|
||||
<img src="./assets/hannam-evening-1600.webp" width="1600" height="1000" alt="서울 언덕 생활권의 현대 주거 외관을 표현한 이미지" data-fallback-image>
|
||||
</picture></span>
|
||||
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="외관 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candidate-option" data-listing="home-3">
|
||||
<button type="button" class="candidate-button" aria-label="테라스형 다세대주택 선택" aria-pressed="false" data-select-listing="home-3"></button>
|
||||
<div class="candidate-content" aria-hidden="true">
|
||||
<div class="candidate-caption">
|
||||
<span class="candidate-index">03</span>
|
||||
<strong>테라스형 다세대주택</strong>
|
||||
<span class="candidate-verdict" data-candidate-verdict hidden></span>
|
||||
<span class="candidate-facts"><span>월세</span><small>140.84㎡</small><b data-candidate-price>보증금 5억 · 월 1,200만</b></span>
|
||||
</div>
|
||||
<figure data-image-frame>
|
||||
<figcaption>연출 이미지</figcaption>
|
||||
<span class="candidate-media is-crop-window"><img src="./assets/hannam-interior-720.webp" width="720" height="480" alt="큰 창 너머 언덕 동네가 보이는 거실 창가를 표현한 이미지" data-fallback-image></span>
|
||||
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="창가 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="briefing-section" id="briefing" aria-labelledby="briefing-title">
|
||||
<header class="section-heading briefing-heading">
|
||||
<p class="eyebrow">내 조건 브리핑</p>
|
||||
<h2 id="briefing-title">맞는 이유와<br>조정할 지점을 나눕니다.</h2>
|
||||
<p>입력한 기준과 후보 정보를 같은 항목으로 비교합니다.</p>
|
||||
<header class="section-heading">
|
||||
<h2 id="briefing-title">입력한 조건과 맞는 점, 조정할 점, 중개사와 확인할 점을 나눕니다.</h2>
|
||||
<p>위 다섯 칸을 채우고 분석을 누르면 세 집 가운데 조건과 가장 가까운 집을 고르고 이유를 세 묶음으로 적습니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="briefing-sheet" data-analysis-result aria-live="polite" aria-atomic="false">
|
||||
<header><span>안내용 조건 비교 · 공인중개사 확인 전</span><strong data-analysis-home>아직 분석하지 않았습니다</strong></header>
|
||||
<header><span>공인중개사 확인 전 안내용 비교</span><strong data-analysis-home>아직 분석하지 않았습니다</strong></header>
|
||||
<div class="briefing-empty" data-analysis-empty>
|
||||
<span aria-hidden="true">01</span>
|
||||
<div><h3>내 조건을 먼저 알려 주세요.</h3><p>분석을 실행하면 세 후보 가운데 조건과 가까운 집을 고르고, 이유를 세 묶음으로 정리합니다.</p></div>
|
||||
|
|
@ -101,8 +140,7 @@
|
|||
|
||||
<section class="compare-section" id="homes" aria-labelledby="compare-title">
|
||||
<header class="section-heading compare-heading">
|
||||
<div><p class="eyebrow">예시 매물 3곳</p><h2 id="compare-title">서울의 집을<br>한 장씩 대조합니다.</h2></div>
|
||||
<p>후보를 바꾸면 가운데 장면과 오른쪽 다섯 조건이 함께 바뀝니다.</p>
|
||||
<div><p class="eyebrow">예시 매물</p><h2 id="compare-title">선택한 집의 다섯 조건을 입력값과 나란히 봅니다.</h2></div>
|
||||
<div class="unit-switches" role="group" aria-label="표시 단위">
|
||||
<div role="group" aria-label="면적 단위"><button type="button" aria-pressed="true" data-area-unit="m2">㎡</button><button type="button" aria-pressed="false" data-area-unit="pyeong">평</button></div>
|
||||
<div role="group" aria-label="가격 표시"><button type="button" aria-pressed="true" data-price-unit="total">총액</button><button type="button" aria-pressed="false" data-price-unit="unit">면적 단가</button></div>
|
||||
|
|
@ -110,16 +148,10 @@
|
|||
</header>
|
||||
|
||||
<div class="compare-desk">
|
||||
<div class="candidate-rail" data-candidate-rail role="group" aria-label="비교할 집 선택">
|
||||
<div class="candidate-option is-selected"><button type="button" class="candidate-button" aria-label="정원형 연립주택 선택" aria-pressed="true" data-select-listing="home-1"></button><div class="candidate-content" aria-hidden="true"><span>01</span><strong>정원형 연립주택</strong><small>매매 · 118.42㎡</small></div></div>
|
||||
<div class="candidate-option"><button type="button" class="candidate-button" aria-label="복층형 공동주택 선택" aria-pressed="false" data-select-listing="home-2"></button><div class="candidate-content" aria-hidden="true"><span>02</span><strong>복층형 공동주택</strong><small>전세 · 142.80㎡</small></div></div>
|
||||
<div class="candidate-option"><button type="button" class="candidate-button" aria-label="테라스형 다세대주택 선택" aria-pressed="false" data-select-listing="home-3"></button><div class="candidate-content" aria-hidden="true"><span>03</span><strong>테라스형 다세대주택</strong><small>월세 · 140.84㎡</small></div></div>
|
||||
</div>
|
||||
|
||||
<figure class="candidate-scene" data-image-frame>
|
||||
<figcaption>연출 이미지</figcaption>
|
||||
<img src="./assets/hannam-interior-1200.webp" width="1200" height="800" loading="lazy" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" data-compare-image data-fallback-image>
|
||||
<div class="scene-caption"><span data-compare-index>01</span><div><strong data-compare-name>정원형 연립주택</strong><small data-compare-life>한강진역 북쪽 생활권</small></div></div>
|
||||
<img src="./assets/hannam-interior-1200.webp" width="1200" height="800" loading="lazy" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" data-compare-image data-fallback-image>
|
||||
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="후보 주거 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
|
||||
</figure>
|
||||
|
||||
|
|
@ -135,9 +167,9 @@
|
|||
|
||||
<section class="dossier-section" id="dossier" aria-labelledby="dossier-title">
|
||||
<header class="section-heading dossier-heading">
|
||||
<p class="eyebrow">선택한 예시 집 검토 서류철</p>
|
||||
<p class="eyebrow">선택한 예시 매물</p>
|
||||
<h2 id="dossier-title" data-dossier-title>정원형 연립주택</h2>
|
||||
<p><strong data-dossier-life>한강진역 북쪽 생활권</strong><span>거리·소요 시간 미제공</span></p>
|
||||
<p><strong data-dossier-life>한강진역 북쪽 생활권</strong><span>거리와 소요 시간은 제공하지 않습니다</span></p>
|
||||
</header>
|
||||
|
||||
<div class="dossier-shell">
|
||||
|
|
@ -146,13 +178,13 @@
|
|||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-price" id="dossier-tab-price" tabindex="-1" data-dossier-tab="price">가격</button>
|
||||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-rights" id="dossier-tab-rights" tabindex="-1" data-dossier-tab="rights">권리</button>
|
||||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-location" id="dossier-tab-location" tabindex="-1" data-dossier-tab="location">입지 확인</button>
|
||||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-facility" id="dossier-tab-facility" tabindex="-1" data-dossier-tab="facility">시설·관리</button>
|
||||
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-facility" id="dossier-tab-facility" tabindex="-1" data-dossier-tab="facility">시설과 관리</button>
|
||||
</div>
|
||||
|
||||
<div class="dossier-pages">
|
||||
<section class="dossier-panel" role="tabpanel" id="dossier-basic" aria-labelledby="dossier-tab-basic" data-dossier-panel="basic">
|
||||
<div class="image-filmstrip">
|
||||
<figure data-image-frame><figcaption>연출 이미지</figcaption><img src="./assets/hannam-evening-960.webp" width="960" height="540" loading="lazy" alt="서울 언덕 생활권의 주거 외관을 표현한 이미지" data-fallback-image><div class="image-fallback" hidden data-image-fallback role="img" aria-label="외관 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div></figure>
|
||||
<figure data-image-frame><figcaption>연출 이미지</figcaption><img src="./assets/hannam-evening-960.webp" width="960" height="600" loading="lazy" alt="서울 언덕 생활권의 주거 외관을 표현한 이미지" data-fallback-image><div class="image-fallback" hidden data-image-fallback role="img" aria-label="외관 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div></figure>
|
||||
<figure data-image-frame><figcaption>연출 이미지</figcaption><img src="./assets/hannam-interior-720.webp" width="720" height="480" loading="lazy" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" data-fallback-image><div class="image-fallback" hidden data-image-fallback role="img" aria-label="실내 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div></figure>
|
||||
</div>
|
||||
<dl class="spec-strip" data-spec-strip>
|
||||
|
|
@ -171,7 +203,7 @@
|
|||
|
||||
<section class="dossier-panel" role="tabpanel" id="dossier-rights" aria-labelledby="dossier-tab-rights" data-dossier-panel="rights" hidden>
|
||||
<div class="page-heading"><span>권리 확인</span><h3>계약 전 공인중개사가 다시 볼 항목입니다.</h3></div>
|
||||
<ul class="review-list"><li><span>01</span><div><strong>등기와 소유 관계</strong><p>서류를 통해 현재 권리 상태를 확인합니다.</p></div></li><li><span>02</span><div><strong>계약 조건과 특약</strong><p>거래 형태에 맞는 보호 조건을 검토합니다.</p></div></li><li><span>03</span><div><strong>현재 거래 가능 상태</strong><p>상담 시점에 다시 확인합니다.</p></div></li></ul>
|
||||
<ul class="review-list"><li><span>01</span><div><strong>등기와 소유 관계</strong><p>등기부등본으로 현재 권리 관계를 확인합니다.</p></div></li><li><span>02</span><div><strong>계약 조건과 특약</strong><p>거래 형태에 맞는 보호 조건을 검토합니다.</p></div></li><li><span>03</span><div><strong>현재 거래 가능 상태</strong><p>상담 시점에 다시 확인합니다.</p></div></li></ul>
|
||||
</section>
|
||||
|
||||
<section class="dossier-panel" role="tabpanel" id="dossier-location" aria-labelledby="dossier-tab-location" data-dossier-panel="location" hidden>
|
||||
|
|
@ -180,28 +212,41 @@
|
|||
</section>
|
||||
|
||||
<section class="dossier-panel" role="tabpanel" id="dossier-facility" aria-labelledby="dossier-tab-facility" data-dossier-panel="facility" hidden>
|
||||
<div class="page-heading"><span>시설·관리</span><h3>생활 비용과 이용 조건을 함께 봅니다.</h3></div>
|
||||
<dl class="page-ledger"><div><dt>관리비</dt><dd data-page-fee>월 48만 원</dd></div><div><dt>포함 항목</dt><dd data-page-included>공용 관리, 청소, 승강기</dd></div><div><dt>별도 항목</dt><dd data-page-excluded>전기, 가스, 수도</dd></div><div><dt>방과 욕실</dt><dd data-page-rooms>방 3 · 욕실 2</dd></div></dl>
|
||||
<div class="page-heading"><span>시설과 관리</span><h3>생활 비용과 이용 조건을 함께 봅니다.</h3></div>
|
||||
<dl class="page-ledger"><div><dt>관리비</dt><dd data-page-fee>월 48만 원</dd></div><div><dt>포함 항목</dt><dd data-page-included>공용 관리, 청소, 승강기</dd></div><div><dt>별도 항목</dt><dd data-page-excluded>전기, 가스, 수도</dd></div><div><dt>방과 욕실</dt><dd data-page-rooms>방 3, 욕실 2</dd></div></dl>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="handoff-section" id="handoff" aria-labelledby="handoff-title">
|
||||
<header><p class="eyebrow">사람에게 넘기는 마감</p><h2 id="handoff-title">AI가 좁히고,<br>공인중개사가 확인합니다.</h2></header>
|
||||
<ol class="handoff-steps">
|
||||
<li><span>01</span><div><strong>조건 정리</strong><p>가격, 면적, 입주, 주차를 한 장에 모읍니다.</p></div></li>
|
||||
<li><span>02</span><div><strong>후보 비교</strong><p>서로 다른 집의 차이를 같은 기준으로 대조합니다.</p></div></li>
|
||||
<li><span>03</span><div><strong>권리·현장 확인</strong><p>서류와 현장에서 확인한 뒤 최종 판단합니다.</p></div></li>
|
||||
</ol>
|
||||
<button class="button button-light handoff-cta" type="button" data-open-consult>상담 전 확인할 항목 보기</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div><strong>한남자리</strong><span>개인 주거 브리핑 데스크</span></div>
|
||||
<p>한남자리는 예시 자료로 구성한 서비스 화면입니다. 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다.</p>
|
||||
<nav aria-label="보조 메뉴"><a href="#top">처음으로</a></nav>
|
||||
<footer class="site-footer" id="handoff" aria-labelledby="handoff-title">
|
||||
<div class="footer-intro">
|
||||
<h2 id="handoff-title">조건 정리와 후보 비교는 이 화면에서, 권리와 현장 확인은 공인중개사가 합니다.</h2>
|
||||
<ol class="handoff-steps">
|
||||
<li><span>01</span><div><strong>조건 정리</strong><span class="step-copy">가격, 면적, 입주, 주차를 위 조건판에 적습니다.</span></div></li>
|
||||
<li><span>02</span><div><strong>후보 비교</strong><span class="step-copy">세 집의 차이를 같은 기준으로 대조합니다.</span></div></li>
|
||||
<li><span>03</span><div><strong>권리와 현장 확인</strong><span class="step-copy">등기부등본과 현장에서 확인한 뒤 계약 여부를 정합니다.</span></div></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form class="consult-prep" data-consult-prep aria-labelledby="prep-title">
|
||||
<h3 id="prep-title">상담 전에 확인할 항목을 고르세요</h3>
|
||||
<div class="prep-home">기준이 되는 집 <strong data-prep-home>정원형 연립주택</strong></div>
|
||||
<div class="prep-options">
|
||||
<label><input type="checkbox" name="agenda" value="rights" checked> 권리 관계와 계약 조건</label>
|
||||
<label><input type="checkbox" name="agenda" value="visit" checked> 현장 방문 때 볼 항목</label>
|
||||
<label><input type="checkbox" name="agenda" value="move"> 입주 가능일 조율</label>
|
||||
</div>
|
||||
<button class="button button-primary handoff-cta" type="button" data-open-consult>상담 전 확인할 항목 보기</button>
|
||||
<span class="prep-note">연락처를 받거나 입력 내용을 저장하지 않습니다.</span>
|
||||
</form>
|
||||
|
||||
<div class="footer-legal">
|
||||
<div class="footer-brand"><strong>한남자리</strong><span>한남 생활권 주거 비교</span></div>
|
||||
<p>한남자리는 예시 자료로 구성한 서비스 화면입니다. 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다.</p>
|
||||
<nav aria-label="보조 메뉴"><a href="#top">처음으로</a><a href="./admin/">운영 화면</a></nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<dialog class="consult-dialog" data-consult-dialog aria-labelledby="consult-title">
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 292 KiB After Width: | Height: | Size: 91 KiB |
|
|
@ -18,7 +18,7 @@
|
|||
fee: "월 48만 원",
|
||||
included: "공용 관리, 청소, 승강기",
|
||||
excluded: "전기, 가스, 수도",
|
||||
rooms: "방 3 · 욕실 2",
|
||||
rooms: "방 3, 욕실 2",
|
||||
image: "./assets/hannam-interior-1200.webp",
|
||||
imageAlt: "큰 창과 목재 수납이 있는 거실을 표현한 이미지"
|
||||
},
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
fee: "월 56만 원",
|
||||
included: "공용 관리, 보안, 승강기",
|
||||
excluded: "전기, 가스, 수도, 냉난방",
|
||||
rooms: "방 4 · 욕실 2",
|
||||
rooms: "방 4, 욕실 2",
|
||||
image: "./assets/hannam-evening-1600.webp",
|
||||
imageAlt: "서울 언덕 생활권의 현대 주거 외관을 표현한 이미지"
|
||||
},
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
fee: "월 52만 원",
|
||||
included: "공용 관리, 청소",
|
||||
excluded: "전기, 가스, 수도, 승강기 점검",
|
||||
rooms: "방 3 · 욕실 2",
|
||||
rooms: "방 3, 욕실 2",
|
||||
image: "./assets/hannam-interior-1200.webp",
|
||||
imageAlt: "큰 창과 목재 수납이 있는 거실을 표현한 이미지"
|
||||
}
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
|
||||
const unitPriceText = (home) => {
|
||||
const perPyeong = Math.round(((home.priceEok * 10000) / home.areaPyeong) / 10) * 10;
|
||||
if (home.trade === "monthly") return `보증금 평당 약 ${formatNumber(perPyeong)}만 · 월 ${formatNumber(home.monthlyManwon)}만`;
|
||||
if (home.trade === "monthly") return `보증금 평당 약 ${formatNumber(perPyeong)}만, 월 ${formatNumber(home.monthlyManwon)}만`;
|
||||
return `평당 약 ${formatNumber(perPyeong)}만 원`;
|
||||
};
|
||||
|
||||
|
|
@ -136,44 +136,44 @@
|
|||
const check = [];
|
||||
|
||||
if (home.trade === conditions.trade) {
|
||||
fit.push(claim("거래 형태", `${home.tradeLabel} 조건과 같습니다.`, "입력한 조건 · 매물 정보"));
|
||||
fit.push(claim("거래 형태", `${home.tradeLabel} 조건과 같습니다.`, "입력한 조건과 매물 정보"));
|
||||
} else {
|
||||
adjust.push(claim("거래 형태", `입력은 ${tradeLabel(conditions.trade)}, 선택한 집은 ${home.tradeLabel}입니다.`, "입력한 조건 · 매물 정보"));
|
||||
adjust.push(claim("거래 형태", `입력은 ${tradeLabel(conditions.trade)}, 선택한 집은 ${home.tradeLabel}입니다.`, "입력한 조건과 매물 정보"));
|
||||
}
|
||||
|
||||
if (home.trade === "monthly") {
|
||||
if (home.priceEok > conditions.budget) {
|
||||
adjust.push(claim("보증금 상한", `보증금이 입력한 상한보다 ${formatNumber(home.priceEok - conditions.budget)}억 원 높습니다.`, "입력한 조건 · 매물 정보"));
|
||||
adjust.push(claim("보증금 상한", `보증금이 입력한 상한보다 ${formatNumber(home.priceEok - conditions.budget)}억 원 높습니다.`, "입력한 조건과 매물 정보"));
|
||||
} else {
|
||||
adjust.push(claim("월 납부 조건", `보증금은 상한 안쪽이지만 월 ${formatNumber(home.monthlyManwon)}만 원을 별도로 살펴야 합니다.`, "입력한 조건 · 매물 정보"));
|
||||
adjust.push(claim("월 납부 조건", `보증금은 상한 안쪽이지만 월 ${formatNumber(home.monthlyManwon)}만 원을 별도로 살펴야 합니다.`, "입력한 조건과 매물 정보"));
|
||||
}
|
||||
} else if (home.priceEok <= conditions.budget) {
|
||||
fit.push(claim("가격 상한", `입력한 상한보다 ${formatNumber(conditions.budget - home.priceEok)}억 원 낮습니다.`, "입력한 조건 · 매물 정보"));
|
||||
fit.push(claim("가격 상한", `입력한 상한보다 ${formatNumber(conditions.budget - home.priceEok)}억 원 낮습니다.`, "입력한 조건과 매물 정보"));
|
||||
} else {
|
||||
adjust.push(claim("가격 상한", `입력한 상한보다 ${formatNumber(home.priceEok - conditions.budget)}억 원 높습니다.`, "입력한 조건 · 매물 정보"));
|
||||
adjust.push(claim("가격 상한", `입력한 상한보다 ${formatNumber(home.priceEok - conditions.budget)}억 원 높습니다.`, "입력한 조건과 매물 정보"));
|
||||
}
|
||||
|
||||
if (home.areaM2 >= conditions.minArea) {
|
||||
fit.push(claim("전용면적", `최소 면적보다 ${formatNumber(home.areaM2 - conditions.minArea, 2)}㎡ 넓습니다.`, "입력한 조건 · 매물 정보"));
|
||||
fit.push(claim("전용면적", `최소 면적보다 ${formatNumber(home.areaM2 - conditions.minArea, 2)}㎡ 넓습니다.`, "입력한 조건과 매물 정보"));
|
||||
} else {
|
||||
adjust.push(claim("전용면적", `최소 면적보다 ${formatNumber(conditions.minArea - home.areaM2, 2)}㎡ 작습니다.`, "입력한 조건 · 매물 정보"));
|
||||
adjust.push(claim("전용면적", `최소 면적보다 ${formatNumber(conditions.minArea - home.areaM2, 2)}㎡ 작습니다.`, "입력한 조건과 매물 정보"));
|
||||
}
|
||||
|
||||
if (home.parking >= conditions.parking) {
|
||||
fit.push(claim("주차", `${home.parking}대로 필요한 수를 충족합니다.`, "입력한 조건 · 매물 정보"));
|
||||
fit.push(claim("주차", `${home.parking}대로 필요한 수를 충족합니다.`, "입력한 조건과 매물 정보"));
|
||||
} else {
|
||||
adjust.push(claim("주차", `필요한 수보다 ${conditions.parking - home.parking}대 부족합니다.`, "입력한 조건 · 매물 정보"));
|
||||
adjust.push(claim("주차", `필요한 수보다 ${conditions.parking - home.parking}대 부족합니다.`, "입력한 조건과 매물 정보"));
|
||||
}
|
||||
|
||||
if (!conditions.moveIn) {
|
||||
adjust.push(claim("입주 희망일", "날짜를 정하면 입주 가능 시점과 대조할 수 있습니다.", "입력한 조건"));
|
||||
} else if (home.moveDate <= conditions.moveIn) {
|
||||
fit.push(claim("입주 시점", `${home.moveLabel}으로 희망일 전후 협의가 가능합니다.`, "입력한 조건 · 매물 정보"));
|
||||
fit.push(claim("입주 시점", `${home.moveLabel}으로 희망일 전후 협의가 가능합니다.`, "입력한 조건과 매물 정보"));
|
||||
} else {
|
||||
adjust.push(claim("입주 시점", `${home.moveLabel}으로 입력한 희망일보다 늦습니다.`, "입력한 조건 · 매물 정보"));
|
||||
adjust.push(claim("입주 시점", `${home.moveLabel}으로 입력한 희망일보다 늦습니다.`, "입력한 조건과 매물 정보"));
|
||||
}
|
||||
|
||||
check.push(claim("권리 관계", "등기와 계약 조건은 서류를 통해 다시 살펴야 합니다.", "공인중개사 확인"));
|
||||
check.push(claim("권리 관계", "등기와 계약 조건은 등기부등본과 계약서로 다시 확인해야 합니다.", "공인중개사 확인"));
|
||||
check.push(claim("현장 상태", "소음, 마감과 채광은 방문해서 확인해야 합니다.", "현장 확인"));
|
||||
|
||||
return { fit, adjust, check };
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
const fillClaimList = (selector, items, emptyText) => {
|
||||
const list = $(selector);
|
||||
if (!list) return;
|
||||
const nextItems = items.length ? items : [claim(emptyText, "현재 입력에서 바로 조정할 항목이 없습니다.", "입력한 조건 · 매물 정보")];
|
||||
const nextItems = items.length ? items : [claim(emptyText, "현재 입력에서 바로 조정할 항목이 없습니다.", "입력한 조건과 매물 정보")];
|
||||
list.replaceChildren(...nextItems.map(createClaimItem));
|
||||
};
|
||||
|
||||
|
|
@ -255,7 +255,7 @@
|
|||
setMatrixNote("[data-matrix-trade-note]", home.trade === conditions.trade ? "입력과 같음" : `${tradeLabel(conditions.trade)}에서 조정 필요`, home.trade === conditions.trade ? "" : "is-adjust");
|
||||
|
||||
if (home.trade === "monthly") {
|
||||
const depositNote = home.priceEok <= conditions.budget ? "보증금은 상한 안쪽 · 월 납부 별도" : `보증금이 상한보다 ${formatNumber(home.priceEok - conditions.budget)}억 높음`;
|
||||
const depositNote = home.priceEok <= conditions.budget ? "보증금은 상한 안쪽, 월 납부 별도" : `보증금이 상한보다 ${formatNumber(home.priceEok - conditions.budget)}억 높음`;
|
||||
setMatrixNote("[data-matrix-price-note]", depositNote, "is-check");
|
||||
} else {
|
||||
const pricePass = home.priceEok <= conditions.budget;
|
||||
|
|
@ -276,18 +276,56 @@
|
|||
}
|
||||
};
|
||||
|
||||
// 첫 화면 격자. 분석 전에는 등록 순서(01·02·03), 분석 후에는 조건 점수 순서로 놓고
|
||||
// 칸마다 맞는 조건 수와 조정할 조건 수를 적는다. 순서 변경은 CSS order 로만 바꾼다 —
|
||||
// DOM 순서를 바꾸지 않아야 키보드 순서와 E2E 선택자가 그대로다.
|
||||
const renderCandidateRail = () => {
|
||||
const conditions = state.conditions || readConditions();
|
||||
const ranked = state.analyzed
|
||||
? [...homes].sort((a, b) => scoreHome(b, conditions) - scoreHome(a, conditions))
|
||||
: homes;
|
||||
$$('[data-select-listing]').forEach((button) => {
|
||||
const home = getHome(button.dataset.selectListing);
|
||||
const active = home.id === state.selectedId;
|
||||
button.setAttribute("aria-pressed", String(active));
|
||||
button.closest(".candidate-option")?.classList.toggle("is-selected", active);
|
||||
const option = button.closest(".candidate-option");
|
||||
option?.classList.toggle("is-selected", active);
|
||||
if (option) option.style.order = String(ranked.indexOf(home) + 1);
|
||||
const content = button.nextElementSibling;
|
||||
const small = content?.querySelector("small");
|
||||
if (small) small.textContent = `${home.tradeLabel} · ${formatArea(home)}`;
|
||||
if (small) small.textContent = formatArea(home);
|
||||
const price = content?.querySelector("[data-candidate-price]");
|
||||
if (price) price.textContent = formatPrice(home);
|
||||
const verdict = content?.querySelector("[data-candidate-verdict]");
|
||||
if (verdict) {
|
||||
if (!state.analyzed) {
|
||||
verdict.hidden = true;
|
||||
verdict.textContent = "";
|
||||
verdict.className = "candidate-verdict";
|
||||
} else {
|
||||
const result = evaluateHome(home, conditions);
|
||||
const lead = ranked[0]?.id === home.id;
|
||||
verdict.hidden = false;
|
||||
verdict.textContent = lead
|
||||
? `조건과 가장 가까움, 맞는 조건 ${result.fit.length}`
|
||||
: `맞는 조건 ${result.fit.length}, 조정 ${result.adjust.length}`;
|
||||
verdict.className = lead ? "candidate-verdict is-lead" : "candidate-verdict";
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 격자 재정렬은 View Transitions 로 감싼다(R3). 미지원 브라우저와 감소 모션은 즉시 바뀐다.
|
||||
const withViewTransition = (update) => {
|
||||
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
if (reduced || typeof document.startViewTransition !== "function") {
|
||||
update();
|
||||
return Promise.resolve();
|
||||
}
|
||||
const transition = document.startViewTransition(update);
|
||||
return transition.finished.catch(() => {});
|
||||
};
|
||||
|
||||
const renderCompareScene = (home) => {
|
||||
const image = $("[data-compare-image]");
|
||||
if (image) {
|
||||
|
|
@ -338,6 +376,8 @@
|
|||
$("[data-dossier-life]").textContent = home.life;
|
||||
const consultHome = $("[data-consult-home]");
|
||||
if (consultHome) consultHome.textContent = home.name;
|
||||
const prepHome = $("[data-prep-home]");
|
||||
if (prepHome) prepHome.textContent = home.name;
|
||||
$("[data-location-heading]").textContent = `${home.life}을 직접 살핍니다.`;
|
||||
$("[data-page-budget]").textContent = `${formatNumber(conditions.budget)}억 원`;
|
||||
$("[data-page-price]").textContent = totalPriceText(home);
|
||||
|
|
@ -384,7 +424,9 @@
|
|||
state.analyzed = true;
|
||||
const best = homes.reduce((current, home) => scoreHome(home, conditions) > scoreHome(current, conditions) ? home : current, homes[0]);
|
||||
state.selectedId = best.id;
|
||||
renderSelection();
|
||||
// 스크롤은 전환을 기다리지 않고 바로 시작한다 — 전환이 끝난 뒤 스크롤하면 그 사이에
|
||||
// 좌표를 잡은 클릭(실측: E2E 후보 클릭)이 다른 자리에 떨어진다.
|
||||
withViewTransition(renderSelection);
|
||||
$("#briefing")?.scrollIntoView({ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
|
||||
announce(`${best.name}을 가장 가까운 후보로 골랐습니다. 맞는 점, 조정할 점, 확인할 점을 정리했습니다.`);
|
||||
};
|
||||
|
|
@ -392,7 +434,7 @@
|
|||
const markConditionsChanged = () => {
|
||||
if (!state.analyzed) return;
|
||||
resetBriefing();
|
||||
renderSelection();
|
||||
withViewTransition(renderSelection);
|
||||
announce("조건이 바뀌어 이전 브리핑을 비웠습니다. 다시 분석해 주세요.");
|
||||
};
|
||||
|
||||
|
|
@ -465,13 +507,19 @@
|
|||
strong.textContent = getHome().name;
|
||||
copy.append(strong, "을 기준으로 준비할 항목을 골라 보세요.");
|
||||
content.append(copy);
|
||||
[["rights", "권리 관계와 계약 조건", true], ["visit", "현장 방문 때 볼 항목", true], ["move", "입주 가능일 조율", false]].forEach(([value, label, checked]) => {
|
||||
// 푸터 준비 폼에서 고른 항목을 그대로 가져온다. 폼이 없으면 기본값(권리·현장)이다.
|
||||
const prepForm = $("[data-consult-prep]");
|
||||
const prepChecked = (value, fallback) => {
|
||||
const input = prepForm?.querySelector(`input[name="agenda"][value="${value}"]`);
|
||||
return input ? input.checked : fallback;
|
||||
};
|
||||
[["rights", "권리 관계와 계약 조건", true], ["visit", "현장 방문 때 볼 항목", true], ["move", "입주 가능일 조율", false]].forEach(([value, label, fallback]) => {
|
||||
const wrapper = document.createElement("label");
|
||||
const input = document.createElement("input");
|
||||
input.type = "checkbox";
|
||||
input.name = "agenda";
|
||||
input.value = value;
|
||||
input.checked = checked;
|
||||
input.checked = prepChecked(value, fallback);
|
||||
wrapper.append(input, ` ${label}`);
|
||||
content.append(wrapper);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.admin-body {
|
||||
min-width: 0;
|
||||
color: #1c1c1a;
|
||||
background: #f3f4f3;
|
||||
color: var(--ink);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.admin-body h1,
|
||||
|
|
@ -53,9 +53,9 @@
|
|||
height: 2rem;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
color: #121210;
|
||||
background: var(--gold-light);
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.58rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.08em;
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
.sidebar-nav a.is-current {
|
||||
color: #fff;
|
||||
background: #2c2b27;
|
||||
box-shadow: inset 2px 0 0 var(--gold-light);
|
||||
box-shadow: inset 2px 0 0 var(--accent-soft);
|
||||
}
|
||||
|
||||
.sidebar-nav a > span {
|
||||
|
|
@ -436,17 +436,6 @@
|
|||
font-weight: 650;
|
||||
}
|
||||
|
||||
.state-simulator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding-left: 0.55rem;
|
||||
border-left: 1px solid #e1e2e0;
|
||||
color: #777973;
|
||||
font-size: 0.61rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-workbench {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
|
|
@ -598,7 +587,7 @@
|
|||
|
||||
.queue-table tbody tr.is-selected {
|
||||
background: #f2f5f3;
|
||||
box-shadow: inset 3px 0 0 var(--gold-dark);
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
}
|
||||
|
||||
.queue-table tbody tr.is-hidden {
|
||||
|
|
@ -943,7 +932,7 @@
|
|||
padding: 0.3rem 0.45rem;
|
||||
color: #fff;
|
||||
background: rgba(18, 18, 16, 0.82);
|
||||
border-left: 2px solid var(--gold-light);
|
||||
border-left: 2px solid var(--accent-soft);
|
||||
font-size: 0.54rem;
|
||||
}
|
||||
|
||||
|
|
@ -1106,7 +1095,7 @@
|
|||
min-width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.5rem;
|
||||
color: #6f5420;
|
||||
color: var(--accent-deep);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0.58rem;
|
||||
|
|
@ -1376,7 +1365,7 @@
|
|||
}
|
||||
|
||||
.check-row button {
|
||||
color: #6f5420;
|
||||
color: var(--accent-deep);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0.52rem;
|
||||
|
|
@ -1497,7 +1486,7 @@
|
|||
}
|
||||
|
||||
.ai-summary > span {
|
||||
color: #c6a15b;
|
||||
color: var(--accent-soft);
|
||||
font-size: 0.51rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1590,7 +1579,7 @@
|
|||
}
|
||||
|
||||
.claim-review footer button {
|
||||
color: #6f5420;
|
||||
color: var(--accent-deep);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0.49rem;
|
||||
|
|
@ -1651,7 +1640,7 @@
|
|||
}
|
||||
|
||||
.appointment-card > button {
|
||||
color: #6f5420;
|
||||
color: var(--accent-deep);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 0.49rem;
|
||||
|
|
@ -1945,7 +1934,7 @@ html:has(.admin-dialog[open]) {
|
|||
padding: 0.85rem;
|
||||
color: #fff;
|
||||
background: #20211f;
|
||||
border-left: 3px solid var(--gold-light);
|
||||
border-left: 3px solid var(--accent-soft);
|
||||
}
|
||||
|
||||
.admin-noscript p {
|
||||
|
|
@ -2050,14 +2039,6 @@ html:has(.admin-dialog[open]) {
|
|||
.queue-toolbar {
|
||||
grid-template-columns: minmax(13rem, 1fr) auto auto;
|
||||
}
|
||||
|
||||
.state-simulator {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-end;
|
||||
padding: 0.55rem 0 0;
|
||||
border-top: 1px solid #e1e2df;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 50rem) {
|
||||
|
|
@ -2151,15 +2132,6 @@ html:has(.admin-dialog[open]) {
|
|||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.state-simulator {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.state-simulator select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.role-proof > header,
|
||||
.settings-proof {
|
||||
align-items: flex-start;
|
||||
|
|
@ -2271,7 +2243,6 @@ html:has(.admin-dialog[open]) {
|
|||
color: rgba(248, 247, 243, 0.82);
|
||||
}
|
||||
|
||||
.admin-main .state-simulator > span,
|
||||
.admin-main .icon-button kbd,
|
||||
.admin-main .role-proof > header span {
|
||||
color: #4f514b;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,34 +1,51 @@
|
|||
/* 한남자리 토큰 — 공개(landing)·관리자(admin) 두 표면이 같이 읽는 유일한 토큰 파일이다.
|
||||
다른 CSS에서 --surface 같은 토큰을 다시 정의하지 않는다(05 Q-25). */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--font-sans: "Pretendard Variable", Pretendard, SUIT, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
|
||||
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
|
||||
--ink-950: #0a0a09;
|
||||
--ink-900: #121210;
|
||||
--ink-800: #24231f;
|
||||
--ink-700: #3e3c35;
|
||||
--ink-600: #5d5a50;
|
||||
--ink-500: #69655d;
|
||||
--paper-50: #f8f7f3;
|
||||
--paper-100: #f2f0e9;
|
||||
--paper-200: #e8e4da;
|
||||
--paper-300: #d8d2c5;
|
||||
--gold-dark: #6f5420;
|
||||
--gold: #9b762d;
|
||||
--gold-light: #c6a15b;
|
||||
--blue: #345d8c;
|
||||
--blue-pale: #e7eef6;
|
||||
--green: #2e684d;
|
||||
--green-pale: #e5f0e9;
|
||||
--red: #9d3f34;
|
||||
--red-pale: #f6e8e5;
|
||||
--amber: #7f5d18;
|
||||
--amber-pale: #f4ecd8;
|
||||
/* 서체. 표제·본문 모두 IBM Plex Sans KR(OFL, Google Fonts) — 표제는 700, 본문은 400.
|
||||
--font-sans 는 admin.css가 쓰는 옛 이름이라 본문 서체의 별칭으로 남긴다. */
|
||||
--font-display: "IBM Plex Sans KR", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
|
||||
--font-body: "IBM Plex Sans KR", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
|
||||
--font-sans: var(--font-body);
|
||||
/* 한글 글리프가 없는 모노 다음에 본문 한글 서체를 둔다 — 숫자·라틴만 모노로 남는다(레드팀 06 P1-3) */
|
||||
--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", "IBM Plex Sans KR", monospace;
|
||||
--weight-body: 400;
|
||||
--weight-strong: 700;
|
||||
|
||||
/* 바탕 — 밝음·쿨 회색. 페이지 바탕 / 칸·패널 / 가라앉은 띠 */
|
||||
--surface: #eceff1;
|
||||
--surface-raised: #f7f9fa;
|
||||
--surface-sunken: #dfe4e8;
|
||||
--white: #ffffff;
|
||||
|
||||
--line-light: rgba(10, 10, 9, 0.14);
|
||||
--line-dark: rgba(255, 255, 255, 0.18);
|
||||
--focus: #2e6ba8;
|
||||
/* 글자 — 쿨 먹. ink-3 은 #eceff1 위에서 4.5:1 이상이어야 한다(게이트 실측) */
|
||||
--ink: #15191c;
|
||||
--ink-2: #353d44;
|
||||
--ink-3: #566069;
|
||||
--ink-inverse: #f1f4f6;
|
||||
|
||||
/* 강조 — 130° 녹. 선택 칸 테두리·주 버튼·현재 탭에만 쓴다 */
|
||||
--accent: #2d7639;
|
||||
--accent-deep: #1f5a2b;
|
||||
--accent-soft: #dbeadf;
|
||||
--accent-rgb: 45 118 57;
|
||||
|
||||
/* 상태 — 관리자 검수 배지와 매트릭스 노트가 쓴다 */
|
||||
--green: var(--accent);
|
||||
--green-pale: var(--accent-soft);
|
||||
--amber: #7a5a12;
|
||||
--amber-pale: #f3ead3;
|
||||
--red: #9b3a2e;
|
||||
--red-pale: #f5e4e1;
|
||||
--blue: #2f5c8f;
|
||||
--blue-pale: #e3ebf4;
|
||||
|
||||
--line: rgba(21, 25, 28, 0.16);
|
||||
--line-strong: var(--ink);
|
||||
--line-light: var(--line);
|
||||
--line-dark: rgba(255, 255, 255, 0.2);
|
||||
--focus: #1f5a2b;
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
|
|
@ -42,24 +59,29 @@
|
|||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
--space-24: 6rem;
|
||||
--space-32: 8rem;
|
||||
|
||||
--content: min(100% - 2rem, 88rem);
|
||||
--reading: 44rem;
|
||||
--header-height: 4.5rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1.25rem;
|
||||
--transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--measure: 36em;
|
||||
--header-height: 4rem;
|
||||
|
||||
/* 모서리 — 4px 하나. 둥근 배지만 pill */
|
||||
--radius: 4px;
|
||||
--radius-sm: var(--radius);
|
||||
--radius-pill: 999px;
|
||||
|
||||
--transition: 160ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--shadow-dialog: 0 2rem 5rem rgba(0, 0, 0, 0.3);
|
||||
|
||||
/* 역할 토큰 — 공개 조건판·관리자 표면 */
|
||||
--brief-label-size: 0.8125rem;
|
||||
--brief-input-size: 1rem;
|
||||
--brief-panel-radius: 0.5rem;
|
||||
--brief-rule: var(--line-light);
|
||||
--brief-panel-radius: var(--radius);
|
||||
--brief-rule: var(--line);
|
||||
--admin-body-size: 0.8125rem;
|
||||
--admin-meta-size: 0.75rem;
|
||||
--review-fact-bg: #f2f8f4;
|
||||
--review-unknown-bg: #fff8e8;
|
||||
--review-edited-bg: #fdf0ed;
|
||||
--review-fact-bg: #eef5f0;
|
||||
--review-unknown-bg: #fbf4e3;
|
||||
--review-edited-bg: #faeeeb;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -71,19 +93,45 @@
|
|||
html {
|
||||
scroll-behavior: smooth;
|
||||
text-size-adjust: 100%;
|
||||
font-synthesis-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-sans);
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
font-weight: var(--weight-body);
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.015em;
|
||||
color: var(--ink-950);
|
||||
background: var(--paper-50);
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--ink);
|
||||
background: var(--surface);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 한글 조판 정본(typography §6-5): 어절 줄바꿈 + 긴 토큰 예외, 이탤릭 금지, 밑줄은 받침 아래 */
|
||||
:lang(ko) {
|
||||
word-break: keep-all;
|
||||
overflow-wrap: anywhere;
|
||||
line-break: strict;
|
||||
}
|
||||
|
||||
:lang(ko) :is(p, li, dd, figcaption) {
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
:lang(ko) :is(h1, h2, h3) {
|
||||
line-height: 1.3;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
:lang(ko) :is(em, i, cite, dfn, var, address) {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
:lang(ko) a {
|
||||
text-underline-position: under;
|
||||
}
|
||||
|
||||
body.is-locked {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -99,6 +147,7 @@ input,
|
|||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
|
|
@ -134,8 +183,9 @@ a {
|
|||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
color: var(--white);
|
||||
background: var(--ink-950);
|
||||
color: var(--ink-inverse);
|
||||
background: var(--ink);
|
||||
border-radius: var(--radius);
|
||||
transform: translateY(-180%);
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
|
@ -156,15 +206,14 @@ a {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
/* 고지 띠 — 두 표면 공통. 가운뎃점 메타 문자열 대신 문장 하나를 둔다 */
|
||||
.demo-strip {
|
||||
min-height: 2rem;
|
||||
padding: 0.35rem 1rem;
|
||||
color: #f5ead5;
|
||||
background: var(--ink-950);
|
||||
border-bottom: 1px solid rgba(198, 161, 91, 0.4);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.4rem 1rem;
|
||||
color: var(--ink-inverse);
|
||||
background: var(--ink);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: var(--weight-strong);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -174,35 +223,34 @@ a {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.7rem 1.05rem;
|
||||
padding: 0.7rem 1.1rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 720;
|
||||
border-radius: var(--radius);
|
||||
font-weight: var(--weight-strong);
|
||||
line-height: 1.2;
|
||||
text-decoration: none;
|
||||
transition: color var(--transition), background-color var(--transition), border-color var(--transition), transform var(--transition);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-1px);
|
||||
transition: color var(--transition), background-color var(--transition), border-color var(--transition);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
color: var(--paper-50);
|
||||
background: var(--ink-950);
|
||||
border-color: var(--ink-950);
|
||||
color: var(--white);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
color: var(--ink-950);
|
||||
background: var(--gold-light);
|
||||
border-color: var(--gold-light);
|
||||
background: var(--accent-deep);
|
||||
border-color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.button-light {
|
||||
color: var(--ink-950);
|
||||
background: var(--paper-50);
|
||||
border-color: var(--paper-50);
|
||||
color: var(--ink);
|
||||
background: var(--surface-raised);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.button-light:hover {
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
.button-outline {
|
||||
|
|
@ -214,7 +262,7 @@ a {
|
|||
.button-ghost {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border-color: var(--line-light);
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
.button-small {
|
||||
|
|
@ -231,11 +279,10 @@ a {
|
|||
width: max-content;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 999px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 760;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: 0.75rem;
|
||||
font-weight: var(--weight-strong);
|
||||
line-height: 1;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.status-badge::before {
|
||||
|
|
@ -247,8 +294,8 @@ a {
|
|||
}
|
||||
|
||||
.status-demo {
|
||||
color: var(--gold-dark);
|
||||
background: #f7efdc;
|
||||
color: var(--amber);
|
||||
background: var(--amber-pale);
|
||||
}
|
||||
|
||||
.status-pass {
|
||||
|
|
@ -269,9 +316,9 @@ a {
|
|||
.field-label {
|
||||
display: block;
|
||||
margin-bottom: 0.45rem;
|
||||
color: var(--ink-700);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 760;
|
||||
color: var(--ink-2);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: var(--weight-strong);
|
||||
}
|
||||
|
||||
.text-input,
|
||||
|
|
@ -279,10 +326,10 @@ a {
|
|||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
color: var(--ink-950);
|
||||
color: var(--ink);
|
||||
background: var(--white);
|
||||
border: 1px solid var(--line-light);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.live-region {
|
||||
|
|
@ -292,10 +339,10 @@ a {
|
|||
bottom: 1rem;
|
||||
max-width: min(24rem, calc(100% - 2rem));
|
||||
padding: 0.85rem 1rem;
|
||||
color: var(--white);
|
||||
background: var(--ink-950);
|
||||
border-left: 3px solid var(--gold-light);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--ink-inverse);
|
||||
background: var(--ink);
|
||||
border-left: 3px solid var(--accent);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
|
|
@ -318,4 +365,10 @@ a {
|
|||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
|
||||
::view-transition-group(*),
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*) {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue