feat: strengthen design skill and refresh all showcases

apps/site/public/work/cheongon-care/assets/fonts/SOURCES.md

@@ -0,0 +1,13 @@
+# MaruBuri source record
+
+Downloaded 2026-09-12 from the official NAVER Hangeul static host. The files are retained unchanged: no conversion or subsetting was performed.
+
+| File | Official URL | HTTP content type | Size | SHA-256 |
+| --- | --- | --- | --- | --- |
+| `MaruBuri-Regular.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2 | `font/woff2` | 433776 bytes | `4CF1341CF2F23FB3E263712DFDE1D8F25EEDCC328B696A2E5A2C8ADD55E5C17B` |
+| `MaruBuri-SemiBold.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2 | `font/woff2` | 466108 bytes | `7AEF4862FA3219B0A7DEB6746E27116A38C4069F4424EB51EDF103B29795F5C2` |
+
+- Official stylesheet checked: https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css
+- Official NAVER license page saved verbatim as `LICENSE.html`: https://help.naver.com/service/11029/contents/18088?lang=ko&osType=PC
+- `LICENSE.html` SHA-256: `8538F7921744D5E040F603BC301465EFBD038F1054D0754B7508DE3286452EC3`
+- The saved official page includes the NAVER copyright notice and the SIL Open Font License 1.1 text for MaruBuri.

apps/site/public/work/cheongon-care/design.md

