<!-- HTML -->
<div class="calculator">
<div class="input-group">
<span class="input-label">소진 기간</span>
<input type="number" id="firstValue" class="input-field" />
<span class="input-unit">일</span>
</div>
<div class="input-group">
<span class="input-label">소진 스택</span>
<input type="number" id="secondValue" class="input-field" />
<span class="input-unit">개</span>
</div>
<div class="input-group">
<span class="input-label">현재 재고</span>
<input type="number" id="thirdValue" class="input-field" />
<span class="input-unit">개</span>
</div>
<button id="calculateButton" class="calculate-btn">계산하기</button>
<div class="result-display">
<span class="result-label">소진 기간</span>
<span id="result" class="result-value">0</span>
<span class="result-unit">일</span>
</div>
</div>

<!-- CSS -->
<style>
.calculator {
width: 300px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
font-family: 'Arial', sans-serif;
}

.input-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.input-label {
flex: 1;
text-align: left;
}

.input-field {
flex: 2;
padding: 10px;
margin: 0 5px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: right;
}

.input-unit {
flex: 1;
}

.calculate-btn {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #ff4b4b;
color: white;
cursor: pointer;
margin-bottom: 10px;
}

.calculate-btn:hover {
background-color: #ff2121;
}

.result-display {
display: flex;
align-items: center;
background: #f9f9f9;
padding: 10px;
border-radius: 5px;
}

.result-label {
flex: 1;
text-align: left;
}

.result-value {
flex: 2;
text-align: right;
font-weight: bold;
}

.result-unit {
flex: 1;
}
</style>

<!-- -->
<>
document.getElementById('calculateButton').addEventListener('click', function() {
var firstValue = parseInt(document.getElementById('firstValue').value) || 0;
var secondValue = parseInt(document.getElementById('secondValue').value) || 0;
var thirdValue = parseInt(document.getElementById('thirdValue').value) || 0;
var result = Math.round(firstValue * (thirdValue / secondValue));
document.getElementById('result').textContent = result;
});
</>