<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>에스제이 자갈·화산석 시공 계산기</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
background: #f4f6f2;
color: #222;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.header {
background: #2d5a27;
color: white;
padding: 24px 20px;
border-radius: 16px 16px 0 0;
text-align: center;
}
.header h1 {
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
}
.header p {
font-size: 13px;
opacity: 0.85;
}
.card {
background: white;
padding: 24px 20px;
border-bottom: 1px solid #eee;
}
.card:last-of-type {
border-radius: 0 0 16px 16px;
border-bottom: none;
}
.section-title {
font-size: 15px;
font-weight: 700;
color: #2d5a27;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.section-title::before {
content: '';
display: inline-block;
width: 4px;
height: 16px;
background: #2d5a27;
border-radius: 2px;
}
/* 컬러 선택 */
.color-options {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.color-btn {
flex: 1;
min-width: 120px;
padding: 14px 10px;
border: 2px solid #ddd;
border-radius: 12px;
cursor: pointer;
text-align: center;
transition: all 0.2s;
background: white;
}
.color-btn:hover { border-color: #2d5a27; }
.color-btn.active {
border-color: #2d5a27;
background: #f0f7ee;
}
.color-dot {
width: 32px;
height: 32px;
border-radius: 50%;
margin: 0 auto 8px;
border: 2px solid #eee;
}
.color-dot.red { background: radial-gradient(circle at 35% 35%, #c0392b, #7b1a12); }
.color-dot.black { background: radial-gradient(circle at 35% 35%, #555, #111); }
.color-name {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.color-desc {
font-size: 11px;
color: #888;
}
/* 용도 선택 */
.use-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.use-btn {
padding: 10px 16px;
border: 2px solid #ddd;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
background: white;
transition: all 0.2s;
}
.use-btn:hover { border-color: #2d5a27; }
.use-btn.active {
border-color: #2d5a27;
background: #2d5a27;
color: white;
font-weight: 600;
}
/* 두께 선택 */
.depth-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.depth-btn {
padding: 14px 16px;
border: 2px solid #ddd;
border-radius: 12px;
cursor: pointer;
background: white;
text-align: left;
transition: all 0.2s;
}
.depth-btn:hover { border-color: #2d5a27; }
.depth-btn.active {
border-color: #2d5a27;
background: #f0f7ee;
}
.depth-btn.recommended {
border-color: #e8a020;
background: #fffbf0;
}
.depth-btn.recommended.active {
border-color: #2d5a27;
background: #f0f7ee;
}
.depth-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.depth-label {
font-size: 15px;
font-weight: 700;
}
.badge {
font-size: 11px;
padding: 3px 8px;
border-radius: 10px;
font-weight: 600;
}
.badge.rec { background: #e8a020; color: white; }
.badge.basic { background: #ddd; color: #555; }
.badge.pro { background: #2d5a27; color: white; }
.depth-desc {
font-size: 12px;
color: #666;
line-height: 1.5;
}
/* 면적 입력 */
.input-row {
display: flex;
gap: 10px;
align-items: flex-end;
margin-bottom: 12px;
}
.input-group {
flex: 1;
}
.input-group label {
font-size: 12px;
color: #666;
display: block;
margin-bottom: 6px;
font-weight: 600;
}
.input-group input {
width: 100%;
padding: 12px 14px;
border: 2px solid #ddd;
border-radius: 10px;
font-size: 16px;
transition: border-color 0.2s;
-webkit-appearance: none;
}
.input-group input:focus {
outline: none;
border-color: #2d5a27;
}
.input-unit {
padding: 12px 4px;
font-size: 13px;
color: #888;
white-space: nowrap;
}
.calc-btn {
width: 100%;
padding: 16px;
background: #2d5a27;
color: white;
border: none;
border-radius: 12px;
font-size: 17px;
font-weight: 700;
cursor: pointer;
margin-top: 8px;
transition: background 0.2s;
}
.calc-btn:hover { background: #1e3d1a; }
/* 결과 */
.result-box {
display: none;
background: #f0f7ee;
border: 2px solid #2d5a27;
border-radius: 14px;
padding: 20px;
margin-top: 16px;
}
.result-box.show { display: block; }
.result-title {
font-size: 14px;
color: #2d5a27;
font-weight: 700;
margin-bottom: 14px;
text-align: center;
}
.result-main {
text-align: center;
margin-bottom: 16px;
}
.result-bags {
font-size: 42px;
font-weight: 900;
color: #2d5a27;
line-height: 1;
}
.result-bags span {
font-size: 18px;
font-weight: 600;
}
.result-sub {
font-size: 13px;
color: #666;
margin-top: 4px;
}
.result-detail {
background: white;
border-radius: 10px;
padding: 14px;
font-size: 13px;
line-height: 1.8;
color: #444;
}
.result-detail div {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #f0f0f0;
padding: 4px 0;
}
.result-detail div:last-child { border-bottom: none; }
.result-detail .label { color: #888; }
.result-detail .value { font-weight: 700; color: #222; }
/* 추천 조합 */
.combo-box {
display: none;
margin-top: 16px;
background: #fff8f0;
border: 2px solid #e8a020;
border-radius: 14px;
padding: 18px;
}
.combo-box.show { display: block; }
.combo-title {
font-size: 14px;
font-weight: 700;
color: #b07010;
margin-bottom: 10px;
}
.combo-content {
font-size: 13px;
color: #555;
line-height: 1.7;
}
.combo-tag {
display: inline-block;
background: #e8a020;
color: white;
font-size: 11px;
padding: 2px 8px;
border-radius: 8px;
margin-right: 4px;
font-weight: 600;
}
/* 문의 */
.contact-box {
background: #2d5a27;
color: white;
border-radius: 14px;
padding: 20px;
text-align: center;
margin-top: 8px;
}
.contact-box p {
font-size: 13px;
opacity: 0.85;
margin-bottom: 14px;
line-height: 1.6;
}
.contact-btn {
display: inline-block;
background: white;
color: #2d5a27;
padding: 12px 28px;
border-radius: 24px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
margin: 4px;
}
.contact-btn.kakao {
background: #fee500;
color: #222;
}
.info-box {
background: #f8f8f8;
border-radius: 10px;
padding: 14px;
font-size: 12px;
color: #888;
line-height: 1.7;
margin-top: 12px;
}
.info-box strong { color: #555; }
.reset-btn {
width: 100%;
padding: 12px;
background: #eee;
color: #555;
border: none;
border-radius: 10px;
font-size: 14px;
cursor: pointer;
margin-top: 10px;
}
.step-indicator {
display: flex;
justify-content: center;
gap: 6px;
padding: 16px 0 8px;
}
.step-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ddd;
}
.step-dot.active { background: #2d5a27; }
</style>
</head>
<body>
<div class="container">
<!-- 헤더 -->
<div class="header">
<h1>🪨 자갈 · 화산석 시공 계산기</h1>
<p>에스제이(SJ Plant) · 입도 10~20mm · 1포 20kg</p>
</div>
<!-- STEP 1: 컬러 선택 -->
<div class="card">
<div class="section-title">STEP 1 컬러를 선택하세요</div>
<div class="color-options">
<div class="color-btn" onclick="selectColor('red', this)">
<div class="color-dot red"></div>
<div class="color-name">레드</div>
<div class="color-desc">따뜻하고 활기찬 분위기</div>
</div>
<div class="color-btn" onclick="selectColor('black', this)">
<div class="color-dot black"></div>
<div class="color-name">블랙</div>
<div class="color-desc">모던하고 세련된 분위기</div>
</div>
</div>
</div>
<!-- STEP 2: 용도 선택 -->
<div class="card">
<div class="section-title">STEP 2 시공 용도를 선택하세요</div>
<div class="use-options">
<div class="use-btn" onclick="selectUse('조경', this)">🌿 정원 · 화단 조경</div>
<div class="use-btn" onclick="selectUse('온실', this)">🏠 온실 바닥</div>
<div class="use-btn" onclick="selectUse('배수', this)">💧 배수층</div>
<div class="use-btn" onclick="selectUse('블루베리', this)">🫐 블루베리 화분</div>
<div class="use-btn" onclick="selectUse('멀칭', this)">🌱 멀칭 · 잡초억제</div>
<div class="use-btn" onclick="selectUse('인테리어', this)">🪴 화분 인테리어</div>
</div>
</div>
<!-- STEP 3: 두께 선택 -->
<div class="card">
<div class="section-title">STEP 3 시공 두께를 선택하세요</div>
<div class="depth-options">
<div class="depth-btn" onclick="selectDepth(3, this)">
<div class="depth-top">
<span class="depth-label">3cm</span>
<span class="badge basic">가벼운 장식용</span>
</div>
<div class="depth-desc">화분 위 장식, 실내 인테리어용으로 적합합니다. 잡초 억제 효과는 제한적입니다.</div>
</div>
<div class="depth-btn recommended" onclick="selectDepth(5, this)">
<div class="depth-top">
<span class="depth-label">5cm</span>
<span class="badge rec">✓ 추천 두께</span>
</div>
<div class="depth-desc">조경 · 멀칭 · 온실 바닥에 가장 많이 사용되는 두께입니다. 잡초 억제와 보습 효과를 동시에 얻을 수 있습니다.</div>
</div>
<div class="depth-btn" onclick="selectDepth(7, this)">
<div class="depth-top">
<span class="depth-label">7cm</span>
<span class="badge basic">배수층 · 화단</span>
</div>
<div class="depth-desc">배수가 중요한 화단이나 블루베리 재배 시 적합합니다. 뿌리 통기성 확보에 효과적입니다.</div>
</div>
<div class="depth-btn" onclick="selectDepth(10, this)">
<div class="depth-top">
<span class="depth-label">10cm</span>
<span class="badge pro">전문 시공</span>
</div>
<div class="depth-desc">온실 바닥 전체 시공, 장기간 유지관리가 필요한 농업용 시설에 적합합니다. 가장 안정적인 구조를 만듭니다.</div>
</div>
</div>
</div>
<!-- STEP 4: 면적 입력 -->
<div class="card">
<div class="section-title">STEP 4 시공 면적을 입력하세요</div>
<div class="input-row">
<div class="input-group">
<label>가로</label>
<input type="number" id="width" placeholder="예) 500" inputmode="decimal">
</div>
<div class="input-unit">cm</div>
<div class="input-group">
<label>세로</label>
<input type="number" id="height" placeholder="예) 300" inputmode="decimal">
</div>
<div class="input-unit">cm</div>
</div>
<div class="info-box">
<strong>참고 기준</strong><br>
입도 10~20mm 기준 · 1포 20kg<br>
100×100cm · 두께 5cm → 약 3포 필요<br>
실제 시공 환경에 따라 ±10% 차이가 날 수 있습니다.
</div>
<button class="calc-btn" onclick="calculate()">필요 수량 계산하기</button>
<!-- 결과 -->
<div class="result-box" id="resultBox">
<div class="result-title" id="resultTitle"></div>
<div class="result-main">
<div class="result-bags"><span id="bagCount">0</span><span> 포대</span></div>
<div class="result-sub" id="resultSub"></div>
</div>
<div class="result-detail" id="resultDetail"></div>
</div>
<!-- 색상 조합 추천 -->
<div class="combo-box" id="comboBox">
<div class="combo-title">💡 이 컬러와 잘 어울리는 조합</div>
<div class="combo-content" id="comboContent"></div>
</div>
<button class="reset-btn" onclick="resetAll()">다시 계산하기</button>
</div>
<!-- 문의 -->
<div class="card">
<div class="contact-box">
<p>
정확한 물량과 견적이 필요하신가요?<br>
에스제이에서 바로 안내해드립니다.
</p>
<a href="tel:061-383-3334" class="contact-btn">📞 061-383-3334</a>
<a href="https://smartstore.naver.com/sj-plant" target="_blank" class="contact-btn">스마트스토어</a>
</div>
</div>
</div>
<script>
let selectedColor = '';
let selectedUse = '';
let selectedDepth = 0;
function selectColor(color, el) {
document.querySelectorAll('.color-btn').forEach(b => b.classList.remove('active'));
el.classList.add('active');
selectedColor = color;
}
function selectUse(use, el) {
document.querySelectorAll('.use-btn').forEach(b => b.classList.remove('active'));
el.classList.add('active');
selectedUse = use;
}
function selectDepth(depth, el) {
document.querySelectorAll('.depth-btn').forEach(b => b.classList.remove('active'));
el.classList.add('active');
selectedDepth = depth;
}
function calculate() {
const width = parseFloat(document.getElementById('width').value);
const height = parseFloat(document.getElementById('height').value);
if (!selectedColor) { alert('컬러를 선택해주세요.'); return; }
if (!selectedUse) { alert('시공 용도를 선택해주세요.'); return; }
if (!selectedDepth) { alert('시공 두께를 선택해주세요.'); return; }
if (!width || !height) { alert('가로와 세로를 입력해주세요.'); return; }
if (width <= 0 || height <= 0) { alert('올바른 값을 입력해주세요.'); return; }
// 계산
// 자갈 10~20mm 기준 밀도 약 1.5g/cm³
const volume = (width * height * selectedDepth); // cm³
const weightKg = (volume * 1.5) / 1000;
const bags = Math.ceil(weightKg / 20);
const area = ((width * height) / 10000).toFixed(2);
const totalWeight = (bags * 20).toLocaleString();
// 결과 표시
const colorName = selectedColor === 'red' ? '레드' : '블랙';
document.getElementById('resultTitle').textContent =
`${colorName} · ${selectedUse} · 두께 ${selectedDepth}cm 기준 결과`;
document.getElementById('bagCount').textContent = bags.toLocaleString();
document.getElementById('resultSub').textContent =
`총 무게 약 ${totalWeight}kg`;
document.getElementById('resultDetail').innerHTML = `
<div><span class="label">시공 면적</span><span class="value">${width}×${height}cm (${area}㎡)</span></div>
<div><span class="label">시공 두께</span><span class="value">${selectedDepth}cm</span></div>
<div><span class="label">선택 컬러</span><span class="value">${colorName}</span></div>
<div><span class="label">시공 용도</span><span class="value">${selectedUse}</span></div>
<div><span class="label">입도</span><span class="value">10~20mm</span></div>
<div><span class="label">1포 기준</span><span class="value">20kg</span></div>
<div><span class="label">필요 수량</span><span class="value">${bags.toLocaleString()}포대</span></div>
`;
// 컬러 조합 추천
let comboText = '';
if (selectedColor === 'red') {
comboText = `
<span class="combo-tag">레드 + 블랙</span> 레드 자갈 위에 블랙 자갈을 포인트로 섞으면 고급스러운 느낌을 줍니다.<br><br>
<span class="combo-tag">레드 + 코코피트</span> 블루베리 화분이나 화단에 레드 자갈을 멀칭하면 배수와 미관을 동시에 잡을 수 있습니다.<br><br>
<span class="combo-tag">레드 + 펄라이트</span> 배수층 하단에 펄라이트를 깔고 상단에 레드 자갈을 시공하면 통기성과 보습 효과가 높아집니다.
`;
} else {
comboText = `
<span class="combo-tag">블랙 + 레드</span> 블랙 자갈 위에 레드 포인트를 더하면 세련되고 입체감 있는 조경이 완성됩니다.<br><br>
<span class="combo-tag">블랙 + 화이트 자갈</span> 모던한 정원이나 온실 통로에 블랙과 밝은 색 자갈을 교차 시공하면 시인성이 높아집니다.<br><br>
<span class="combo-tag">블랙 + 코코피트 배지</span> 온실 바닥에 블랙 자갈을 시공하면 열 흡수로 겨울철 지온 유지에 도움이 됩니다.
`;
}
document.getElementById('comboContent').innerHTML = comboText;
document.getElementById('resultBox').classList.add('show');
document.getElementById('comboBox').classList.add('show');
document.getElementById('resultBox').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
function resetAll() {
selectedColor = '';
selectedUse = '';
selectedDepth = 0;
document.querySelectorAll('.color-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.use-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.depth-btn').forEach(b => b.classList.remove('active'));
document.getElementById('width').value = '';
document.getElementById('height').value = '';
document.getElementById('resultBox').classList.remove('show');
document.getElementById('comboBox').classList.remove('show');
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>