<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로스트아크 보석 & 큐브 통합 계산기</title>
<style>
:root {
--bg-color: #1c1e22;
--container-bg: #282b30;
--text-color: #ffffff;
--accent-color: #e19c16;
--cube-color: #00bcd4;
--border-color: #3e4249;
--input-bg: #181a1d;
}
body {
font-family: 'Malgun Gothic', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.container {
background-color: var(--container-bg);
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
width: 100%;
max-width: 1000px; /* 양옆 배치를 위해 최대 너비 확장 */
}
h1 {
text-align: center;
color: var(--accent-color);
font-size: 24px;
margin-bottom: 5px;
border-bottom: 2px solid var(--border-color);
padding-bottom: 10px;
}
.guide-text {
text-align: center;
font-size: 12px;
color: #888;
margin-bottom: 25px;
}
/* 💡 핵심: 좌우 배치를 위한 Flex 레이아웃 */
.main-layout {
display: flex;
gap: 25px;
align-items: flex-start;
}
/* 왼쪽 입력 영역 (큐브 + 보석) */
.input-side {
flex: 1.2;
display: flex;
flex-direction: column;
gap: 20px;
}
/* 오른쪽 결과 영역 */
.result-side {
flex: 0.8;
position: sticky;
top: 20px; /* 스크롤 시 결과창이 화면에 고정됨 */
}
h2 {
font-size: 16px;
color: #ddd;
margin-top: 0;
margin-bottom: 12px;
display: flex;
align-items: center;
}
h2.cube-title { color: var(--cube-color); }
h2.gem-title { color: var(--accent-color); }
.input-group {
display: flex;
align-items: center;
margin-bottom: 8px;
background: var(--input-bg);
padding: 8px 15px;
border-radius: 6px;
border: 1px solid var(--border-color);
transition: border-color 0.2s;
}
.input-group:focus-within { border-color: #666; }
.cube-group:focus-within { border-color: var(--cube-color); }
.gem-group:focus-within { border-color: var(--accent-color); }
.input-group label {
flex: 1;
font-weight: bold;
font-size: 14px;
color: #ccc;
}
.input-group input {
width: 100px;
background: none;
border: none;
color: white;
font-size: 16px;
text-align: right;
outline: none;
}
/* 화살표 숨기기 */
.input-group input::-webkit-outer-spin-button,
.input-group input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-group input[type=number] {
-moz-appearance: textfield;
}
.input-group span {
margin-left: 10px;
color: #888;
font-size: 14px;
width: 30px;
}
.result-box {
background: var(--input-bg);
border-radius: 8px;
padding: 20px;
border: 1px solid var(--border-color);
}
.result-title {
font-weight: bold;
color: var(--accent-color);
margin-bottom: 15px;
font-size: 16px;
text-align: center;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
}
.result-item {
display: flex;
justify-content: space-between;
padding: 10px 5px;
border-bottom: 1px dashed #333;
font-size: 15px;
}
.result-item:last-child {
border-bottom: none;
}
.gem-lv { font-weight: bold; }
.gem-count { color: #4caf50; font-weight: bold; }
.gem-remain { font-size: 12px; color: #aaa; margin-left: 5px; }
/* 화면이 너무 좁아지면 위아래 배치로 자동 전환 (모바일 지원) */
@media (max-width: 768px) {
.main-layout {
flex-direction: column;
}
.result-side {
width: 100%;
position: static;
}
}
</style>
</head>
<body>
<div class="container">
<h1>💎 보석 & 큐브 통합 계산기</h1>
<div class="guide-text">💡 마우스 <b>휠을 돌리면</b> 수량이 조절되며, 실시간 합산됩니다!</div>
<div class="main-layout">
<div class="input-side">
<div>
<h2 class="cube-title">🛑 에브니 큐브 티켓 수량</h2>
<div id="cube-inputs"></div>
</div>
<div>
<h2 class="gem-title">💎 직접 보유 중인 보석 / 상자</h2>
<div id="gem-inputs"></div>
</div>
</div>
<div class="result-side">
<div class="result-box">
<div class="result-title">⚡ 큐브 포함 최종 합성 예측 (최소 보장)</div>
<div id="result-display">
<div style="text-align:center; color:#888;">수량을 입력해주세요.</div>
</div>
</div>
</div>
</div>
</div>
<script>
const cubeInputsDiv = document.getElementById('cube-inputs');
const gemInputsDiv = document.getElementById('gem-inputs');
// 큐브 인풋 동적 생성 (1해금 ~ 4해금)
for(let i=1; i<=4; i++) {
cubeInputsDiv.innerHTML += `
<div class="input-group cube-group">
<label>에브니 큐브 [제 ${i} 해금]</label>
<input type="number" id="cube${i}" min="0" value="0" oninput="calculateAll()">
<span>장</span>
</div>
`;
}
// 보석 인풋 동적 생성 (1레벨 ~ 9레벨)
for(let i=1; i<=9; i++) {
gemInputsDiv.innerHTML += `
<div class="input-group gem-group">
<label>${i}레벨 보석 상자 / 보석</label>
<input type="number" id="gem${i}" min="0" value="0" oninput="calculateAll()">
<span>개</span>
</div>
`;
}
// 휠 이벤트 및 스크롤 방지 전체 적용
window.onload = function() {
const allInputs = document.querySelectorAll('input[type="number"]');
allInputs.forEach(inputEl => {
inputEl.addEventListener('wheel', function(e) {
e.preventDefault();
let currentValue = parseInt(this.value) || 0;
if (e.deltaY < 0) {
this.value = currentValue + 1;
} else {
if (currentValue > 0) {
this.value = currentValue - 1;
}
}
calculateAll();
}, { passive: false });
});
}
// 종합 계산 로직
function calculateAll() {
let totalGems = Array(12).fill(0);
// 보유 중인 기본 보석 가져와서 더하기
for(let i=1; i<=9; i++) {
totalGems[i] += parseInt(document.getElementById(`gem${i}`).value) || 0;
}
// 큐브 티켓 수량 가져오기
let c1 = parseInt(document.getElementById('cube1').value) || 0;
let c2 = parseInt(document.getElementById('cube2').value) || 0;
let c3 = parseInt(document.getElementById('cube3').value) || 0;
let c4 = parseInt(document.getElementById('cube4').value) || 0;
// 해금별 변경된 상자 개수 및 레벨 적용
totalGems[1] += (c1 * 9); // 1해금: 1레벨 상자 9개
totalGems[2] += (c2 * 6); // 2해금: 2레벨 상자 6개
totalGems[2] += (c3 * 8); // 3해금: 2레벨 상자 8개
totalGems[2] += (c4 * 11); // 4해금: 2레벨 상자 11개
// 하위 레벨부터 상위 레벨로 순차 합성 (3개 -> 1개)
for(let i=1; i<=9; i++) {
let nextLevelGems = Math.floor(totalGems[i] / 3);
totalGems[i+1] += nextLevelGems;
totalGems[i] = totalGems[i] % 3;
}
// 결과 화면 출력
let html = '';
let hasResult = false;
for(let i=10; i>=1; i--) {
if(totalGems[i] > 0 || hasResult) {
hasResult = true;
let label = `${i}레벨 보석`;
if(i === 10) label = `🔥 10레벨 보석`;
html += `
<div class="result-item">
<span class="gem-lv">${label}</span>
<span>
<span class="gem-count">${totalGems[i]}개</span>
${i < 10 && totalGems[i] > 0 ? `<span class="gem-remain">(남음)</span>` : ''}
</span>
</div>
`;
}
}
if(!hasResult) {
html = '<div style="text-align:center; color:#888;">수량을 입력해주세요.</div>';
}
document.getElementById('result-display').innerHTML = html;
}
</script>
</body>
</html>
