<!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: #2d2d2d;
            --tab-bg: #3c3c3c;
            --input-bg: #505050;
            --text-color: #ffffff;
            --label-color: #d3d3d3;
            --btn-color: #007acc;
            --btn-hover: #005f9e;
            --result-ok: #ffffff;
            --result-no: #fa8072;
        }

        body {
            background-color: #1e1e1e;
            color: var(--text-color);
            font-family: 'Malgun Gothic', 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        /* 메인 컨테이너 (창 크기 고정) */
        .container {
            width: 500px;
            height: 600px; /* 고정 높이 */
            background-color: var(--bg-color);
            border: 1px solid #444;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 크기 고정 */
        }

        /* 탭 영역 */
        .tabs {
            display: flex;
            height: 35px;
            background-color: #1e1e1e;
            flex-shrink: 0;
        }

        .tab {
            flex: 1;
            background-color: var(--bg-color);
            color: #888;
            border: none;
            outline: none;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
            border-right: 1px solid #444;
            border-bottom: 1px solid #444;
            padding: 0;
        }

        .tab.active {
            background-color: var(--tab-bg);
            color: #fff;
            border-bottom: none;
            font-weight: bold;
        }

        .tab:last-child {
            border-right: none;
        }

        /* 입력 영역 (스크롤 가능) */
        .input-area {
            flex: 1; /* 남은 공간 차지 */
            padding: 20px;
            background-color: var(--tab-bg);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* 입력 필드 레이아웃 (Grid 사용) */
        .input-group {
            display: grid;
            grid-template-columns: 150px 1fr;
            align-items: center;
            gap: 10px;
        }

        .input-group label {
            color: var(--label-color);
            font-size: 14px;
            text-align: left;
        }

        .input-group input {
            background-color: var(--input-bg);
            border: 1px solid #666;
            border-radius: 12px;
            color: white;
            padding: 8px;
            font-size: 14px;
            outline: none;
            width: 100%;
            box-sizing: border-box; /* 패딩 포함 크기 계산 */
        }

        .input-group input:focus {
            border-color: var(--btn-color);
        }

        /* 버튼 영역 */
        .btn-area {
            padding: 25px 0;
            flex-shrink: 0;
            display: flex;
            justify-content: center;
        }

        .calculate-btn {
            width: 40%;
            height: 50px;
            background-color: var(--btn-color);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.2s;
        }

        .calculate-btn:hover {
            background-color: var(--btn-hover);
        }

        /* 결과 영역 (완벽한 중앙 정렬) */
        .result-area {
            flex: 1; /* 하단 남은 공간 채우기 */
            display: flex;
            justify-content: center; /* 가로 중앙 */
            align-items: center;     /* 세로 중앙 */
            text-align: center;
            padding: 20px;
            white-space: pre-line; /* 줄바꿈 허용 */
            font-size: 15px;
            line-height: 1.6;
            background-color: var(--bg-color);
            overflow-y: auto;
        }

        .result-text {
            color: #ffffff;
        }
        
        .result-ok { color: var(--result-ok); }
        .result-no { color: var(--result-no); }

    </style>
</head>
<body>

    <div class="container">
        <div class="tabs" id="tabContainer">
            </div>

        <div class="input-area" id="inputContainer">
            </div>

        <div class="btn-area">
            <button class="calculate-btn" onclick="calculate()">계산하기 (Calculate)</button>
        </div>

        <div class="result-area">
            <div id="resultText" class="result-text">재료를 입력하고 계산 버튼을 눌러주세요.</div>
        </div>
    </div>

    <script>
        // ==========================================
        // [1] 데이터 및 설정
        // ==========================================
        const MATERIAL_TYPES = {
            WL: { name: "벌목", A: "원목", B: "부드러운 목재", S: null, C: "아비도스 원목", P: "벌목의 흔적" },
            AR: { name: "고고학", A: "오래된 고대 유물", B: "은은한 고대 유물", S: null, C: "아비도스 고대 유물", P: "고고학의 흔적" },
            FS: { name: "낚시", A: "싱싱한 피라미", B: "튼튼한 붕어", S: null, C: "아비도스 금빛 잉어", P: "낚시의 흔적" },
            MN: { name: "채광", A: "투박한 철광석", B: "천연 보석", S: null, C: "아비도스 원석", P: "채광의 흔적" },
            HR: { name: "수렵", A: "생고기", B: "고급 생고기", S: null, C: "아비도스 농장 생고기", P: "수렵의 흔적" },
            CL: { name: "채집", A: "소박한 꽃잎", B: "귀여운 꽃잎", S: null, C: "아비도스 꽃잎", P: "채집의 흔적" }
        };

        const inputState = {
            WL: { A: "", B: "", S: "", C: "", P: "" },
            AR: { A: "", B: "", S: "", C: "", P: "" },
            FS: { A: "", B: "", S: "", C: "", P: "" },
            MN: { A: "", B: "", S: "", C: "", P: "" },
            HR: { A: "", B: "", S: "", C: "", P: "" },
            CL: { A: "", B: "", S: "", C: "", P: "" }
        };

        let currentType = 'WL';

        // 교환비 (입력 단위 -> 출력 단위)
        const RATES = {
            StoA: { input: 5n, output: 50n },
            BtoA: { input: 25n, output: 50n },
            AtoP: { input: 100n, output: 80n }, // 100개 넣어야 80개 나옴
            BtoP: { input: 50n, output: 80n },
            PtoC: { input: 100n, output: 10n } // 100개 넣어야 10개 나옴
        };
        const RECIPE = { A: 112n, B: 59n, C: 43n };

        // ==========================================
        // [2] 핵심 로직 (이진 탐색 + 묶음 단위 적용)
        // ==========================================
        function runAlgorithm(type, inputs) {
            const canExchangeSpecial = (type === 'WL' || type === 'MN');
            
            // BigInt 변환 (빈 문자열은 0n으로 처리)
            const res = {
                A: BigInt(inputs.A || 0),
                B: BigInt(inputs.B || 0),
                S: BigInt(inputs.S || 0),
                C: BigInt(inputs.C || 0),
                P: BigInt(inputs.P || 0)
            };

            let low = 0n;
            // 충분히 큰 상한값 설정
            let maxA = res.A + (res.B * 2n) + (res.C * 20n);
            let high = (maxA / RECIPE.A) + 2000000000n;

            let bestOutput = 0n;
            let bestLog = {};

            // 이진 탐색 시작
            while (low <= high) {
                let mid = low + (high - low) / 2n;
                if (mid < 0n) break;

                const check = canProduce(mid, { ...res }, canExchangeSpecial);
                if (check.possible) {
                    bestOutput = mid;
                    bestLog = check.log;
                    low = mid + 1n; // 더 큰 값을 찾아봄
                } else {
                    high = mid - 1n; // 불가능하므로 범위를 줄임
                }
            }

            return { output: bestOutput, logs: bestLog };
        }

        // 100개 단위 묶음(Batch) 교환 규칙을 엄격하게 적용한 검사 함수
        function canProduce(targetCount, inputRes, canExchangeSpecial) {
            let log = { StoA: 0n, BtoA: 0n, AtoP: 0n, BtoP: 0n, PtoC: 0n };
            if (targetCount === 0n) return { possible: true, log };

            let res = { ...inputRes }; // 자원 복사본 사용

            // 1. S -> A 변환 (5개 단위)
            if (canExchangeSpecial && res.S > 0n) {
                let batches = res.S / RATES.StoA.input; // 몫만 취함 (자투리 버림)
                log.StoA = batches;
                res.A += batches * RATES.StoA.output;
            }

            // 2. 목표 제작을 위한 필요량 계산
            let reqA = targetCount * RECIPE.A;
            let reqB = targetCount * RECIPE.B;
            let reqC = targetCount * RECIPE.C;

            // [검증 1] B 재료 절대량 부족 시 불가
            if (res.B < reqB) return { possible: false, log };

            // [검증 2] 부족한 C를 채우기 위한 가루(P) 계산 (100개 단위 묶음 적용)
            let missingC = 0n;
            if (res.C < reqC) {
                missingC = reqC - res.C;
            }

            let neededP = 0n;
            if (missingC > 0n) {
                // C 10개를 얻기 위해 P 100개가 필요함
                let outputPerBatch = RATES.PtoC.output; // 10
                let inputPerBatch = RATES.PtoC.input;   // 100
                
                // 필요 묶음 수 올림 계산: (부족분 + 9) / 10
                let batchesC = (missingC + outputPerBatch - 1n) / outputPerBatch;
                neededP = batchesC * inputPerBatch; // 실제 필요한 가루 양 (100의 배수)
                
                log.PtoC = batchesC;
            }

            // 보유 가루(P) 차감
            if (res.P >= neededP) {
                res.P -= neededP;
                neededP = 0n;
            } else {
                neededP -= res.P;
                res.P = 0n;
            }

            // [검증 3] 남은 재료를 모두 A로 환산하여 최종 비교 (묶음 단위 적용)
            
            // 3-1. 잉여 B -> A 환산 (25개 단위)
            let totalAvailableA = res.A;

            // 3-2. 부족한 가루를 A 또는 남는 B로 제작
let remainingP = neededP;

// 먼저 남는 B를 가루로 교환
let surplusB = res.B - reqB;

if (remainingP > 0n && surplusB >= RATES.BtoP.input) {
    let possibleBatches = surplusB / RATES.BtoP.input;
    let neededBatches = (remainingP + RATES.BtoP.output - 1n) / RATES.BtoP.output;

    let batchesBtoP = possibleBatches < neededBatches
        ? possibleBatches
        : neededBatches;

    log.BtoP = batchesBtoP;

    let producedP = batchesBtoP * RATES.BtoP.output;
    remainingP -= producedP;

    if (remainingP < 0n) remainingP = 0n;
}

// 아직 부족하면 A를 가루로 교환
let aForP = 0n;

if (remainingP > 0n) {
    let batchesAtoP =
        (remainingP + RATES.AtoP.output - 1n)
        / RATES.AtoP.output;

    aForP = batchesAtoP * RATES.AtoP.input;

    log.AtoP = batchesAtoP;
}

// 제작용 철광석 + 가루 제작용 철광석
let totalReqA = reqA + aForP;

if (res.A >= totalReqA) {
    return { possible: true, log };
}

return { possible: false, log };

            return { possible: false, log };
        }

        // ==========================================
        // [3] UI 컨트롤 및 이벤트
        // ==========================================
        function init() {
            renderTabs();
            renderInputs();
        }

        function renderTabs() {
            const tabContainer = document.getElementById('tabContainer');
            tabContainer.innerHTML = '';
            
            Object.keys(MATERIAL_TYPES).forEach(key => {
                const btn = document.createElement('button');
                btn.className = `tab ${key === currentType ? 'active' : ''}`;
                btn.innerText = MATERIAL_TYPES[key].name;
                btn.onclick = () => {
                    currentType = key;
                    renderTabs(); 
                    renderInputs(); 
                    resetResultBox();
                };
                tabContainer.appendChild(btn);
            });
        }

        function renderInputs() {
            const container = document.getElementById('inputContainer');
            container.innerHTML = '';
            const info = MATERIAL_TYPES[currentType];
            const fields = ['A', 'B', 'S', 'C', 'P'];

            fields.forEach(fieldKey => {
                const labelText = info[fieldKey];
                if (!labelText) return;

                const group = document.createElement('div');
                group.className = 'input-group';

                const label = document.createElement('label');
                label.innerText = labelText;

                const input = document.createElement('input');
                input.type = 'text';
                input.value = inputState[currentType][fieldKey];
                input.placeholder = "0";
                
                // 숫자만 입력되도록 처리
                input.oninput = (e) => {
                    e.target.value = e.target.value.replace(/[^0-9]/g, '');
                    inputState[currentType][fieldKey] = e.target.value;
                };

                group.appendChild(label);
                group.appendChild(input);
                container.appendChild(group);
            });
        }

        function resetResultBox() {
            const resultEl = document.getElementById('resultText');
            resultEl.innerText = "재료를 입력하고 계산 버튼을 눌러주세요.";
            resultEl.className = "result-text";
        }

        function calculate() {
            const inputs = inputState[currentType];
            // 입력값이 하나도 없으면 계산하지 않음
            if (Object.values(inputs).every(val => val === "" || val === "0")) {
                resetResultBox();
                return;
            }

            const result = runAlgorithm(currentType, inputs);
            const info = MATERIAL_TYPES[currentType];
            const resultEl = document.getElementById('resultText');

            if (result.output === 0n) {
                resultEl.innerText = "제작 가능한 수량이 없습니다.";
                resultEl.className = "result-text result-no";
            } else {
                resultEl.className = "result-text result-ok";
                const fmt = (n) => n.toLocaleString();
                
                let text = `[ ${info.name} 결과 ]<br><br>`;
text += `총 제작 가능 횟수: ${fmt(result.output)}회<br><br>`;
text += `< 최적 교환 경로 ><br>`;

const logs = result.logs;
// 교환 횟수(묶음 단위)를 표시
if (logs.AtoP > 0n)
    text += `<span style="color:#999999">${info.A}</span> -> <span style="color:#D9A441">${info.P}</span> : ${fmt(logs.AtoP)}회 교환<br>`;

if (logs.BtoP > 0n)
    text += `<span style="color:#4dac00">${info.B}</span> -> <span style="color:#D9A441">${info.P}</span> : ${fmt(logs.BtoP)}회 교환<br>`;

if (logs.PtoC > 0n)
    text += `<span style="color:#D9A441">${info.P}</span> -> <span style="color:#006dc6">${info.C}</span> : ${fmt(logs.PtoC)}회 교환<br>`;

resultEl.innerHTML = text;
            }
        }

        // 초기화 실행
        init();

    </script>
</body>
</html>
<!--
Original: 상급 아비도스 계산기
Original author: @tuijblab-the-decoder
Original: https://codepen.io/tuijblab-the-decoder/pen/azZpWrW
-->