:root {--fp-text-primary: #e2e8f0;--fp-text-secondary: #94a3b8;--fp-text-muted: #64748b;--fp-text-accent: #38bdf8;--fp-text-accent-warm: #fbbf24;--fp-card-bg: rgba(255, 255, 255, 0.04);--fp-card-border: rgba(255, 255, 255, 0.08);--fp-card-bg-hover: rgba(255, 255, 255, 0.07);--fp-card-border-hover: rgba(56, 189, 248, 0.3);--fp-section-padding-x: 24px;--fp-section-max-width: 1100px;--fp-font-main: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;--fp-gradient-ocean: linear-gradient(180deg, #020818 0%, #041020 40%, #020818 100%);--fp-glow-blue: rgba(56, 189, 248, 0.15);--fp-glow-blue-strong: rgba(56, 189, 248, 0.25)}
.fishing-parks-page {background: #020818;color: var(--fp-text-primary);font-family: var(--fp-font-main);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
.fishing-parks-page .main-content {overflow-x: hidden}
.fp-container {min-height: 100vh;padding-bottom: 96px}
.fp-section-inner {max-width: var(--fp-section-max-width);width: 100%;margin: 0 auto;padding: 0 var(--fp-section-padding-x);box-sizing: border-box}
.fp-hero {padding: 88px 0 64px;text-align: center;background: var(--fp-gradient-ocean);position: relative;overflow: hidden}
.fp-hero::before {content: '';position: absolute;top: -60px;left: 50%;transform: translateX(-50%);width: 600px;height: 300px;background: radial-gradient(ellipse, rgba(56, 189, 248, 0.08) 0%, transparent 70%);pointer-events: none}
.fp-hero-eyebrow {font-size: 0.72rem;font-weight: 600;letter-spacing: 0.18em;text-transform: uppercase;color: var(--fp-text-accent);margin: 0 0 16px;opacity: 0.85}
.fp-hero-title {font-size: clamp(2.4rem, 7vw, 4rem);font-weight: 900;letter-spacing: -0.03em;line-height: 1.1;margin: 0 0 12px;background: linear-gradient(135deg, #e2e8f0 0%, #7dd3fc 60%, #818cf8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-hero-subtitle {font-size: clamp(0.85rem, 2.5vw, 1rem);color: var(--fp-text-secondary);margin: 0 0 48px}
.fp-hero-stats {display: flex;justify-content: center;gap: 16px;flex-wrap: wrap}
.fp-hero-stat-card {background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(56, 189, 248, 0.15);border-radius: 16px;padding: 20px 32px;backdrop-filter: blur(8px);min-width: 140px}
.fp-hero-stat-value {display: block;font-size: clamp(2rem, 5vw, 2.8rem);font-weight: 800;font-variant-numeric: tabular-nums;letter-spacing: -0.03em;line-height: 1;background: linear-gradient(135deg, var(--fp-text-accent) 0%, #818cf8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-hero-stat-label {display: block;font-size: 0.75rem;color: var(--fp-text-muted);margin-top: 6px;letter-spacing: 0.05em}
.fp-region-section {padding: 48px 0 8px}
.fp-region-header {display: flex;align-items: center;gap: 12px;margin-bottom: 20px}
.fp-region-title {font-size: 1.1rem;font-weight: 700;color: var(--fp-text-accent);margin: 0;white-space: nowrap}
.fp-region-divider {flex: 1;height: 1px;background: linear-gradient(to right, rgba(56, 189, 248, 0.25), transparent);min-width: 0}
.fp-region-count {font-size: 0.75rem;color: var(--fp-text-muted);white-space: nowrap}
.fp-parks-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 16px}
.fp-park-card {display: block;background: var(--fp-card-bg);border: 1px solid var(--fp-card-border);border-radius: 14px;padding: 20px;text-decoration: none;color: var(--fp-text-primary);transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease;position: relative;overflow: hidden}
.fp-park-card::after {content: '';position: absolute;top: 0;left: 0;right: 0;height: 2px;background: linear-gradient(90deg, var(--fp-text-accent), #818cf8);opacity: 0;transition: opacity 0.2s ease}
.fp-park-card:hover {background: var(--fp-card-bg-hover);border-color: var(--fp-card-border-hover);transform: translateY(-3px);box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(56, 189, 248, 0.08)}
.fp-park-card:hover::after {opacity: 1}
.fp-park-card-header {display: flex;align-items: flex-start;justify-content: space-between;gap: 8px;margin-bottom: 6px}
.fp-park-name {font-size: 1rem;font-weight: 700;margin: 0;min-width: 0;overflow-wrap: anywhere;line-height: 1.35;flex: 1}
.fp-park-prefecture {font-size: 0.72rem;color: var(--fp-text-muted);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 4px;padding: 2px 7px;white-space: nowrap;flex-shrink: 0;align-self: flex-start}
.fp-park-specs {display: flex;flex-wrap: wrap;gap: 14px;align-items: flex-start}
.fp-spec {display: flex;flex-direction: column;gap: 1px}
.fp-spec-label {font-size: 0.65rem;color: var(--fp-text-muted);letter-spacing: 0.06em;text-transform: uppercase}
.fp-spec-value {font-size: 0.9rem;font-weight: 700;font-variant-numeric: tabular-nums;color: var(--fp-text-primary)}
.fp-spec-value--accent {color: var(--fp-text-accent)}
.fp-park-status-badge {display: inline-block;font-size: 0.68rem;font-weight: 600;padding: 3px 8px;border-radius: 4px;margin-top: 12px}
.fp-status-suspended {background: rgba(251, 146, 60, 0.12);color: #fb923c;border: 1px solid rgba(251, 146, 60, 0.2)}
.fp-status-closed {background: rgba(239, 68, 68, 0.12);color: #f87171;border: 1px solid rgba(239, 68, 68, 0.2)}
.fp-detail-hero {padding: 64px 0 40px;background: var(--fp-gradient-ocean);position: relative;overflow: hidden}
.fp-detail-hero::before {content: '';position: absolute;top: -80px;left: -100px;width: 500px;height: 400px;background: radial-gradient(ellipse, rgba(56, 189, 248, 0.06) 0%, transparent 65%);pointer-events: none}
.fp-detail-breadcrumb {font-size: 0.78rem;color: var(--fp-text-muted);margin: 0 0 20px;display: flex;align-items: center;gap: 6px;flex-wrap: wrap}
.fp-detail-breadcrumb a {color: var(--fp-text-accent);text-decoration: none;transition: opacity 0.15s}
.fp-detail-breadcrumb a:hover {opacity: 0.75;text-decoration: underline}
.fp-detail-breadcrumb-sep {color: var(--fp-text-muted);font-size: 0.7rem;opacity: 0.5}
.fp-detail-title {font-size: clamp(1.7rem, 5vw, 2.6rem);font-weight: 900;letter-spacing: -0.025em;margin: 0 0 16px;line-height: 1.2;overflow-wrap: anywhere}
.fp-detail-badges {display: flex;flex-wrap: wrap;align-items: center;gap: 8px;margin-bottom: 20px}
.fp-detail-pref {font-size: 0.78rem;color: var(--fp-text-accent);padding: 3px 10px;border: 1px solid rgba(56, 189, 248, 0.25);border-radius: 4px;background: rgba(56, 189, 248, 0.06)}
.fp-detail-description {font-size: 0.92rem;color: var(--fp-text-secondary);line-height: 1.75;margin: 0;max-width: 680px;overflow-wrap: anywhere}
.fp-hero-map-wrapper {border-radius: 12px;overflow: hidden;border: 1px solid var(--fp-card-border);margin-top: 20px}
.fp-hero-map-canvas {width: 100%;height: 280px}
@media (max-width: 640px) {.fp-hero-map-canvas {height: 200px}}
.fp-map-stats {display: flex;gap: 12px;margin-top: 14px}
.fp-map-stat {display: flex;align-items: baseline;gap: 6px;background: var(--fp-card-bg);border: 1px solid var(--fp-card-border);border-radius: 10px;padding: 10px 18px}
.fp-map-stat-value {font-size: 1.4rem;font-weight: 800;font-variant-numeric: tabular-nums;letter-spacing: -0.02em;background: linear-gradient(135deg, var(--fp-text-accent) 0%, #818cf8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-map-stat-label {font-size: 0.75rem;color: var(--fp-text-muted);white-space: nowrap}
.fp-detail-pills {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 16px}
.fp-detail-pill {display: inline-flex;align-items: center;gap: 5px;background: rgba(255, 255, 255, 0.04);border: 1px solid rgba(255, 255, 255, 0.08);border-radius: 999px;padding: 5px 14px;font-size: 0.78rem;color: var(--fp-text-secondary);white-space: nowrap}
.fp-detail-pill svg {opacity: 0.6;flex-shrink: 0}
.fp-detail-pill strong {color: var(--fp-text-primary);font-weight: 600}
.fp-gradient-text {background: linear-gradient(135deg, #38bdf8, #818cf8);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text}
.fp-stats-section {padding: 32px 0}
.fp-stats-grid {display: grid;grid-template-columns: 1fr 280px;gap: 24px}
.fp-stats-card {background: var(--fp-card-bg);border: 1px solid var(--fp-card-border);border-radius: 14px;padding: 20px 24px}
.fp-stats-card-title {font-size: 1.05rem;font-weight: 700;margin: 0 0 16px;display: flex;align-items: center;gap: 8px}
.fp-stats-card-title svg {flex-shrink: 0}
.fp-bar-row {display: flex;align-items: center;gap: 10px;margin-bottom: 10px}
.fp-bar-row:last-child {margin-bottom: 0}
.fp-bar-label {width: 72px;flex-shrink: 0;font-size: 0.82rem;font-weight: 600;text-align: right;color: var(--fp-text-primary)}
.fp-bar-track {flex: 1;height: 22px;background: rgba(255, 255, 255, 0.04);border-radius: 6px;overflow: hidden}
.fp-bar-fill {height: 100%;border-radius: 6px;background: linear-gradient(90deg, #38bdf8, #818cf8)}
.fp-bar-count {width: 48px;flex-shrink: 0;font-size: 0.78rem;color: var(--fp-text-muted);text-align: left}
.fp-sizebar-item {display: flex;align-items: center;gap: 12px;padding: 14px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.05);text-decoration: none;color: inherit;transition: opacity 0.15s ease}
.fp-sizebar-item:hover {opacity: 0.8;text-decoration: none}
.fp-sizebar-item:last-child {border-bottom: none}
.fp-sizebar-rank {width: 24px;height: 24px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 0.72rem;font-weight: 800;flex-shrink: 0}
.fp-rank-gold {background: linear-gradient(135deg, #fbbf24, #f59e0b);color: #020818}
.fp-rank-silver {background: linear-gradient(135deg, #94a3b8, #64748b);color: #020818}
.fp-rank-bronze {background: linear-gradient(135deg, #c2855a, #92400e);color: #fff}
.fp-sizebar-main {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 6px}
.fp-sizebar-top {display: flex;align-items: baseline;justify-content: space-between;gap: 8px}
.fp-sizebar-fish {font-size: 0.88rem;font-weight: 700;color: var(--fp-text-primary)}
.fp-sizebar-size {font-size: 1rem;font-weight: 800;font-variant-numeric: tabular-nums}
.fp-sizebar-size--gold {color: #fbbf24}
.fp-sizebar-size--silver {color: #94a3b8}
.fp-sizebar-size--bronze {color: #c2855a}
.fp-sizebar-track {height: 6px;background: rgba(255, 255, 255, 0.06);border-radius: 3px;overflow: hidden}
.fp-sizebar-fill {height: 100%;border-radius: 3px}
.fp-sizebar-fill--gold {background: linear-gradient(90deg, #fbbf24, #f59e0b)}
.fp-sizebar-fill--silver {background: linear-gradient(90deg, #94a3b8, #64748b)}
.fp-sizebar-fill--bronze {background: linear-gradient(90deg, #c2855a, #92400e)}
.fp-sizebar-meta {display: flex;align-items: center;gap: 6px;font-size: 0.7rem;color: var(--fp-text-muted)}
.fp-sizebar-meta .user-avatar,
.fp-sizebar-meta .user-avatar-image,
.fp-sizebar-meta .user-avatar-default {flex-shrink: 0}
.fp-sizebar-user {overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fp-detail-website-btn {margin-top: 16px;display: inline-flex;align-items: center;gap: 8px;padding: 10px 20px;border: 1px solid rgba(56, 189, 248, 0.3);border-radius: 8px;background: rgba(56, 189, 248, 0.06);color: var(--fp-text-accent);text-decoration: none;font-size: 0.85rem;font-weight: 600;transition: background 0.2s ease, border-color 0.2s ease}
.fp-detail-website-btn:hover {background: rgba(56, 189, 248, 0.12);border-color: rgba(56, 189, 248, 0.5)}
.fp-detail-website-btn svg {flex-shrink: 0}
.fp-map-section {padding: 32px 0 8px}
.fp-map-title {font-size: 1.1rem;font-weight: 600;color: var(--fp-text-primary);margin: 0 0 14px}
.fp-map-wrapper {border-radius: 12px;overflow: hidden;border: 1px solid var(--fp-card-border)}
.fp-map-canvas {width: 100%;height: 300px}
@media (max-width: 640px) {.fp-map-canvas {height: 220px}}
.fp-reports-section {padding: 40px 0}
.fp-reports-header {display: flex;align-items: baseline;gap: 10px;margin-bottom: 24px}
.fp-reports-title {font-size: 1.1rem;font-weight: 700;margin: 0;color: var(--fp-text-primary)}
.fp-reports-count {font-size: 0.8rem;font-weight: 500;color: var(--fp-text-muted);padding: 2px 8px;background: rgba(255, 255, 255, 0.04);border: 1px solid var(--fp-card-border);border-radius: 20px}
.fp-catch-list {display: flex;flex-direction: column;gap: 10px}
.fp-catch-row {display: flex;align-items: stretch;gap: 14px;background: var(--fp-card-bg);border: 1px solid var(--fp-card-border);border-radius: 12px;overflow: hidden;text-decoration: none;color: var(--fp-text-primary);transition: background 0.2s ease, border-color 0.2s ease}
.fp-catch-row:hover {background: var(--fp-card-bg-hover);border-color: var(--fp-card-border-hover);text-decoration: none}
.fp-catch-image {width: 96px;min-height: 80px;flex-shrink: 0;overflow: hidden;background: linear-gradient(160deg, #0a1628 0%, #0e2038 100%)}
.fp-catch-image img {width: 100%;height: 100%;object-fit: cover;display: block}
.fp-catch-no-image {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center}
.fp-catch-no-image svg {opacity: 0.25}
.fp-catch-body {flex: 1;min-width: 0;display: flex;flex-direction: column;justify-content: center;gap: 4px;padding: 10px 14px 10px 0}
.fp-catch-fish {font-size: 0.92rem;font-weight: 700;color: var(--fp-text-primary);overflow-wrap: anywhere}
.fp-catch-spec {font-size: 0.78rem;color: var(--fp-text-secondary);font-variant-numeric: tabular-nums}
.fp-catch-footer {display: flex;align-items: center;justify-content: space-between;gap: 8px;margin-top: 2px}
.fp-catch-user {display: flex;align-items: center;gap: 6px;min-width: 0}
.fp-catch-user .user-avatar,
.fp-catch-user .user-avatar-image,
.fp-catch-user .user-avatar-default {flex-shrink: 0}
.fp-catch-user-name {font-size: 0.73rem;color: var(--fp-text-muted);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fp-catch-date {font-size: 0.73rem;color: var(--fp-text-muted);white-space: nowrap;flex-shrink: 0}
.fp-reports-empty {text-align: center;padding: 64px 24px;color: var(--fp-text-muted)}
.fp-reports-empty-icon {margin: 0 auto 16px;opacity: 0.2}
.fp-reports-empty p {font-size: 0.88rem;line-height: 1.8;margin: 0}
@media (max-width: 640px) {.fp-hero {padding: 56px 0 48px}
.fp-hero::before {width: 320px;height: 200px}
.fp-hero-stat-card {padding: 16px 24px;min-width: 120px}
.fp-region-section {padding: 36px 0 8px}
.fp-parks-grid {grid-template-columns: 1fr;gap: 12px}
.fp-detail-hero {padding: 40px 0 28px}
.fp-stats-grid {grid-template-columns: 1fr}
.fp-bar-label {width: 56px;font-size: 0.76rem}
.fp-catch-image {width: 80px;min-height: 72px}
.fp-catch-body {padding: 8px 12px 8px 0}}
@media (max-width: 390px) {.fp-hero-stats {gap: 10px}
.fp-hero-stat-card {padding: 14px 18px;min-width: 0;flex: 1}
.fp-detail-pills {gap: 6px}
.fp-section-padding-x {padding-left: 16px;padding-right: 16px}}