release: v0.9.1 (신규 쇼케이스 3종 정식 출시, CSS 변수 및 경로 무결성 게이트 강화)
Some checks failed
ci / build (push) Failing after 37s
release / release (push) Successful in 1m30s

This commit is contained in:
Yun Chan 2026-08-23 23:17:55 +09:00
parent e26b00a825
commit 225c1d9f42
75 changed files with 7406 additions and 224 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

View file

@ -0,0 +1,608 @@
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>청온 케어 (淸溫) · 프리미엄 주거·오피스 전문 위생 케어 & 관제 콘솔</title>
<meta
name="description"
content="임상 수준의 6단계 위생 프로토콜과 100% 정찰제 견적. 독일 카처 4.0bar 고온스팀과 에코서트 인증 천연 세제. 실시간 견적 신청 및 관제 콘솔 지원."
/>
<meta property="og:title" content="청온 케어 (淸溫) · 프리미엄 위생 케어" />
<meta property="og:description" content="공간의 숨결을 되돌리는 6단계 프로토콜과 투명한 정찰제 견적." />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#f8faf9" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=1" />
<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"
/>
</head>
<body data-view="client">
<a class="skip-link" href="#mainContent">본문으로 건너뛰기</a>
<!-- 최상단 헤더 (.site-head SSOT) -->
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#" id="brandLogo">
<span class="wordmark-badge">淸</span>
청온 케어 <span class="wordmark-han">淸溫</span>
</a>
<nav class="nav" aria-label="메인 메뉴">
<a href="#services">케어 솔루션</a>
<a href="#calculator">정찰제 견적</a>
<a href="./protocol/index.html" style="color: var(--accent); font-weight: 600;">6단계 프로토콜 (상세)</a>
<a href="#equipment">전문 장비</a>
</nav>
<div class="head-actions">
<div class="mode-toggle" role="group" aria-label="뷰 모드 전환">
<button type="button" class="mode-btn is-active" id="btnModeClient">
고객 소개 뷰
</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">
간편 견적
</a>
</div>
</div>
</header>
<main id="mainContent">
<!-- ===================================================================
1. 고객 소개 및 간편 신청 뷰 (Client View)
=================================================================== -->
<div class="client-view">
<!-- 히어로 섹션 -->
<section class="hero-section" aria-labelledby="heroHeading">
<div class="wrap hero-grid">
<div class="hero-content">
<div class="eyebrow">
<span>HOSPITAL-GRADE HYGIENE PROTOCOL</span>
</div>
<h1 id="heroHeading" class="hero-title">
보이지 않는 미세 오염까지,<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>
</div>
</div>
</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>
</div>
</div>
</section>
<!-- 실시간 정찰제 견적 계산기 -->
<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>
</div>
<div class="calc-grid">
<div class="calc-card">
<form id="quoteForm" onsubmit="return false;">
<!-- 공간 유형 -->
<div class="form-group">
<label class="form-label" id="spaceTypeLabel">공간 유형 선택</label>
<div class="type-selector" role="radiogroup" aria-labelledby="spaceTypeLabel">
<button type="button" class="type-btn is-active" data-type="apt" data-base="11000">
주거 입주/이사
</button>
<button type="button" class="type-btn" data-type="office" data-base="9500">
오피스 정기 케어
</button>
<button type="button" class="type-btn" data-type="premium" data-base="14500">
하이엔드 준공 청소
</button>
</div>
</div>
<!-- 평수 슬라이더 -->
<div class="form-group">
<div class="slider-header">
<label class="form-label" for="pyeongSlider">공간 공급면적 (평형)</label>
<span class="slider-val" id="pyeongValue">32 평 (약 105㎡)</span>
</div>
<input
type="range"
id="pyeongSlider"
class="range-input"
min="12"
max="75"
value="32"
step="1"
/>
</div>
<!-- 특수 케어 옵션 -->
<div class="form-group">
<span class="form-label">정밀 특수 옵션</span>
<div class="addon-grid">
<label class="addon-label">
<input type="checkbox" name="addon" value="steam" data-price="45000" checked />
<span>160℃ 고온 살균 스팀 (+45,000원)</span>
</label>
<label class="addon-label">
<input type="checkbox" name="addon" value="phytoncide" data-price="35000" checked />
<span>편백 피톤치드 훈증 (+35,000원)</span>
</label>
<label class="addon-label">
<input type="checkbox" name="addon" value="aircon" data-price="80000" />
<span>시스템 에어컨 분해 (+80,000원)</span>
</label>
<label class="addon-label">
<input type="checkbox" name="addon" value="glass" data-price="50000" />
<span>외부 유리창 특수 발수 (+50,000원)</span>
</label>
</div>
</div>
<!-- 예약 정보 입력 -->
<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;">
<input
type="text"
id="clientName"
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
/>
<input
type="tel"
id="clientPhone"
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>
<input
type="text"
id="clientAddress"
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>
</form>
</div>
<!-- 요약 및 접수 CTA -->
<div class="calc-summary">
<h3 class="summary-title">실시간 견적 명세서</h3>
<div class="summary-row">
<span>선택 공간</span>
<span id="sumSpaceType" class="mono">주거 입주/이사</span>
</div>
<div class="summary-row">
<span>면적 기준</span>
<span id="sumPyeong" class="mono">32평 (평당 11,000원)</span>
</div>
<div class="summary-row">
<span>기본 케어비</span>
<span id="sumBasePrice" class="mono">352,000원</span>
</div>
<div class="summary-row">
<span>정밀 옵션 합계</span>
<span id="sumAddonPrice" class="mono">80,000원</span>
</div>
<div class="summary-total">
<span>총 예상 견적</span>
<span class="total-amount" id="sumTotal">432,000원</span>
</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>
</div>
</div>
</div>
</section>
<!-- 6단계 위생 프로토콜 -->
<section class="protocol-section" id="protocol" aria-labelledby="protoHeading">
<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>
</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>
<div class="protocol-grid">
<div class="protocol-card">
<div class="protocol-num">STEP 01</div>
<h3>건식 초미세 집진</h3>
<p>H14 헤파 필터 흡진기로 벽면, 천장 몰딩, 바닥의 시공 미세분진 및 부유 입자를 99.97% 1차 포집합니다.</p>
</div>
<div class="protocol-card">
<div class="protocol-num">STEP 02</div>
<h3>160℃ 고온 스팀 살균</h3>
<p>배수구, 욕실 타일 틈새, 주방 후드 기름때를 화학 세제 없이 4.0bar 고온 증기로 녹여 살균합니다.</p>
</div>
<div class="protocol-card">
<div class="protocol-num">STEP 03</div>
<h3>약알칼리 친환경 분해</h3>
<p>에코서트(ECOCERT) 인증 천연 식물성 세정제를 도포하여 자재 손상 없이 찌든 때를 안전하게 중화합니다.</p>
</div>
<div class="protocol-card">
<div class="protocol-num">STEP 04</div>
<h3>서랍·후드 전면 탈거 세척</h3>
<p>보이지 않는 싱크대 걸레받이, 전등갓, 수납장 서랍 레일을 전면 탈거하여 내측 분진을 완벽 제거합니다.</p>
</div>
<div class="protocol-card">
<div class="protocol-num">STEP 05</div>
<h3>편백 피톤치드 연무 훈증</h3>
<p>순수 제주 편백 오일 연무로 벽지 속 새집증후군 원인 물질(포름알데히드, VOCs)을 중화하고 탈취합니다.</p>
</div>
<div class="protocol-card">
<div class="protocol-num">STEP 06</div>
<h3>32개 항목 마스터 검수</h3>
<p>현장 팀장과 고객이 함께 32개 체크리스트를 1:1 대조하고, 미흡 지점 발생 시 즉시 재케어 후 인도합니다.</p>
</div>
</div>
</div>
</section>
<!-- 전문 장비 & Before/After -->
<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>
</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>
</div>
<div class="spec-item">
<span class="spec-key">미세먼지 집진 등급</span>
<span class="spec-val">HEPA H14 (0.3㎛ 99.995% 포집)</span>
</div>
<div class="spec-item">
<span class="spec-key">사용 세제 인증</span>
<span class="spec-val">ECOCERT 100% 생분해 식물성</span>
</div>
<div class="spec-item">
<span class="spec-key">포름알데히드 저감</span>
<span class="spec-val">한국화학융합시험연구원 인증 94.2%</span>
</div>
</div>
<div class="ba-container">
<img
src="./assets/steam-qc.webp"
alt="청온 케어 마스터 위생 장비와 정밀 세척 노즐"
width="800"
height="600"
loading="lazy"
/>
<span class="ba-badge before">정밀 장비 규격</span>
<span class="ba-badge after">QC 완결 보증</span>
</div>
</div>
</div>
</section>
</div>
<!-- ===================================================================
2. 관리자 관제 콘솔 모드 (Admin Dashboard Mockup)
=================================================================== -->
<section class="admin-view wrap" aria-label="청온 케어 관리자 콘솔">
<div class="admin-header">
<div>
<div class="eyebrow" style="margin-bottom: 4px;">OPERATIONAL CONTROL CENTER</div>
<h2 style="font-size: var(--step-2); font-weight: 800;">실시간 배차 및 현장 관제 현황</h2>
</div>
<button type="button" class="btn-primary" id="btnOpenQcModal">
32개 현장 검수표 열기
</button>
</div>
<!-- KPI 통계 카드 -->
<div class="admin-kpis">
<div class="kpi-card">
<div class="kpi-label">오늘 신규 접수</div>
<div class="kpi-val accent" id="kpiNewCount">6건</div>
</div>
<div class="kpi-card">
<div class="kpi-label">현재 현장 진행 중</div>
<div class="kpi-val">4개 조</div>
</div>
<div class="kpi-card">
<div class="kpi-label">검수 대기 / 완료</div>
<div class="kpi-val">2건</div>
</div>
<div class="kpi-card">
<div class="kpi-label">오늘 견적 총액</div>
<div class="kpi-val mono" id="kpiTotalRevenue">2,480,000원</div>
</div>
</div>
<!-- 실시간 접수 및 배차 원장 테이블 -->
<div class="admin-table-card">
<div class="table-header">
<span class="table-title">실시간 예약 및 케어 원장 (Live Ledger)</span>
<div class="table-filter-tabs">
<button class="filter-tab is-active" data-filter="all">전체</button>
<button class="filter-tab" data-filter="new">신규접수</button>
<button class="filter-tab" data-filter="progress">진행중</button>
<button class="filter-tab" data-filter="done">완료</button>
</div>
</div>
<div style="overflow-x: auto;">
<table class="admin-table">
<thead>
<tr>
<th>접수번호</th>
<th>고객명 / 연락처</th>
<th>공간 / 면적</th>
<th>현장 주소</th>
<th>견적액</th>
<th>배정 팀장</th>
<th>상태</th>
<th>조치</th>
</tr>
</thead>
<tbody id="adminTableBody">
<tr>
<td class="mono">#CO-2026-0819</td>
<td><strong>이서연</strong><br /><span style="color:var(--ink-muted);font-size:11px;">010-4821-9930</span></td>
<td>주거 입주 (32평)</td>
<td>성동구 성수동 아크로포레스트</td>
<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>
</tr>
<tr>
<td class="mono">#CO-2026-0818</td>
<td><strong>박도현</strong><br /><span style="color:var(--ink-muted);font-size:11px;">010-9120-3341</span></td>
<td>오피스 정기 (45평)</td>
<td>강남구 테헤란로 142 위워크</td>
<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>
</tr>
<tr>
<td class="mono">#CO-2026-0817</td>
<td><strong>한지민</strong><br /><span style="color:var(--ink-muted);font-size:11px;">010-7712-4091</span></td>
<td>하이엔드 준공 (58평)</td>
<td>용산구 한남동 나인원한남</td>
<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>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
<!-- 32개 항목 QC 검수 모달 다이얼로그 -->
<dialog id="qcModal" class="qc-dialog" aria-labelledby="qcTitle">
<div class="qc-head">
<h3 id="qcTitle" style="font-size: var(--step-1); font-weight: 700;">32개 정밀 위생 검수 체크리스트</h3>
<button type="button" onclick="document.getElementById('qcModal').close();" aria-label="닫기" style="font-size: 18px; font-weight: 700;">✕</button>
</div>
<ul class="qc-list">
<li class="qc-item"><input type="checkbox" checked /> <span>01. 천장 몰딩 및 전등갓 상단 분진 흡진</span></li>
<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>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>
</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>
</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>
</div>
</footer>
<!-- 인터랙티브 스크립트 -->
<script>
(function () {
// 1. 뷰 모드 전환 (고객 뷰 vs 관리자 뷰)
const btnClient = document.getElementById("btnModeClient");
const btnAdmin = document.getElementById("btnModeAdmin");
function setViewMode(mode) {
document.body.setAttribute("data-view", mode);
if (mode === "admin") {
btnAdmin.classList.add("is-active");
btnClient.classList.remove("is-active");
} else {
btnClient.classList.add("is-active");
btnAdmin.classList.remove("is-active");
}
}
btnClient.addEventListener("click", () => setViewMode("client"));
btnAdmin.addEventListener("click", () => setViewMode("admin"));
// 단축키 Alt + A 로 관리자 모드 토글
window.addEventListener("keydown", (e) => {
if (e.altKey && (e.key === "a" || e.key === "A" || e.key === "ㅁ")) {
const cur = document.body.getAttribute("data-view");
setViewMode(cur === "admin" ? "client" : "admin");
}
});
// 2. 견적 계산기 로직
const pyeongSlider = document.getElementById("pyeongSlider");
const pyeongValue = document.getElementById("pyeongValue");
const sumPyeong = document.getElementById("sumPyeong");
const sumBasePrice = document.getElementById("sumBasePrice");
const sumAddonPrice = document.getElementById("sumAddonPrice");
const sumTotal = document.getElementById("sumTotal");
const sumSpaceType = document.getElementById("sumSpaceType");
const typeBtns = document.querySelectorAll(".type-btn");
const addonCheckboxes = document.querySelectorAll("input[name='addon']");
let currentBaseRate = 11000;
let currentTypeLabel = "주거 입주/이사";
function updateQuote() {
const pyeong = parseInt(pyeongSlider.value, 10);
const sqm = Math.round(pyeong * 3.30578);
pyeongValue.textContent = `${pyeong} 평 (약 ${sqm}㎡)`;
sumPyeong.textContent = `${pyeong}평 (평당 ${currentBaseRate.toLocaleString()}원)`;
sumSpaceType.textContent = currentTypeLabel;
const baseCost = pyeong * currentBaseRate;
sumBasePrice.textContent = `${baseCost.toLocaleString()}원`;
let addonCost = 0;
addonCheckboxes.forEach((cb) => {
if (cb.checked) {
addonCost += parseInt(cb.getAttribute("data-price"), 10);
}
});
sumAddonPrice.textContent = `${addonCost.toLocaleString()}원`;
const total = baseCost + addonCost;
sumTotal.textContent = `${total.toLocaleString()}원`;
}
pyeongSlider.addEventListener("input", updateQuote);
typeBtns.forEach((btn) => {
btn.addEventListener("click", () => {
typeBtns.forEach((b) => b.classList.remove("is-active"));
btn.classList.add("is-active");
currentBaseRate = parseInt(btn.getAttribute("data-base"), 10);
currentTypeLabel = btn.textContent.trim();
updateQuote();
});
});
addonCheckboxes.forEach((cb) => {
cb.addEventListener("change", updateQuote);
});
// 초기 계산 1회 실행
updateQuote();
// 3. 견적 신청 버튼 클릭 -> 관리자 원장에 즉시 추가되는 풀-루프 인터랙션!
const btnSubmit = document.getElementById("btnSubmitQuote");
const tableBody = document.getElementById("adminTableBody");
const kpiNewCount = document.getElementById("kpiNewCount");
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 pyeong = pyeongSlider.value;
const totalStr = sumTotal.textContent;
submissionCount++;
kpiNewCount.textContent = `${submissionCount}건`;
// 새 행을 관리자 테이블 최상단에 삽입
const newRow = document.createElement("tr");
newRow.style.backgroundColor = "var(--accent-light)";
newRow.innerHTML = `
<td class="mono">#CO-2026-082${submissionCount}</td>
<td><strong>${name}</strong><br /><span style="color:var(--ink-muted);font-size:11px;">${phone}</span></td>
<td>${currentTypeLabel} (${pyeong}평)</td>
<td>${address}</td>
<td class="mono" style="font-weight:700;color:var(--accent);">${totalStr}</td>
<td>배차 지정 대기</td>
<td><span class="status-pill new">방금 접수됨</span></td>
<td><button class="action-btn" onclick="alert('배차 팀장을 매칭 중입니다.');">배차 지정</button></td>
`;
tableBody.insertBefore(newRow, tableBody.firstChild);
alert(`[청온 케어] ${name}님의 견적(${totalStr}) 신청이 성공적으로 접수되었습니다.\n관리자 콘솔에 실시간 등록되었습니다.`);
});
// 모달 열기
const btnOpenQc = document.getElementById("btnOpenQcModal");
const qcModal = document.getElementById("qcModal");
if (btnOpenQc && qcModal) {
btnOpenQc.addEventListener("click", () => qcModal.showModal());
}
})();
</script>
</body>
</html>

View file

@ -0,0 +1,346 @@
<!DOCTYPE html>
<html lang="ko">
<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 체크리스트." />
<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="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
/>
<link rel="stylesheet" href="../styles/tokens.css" />
<link rel="stylesheet" href="../styles/main.css" />
<style>
.breadcrumb-bar {
padding-top: var(--space-4);
padding-bottom: var(--space-3);
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--ink-muted);
border-bottom: 1px solid var(--line);
}
.breadcrumb-bar a {
color: var(--ink-muted);
text-decoration: none;
transition: color 0.15s ease;
}
.breadcrumb-bar a:hover {
color: var(--accent);
}
.breadcrumb-bar .sep {
opacity: 0.4;
}
.breadcrumb-bar .current {
color: var(--ink);
font-weight: 600;
}
.protocol-hero {
padding: var(--space-7) 0 var(--space-5);
}
.protocol-meta-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
margin-top: var(--space-5);
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--space-4);
}
.protocol-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.protocol-meta-item .label {
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--ink-muted);
text-transform: uppercase;
}
.protocol-meta-item .value {
font-size: var(--step-0);
font-weight: 700;
color: var(--accent);
}
.atp-compare-box {
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--space-5);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
text-align: center;
}
.atp-val {
font-family: var(--font-mono);
font-size: var(--step-3);
font-weight: 800;
}
.atp-val.before {
color: #ef4444;
}
.atp-val.after {
color: var(--accent);
}
.step-deep-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-top: var(--space-5);
}
.step-deep-item {
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--space-5);
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--space-5);
align-items: start;
}
@media (max-width: 680px) {
.step-deep-item {
grid-template-columns: 1fr;
gap: var(--space-3);
}
}
</style>
</head>
<body>
<!-- Top Nav (GNB SSOT) -->
<header class="site-head">
<div class="wrap head-inner">
<a href="../index.html" class="wordmark" aria-label="청온 케어 홈">
<span class="wordmark-badge">淸</span>
청온 케어 <span class="wordmark-han">淸溫</span>
</a>
<nav class="nav" aria-label="메인 내비게이션">
<a href="./index.html" class="active" style="color: var(--accent); font-weight: 600;">6단계 프로토콜</a>
<a href="../index.html#services">케어 솔루션</a>
<a href="../index.html#calculator">정찰제 견적</a>
<a href="../index.html#equipment">전문 장비</a>
</nav>
<div class="head-actions">
<a href="../index.html#calculator" class="btn">간편 견적</a>
</div>
</div>
</header>
<main id="main-content">
<!-- Hero Header -->
<section class="section protocol-hero" style="border-top: none; padding-top: var(--space-5);">
<div class="wrap">
<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>
</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-lead" style="font-size: var(--step-0); color: var(--ink-muted); max-width: var(--measure); margin-bottom: var(--space-5);">
독일 카처 산업용 스팀과 H14 헤파 필터 흡진, ATP 생체 오염도 계측을 통해 인체에 무해한 안심 공간을 과학적으로 보증합니다.
</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); text-transform: uppercase; letter-spacing: 0.06em; 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>
</div>
<div>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; 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>
</div>
<div>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;">Detergent</dt>
<dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">ECOCERT 100% 식물성</dd>
</div>
<div>
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;">QC Points</dt>
<dd class="spec-val" style="font-size: var(--step-0); font-weight: 800; color: var(--ink);">32개 정밀 항목</dd>
</div>
</dl>
</div>
<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="완벽하게 정돈되고 살균된 프리미엄 주거 인테리어 공간"
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단계 정밀 프로토콜 시공 완료
</figcaption>
</figure>
</div>
</section>
<!-- ATP Measurement Case Report -->
<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 class="frame">
<img
src="../assets/atp-tester.webp"
alt="ATP 생체 오염도 측정기 계측 화면 (12 RLU)"
style="width: 100%; display: block;"
/>
</div>
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
<div class="eyebrow">SCIENTIFIC DATA VERIFICATION</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>
</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>
<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>
</div>
</div>
</div>
</section>
<!-- 6-Stage Deep Steps -->
<section class="wrap" style="padding-bottom: var(--space-8);">
<div class="eyebrow" style="text-align: center;">STEP-BY-STEP ENGINEERING</div>
<h2 style="font-size: var(--step-3); font-weight: 800; text-align: center; margin-top: 6px;">
청온 케어 임상 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>
<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>
<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>
<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>
<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>
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
원목 마루 및 천연 대리석 자재에 손상을 주지 않는 100% 생분해성 식물 세정제를 도포하여 찌든 산화 피막을 안전하게 중화합니다.
</p>
</div>
</div>
<div class="step-deep-item">
<div style="font-family: var(--font-mono); font-size: var(--step-2); font-weight: 800; color: var(--accent);">STEP 04</div>
<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>
<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>
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
새집증후군 유발 물질인 포름알데히드 및 휘발성유기화합물(VOCs)을 중화하고 실내 숲속 공기질을 복원합니다.
</p>
</div>
</div>
<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>
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
배차 현장 팀장과 고객이 함께 32개 정밀 체크리스트를 1:1 대조하고, 모바일 리포트를 발행하여 최종 승인합니다.
</p>
</div>
</div>
</div>
</section>
<!-- Steam QC Equipment Spec Strip -->
<div class="wrap" style="margin-bottom: var(--space-8);">
<div class="frame">
<img
src="../assets/steam-qc.webp"
alt="독일 카처 4.0bar 정밀 스팀 위생 장비와 멸균 키트"
style="width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover;"
/>
</div>
</div>
<!-- Quick CTA -->
<section class="wrap" style="padding-bottom: var(--space-8); text-align: center;">
<div class="card" style="max-width: 640px; margin: 0 auto; background: var(--surface-card);">
<div class="eyebrow" style="color: var(--accent);">TRANSPARENT PRICING</div>
<h2 style="font-size: var(--step-2); font-weight: 800; margin-top: 4px;">
우리 집 공간의 정찰제 견적을 확인하세요
</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>
</div>
</section>
</main>
<!-- 푸터 (.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>
</div>
</footer>
</body>
</html>

View file

@ -0,0 +1,926 @@
@import "./tokens.css";
/* ==========================================================================
청온 케어 (CHEONG-ON CARE · 淸溫) — 메인 스타일시트 SSOT
프리셋: clinical-sanitation + transparent-calculator + high-end-visual-design
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
background-color: var(--surface);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body {
min-height: 100dvh;
line-height: var(--leading-normal);
overflow-x: hidden;
background: var(--surface);
color: var(--ink);
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--dur-fast);
}
a:hover {
color: var(--accent);
}
button, input, select, textarea {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
border: none;
background: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.mono {
font-family: var(--font-mono);
}
.wrap {
width: min(100% - 2 * var(--pad-inline), var(--container));
margin-inline: auto;
}
/* ── 접근성 스킵 링크 ── */
.skip-link {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 1000;
padding: 0.5rem 1rem;
background: var(--surface-inverse);
color: var(--ink-inverse);
border-radius: var(--radius-sm);
transform: translateY(-200%);
transition: transform var(--dur-fast);
text-decoration: none;
font-weight: 500;
}
.skip-link:focus {
transform: translateY(0);
}
/* ── 헤더 & 뷰 모드 스위처 (GNB SSOT) ── */
.site-head {
position: sticky;
top: 0;
z-index: 100;
background: rgba(248, 250, 249, 0.94);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
padding-block: var(--space-3);
}
.head-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-width: 0;
}
.wordmark {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--step-1);
font-weight: 800;
color: var(--ink);
text-decoration: none;
letter-spacing: -0.02em;
white-space: nowrap;
flex-shrink: 0;
}
.wordmark-badge {
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: var(--radius-xs);
}
.wordmark-han {
font-size: var(--step--1);
color: var(--accent);
font-weight: 600;
letter-spacing: 0.05em;
}
.nav {
display: flex;
align-items: center;
gap: var(--space-5);
list-style: none;
}
.nav a {
text-decoration: none;
color: var(--ink-muted);
font-size: var(--step--1);
font-weight: 500;
transition: color var(--dur-fast);
white-space: nowrap;
}
.nav a:hover,
.nav a.active {
color: var(--ink);
}
.head-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
min-width: 0;
}
.mode-toggle {
display: inline-flex;
background: var(--surface-subtle);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 2px;
gap: 2px;
}
.mode-btn {
padding: 4px 10px;
border-radius: calc(var(--radius-sm) - 2px);
font-size: 12px;
font-weight: 600;
color: var(--ink-muted);
display: inline-flex;
align-items: center;
gap: 5px;
transition: all var(--dur-fast);
white-space: nowrap;
}
.mode-btn.is-active {
background: var(--surface-raised);
color: var(--ink);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.mode-btn .badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
}
.head-actions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: #fff;
font-weight: 700;
font-size: var(--step--1);
padding: 6px 14px;
border-radius: var(--radius-xs);
transition: opacity var(--dur-fast);
}
.head-actions .btn:hover {
opacity: 0.9;
}
/* ── 버튼 시스템 & 뱃지 ── */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: var(--accent);
color: #ffffff;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-weight: 700;
font-size: var(--step--1);
text-decoration: none;
white-space: nowrap;
transition: transform var(--dur-fast), background var(--dur-fast);
border: none;
}
.btn-primary:hover {
background: var(--accent-hover);
color: #ffffff;
transform: translateY(-1px);
}
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: transparent;
color: var(--ink);
border: 1px solid var(--line);
padding: 10px 18px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: var(--step--1);
text-decoration: none;
white-space: nowrap;
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.btn-outline:hover {
border-color: var(--accent);
color: var(--accent);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-xs);
background: var(--accent-light);
color: var(--accent);
font-size: 11px;
font-family: var(--font-mono);
font-weight: 700;
letter-spacing: 0.06em;
margin-bottom: var(--space-3);
text-transform: uppercase;
}
/* ── 히어로 섹션 ── */
.hero-section {
padding-block: var(--space-7);
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
gap: var(--space-7);
align-items: center;
}
.hero-title {
font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.8rem);
font-weight: 800;
line-height: 1.18;
letter-spacing: -0.035em;
color: var(--ink);
margin-bottom: var(--space-4);
text-wrap: balance;
word-break: keep-all;
}
.hero-title em {
font-style: normal;
color: var(--accent);
}
.hero-desc {
font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
color: var(--ink-muted);
max-width: 48ch;
line-height: 1.75;
margin-bottom: var(--space-5);
text-wrap: pretty;
word-break: keep-all;
}
.hero-ctas {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.hero-trust {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--step--1);
color: var(--ink-muted);
}
.hero-trust-stars {
color: #f59e0b;
font-size: 13px;
}
.hero-visual {
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;
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;
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);
}
/* ── 투명 정찰제 실시간 견적 산정 섹션 ── */
.calculator-section {
padding-block: var(--space-8);
border-top: 1px solid var(--line);
}
.section-head {
text-align: center;
max-width: 680px;
margin-inline: auto;
margin-bottom: var(--space-6);
}
.section-title {
font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.25rem);
font-weight: 800;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: var(--space-2);
text-wrap: balance;
word-break: keep-all;
}
.section-sub {
font-size: var(--step-0);
color: var(--ink-muted);
line-height: 1.6;
text-wrap: pretty;
word-break: keep-all;
}
.calc-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
gap: var(--space-5);
align-items: start;
min-width: 0;
}
.calc-card {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-5);
min-width: 0;
}
.form-group {
margin-bottom: var(--space-4);
}
.form-label {
display: block;
font-size: var(--step--1);
font-weight: 700;
color: var(--ink);
margin-bottom: var(--space-2);
letter-spacing: -0.01em;
}
.type-selector {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2);
min-width: 0;
}
.type-btn {
padding: 10px 8px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink-muted);
font-weight: 600;
font-size: var(--step--1);
text-align: center;
transition: all var(--dur-fast);
white-space: normal;
word-break: keep-all;
}
.type-btn.is-active {
border-color: var(--accent);
background: var(--accent-light);
color: var(--accent);
}
.slider-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: var(--space-2);
}
.slider-value {
font-family: var(--font-mono);
font-size: var(--step-1);
font-weight: 700;
color: var(--accent);
}
.range-slider {
width: 100%;
accent-color: var(--accent);
height: 6px;
cursor: pointer;
}
.addon-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
min-width: 0;
}
.addon-label {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
font-size: var(--step--1);
color: var(--ink-muted);
cursor: pointer;
transition: all var(--dur-fast);
}
.addon-label:has(input:checked) {
border-color: var(--accent);
background: var(--accent-light);
color: var(--ink);
font-weight: 600;
}
/* 실시간 견적 영수증 요약 패널 */
.calc-summary {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-5);
min-width: 0;
}
.summary-title {
font-size: var(--step-1);
font-weight: 700;
margin-bottom: var(--space-4);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--line);
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-2);
font-size: var(--step--1);
color: var(--ink-muted);
}
.summary-row .mono {
color: var(--ink);
font-weight: 600;
}
.summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: var(--space-3);
border-top: 1px solid var(--line);
margin-block: var(--space-4) var(--space-5);
}
.summary-total span:first-child {
font-size: var(--step-0);
font-weight: 700;
}
.summary-total .total-amount {
font-family: var(--font-mono);
font-size: var(--step-2);
font-weight: 800;
color: var(--accent);
}
.calc-submit {
width: 100%;
padding: 14px;
background: var(--accent);
color: #fff;
font-weight: 700;
font-size: var(--step-0);
border-radius: var(--radius-sm);
transition: background var(--dur-fast);
}
.calc-submit:hover {
background: var(--accent-hover);
}
/* ── 6단계 위생 프로토콜 섹션 ── */
.protocol-section {
padding-block: var(--space-8);
border-top: 1px solid var(--line);
}
.protocol-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
}
.protocol-card {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.protocol-num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.06em;
}
.protocol-card h3 {
font-size: var(--step-0);
font-weight: 700;
color: var(--ink);
}
.protocol-card p {
font-size: var(--step--1);
color: var(--ink-muted);
line-height: 1.6;
}
/* ── 전문 장비 & Before/After 섹션 ── */
.equipment-section {
padding-block: var(--space-8);
border-top: 1px solid var(--line);
background: var(--surface-card);
}
.equip-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: center;
}
.equip-specs {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.spec-item {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.spec-key {
font-size: var(--step--1);
font-weight: 600;
color: var(--ink-muted);
}
.spec-val {
font-family: var(--font-mono);
font-size: var(--step--1);
font-weight: 700;
color: var(--accent);
}
.ba-container {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.08);
}
.ba-container img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
display: block;
}
.ba-badge {
position: absolute;
bottom: 12px;
padding: 4px 10px;
border-radius: var(--radius-xs);
font-size: 11px;
font-family: var(--font-mono);
font-weight: 700;
}
.ba-badge.before {
left: 12px;
background: rgba(15, 23, 42, 0.85);
color: #fff;
}
.ba-badge.after {
right: 12px;
background: var(--accent);
color: #fff;
}
/* ===================================================================
2. 관리자 관제 콘솔 뷰 (Admin Console View)
=================================================================== */
.admin-view {
display: none;
padding-block: var(--space-6) var(--space-8);
}
[data-view="admin"] .client-view { display: none; }
[data-view="admin"] .admin-view { display: block; }
.admin-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: var(--space-5);
flex-wrap: wrap;
gap: var(--space-3);
}
.admin-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.kpi-card {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--space-4);
}
.kpi-label {
font-size: 12px;
color: var(--ink-muted);
font-weight: 600;
}
.kpi-val {
font-family: var(--font-mono);
font-size: var(--step-2);
font-weight: 800;
color: var(--ink);
margin-top: 4px;
}
.kpi-val.accent {
color: var(--accent);
}
.admin-table-card {
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--surface-card);
}
.table-title {
font-size: var(--step--1);
font-weight: 700;
color: var(--ink);
}
.table-filter-tabs {
display: flex;
gap: 4px;
}
.filter-tab {
padding: 3px 8px;
border-radius: var(--radius-xs);
font-size: 11px;
font-weight: 600;
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink-muted);
}
.filter-tab.is-active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.admin-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
text-align: left;
white-space: nowrap;
}
.admin-table th {
background: var(--surface-card);
padding: 10px 14px;
font-weight: 600;
color: var(--ink-muted);
border-bottom: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 12px;
}
.admin-table td {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
}
.status-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--radius-xs);
font-size: 11px;
font-weight: 700;
}
.status-pill.new { background: #fef3c7; color: #92400e; }
.status-pill.progress { background: #ccfbf1; color: #0f766e; }
.status-pill.done { background: #dbeafe; color: #1e40af; }
.action-btn {
padding: 4px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-xs);
font-size: 12px;
font-weight: 600;
background: var(--surface);
cursor: pointer;
transition: all var(--dur-fast);
}
.action-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ── 32개 QC 모달 다이얼로그 ── */
.qc-dialog {
position: fixed;
inset: 0;
margin: auto;
width: min(90vw, 560px);
background: #ffffff;
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
outline: none;
}
.qc-dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
/* ── 푸터 (SSOT 정본) ── */
.site-foot {
border-top: 1px solid var(--line);
padding-block: var(--space-6);
background: var(--surface);
font-size: var(--step--1);
color: var(--ink-muted);
}
.foot-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-4);
}
/* ── 반응형 미디어 쿼리 ── */
@media (max-width: 860px) {
.nav {
display: none;
}
.hero-grid, .calc-grid, .equip-grid, .protocol-grid {
grid-template-columns: 1fr;
gap: var(--space-5);
}
.admin-kpis {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.type-selector, .addon-grid {
grid-template-columns: 1fr;
}
.admin-kpis {
grid-template-columns: 1fr;
}
.wordmark-han {
display: none;
}
.mode-btn {
padding: 3px 6px;
font-size: 11px;
}
}

View file

@ -0,0 +1,73 @@
/* ==========================================================================
청온 케어 (淸溫 · CHEONG-ON CARE) — 디자인 토큰 SSOT
프리셋: ledger-console + swiss-minimal
컨셉: 임상 수준의 위생 프로토콜과 정직한 정찰제 — 공간의 숨결을 되돌리는 케어
단일 강조색: 에메랄드 틸 (#0D9488)
========================================================================== */
:root {
/* 타이포그래피 스케일 */
--step--1: 0.8125rem; /* 13px — 캡션·태그 */
--step-0: 1rem; /* 16px — 본문 */
--step-1: 1.1875rem; /* 19px — 소제목 */
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem); /* 30px — 섹션 헤딩 */
--step-3: clamp(2.25rem, 1.5rem + 3vw, 3.8rem); /* 60px — 메인 디스플레이 */
--leading-tight: 1.2;
--leading-normal: 1.7;
--measure: 58ch;
--font-serif: "MaruBuri", "Noto Serif KR", serif;
--font-display: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", monospace;
/* 색상 — 클린 퓨어 화이트 & 딥 슬레이트 + 에메랄드 틸 1강조색 */
--surface: #f8faf9;
--surface-raised: #ffffff;
--surface-card: #f0f4f2;
--surface-subtle: #e6ede9;
--surface-sunken: #e2e9e5;
--surface-inverse: #0f172a;
--ink: #0f172a;
--ink-muted: #475569;
--ink-faint: #94a3b8;
--ink-inverse: #f8faf9;
--ink-inverse-muted: #cbd5e1;
--line: #e2e8e5;
--line-strong: #cbd5e1;
--line-subtle: #edf2ef;
--line-inverse: #334155;
/* 단일 강조색 (에메랄드 틸) */
--accent: #0d9488;
--accent-hover: #0f766e;
--accent-light: #f0fdfa;
--accent-surface: #ccfbf1;
--accent-ink: #ffffff;
--radius: 2px;
--radius-sm: 4px;
--radius-md: 8px;
/* 간격 — SSOT 표준 */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 1rem;
--space-4: 1.5rem;
--space-5: 2.5rem;
--space-6: 4rem;
--space-7: 6rem;
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
/* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
--container: 1120px;
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
/* 모션 */
--dur-quick: 180ms;
--dur-normal: 420ms;
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
}