.timeline-ui{display:none}body.landing .timeline-ui{display:block;position:fixed;z-index:10;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(540px,82vw);padding:14px 22px 8px;border-radius:5px;background:linear-gradient(180deg,rgba(15,31,43,0),rgba(15,31,43,.32));color:#fff9ee;text-shadow:0 1px 8px #15273380}.timeline-caption{text-align:center;pointer-events:none;min-height:52px}.timeline-caption span{display:block;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;opacity:.85;margin-bottom:7px}.timeline-caption strong{font-family:'Noto Serif KR',Georgia,serif;font-size:21px;font-weight:400;letter-spacing:.4px}#time-slider{appearance:none;-webkit-appearance:none;display:block;width:100%;margin:9px 0 0;height:32px;background:transparent;cursor:ew-resize;touch-action:pan-y}#time-slider::-webkit-slider-runnable-track{height:1px;background:#fff5df88}#time-slider::-moz-range-track{height:1px;background:#fff5df88}#time-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;margin-top:-6.5px;border:1px solid #fff9e8;border-radius:50%;background:#fff9e8;box-shadow:0 0 0 5px #fff9e814}#time-slider::-moz-range-thumb{width:14px;height:14px;border:1px solid #fff9e8;border-radius:50%;background:#fff9e8}.timeline-ends{display:flex;justify-content:space-between}.timeline-ends button{border:0;background:transparent;padding:8px;cursor:pointer}.timeline-ends button:after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:#fff8e566}.timeline-ends button.active:after{background:#fff8e5}#time-slider:focus-visible{outline:1px solid #fff9e8;outline-offset:3px}.people-scene>.timeline-previous{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s ease}.people-scene>.timeline-current{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.people-scene .person-hit{z-index:2}.people-scene .person-name{z-index:3}@media(max-width:760px){.timeline-caption strong{font-size:18px}.timeline-caption span{font-size:9px}.timeline-ui{padding:10px 14px 3px!important}.timeline-caption{min-height:46px}}@media(prefers-reduced-motion:reduce){.people-scene>.timeline-previous{transition:none}}
/* A transient, lightweight geographic cue; never shifts the caption or catches input. */
.location-map{position:absolute;left:50%;bottom:calc(100% + 10px);width:clamp(190px,24vw,280px);padding:10px 16px 8px;transform:translate(-50%,5px);border-radius:10px;background:rgba(18,36,45,.64);border:1px solid rgba(250,246,226,.17);box-shadow:0 8px 28px #0c1e2920;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1.3s ease,transform 1.3s ease,visibility 0s 1.3s}.location-map.visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s ease,transform .18s ease,visibility 0s}.location-map svg{display:block;width:100%;height:auto;overflow:visible}.map-land{fill:#e6e8dd52;stroke:#f4f2e346;stroke-width:.45;stroke-linejoin:round}.map-halo{fill:#ffc98725;stroke:#ffdc9a66;stroke-width:.6}.map-core{fill:#ffdc9a;stroke:#fff9e7;stroke-width:1}@media(max-height:520px){.location-map{width:175px;padding:5px 10px;bottom:100%}}@media(prefers-reduced-motion:reduce){.location-map,.location-map.visible{transition:none}}

.location-map{width:clamp(210px,25vw,280px);padding:9px}.photo-peek{width:100%;height:115px;object-fit:cover;display:block;border-radius:5px;margin-bottom:8px}.location-map svg{height:90px}.settled-previous{position:fixed;z-index:1;pointer-events:none;object-fit:fill;opacity:0}.timeline-status{display:block;font-size:10px;text-align:center;color:#fff9ed;min-height:0}.timeline-status:empty{display:none}.timeline-ends button{padding:8px 3px;min-width:14px}@media(max-height:600px){.photo-peek{height:65px}.location-map svg{height:55px}}@media(prefers-reduced-motion:reduce){.settled-previous{transition:none!important}}

/* A consistent 4:3 preview, cropped around each photograph’s subjects. */
.memory-frame{position:relative;width:100%;height:auto;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:8px;background:none;border:0;box-shadow:none}
/* Two layers dissolve in a fixed slot; masks soften rectangular edges. */
.memory-frame{display:grid;place-items:center}
.memory-frame .photo-peek{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:cover;border-radius:18px;filter:saturate(.62) sepia(.08) contrast(.96);opacity:0;transition:opacity .65s ease;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.memory-frame .photo-peek.peek-active{opacity:1}
.memory-frame:after{content:none}
.location-map .timeline-status{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;padding:5px 11px;border-radius:20px;background:rgba(18,36,45,.64);font-size:10px;letter-spacing:.6px;line-height:16px;color:#fff4df;pointer-events:none}
@media(max-height:600px){.memory-frame{width:140px;max-width:100%;height:auto;margin-left:auto;margin-right:auto}.memory-frame .photo-peek{height:100%;max-height:none}}

.location-map{transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.location-map.visible{transition:opacity .18s ease,transform .18s ease,visibility 0s}
@media(prefers-reduced-motion:reduce){.location-map,.location-map.visible,.memory-frame .photo-peek{transition:none}}

.map-trail{fill:#ffe2ac;pointer-events:none;filter:drop-shadow(0 0 2px #ffd99a80)}

/* Local contrast for pale photographs, without dimming the photograph itself. */
body.landing .timeline-ui{background:linear-gradient(180deg,rgba(12,24,31,.08),rgba(12,24,31,.64) 38%,rgba(12,24,31,.72) 78%,rgba(12,24,31,.48));border-radius:14px;text-shadow:0 1px 3px #07131be6,0 2px 12px #07131b99;box-shadow:0 8px 28px #07131b14}
.timeline-caption span{opacity:1;color:#fff3dc}
.timeline-caption strong{color:#fffaf1}
#time-slider::-webkit-slider-runnable-track{background:rgba(255,244,222,.8);box-shadow:0 1px 2px #07131b80}
#time-slider::-moz-range-track{background:rgba(255,244,222,.8);box-shadow:0 1px 2px #07131b80}
#time-slider::-webkit-slider-thumb{background:#ffe0a7;border-color:#fff8e8;box-shadow:0 0 0 1px #243b4870,0 1px 5px #08192360}
#time-slider::-moz-range-thumb{background:#ffe0a7;border-color:#fff8e8;box-shadow:0 0 0 1px #243b4870,0 1px 5px #08192360}
.timeline-pulse{position:absolute;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:timeline-heartbeat 3.4s ease-in-out infinite}
@keyframes timeline-heartbeat{0%,38%,100%{box-shadow:0 0 0 3px #ffdc9a12,0 0 7px #ffdc9a15}12%{box-shadow:0 0 0 6px #ffdc9a24,0 0 11px #ffdc9a30}22%{box-shadow:0 0 0 3px #ffdc9a12,0 0 7px #ffdc9a15}29%{box-shadow:0 0 0 5px #ffdc9a20,0 0 9px #ffdc9a25}}
@media(prefers-reduced-motion:reduce){.timeline-pulse{animation:none;box-shadow:0 0 0 3px #ffdc9a18}}

/* Let the photograph arrive first, then gently suggest its interactive subjects. */
body.landing .person-hit:after{content:'+';position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);display:grid;place-items:center;width:22px;height:22px;color:#fff5df;background:#18344240;border:1px solid #fff0d6a0;border-radius:50%;font-size:15px;box-shadow:0 1px 5px #10253040,0 0 12px #ffdc9a20;opacity:0;pointer-events:none}
body.landing .people-scene.hint-cycle .person-hit:after{animation:person-two-hints 6.2s ease-in-out .4s 1 both}
@keyframes person-introduction{0%{opacity:0}4%,10%{opacity:1}17%{opacity:0}25%,35%{opacity:.98}47%{opacity:0}62%,76%{opacity:.92}100%{opacity:0}}
@keyframes person-invitation{0%,100%{opacity:0}22%,43%{opacity:.85}70%{opacity:0}}
@media(hover:hover) and (pointer:fine){body.landing .people-scene.hint-cycle .person-hit:hover:after{animation:none;opacity:.9}}
body.landing .people-scene.hint-cycle .person-hit:focus-visible:after{animation:none;opacity:1;content:'이야기 보기 ↗';width:125px;height:35px;border-radius:5px;background:#193744ee;font-size:12px}
@media(prefers-reduced-motion:reduce){body.landing .people-scene.hint-cycle .person-hit:after{animation:none;opacity:.65}}

/* A quiet date watermark near the lower edge, leaving the subject clear. */
.preview-date{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:3px;padding:0 0 15px;pointer-events:none;color:rgba(255,248,231,.72);text-shadow:0 1px 10px rgba(14,28,37,.55),0 1px 2px rgba(14,28,37,.35);white-space:nowrap}
.preview-year{font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,3.4vw,36px);line-height:1;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:2px;text-indent:2px}
.preview-month{font-size:9px;line-height:1.6;font-weight:400;letter-spacing:2.4px;text-indent:2.4px;text-transform:uppercase;color:rgba(255,248,231,.78)}
@media(max-height:600px){.preview-date{gap:2px;padding-bottom:10px}.preview-year{font-size:24px}.preview-month{font-size:8px;letter-spacing:1.6px;text-indent:1.6px}}

/* The preview watermark shows only the year. */
.preview-date .preview-month{display:none}

body.landing .person-hit:after{background:#18344288;border-color:#fff3d6d9;box-shadow:0 1px 6px #10253080,0 0 13px #ffdc9a38;font-weight:500}

@keyframes person-two-hints{0%,30%{opacity:0}9%,20%{opacity:1}46%,57%{opacity:.95}70%,86%{opacity:0}100%{opacity:.85}}
.timeline-ends button{flex:1 1 0;min-width:0;padding:8px 0;display:grid;place-items:center}

.place-line{display:flex;align-items:center;justify-content:center;gap:9px}
.photo-video{position:relative;pointer-events:auto;flex:none}
.photo-video[hidden]{display:none}
.video-trigger{display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffe6b980;border-radius:50%;background:#172d38b3;color:#ffe4b4;cursor:pointer;padding:0;font-size:12px}
.video-trigger:focus-visible,.video-card:focus-visible{outline:2px solid #ffe4b4;outline-offset:3px}
.video-card{position:absolute;bottom:100%;right:0;width:min(260px,65vw);padding:10px 0 0;border-radius:9px;background:#152a35;color:#fff4e0;text-decoration:none;box-shadow:0 6px 25px #0005;overflow:hidden;display:none}
.photo-video.is-open .video-card{display:block}
.video-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#213b47}
.video-card .video-label{display:block;font:12px/1.5 sans-serif;letter-spacing:0;text-transform:none;margin:0;padding:10px;opacity:1;color:#fff4e0}

body.landing .person-hit.person-obscured:after{display:none}
.person-guide{position:absolute;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:26px;height:26px;border:1px solid #fff3d6d9;border-radius:50%;background:#183442bb;color:#fff5df;font:18px/1 sans-serif;box-shadow:0 2px 9px #10253070;pointer-events:none}
.person-guide:after{content:'';position:absolute;top:calc(100% + 3px);left:50%;width:1px;height:var(--guide-length,24px);background:linear-gradient(#ffe4b4dd,#ffe4b430);box-shadow:0 1px 3px #10253088}
.hint-cycle .person-guide{animation:person-two-hints 6.2s ease-in-out .4s 1 both}
.person-hit:hover .person-guide,.person-hit:focus-visible .person-guide{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){.hint-cycle .person-guide{animation:none;opacity:.85}}

.photo-actions{display:flex;align-items:center;gap:7px;pointer-events:auto;flex-shrink:0}
.photo-actions[hidden],.photo-actions button[hidden],.story-panel[hidden]{display:none}
.story-panel{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);width:min(360px,88vw);max-height:60svh;overflow:auto;padding:12px;border:1px solid #ffe5b73d;border-radius:12px;background:rgba(16,33,43,.96);box-shadow:0 10px 32px #0005;color:#fff5df;pointer-events:auto;z-index:15;text-shadow:none}
.story-heading{font-size:12px;line-height:1.6;margin-bottom:9px;color:#f4e2c4}
.story-video-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.story-video-item{display:block;text-decoration:none;color:#fff4e0;border-radius:7px;overflow:hidden;background:#ffffff09}
.story-video-item img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#2b404b}
.story-video-item span{display:block;font:11px/1.6 sans-serif;padding:8px}
.story-video-item:hover{background:#ffffff15}
.story-playlist{display:block;margin-top:10px;padding-top:11px;border-top:1px solid #ffe5b730;color:#ffe2ac;text-decoration:none;font:12px/1.6 sans-serif}
.story-panel a:focus-visible{outline:2px solid #ffe2ac;outline-offset:-2px}
.map-only-panel{width:min(300px,80vw)}
.map-only-panel svg{display:block;width:100%;height:auto}
.story-map-label{text-align:center;font-size:12px;line-height:1.5;margin:6px 0 2px;color:#f4e2c4}
.map-only-panel .map-halo{animation:map-location-glow 2.4s ease-in-out infinite}
@keyframes map-location-glow{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.map-only-panel .map-halo{animation:none}}

.season-story-card{display:block;text-decoration:none;color:#fff5df;border-radius:8px;overflow:hidden;background:#ffffff07}
.season-story-card>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.season-story-body{padding:14px 12px}
.season-story-body h3{margin:0;font-size:16px;font-weight:500;line-height:1.5;color:#fff4dd}
.season-story-body p{margin:7px 0 15px;font-size:12px;line-height:1.7;color:#d9dedb}
.season-story-cta{display:block;font-size:12px;line-height:1.6;color:#ffe0a7}
.season-story-card:hover{background:#ffffff11}

/* Dot centers share the range thumb's 14px travel inset, including endpoints. */
#time-slider::-webkit-slider-thumb{box-sizing:border-box}
#time-slider::-moz-range-thumb{box-sizing:border-box}
.timeline-ends{display:block;position:relative;height:20px;margin:0 7px}
.timeline-ends button{position:absolute;top:0;transform:translateX(-50%);height:20px;padding:0;min-width:0;display:grid;place-items:center}


/* Quiet year and chapter marks share the slider thumb's travel range. */
.timeline-ends{position:absolute;display:block;height:0;margin:0;pointer-events:none}
.timeline-tick{position:absolute;top:0;width:1px;height:6px;background:rgba(255,248,230,.48);transform:translate(-50%,-50%);box-shadow:0 1px 2px #10263355}
.timeline-tick.season-tick{height:11px;background:rgba(230,190,126,.57)}
.timeline-tick.year-tick.season-tick{background:linear-gradient(to bottom,rgba(255,248,230,.6) 0 45%,rgba(230,190,126,.6) 45% 100%)}
.timeline-pulse{z-index:1}

/* Current chapter follows the drag point, below the track. */
.timeline-story{position:absolute;transform:translateX(-50%);pointer-events:none;white-space:nowrap;font-size:10px;line-height:14px;letter-spacing:.7px;font-weight:400;color:rgba(255,244,222,.75);text-shadow:0 1px 5px #13273299;font-variant-numeric:tabular-nums}
body.landing .timeline-ui{padding-bottom:22px}
@media(max-width:760px){body.landing .timeline-ui{padding-bottom:20px!important}}

.timeline-story{opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s .18s}
.timeline-ui.is-dragging .timeline-story{opacity:1;visibility:visible;transition:opacity .12s ease}
@media(prefers-reduced-motion:reduce){.timeline-story,.timeline-ui.is-dragging .timeline-story{transition:none}}

.person-guide:after{transform-origin:top center;transform:rotate(var(--guide-angle,0deg))}

.video-trigger{text-decoration:none;box-sizing:border-box}

/* Keep the location and delayed actions on one stable line. */
.place-line{min-width:0;min-height:32px}
#time-place{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.photo-actions [hidden]{display:none}

/* Show the entire photograph at its own aspect ratio in the story preview. */
#photo-story-panel .season-story-card>img{width:100%;height:auto;aspect-ratio:auto;max-height:42svh;object-fit:contain}

/* Quiet edge controls; touch navigation uses the photograph itself. */
.photo-nav{display:none}
body.landing .photo-nav{display:block}
.photo-step{position:fixed;top:50%;transform:translateY(-50%);z-index:9;width:80px;height:160px;border:0;padding:0;background:transparent;color:#fff8e8;cursor:pointer;opacity:0;transition:opacity .2s ease}
.photo-prev{left:0}.photo-next{right:0}
.photo-step span{display:grid;place-items:center;width:42px;height:58px;margin:auto;border-radius:24px;background:#17334255;border:1px solid #fff5dc55;backdrop-filter:blur(6px);font:36px/1 Georgia,serif;text-shadow:0 1px 5px #10263399}
@media(hover:hover) and (pointer:fine){.photo-step:not(:disabled):hover{opacity:1}}
.photo-step:focus-visible{opacity:1;outline:2px solid #fff5dc;outline-offset:-8px}
.photo-step:disabled{pointer-events:none}
body.landing .people-hero{touch-action:pan-y pinch-zoom}
@media(hover:none){.photo-nav{display:none!important}}
@media(prefers-reduced-motion:reduce){.photo-step{transition:none}}

/* Vehicle invitations share the photo's coordinates, with a separate touch target. */
.vehicle-hit{position:absolute;z-index:4;width:44px;height:44px;transform:translate(-50%,-50%);place-items:center;border-radius:50%;color:#fff9ed;cursor:pointer;touch-action:manipulation}.vehicle-hit span{display:grid;place-items:center;width:26px;height:26px;border:1px solid #fff9e5cc;background:#18344266;border-radius:50%;font:20px Arial;box-shadow:0 0 16px #fff2c333}.vehicle-hit:hover span,.vehicle-hit:focus-visible span{background:#183442cc;box-shadow:0 0 0 5px #fff9e522}.vehicle-hit:focus-visible{outline:2px solid #fff9ed;outline-offset:3px}