@charset "UTF-8";
* { box-sizing: border-box; }
html { margin: 0; background: #100b08; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: #fff; background: #100b08; font-family: Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button, label { touch-action: manipulation; }
[hidden] { display: none !important; }

/* 전체 최대 폭은 이곳에서 수정하세요. 원본 이미지 크기는 변경하지 않습니다. */
.invitation { position: relative; width: 100%; max-width: 860px; margin: 0 auto; overflow: hidden; background: #100b08; touch-action: pan-y pinch-zoom; }
.slide-track { display: flex; width: 100%; transition: transform .42s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.slide-track.no-motion { transition: none; }
.slide { position: relative; flex: 0 0 100%; width: 100%; min-width: 0; }
.page-art { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.hotspot { position: absolute; z-index: 3; display: block; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.centered { left: 50%; transform: translateX(-50%); }
.hotspot:focus-visible { outline: 2px solid #e8d4a6; outline-offset: 3px; background: rgba(255,255,255,.08); }
.hotspot:disabled { cursor: default; }
.hotspot:active:not(:disabled) { background: rgba(255,255,255,.08); }
.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; }

/* 모든 입력창도 이미지 좌표를 따라 움직이며 실제 문구는 index.php에서 직접 수정합니다. */
.art-input { position: absolute; z-index: 4; min-width: 0; padding: 0 1%; color: #fff; caret-color: #fff; background: transparent; border: 0; border-radius: 0; outline: 0; font-size: 16px; font-size: clamp(16px,3.2vw,27px); line-height: normal; text-shadow: 0 1px 3px #160b03; }
.art-input:focus { background: rgba(12,8,5,.35); box-shadow: inset 0 -2px 0 #efddba; }
.art-input:disabled { opacity: .4; -webkit-text-fill-color: #fff; cursor: default; }
.art-input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 99999s ease-out; }
.choice { position: absolute; z-index: 5; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice-mark { position: absolute; left: 0; top: 16%; width: 4.65vw; max-width: 40px; height: 68%; pointer-events: none; }
.choice-mark::after { content: ""; position: absolute; left: 25%; top: 8%; width: 36%; height: 68%; border: solid #fff4cc; border-width: 0 3px 3px 0; transform: rotate(43deg); opacity: 0; filter: drop-shadow(0 1px 2px #000); }
.choice input:checked + .choice-mark::after { opacity: 1; }
.choice input:focus-visible + .choice-mark { outline: 2px solid #e8d4a6; outline-offset: 3px; }
.choice input:disabled { cursor: default; }
.choice input:disabled + .choice-mark { opacity: .4; }
.rsvp-status { position: absolute; z-index: 4; top: 64.5%; left: 50%; transform: translateX(-50%); width: 79%; margin: 0; padding: 5px 8px; font-size: 14px; line-height: 1.45; text-align: center; color: #fff5dd; background: rgba(12,8,5,.75); border-radius: 3px; }
.rsvp-status:empty { display: none; }

.modal { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.75); }
.modal-panel { width: 100%; max-width: 390px; padding: 32px 26px 24px; color: #f5efdf; background: #241a13; border: 1px solid #89734d; box-shadow: 0 20px 70px #0009; text-align: center; }
.modal-brand { margin: 0 0 22px; font-size: 13px; letter-spacing: .2em; color: #d0ba8f; }
.modal h1 { margin: 0 0 15px; font-size: 22px; font-weight: 500; }
.modal-panel > p:not(.modal-brand) { margin: 0 0 26px; font-size: 16px; line-height: 1.65; word-break: keep-all; white-space: pre-line; }
.modal-confirm { width: 100%; min-height: 46px; color: #19130c; background: #ddc49b; border: 0; font-size: 16px; cursor: pointer; }
.modal-confirm:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.modal-open { overflow: hidden; }
.noscript { position: fixed; z-index: 50; left: 0; bottom: 0; width: 100%; margin: 0; padding: 16px; text-align: center; background: #281b11; color: #fff; }
@media (prefers-reduced-motion: reduce) { .slide-track { transition: none; } }