@@ -0,0 +1,17 @@
+# 청온 케어 — 디자인 결정 기록
+
+## 관찰과 방향
+
+- 관찰: 기존 첫 화면은 카드 안의 사진과 떠 있는 수치 배지가 서비스 범위보다 먼저 읽혔다.
+- 원리 적용 범위: 소개와 견적 행동은 왼쪽 읽기 폭에, 생활 공간 사진과 32개 검수 항목 예시는 오른쪽 한 장면에 둔다. 견적은 입력 작업표와 합계 명세를 분리한다.
+- 결정: 이중 프레임·떠 있는 배지를 제거하고 사진 캡션으로 검수 항목의 맥락을 연결했다. 성능 수치·인증·의학적 표현은 근거가 없으므로 작업표에 기록할 확인 절차로 바꿨다.
+- 기각 조건: 사진이 견적 행동을 밀거나 작은 폭에서 입력과 합계가 동시에 읽히지 않으면 1열 순서와 간격을 다시 조정한다.
+
+## 토큰과 검증
+
+- 타입: `MaruBuri` 로컬 400·600은 제목 역할, Pretendard는 본문·입력 역할이다. 본문은 `--step-0`, 보조 기록은 `--step--1`을 유지한다.
+- 색: 기존 청록 `--accent`, 밝은 표면과 선 토큰을 유지한다. 청록은 상태·행동과 검수 표시에만 쓴다.
+- 구도: 넓은 화면은 5:7 소개/사진, 견적은 입력/합계 두 열이며 860px 이하에서는 한 열이다.
+- `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이다.
+- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.

apps/site/public/work/cheongon-care/index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>청온 케어 · 프리미엄 주거·오피스 전문 위생 케어 & 관제 콘솔</title>
+    <title>청온 케어 · 프리미엄 주거·오피스 위생 케어 안내</title>
     <meta
       name="description"
-      content="임상 수준의 6단계 위생 프로토콜과 100% 정찰제 견적. 독일 카처 4.0bar 고온스팀과 에코서트 인증 천연 세제. 실시간 견적 신청 및 관제 콘솔 지원."
+      content="위생 케어 절차, 예상 견적, 운영 정보의 표시 방식을 소개합니다. 가격과 접수 정보는 예시이며 실제 신청은 진행되지 않습니다."
     />
     <meta property="og:title" content="청온 케어 · 프리미엄 위생 케어" />
     <meta property="og:description" content="공간의 숨결을 되돌리는 6단계 프로토콜과 투명한 정찰제 견적." />
@@ -24,7 +24,8 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
     />
-    <link rel="stylesheet" href="./styles/main.css?v=1" />
+    <link rel="stylesheet" href="./styles/fonts.css?v=20260912all" />
+    <link rel="stylesheet" href="./styles/main.css?v=20260912all" />
     <link
       rel="icon"
       href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%230D9488'/%3E%3Cpath d='M9 16.5l5 5 9-10' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"
@@ -56,7 +57,7 @@
             </button>
             <button type="button" class="mode-btn" id="btnModeAdmin" title="단축키: Alt + A">
               <span class="badge-dot" aria-hidden="true"></span>
-              관리자 콘솔
+              운영 현황
             </button>
           </div>
           <a href="#calculator" class="btn client-only-btn">
@@ -76,43 +77,38 @@
           <div class="wrap hero-grid">
             <div class="hero-content">
               <div class="eyebrow">
-                <span>임상 수준 위생 프로토콜</span>
+                <span>현장 검수 절차 예시</span>
               </div>
               <h1 id="heroHeading" class="hero-title">
-                보이지 않는 미세 오염까지,<br />
-                <em>공간의 숨결</em>을 되돌립니다
+                보이지 않는 오염까지,<br />
+                <em>공간을 새롭게</em> 돌봅니다
               </h1>
               <p class="hero-desc">
-                단순한 미화가 아닙니다. 독일 카처 4.0bar 고온 스팀과 에코서트(ECOCERT) 인증 친환경 세제로 새집증후군, 미세 분진, 알레르기 유발 물질을 근본적으로 제거합니다.
+                공간 유형과 선택 항목을 바탕으로 케어 범위와 예상 금액을 살펴볼 수 있습니다.
               </p>
               <div class="hero-ctas">
                 <a href="#calculator" class="btn-primary">
-                  실시간 정찰제 견적 계산하기
+                  항목별 예상 견적 보기
                   <span class="btn-icon-circle" aria-hidden="true">↗</span>
                 </a>
                 <div class="hero-trust">
-                  <span class="hero-trust-stars">★★★★★</span>
-                  <span>누적 케어 4,820세대 · 만족도 99.4%</span>
+                  <span>선택 항목별 예상 금액을 확인하세요</span>
                 </div>
               </div>
+              <p class="demo-notice" role="note">안내: 이 페이지의 서비스·가격·운영 현황은 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 견적이나 신청으로 이어지지 않습니다.</p>
             </div>
 
             <div class="hero-visual">
-              <div class="bezel-outer">
-                <div class="hero-frame">
-                  <img
-                    src="./assets/clean-hero.webp"
-                    alt="정밀 입주 케어가 완료된 미니멀한 프리미엄 주거 거실 전경"
-                    width="1200"
-                    height="900"
-                    loading="eager"
-                  />
-                </div>
-              </div>
-              <div class="hero-stat-floating">
-                <span class="stat-val">32 Point</span>
-                <span class="stat-label">마스터 클리너<br />정밀 검수 체크리스트</span>
-              </div>
+              <figure class="hero-frame">
+                <img
+                  src="./assets/clean-hero.webp"
+                  alt="정돈된 주거 공간의 거실 전경"
+                  width="1200"
+                  height="900"
+                  loading="eager"
+                />
+                <figcaption>주거 공간 케어 예시 · 현장에서는 32개 검수 항목을 확인하는 흐름을 표시합니다.</figcaption>
+              </figure>
             </div>
           </div>
         </section>
@@ -121,8 +117,9 @@
         <section class="calc-section" id="calculator" aria-labelledby="calcHeading">
           <div class="wrap">
             <div class="section-head">
-              <h2 id="calcHeading" class="section-title">투명한 정찰제 실시간 견적 산정</h2>
-              <p class="section-sub">추가금 없는 명확한 기준. 공간 면적과 맞춤 옵션을 선택하시면 즉시 예상 금액이 산출됩니다.</p>
+              <p class="eyebrow">견적 작업표</p>
+              <h2 id="calcHeading" class="section-title">항목별 예상 견적</h2>
+              <p class="section-sub">공간 면적과 선택 항목을 기준으로 예상 금액의 구성 방식을 확인합니다.</p>
             </div>
 
             <div class="calc-grid">
@@ -153,6 +150,7 @@
                     <input
                       type="range"
                       id="pyeongSlider"
+                      name="spaceSize"
                       class="range-input"
                       min="12"
                       max="75"
@@ -167,11 +165,11 @@
                     <div class="addon-grid">
                       <label class="addon-label">
                         <input type="checkbox" name="addon" value="steam" data-price="45000" checked />
-                        <span>160℃ 고온 살균 스팀 (+45,000원)</span>
+                        <span>고온 스팀 작업 기록 (+45,000원)</span>
                       </label>
                       <label class="addon-label">
                         <input type="checkbox" name="addon" value="phytoncide" data-price="35000" checked />
-                        <span>편백 피톤치드 훈증 (+35,000원)</span>
+                        <span>향·마감 작업 기록 (+35,000원)</span>
                       </label>
                       <label class="addon-label">
                         <input type="checkbox" name="addon" value="aircon" data-price="80000" />
@@ -187,30 +185,36 @@
                   <!-- 예약 정보 입력 -->
                   <div class="form-group" style="margin-top: 1.5rem;">
                     <span class="form-label">신청자 정보</span>
-                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem;">
+                  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.75rem;">
+                      <label class="sr-only" for="clientName">신청자 성함</label>
                       <input
                         type="text"
                         id="clientName"
+                        name="clientName"
+                        autocomplete="name"
                         placeholder="성함 / 고객명"
                         style="width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--step--1);"
-                        value="이서연"
                         required
                       />
+                      <label class="sr-only" for="clientPhone">신청자 연락처</label>
                       <input
                         type="tel"
                         id="clientPhone"
+                        name="clientPhone"
+                        autocomplete="tel"
                         placeholder="연락처 (010-0000-0000)"
                         style="width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--step--1);"
-                        value="010-4821-9930"
                         required
                       />
                     </div>
+                    <label class="sr-only" for="clientAddress">케어 현장 주소</label>
                     <input
                       type="text"
                       id="clientAddress"
+                      name="clientAddress"
+                      autocomplete="off"
                       placeholder="케어 현장 주소 (예: 서울시 마포구 공덕동 120)"
                       style="width: 100%; min-width: 0; margin-top: 0.5rem; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--step--1);"
-                      value="서울시 성동구 성수동2가 아크로포레스트 102동"
                       required
                     />
                   </div>
@@ -219,7 +223,7 @@
 
               <!-- 요약 및 접수 CTA -->
               <div class="calc-summary">
-                <h3 class="summary-title">실시간 견적 명세서</h3>
+                <h3 class="summary-title">예상 견적 명세</h3>
                 <div class="summary-row">
                   <span>선택 공간</span>
                   <span id="sumSpaceType" class="mono">주거 입주/이사</span>
@@ -242,10 +246,10 @@
                 </div>
 
                 <button type="button" class="calc-submit" id="btnSubmitQuote">
-                  이 견적으로 신청 접수하기
+                  예상 견적 보기
                 </button>
-                <p style="font-size: 12px; color: var(--ink-inverse-muted); margin-top: 10px; text-align: center;">
-                  ✓ 접수 즉시 배차 팀장이 연락 후 사전 현장 조율을 진행합니다.
+                <p style="font-size: 12px; color: var(--ink-muted); margin-top: 10px; text-align: center;">
+                  선택 항목에 따른 예상 금액을 확인할 수 있습니다. 실제 견적·신청은 진행되지 않습니다.
                 </p>
               </div>
             </div>
@@ -257,11 +261,11 @@
           <div class="wrap">
             <div class="section-head" style="display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px;">
               <div>
-                <h2 id="protoHeading" class="section-title">임상 수준의 6단계 청온 케어 프로토콜</h2>
-                <p class="section-sub">표면만 닦는 청소가 아닌, 미세 분진과 세균 번식의 원인을 제거하는 체계적인 과정입니다.</p>
+                <h2 id="protoHeading" class="section-title">6단계 현장 검수 절차 예시</h2>
+                <p class="section-sub">작업 순서와 확인 항목을 기록하는 방식의 예시입니다. 결과나 성능을 보증하지 않습니다.</p>
               </div>
               <a href="./protocol/index.html" class="action-btn" style="text-decoration: none; padding: 10px 20px; font-size: 14px; background: var(--surface-card); color: var(--accent); border: 1px solid var(--accent);">
-                나인원한남 ATP 측정 리포트 보기 →
+                검수 절차 예시 보기 →
               </a>
             </div>
 
@@ -269,37 +273,37 @@
               <div class="protocol-card">
                 <div class="protocol-num">STEP 01</div>
                 <h3>건식 초미세 집진</h3>
-                <p>H14 헤파 필터 흡진기로 벽면, 천장 몰딩, 바닥의 시공 미세분진 및 부유 입자를 99.97% 1차 포집합니다.</p>
+                <p>벽면, 천장 몰딩, 바닥의 시공 잔여물을 확인하고 흡진 작업 여부를 기록합니다.</p>
               </div>
 
               <div class="protocol-card">
                 <div class="protocol-num">STEP 02</div>
-                <h3>160℃ 고온 스팀 살균</h3>
-                <p>배수구, 욕실 타일 틈새, 주방 후드 기름때를 화학 세제 없이 4.0bar 고온 증기로 녹여 살균합니다.</p>
+                <h3>스팀 장비 설정 확인</h3>
+                <p>배수구, 욕실 타일 틈새, 주방 후드처럼 확인이 필요한 면과 장비 설정을 작업표에 기록합니다.</p>
               </div>
 
               <div class="protocol-card">
                 <div class="protocol-num">STEP 03</div>
-                <h3>약알칼리 친환경 분해</h3>
-                <p>에코서트(ECOCERT) 인증 천연 식물성 세정제를 도포하여 자재 손상 없이 찌든 때를 안전하게 중화합니다.</p>
+                <h3>표면별 세정 확인</h3>
+                <p>표면 재질과 사용 제품 정보를 작업표에 기록하고, 적용 전후 상태를 함께 확인합니다.</p>
               </div>
 
               <div class="protocol-card">
                 <div class="protocol-num">STEP 04</div>
                 <h3>서랍·후드 전면 탈거 세척</h3>
-                <p>보이지 않는 싱크대 걸레받이, 전등갓, 수납장 서랍 레일을 전면 탈거하여 내측 분진을 완벽 제거합니다.</p>
+                <p>필요한 분리 작업의 범위와 접근 가능한 안쪽 면을 확인 항목으로 남깁니다.</p>
               </div>
 
               <div class="protocol-card">
                 <div class="protocol-num">STEP 05</div>
-                <h3>편백 피톤치드 연무 훈증</h3>
-                <p>순수 제주 편백 오일 연무로 벽지 속 새집증후군 원인 물질(포름알데히드, VOCs)을 중화하고 탈취합니다.</p>
+                <h3>환기와 마감 확인</h3>
+                <p>환기와 마감 상태를 확인하고, 사용한 향·마감 제품이 있다면 작업표에 표시합니다.</p>
               </div>
 
               <div class="protocol-card">
                 <div class="protocol-num">STEP 06</div>
                 <h3>32개 항목 마스터 검수</h3>
-                <p>현장 팀장과 고객이 함께 32개 체크리스트를 1:1 대조하고, 미흡 지점 발생 시 즉시 재케어 후 인도합니다.</p>
+                <p>현장 담당자와 의뢰자가 검수 항목을 함께 확인하는 흐름을 예시로 표시합니다.</p>
               </div>
             </div>
           </div>
@@ -309,27 +313,27 @@
         <section class="equipment-section" id="equipment" aria-labelledby="equipHeading">
           <div class="wrap">
             <div class="section-head">
-              <h2 id="equipHeading" class="section-title">전문 위생 장비 및 검수 스펙</h2>
-              <p class="section-sub">가정용 장비가 아닌 독일 카처 정품 산업용 위생 기기를 전 현장에 투입합니다.</p>
+              <h2 id="equipHeading" class="section-title">작업 장비와 검수 기록</h2>
+              <p class="section-sub">현장에서 확인할 장비·필터·제품·마감 항목을 작업표에 표시하는 예시입니다.</p>
             </div>
 
             <div class="equip-grid">
               <div class="equip-specs">
                 <div class="spec-item">
-                  <span class="spec-key">고온 스팀 압력</span>
-                  <span class="spec-val">Kärcher SG 4/4 (4.0 bar · 160℃)</span>
+                  <span class="spec-key">장비 기록</span>
+                  <span class="spec-val">사용 장비와 설정값을 작업표에 표시</span>
                 </div>
                 <div class="spec-item">
-                  <span class="spec-key">미세먼지 집진 등급</span>
-                  <span class="spec-val">HEPA H14 (0.3㎛ 99.995% 포집)</span>
+                  <span class="spec-key">필터 확인</span>
+                  <span class="spec-val">필터 종류와 교체 상태를 현장에서 확인</span>
                 </div>
                 <div class="spec-item">
-                  <span class="spec-key">사용 세제 인증</span>
-                  <span class="spec-val">ECOCERT 100% 생분해 식물성</span>
+                  <span class="spec-key">사용 제품</span>
+                  <span class="spec-val">제품명과 적용 표면을 작업표에 기록</span>
                 </div>
                 <div class="spec-item">
-                  <span class="spec-key">포름알데히드 저감</span>
-                  <span class="spec-val">한국화학융합시험연구원 인증 94.2%</span>
+                  <span class="spec-key">마감 확인</span>
+                  <span class="spec-val">환기·표면 상태를 검수 항목으로 확인</span>
                 </div>
               </div>
 
@@ -341,8 +345,8 @@
                   height="600"
                   loading="lazy"
                 />
-                <span class="ba-badge before">정밀 장비 규격</span>
-                <span class="ba-badge after">QC 완결 보증</span>
+                <span class="ba-badge before">작업 장비 예시</span>
+                <span class="ba-badge after">검수 항목 확인</span>
               </div>
             </div>
           </div>
@@ -350,16 +354,17 @@
       </div>
 
       <!-- ===================================================================
-           2. 관리자 관제 콘솔 모드 (Admin Dashboard Mockup)
+           2. 운영 현황 보기
            =================================================================== -->
-      <section class="admin-view wrap" aria-label="청온 케어 관리자 콘솔">
+      <section class="admin-view wrap" aria-label="청온 케어 운영 현황">
         <div class="admin-header">
           <div>
-            <div class="eyebrow" style="margin-bottom: 4px;">배차 관제 콘솔</div>
-            <h2 style="font-size: var(--step-2); font-weight: 800;">실시간 배차 및 현장 관제 현황</h2>
+            <div class="eyebrow" style="margin-bottom: 4px;">운영 현황</div>
+            <h2 style="font-size: var(--step-2); font-weight: 800;">오늘의 케어 현황</h2>
+            <p class="demo-notice" role="note">아래 접수·배차 정보는 운영 화면 예시입니다. 실제 고객 정보나 접수 내역이 아닙니다.</p>
           </div>
           <button type="button" class="btn-primary" id="btnOpenQcModal">
-            32개 현장 검수표 열기
+            32개 검수 항목 보기
           </button>
         </div>
 
@@ -386,7 +391,7 @@
         <!-- 실시간 접수 및 배차 원장 테이블 -->
         <div class="admin-table-card">
           <div class="table-header">
-            <span class="table-title">실시간 예약 및 케어 원장 (Live Ledger)</span>
+            <span class="table-title">접수·배차 현황</span>
             <div class="table-filter-tabs">
               <button class="filter-tab is-active" data-filter="all">전체</button>
               <button class="filter-tab" data-filter="new">신규접수</button>
@@ -399,14 +404,14 @@
             <table class="admin-table">
               <thead>
                 <tr>
-                  <th>접수번호</th>
-                  <th>고객명 / 연락처</th>
-                  <th>공간 / 면적</th>
-                  <th>현장 주소</th>
-                  <th>견적액</th>
-                  <th>배정 팀장</th>
-                  <th>상태</th>
-                  <th>조치</th>
+                  <th scope="col">접수번호</th>
+                  <th scope="col">고객명 / 연락처</th>
+                  <th scope="col">공간 / 면적</th>
+                  <th scope="col">현장 주소</th>
+                  <th scope="col">견적액</th>
+                  <th scope="col">배정 팀장</th>
+                  <th scope="col">상태</th>
+                  <th scope="col">조치</th>
                 </tr>
               </thead>
               <tbody id="adminTableBody">
@@ -418,7 +423,7 @@
                   <td class="mono" style="font-weight:700;">432,000원</td>
                   <td>김정온 마스터</td>
                   <td><span class="status-pill new">신규 접수</span></td>
-                  <td><button class="action-btn" onclick="alert('배차 확인 알림톡이 고객님께 전송되었습니다.');">배차 확정</button></td>
+                  <td><button class="action-btn" onclick="alert('배차 상태를 확인했습니다. 이 화면의 접수 정보는 예시이며 실제 알림은 전송되지 않습니다.');">배차 상태 보기</button></td>
                 </tr>
                 <tr>
                   <td class="mono">#CO-2026-0818</td>
@@ -428,7 +433,7 @@
                   <td class="mono" style="font-weight:700;">520,000원</td>
                   <td>박준호 팀장 (2팀)</td>
                   <td><span class="status-pill progress">스팀 케어 중</span></td>
-                  <td><button class="action-btn" onclick="document.getElementById('qcModal').showModal();">실시간 검수</button></td>
+                  <td><button class="action-btn" onclick="document.getElementById('qcModal').showModal();">검수 항목 보기</button></td>
                 </tr>
                 <tr>
                   <td class="mono">#CO-2026-0817</td>
@@ -438,7 +443,7 @@
                   <td class="mono" style="font-weight:700;">841,000원</td>
                   <td>최수진 닥터 (1팀)</td>
                   <td><span class="status-pill done">검수 승인 완료</span></td>
-                  <td><button class="action-btn" onclick="alert('완료 검수 리포트가 PDF로 발행되었습니다.');">리포트 다운</button></td>
+                  <td><button class="action-btn" onclick="alert('검수 리포트 내용을 확인했습니다. 실제 발행은 진행되지 않습니다.');">리포트 보기</button></td>
                 </tr>
               </tbody>
             </table>
@@ -458,23 +463,22 @@
         <li class="qc-item"><input type="checkbox" checked /> <span>02. 창틀 상하좌우 틈새 시멘트 가루 및 찌든때 제거</span></li>
         <li class="qc-item"><input type="checkbox" checked /> <span>03. 싱크대 하부 걸레받이 전면 탈거 및 분진 집진</span></li>
         <li class="qc-item"><input type="checkbox" checked /> <span>04. 가스레인지/인덕션 상판 및 후드 필터 기름때 고온 스팀 분해</span></li>
-        <li class="qc-item"><input type="checkbox" checked /> <span>05. 욕실 벽타일 메지 및 배수구 트랩 고온 살균 세척</span></li>
+        <li class="qc-item"><input type="checkbox" checked /> <span>05. 욕실 벽타일 메지 및 배수구 트랩 스팀 작업 확인</span></li>
         <li class="qc-item"><input type="checkbox" checked /> <span>06. 수납장 모든 서랍 완전 탈거 후 레일 틈새 분진 청소</span></li>
-        <li class="qc-item"><input type="checkbox" checked /> <span>07. 베란다 및 다용도실 바닥 타일 약알칼리 세정</span></li>
-        <li class="qc-item"><input type="checkbox" /> <span>08. 전 실 편백 피톤치드 훈증 및 공기질 측정기 수치 확인</span></li>
+        <li class="qc-item"><input type="checkbox" checked /> <span>07. 베란다 및 다용도실 바닥 타일 세정 작업 확인</span></li>
+        <li class="qc-item"><input type="checkbox" /> <span>08. 전 실 환기와 마감 상태 확인</span></li>
       </ul>
       <div style="display: flex; justify-content: flex-end; gap: 8px;">
         <button type="button" class="action-btn" onclick="document.getElementById('qcModal').close();">닫기</button>
-        <button type="button" class="btn-primary" style="padding: 6px 14px; font-size: 13px;" onclick="alert('검수 승인이 완료되었습니다.'); document.getElementById('qcModal').close();">최종 검수 서명 승인</button>
+        <button type="button" class="btn-primary" style="padding: 6px 14px; font-size: 13px;" onclick="alert('검수 항목을 확인했습니다. 이 화면에서 실제 승인 처리는 진행되지 않습니다.'); document.getElementById('qcModal').close();">검수 항목 확인</button>
       </div>
     </dialog>
 
     <!-- 푸터 (.site-foot SSOT) -->
     <footer class="site-foot">
       <div class="wrap foot-inner">
-        <p>청온 케어 · 서울 마포구 마포대로 109 청온랩 4층</p>
-        <p class="muted">연중무휴 08:00 – 20:00 (사전 예약제)</p>
-        <p class="muted">care@cheongon.kr</p>
+        <p>청온 케어 · 위생 케어 안내</p>
+        <p class="muted">이 페이지의 가격·접수 정보는 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
       </div>
     </footer>
 
@@ -569,9 +573,9 @@
         let submissionCount = 6;
 
         btnSubmit.addEventListener("click", () => {
-          const name = document.getElementById("clientName").value || "고객님";
-          const phone = document.getElementById("clientPhone").value || "010-0000-0000";
-          const address = document.getElementById("clientAddress").value || "서울시 현장 주소";
+          const name = document.getElementById("clientName").value || "이름 미입력";
+          const phone = document.getElementById("clientPhone").value || "입력 없음";
+          const address = document.getElementById("clientAddress").value || "입력 없음";
           const pyeong = pyeongSlider.value;
           const totalStr = sumTotal.textContent;
 
@@ -593,7 +597,7 @@
           `;
           tableBody.insertBefore(newRow, tableBody.firstChild);
 
-          alert(`[청온 케어] ${name}님의 견적(${totalStr}) 신청이 성공적으로 접수되었습니다.\n관리자 콘솔에 실시간 등록되었습니다.`);
+          alert(`${name}님의 예상 견적은 ${totalStr}입니다.\n실제 견적·신청은 진행되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.`);
         });
 
         // 모달 열기

apps/site/public/work/cheongon-care/protocol/index.html

@@ -3,16 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>임상 6단계 위생 프로토콜 & 한남 케이스 리포트 — 청온 케어</title>
-    <meta name="description" content="청온 케어의 병원급 6단계 정밀 위생 프로토콜 및 ATP 생체 오염도 측정 검증 리포트. 나인원한남 86평형 준공 청소 케이스 스터디 및 32개 정밀 QC 체크리스트." />
+    <title>6단계 위생 케어 절차 · 예시 리포트 — 청온 케어</title>
+    <meta name="description" content="청온 케어의 현장 검수 절차와 기록 표시 방식을 소개합니다. 아래 사례와 값은 예시입니다." />
     
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
-    />
+    <link rel="stylesheet" href="../styles/fonts.css?v=20260912all" />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
@@ -21,8 +18,9 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
     />
-    <link rel="stylesheet" href="../styles/tokens.css" />
-    <link rel="stylesheet" href="../styles/main.css" />
+    <link rel="stylesheet" href="../styles/tokens.css?v=20260912all" />
+    <link rel="stylesheet" href="../styles/main.css?v=20260912all" />
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%230D9488'/%3E%3Cpath d='M9 16.5l5 5 9-10' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E" />
     <style>
       .breadcrumb-bar {
         padding-top: var(--space-4);
@@ -96,7 +94,7 @@
         font-weight: 800;
       }
       .atp-val.before {
-        color: #ef4444;
+        color: #b91c1c;
       }
       .atp-val.after {
         color: var(--accent);
@@ -127,6 +125,7 @@
     </style>
   </head>
   <body>
+    <a class="skip-link" href="#main-content">본문으로 건너뛰기</a>
     <!-- Top Nav (GNB SSOT) -->
     <header class="site-head">
       <div class="wrap head-inner">
@@ -153,28 +152,29 @@
           <div class="breadcrumb-bar" style="margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em;">
             <a href="../index.html">CHEONG-ON CARE</a>
             <span class="sep">/</span>
-            <span class="current" style="color: var(--ink); font-weight: 600;">CLINICAL HYGIENE PROTOCOL &amp; CASE STUDY</span>
+            <span class="current" style="color: var(--ink); font-weight: 600;">CARE CHECKLIST &amp; CASE EXAMPLE</span>
           </div>
 
           <div class="protocol-hero-head">
-            <p class="hero-label">HOSPITAL-GRADE SANITATION STANDARDS</p>
-            <h1 class="hero-title" style="margin-bottom: var(--space-2);">단순한 청소를 넘어<br /><span style="color: var(--accent);">병원급 6단계 임상 위생 프로토콜</span></h1>
+            <p class="hero-label">CARE CHECKLIST EXAMPLE</p>
+            <h1 class="hero-title" style="margin-bottom: var(--space-2);"><span style="color: var(--accent);">6단계 위생 케어 절차</span></h1>
             <p class="hero-lead" style="font-size: var(--step-0); color: var(--ink-muted); max-width: var(--measure); margin-bottom: var(--space-5);">
-              독일 카처 산업용 스팀과 H14 헤파 필터 흡진, ATP 생체 오염도 계측을 통해 인체에 무해한 안심 공간을 과학적으로 보증합니다.
+              현장 장비, 필터, 표면, 마감 상태를 작업표에 기록하는 절차와 확인 항목을 소개합니다.
             </p>
+            <p class="demo-notice" role="note">안내: 아래 절차와 측정 수치는 예시입니다. 실제 시공 결과를 보장하거나 예약을 접수하지 않습니다.</p>
 
             <dl class="protocol-specs" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6);">
               <div>
                 <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Steam Temp</dt>
-                <dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">160℃ High-Temp</dd>
+                <dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">현장 장비 설정 기록</dd>
               </div>
               <div>
                 <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Filtration</dt>
-                <dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">0.3㎛ HEPA H14 (99.995%)</dd>
+                <dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">필터 종류·상태 확인</dd>
               </div>
               <div>
                 <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Detergent</dt>
-                <dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">ECOCERT 100% 식물성</dd>
+                <dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">사용 제품·표면 기록</dd>
               </div>
               <div>
                 <dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">QC Points</dt>
@@ -186,49 +186,48 @@
           <figure class="hero-photo" style="border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-card);">
             <img
               src="../assets/clean-hero.webp"
-              alt="완벽하게 정돈되고 살균된 프리미엄 주거 인테리어 공간"
+              alt="정돈된 주거 공간의 실내 전경"
               width="1600"
               height="900"
               style="width: 100%; aspect-ratio: 16/9; object-fit: cover;"
             />
             <figcaption style="padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--line); background: var(--surface-raised);">
-              나인원한남 86평형 · 6단계 정밀 프로토콜 시공 완료
+              주거 공간 · 6단계 절차 예시
             </figcaption>
           </figure>
         </div>
       </section>
 
-      <!-- ATP Measurement Case Report -->
+      <!-- Inspection Record Layout -->
       <section class="wrap" style="padding-bottom: var(--space-8);">
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-8); align-items: center;">
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-8); align-items: center;">
           <div class="frame">
             <img
               src="../assets/atp-tester.webp"
-              alt="ATP 생체 오염도 측정기 계측 화면 (12 RLU)"
+              alt="검수 기록에 사용하는 계측 장비 화면 예시"
               style="width: 100%; display: block;"
             />
           </div>
           <div style="display: flex; flex-direction: column; gap: var(--space-4);">
-            <div class="eyebrow">ATP 데이터 검증</div>
+            <div class="eyebrow">검수 기록 표시 예시</div>
             <h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
-              나인원한남 86평형<br />
-              <span style="color: var(--accent);">ATP 생체 오염도 99.1% 저감 리포트</span>
+              주거 공간 예시<br />
+              <span style="color: var(--accent);">점검값 기록 방식</span>
             </h2>
             <p style="font-size: var(--step--1); color: var(--ink-muted); line-height: 1.7;">
-              실제 한남동 나인원한남 입주 청소 현장에서 주방 싱크대 상판 및 욕실 수전 부위의 미생물 오염도(ATP RLU)를 측정한 결과입니다.
-              160℃ 고온 스팀과 에코서트 효소 분해 세정 후 병원 무균실 기준(30 RLU 이하)을 상회하는 12 RLU 수준으로 완벽하게 저감되었습니다.
+              아래 값은 점검 기록이 표시되는 방식을 설명하기 위한 예시입니다. 실제 현장 측정값이나 시공 결과를 뜻하지 않습니다.
             </p>
 
             <div class="atp-compare-box">
               <div>
-                <div style="font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); margin-bottom: 4px;">시공 전 (BEFORE)</div>
-                <div class="atp-val before">1,420 <span style="font-size: 14px;">RLU</span></div>
-                <div style="font-size: 12px; color: #ef4444; margin-top: 4px;">심각한 미세 세균 번식</div>
+                <div style="font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); margin-bottom: 4px;">점검 전 기록</div>
+                <div class="atp-val before">기록값 A</div>
+                <div style="font-size: 12px; color: #b91c1c; margin-top: 4px;">확인할 항목 표시 예시</div>
               </div>
               <div style="border-left: 1px solid var(--line);">
-                <div style="font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); margin-bottom: 4px;">시공 후 (AFTER)</div>
-                <div class="atp-val after">12 <span style="font-size: 14px;">RLU</span></div>
-                <div style="font-size: 12px; color: var(--accent); margin-top: 4px;">병원 수술실 기준 패스 (99.1% 저감)</div>
+                <div style="font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); margin-bottom: 4px;">점검 후 기록</div>
+                <div class="atp-val after">기록값 B</div>
+                <div style="font-size: 12px; color: var(--accent); margin-top: 4px;">확인 완료 표시 예시</div>
               </div>
             </div>
           </div>
@@ -239,16 +238,16 @@
       <section class="wrap" style="padding-bottom: var(--space-8);">
         <div class="eyebrow" style="text-align: center;">단계별 시공 절차</div>
         <h2 style="font-size: var(--step-3); font-weight: 800; text-align: center; margin-top: 6px;">
-          청온 케어 임상 6단계 시공 체계
+          청온 케어 6단계 검수 절차 예시
         </h2>
 
         <div class="step-deep-list">
           <div class="step-deep-item">
             <div style="font-family: var(--font-mono); font-size: var(--step-2); font-weight: 800; color: var(--accent);">STEP 01</div>
             <div>
-              <h3 style="font-size: var(--step-1); font-weight: 700;">H14 헤파 필터 건식 초미세 흡진</h3>
+              <h3 style="font-size: var(--step-1); font-weight: 700;">필터 흡진 작업 확인</h3>
               <p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
-                벽면 실크벽지 미세 분진, 천장 우물 몰딩, 조명 레일 내부의 0.3㎛ 부유 입자를 99.995% 집진하여 공기 중 재비산을 완벽 차단합니다.
+                벽면, 천장 몰딩, 조명 레일의 작업 범위를 확인하고 흡진 작업 여부를 작업표에 기록합니다.
               </p>
             </div>
           </div>
@@ -256,9 +255,9 @@
           <div class="step-deep-item">
             <div style="font-family: var(--font-mono); font-size: var(--step-2); font-weight: 800; color: var(--accent);">STEP 02</div>
             <div>
-              <h3 style="font-size: var(--step-1); font-weight: 700;">160℃ 4.0bar 고온 스팀 살균</h3>
+              <h3 style="font-size: var(--step-1); font-weight: 700;">스팀 장비 설정 확인</h3>
               <p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
-                배수구 유가, 변기 틈새, 주방 후드 필터에 화학 세제 없이 4.0bar 고압 증기를 분사하여 기름때를 녹이고 99.9% 멸균합니다.
+                배수구, 욕실 틈새, 주방 후드처럼 확인이 필요한 면을 구분하고 사용 장비 설정을 남깁니다.
               </p>
             </div>
           </div>
@@ -266,9 +265,9 @@
           <div class="step-deep-item">
             <div style="font-family: var(--font-mono); font-size: var(--step-2); font-weight: 800; color: var(--accent);">STEP 03</div>
             <div>
-              <h3 style="font-size: var(--step-1); font-weight: 700;">약알칼리 에코서트 친환경 효소 분해</h3>
+              <h3 style="font-size: var(--step-1); font-weight: 700;">표면별 세정 확인</h3>
               <p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
-                원목 마루 및 천연 대리석 자재에 손상을 주지 않는 100% 생분해성 식물 세정제를 도포하여 찌든 산화 피막을 안전하게 중화합니다.
+                바닥과 석재의 재질을 확인한 뒤 사용 제품과 적용 범위를 작업표에 표시합니다.
               </p>
             </div>
           </div>
@@ -278,7 +277,7 @@
             <div>
               <h3 style="font-size: var(--step-1); font-weight: 700;">서랍장·걸레받이 전면 탈거 정밀 세척</h3>
               <p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
-                싱크대 하부 걸레받이와 수납장 레일을 전량 분리 탈거하여, 보이지 않는 시공 톱밥 및 유해 분진을 내측까지 완전 제거합니다.
+                싱크대 하부와 수납장 레일의 접근 가능 여부를 확인하고, 분리 작업 범위를 기록합니다.
               </p>
             </div>
           </div>
@@ -286,9 +285,9 @@
           <div class="step-deep-item">
             <div style="font-family: var(--font-mono); font-size: var(--step-2); font-weight: 800; color: var(--accent);">STEP 05</div>
             <div>
-              <h3 style="font-size: var(--step-1); font-weight: 700;">제주 편백 피톤치드 연무 훈증</h3>
+              <h3 style="font-size: var(--step-1); font-weight: 700;">환기와 마감 확인</h3>
               <p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
-                새집증후군 유발 물질인 포름알데히드 및 휘발성유기화합물(VOCs)을 중화하고 실내 숲속 공기질을 복원합니다.
+                환기와 마감 상태를 확인하고, 향·마감 제품을 사용했다면 제품명과 적용 범위를 기록합니다.
               </p>
             </div>
           </div>
@@ -296,9 +295,9 @@
           <div class="step-deep-item">
             <div style="font-family: var(--font-mono); font-size: var(--step-2); font-weight: 800; color: var(--accent);">STEP 06</div>
             <div>
-              <h3 style="font-size: var(--step-1); font-weight: 700;">32개 항목 마스터 닥터 1:1 검수 및 디지털 인증</h3>
+              <h3 style="font-size: var(--step-1); font-weight: 700;">32개 항목 현장 검수 확인</h3>
               <p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
-                배차 현장 팀장과 고객이 함께 32개 정밀 체크리스트를 1:1 대조하고, 모바일 리포트를 발행하여 최종 승인합니다.
+                현장 담당자와 의뢰자가 32개 체크리스트를 함께 확인하는 흐름을 예시로 표시합니다.
               </p>
             </div>
           </div>
@@ -310,7 +309,7 @@
         <div class="frame">
           <img
             src="../assets/steam-qc.webp"
-            alt="독일 카처 4.0bar 정밀 스팀 위생 장비와 멸균 키트"
+            alt="작업 장비와 검수 키트를 보여 주는 예시 이미지"
             style="width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover;"
           />
         </div>
@@ -324,10 +323,10 @@
             우리 집 공간의 정찰제 견적을 확인하세요
           </h2>
           <p style="font-size: var(--step--1); color: var(--ink-muted); margin: 12px 0 24px;">
-            추가금 없는 평당 11,000원 명확한 기준. 1분 만에 실시간 견적 산출이 가능합니다.
+            선택 항목을 기준으로 예상 금액을 확인할 수 있습니다. 실제 견적이나 신청은 진행되지 않습니다.
           </p>
-          <a href="../index.html#quote" class="btn-primary" style="display: inline-block; padding: 14px 28px; text-decoration: none; font-size: var(--step-0);">
-            실시간 정찰제 견적 계산하기 →
+            <a href="../index.html#calculator" class="btn-primary" style="display: inline-block; padding: 14px 28px; text-decoration: none; font-size: var(--step-0);">
+            항목별 예상 견적 보기 →
           </a>
         </div>
       </section>
@@ -336,9 +335,8 @@
     <!-- 푸터 (.site-foot SSOT) -->
     <footer class="site-foot">
       <div class="wrap foot-inner">
-        <p>청온 케어 · 서울 마포구 마포대로 109 청온랩 4층</p>
-        <p class="muted">연중무휴 08:00 – 20:00 (사전 예약제)</p>
-        <p class="muted">care@cheongon.kr</p>
+        <p>청온 케어 · 위생 케어 안내</p>
+        <p class="muted">이 페이지의 절차와 수치는 예시이며 실제 예약은 접수되지 않습니다.</p>
       </div>
     </footer>
   </body>

