feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Some checks failed
ci / build (push) Has been cancelled
This commit is contained in:
parent
69e5cc1efd
commit
e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
|
|
@ -4,28 +4,28 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#f3f4f3">
|
||||
<meta name="description" content="가상 공인중개 쇼케이스의 매물 사실, 표시 항목, AI 분석 근거, 변경 이력, 게시 가능 여부를 한 화면에서 검수하는 상세 관리자 운영 데모입니다.">
|
||||
<meta name="description" content="예시 매물의 표시 항목, 확인 근거와 변경 기록을 한 화면에서 살펴보고 공개 전 확인할 순서를 정리하는 운영 안내입니다.">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta property="og:title" content="한남자리 관리 데모 — 매물 검수">
|
||||
<meta property="og:description" content="예시 매물의 표시 항목, AI 근거와 게시 방어선을 살피는 운영 화면">
|
||||
<meta property="og:title" content="한남자리 운영 안내 — 매물 확인">
|
||||
<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:title" content="한남자리 운영 안내 — 매물 확인">
|
||||
<meta name="twitter:image" content="../og.png">
|
||||
<title>한남자리 관리 데모 — 매물 검수</title>
|
||||
<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=20260829c">
|
||||
<link rel="stylesheet" href="../styles/admin.css?v=20260829c">
|
||||
<script src="../scripts/admin.js?v=20260829c" defer></script>
|
||||
<link rel="stylesheet" href="../styles/tokens.css?v=20260912all">
|
||||
<link rel="stylesheet" href="../styles/admin.css?v=20260912all">
|
||||
<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="관리 메뉴">
|
||||
<div class="sidebar-brand-shell">
|
||||
<a href="../" aria-label="한남자리 공개 쇼케이스로 이동"><span class="sidebar-mark">HJ</span><span><strong class="sidebar-brand">한남자리</strong><small>운영 화면 데모</small></span></a>
|
||||
<a href="../" aria-label="한남자리 공개 안내로 이동"><span class="sidebar-mark">HJ</span><span><strong class="sidebar-brand">한남자리</strong><small>매물 확인 안내</small></span></a>
|
||||
<button type="button" class="sidebar-close" data-close-sidebar aria-label="관리 메뉴 닫기">×</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -45,9 +45,9 @@
|
|||
</nav>
|
||||
|
||||
<div class="sidebar-foot">
|
||||
<span class="status-badge status-demo">데모 환경</span>
|
||||
<span class="status-badge status-demo">예시 자료</span>
|
||||
<p>실제 광고 게시와 외부 연락은 연결되지 않습니다.</p>
|
||||
<a href="../">공개 화면 보기 ↗</a>
|
||||
<a href="../">공개 안내 보기 ↗</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
<main class="admin-main" id="admin-main">
|
||||
<header class="admin-topbar">
|
||||
<button type="button" class="mobile-sidebar-button" aria-expanded="false" data-open-sidebar><span aria-hidden="true">☰</span><span class="sr-only">관리 메뉴 열기</span></button>
|
||||
<button type="button" class="mobile-sidebar-button" aria-label="관리 메뉴 열기" aria-expanded="false" data-open-sidebar><span aria-hidden="true">☰</span></button>
|
||||
<div class="breadcrumb"><span>운영</span><span aria-hidden="true">/</span><strong>매물 검수</strong></div>
|
||||
<div class="topbar-actions">
|
||||
<button type="button" class="icon-button" aria-label="명령 메뉴 열기" data-command-button><span aria-hidden="true">⌕</span><kbd>Ctrl K</kbd></button>
|
||||
|
|
@ -67,13 +67,13 @@
|
|||
<div class="admin-content">
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<div class="heading-badges"><span class="status-badge status-demo">쇼케이스 · 가상 브랜드</span><span>자료 기준 2026.08.29</span></div>
|
||||
<div class="heading-badges"><span class="status-badge status-demo">예시 자료 · 가상 브랜드</span><span>자료 기준 2026.08.29</span></div>
|
||||
<h1>매물 검수 대기열</h1>
|
||||
<p>게시 전에 매물 사실, 표시 항목, AI 근거와 변경 이력을 한 자리에서 확인합니다.</p>
|
||||
</div>
|
||||
<div class="heading-actions">
|
||||
<button type="button" class="button button-ghost" data-open-preview>쇼케이스 미리보기</button>
|
||||
<button type="button" class="button button-primary" data-new-draft data-inspector-trigger>새 예시 초안</button>
|
||||
<button type="button" class="button button-ghost" data-open-preview>공개 안내 보기</button>
|
||||
<button type="button" class="button button-primary" data-new-draft data-inspector-trigger>새 검토 항목</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -84,48 +84,48 @@
|
|||
|
||||
<section class="queue-toolbar" aria-label="대기열 도구">
|
||||
<label class="search-field"><span class="sr-only">매물 검색</span><span aria-hidden="true">⌕</span><input type="search" placeholder="매물명, 거래 형태, 담당 검색" data-queue-search></label>
|
||||
<label><span class="sr-only">상태 필터</span><select data-status-filter><option value="all">모든 상태</option><option value="review">검수 필요</option><option value="visible">쇼케이스 공개</option><option value="paused">보류</option><option value="contracted">계약 완료</option><option value="draft">초안</option></select></label>
|
||||
<label><span class="sr-only">상태 필터</span><select data-status-filter><option value="all">모든 상태</option><option value="review">검수 필요</option><option value="visible">예시 공개</option><option value="paused">보류</option><option value="contracted">계약 완료</option><option value="draft">초안</option></select></label>
|
||||
<label><span class="sr-only">정렬 기준</span><select data-sort-select><option value="updated-desc">최근 수정순</option><option value="updated-asc">오래된 수정순</option><option value="title-asc">매물명순</option><option value="status-asc">상태순</option></select></label>
|
||||
<label class="state-simulator"><span>상태 시연</span><select data-state-simulator><option value="normal">정상</option><option value="loading">불러오는 중</option><option value="empty">빈 대기열</option><option value="error">불러오기 실패</option><option value="save-error">저장 실패</option><option value="stale">자료 오래됨</option><option value="conflict">버전 충돌</option><option value="permission">권한 제한</option></select></label>
|
||||
<select data-state-simulator hidden aria-hidden="true"><option value="normal">정상</option><option value="loading">불러오는 중</option><option value="empty">빈 대기열</option><option value="error">불러오기 실패</option><option value="save-error">저장 실패</option><option value="stale">자료 오래됨</option><option value="conflict">버전 충돌</option><option value="permission">권한 제한</option></select>
|
||||
</section>
|
||||
|
||||
<div class="admin-workbench">
|
||||
<section class="queue-panel" id="queue" aria-labelledby="queue-title" aria-busy="false" data-queue-panel>
|
||||
<header class="panel-heading">
|
||||
<div><h2 id="queue-title">현재 대기열</h2><span data-result-count>6개 예시</span></div>
|
||||
<div><h2 id="queue-title">현재 대기열</h2><span data-result-count>6건</span></div>
|
||||
<div><span class="queue-legend"><i class="legend-block" aria-hidden="true"></i>차단</span><span class="queue-legend"><i class="legend-warn" aria-hidden="true"></i>확인</span></div>
|
||||
</header>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table class="queue-table">
|
||||
<caption class="sr-only">쇼케이스용 예시 매물 검수 대기열</caption>
|
||||
<caption class="sr-only">예시 매물 확인 대기열</caption>
|
||||
<thead>
|
||||
<tr><th scope="col">매물</th><th scope="col">거래</th><th scope="col">예시 조건</th><th scope="col">마지막 확인</th><th scope="col">표시 검수</th><th scope="col">AI 검토</th><th scope="col">담당</th></tr>
|
||||
</thead>
|
||||
<tbody data-queue-body>
|
||||
<tr class="is-selected" data-queue-row data-id="DEMO-HJ-101" data-status="review" data-updated="2026-08-29T10:42:00+09:00" data-title="한남 생활권 정원 주거" aria-selected="true">
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="한남 생활권 정원 주거 조사관 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb"><img src="../assets/hannam-evening-640.webp" width="80" height="54" alt="서울 언덕 생활권의 주거 외관을 표현한 연출 이미지"></span><span><strong>한남 생활권 정원 주거</strong><small>DEMO-HJ-101 · 예시 매물</small></span></span></td>
|
||||
<td><span>매매</span><small>연립주택</small></td><td><strong>38억 원</strong><small>전용 118.42㎡</small></td><td><span>2026.08.27</span><small>2일 전 · 모의</small></td><td><span class="cell-status is-blocked"><i aria-hidden="true"></i>2개 차단</span></td><td><span class="cell-status is-warn"><i aria-hidden="true"></i>검토 전</span></td><td><span class="assignee"><i>김</i>김유진</span></td>
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="한남 생활권 정원 주거 상세 정보 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb"><img src="../assets/hannam-evening-640.webp" width="80" height="54" alt="서울 언덕 생활권의 주거 외관을 표현한 연출 이미지"></span><span><strong>한남 생활권 정원 주거</strong><small>자료번호 101 · 예시 매물</small></span></span></td>
|
||||
<td><span>매매</span><small>연립주택</small></td><td><strong>38억 원</strong><small>전용 118.42㎡</small></td><td><span>2026.08.27</span><small>2일 전 · 예시</small></td><td><span class="cell-status is-blocked"><i aria-hidden="true"></i>2개 확인 필요</span></td><td><span class="cell-status is-warn"><i aria-hidden="true"></i>검토 전</span></td><td><span class="assignee"><i>김</i>김유진</span></td>
|
||||
</tr>
|
||||
<tr data-queue-row data-id="DEMO-HJ-102" data-status="visible" data-updated="2026-08-29T09:18:00+09:00" data-title="한강 가까운 복층 주거" aria-selected="false">
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="한강 가까운 복층 주거 조사관 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-plan"><i></i></span><span><strong>한강 가까운 복층 주거</strong><small>DEMO-HJ-102 · 예시 매물</small></span></span></td>
|
||||
<td><span>전세</span><small>공동주택</small></td><td><strong>전세 22억</strong><small>전용 142.80㎡</small></td><td><span>2026.08.26</span><small>3일 전 · 모의</small></td><td><span class="cell-status is-pass"><i aria-hidden="true"></i>데모 통과</span></td><td><span class="cell-status is-pass"><i aria-hidden="true"></i>수정 승인</span></td><td><span class="assignee"><i>박</i>박소연</span></td>
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="한강 가까운 복층 주거 상세 정보 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-plan"><i></i></span><span><strong>한강 가까운 복층 주거</strong><small>자료번호 102 · 예시 매물</small></span></span></td>
|
||||
<td><span>전세</span><small>공동주택</small></td><td><strong>전세 22억</strong><small>전용 142.80㎡</small></td><td><span>2026.08.26</span><small>3일 전 · 예시</small></td><td><span class="cell-status is-pass"><i aria-hidden="true"></i>안내 확인</span></td><td><span class="cell-status is-pass"><i aria-hidden="true"></i>수정 확인</span></td><td><span class="assignee"><i>박</i>박소연</span></td>
|
||||
</tr>
|
||||
<tr data-queue-row data-id="DEMO-HJ-103" data-status="paused" data-updated="2026-08-28T17:25:00+09:00" data-title="조용한 골목의 테라스 주거" aria-selected="false">
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="조용한 골목의 테라스 주거 조사관 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-stale"><i></i></span><span><strong>조용한 골목의 테라스 주거</strong><small>DEMO-HJ-103 · 예시 매물</small></span></span></td>
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="조용한 골목의 테라스 주거 상세 정보 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-stale"><i></i></span><span><strong>조용한 골목의 테라스 주거</strong><small>자료번호 103 · 예시 매물</small></span></span></td>
|
||||
<td><span>월세</span><small>다세대주택</small></td><td><strong>5억 · 월 1,200만</strong><small>전용 140.84㎡</small></td><td><span>2026.08.11</span><small>18일 전 · 오래됨</small></td><td><span class="cell-status is-warn"><i aria-hidden="true"></i>다시 확인</span></td><td><span class="cell-status is-stale"><i aria-hidden="true"></i>오래됨</span></td><td><span class="assignee"><i>김</i>김유진</span></td>
|
||||
</tr>
|
||||
<tr data-queue-row data-id="DEMO-HJ-104" data-status="contracted" data-updated="2026-08-28T12:40:00+09:00" data-title="언덕 위 작은 정원 주거" aria-selected="false">
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="언덕 위 작은 정원 주거 조사관 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-closed"><i></i></span><span><strong>언덕 위 작은 정원 주거</strong><small>DEMO-HJ-104 · 예시 매물</small></span></span></td>
|
||||
<td><span>매매</span><small>단독주택</small></td><td><strong>상담 종료</strong><small>공개 목록 제외</small></td><td><span>2026.08.28</span><small>1일 전 · 모의</small></td><td><span class="cell-status is-muted"><i aria-hidden="true"></i>게시 안 함</span></td><td><span class="cell-status is-muted"><i aria-hidden="true"></i>종료</span></td><td><span class="assignee"><i>박</i>박소연</span></td>
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="언덕 위 작은 정원 주거 상세 정보 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-closed"><i></i></span><span><strong>언덕 위 작은 정원 주거</strong><small>자료번호 104 · 예시 매물</small></span></span></td>
|
||||
<td><span>매매</span><small>단독주택</small></td><td><strong>상담 종료</strong><small>공개 목록 제외</small></td><td><span>2026.08.28</span><small>1일 전 · 예시</small></td><td><span class="cell-status is-muted"><i aria-hidden="true"></i>공개 안 함</span></td><td><span class="cell-status is-muted"><i aria-hidden="true"></i>종료</span></td><td><span class="assignee"><i>박</i>박소연</span></td>
|
||||
</tr>
|
||||
<tr data-queue-row data-id="DEMO-HJ-105" data-status="draft" data-updated="2026-08-27T15:05:00+09:00" data-title="남산 가까운 가족 주거" aria-selected="false">
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="남산 가까운 가족 주거 조사관 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-draft"><i></i></span><span><strong>남산 가까운 가족 주거</strong><small>DEMO-HJ-105 · 예시 매물</small></span></span></td>
|
||||
<td><span>전세</span><small>공동주택</small></td><td><strong>조건 작성 중</strong><small>면적 입력됨</small></td><td><span>확인 전</span><small>모의 서류 없음</small></td><td><span class="cell-status is-blocked"><i aria-hidden="true"></i>5개 차단</span></td><td><span class="cell-status is-muted"><i aria-hidden="true"></i>실행 전</span></td><td><span class="assignee"><i>최</i>최민서</span></td>
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="남산 가까운 가족 주거 상세 정보 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-draft"><i></i></span><span><strong>남산 가까운 가족 주거</strong><small>자료번호 105 · 예시 매물</small></span></span></td>
|
||||
<td><span>전세</span><small>공동주택</small></td><td><strong>조건 작성 중</strong><small>면적 입력됨</small></td><td><span>확인 전</span><small>참고 자료 없음</small></td><td><span class="cell-status is-blocked"><i aria-hidden="true"></i>5개 확인 필요</span></td><td><span class="cell-status is-muted"><i aria-hidden="true"></i>분석 전</span></td><td><span class="assignee"><i>최</i>최민서</span></td>
|
||||
</tr>
|
||||
<tr data-queue-row data-id="DEMO-HJ-106" data-status="review" data-updated="2026-08-26T11:20:00+09:00" data-title="독서당길 안쪽 복층 주거" aria-selected="false">
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="독서당길 안쪽 복층 주거 조사관 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-review"><i></i></span><span><strong>독서당길 안쪽 복층 주거</strong><small>DEMO-HJ-106 · 예시 매물</small></span></span></td>
|
||||
<td><span>매매</span><small>공동주택</small></td><td><strong>41억 원</strong><small>전용 151.20㎡</small></td><td><span>2026.08.25</span><small>4일 전 · 모의</small></td><td><span class="cell-status is-warn"><i aria-hidden="true"></i>동의 대기</span></td><td><span class="cell-status is-blocked"><i aria-hidden="true"></i>실행 실패</span></td><td><span class="assignee"><i>최</i>최민서</span></td>
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="독서당길 안쪽 복층 주거 상세 정보 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-review"><i></i></span><span><strong>독서당길 안쪽 복층 주거</strong><small>자료번호 106 · 예시 매물</small></span></span></td>
|
||||
<td><span>매매</span><small>공동주택</small></td><td><strong>41억 원</strong><small>전용 151.20㎡</small></td><td><span>2026.08.25</span><small>4일 전 · 예시</small></td><td><span class="cell-status is-warn"><i aria-hidden="true"></i>동의 대기</span></td><td><span class="cell-status is-blocked"><i aria-hidden="true"></i>분석 확인 필요</span></td><td><span class="assignee"><i>최</i>최민서</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
<span></span><span></span><span></span><p>대기열을 불러오는 중입니다.</p>
|
||||
</div>
|
||||
<div class="queue-empty" hidden data-queue-empty>
|
||||
<span aria-hidden="true">○</span><strong data-empty-title>현재 조건에 맞는 예시가 없습니다.</strong><p data-empty-copy>필터를 초기화하면 전체 대기열을 다시 볼 수 있습니다.</p><button type="button" class="button button-ghost" data-reset-filter>필터 초기화</button>
|
||||
<span aria-hidden="true">○</span><strong data-empty-title>현재 조건에 맞는 항목이 없습니다.</strong><p data-empty-copy>필터를 초기화하면 전체 대기열을 다시 볼 수 있습니다.</p><button type="button" class="button button-ghost" data-reset-filter>필터 초기화</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -143,8 +143,8 @@
|
|||
|
||||
<aside class="inspector is-open" data-inspector aria-labelledby="inspector-title">
|
||||
<header class="inspector-header">
|
||||
<div><span class="status-badge status-warn" data-inspector-status>검수 필요</span><small data-inspector-id>DEMO-HJ-101 · 예시 매물</small><h2 id="inspector-title" data-inspector-title>한남 생활권 정원 주거</h2></div>
|
||||
<button type="button" class="inspector-close" data-close-inspector aria-label="조사관과 선택 행 닫기">×</button>
|
||||
<div><span class="status-badge status-warn" data-inspector-status>검수 필요</span><small data-inspector-id>자료번호 101 · 예시 매물</small><h2 id="inspector-title" data-inspector-title>한남 생활권 정원 주거</h2></div>
|
||||
<button type="button" class="inspector-close" data-close-inspector aria-label="선택한 매물 정보 닫기">×</button>
|
||||
</header>
|
||||
|
||||
<div class="inspector-media">
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
</div>
|
||||
|
||||
<div class="channel-gates" id="office-gate">
|
||||
<button type="button" class="channel-gate is-pass" data-open-preview><span><i aria-hidden="true">✓</i><strong>쇼케이스</strong></span><small>미리보기 가능</small></button>
|
||||
<button type="button" class="channel-gate is-pass" data-open-preview><span><i aria-hidden="true">✓</i><strong>공개 안내</strong></span><small>예시 자료 보기</small></button>
|
||||
<button type="button" class="channel-gate is-blocked" data-block-publish><span><i aria-hidden="true">!</i><strong>실제 광고</strong></span><small>영구 차단 · 7개 이유</small></button>
|
||||
</div>
|
||||
|
||||
|
|
@ -168,45 +168,45 @@
|
|||
|
||||
<div class="inspector-scroll">
|
||||
<section class="tab-panel" role="tabpanel" id="inspector-basic" aria-labelledby="tab-basic" data-panel="basic">
|
||||
<div class="panel-section-heading"><div><span>기본 정보</span><h3>예시 거래 조건</h3></div><button type="button" class="text-button" data-simulate-save>수정 시연</button></div>
|
||||
<div class="panel-section-heading"><div><span>기본 정보</span><h3>표시된 거래 조건</h3></div><button type="button" class="text-button" data-simulate-save>변경 내용 보기</button></div>
|
||||
<dl class="data-grid" data-basic-grid>
|
||||
<div><dt>거래 형태</dt><dd>매매</dd></div><div><dt>예시 가격</dt><dd>38억 원</dd></div><div><dt>유형</dt><dd>연립주택</dd></div><div><dt>전용 면적</dt><dd>118.42㎡ · 35.8평</dd></div><div><dt>방과 욕실</dt><dd>방 3 · 욕실 2</dd></div><div><dt>입주 가능</dt><dd>2026.12.20 이후 협의</dd></div>
|
||||
<div><dt>거래 형태</dt><dd>매매</dd></div><div><dt>표시 가격</dt><dd>38억 원</dd></div><div><dt>유형</dt><dd>연립주택</dd></div><div><dt>전용 면적</dt><dd>118.42㎡ · 35.8평</dd></div><div><dt>방과 욕실</dt><dd>방 3 · 욕실 2</dd></div><div><dt>입주 가능</dt><dd>2026.12.20 이후 협의</dd></div>
|
||||
</dl>
|
||||
<div class="inline-notice"><span aria-hidden="true">i</span><p><strong>가상 데이터</strong> 가격과 면적은 쇼케이스 동작 검증용이며 실제 거래 조건이 아닙니다.</p></div>
|
||||
<div class="inline-notice"><span aria-hidden="true">i</span><p><strong>예시 자료</strong> 가격과 면적은 안내를 위한 값이며 실제 거래 조건이 아닙니다.</p></div>
|
||||
<div class="panel-section-heading"><div><span>담당과 상태</span><h3>현재 업무 흐름</h3></div></div>
|
||||
<ol class="state-path">
|
||||
<li class="is-done"><span></span><div><strong>초안</strong><small>2026.08.27 · 예시</small></div></li><li class="is-done"><span></span><div><strong>접수 확인</strong><small>2026.08.28 · 예시</small></div></li><li class="is-current"><span></span><div><strong>검수 필요</strong><small>현재 · 2개 차단</small></div></li><li><span></span><div><strong>게시 준비</strong><small>차단 해제 후</small></div></li>
|
||||
<li class="is-done"><span></span><div><strong>초안</strong><small>2026.08.27 · 예시</small></div></li><li class="is-done"><span></span><div><strong>접수 확인</strong><small>2026.08.28 · 예시</small></div></li><li class="is-current"><span></span><div><strong>검수 필요</strong><small>현재 · 2개 확인 필요</small></div></li><li><span></span><div><strong>게시 준비</strong><small>확인 후</small></div></li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section class="tab-panel" role="tabpanel" id="inspector-legal" aria-labelledby="tab-legal" data-panel="legal" hidden>
|
||||
<div class="panel-section-heading"><div><span>이중 게시 게이트</span><h3>채널마다 다른 통과 조건</h3></div><button type="button" class="text-button" data-focus-missing>첫 누락으로 이동</button></div>
|
||||
<div class="panel-section-heading"><div><span>공개 전 확인</span><h3>용도마다 다른 확인 항목</h3></div><button type="button" class="text-button" data-focus-missing>확인 필요 항목으로 이동</button></div>
|
||||
|
||||
<article class="gate-detail is-pass">
|
||||
<header><span aria-hidden="true">✓</span><div><strong>쇼케이스 미리보기</strong><small>6 / 6 통과</small></div></header>
|
||||
<ul><li>상시 데모 표지</li><li>개별 예시 매물 배지</li><li>생성 이미지 출처</li><li>실제 연락 기능 비활성</li><li>정확한 주소와 등록번호 없음</li><li>AI 데모와 사람 검토 전 표시</li></ul>
|
||||
<header><span aria-hidden="true">✓</span><div><strong>예시 자료 안내</strong><small>6개 항목 확인</small></div></header>
|
||||
<ul><li>예시 자료 안내</li><li>개별 예시 매물 표기</li><li>생성 이미지 출처</li><li>실제 연락 기능 없음</li><li>정확한 주소와 등록번호 없음</li><li>AI 결과는 참고용이며 사람 확인 전임</li></ul>
|
||||
</article>
|
||||
|
||||
<article class="gate-detail is-blocked" id="real-ad-gate">
|
||||
<header><span aria-hidden="true">!</span><div><strong>실제 광고</strong><small>영구 차단 · 가상 브랜드</small></div></header>
|
||||
<p>실제 사무소 등록정보와 중개의뢰 관계가 없으므로 이 데모에서 통과시킬 수 없습니다.</p>
|
||||
<header><span aria-hidden="true">!</span><div><strong>실제 광고</strong><small>영구 차단 · 예시 자료</small></div></header>
|
||||
<p>실제 사무소 등록정보와 중개의뢰 관계가 없어 광고에 필요한 확인을 마칠 수 없습니다.</p>
|
||||
<button type="button" class="button button-ghost button-small" data-block-publish>차단 이유 7개 보기</button>
|
||||
</article>
|
||||
|
||||
<div class="check-list" data-legal-checks>
|
||||
<div class="check-row is-pass"><span aria-hidden="true">✓</span><div><strong>소재지 · 면적 · 가격 · 유형 · 거래 형태</strong><small>쇼케이스 fixture에 구조화됨</small></div><button type="button">보기</button></div>
|
||||
<div class="check-row is-pass"><span aria-hidden="true">✓</span><div><strong>총층수 · 사용승인일 · 방 · 욕실</strong><small>모의 서류 기준 · 실제 증빙 아님</small></div><button type="button">보기</button></div>
|
||||
<div class="check-row is-pass"><span aria-hidden="true">✓</span><div><strong>소재지 · 면적 · 가격 · 유형 · 거래 형태</strong><small>예시 자료에 구조화해 표시</small></div><button type="button">보기</button></div>
|
||||
<div class="check-row is-pass"><span aria-hidden="true">✓</span><div><strong>총층수 · 사용승인일 · 방 · 욕실</strong><small>안내용 자료 기준 · 실제 증빙 아님</small></div><button type="button">보기</button></div>
|
||||
<div class="check-row is-blocked" id="missing-orientation" tabindex="-1"><span aria-hidden="true">!</span><div><strong>방향 판단 근거 미확인</strong><small>남동향 값은 있으나 현장 또는 실제 서류 근거 없음</small></div><button type="button" data-jump-field="missing-orientation">수정 위치</button></div>
|
||||
<div class="check-row is-blocked"><span aria-hidden="true">!</span><div><strong>실제 중개의뢰 관계 없음</strong><small>가상 매물이므로 실제 광고 불가</small></div><button type="button" data-block-publish>이유</button></div>
|
||||
<div class="check-row is-warn"><span aria-hidden="true">·</span><div><strong>관리비 포함·별도 항목</strong><small>모의 기준월과 항목을 표시함</small></div><button type="button">보기</button></div>
|
||||
<div class="check-row is-blocked"><span aria-hidden="true">!</span><div><strong>실제 중개의뢰 관계 없음</strong><small>예시 매물이므로 실제 광고 불가</small></div><button type="button" data-block-publish>이유</button></div>
|
||||
<div class="check-row is-warn"><span aria-hidden="true">·</span><div><strong>관리비 포함·별도 항목</strong><small>표시 기준월과 항목을 안내함</small></div><button type="button">보기</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tab-panel" role="tabpanel" id="inspector-docs" aria-labelledby="tab-docs" data-panel="docs" hidden>
|
||||
<div class="panel-section-heading"><div><span>모의 서류</span><h3>증빙과 예시를 구분</h3></div></div>
|
||||
<div class="panel-section-heading"><div><span>참고 자료</span><h3>예시 정보와 확인 자료를 구분</h3></div></div>
|
||||
<div class="document-list">
|
||||
<article><span class="doc-icon" aria-hidden="true">▧</span><div><strong>건축물대장 형식 예시</strong><small>2026.08.27 추가 · 실제 공문서 아님</small></div><span class="status-badge status-demo">모의</span></article>
|
||||
<article><span class="doc-icon" aria-hidden="true">▧</span><div><strong>의뢰 조건 메모</strong><small>2026.08.27 추가 · 가상 입력</small></div><span class="status-badge status-demo">모의</span></article>
|
||||
<article><span class="doc-icon" aria-hidden="true">▧</span><div><strong>건축물대장 형식 안내</strong><small>2026.08.27 추가 · 실제 공문서 아님</small></div><span class="status-badge status-demo">안내용</span></article>
|
||||
<article><span class="doc-icon" aria-hidden="true">▧</span><div><strong>의뢰 조건 메모</strong><small>2026.08.27 추가 · 예시 입력</small></div><span class="status-badge status-demo">안내용</span></article>
|
||||
<article class="is-missing"><span class="doc-icon" aria-hidden="true">×</span><div><strong>실제 등기사항</strong><small>실주소와 실제 권리 자료를 연결하지 않음</small></div><span class="status-badge status-blocked">없음</span></article>
|
||||
<article class="is-missing"><span class="doc-icon" aria-hidden="true">×</span><div><strong>현장 확인 기록</strong><small>소음, 일조, 누수와 마감 상태 확인 안 됨</small></div><span class="status-badge status-warn">대기</span></article>
|
||||
</div>
|
||||
|
|
@ -214,65 +214,65 @@
|
|||
</section>
|
||||
|
||||
<section class="tab-panel" role="tabpanel" id="inspector-ai" aria-labelledby="tab-ai" data-panel="ai" hidden>
|
||||
<div class="panel-section-heading"><div><span>조건 비교 규칙 demo-0.3</span><h3>AI 참고 분석 데모</h3></div><span class="status-badge status-warn">사람 검토 전</span></div>
|
||||
<dl class="run-meta"><div><dt>실행 번호</dt><dd>AIRUN-DEMO-0042</dd></div><div><dt>입력 버전</dt><dd>고객 3 · 매물 7</dd></div><div><dt>실행 방식</dt><dd>결정적 데모</dd></div><div><dt>공개 가능</dt><dd>아니요</dd></div></dl>
|
||||
<div class="panel-section-heading"><div><span>조건 비교</span><h3>AI 참고 결과</h3></div><span class="status-badge status-warn">사람 검토 전</span></div>
|
||||
<dl class="run-meta"><div><dt>분석 기록</dt><dd>0042</dd></div><div><dt>입력 기준</dt><dd>고객 3 · 매물 7</dd></div><div><dt>결과 성격</dt><dd>안내용 비교</dd></div><div><dt>실제 광고</dt><dd>불가</dd></div></dl>
|
||||
<div class="ai-summary"><span>현재 판단</span><strong>조건부 적합</strong><div><small>필수 충족 4 / 5</small><small>충돌 1</small><small>확인 필요 2</small></div></div>
|
||||
<div class="claim-review">
|
||||
<article class="is-fact"><header><span>사실</span><strong>예산 상한보다 2억 원 낮음</strong></header><p>가상 의뢰인 가격 입력 · 2026.08.27</p><footer><span>근거 강도 높음</span><button type="button" data-claim-action="approve">확인</button></footer></article>
|
||||
<article class="is-fact"><header><span>사실</span><strong>전용면적이 희망 범위 안</strong></header><p>쇼케이스용 모의 서류 · 실제 공문서 아님</p><footer><span>근거 강도 높음</span><button type="button" data-claim-action="approve">확인</button></footer></article>
|
||||
<article class="is-fact"><header><span>표시값</span><strong>예산 상한보다 2억 원 낮음</strong></header><p>예시 의뢰 조건 · 2026.08.27</p><footer><span>표시 자료 기준</span><button type="button" data-claim-action="approve">확인</button></footer></article>
|
||||
<article class="is-fact"><header><span>표시값</span><strong>전용면적이 희망 범위 안</strong></header><p>안내용 자료 · 실제 공문서 아님</p><footer><span>표시 자료 기준</span><button type="button" data-claim-action="approve">확인</button></footer></article>
|
||||
<article class="is-unknown"><header><span>확인 불가</span><strong>광화문 이동 시간</strong></header><p>현재 교통 자료가 연결되지 않아 추정하지 않음</p><footer><span>빈칸 유지</span><button type="button" data-claim-action="keep">유지</button></footer></article>
|
||||
<article class="is-edited"><header><span>수정 필요</span><strong><s>조용한 주거 환경입니다.</s></strong></header><p>현장 근거가 없어 “소음 수준은 현장 확인이 필요합니다”로 바꿉니다.</p><footer><span>지원되지 않은 표현</span><button type="button" data-claim-action="edit">수정 승인</button></footer></article>
|
||||
<article class="is-edited"><header><span>수정 필요</span><strong><s>조용한 주거 환경입니다.</s></strong></header><p>현장 근거가 없어 “소음 수준은 현장 확인이 필요합니다”로 안내합니다.</p><footer><span>확인 근거 없음</span><button type="button" data-claim-action="edit">수정 반영</button></footer></article>
|
||||
</div>
|
||||
<button type="button" class="button button-primary inspector-wide-action" data-review-ai>사람 검토 완료 시연</button>
|
||||
<button type="button" class="button button-primary inspector-wide-action" data-review-ai>검토 결과 보기</button>
|
||||
</section>
|
||||
|
||||
<section class="tab-panel" role="tabpanel" id="inspector-inquiries" aria-labelledby="tab-inquiries" data-panel="inquiries" hidden>
|
||||
<div class="panel-section-heading"><div><span>고객 조건 3판</span><h3>김○○ · 예시 고객</h3></div><span class="status-badge status-demo">연락처 마스킹</span></div>
|
||||
<dl class="data-grid customer-grid"><div><dt>거래 형태</dt><dd>매매</dd></div><div><dt>예산 상한</dt><dd>40억 원 · 예시</dd></div><div><dt>전용 면적</dt><dd>110~130㎡</dd></div><div><dt>주차</dt><dd>2대 필수</dd></div><div><dt>입주 희망</dt><dd>2026.12.15까지</dd></div><div><dt>AI 비교 동의</dt><dd>예시 동의 있음</dd></div></dl>
|
||||
<div class="consent-note"><span aria-hidden="true">i</span><p>상담 동의와 AI 비교 동의는 예시입니다. 홍보 수신은 거부 상태로 두었습니다.</p></div>
|
||||
<div class="panel-section-heading"><div><span>일정</span><h3>전화 상담 · 예시</h3></div></div>
|
||||
<article class="appointment-card"><time datetime="2026-08-29T15:30:00+09:00"><strong>29</strong><span>8월 · 토</span></time><div><strong>오후 3:30~4:00</strong><p>맞춤 조건과 권리 확인 순서 · 외부 알림 없음</p><small>한국 표준시 · 데모 일정</small></div><button type="button" data-reschedule>시간 변경 시연</button></article>
|
||||
<div class="panel-section-heading"><div><span>고객 조건</span><h3>김○○ · 가명 고객</h3></div><span class="status-badge status-demo">연락처 비공개</span></div>
|
||||
<dl class="data-grid customer-grid"><div><dt>거래 형태</dt><dd>매매</dd></div><div><dt>예산 상한</dt><dd>40억 원 · 예시</dd></div><div><dt>전용 면적</dt><dd>110~130㎡</dd></div><div><dt>주차</dt><dd>2대 필수</dd></div><div><dt>입주 희망</dt><dd>2026.12.15까지</dd></div><div><dt>AI 비교 동의</dt><dd>안내용 동의 있음</dd></div></dl>
|
||||
<div class="consent-note"><span aria-hidden="true">i</span><p>상담과 AI 비교 동의는 안내를 위한 예시입니다. 홍보 수신은 거부 상태로 표시합니다.</p></div>
|
||||
<div class="panel-section-heading"><div><span>일정</span><h3>전화 상담 안내</h3></div></div>
|
||||
<article class="appointment-card"><time datetime="2026-08-29T15:30:00+09:00"><strong>29</strong><span>8월 · 토</span></time><div><strong>오후 3:30~4:00</strong><p>맞춤 조건과 권리 확인 순서 · 알림은 전송되지 않음</p><small>한국 표준시 · 안내 일정</small></div><button type="button" data-reschedule>다른 시간 보기</button></article>
|
||||
</section>
|
||||
|
||||
<section class="tab-panel" role="tabpanel" id="inspector-history" aria-labelledby="tab-history" data-panel="history" hidden>
|
||||
<div class="panel-section-heading"><div><span>수정 불가 기록</span><h3>변경 이력 8건</h3></div><button type="button" class="text-button" data-simulate-log-failure>실패 상태 보기</button></div>
|
||||
<div class="panel-section-heading"><div><span>수정 불가 기록</span><h3>변경 이력 8건</h3></div><button type="button" class="text-button" data-simulate-log-failure>기록 확인 안내</button></div>
|
||||
<ol class="audit-list">
|
||||
<li><span class="audit-dot is-blocked"></span><div><header><strong>실제 광고 게시 차단</strong><time datetime="2026-08-29T10:42:18+09:00">오늘 10:42</time></header><p>사무소 등록정보와 실제 중개의뢰 관계가 없음</p><small>김유진 · 예시 계정 · 버전 7</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>AI 주장 수정 후 승인</strong><time datetime="2026-08-29T10:31:00+09:00">오늘 10:31</time></header><p>“조용함”을 “현장 확인 필요”로 변경</p><small>김유진 · 예시 계정 · AIRUN-DEMO-0041</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>AI 분석 완료</strong><time datetime="2026-08-29T10:20:00+09:00">오늘 10:20</time></header><p>조건 비교 규칙 demo-0.3 · 입력 버전 고객 3 / 매물 7</p><small>데모 분석기</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>쇼케이스 미리보기 공개</strong><time datetime="2026-08-29T09:54:00+09:00">오늘 09:54</time></header><p>데모 고지와 이미지 출처 6개 항목 통과</p><small>박소연 · 예시 계정</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>모의 서류 추가</strong><time datetime="2026-08-28T17:22:00+09:00">어제 17:22</time></header><p>건축물대장 형식 예시 · 실제 공문서 아님</p><small>김유진 · 예시 계정</small></div></li>
|
||||
<li><span class="audit-dot is-blocked"></span><div><header><strong>실제 광고 게시 차단</strong><time datetime="2026-08-29T10:42:18+09:00">오늘 10:42</time></header><p>사무소 등록정보와 실제 중개의뢰 관계가 없음</p><small>김유진 · 예시 계정 · 자료 버전 7</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>AI 주장 수정 후 승인</strong><time datetime="2026-08-29T10:31:00+09:00">오늘 10:31</time></header><p>“조용함”을 “현장 확인 필요”로 변경</p><small>김유진 · 예시 계정 · 분석 기록 0041</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>AI 조건 비교 완료</strong><time datetime="2026-08-29T10:20:00+09:00">오늘 10:20</time></header><p>고객 조건과 매물 정보를 안내용으로 대조</p><small>안내용 비교 결과</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>공개 안내 확인</strong><time datetime="2026-08-29T09:54:00+09:00">오늘 09:54</time></header><p>예시 자료 표시와 이미지 출처 6개 항목 확인</p><small>박소연 · 예시 계정</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>참고 자료 추가</strong><time datetime="2026-08-28T17:22:00+09:00">어제 17:22</time></header><p>건축물대장 형식 안내 · 실제 공문서 아님</p><small>김유진 · 예시 계정</small></div></li>
|
||||
<li><span class="audit-dot"></span><div><header><strong>예시 가격 변경</strong><time datetime="2026-08-28T16:40:00+09:00">어제 16:40</time></header><p>40억 원 → 38억 원 · 가상 의뢰 조건 수정</p><small>김유진 · 예시 계정 · 버전 6 → 7</small></div></li>
|
||||
<li><span class="audit-dot is-warn"></span><div><header><strong>오래된 자료로 자동 보류</strong><time datetime="2026-08-28T08:00:00+09:00">어제 08:00</time></header><p>DEMO-HJ-103 · 내부 운영 기준일 경과</p><small>데모 일정 작업</small></div></li>
|
||||
<li><span class="audit-dot is-blocked"></span><div><header><strong>권한 없는 게시 시도 거부</strong><time datetime="2026-08-27T15:16:00+09:00">8월 27일</time></header><p>중개보조 예시 계정은 법정 검수 승인과 게시를 할 수 없음</p><small>권한 검사 · 요청 DEMO-77B</small></div></li>
|
||||
<li><span class="audit-dot is-warn"></span><div><header><strong>오래된 자료로 자동 보류</strong><time datetime="2026-08-28T08:00:00+09:00">어제 08:00</time></header><p>자료번호 103 · 확인 기준일 경과</p><small>안내 일정 기준</small></div></li>
|
||||
<li><span class="audit-dot is-blocked"></span><div><header><strong>권한 없는 게시 시도 거부</strong><time datetime="2026-08-27T15:16:00+09:00">8월 27일</time></header><p>중개보조 계정은 법정 검수 승인과 게시를 할 수 없음</p><small>권한 확인</small></div></li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="inspector-actions">
|
||||
<button type="button" class="button button-ghost" data-focus-missing>누락 항목 보기</button>
|
||||
<footer class="inspector-actions">
|
||||
<button type="button" class="button button-ghost" data-focus-missing>확인 항목 보기</button>
|
||||
<button type="button" class="button button-primary" data-block-publish>실제 광고 게시</button>
|
||||
</footer>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<section class="role-proof" id="roles" aria-labelledby="roles-title">
|
||||
<header><div><span>역할에 따라 달라지는 행동</span><h2 id="roles-title">권한 방어선</h2></div><p>버튼을 숨기는 데서 끝내지 않고 게시 시점에 역할, 게이트와 객체 버전을 다시 확인하는 모델입니다.</p></header>
|
||||
<header><div><span>역할에 따라 달라지는 행동</span><h2 id="roles-title">권한 기준</h2></div><p>게시 전에는 역할, 확인 항목과 최신 자료를 다시 검토합니다.</p></header>
|
||||
<div class="role-grid"><article><strong>사무소 관리자</strong><p>사무소 연결, 역할, 모든 게시 관리</p><small>감사 로그 수정 불가</small></article><article><strong>공인중개사</strong><p>법정 검수, AI 승인, 게시와 중단</p><small>역할 관리자 변경 불가</small></article><article><strong>중개보조 계정</strong><p>초안, 문의 정리, 일정 등록</p><small>검수 승인과 게시 불가</small></article><article><strong>콘텐츠 편집자</strong><p>설명, 이미지, 미리보기</p><small>가격, 법정 필드와 고객 정보 수정 불가</small></article></div>
|
||||
</section>
|
||||
|
||||
<section class="settings-proof" id="settings" aria-labelledby="settings-title"><h2 id="settings-title">데모 설정 원칙</h2><p>실제 연락, 저장 서버, 광고 채널과 등록정보 연결을 비활성 상태로 유지합니다.</p></section>
|
||||
<section class="settings-proof" id="settings" aria-labelledby="settings-title"><h2 id="settings-title">예시 자료 안내</h2><p>실제 연락, 저장, 광고 등록과 연결하지 않습니다.</p></section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<dialog class="admin-dialog" data-block-dialog aria-labelledby="block-dialog-title">
|
||||
<form method="dialog" class="admin-dialog-shell">
|
||||
<header><div><span class="dialog-symbol is-blocked" aria-hidden="true">!</span><div><small>PUBLIC_REAL_AD</small><h2 id="block-dialog-title">실제 광고를 게시할 수 없습니다.</h2></div></div><button type="button" data-close-dialog aria-label="게시 차단 안내 닫기">×</button></header>
|
||||
<header><div><span class="dialog-symbol is-blocked" aria-hidden="true">!</span><div><small>실제 광고 안내</small><h2 id="block-dialog-title">실제 광고를 게시할 수 없습니다.</h2></div></div><button type="button" data-close-dialog aria-label="게시 차단 안내 닫기">×</button></header>
|
||||
<div class="admin-dialog-content">
|
||||
<p>이 화면은 가상 사무소와 합성 예시 매물로 만든 쇼케이스입니다. 아래 항목은 더미값으로 채워 통과시키지 않습니다.</p>
|
||||
<p>이 화면의 사무소와 매물은 예시 자료입니다. 실제 광고에 필요한 항목은 임의의 값으로 채우지 않습니다.</p>
|
||||
<ol><li><strong>실제 사무소 명칭</strong><span>연결 안 됨</span></li><li><strong>실제 사무소 소재지</strong><span>연결 안 됨</span></li><li><strong>실제 연락처</strong><span>연결 안 됨</span></li><li><strong>실제 등록번호</strong><span>연결 안 됨</span></li><li><strong>개업공인중개사 성명</strong><span>연결 안 됨</span></li><li><strong>실제 중개의뢰 관계</strong><span>없음</span></li><li><strong>실제 거래 가능 상태</strong><span>확인 불가</span></li></ol>
|
||||
<div class="inline-notice"><span aria-hidden="true">i</span><p>쇼케이스 미리보기 채널은 데모 고지와 생성 이미지 출처를 갖춰 별도로 열 수 있습니다.</p></div>
|
||||
<div class="inline-notice"><span aria-hidden="true">i</span><p>공개 안내에는 예시 자료 표시와 생성 이미지 출처를 함께 둡니다.</p></div>
|
||||
</div>
|
||||
<footer><button type="submit" class="button button-primary" value="close">확인</button></footer>
|
||||
</form>
|
||||
|
|
@ -280,8 +280,8 @@
|
|||
|
||||
<dialog class="admin-dialog preview-dialog" data-preview-dialog aria-labelledby="preview-dialog-title">
|
||||
<form method="dialog" class="admin-dialog-shell">
|
||||
<header><div><span class="dialog-symbol is-pass" aria-hidden="true">✓</span><div><small>SHOWCASE</small><h2 id="preview-dialog-title">미리보기 채널은 열 수 있습니다.</h2></div></div><button type="button" data-close-dialog aria-label="쇼케이스 미리보기 안내 닫기">×</button></header>
|
||||
<div class="admin-dialog-content"><p>상시 데모 고지, 개별 예시 배지, 생성 이미지 출처, 연락 기능 비활성, 실제 주소와 등록번호 없음, AI 데모 표시를 확인했습니다.</p><a class="button button-primary" href="../#listing-detail">공개 상세 보기</a></div>
|
||||
<header><div><span class="dialog-symbol is-pass" aria-hidden="true">✓</span><div><small>공개 안내</small><h2 id="preview-dialog-title">예시 자료는 공개 화면에서 볼 수 있습니다.</h2></div></div><button type="button" data-close-dialog aria-label="공개 안내 닫기">×</button></header>
|
||||
<div class="admin-dialog-content"><p>예시 자료 표시, 개별 예시 매물 표기, 생성 이미지 출처, 실제 연락 기능 없음, 실제 주소와 등록번호 없음, AI 결과는 참고용이라는 안내를 확인했습니다.</p><a class="button button-primary" href="../#dossier">공개 상세 보기</a></div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
|
|
|
|||
24
apps/site/public/work/hannam-jari/design.md
Normal file
24
apps/site/public/work/hannam-jari/design.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# 한남자리 디자인 기록
|
||||
|
||||
## 브리프
|
||||
|
||||
- 무엇을: 다섯 조건으로 예시 주거 후보를 비교하고 공개 전 확인 책임을 분리해 보여 주는 브리핑과 운영 화면.
|
||||
- 누구에게: 조건을 정리하는 이용자와 검수 상태를 확인하는 운영 담당자.
|
||||
- 제약: 가상 매물·AI 참고·생성 이미지·미전송 안내와 기존 선택·검수·이력·대화상자 동작을 보존한다.
|
||||
|
||||
## 판단 기준
|
||||
|
||||
| 축 | 질문 | 적용 |
|
||||
| --- | --- | --- |
|
||||
| Warde · 정보 전달 | 다섯 조건의 라벨·입력값·결과 행동이 한 번에 읽히는가 | 13px 이상 라벨, 16px 입력, 결과 행동을 같은 조건판에 유지 |
|
||||
| Ruder · 비교 변수 | 후보 조건의 라벨과 값을 섞지 않고 비교하는가 | 조건 행의 라벨·값·보조 메모를 세 단계로 분리 |
|
||||
| Albers · 상태 맥락 | 가상 자료·AI 참고·중개사 확인의 책임이 구분되는가 | 상태 텍스트와 색조를 함께 사용하고 검수판의 간격·정렬을 통일 |
|
||||
|
||||
Warde, Ruder, Albers는 정보 전달·비교 변수·상태 맥락을 검토하는 참고 질문이며 인과나 성능 법칙이 아니다.
|
||||
|
||||
## 역할 토큰과 검증
|
||||
|
||||
- `--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이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#f3f0e8">
|
||||
<meta name="description" content="서울 한남 생활권의 집을 예산, 면적, 입주, 주차 조건으로 비교하고 AI 브리핑 뒤 공인중개사가 사실을 다시 확인하는 스마트 중개 디자인 쇼케이스입니다.">
|
||||
<meta name="description" content="서울 한남 생활권의 집을 예산, 면적, 입주, 주차 조건으로 비교하고 계약 전 공인중개사가 사실을 다시 확인하는 주거 비교 안내입니다.">
|
||||
<meta property="og:title" content="한남자리 — 내 기준에 맞는 집부터">
|
||||
<meta property="og:description" content="조건을 정리하고 후보를 비교한 뒤 공인중개사가 확인하는 개인 주거 브리핑 데스크">
|
||||
<meta property="og:image" content="./og.png">
|
||||
|
|
@ -15,28 +15,27 @@
|
|||
<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=20260829d">
|
||||
<link rel="stylesheet" href="./styles/landing.css?v=20260829d">
|
||||
<script src="./scripts/landing.js?v=20260829d" defer></script>
|
||||
<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>
|
||||
</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>
|
||||
</a>
|
||||
<button class="menu-button" type="button" aria-expanded="false" aria-controls="site-nav" data-menu-button>
|
||||
<span class="sr-only">메뉴 열기</span><i aria-hidden="true"></i><i aria-hidden="true"></i>
|
||||
<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 class="nav-admin" href="./admin/">관리 화면</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
@ -45,7 +44,7 @@
|
|||
<div class="masthead">
|
||||
<p class="eyebrow">한남 생활권 맞춤 중개</p>
|
||||
<h1 id="hero-title">한남에서, 내 기준에 맞는 집부터.</h1>
|
||||
<p class="hero-copy">예산과 면적, 입주 계획을 먼저 정리합니다. AI가 후보를 비교하고 공인중개사가 다시 확인합니다.</p>
|
||||
<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>
|
||||
|
|
@ -73,8 +72,8 @@
|
|||
<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>
|
||||
<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>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
|
|
@ -82,11 +81,11 @@
|
|||
<header class="section-heading briefing-heading">
|
||||
<p class="eyebrow">내 조건 브리핑</p>
|
||||
<h2 id="briefing-title">맞는 이유와<br>조정할 지점을 나눕니다.</h2>
|
||||
<p>화면에 입력한 값과 후보 정보를 이 브라우저에서 대조합니다.</p>
|
||||
<p>입력한 기준과 후보 정보를 같은 항목으로 비교합니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="briefing-sheet" data-analysis-result aria-live="polite" aria-atomic="false">
|
||||
<header><span>예시 AI 브리핑 · 모의 조건 비교 · 공인중개사 확인 전</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>
|
||||
|
|
@ -195,19 +194,19 @@
|
|||
<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>
|
||||
<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><a href="./admin/">관리 화면</a></nav>
|
||||
<p>한남자리는 예시 자료로 구성한 서비스 화면입니다. 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다.</p>
|
||||
<nav aria-label="보조 메뉴"><a href="#top">처음으로</a></nav>
|
||||
</footer>
|
||||
|
||||
<dialog class="consult-dialog" data-consult-dialog aria-labelledby="consult-title">
|
||||
<form method="dialog" class="dialog-shell" data-consult-form>
|
||||
<header><div><span>상담 순서 살펴보기</span><h2 id="consult-title">중개사에게 무엇을 넘길까요?</h2></div><button class="dialog-close" type="button" aria-label="상담 흐름 닫기" data-close-consult>×</button></header>
|
||||
<header><div><span>상담 전 확인 항목</span><h2 id="consult-title">중개사와 무엇을 먼저 확인할까요?</h2></div><button class="dialog-close" type="button" aria-label="상담 안내 닫기" data-close-consult>×</button></header>
|
||||
<p class="dialog-privacy">연락처를 받거나 입력 내용을 저장하지 않습니다.</p>
|
||||
<div class="dialog-content" data-consult-content>
|
||||
<p><strong data-consult-home>정원형 연립주택</strong>을 기준으로 준비할 항목을 골라 보세요.</p>
|
||||
|
|
@ -220,6 +219,6 @@
|
|||
</dialog>
|
||||
|
||||
<div class="live-region" role="status" aria-live="polite" data-live-region hidden></div>
|
||||
<noscript><div class="no-script"><strong>자바스크립트 없이 보는 중입니다.</strong><p>집 정보는 읽을 수 있지만 조건 비교, 후보 변경과 상담 미리보기는 작동하지 않습니다.</p></div></noscript>
|
||||
<noscript><div class="no-script"><strong>자바스크립트 없이 보는 중입니다.</strong><p>집 정보는 읽을 수 있지만 조건 비교, 후보 변경과 상담 준비 순서는 이용할 수 없습니다.</p></div></noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 290 KiB After Width: | Height: | Size: 292 KiB |
|
|
@ -22,7 +22,7 @@
|
|||
},
|
||||
"DEMO-HJ-102": {
|
||||
title: "한강 가까운 복층 주거",
|
||||
status: "쇼케이스 공개",
|
||||
status: "예시 공개",
|
||||
statusClass: "status-pass",
|
||||
trade: "전세",
|
||||
type: "공동주택",
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
moveIn: "2026.11.30 이후 협의",
|
||||
image: "../assets/hannam-evening-640.webp",
|
||||
imageAlt: "서울 언덕길의 석재 주거 건물 연출 이미지",
|
||||
blockers: "데모 통과",
|
||||
blockers: "안내 확인",
|
||||
ai: "수정 후 승인"
|
||||
},
|
||||
"DEMO-HJ-103": {
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
trade: "매매",
|
||||
type: "단독주택",
|
||||
price: "상담 종료",
|
||||
area: "예시 공개 종료",
|
||||
area: "목록에서 제외",
|
||||
rooms: "공개 목록 제외",
|
||||
moveIn: "해당 없음",
|
||||
image: "../assets/hannam-evening-640.webp",
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
if (!inspector) return;
|
||||
inspector.classList.add("is-open");
|
||||
workbench?.classList.remove("is-inspector-closed");
|
||||
$("[data-inspector-id]", inspector).textContent = `${id} · 예시 매물`;
|
||||
$("[data-inspector-id]", inspector).textContent = `자료번호 ${id.replace("DEMO-HJ-", "")} · 예시 매물`;
|
||||
$("[data-inspector-title]", inspector).textContent = detail.title;
|
||||
const status = $("[data-inspector-status]", inspector);
|
||||
status.textContent = detail.status;
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
if (basicGrid) {
|
||||
const pairs = [
|
||||
["거래 형태", detail.trade],
|
||||
["예시 가격", detail.price],
|
||||
["표시 가격", detail.price],
|
||||
["유형", detail.type],
|
||||
["전용 면적", detail.area],
|
||||
["방과 욕실", detail.rooms],
|
||||
|
|
@ -199,7 +199,7 @@
|
|||
|
||||
updateInspectorBackdrop();
|
||||
if (focus) $("[data-close-inspector]", inspector)?.focus();
|
||||
announce(`${detail.title} 조사관을 열었습니다. ${detail.status} 상태입니다.`);
|
||||
announce(`${detail.title} 상세 정보를 열었습니다. ${detail.status} 상태입니다.`);
|
||||
};
|
||||
|
||||
const closeInspector = ({ restoreFocus = false } = {}) => {
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
if (restoreFocus && previousId) {
|
||||
$(`[data-queue-row][data-id="${previousId}"] [data-select-row]`)?.focus();
|
||||
}
|
||||
announce("조사관과 선택 행을 함께 닫았습니다.");
|
||||
announce("선택한 매물 정보를 닫았습니다.");
|
||||
};
|
||||
|
||||
const activateTab = (name, focus = false) => {
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
const updateResultCount = () => {
|
||||
const visible = getRows().filter((row) => !row.classList.contains("is-hidden"));
|
||||
const result = $("[data-result-count]");
|
||||
if (result) result.textContent = `${visible.length}개 예시`;
|
||||
if (result) result.textContent = `${visible.length}건`;
|
||||
const empty = $("[data-queue-empty]");
|
||||
if (state.mode === "normal") empty.hidden = visible.length !== 0;
|
||||
return visible.length;
|
||||
|
|
@ -276,7 +276,7 @@
|
|||
const emptyTitle = $("[data-empty-title]");
|
||||
const emptyCopy = $("[data-empty-copy]");
|
||||
if (count === 0 && state.mode === "normal") {
|
||||
emptyTitle.textContent = "현재 조건에 맞는 예시가 없습니다.";
|
||||
emptyTitle.textContent = "현재 조건에 맞는 항목이 없습니다.";
|
||||
emptyCopy.textContent = "검색어와 필터를 초기화하면 전체 대기열을 다시 볼 수 있습니다.";
|
||||
}
|
||||
};
|
||||
|
|
@ -320,9 +320,9 @@
|
|||
if (mode === "empty") {
|
||||
const empty = $("[data-queue-empty]");
|
||||
empty.hidden = false;
|
||||
$("[data-empty-title]").textContent = "아직 접수된 예시 매물이 없습니다.";
|
||||
$("[data-empty-copy]").textContent = "새 예시 초안을 만들거나 다른 상태를 시연할 수 있습니다.";
|
||||
announce("빈 대기열 상태를 시연합니다.");
|
||||
$("[data-empty-title]").textContent = "아직 표시할 항목이 없습니다.";
|
||||
$("[data-empty-copy]").textContent = "검색어와 필터를 초기화하면 전체 목록을 다시 볼 수 있습니다.";
|
||||
announce("현재 표시할 항목이 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -333,8 +333,8 @@
|
|||
}
|
||||
|
||||
if (mode === "save-error") {
|
||||
showBanner("저장 경로를 확인할 수 없습니다.", "입력은 화면에 남지만 저장 성공으로 표시하지 않습니다. 수정 시연을 누르면 실패 처리를 확인할 수 있습니다.", "error");
|
||||
announce("저장 실패 상태를 시연합니다.");
|
||||
showBanner("지금은 변경 내용을 보관할 수 없습니다.", "입력은 화면에 남지만 완료로 표시하지 않습니다.", "error");
|
||||
announce("저장할 수 없는 상태입니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -347,25 +347,25 @@
|
|||
status.textContent = "자료 오래됨";
|
||||
status.className = "status-badge status-warn";
|
||||
}
|
||||
announce("자료 오래됨 상태를 시연합니다.");
|
||||
announce("자료가 오래되어 다시 확인이 필요합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === "conflict") {
|
||||
showBanner("다른 예시 담당자가 먼저 수정했습니다.", "현재 버전 7과 서버 예시 버전 8의 차이를 확인한 뒤 다시 저장해야 합니다.", "error");
|
||||
announce("버전 충돌 상태를 시연합니다.");
|
||||
showBanner("다른 담당자가 먼저 수정했습니다.", "현재 내용과 최신 자료의 차이를 확인한 뒤 다시 저장해야 합니다.", "error");
|
||||
announce("최신 자료와 차이가 있어 다시 확인이 필요합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (mode === "permission") {
|
||||
document.body.classList.add("is-permission-limited");
|
||||
$$('[data-review-ai], [data-simulate-save], [data-new-draft]').forEach((button) => button.disabled = true);
|
||||
showBanner("중개보조 예시 권한으로 보는 중입니다.", "초안과 일정은 정리할 수 있지만 법정 검수 승인, AI 최종 승인과 게시를 할 수 없습니다.", "info");
|
||||
announce("권한 제한 상태를 시연합니다.");
|
||||
showBanner("중개보조 권한으로 보는 중입니다.", "초안과 일정은 정리할 수 있지만 법정 검수 승인, AI 최종 승인과 게시를 할 수 없습니다.", "info");
|
||||
announce("현재 권한으로는 승인과 게시를 할 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
announce("정상 데모 상태로 돌아왔습니다.");
|
||||
announce("기본 목록을 다시 보여 줍니다.");
|
||||
};
|
||||
|
||||
const openDialog = (dialog) => {
|
||||
|
|
@ -380,11 +380,11 @@
|
|||
|
||||
const simulateSave = () => {
|
||||
if (state.mode === "permission") {
|
||||
announce("현재 예시 권한으로는 매물 정보를 수정할 수 없습니다.");
|
||||
announce("현재 권한으로는 매물 정보를 수정할 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
if (state.mode === "conflict") {
|
||||
showBanner("버전 충돌로 저장하지 않았습니다.", "서버 예시 버전 8을 다시 불러오거나 현재 수정을 별도 초안으로 남겨야 합니다.", "error");
|
||||
showBanner("최신 자료와 차이가 있어 저장하지 않았습니다.", "최신 내용을 다시 확인하거나 현재 수정을 별도 초안으로 남겨야 합니다.", "error");
|
||||
announce("버전 충돌로 저장하지 않았습니다.");
|
||||
return;
|
||||
}
|
||||
|
|
@ -393,12 +393,12 @@
|
|||
announce("저장에 실패했습니다. 성공으로 처리하지 않았습니다.");
|
||||
return;
|
||||
}
|
||||
announce("수정 시연을 마쳤습니다. 서버가 없는 데모라 실제 저장하지 않았습니다.");
|
||||
announce("변경 내용을 확인했습니다. 실제로 저장되거나 전송되지는 않습니다.");
|
||||
};
|
||||
|
||||
const createDraft = () => {
|
||||
if (state.mode === "permission") {
|
||||
announce("현재 예시 권한으로는 새 초안을 만들 수 없습니다.");
|
||||
announce("현재 권한으로는 새 초안을 만들 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
if (state.draftCreated) {
|
||||
|
|
@ -407,7 +407,7 @@
|
|||
}
|
||||
state.draftCreated = true;
|
||||
listingDetails["DEMO-HJ-NEW"] = {
|
||||
title: "제목 없는 새 예시 초안",
|
||||
title: "제목 없는 새 항목",
|
||||
status: "초안",
|
||||
statusClass: "status-demo",
|
||||
trade: "미선택",
|
||||
|
|
@ -427,15 +427,15 @@
|
|||
row.dataset.id = "DEMO-HJ-NEW";
|
||||
row.dataset.status = "draft";
|
||||
row.dataset.updated = new Date().toISOString();
|
||||
row.dataset.title = "제목 없는 새 예시 초안";
|
||||
row.dataset.title = "제목 없는 새 항목";
|
||||
row.setAttribute("aria-selected", "false");
|
||||
row.innerHTML = `
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="제목 없는 새 예시 초안 조사관 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-draft"><i></i></span><span><strong>제목 없는 새 예시 초안</strong><small>DEMO-HJ-NEW · 예시 매물</small></span></span></td>
|
||||
<td><span>미선택</span><small>유형 미선택</small></td><td><strong>입력 전</strong><small>면적 입력 전</small></td><td><span>방금</span><small>데모 초안</small></td><td><span class="cell-status is-blocked"><i aria-hidden="true"></i>입력 대기</span></td><td><span class="cell-status is-muted"><i aria-hidden="true"></i>실행 전</span></td><td><span class="assignee"><i>김</i>김유진</span></td>`;
|
||||
<td class="row-cell-select"><button type="button" class="row-select-overlay" data-select-row aria-label="제목 없는 새 항목 상세 정보 열기"></button><span class="row-title" aria-hidden="true"><span class="row-thumb row-thumb-draft"><i></i></span><span><strong>제목 없는 새 항목</strong><small>새 예시 매물</small></span></span></td>
|
||||
<td><span>미선택</span><small>유형 미선택</small></td><td><strong>입력 전</strong><small>면적 입력 전</small></td><td><span>방금</span><small>새 항목</small></td><td><span class="cell-status is-blocked"><i aria-hidden="true"></i>입력 대기</span></td><td><span class="cell-status is-muted"><i aria-hidden="true"></i>분석 전</span></td><td><span class="assignee"><i>김</i>김유진</span></td>`;
|
||||
queueBody.prepend(row);
|
||||
applyFilters();
|
||||
openInspector("DEMO-HJ-NEW", true);
|
||||
announce("새 예시 초안을 만들었습니다. 외부 서버에는 저장하지 않았습니다.");
|
||||
announce("새 항목을 만들었습니다. 실제로 저장되거나 전송되지는 않습니다.");
|
||||
};
|
||||
|
||||
const handleRowSelection = (button) => {
|
||||
|
|
@ -523,7 +523,7 @@
|
|||
|
||||
$("[data-review-ai]")?.addEventListener("click", (event) => {
|
||||
if (state.mode === "permission") {
|
||||
announce("현재 예시 권한으로는 AI 결과를 승인할 수 없습니다.");
|
||||
announce("현재 권한으로는 AI 결과를 승인할 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
event.currentTarget.textContent = "수정 후 승인됨";
|
||||
|
|
@ -533,20 +533,20 @@
|
|||
badge.textContent = "수정 후 승인";
|
||||
badge.className = "status-badge status-pass";
|
||||
}
|
||||
announce("AI 참고 분석을 수정 후 승인 상태로 바꿨습니다. 데모 외부에는 게시하지 않았습니다.");
|
||||
announce("AI 참고 결과를 수정 후 확인 상태로 바꿨습니다. 실제 광고에는 사용되지 않습니다.");
|
||||
});
|
||||
|
||||
$$('[data-claim-action]').forEach((button) => button.addEventListener("click", () => {
|
||||
button.textContent = button.dataset.claimAction === "edit" ? "수정 반영" : "확인됨";
|
||||
button.disabled = true;
|
||||
announce("주장 검토 상태를 데모 안에서만 바꿨습니다.");
|
||||
announce("표시 문구의 검토 상태를 이 화면에서만 바꿨습니다.");
|
||||
}));
|
||||
|
||||
$("[data-reschedule]")?.addEventListener("click", (event) => {
|
||||
const card = event.currentTarget.closest(".appointment-card");
|
||||
const time = $("div > strong", card);
|
||||
time.textContent = time.textContent.includes("3:30") ? "오후 5:00~5:30" : "오후 3:30~4:00";
|
||||
announce("예시 상담 시간을 바꿨습니다. 외부 알림은 보내지 않았습니다.");
|
||||
announce("안내용 상담 시간을 바꿨습니다. 알림은 전송되지 않았습니다.");
|
||||
});
|
||||
|
||||
$("[data-simulate-log-failure]")?.addEventListener("click", () => {
|
||||
|
|
|
|||
|
|
@ -386,7 +386,7 @@
|
|||
state.selectedId = best.id;
|
||||
renderSelection();
|
||||
$("#briefing")?.scrollIntoView({ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
|
||||
announce(`${best.name}을 가장 가까운 후보로 골라 세 묶음의 브리핑을 만들었습니다.`);
|
||||
announce(`${best.name}을 가장 가까운 후보로 골랐습니다. 맞는 점, 조정할 점, 확인할 점을 정리했습니다.`);
|
||||
};
|
||||
|
||||
const markConditionsChanged = () => {
|
||||
|
|
@ -400,9 +400,9 @@
|
|||
if (!form.reportValidity()) return;
|
||||
try {
|
||||
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(readConditions()));
|
||||
announce("현재 조건을 이 브라우저에 저장했습니다.");
|
||||
announce("현재 조건을 지금 사용 중인 기기에 임시 보관했습니다.");
|
||||
} catch {
|
||||
announce("브라우저 저장소를 사용할 수 없어 조건을 저장하지 않았습니다.");
|
||||
announce("지금 사용 중인 기기에 조건을 보관할 수 없습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.admin-body {
|
||||
min-width: 20rem;
|
||||
min-width: 0;
|
||||
color: #1c1c1a;
|
||||
background: #f3f4f3;
|
||||
}
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
padding: 0.42rem 0.6rem;
|
||||
padding: 0.42rem 0.7rem;
|
||||
}
|
||||
|
||||
.topbar-actions .icon-button {
|
||||
|
|
@ -390,10 +390,10 @@
|
|||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.7rem;
|
||||
padding: 0.875rem;
|
||||
background: #fff;
|
||||
border: 1px solid #dedfdd;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--brief-rule);
|
||||
border-radius: var(--brief-panel-radius);
|
||||
}
|
||||
|
||||
.search-field {
|
||||
|
|
@ -412,6 +412,7 @@
|
|||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
min-width: 0;
|
||||
padding-inline: 0.5rem;
|
||||
color: #222320;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
|
@ -419,6 +420,11 @@
|
|||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.search-field:focus-within {
|
||||
border-color: var(--focus);
|
||||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 32%, transparent);
|
||||
}
|
||||
|
||||
.queue-toolbar select {
|
||||
min-height: 2.75rem;
|
||||
padding: 0.42rem 1.8rem 0.42rem 0.65rem;
|
||||
|
|
@ -459,7 +465,8 @@
|
|||
.settings-proof {
|
||||
background: #fff;
|
||||
border: 1px solid #dedfdd;
|
||||
border-radius: 0.55rem;
|
||||
border-radius: var(--brief-panel-radius);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.queue-panel {
|
||||
|
|
@ -522,7 +529,11 @@
|
|||
}
|
||||
|
||||
.table-scroll {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
overscroll-behavior-inline: contain;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
|
|
@ -535,9 +546,9 @@
|
|||
|
||||
.queue-table th,
|
||||
.queue-table td {
|
||||
padding: 0.7rem 0.6rem;
|
||||
padding: 0.8rem 0.875rem;
|
||||
border-bottom: 1px solid #ecedea;
|
||||
font-size: 0.66rem;
|
||||
font-size: var(--admin-body-size);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -548,7 +559,7 @@
|
|||
top: 0;
|
||||
color: #777973;
|
||||
background: #fafbfa;
|
||||
font-size: 0.58rem;
|
||||
font-size: var(--admin-meta-size);
|
||||
font-weight: 730;
|
||||
}
|
||||
|
||||
|
|
@ -605,7 +616,7 @@
|
|||
.queue-table td > strong + small {
|
||||
margin-top: 0.13rem;
|
||||
color: #62665f;
|
||||
font-size: 0.57rem;
|
||||
font-size: var(--admin-meta-size);
|
||||
}
|
||||
|
||||
.row-title {
|
||||
|
|
@ -822,6 +833,13 @@
|
|||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.queue-loading > span {
|
||||
animation: none;
|
||||
opacity: 0.72;
|
||||
}
|
||||
}
|
||||
|
||||
.queue-empty > span {
|
||||
display: grid;
|
||||
width: 3rem;
|
||||
|
|
@ -1087,7 +1105,7 @@
|
|||
.text-button {
|
||||
min-width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.4rem;
|
||||
padding: 0.5rem;
|
||||
color: #6f5420;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
|
@ -1510,23 +1528,26 @@
|
|||
|
||||
.claim-review article {
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.65rem;
|
||||
padding: 0.75rem;
|
||||
background: #fafbfa;
|
||||
border: 1px solid #e1e2df;
|
||||
border: 1px solid var(--brief-rule);
|
||||
border-left-width: 3px;
|
||||
border-radius: 0.35rem;
|
||||
border-radius: var(--brief-panel-radius);
|
||||
}
|
||||
|
||||
.claim-review article.is-fact {
|
||||
border-left-color: #3d7c5d;
|
||||
background: var(--review-fact-bg);
|
||||
}
|
||||
|
||||
.claim-review article.is-unknown {
|
||||
border-left-color: #b1832d;
|
||||
background: var(--review-unknown-bg);
|
||||
}
|
||||
|
||||
.claim-review article.is-edited {
|
||||
border-left-color: #9d3f34;
|
||||
background: var(--review-edited-bg);
|
||||
}
|
||||
|
||||
.claim-review header {
|
||||
|
|
@ -1791,9 +1812,15 @@
|
|||
}
|
||||
|
||||
.admin-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
box-sizing: border-box;
|
||||
width: min(35rem, calc(100% - 2rem));
|
||||
max-height: calc(100dvh - 2rem);
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
color: #20211f;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
|
|
@ -1801,6 +1828,10 @@
|
|||
box-shadow: 0 1.5rem 5rem rgba(20, 20, 19, 0.28);
|
||||
}
|
||||
|
||||
html:has(.admin-dialog[open]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-dialog::backdrop {
|
||||
background: rgba(20, 20, 19, 0.62);
|
||||
backdrop-filter: blur(2px);
|
||||
|
|
@ -1923,6 +1954,13 @@
|
|||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
@media (min-width: 120rem) {
|
||||
.admin-content {
|
||||
max-width: 122rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 92rem) {
|
||||
.admin-workbench {
|
||||
grid-template-columns: minmax(35rem, 1fr) 23rem;
|
||||
|
|
@ -1977,6 +2015,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* 짧은 가로 화면은 조사관을 덮는 시트로 다뤄야 한다.
|
||||
미디어·부제까지 고정하면 scroll 영역이 0px로 수축해 핵심 검토 내용이 전부 사라진다. */
|
||||
@media (max-width: 76rem) and (max-height: 40rem) {
|
||||
.inspector {
|
||||
top: 0;
|
||||
max-height: 100dvh;
|
||||
}
|
||||
|
||||
.inspector-header {
|
||||
padding: 0.65rem 0.8rem;
|
||||
}
|
||||
|
||||
.inspector-header small,
|
||||
.inspector-media {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inspector-tabs button {
|
||||
min-height: 2.25rem;
|
||||
padding-block: 0.45rem;
|
||||
}
|
||||
|
||||
.inspector-actions {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 64rem) {
|
||||
.admin-shell {
|
||||
grid-template-columns: 13.5rem minmax(0, 1fr);
|
||||
|
|
@ -2034,11 +2099,29 @@
|
|||
}
|
||||
|
||||
.admin-topbar {
|
||||
min-width: 0;
|
||||
gap: 0.5rem;
|
||||
padding: 0 0.8rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-right: auto;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
min-width: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.account-button {
|
||||
display: grid;
|
||||
width: 2.75rem;
|
||||
min-width: 0;
|
||||
flex: 0 0 2.75rem;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.icon-button kbd,
|
||||
|
|
@ -2087,7 +2170,7 @@
|
|||
@media (max-width: 34rem) {
|
||||
.demo-strip {
|
||||
min-height: 2.3rem;
|
||||
padding-inline: 0.5rem;
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-sidebar,
|
||||
|
|
@ -2141,6 +2224,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* 이 규칙은 좁은 폭 보정 뒤에 둬야 한다. 그렇지 않으면 34rem 보정의 top 값이
|
||||
짧은 화면 시트보다 뒤에 적용되어 스크롤 영역이 다시 0px가 된다. */
|
||||
@media (max-width: 76rem) and (max-height: 40rem) {
|
||||
.inspector {
|
||||
top: 0;
|
||||
max-height: 100dvh;
|
||||
}
|
||||
|
||||
.channel-gates {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
padding: 0.35rem;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.channel-gate {
|
||||
padding: 0.35rem 0.4rem;
|
||||
}
|
||||
|
||||
.channel-gate small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 작은 운영 문구도 본문 대비 기준을 넘도록 중립색을 한 단계 진하게 쓴다. */
|
||||
.admin-main small,
|
||||
.admin-main dt,
|
||||
|
|
|
|||
|
|
@ -100,12 +100,6 @@ body {
|
|||
color: var(--slate-deep);
|
||||
}
|
||||
|
||||
.site-nav .nav-admin {
|
||||
padding: 0 0.95rem;
|
||||
color: var(--sheet);
|
||||
background: var(--charcoal);
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
display: none;
|
||||
width: 2.75rem;
|
||||
|
|
@ -165,6 +159,7 @@ body {
|
|||
|
||||
.brief-hero {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
width: min(100%, 96rem);
|
||||
margin: 0 auto;
|
||||
padding: 3rem 2rem 0;
|
||||
|
|
@ -292,12 +287,14 @@ body {
|
|||
grid-area: dock;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10rem, 1.15fr) repeat(5, minmax(7.5rem, 0.8fr)) minmax(10rem, 1fr);
|
||||
gap: 0.8rem 1rem;
|
||||
min-width: 0;
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
margin: -5.5rem 2.5rem 0;
|
||||
padding: 1.35rem 1.5rem 1rem;
|
||||
background: var(--sheet);
|
||||
border-top: 3px solid var(--charcoal);
|
||||
border-bottom: 1px solid var(--brief-rule);
|
||||
box-shadow: 0 6px 0 var(--paper-shadow), 0 1.4rem 3rem rgba(44, 45, 40, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -312,34 +309,35 @@ body {
|
|||
|
||||
.dock-heading span {
|
||||
color: var(--slate-deep);
|
||||
font-size: 0.62rem;
|
||||
font-size: var(--brief-label-size);
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.dock-heading strong {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.dock-field > span:first-child {
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
color: #646963;
|
||||
font-size: 0.61rem;
|
||||
font-size: var(--brief-label-size);
|
||||
font-weight: 710;
|
||||
}
|
||||
|
||||
.dock-field input,
|
||||
.dock-field select {
|
||||
width: 100%;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.55rem 0.4rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.55rem 0.5rem;
|
||||
color: var(--charcoal);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #90948e;
|
||||
border-radius: 0;
|
||||
font-size: 0.78rem;
|
||||
font-size: var(--brief-input-size);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 710;
|
||||
}
|
||||
|
||||
|
|
@ -373,7 +371,7 @@ body {
|
|||
|
||||
.save-button {
|
||||
min-height: 2.75rem;
|
||||
padding: 0.35rem;
|
||||
padding: 0.5rem;
|
||||
color: #555b56;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
|
@ -409,6 +407,17 @@ body {
|
|||
gap: clamp(3rem, 7vw, 7rem);
|
||||
}
|
||||
|
||||
/* 1920px 이상에서는 비교·서류 표면만 조금 넓혀 여백이 본문을 압도하지 않게 한다. */
|
||||
@media (min-width: 120rem) {
|
||||
.brief-hero {
|
||||
width: min(100%, 104rem);
|
||||
}
|
||||
|
||||
.briefing-section {
|
||||
width: min(100% - 4rem, 100rem);
|
||||
}
|
||||
}
|
||||
|
||||
.briefing-heading {
|
||||
align-self: center;
|
||||
}
|
||||
|
|
@ -537,25 +546,34 @@ body {
|
|||
|
||||
.compare-heading {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
align-items: end;
|
||||
grid-template-columns: minmax(28rem, 1fr) minmax(17rem, 0.5fr) auto;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, auto);
|
||||
gap: 3rem;
|
||||
margin-bottom: 3.5rem;
|
||||
}
|
||||
|
||||
.compare-heading > p {
|
||||
min-width: 0;
|
||||
margin: 0 0 0.45rem;
|
||||
color: #5a605b;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.compare-heading h2 {
|
||||
overflow-wrap: anywhere;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.unit-switches {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.unit-switches > div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--hairline);
|
||||
}
|
||||
|
||||
|
|
@ -1035,8 +1053,9 @@ body {
|
|||
|
||||
.handoff-section {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
grid-template-columns: minmax(24rem, 0.8fr) minmax(28rem, 1fr) auto;
|
||||
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, auto);
|
||||
gap: clamp(3rem, 7vw, 7rem);
|
||||
padding: clamp(6rem, 9vw, 9rem) max(2rem, calc((100% - 92rem) / 2));
|
||||
color: var(--sheet);
|
||||
|
|
@ -1047,6 +1066,18 @@ body {
|
|||
color: #bec7cc;
|
||||
}
|
||||
|
||||
.handoff-section > header,
|
||||
.handoff-steps,
|
||||
.handoff-cta {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.handoff-section h2,
|
||||
.handoff-steps p,
|
||||
.handoff-cta {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.handoff-steps {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -1122,9 +1153,15 @@ body {
|
|||
}
|
||||
|
||||
.consult-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
box-sizing: border-box;
|
||||
width: min(36rem, calc(100% - 2rem));
|
||||
max-height: calc(100svh - 2rem);
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
color: var(--charcoal);
|
||||
background: var(--sheet);
|
||||
border: 1px solid var(--charcoal);
|
||||
|
|
@ -1132,6 +1169,10 @@ body {
|
|||
box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
html:has(.consult-dialog[open]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.consult-dialog::backdrop {
|
||||
background: rgba(18, 19, 17, 0.72);
|
||||
}
|
||||
|
|
@ -1298,12 +1339,16 @@ body {
|
|||
z-index: 90;
|
||||
top: 6.5rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
max-height: calc(100dvh - 6.5rem);
|
||||
padding: 0.75rem 1.25rem 1.25rem;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--sheet);
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
}
|
||||
|
|
@ -1312,8 +1357,7 @@ body {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.site-nav a,
|
||||
.site-nav .nav-admin {
|
||||
.site-nav a {
|
||||
min-height: 3rem;
|
||||
padding: 0 0.5rem;
|
||||
color: var(--charcoal);
|
||||
|
|
@ -1324,15 +1368,15 @@ body {
|
|||
.brief-hero {
|
||||
padding: 0;
|
||||
grid-template-areas: "masthead" "scene" "dock";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.masthead {
|
||||
padding: 5rem max(1.25rem, calc((100% - 44rem) / 2)) 4rem;
|
||||
padding: 5rem max(1.25rem, calc((100% - 44rem) / 2)) var(--space-10);
|
||||
}
|
||||
|
||||
.hero-scene {
|
||||
height: min(70vw, 40rem);
|
||||
height: min(70vw, 38rem);
|
||||
min-height: 32rem;
|
||||
}
|
||||
|
||||
|
|
@ -1371,7 +1415,7 @@ body {
|
|||
}
|
||||
|
||||
.compare-heading {
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, auto);
|
||||
}
|
||||
|
||||
.compare-heading > p {
|
||||
|
|
@ -1439,7 +1483,7 @@ body {
|
|||
}
|
||||
|
||||
.handoff-section {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.handoff-cta {
|
||||
|
|
@ -1456,6 +1500,7 @@ body {
|
|||
}
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
.handoff-cta { width: 100%; min-width: 0; }
|
||||
.demo-strip {
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
|
@ -1576,7 +1621,7 @@ body {
|
|||
}
|
||||
|
||||
.compare-heading {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,6 +51,15 @@
|
|||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1.25rem;
|
||||
--transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
--brief-label-size: 0.8125rem;
|
||||
--brief-input-size: 1rem;
|
||||
--brief-panel-radius: 0.5rem;
|
||||
--brief-rule: var(--line-light);
|
||||
--admin-body-size: 0.8125rem;
|
||||
--admin-meta-size: 0.75rem;
|
||||
--review-fact-bg: #f2f8f4;
|
||||
--review-unknown-bg: #fff8e8;
|
||||
--review-edited-bg: #fdf0ed;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue