:root{--primary-color: #2E7D32;--secondary-color: #1976D2;--background-color: #FFFFFF;--text-color: #212121;--text-light: #757575;--error-color: #D32F2F;--success-color: #388E3C;--lake-color: #2196F3;--sea-color: #4CAF50;--river-color: #8B4513;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-size-sm: 12px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-xxl: 24px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color);line-height:1.5}html,body,#app{width:100%;height:100%;overflow:hidden}.header{background:linear-gradient(135deg,var(--primary-color) 0%,var(--secondary-color) 100%);color:#fff;padding:var(--spacing-md);box-shadow:0 2px 4px #0000001a;position:relative;z-index:10;flex-shrink:0}.header-content{text-align:center}.header-title{font-size:var(--font-size-xxl);font-weight:700;margin:0}.header-subtitle{font-size:var(--font-size-base);opacity:.9;margin:var(--spacing-xs) 0 0 0}#app{display:flex;flex-direction:column}.main-container{flex:1;display:flex;position:relative;overflow:hidden}.map-container{width:100%;height:100%;position:relative}.leaflet-container{background-color:#e8f4f8}.marker-icon{width:30px;height:40px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700}.leaflet-div-icon{background-color:unset;border:none}.marker-lake{background-color:var(--lake-color)}.marker-sea{background-color:var(--sea-color)}.marker-river{background-color:var(--river-color)}.leaflet-popup-content-wrapper{border-radius:8px;border:2px solid var(--primary-color);box-shadow:0 4px 12px #00000026;max-width:none}.leaflet-popup-content{width:320px!important;margin:0;padding:var(--spacing-md)}.leaflet-popup-tip{background-color:var(--background-color);border-top-color:var(--primary-color)}.popup-title{font-size:var(--font-size-lg);font-weight:600;margin:0 0 var(--spacing-sm) 0;color:var(--text-color)}.popup-content{font-size:var(--font-size-sm);color:var(--text-light);margin:0 0 var(--spacing-md) 0}.popup-button{display:inline-block;background-color:var(--primary-color);color:#fff!important;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:4px;font-size:var(--font-size-sm);cursor:pointer;transition:background-color .2s ease;text-decoration:none!important}.popup-button:hover{background-color:#1b5e20}.loading{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#ffffffe6;z-index:100}.loading.hidden{display:none}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading p{color:var(--text-color);font-size:var(--font-size-lg);font-weight:500}.error-message{position:absolute;bottom:var(--spacing-md);left:var(--spacing-md);right:var(--spacing-md);background-color:var(--error-color);color:#fff;padding:var(--spacing-md);border-radius:4px;display:flex;align-items:center;justify-content:space-between;z-index:100;box-shadow:0 2px 8px #0003}.error-message.hidden{display:none}.error-message p{margin:0;flex:1;font-size:var(--font-size-base)}.error-retry-btn{background-color:#fff;color:var(--error-color);border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:4px;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;margin-left:var(--spacing-md);transition:background-color .2s ease;flex-shrink:0}.error-retry-btn:hover{background-color:#f5f5f5}.footer{background-color:#f5f5f5;border-top:1px solid #e0e0e0;padding:var(--spacing-md);text-align:center;flex-shrink:0}.spot-count{font-size:var(--font-size-sm);color:var(--text-light);margin:0;font-weight:500}@media (min-width: 640px){.header-title{font-size:28px}.header{padding:var(--spacing-lg)}}@media (min-width: 1024px){.header-title{font-size:32px}.header{padding:var(--spacing-xl)}}.header-detail{display:flex;align-items:center;justify-content:space-between}.header-detail .header-content{display:flex;align-items:center;width:100%;text-align:left}.back-button{background:none;border:none;color:#fff;font-size:var(--font-size-xxl);cursor:pointer;padding:var(--spacing-sm);margin-right:var(--spacing-md);transition:opacity .2s ease;flex-shrink:0}.back-button:hover{opacity:.8}.detail-container{flex-direction:column;overflow-y:auto}.detail-map-section{height:30%;min-height:200px;width:100%;flex-shrink:0}.detail-content{flex:1;overflow-y:auto;padding:var(--spacing-md);background-color:var(--background-color)}.spot-details{max-width:100%}.detail-section{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-lg);border-bottom:1px solid #e0e0e0}.detail-section:last-child{border-bottom:none}.detail-section-title{font-size:var(--font-size-lg);font-weight:600;color:var(--primary-color);margin:0 0 var(--spacing-md) 0}.spot-description{font-size:var(--font-size-base);line-height:1.6;color:var(--text-color);margin:0}.depth-info{display:flex;gap:var(--spacing-md);justify-content:space-around}.depth-stat{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background-color:#f5f5f5;border-radius:8px;flex:1}.depth-label{font-size:var(--font-size-sm);color:var(--text-light);font-weight:500;margin-bottom:var(--spacing-xs)}.depth-value{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color)}.species-list,.facilities-list,.seasons-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.species-badge,.facility-badge,.season-badge{display:inline-block;background-color:#e3f2fd;color:var(--secondary-color);padding:var(--spacing-sm) var(--spacing-md);border-radius:20px;font-size:var(--font-size-sm);font-weight:500;border:1px solid #bbdefb}.facility-badge{background-color:#f0f4c3;color:#827717;border-color:#ddd9c6}.season-badge{background-color:#ffe0b2;color:#e65100;border-color:#ffccbc}.badges-row{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.badge{flex:1;min-width:120px;padding:var(--spacing-md);border-radius:8px;text-align:center;font-size:var(--font-size-sm);font-weight:500;border:1px solid}.badge-difficulty{background-color:#fff3e0;border-color:#ffe0b2;color:#e65100}.badge-accessibility{background-color:#e8f5e9;border-color:#c8e6c9;color:#2e7d32}.badge-spottype{background-color:#e3f2fd;border-color:#bbdefb;color:#1976d2}.media-section{border-top:2px solid var(--primary-color);margin-top:var(--spacing-lg);padding-top:var(--spacing-lg)}.media-section.hidden{display:none}.video-container{margin-bottom:var(--spacing-lg)}.video-container.hidden{display:none}.video-container iframe{border-radius:8px;max-width:100%;height:250px}.depth-map-container{text-align:center}.depth-map-container.hidden{display:none}.depth-map-image{max-width:100%;height:auto;border-radius:8px;margin-top:var(--spacing-md);box-shadow:0 2px 8px #0000001a}.not-found{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10}.not-found.hidden{display:none}.not-found-content{background-color:#fff;padding:var(--spacing-xl);border-radius:8px;box-shadow:0 4px 12px #00000026}.not-found-text{font-size:var(--font-size-xxl);font-weight:600;margin:0 0 var(--spacing-md) 0;color:var(--text-color)}.not-found-subtext{font-size:var(--font-size-base);color:var(--text-light);margin:0 0 var(--spacing-lg) 0}.not-found-link{display:inline-block;background-color:var(--primary-color);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:4px;text-decoration:none;font-weight:600;transition:background-color .2s ease}.not-found-link:hover{background-color:#1b5e20}.spot-meta{font-size:var(--font-size-sm);color:var(--text-light)}@media (min-width: 640px){.detail-map-section{height:35%}.detail-content{padding:var(--spacing-lg)}.depth-info{justify-content:flex-start;gap:var(--spacing-lg)}.depth-stat{flex:0 1 150px}.video-container iframe{height:300px}}@media (min-width: 1024px){.detail-map-section{height:30%}.video-container iframe{height:400px}}