release: v0.9.1 (신규 쇼케이스 3종 정식 출시, CSS 변수 및 경로 무결성 게이트 강화)
This commit is contained in:
parent
e26b00a825
commit
225c1d9f42
75 changed files with 7406 additions and 224 deletions
BIN
apps/site/public/work/cheongon-care/assets/atp-tester.webp
Normal file
BIN
apps/site/public/work/cheongon-care/assets/atp-tester.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
apps/site/public/work/cheongon-care/assets/clean-hero.webp
Normal file
BIN
apps/site/public/work/cheongon-care/assets/clean-hero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
apps/site/public/work/cheongon-care/assets/steam-qc.webp
Normal file
BIN
apps/site/public/work/cheongon-care/assets/steam-qc.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
608
apps/site/public/work/cheongon-care/index.html
Normal file
608
apps/site/public/work/cheongon-care/index.html
Normal 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>
|
||||
346
apps/site/public/work/cheongon-care/protocol/index.html
Normal file
346
apps/site/public/work/cheongon-care/protocol/index.html
Normal 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 & 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>
|
||||
926
apps/site/public/work/cheongon-care/styles/main.css
Normal file
926
apps/site/public/work/cheongon-care/styles/main.css
Normal 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;
|
||||
}
|
||||
}
|
||||
73
apps/site/public/work/cheongon-care/styles/tokens.css
Normal file
73
apps/site/public/work/cheongon-care/styles/tokens.css
Normal 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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue