<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#ff8a3d" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="오랜지기 28인승 좌석표" />
<title>오랜지기 28인승 좌석표 입력형</title>
<style>
:root{--bg:#fff8ef;--text:#2b241f;--line:#f0dfcf;--orange:#ff8a3d;--card:#ffffff;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text)}
.wrap{max-width:980px;margin:0 auto;padding:16px}
.card{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 12px 28px rgba(0,0,0,.08)}
h1{margin:0 0 6px;font-size:24px;letter-spacing:-.03em}
.sub{margin:0 0 14px;color:#6f655d;font-size:14px;line-height:1.5}
.toolbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:0 0 14px}
button{border:0;border-radius:14px;padding:12px 10px;font-weight:800;font-size:15px;cursor:pointer}
.primary{background:linear-gradient(135deg,#ff9f4a,#ff6f3d);color:#fff}
.ghost{background:#fffdf9;border:1px solid var(--line);color:var(--text)}
.danger{background:#fff0ec;border:1px solid #ffd1c8;color:#c24d38}
.board{position:relative;width:100%;aspect-ratio:1122 / 1402;background:url('seat_map.png') center/contain no-repeat;border-radius:16px;overflow:hidden}
.seat-input{position:absolute;transform:translate(-50%,-50%);width:8.9%;height:2.7%;min-width:52px;min-height:20px;padding:0 3px;border:0;background:transparent;color:#3a2611;font-weight:800;font-size:1.25vw;line-height:1;text-align:center;outline:none;border-radius:999px}
.seat-input:focus{background:rgba(255,255,255,.88);box-shadow:0 0 0 2px rgba(255,138,61,.28)}
.tip{font-size:12px;color:#7d6f65;line-height:1.45;margin:12px 2px 0}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(80px);background:#2b241f;color:#fff;padding:12px 16px;border-radius:999px;font-size:14px;opacity:0;transition:.2s;z-index:30}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:900px){.seat-input{font-size:1.6vw}}
@media (max-width:640px){.wrap{padding:10px}.card{padding:12px}.toolbar{grid-template-columns:1fr}.seat-input{font-size:2.1vw;width:10.5%;height:3.2%;min-width:0;min-height:0}}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<h1>오랜지기 28인승 좌석표</h1>
<p class="sub">이미지 느낌 그대로 유지하고, 각 좌석의 이름 칸에 직접 입력할 수 있게 만든 HTML 버전입니다.</p>
<div class="toolbar">
<button id="copyBtn" class="primary">좌석표 복사</button>
<button id="printBtn" class="ghost">인쇄 / PDF 저장</button>
<button id="clearBtn" class="danger">전체 지우기</button>
</div>
<div class="board" id="board"></div>
<p class="tip">입력한 이름은 이 기기의 브라우저에 자동 저장됩니다. 다음카페에 올릴 때는 이 화면을 캡처하거나 PDF로 저장해서 이미지처럼 올리면 가장 편합니다.</p>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
(()=>{
const POS = {"1": [24.5, 31.7], "2": [37.6, 31.7], "3": [69.8, 31.7], "4": [24.5, 39.0], "5": [37.6, 39.0], "6": [69.8, 39.0], "7": [24.5, 46.4], "8": [37.6, 46.4], "9": [69.8, 46.4], "10": [24.5, 53.8], "11": [37.6, 53.8], "12": [69.8, 53.8], "13": [24.5, 61.1], "14": [37.6, 61.1], "15": [69.8, 61.1], "16": [24.5, 68.5], "17": [37.6, 68.5], "18": [69.8, 68.5], "19": [24.5, 75.8], "20": [37.6, 75.8], "21": [69.8, 75.8], "22": [24.5, 83.1], "23": [37.6, 83.1], "24": [69.8, 83.1], "25": [24.4, 90.4], "26": [37.8, 90.4], "27": [54.0, 90.4], "28": [69.8, 90.4]};
const STORAGE_KEY='orangigi-28-image-input-v1';
const board=document.getElementById('board');
const toastEl=document.getElementById('toast');
let data=load();
function load(){try{return JSON.parse(localStorage.getItem(STORAGE_KEY)||'{}')}catch(e){return {}}}
function save(){localStorage.setItem(STORAGE_KEY, JSON.stringify(data));}
function toast(msg){toastEl.textContent=msg;toastEl.classList.add('show');clearTimeout(toast.t);toast.t=setTimeout(()=>toastEl.classList.remove('show'),1500);}
function render(){
board.innerHTML='';
Object.entries(POS).forEach(([seat,[x,y]])=>{
const input=document.createElement('input');
input.className='seat-input';
input.style.left=x+'%';
input.style.top=y+'%';
input.placeholder='이름';
input.value=data[seat]||'';
input.maxLength=8;
input.setAttribute('data-seat',seat);
input.addEventListener('input',e=>{
const v=e.target.value.trim();
if(v) data[seat]=v; else delete data[seat];
save();
});
board.appendChild(input);
});
}
async function copyText(){
let lines=['오랜지기 28인승 좌석표'];
for(let i=1;i<=28;i++) lines.push(`${i}번: ${data[i]||''}`);
const text=lines.join('
');
try{await navigator.clipboard.writeText(text);toast('좌석표를 복사했어요.');}
catch(e){const ta=document.createElement('textarea');ta.value=text;document.body.appendChild(ta);ta.select();document.execCommand('copy');ta.remove();toast('좌석표를 복사했어요.');}
}
document.getElementById('copyBtn').addEventListener('click',copyText);
document.getElementById('printBtn').addEventListener('click',()=>window.print());
document.getElementById('clearBtn').addEventListener('click',()=>{if(!confirm('입력한 이름을 모두 지울까요?')) return; data={}; save(); render(); toast('전체를 지웠어요.');});
render();
})();
</script>
</body>
</html>