feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
This commit is contained in:
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -1,343 +1,185 @@
|
|||
<!DOCTYPE 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="청온 케어의 현장 검수 절차와 기록 표시 방식을 소개합니다. 아래 사례와 값은 예시입니다." />
|
||||
|
||||
<title>청온 케어 6단계 작업 절차</title>
|
||||
<meta name="description" content="청온 케어가 현장에서 장비, 필터, 세제, 마감 상태를 작업표에 적는 6단계 절차와 기록 방식입니다. 아래 사례와 값은 예시입니다." />
|
||||
<meta property="og:title" content="청온 케어 6단계 작업 절차" />
|
||||
<meta property="og:description" content="단계마다 쓴 장비와 제품을 작업표에 적고, 끝나면 32개 항목을 함께 확인합니다." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://designpaca.chanpaca.net/work/cheongon-care/assets/atp-tester.webp" />
|
||||
<meta property="og:image:alt" content="장갑을 낀 손이 잡은 휴대용 측정기와 면봉 검체 키트" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#eef3f6" />
|
||||
|
||||
<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="../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"
|
||||
href="https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="../styles/tokens.css?v=20261006" />
|
||||
<link rel="stylesheet" href="../styles/main.css?v=20261006" />
|
||||
<link rel="stylesheet" href="../styles/protocol.css?v=20261006" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
|
||||
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='%23156a75'/%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"
|
||||
/>
|
||||
<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);
|
||||
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: #b91c1c;
|
||||
}
|
||||
.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>
|
||||
<a class="skip-link" href="#main-content">본문으로 건너뛰기</a>
|
||||
<!-- Top Nav (GNB SSOT) -->
|
||||
<a class="skip-link" href="#mainContent">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a href="../index.html" class="wordmark" aria-label="청온 케어 홈">
|
||||
<span class="wordmark-badge">청</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>
|
||||
<a class="wordmark" href="../index.html">청온 케어</a>
|
||||
<a class="head-action" href="../index.html#request">견적 요청</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Header -->
|
||||
<section class="section protocol-hero" style="border-top: none; padding-top: var(--space-5);">
|
||||
<main id="mainContent">
|
||||
<!-- 표제는 작게, 사실 목록이 먼저 -->
|
||||
<section class="proto-intro" aria-labelledby="protoHeading">
|
||||
<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;">CARE CHECKLIST & CASE EXAMPLE</span>
|
||||
</div>
|
||||
<nav class="crumb" aria-label="현재 위치">
|
||||
<a href="../index.html">청온 케어</a>
|
||||
<span class="crumb-sep" aria-hidden="true">/</span>
|
||||
<span aria-current="page">작업 절차</span>
|
||||
</nav>
|
||||
<h1 id="protoHeading" class="quote-title">6단계로 청소하고, 단계마다 작업표에 적습니다</h1>
|
||||
<dl class="facts proto-facts">
|
||||
<div class="fact">
|
||||
<dt>단계</dt>
|
||||
<dd>흡진, 스팀, 세제, 분리 세척, 환기와 마감, 최종 검수 6단계</dd>
|
||||
</div>
|
||||
<div class="fact">
|
||||
<dt>기록</dt>
|
||||
<dd>장비 설정값, 필터 상태, 사용 제품, 마감 상태 4가지</dd>
|
||||
</div>
|
||||
<div class="fact">
|
||||
<dt>검수</dt>
|
||||
<dd>32개 항목을 현장 팀장과 고객이 함께 확인하고 서명</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="demo-notice" role="note">아래 절차와 기록값은 예시입니다. 실제 시공 결과를 보장하거나 예약을 접수하지 않습니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="protocol-hero-head">
|
||||
<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);">
|
||||
현장 장비, 필터, 표면, 마감 상태를 작업표에 기록하는 절차와 확인 항목을 소개합니다.
|
||||
</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);">현장 장비 설정 기록</dd>
|
||||
<!-- 기록 방식 예시 -->
|
||||
<section class="proto-record" aria-labelledby="recordHeading">
|
||||
<div class="wrap proto-record-grid">
|
||||
<figure class="gear-cutout">
|
||||
<img
|
||||
src="../assets/atp-tester.webp"
|
||||
alt="장갑을 낀 손이 잡은 휴대용 측정기와 면봉 검체 키트"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>표면 점검에 쓰는 휴대용 측정기. 읽은 값은 작업표에 적습니다.</figcaption>
|
||||
</figure>
|
||||
<div class="gear-text">
|
||||
<h2 id="recordHeading" class="section-title">점검값은 전과 후를 나란히 적습니다</h2>
|
||||
<p class="proto-lead">아래는 점검 기록이 작업표에 표시되는 방식의 예시입니다. 실제 현장 측정값이나 시공 결과가 아닙니다.</p>
|
||||
<dl class="compare">
|
||||
<div class="compare-cell">
|
||||
<dt>점검 전</dt>
|
||||
<dd class="compare-val before">기록값 A</dd>
|
||||
<dd class="compare-sub">확인할 항목 표시</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);">필터 종류·상태 확인</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);">사용 제품·표면 기록</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 class="compare-cell">
|
||||
<dt>점검 후</dt>
|
||||
<dd class="compare-val after">기록값 B</dd>
|
||||
<dd class="compare-sub">확인 완료 표시</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);">
|
||||
주거 공간 · 6단계 절차 예시
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Inspection Record Layout -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);">
|
||||
<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="검수 기록에 사용하는 계측 장비 화면 예시"
|
||||
style="width: 100%; display: block;"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
|
||||
<div class="eyebrow">검수 기록 표시 예시</div>
|
||||
<h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
|
||||
주거 공간 예시<br />
|
||||
<span style="color: var(--accent);">점검값 기록 방식</span>
|
||||
</h2>
|
||||
<p style="font-size: var(--step--1); color: var(--ink-muted); line-height: 1.7;">
|
||||
아래 값은 점검 기록이 표시되는 방식을 설명하기 위한 예시입니다. 실제 현장 측정값이나 시공 결과를 뜻하지 않습니다.
|
||||
</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;">점검 전 기록</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;">점검 후 기록</div>
|
||||
<div class="atp-val after">기록값 B</div>
|
||||
<div style="font-size: 12px; color: var(--accent); margin-top: 4px;">확인 완료 표시 예시</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 6단계 -->
|
||||
<section class="steps" aria-labelledby="stepsHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<h2 id="stepsHeading" class="section-title">단계마다 무엇을 하고 무엇을 적는지</h2>
|
||||
</div>
|
||||
<ol class="step-list">
|
||||
<li class="step">
|
||||
<h3>공사 먼지 흡진</h3>
|
||||
<p>벽면, 천장 몰딩, 조명 레일의 작업 범위를 확인하고 흡진 작업 여부를 작업표에 기록합니다.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3>스팀 장비 설정 확인</h3>
|
||||
<p>배수구, 욕실 타일 줄눈, 주방 후드를 스팀으로 청소하고 장비 온도 설정을 적습니다.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3>재질에 맞는 세제 사용</h3>
|
||||
<p>바닥과 석재의 재질을 확인한 뒤 사용 제품과 적용 범위를 작업표에 표시합니다.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3>서랍장과 걸레받이 분리 세척</h3>
|
||||
<p>싱크대 하부 걸레받이와 수납장 서랍을 떼어 내 레일 안쪽까지 닦고, 분리한 부위를 기록합니다.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3>환기와 마감 확인</h3>
|
||||
<p>환기와 마감 상태를 확인하고, 향이나 마감 제품을 사용했다면 제품명과 적용 범위를 기록합니다.</p>
|
||||
</li>
|
||||
<li class="step">
|
||||
<h3>32개 항목 최종 검수</h3>
|
||||
<p>현장 팀장과 고객님이 32개 항목 검수표를 함께 확인하고 서명합니다.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</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;">필터 흡진 작업 확인</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 02</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 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;">
|
||||
바닥과 석재의 재질을 확인한 뒤 사용 제품과 적용 범위를 작업표에 표시합니다.
|
||||
</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;">
|
||||
환기와 마감 상태를 확인하고, 향·마감 제품을 사용했다면 제품명과 적용 범위를 기록합니다.
|
||||
</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개 항목 현장 검수 확인</h3>
|
||||
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
|
||||
현장 담당자와 의뢰자가 32개 체크리스트를 함께 확인하는 흐름을 예시로 표시합니다.
|
||||
</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="작업 장비와 검수 키트를 보여 주는 예시 이미지"
|
||||
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;">
|
||||
선택 항목을 기준으로 예상 금액을 확인할 수 있습니다. 실제 견적이나 신청은 진행되지 않습니다.
|
||||
</p>
|
||||
<a href="../index.html#calculator" class="btn-primary" style="display: inline-block; padding: 14px 28px; text-decoration: none; font-size: var(--step-0);">
|
||||
항목별 예상 견적 보기 →
|
||||
</a>
|
||||
<!-- 계산기로 돌아가기 -->
|
||||
<section class="wrap proto-cta" aria-labelledby="ctaHeading">
|
||||
<div class="card">
|
||||
<h2 id="ctaHeading" class="section-title">평형과 옵션을 고르면 예상 금액이 바로 나옵니다</h2>
|
||||
<p class="proto-lead">평당 9,500원부터, 추가 옵션 4종. 예시 금액이며 실제 견적이나 신청은 진행되지 않습니다.</p>
|
||||
<a href="../index.html#calculator" class="btn-primary">견적 계산하기</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 푸터 (.site-foot SSOT) -->
|
||||
<dialog id="callDialog" class="call-dialog" aria-labelledby="callTitle">
|
||||
<h3 id="callTitle" class="qc-title">전화 문의</h3>
|
||||
<p class="call-number"><span class="placeholder">[대표 전화번호]</span></p>
|
||||
<p class="call-note">청온 케어는 가상 브랜드라 실제 전화번호가 없습니다. 견적 요청 폼으로 흐름을 확인할 수 있습니다.</p>
|
||||
<div class="qc-actions">
|
||||
<button type="button" class="action-btn" onclick="document.getElementById('callDialog').close();">닫기</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>청온 케어 · 위생 케어 안내</p>
|
||||
<p class="muted">이 페이지의 절차와 수치는 예시이며 실제 예약은 접수되지 않습니다.</p>
|
||||
<section class="wrap request" aria-labelledby="requestHeading">
|
||||
<div class="request-head">
|
||||
<h2 id="requestHeading" class="request-title">견적을 요청합니다</h2>
|
||||
<p class="request-lead">첫 페이지에서 평형과 옵션을 고른 뒤 연락처를 남기면 현장 팀장이 일정을 잡습니다.</p>
|
||||
</div>
|
||||
<div class="request-form">
|
||||
<a href="../index.html#request" class="calc-submit calc-submit-link">견적 요청으로 가기</a>
|
||||
<p class="request-note">예시 화면입니다. 입력한 정보는 저장하거나 전송하지 않습니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="wrap foot-meta">
|
||||
<p class="foot-brand">청온 케어</p>
|
||||
<p class="foot-contact">전화 <span class="placeholder">[대표 전화번호]</span></p>
|
||||
<p class="foot-notice">이 페이지의 절차와 수치는 예시이며 실제 예약은 접수되지 않습니다.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="action-bar" role="group" aria-label="빠른 행동">
|
||||
<button type="button" class="action-bar-call" id="btnCall">전화</button>
|
||||
<a class="action-bar-quote" href="../index.html#request">견적 요청</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const btnCall = document.getElementById("btnCall");
|
||||
const callDialog = document.getElementById("callDialog");
|
||||
if (btnCall && callDialog) btnCall.addEventListener("click", () => callDialog.showModal());
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue