body,button,input,textarea,select{font-family:'IBM Plex Sans KR',sans-serif}
h1,h2,.mini-title,.timeline-body strong,.sheet-title,.info-block h2,.empty-album h2{font-family:'Noto Serif KR',serif;font-weight:700;letter-spacing:-.065em}
.brand span,.top-action,.bottom-nav button,.note-label,.tiny,.sample-badge{font-family:'IBM Plex Sans KR',sans-serif}
.hero h1,.album-cover h1,.day-title .script,.nav-index,.hero-sticker,.card-topline{font-family:'Bebas Neue',sans-serif}
.hero-photo-main{animation:photoArriveLeft .85s cubic-bezier(.18,.75,.24,1) both}
.hero-photo-side{animation:photoArriveRight 1s .15s cubic-bezier(.18,.75,.24,1) both}
.hero-sticker{animation:stampIn .55s .48s cubic-bezier(.17,.8,.3,1.25) both}
.hero-content{animation:journalRise .7s .45s ease both}
.hero-date{animation:stampIn .55s .65s ease both}
.today-card,.timeline-sheet{animation:paperIn .65s .1s ease both}
.timeline-item{animation:journalRise .45s ease both}
.timeline-item:nth-child(2){animation-delay:.07s}
.timeline-item:nth-child(3){animation-delay:.14s}
.timeline-item:nth-child(4){animation-delay:.21s}
.timeline-item:nth-child(5){animation-delay:.28s}
.quick-button,.tabs button,.text-link,.map-list button,.bottom-nav button{transition:background-color .2s ease,color .2s ease,transform .2s ease}
.quick-button:active,.tabs button:active,.preview-grid button:active{transform:translateY(2px)}
.quick-button:focus-visible,.tabs button:focus-visible,.bottom-nav button:focus-visible,.intro-front:focus-visible,.intro-button:focus-visible{outline:3px solid #ba4b30;outline-offset:2px}
.home-intro{flex-wrap:wrap}
.intro-preview{border:0;border-bottom:2px solid #b74e34;background:transparent;color:#a4422d;font-weight:700;padding:8px 0 4px;font-size:.86rem;margin-top:2px}
.map-tip{max-width:calc(100% - 75px);line-height:1.4}
.route-marker{background:none;border:0}
.route-marker .pin{width:34px;height:34px;border:3px solid #b43d35;border-radius:50%;background:#fff9e8;color:#a2322f;box-shadow:0 2px 0 #344b3a,0 4px 12px #1b2e2740;display:grid;place-items:center;transform:none}
.route-marker .pin span{font-family:'Bebas Neue',sans-serif;font-size:1rem;line-height:1;transform:none}
.route-marker .pin:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#b43d35;bottom:-5px}
.route-marker{animation:markerDrop .48s .65s backwards cubic-bezier(.16,.9,.22,1)}
.route-tooltip{background:#fff7e7;border:1px solid #25372d;border-radius:0;box-shadow:3px 3px 0 #25372d33;color:#25372d;font-weight:700;padding:6px 8px;font-size:.8rem}
.route-tooltip:before{border-top-color:#25372d}
.leaflet-interactive.route-line{stroke-dasharray:var(--route-length,600px);stroke-dashoffset:var(--route-length,600px);animation:routeTrace 1.5s .25s ease forwards}
.map-list small{font-family:'Bebas Neue',sans-serif;font-size:.9rem;width:29px;height:27px;display:inline-grid;place-items:center;padding:0}
.intro{background:#263f35}
.intro-paper{width:min(88vw,390px);min-height:520px;padding:35px 23px 30px;justify-content:flex-start;transform:rotate(-2deg);animation:introPaper .65s ease both}
.intro-kicker{font-family:'IBM Plex Sans KR',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.04em;margin:10px 0 23px;color:#a04430}
.intro-heading{font-family:'Noto Serif KR',serif;font-size:2.13rem;font-weight:700;letter-spacing:-.07em;line-height:1.35}
.intro-trip{margin:3px 0 5px}
.intro-destination{position:relative;width:min(100%,250px);height:94px;margin:10px auto 0;background:#ddbc65;box-shadow:inset 3px 3px 0 #9b783933;display:grid;place-items:center;overflow:visible;transform:rotate(1deg)}
.intro-back{font-family:'Noto Serif KR',serif;font-size:3.25rem;font-weight:700;color:#a83e2e;letter-spacing:-.09em;opacity:0;transform:scale(.92);transition:opacity .45s ease,transform .55s cubic-bezier(.17,.8,.2,1)}
.intro-front{position:absolute;z-index:2;inset:-3px -5px;background:#fdf7e9;border:1px solid #c6b797;clip-path:polygon(0 0,100% 0,100% 82%,97% 87%,94% 82%,91% 89%,87% 84%,83% 92%,79% 86%,75% 94%,71% 86%,67% 91%,63% 85%,59% 92%,55% 86%,51% 94%,47% 86%,43% 92%,39% 85%,35% 93%,31% 86%,27% 91%,23% 85%,19% 93%,15% 86%,11% 91%,7% 85%,3% 91%,0 86%);display:flex;align-items:center;justify-content:center;color:#293a31;box-shadow:5px 7px 0 #263b3233;cursor:grab;touch-action:manipulation}
.intro-front span{font-family:'Noto Serif KR',serif;font-size:3.1rem;font-weight:700;letter-spacing:-.09em;margin-top:-10px}
.intro-front i{position:absolute;right:12px;bottom:13px;font-size:.68rem;font-style:normal;font-weight:700;color:#a84731}
.intro-front:active{cursor:grabbing}
.intro-polaroid{width:145px;height:126px;margin:21px 0 13px;transform:translateY(22px) rotate(12deg);opacity:.7;transition:transform .7s .22s cubic-bezier(.18,.8,.25,1),opacity .5s .22s}
.intro-status{font-size:.85rem;color:#5b6556}
.intro-button{font-family:'IBM Plex Sans KR',sans-serif;margin-top:10px;animation:journalRise .4s ease both}
.intro-skip{font-size:.78rem;margin-top:11px}
.intro.is-torn .intro-front{animation:tearAway .9s cubic-bezier(.3,.04,.49,1) forwards;pointer-events:none}
.intro.is-torn .intro-back{opacity:1;transform:scale(1)}
.intro.is-revealed .intro-polaroid{opacity:1;transform:translateY(0) rotate(7deg)}
.intro.is-revealed .intro-status{color:#a23c2c;font-weight:700}
@keyframes photoArriveLeft{from{opacity:0;transform:translate(-30px,18px) rotate(-11deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes photoArriveRight{from{opacity:0;transform:translate(35px,-24px) rotate(17deg)}to{opacity:1;transform:rotate(8deg)}}
@keyframes stampIn{from{opacity:0;scale:1.4}to{opacity:1;scale:1}}
@keyframes journalRise{from{opacity:0;transform:translateY(19px)}to{opacity:1;transform:translateY(0)}}
@keyframes paperIn{from{opacity:0;transform:translateY(18px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(-1deg)}}
@keyframes markerDrop{from{opacity:0;transform:translateY(-28px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes routeTrace{to{stroke-dashoffset:0}}
@keyframes introPaper{from{opacity:0;transform:translateY(35px) rotate(-5deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes tearAway{0%{transform:translate(0,0) rotate(0);opacity:1}28%{transform:translate(20px,-13px) rotate(8deg);opacity:1}100%{transform:translate(310px,-140px) rotate(32deg);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .intro-front,.intro-back,.intro-polaroid{transition:none}
  .intro.is-torn .intro-front{display:none}
  .leaflet-interactive.route-line{stroke-dasharray:none;stroke-dashoffset:0}
}