* { box-sizing: border-box; }
html { background: #061d14; }
body { margin: 0; font-family: Arial, 'Malgun Gothic', sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.canvas { position: relative; width: 100%; max-width: 540px; margin: 0 auto; --unit: .5px; }
.page-image { display: block; width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hotspot { position: absolute; display: block; border: 0; background: transparent; cursor: pointer; }
.hotspot:focus-visible, .seat-submit:focus-visible { outline: 3px solid #f9d966; outline-offset: 3px; }
.home .hotspot { left: 12.78%; width: 74.44%; height: 6.67%; }
.home-welcome { top: 51.67%; }
.home-program { top: 60.05%; }
.home-seating { top: 68.43%; }
.home-location { top: 76.82%; }
.home-runway { top: 85.2%; }
.back-link { position: absolute; top: 10px; left: 10px; z-index: 5; color: #f3f1df; background: #063a29; text-decoration: none; padding: 7px 12px; font-size: 12px; border: 1px solid #c7d0b1; border-radius: 20px; }
.seat-form { position: absolute; inset: 0; pointer-events: none; }
/* 새 좌석 원본 1080×2791: 이름 (140,703,681,100), 확인 (840,704,117,98) */
.seat-name { position: absolute; pointer-events: auto; left: 12.962963%; top: 25.188105%; width: 63.055556%; height: 3.582945%; border: 1px solid #efeedb; border-radius: 0; background: #082c1f; color: #f1efdc; padding: 0 3.2%; font-size: max(16px, calc(var(--unit) * 32)); outline-offset: 3px; }
.seat-name::placeholder { color: #e5e4ce; opacity: 1; }
.seat-submit { position: absolute; pointer-events: auto; left: 77.777778%; top: 25.223934%; width: 10.833333%; height: 3.511286%; border: 0; border-radius: 0; background: #f0efde; color: #082b1e; font-size: calc(var(--unit) * 34); font-weight: 700; padding: 0; }
.seat-submit:disabled { opacity: .6; }
.seat-status { position: absolute; top: 29%; left: 8%; width: 84%; text-align: center; color: #fff3b0; font-size: calc(var(--unit) * 22); line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.table-result { position: absolute; top: 41.934790%; left: 27.314815%; width: 45.277778%; height: 3.618775%; display: flex; align-items: center; justify-content: center; background: #001d10; color: #f1efdc; font: calc(var(--unit) * 47)/1 Georgia, serif; text-align: center; }
.table-result.multiple { font-size: calc(var(--unit) * 31); }
.seat-highlights { position: absolute; inset: 0; pointer-events: none; }
.seat-highlight { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoom-open { left: 30%; top: 85.345754%; width: 40%; height: 3.582945%; }
.zoom-dialog { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #06291c; color: #f1efdc; }
.zoom-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #547260; }
.zoom-toolbar button { border: 1px solid #bdcbb3; background: #f0efde; padding: 8px 15px; color: #083c29; }
.zoom-hint { padding: 0 15px; font-size: 13px; }
.zoom-scroll { overflow: auto; flex: 1; overscroll-behavior: contain; }
.zoom-content { position: relative; width: 1080px; height: 1510px; overflow: hidden; margin: 0 auto; }
.zoom-content .zoom-base, .zoom-content .seat-highlight { position: absolute; left: 0; top: -850px; width: 1080px; height: 2791px; }
.zoom-content .table-result { left: 295px; top: 320.5px; width: 489px; height: 101px; font-size: 47px; }
.zoom-content .table-result.multiple { font-size: 31px; }
.kakaomap { position: absolute; left: 6%; top: 32.6%; width: 88%; height: 13%; background: #eeedde; }
#map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #06442d; background: #f0efde; font-size: 14px; line-height: 1.7; }
.tmap-link { left: 8%; top: 47.65%; width: 40.2%; height: 2.55%; }
.kakao-link { left: 51.8%; top: 47.65%; width: 40.2%; height: 2.55%; }
@media (max-width: 540px) { .canvas { --unit: calc(100vw / 1080); } }