:root {--article-accent: #7c3aed;--article-genre-fishing_trip: #3b82f6;--article-genre-howto: #f59e0b;--article-genre-cooking: #f43f5e;--article-genre-tackle_review: #8b5cf6;--article-genre-spot_guide: #10b981;--article-genre-other: #64748b;--article-genre-admin_note: #0ea5e9}
.article-genre--fishing_trip { --article-genre-color: var(--article-genre-fishing_trip); }
.article-genre--howto { --article-genre-color: var(--article-genre-howto); }
.article-genre--cooking { --article-genre-color: var(--article-genre-cooking); }
.article-genre--tackle_review { --article-genre-color: var(--article-genre-tackle_review); }
.article-genre--spot_guide { --article-genre-color: var(--article-genre-spot_guide); }
.article-genre--other { --article-genre-color: var(--article-genre-other); }
.article-genre--admin_note { --article-genre-color: var(--article-genre-admin_note); }
.article-map-cover {position: relative;width: 100%;overflow: hidden;background: linear-gradient(135deg, #ede9fe, #ddd6fe);color: var(--article-accent);display: flex;align-items: center;justify-content: center}
.article-map-cover img {display: block;width: 100%;height: 100%;object-fit: cover}
.article-map-cover svg {width: 40%;height: 40%;max-width: 28px;max-height: 28px;opacity: 0.8}
.article-map-cover--hidden {background: #e2e8f0;color: #64748b}
.article-spotlight {position: relative;width: 132px;cursor: pointer;padding-bottom: 8px}
.article-spotlight-card {position: relative;background: #fff;padding: 5px 5px 7px;border-radius: 10px;box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);transform: rotate(-3deg);transition: transform 0.2s ease}
.article-spotlight--tilt-right .article-spotlight-card {transform: rotate(2.5deg)}
.article-spotlight:hover .article-spotlight-card,
.article-spotlight.is-current .article-spotlight-card {transform: rotate(0) scale(1.04)}
.article-spotlight-card::after {content: "";position: absolute;left: 50%;bottom: -6px;width: 14px;height: 14px;background: #fff;transform: translateX(-50%) rotate(45deg);z-index: -1}
.article-spotlight .article-map-cover {aspect-ratio: 16 / 9;border-radius: 7px}
.article-spotlight-ribbon {position: absolute;top: -9px;left: -8px;z-index: 1;background: linear-gradient(135deg, #f59e0b, #ef4444);color: #fff;font-size: 0.6rem;font-weight: 800;line-height: 1.4;padding: 2px 8px;border-radius: 999px;box-shadow: var(--shadow-sm);letter-spacing: 0.02em;white-space: nowrap}
.article-spotlight-ribbon--new {background: linear-gradient(135deg, #10b981, #0ea5e9)}
.article-spotlight-title {font-size: 0.72rem;font-weight: 700;line-height: 1.35;color: var(--color-text-primary);margin-top: 6px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;overflow-wrap: anywhere}
.article-spotlight-foot {display: flex;align-items: center;gap: 5px;margin-top: 5px;font-size: 0.62rem;color: var(--color-text-muted);white-space: nowrap;overflow: hidden}
.article-spotlight-avatar {flex-shrink: 0;width: 18px;height: 18px;border-radius: 50%;overflow: hidden;background: var(--color-bg-secondary)}
.article-spotlight-avatar img,
.article-spotlight-avatar svg {display: block;width: 100%;height: 100%;object-fit: cover}
.article-spotlight-author {min-width: 0;overflow: hidden;text-overflow: ellipsis}
.article-spotlight-stat {margin-left: auto;flex-shrink: 0;display: inline-flex;align-items: center;gap: 3px;font-weight: 700;color: var(--color-danger)}
.article-spotlight-stat svg {width: 10px;height: 10px}
.article-spotlight--featured::before {content: "";position: absolute;left: 50%;bottom: 0;width: 60px;height: 60px;transform: translate(-50%, 50%);border-radius: 50%;background: radial-gradient(circle, rgba(245, 158, 11, 0.55), transparent 65%);animation: article-spotlight-glow 2.2s ease-in-out infinite;pointer-events: none;z-index: -1}
@keyframes article-spotlight-glow {0%, 100% { transform: translate(-50%, 50%) scale(0.8); opacity: 0.6; }
50% { transform: translate(-50%, 50%) scale(1.25); opacity: 1; }}
.article-pin {position: relative;width: 34px;height: 34px;border-radius: 10px;padding: 2px;background: #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px var(--article-genre-color, var(--article-genre-other));cursor: pointer;transition: transform 0.15s ease}
.article-pin:hover,
.article-pin.is-current {transform: scale(1.15)}
.article-pin .article-map-cover {height: 100%;border-radius: 8px}
.article-pin .article-map-cover svg {max-width: 16px;max-height: 16px}
.article-pin::after {content: "";position: absolute;left: 50%;bottom: -6px;width: 9px;height: 9px;background: #fff;transform: translateX(-50%) rotate(45deg);z-index: -1;box-shadow: 2px 2px 0 0 var(--article-genre-color, var(--article-genre-other))}
.article-strip {position: absolute;left: 0;right: 0;bottom: 28px;z-index: 10;padding: 10px 0 8px;background: linear-gradient(to top, rgba(255, 255, 255, 0.96) 70%, rgba(255, 255, 255, 0));pointer-events: none;transform: translateY(24px);opacity: 0;visibility: hidden;transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease}
.article-strip.is-visible {transform: translateY(0);opacity: 1;visibility: visible}
.article-strip-header {display: flex;align-items: center;justify-content: space-between;gap: 8px;padding: 0 16px;margin-bottom: 6px;font-size: 0.78rem;font-weight: 700;color: var(--color-text-secondary);pointer-events: auto}
.article-strip-header svg {flex-shrink: 0;vertical-align: -3px;margin-right: 4px;color: var(--article-accent)}
.article-strip-all-link {display: inline-flex;align-items: center;gap: 2px;color: var(--article-accent);font-size: 0.72rem;font-weight: 700;text-decoration: none;white-space: nowrap}
.article-strip-all-link:hover {text-decoration: underline}
.article-strip-scroll {display: flex;gap: 8px;overflow-x: auto;scroll-snap-type: x proximity;scrollbar-width: none;padding: 2px 16px 4px;pointer-events: auto;-webkit-overflow-scrolling: touch}
.article-strip-scroll::-webkit-scrollbar {display: none}
.article-strip-card {flex: 0 0 150px;scroll-snap-align: start;background: #fff;border-radius: 10px;overflow: hidden;border: 1px solid var(--color-border);border-top: 3px solid var(--article-genre-color, var(--article-genre-other));box-shadow: var(--shadow-sm);cursor: pointer;text-align: left;padding: 0;font: inherit;color: inherit;transition: transform 0.15s ease, box-shadow 0.15s ease}
.article-strip-card:hover {transform: translateY(-2px);box-shadow: var(--shadow-md)}
.article-strip-card.is-current {outline: 2px solid var(--article-accent);outline-offset: -1px}
.article-strip-card .article-map-cover {aspect-ratio: 16 / 9}
.article-strip-card-badge {position: absolute;top: 6px;left: 6px;background: linear-gradient(135deg, #f59e0b, #ef4444);color: #fff;font-size: 0.58rem;font-weight: 800;line-height: 1.4;padding: 1px 7px;border-radius: 999px}
.article-strip-card-badge--new {background: linear-gradient(135deg, #10b981, #0ea5e9)}
.article-strip-card-title {font-size: 0.68rem;font-weight: 700;line-height: 1.35;padding: 6px 8px 0;margin-bottom: 7px;color: var(--color-text-primary);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;overflow-wrap: anywhere}
body.article-strip-visible .home-chat {display: none}
.article-strip-nav {position: absolute;top: 50%;display: none;align-items: center;justify-content: center;width: 32px;height: 32px;border: none;border-radius: 50%;background: rgba(255, 255, 255, 0.95);color: var(--color-text-primary);box-shadow: var(--shadow-md);cursor: pointer;pointer-events: auto;z-index: 1}
.article-strip-nav.is-hidden {display: none !important}
.article-strip-nav--prev { left: 8px; }
.article-strip-nav--next { right: 8px; }
@media (min-width: 769px) {.article-strip-nav { display: flex; }}
@media (max-width: 480px) {.article-spotlight { width: 116px; }
.article-strip-card { flex-basis: 136px; }}
@media (prefers-reduced-motion: reduce) {.article-spotlight--featured::before { animation: none; }
.article-strip { transition: none; }}