:root{color-scheme:dark;--ink:#f7edda;--muted:#b6c4b5;--gold:#edcc92;--line:#e5dfb638;--night:#12221e;font-family:"Malgun Gothic",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#0e1c18;color:var(--ink)}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid var(--line);border-radius:6px;background:#182a24e8;color:var(--ink);min-height:39px;padding:7px 12px;font-size:12px}
button:hover{background:#31463a}
button:focus-visible,a:focus-visible,.viewport:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a{color:inherit}
.header{display:flex;align-items:center;gap:9px;padding:10px clamp(16px,3.5vw,52px);min-height:65px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 19px "Batang","AppleMyungjo",serif;white-space:nowrap}
.brand img{width:30px}
.header-note{margin:0 auto 0 14px;color:var(--muted);font-size:12px}
.time-select{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px;flex:none}
.time-select button{min-height:33px;min-width:44px;padding:5px 9px;border-color:transparent;background:transparent}
.time-select button[aria-pressed=true]{background:#edcc92;color:#252015;border-color:#ffe0aa;font-weight:700}
.time-select button:not([aria-pressed=true]):hover{background:#31463a}
#sound[aria-pressed=true],#view[aria-pressed=true],#photo-mode[aria-pressed=true]{color:#ffe3ab;border-color:#d2af65}
#name-button{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{max-width:1680px;margin:auto;padding:clamp(12px,2.5vw,35px)}
.experience{display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,300px);gap:12px;min-height:clamp(560px,79vh,910px)}
.world{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:12px;background:#27433b}
.viewport{position:absolute;inset:0;cursor:grab;touch-action:none}
.viewport:active{cursor:grabbing}
.viewport:focus-visible{outline-offset:-4px}
.viewport canvas{display:block;width:100%;height:100%}
.photo-layer{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .55s ease;overflow:hidden;pointer-events:none;background:#1e2d24}
.photo-layer.enabled{opacity:1}
body[data-time=night] .photo-layer.enabled img{filter:brightness(.32) saturate(.68) hue-rotate(10deg)}
.photo-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;opacity:0;transition:opacity 1.55s ease;transform:translate(var(--photo-x,0%),var(--photo-y,0%)) scale(var(--photo-scale,1.12))}
.photo-layer img[data-photo=hall]{object-position:center 48%}
.photo-layer img.active{opacity:1}
@media(prefers-reduced-motion:reduce){.photo-layer,.photo-layer img{transition:none}}
.world::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(135deg,#0b1817cc,transparent 35%),linear-gradient(0deg,#0b1817b8,transparent 23%)}
.scene-info,.scene-controls,.arrival{position:absolute;z-index:2}
.scene-info{left:clamp(14px,3vw,42px);top:clamp(16px,3.6vw,49px);max-width:83%;pointer-events:none;text-shadow:0 1px 8px #0d1915}
.kicker{margin:0;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.15em}
.scene-info .kicker>span:first-child{display:inline-block;width:6px;height:6px;vertical-align:2px;border-radius:50%;background:var(--gold);margin-right:4px}
h1,h2{font-family:"Batang","AppleMyungjo","Noto Serif CJK KR",serif;font-weight:500;letter-spacing:-.055em}
h1{margin:9px 0;font-size:clamp(26px,4.2vw,58px)}
h2{margin:6px 0 9px;font-size:clamp(20px,2vw,29px)}
#scene-note,.guide p{font-size:12px;line-height:1.65}
#scene-note{margin:0;color:#f1f0d9}
.scene-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;right:14px;bottom:15px;max-width:51%}
.arrival{left:14px;bottom:15px;max-width:46%}
#action-row{display:flex;gap:5px;flex-wrap:wrap}
.primary{background:#edcc92;color:#252015;border-color:#ffe0aa;font-weight:700}
.primary:hover{background:#ffe4b8}
.primary:disabled{background:#655e50;color:#f3ebd9;border-color:#847962;cursor:not-allowed}
.progress{margin-top:6px;padding:7px 10px;border:1px solid var(--line);border-radius:7px;background:#101e18df;font-size:12px;min-width:122px}
.progress strong{font-size:20px}
progress{display:block;width:100%;height:5px;margin-top:4px;accent-color:var(--gold)}
.guide{display:flex;flex-direction:column;gap:14px;padding:18px 15px;border:1px solid var(--line);border-radius:12px;background:#172a23}
.guide-top p:last-child,.guide-foot p{margin:0;color:var(--muted)}
.map{position:relative;isolation:isolate;min-height:310px;flex:1;max-height:600px;overflow:hidden;border:1px solid #c8d9aa42;border-radius:9px;background:radial-gradient(ellipse at 56% 43%,#395141,#233c31 78%)}
.map svg{position:absolute;width:100%;height:100%;inset:0}
.contours{fill:none;stroke:#aabf91;stroke-width:.38;opacity:.38}
.map-trail{fill:none;stroke:#d7be86;stroke-width:.9;stroke-dasharray:1.4 1;opacity:.65}
.map-roof,.map-trees{fill:#b9cf96;opacity:.27}
.north{position:absolute;right:10px;top:10px;color:#d8dfc0;font-size:10px;letter-spacing:.09em}
.pin{position:absolute;left:var(--x);top:var(--y);z-index:1;transform:translate(-50%,-50%);min-height:32px;padding:5px 8px;white-space:nowrap;border-radius:20px;background:#152b23;color:#fff0d4}
.pin[aria-current]{background:#e9cc98;color:#242517;border-color:#ffe0a8;font-weight:700}
.pin.target{border-color:#ffdd9b;box-shadow:0 0 0 2px #f4db9152}
.map-dot{position:absolute;top:var(--dot-y,58%);left:var(--dot-x,51%);z-index:2;pointer-events:none;width:9px;height:9px;transform:translate(-50%,13px);background:#fff5c9;border:1px solid #855919;border-radius:50%;box-shadow:0 0 0 3px #f9dc9867}
.legend{color:var(--muted);font-size:11px;display:flex;align-items:center;gap:7px}
.legend span{width:7px;height:7px;border-radius:50%;background:#f6df9c}
.legend .legend-path{width:15px;height:0;margin-left:10px;border-top:1px dashed #e4bf7d;background:none;border-radius:0}
.guide-foot{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding-top:11px}
.guide-foot img{width:24px}
.recording-credit{color:var(--muted);font-size:11px;text-underline-offset:2px;align-self:flex-end}
.world-error{position:absolute;inset:30% 12% auto;z-index:3;padding:24px;background:#14251f;border:1px solid var(--line);border-radius:8px}
dialog{color:var(--ink);background:#1a2d24;border:1px solid #d3b07d;border-radius:12px;width:min(380px,calc(100% - 26px));padding:0}
dialog::backdrop{background:#081410b8}
form{padding:24px;display:grid;gap:8px;position:relative}
form label{font-size:12px;display:block}
input,select,textarea{width:100%;padding:10px;border-radius:5px;border:1px solid var(--line);background:#11221b;color:var(--ink)}
textarea{display:block;min-height:62px;resize:vertical;font:inherit;font-size:16px}
form select{margin-top:5px}
#close-dialog,.dialog-close{position:absolute;right:10px;top:10px}
#dialog-submit{margin-top:7px}
dialog{max-height:calc(100dvh - 28px);overflow:auto}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:13px;margin-bottom:4px}
.optional,.seat-direction,.tile-help{color:var(--muted);font-size:11px}
.seat-direction{text-align:center;margin:0 0 4px}
.seat-options,.offering-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.seat-options label,.offering-options label{position:relative}
.seat-options input,.offering-options input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seat-options span,.offering-options span{display:grid;place-items:center;min-height:43px;padding:3px;border:1px solid var(--line);border-radius:7px;text-align:center}
.seat-options input:checked+span,.offering-options input:checked+span{background:#edcc92;color:#252015;border-color:#ffe0aa}
.seat-options input:focus-visible+span,.offering-options input:focus-visible+span{outline:2px solid #edcc92;outline-offset:2px}
.seat-options input:disabled+span{opacity:.44}
#seat-status,#offering-result{margin:4px 0;font-size:12px;color:#efd6aa}
#bow-fields>label,#tile-fields>label{margin:7px 0 4px}
#bow-wish-label,#bow-seat-label{display:block;max-width:220px;overflow-wrap:anywhere}
@font-face{font-family:"Sansa Pen";src:url("assets/fonts/NanumPenScript-Regular.ttf") format("truetype");font-display:swap}
.offering-tile{display:block;width:100%;height:auto;border-radius:8px;border:1px solid #846d59;background:#292b24}
.tile-help{display:flex;justify-content:space-between;gap:8px;margin:3px 0}
.offering-actions{display:flex;gap:6px;flex-wrap:wrap}
.offering-history{padding:18px 16px}
.offering-history h2{margin:0 42px 4px 0;font-family:var(--serif);font-size:25px}
#offering-empty{font-size:14px;margin:16px 0 0}
#offering-records{list-style:none;display:grid;gap:7px;margin:12px 0 0;padding:0}
#offering-records li{border:1px solid var(--line);border-radius:8px;background:#15271e}
.offering-record{display:flex;justify-content:space-between;align-items:center;gap:6px 12px;padding:10px;flex-wrap:wrap}
summary.offering-record{display:list-item;cursor:pointer;list-style-position:inside}
summary.offering-record time{float:right;margin:2px 0 0 8px}
.offering-record time{font-size:11px;color:var(--muted)}
.offering-record-meta,.offering-record-wish{margin:0 10px 9px}
.offering-record-meta{font-size:11px;color:var(--muted)}
.offering-record-wish{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
#offering-wish-fields label{margin:7px 0 4px}
.offering-record-tile{padding:0 10px 10px;display:grid;gap:6px}
.offering-record-tile button{justify-self:start}
#offering-tile-detail{width:min(640px,calc(100% - 26px))}
#save-offering-tile{margin-top:8px}
.offering-pages{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:var(--ink);font-size:12px}
.offering-pages span{padding:5px 7px;background:#182a24e8;border-radius:5px;white-space:nowrap}
.offering-pages button:disabled{opacity:.48;cursor:default}
.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
#map-shortcut{display:none}
@media(max-width:760px){
  .experience{grid-template-columns:1fr}
  .world{height:max(410px,64svh)}
  .guide{padding:14px;gap:9px}
  .map{min-height:255px}
  #map-shortcut{display:inline-block}
}
@media(max-width:580px){
  .header{display:grid;grid-template-columns:minmax(0,1fr) auto auto}
  .header-note{display:none}
  .time-select{grid-row:2;grid-column:1/-1;justify-self:start}
}
@media(max-width:430px){
  .header-note{display:none}
  .brand{margin-right:auto;font-size:16px}
  .brand img{width:25px}
  .scene-controls{bottom:10px;right:9px;gap:4px}
  .scene-controls button{padding-inline:6px;min-height:33px;font-size:10px}
  .arrival{bottom:10px;left:9px}
}