apps/site/public/work/cheongon-care/styles/fonts.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: "MaruBuri";
+  src: url("../assets/fonts/MaruBuri-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "MaruBuri";
+  src: url("../assets/fonts/MaruBuri-SemiBold.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+}

apps/site/public/work/cheongon-care/styles/main.css

@@ -1,4 +1,4 @@
-@import "./tokens.css";
+@import "./tokens.css?v=20260912all";
 
 /* ==========================================================================
    청온 케어 (CHEONG-ON CARE) — 메인 스타일시트 SSOT
@@ -193,7 +193,7 @@ button {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  transition: all var(--dur-quick);
+  transition: background-color var(--dur-quick), color var(--dur-quick), box-shadow var(--dur-quick);
   white-space: nowrap;
 }
 
@@ -296,7 +296,7 @@ button {
 
 .hero-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
   gap: var(--space-7);
   align-items: center;
 }
@@ -351,41 +351,20 @@ button {
   position: relative;
 }
 
-.bezel-outer {
-  background: rgba(15, 118, 110, 0.05);
-  border: 1px solid var(--line);
-  padding: 6px;
-  border-radius: var(--radius-md);
-}
-
 .hero-frame {
-  border-radius: calc(var(--radius-md) - 4px);
-  overflow: hidden;
+  margin: 0;
   border: 1px solid var(--line);
-  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.08);
   background: #ffffff;
 }
 
 .hero-frame img {
   width: 100%;
-  aspect-ratio: 4/3;
+  aspect-ratio: 5/4;
   object-fit: cover;
   display: block;
 }
 
-.hero-stat-floating {
-  position: absolute;
-  bottom: -14px;
-  left: 16px;
-  background: var(--surface-raised);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-sm);
-  padding: 8px 14px;
-  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
-  display: flex;
-  align-items: baseline;
-  gap: var(--space-2);
-}
+.hero-frame figcaption { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: var(--step--1); line-height: 1.55; }
 
 /* ── 투명 정찰제 실시간 견적 산정 섹션 ── */
 .calculator-section {
@@ -393,10 +372,10 @@ button {
   border-top: 1px solid var(--line);
 }
 
-.section-head {
-  text-align: center;
-  max-width: 680px;
-  margin-inline: auto;
+.calc-section .section-head {
+  text-align: left;
+  max-width: 48rem;
+  margin-inline: 0;
   margin-bottom: var(--space-6);
 }
 
@@ -463,7 +442,7 @@ button {
   font-weight: 600;
   font-size: var(--step--1);
   text-align: center;
-  transition: all var(--dur-quick);
+  transition: background-color var(--dur-quick), border-color var(--dur-quick), color var(--dur-quick);
   white-space: normal;
   word-break: keep-all;
 }
@@ -513,7 +492,7 @@ button {
   font-size: var(--step--1);
   color: var(--ink-muted);
   cursor: pointer;
-  transition: all var(--dur-quick);
+  transition: background-color var(--dur-quick), border-color var(--dur-quick), color var(--dur-quick);
 }
 
 .addon-label:has(input:checked) {
@@ -850,7 +829,7 @@ button {
   font-weight: 600;
   background: var(--surface);
   cursor: pointer;
-  transition: all var(--dur-quick);
+  transition: border-color var(--dur-quick), color var(--dur-quick);
 }
 
 .action-btn:hover {
@@ -864,10 +843,13 @@ button {
   inset: 0;
   margin: auto;
   width: min(90vw, 560px);
+  max-height: calc(100dvh - (var(--space-4) * 2));
   background: #ffffff;
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
   padding: var(--space-5);
+  overflow: auto;
+  overscroll-behavior: contain;
   box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
   outline: none;
 }
@@ -923,3 +905,75 @@ button {
     font-size: 11px;
   }
 }
+
+html:has(dialog[open]) {
+  overflow: hidden;
+}
+
+/* 접근성·초광폭 프리플라이트: 컨트롤의 독립성과 실제 표면 여백을 같은 토큰으로 유지한다. */
+:where(a, button, input, select, textarea):focus-visible {
+  outline: 3px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.btn-primary,
+.btn-outline,
+.calc-submit,
+.type-btn,
+.addon-label,
+.action-btn,
+.filter-tab,
+.mode-btn,
+.head-actions .btn,
+input:not([type="checkbox"]),
+select,
+textarea {
+  min-height: var(--control-block);
+}
+
+.btn-primary,
+.btn-outline,
+.calc-submit,
+.type-btn,
+.addon-label,
+.action-btn,
+.filter-tab,
+.mode-btn,
+.head-actions .btn {
+  padding-inline: var(--control-pad-inline);
+}
+
+.form-label + input,
+.form-label + select,
+.form-label + textarea {
+  padding-inline: var(--control-pad-inline);
+}
+
+.demo-notice {
+  max-width: 58ch;
+  margin-top: var(--space-4);
+  padding: var(--space-3) var(--space-4);
+  border-left: 3px solid var(--accent);
+  background: var(--accent-light);
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+  line-height: 1.55;
+  word-break: keep-all;
+}
+
+@media (max-width: 600px) {
+  .head-actions .client-only-btn { display: none; }
+  .hero-ctas { align-items: stretch; }
+  .hero-ctas .btn-primary { width: 100%; }
+  .hero-title { font-size: clamp(1.65rem, 7.8vw, 2.15rem); }
+  .hero-trust { align-items: flex-start; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 1ms !important;
+  }
+}

apps/site/public/work/cheongon-care/styles/tokens.css

@@ -1,7 +1,7 @@
 /* ==========================================================================
    청온 케어 (CHEONG-ON CARE) — 디자인 토큰 SSOT
    프리셋: ledger-console + swiss-minimal
-   컨셉: 임상 수준의 위생 프로토콜과 정직한 정찰제 — 공간의 숨결을 되돌리는 케어
+   컨셉: 현장 검수 절차와 정직한 정찰제 — 공간의 상태를 기록하는 케어
    단일 강조색: 에메랄드 틸 (#0D9488)
    ========================================================================== */
 
@@ -42,8 +42,8 @@
   --line-inverse: #334155;
 
   /* 단일 강조색 (에메랄드 틸) */
-  --accent: #0d9488;
-  --accent-hover: #0f766e;
+  --accent: #0f766e;
+  --accent-hover: #115e59;
   --accent-light: #f0fdfa;
   --accent-surface: #ccfbf1;
   --accent-ink: #ffffff;
@@ -63,8 +63,10 @@
   --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
 
   /* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
-  --container: 1120px;
+  --container: clamp(70rem, 62vw, 85rem);
   --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+  --control-block: 2.75rem;
+  --control-pad-inline: 0.875rem;
 
   /* 모션 */
   --dur-quick: 180ms;