:root{--color-base: #F4EDE3;--color-accent: #1F3A5F;--color-highlight: #B08D57;--color-sepia: rgba(112, 66, 20, .06);--font-serif: "Playfair Display", serif;--font-sans: "Inter", sans-serif;--transition-speed: .4s;--ease-custom: cubic-bezier(.25, 1, .5, 1);--dock-height: 70px;--dock-bottom-gap: 24px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-sans);background-color:var(--color-base);color:var(--color-accent);transition:background-color .5s ease,color .5s ease}#app{position:relative;width:100%;height:100%}#map{width:100%;height:100%;z-index:0;transition:filter .5s ease}.detail-panel{position:absolute;bottom:0;left:0;width:100%;height:85vh;background:#fff;border-top-left-radius:24px;border-top-right-radius:24px;box-shadow:0 -4px 20px #0000001a;transform:translateY(100%);transition:transform var(--transition-speed) var(--ease-custom);z-index:1000;overflow-y:auto;display:flex;flex-direction:column}.detail-panel.visible{transform:translateY(0)}.panel-header{padding:24px;position:sticky;top:0;background:#fff;z-index:10;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(0,0,0,.05)}.title-container{display:flex;flex-direction:column}.panel-title{font-family:var(--font-serif);font-size:1.5rem;color:var(--color-accent);margin-bottom:4px}.atmosphere-tag{font-family:var(--font-sans);font-size:.8rem;color:var(--color-highlight);text-transform:uppercase;letter-spacing:1px;opacity:.9}.header-actions{display:flex;gap:16px;align-items:center}.save-btn{background:none;border:none;cursor:pointer;color:var(--color-accent);opacity:.6;transition:opacity .3s ease,transform .3s ease,color .3s ease;display:flex;align-items:center;justify-content:center}.save-btn svg{width:20px;height:20px}.save-btn:hover{opacity:1;transform:translateY(-1px)}.save-btn.saved{opacity:1;color:var(--color-highlight)}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--color-accent);opacity:.6;transition:opacity .3s ease}.close-btn:hover{opacity:1}.panel-content{padding:24px;transition:opacity .3s ease}.panel-content.fading{opacity:0}.hero-image-container{width:100%;height:200px;border-radius:12px;overflow:hidden;margin-bottom:16px;background-color:#ddd}.hero-image{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}.hero-image.loaded{opacity:1}.intro-text{font-family:var(--font-serif);font-size:1.1rem;line-height:1.6;margin-bottom:16px;color:#444}.local-tip{font-family:var(--font-serif);font-style:italic;font-size:1rem;line-height:1.5;color:var(--color-highlight);margin-bottom:24px;padding-left:16px;border-left:2px solid rgba(176,141,87,.3)}.info-section{margin-bottom:24px}.info-section h3{font-size:.9rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;color:var(--color-highlight)}.fact-item{display:flex;align-items:center;margin-bottom:8px;font-size:.95rem}.fact-icon{margin-right:8px;color:var(--color-highlight)}.visitor-info p{margin-bottom:6px;font-size:.95rem}.process-section{margin-top:24px}.process-list{display:flex;flex-direction:column;gap:16px}.process-step{background:#1f3a5f08;padding:16px;border-radius:8px;border-left:3px solid var(--color-highlight)}.process-step-title{font-family:var(--font-sans);font-size:.95rem;font-weight:600;color:var(--color-accent);margin-bottom:6px}.process-step-desc{font-size:.9rem;line-height:1.5;color:#555}.timeline-section{margin-top:24px}.timeline-list{list-style:none;padding-left:8px;border-left:2px solid rgba(31,58,95,.1)}.timeline-event{position:relative;margin-bottom:16px;padding-left:16px}.timeline-event:before{content:"";position:absolute;left:-13px;top:4px;width:8px;height:8px;background-color:var(--color-base);border:2px solid var(--color-highlight);border-radius:50%}.timeline-year{display:block;font-weight:600;font-size:.85rem;color:var(--color-highlight);margin-bottom:4px}.timeline-desc{display:block;font-size:.95rem;color:#555;line-height:1.4}.related-section{margin-top:32px;border-top:1px solid rgba(0,0,0,.05);padding-top:24px}.related-list{display:flex;flex-direction:column;gap:12px}.related-card{display:flex;align-items:center;background:#fff;border:1px solid rgba(31,58,95,.1);border-radius:12px;padding:8px;cursor:pointer;transition:all .3s ease;text-align:left}.related-card:hover{background:#f4ede34d;transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.related-card:active{transform:scale(.98)}.related-img{width:60px;height:60px;border-radius:8px;background-size:cover;background-position:center;margin-right:16px;flex-shrink:0}.related-text{display:flex;flex-direction:column}.related-text h4{font-family:var(--font-sans);font-size:.95rem;color:var(--color-accent);margin-bottom:4px}.related-text span{font-size:.8rem;color:var(--color-highlight);text-transform:uppercase;letter-spacing:.5px}.etiquette-section{margin-top:24px}.etiquette-list{list-style:none;background:#b08d570d;border:1px solid rgba(176,141,87,.2);border-radius:8px;padding:16px}.etiquette-item{position:relative;padding-left:20px;margin-bottom:12px;font-size:.9rem;color:var(--color-accent);line-height:1.5}.etiquette-item:last-child{margin-bottom:0}.etiquette-item:before{content:"✦";position:absolute;left:0;top:0;color:var(--color-highlight);font-size:.8rem}.custom-audio-btn{display:inline-flex;align-items:center;background:#1f3a5f0d;border:1px solid rgba(31,58,95,.1);padding:8px 16px;border-radius:24px;color:var(--color-accent);font-family:var(--font-sans);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s ease;margin-top:8px}.custom-audio-btn:hover{background:#1f3a5f1a}.custom-audio-btn.playing{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.custom-audio-btn .icon{margin-right:8px;font-size:.8rem}.bottom-dock{position:fixed;bottom:var(--dock-bottom-gap);left:50%;transform:translate(-50%);background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 24px;border-radius:40px;box-shadow:0 4px 20px #0000001a;display:flex;gap:16px;z-index:1000;border:1px solid rgba(255,255,255,.2);transition:background-color .5s ease,border-color .5s ease}.dock-btn{background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-accent);cursor:pointer;transition:all .3s ease;opacity:.6}.dock-btn:hover{opacity:1;transform:translateY(-2px)}.dock-btn.active{opacity:1;color:var(--color-highlight)}.dock-btn:active{transform:translateY(-2px) scale(.92)}.dock-btn svg{width:24px;height:24px;margin-bottom:4px}.dock-label{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.route-badge{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-10px);background:var(--color-base);color:var(--color-accent);padding:8px 16px;border-radius:20px;font-family:var(--font-sans);font-size:.85rem;font-weight:500;box-shadow:0 4px 12px #0000001a;border:1px solid rgba(31,58,95,.1);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.route-badge.visible{opacity:1;transform:translate(-50%) translateY(0)}body.night-mode .route-badge{background:var(--night-dock-bg);color:var(--color-highlight);border-color:var(--night-border)}.category-filter{position:fixed;bottom:calc(var(--dock-height) + var(--dock-bottom-gap) + 10px);left:50%;transform:translate(-50%);display:flex;gap:10px;background:#ffffffe6;padding:8px 16px;border-radius:30px;box-shadow:0 4px 12px #0000001a;z-index:999;transition:opacity .3s ease,transform .3s ease,background-color .5s ease}.category-filter.hidden{opacity:0;pointer-events:none;transform:translate(-50%) translateY(10px)}.cat-btn{background:none;border:1px solid transparent;padding:6px 16px;border-radius:20px;font-family:var(--font-sans);font-size:.85rem;color:var(--color-accent);cursor:pointer;transition:all .2s}.cat-btn:hover{background:#1f3a5f0d}.cat-btn.active{background:var(--color-accent);color:#fff}.cat-btn:active{transform:scale(.96)}.landing-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#f4ede3d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000;display:flex;justify-content:center;align-items:center;text-align:center;transition:opacity 1.5s var(--ease-custom),transform 1.5s var(--ease-custom);pointer-events:all}.landing-screen.hidden{opacity:0;pointer-events:none;transform:scale(1.1)}.landing-content{display:flex;flex-direction:column;align-items:center;padding:24px}.landing-greeting{font-family:var(--font-serif);font-size:1.5rem;font-style:italic;color:var(--color-highlight);margin-bottom:8px;opacity:.9}.landing-title{font-family:var(--font-serif);font-size:5rem;font-weight:700;color:var(--color-accent);margin-bottom:16px;letter-spacing:-2px;line-height:1}.landing-subtitle{font-family:var(--font-serif);font-size:1.25rem;color:var(--color-highlight);margin-bottom:24px;letter-spacing:1px;text-transform:uppercase}.landing-proverb{font-family:var(--font-serif);font-size:1rem;font-style:italic;color:var(--color-accent);opacity:.8;margin-bottom:48px;text-align:center;max-width:80%;transition:opacity .5s ease}.btn-enter{background:transparent;border:1px solid var(--color-accent);padding:16px 32px;border-radius:50px;font-family:var(--font-sans);font-size:1rem;text-transform:uppercase;letter-spacing:2px;color:var(--color-accent);cursor:pointer;transition:all .3s ease}.btn-enter:hover{background:var(--color-accent);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #1f3a5f33}.btn-enter:active{transform:translateY(0) scale(.96);box-shadow:0 2px 6px #1f3a5f1a}body.night-mode{--night-bg: #0d1b2a;--night-text: #e0e1dd;--night-dock-bg: rgba(13, 27, 42, .85);--night-border: rgba(255,255,255,.1);background-color:var(--night-bg);color:var(--night-text)}body.night-mode .bottom-dock,body.night-mode .category-filter{background:var(--night-dock-bg);border-color:var(--night-border)}body.night-mode .dock-btn{color:var(--night-text)}body.night-mode .dock-btn.active{color:var(--color-highlight)}body.night-mode .cat-btn{color:var(--night-text)}body.night-mode .cat-btn.active{background:var(--color-highlight);color:var(--night-bg)}body.night-mode #map{filter:invert(1) hue-rotate(180deg) brightness(.8) contrast(1.2)}.custom-marker{width:16px;height:16px;border-radius:50%;border:2px solid white;box-shadow:0 2px 4px #0000004d;transition:transform .3s var(--ease-custom),box-shadow .3s ease;cursor:pointer}.custom-marker:hover{transform:scale(1.3);box-shadow:0 4px 8px #0006}.marker-sacred{background-color:#6a994e}.marker-craft{background-color:#bc4749}.marker-architecture{background-color:#1f3a5f}.marker-taste{background-color:#f2cc8f}.marker-stay{background-color:#9c6644}body.night-mode .leaflet-marker-icon,body.night-mode .custom-marker{filter:drop-shadow(0 0 8px var(--color-highlight))}#map-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-sepia);pointer-events:none;z-index:400}@keyframes dash{to{stroke-dashoffset:-100}}.animated-route{stroke-dasharray:10,10;animation:dash 20s linear infinite}:root{--color-highlight:#76531d;--surface:#fffdf7;--ink:#1f3a5f;--dock-height:78px;--dock-bottom-gap:16px}body.night-mode{--color-base:#13263a;--color-accent:#f5ead5;--color-highlight:#efd09a;--surface:#13263a;--ink:#f5ead5;--night-dock-bg:#13263a;--night-text:#f5ead5}button,a{touch-action:manipulation}button{min-height:44px;font-family:var(--font-sans);font-size:14px}button:focus-visible,a:focus-visible{outline:3px solid #976c25;outline-offset:3px}.dock-label,.cat-btn,.atmosphere-tag,.info-section h3,.related-text span,.timeline-year,.custom-audio-btn,.custom-audio-btn .icon{font-size:14px;text-transform:none;letter-spacing:normal;opacity:1}.bottom-dock,.category-filter,.panel-header,.detail-panel{background:var(--surface);color:var(--ink)}.dock-btn{opacity:1;min-width:48px;min-height:48px}.dock-btn.active{color:var(--color-highlight)}.bottom-dock{padding:10px 14px;gap:12px;max-width:calc(100% - 20px);border-radius:24px}.category-filter{max-width:calc(100% - 20px);overflow-x:auto;justify-content:flex-start;white-space:nowrap;padding:8px;gap:4px;border-radius:16px}.cat-btn{flex-shrink:0;padding:8px 12px}.panel-title{padding-right:8px}.detail-panel{z-index:1200}.panel-header{gap:10px}.header-actions{display:flex}.save-btn,.close-btn{opacity:1;min-width:44px}.intro-text,.visitor-info,.timeline-desc,.process-step-desc{color:var(--ink)}.panel-content{padding-bottom:32px}.local-tip{color:var(--color-highlight)}.landing-screen{background:#f4ede3;overflow-y:auto;padding:30px 24px}.landing-title{font-size:80px}.landing-subtitle{text-transform:none;letter-spacing:normal;color:#76531d;font-size:26px}.landing-description{font-size:18px;line-height:1.6;max-width:470px;margin:24px auto}.landing-content{width:100%;max-width:600px}.btn-enter{text-transform:none;letter-spacing:normal;min-height:48px}.guide-caveat{font-size:14px;line-height:1.5;max-width:440px;margin:24px auto 0;color:#40536c}.leaflet-control-attribution{max-width:240px;background:#fffdf7!important;color:#17324d!important;font-size:14px!important;line-height:1.4!important;padding:5px 8px!important}.leaflet-control-attribution a{color:#17324d!important;font-size:14px!important}.leaflet-control-zoom a{color:#17324d!important;background:#fffdf7!important;width:44px!important;height:44px!important;line-height:44px!important}.route-badge{max-width:calc(100% - 132px);font-size:14px;white-space:normal;top:100px;text-align:center}.audio-note,.image-unavailable{font-size:14px;color:var(--ink);line-height:1.5;margin-top:12px}.image-unavailable{padding:32px}.hero-image-container:has(.image-unavailable){height:auto;min-height:100px;background:var(--color-base)}body.night-mode #map{filter:none}body.night-mode .custom-audio-btn{color:var(--ink);border-color:var(--ink)}body.night-mode .cat-btn.active{background:#efd09a;color:#13263a}body.night-mode .related-card{background:#20394e}.leaflet-marker-icon:focus-visible{outline:3px solid #1f3a5f;outline-offset:4px}@media(max-width:420px){.bottom-dock{gap:5px;padding:10px}.dock-btn{min-width:48px}.panel-header{padding:16px}.route-badge{top:112px}.landing-title{font-size:72px}.landing-description{font-size:16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}.map-tools{position:absolute;left:10px;right:10px;top:108px;display:flex;gap:8px;align-items:center;z-index:600;max-width:650px}.map-tools label{font-size:14px;background:var(--surface);color:var(--ink);padding:10px;border-radius:10px}.map-tools select,.map-tools button{background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:14px;min-height:46px;border:1px solid var(--ink);border-radius:10px;padding:8px;min-width:0}.map-tools select{flex:1;max-width:350px}.route-badge{top:166px}.custom-marker{width:24px!important;height:24px!important;margin-left:-12px!important;margin-top:-12px!important}@media(max-width:600px){.map-tools label{position:absolute;left:-9999px}}.photo-credit{position:relative;font-size:14px;line-height:1.4;padding:8px 12px;color:var(--ink);background:var(--surface)}.photo-credit a{color:var(--ink);font-size:14px}.hero-image-container{height:auto;min-height:100px;overflow:visible}.hero-image{height:220px;width:100%;object-fit:cover;border-radius:12px}.image-unavailable{padding:24px}.landing-description,.guide-caveat{font-family:var(--font-sans)}.source-note a{color:var(--ink);font-size:14px}.source-note{margin-bottom:12px}#app{position:fixed;inset:0;height:100dvh;overflow:hidden}.detail-panel:not(.visible){visibility:hidden;pointer-events:none}.detail-panel.visible{visibility:visible}#app{overflow:clip}@media(min-width:900px){.detail-panel{left:auto;right:20px;bottom:20px;width:560px;height:calc(100dvh - 40px);border-radius:20px}.detail-panel:not(.visible){transform:translate(calc(100% + 24px))}.detail-panel.visible{transform:translate(0)}.hero-image{height:270px}}