@font-face{font-family:'A Modal JP';src:url('assets/shippori-0.ttf') format('truetype');font-weight:400;font-display:swap}
body.modal-open{overflow:hidden}
#image-dialog{--paper:#f3f3f3;--ink:#4f554b;--line:#d7d9cf;--green:#596a55;--sans:Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif;border:0;padding:0;color:var(--ink);background:var(--paper);max-height:90svh;font:400 15px 'A Modal JP','Yu Mincho',serif}
#image-dialog::backdrop{background:#142119bd;backdrop-filter:blur(5px)}
.lightbox{width:min(1150px,92vw)}.dialog-top{display:flex;justify-content:space-between;align-items:center;padding:19px 25px;border-bottom:1px solid var(--line);font-size:13px}.close-dialog{font:12px var(--sans);display:flex;align-items:center;gap:20px;padding:8px}.close-dialog span{font-size:22px}.lightbox .map-viewport>img{max-height:77svh;object-fit:contain;padding:25px;background:white}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:760px){.dialog-top{padding:12px 15px;font-size:11px;gap:15px}.close-dialog{font-size:10px;gap:10px;flex-shrink:0}.lightbox .map-viewport>img{padding:10px}}
@media(min-width:761px){.dialog-top{font-size:14px}}
/* V1.35: reversible map/plan modal motion; native close follows the fade. */
#image-dialog.has-image-motion[open]{--dialog-entry-scale:.985;opacity:0;transform:translateY(12px) scale(var(--dialog-entry-scale,1))}
#image-dialog.has-image-motion.is-visible[open]{opacity:1;transform:none}
#image-dialog.has-image-motion[open]::backdrop{opacity:0}
#image-dialog.has-image-motion.is-visible[open]::backdrop{opacity:1}
@media(prefers-reduced-motion:no-preference){
 #image-dialog.has-image-motion[open]{transition:opacity 360ms cubic-bezier(.4,0,.6,1),transform 360ms cubic-bezier(.4,0,.6,1)}
 #image-dialog.has-image-motion.is-visible[open]{transition-duration:560ms;transition-timing-function:cubic-bezier(.22,.61,.36,1)}
 #image-dialog.has-image-motion[open]::backdrop{transition:opacity 360ms ease-in-out}
 #image-dialog.has-image-motion.is-visible[open]::backdrop{transition-duration:420ms;transition-timing-function:ease-out}
}
@media(max-width:760px),(hover:none) and (pointer:coarse){#image-dialog.has-image-motion[open]{--dialog-entry-scale:1}}

/* V1.46: desktop map viewport. Touch sizing and gestures below remain separate. */
.lightbox[open]{display:flex;flex-direction:column;height:min(90svh,980px);max-height:calc(100svh - 64px);max-height:calc(100dvh - 64px);overflow:hidden}
.lightbox .dialog-top{flex:none}.lightbox .close-dialog{min-height:44px;min-width:44px}
 .map-viewport{display:block;position:relative;flex:1 1 auto;min-height:0;height:min(70svh,800px);overflow:hidden;background:#fff;touch-action:pinch-zoom;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
 .map-viewport:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
 .lightbox .map-viewport>img{position:absolute;max-width:none;max-height:none;padding:0;transform-origin:center center;object-fit:contain;user-select:none;-webkit-user-drag:none;touch-action:none}
 .map-viewport[aria-busy="true"]>img{visibility:hidden}.map-viewport.is-zoomed{cursor:grab}.map-viewport.is-dragging{cursor:grabbing}
 .map-zoom-controls{display:flex;flex:none;align-items:center;justify-content:center;gap:8px;padding:12px 20px 0;border-top:1px solid var(--line)}
 .map-zoom-controls button{min-width:44px;min-height:44px;border:1px solid #aeb6a4;padding:8px 10px;font:14px/1.4 var(--sans);color:var(--green);touch-action:manipulation}
 .map-zoom-controls button:disabled{opacity:.4;cursor:default}.map-zoom-controls output{min-width:48px;text-align:center;font:12px/1.4 var(--sans);letter-spacing:0}
 .map-zoom-hint{display:block;flex:none;margin:0;padding:8px 20px 14px;font:11px/1.5 var(--sans);letter-spacing:0;text-align:center}
@media(min-width:761px) and (hover:hover){.map-zoom-controls button:not(:disabled):hover{background:#e7eadd}}
/* V1.23 touch behavior and dimensions are retained. */
@media(max-width:760px),(hover:none) and (pointer:coarse){
 .map-page-locked{position:fixed;top:var(--map-scroll-top);left:0;width:100%}
 .lightbox[open]{height:fit-content;display:flex;flex-direction:column;max-height:calc(100svh - 32px);max-height:calc(100dvh - 32px);overflow:hidden}
 .lightbox .dialog-top{flex:none}.lightbox .close-dialog{min-height:44px;min-width:44px}
 .map-viewport{display:block;position:relative;flex:1 1 auto;min-height:0;height:min(60svh,520px);overflow:hidden;background:#fff;touch-action:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
 .map-viewport:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
 .lightbox .map-viewport>img{position:absolute;max-width:none;max-height:none;padding:0;transform-origin:center center;object-fit:contain;user-select:none;-webkit-user-drag:none;touch-action:none}
 .map-viewport[aria-busy="true"]>img{visibility:hidden}.map-viewport.is-zoomed{cursor:grab}.map-viewport.is-dragging{cursor:grabbing}
 .map-zoom-controls{display:flex;flex:none;align-items:center;justify-content:center;gap:8px;padding:10px 12px 0;border-top:1px solid var(--line)}
 .map-zoom-controls button{min-width:44px;min-height:44px;border:1px solid #aeb6a4;padding:8px 10px;font:14px/1.4 var(--sans);color:var(--green);touch-action:manipulation}
 .map-zoom-controls button:disabled{opacity:.4;cursor:default}.map-zoom-controls output{min-width:48px;text-align:center;font:12px/1.4 var(--sans);letter-spacing:0}
 .map-zoom-hint{display:block;flex:none;margin:0;padding:8px 12px 12px;font:11px/1.5 var(--sans);letter-spacing:0;text-align:center}
}


#image-dialog.is-transparent-map .map-viewport,#image-dialog.is-transparent-map #expanded-image{background:transparent}