123d9fc5a8
stylelint 도 html-validate 도 "var(--x) 를 썼는데 --x 가 어디에도 없다"를 잡지 못한다. 미정의 변수는 선언 전체를 무효로 만드는데 콘솔 에러가 없어 조용히 남는다. 검사기를 심자마자 v0.9.1 의 실제 결함이 나왔다. 게이트 신설 - tools/integrity.mjs — L0 무결성. CSS 커스텀 프로퍼티 참조, 상대경로, 한글 조판 필수 규칙(keep-all·한글 폰트 지정), 슬롭 지문, 스크롤 리스너를 검사. verify.mjs 체인에 편입해 실패 시 배포를 막는다. 폴백이 있는 var(--x, 기본값) 은 선택적 주입이므로 미정의로 세지 않는다. - tools/showcase-audit.mjs — 320/390/768/1440 실렌더 감사. 가로 스크롤·오버플로· 컨트롤 줄바꿈·대비 AA·왼쪽 인셋·h1 개수·히어로 줄 수·깨진 이미지·콘솔 에러. 반투명 배경을 합성해 대비를 재고, WebGL 페이지를 위해 swiftshader 로 렌더한다. - html-validate 대상을 두 페이지에서 public/work 전체로 넓혔다. 수리한 결함 - 미정의 변수 64건: --dur-fast·--radius-xs 가 정의된 적이 없어 cask-archive, cheongon-care, materia-interior 의 transition 선언이 통째로 무효였다. 새 토큰을 만들지 않고 기존 --dur-quick·--radius 로 매핑했다 — 토큰을 늘리면 radius 어휘가 4종이 되어 하드 게이트 3에 걸린다. - 한글 조판: lumina-optics·pulsegate·synapse-bci 가 word-break: keep-all 없이 IBM Plex Sans 만 지정해 한글이 시스템 기본으로 떨어지고 있었다. 같은 계열의 IBM Plex Sans KR 을 스택에 넣고 keep-all 을 추가했다. - 슬롭 지문 19건: text-transform: uppercase 로 만든 영문 대문자 eyebrow 를 한글 문장으로 바꾸고, 대문자용으로 잡아둔 넓은 자간과 모노 서체도 되돌렸다. - 하드 게이트 9: materia-interior/hannam-duplex.html 의 100vh → 100dvh. 이 파일은 어디서도 참조되지 않으면서 인라인 hex 까지 갖고 있어 토큰 기반으로 다시 썼다. - 접근성 11건: label 하나가 output 과 input 둘에 걸리던 것 5건(font-foundry, lumina-optics), dl > div > div > dt 4건(muwol-coffee), div 에 붙은 aria-label 2건(overtone-sound, pulsegate). 측정기 자체의 오류 둘도 고쳤다 — 눈에 보이지 않는 .sr-only 를 대비 실패로 잡던 것과, overflow-x: auto 상자 안의 넓은 표를 오버플로로 잡던 것. 재는 도구가 틀리면 통과도 실패도 의미가 없다.
345 lines
17 KiB
HTML
345 lines
17 KiB
HTML
<!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);
|
||
}
|
||
.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 & 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); 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>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
<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">ATP 데이터 검증</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;">단계별 시공 절차</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);">정찰제 가격표</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>
|