.hashtag-chips {display: flex;flex-wrap: wrap;gap: 6px;margin: 0;padding: 0;list-style: none}
.hashtag-chips > li {min-width: 0;max-width: 100%}
.hashtag-chip {display: inline-block;max-width: 100%;padding: 3px 10px;border-radius: 14px;font-size: 13px;font-weight: 600;line-height: 1.5;background: #e0e7ff;color: #3730a3;text-decoration: none;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;vertical-align: top}
.hashtag-chip:hover {background: #c7d2fe}
.hashtag-chip:focus-visible {outline: 2px solid #4f46e5;outline-offset: 2px}
.fishing-report-comment a[href*="/tags/"] {color: #4338ca;font-weight: 600;text-decoration: none}
.fishing-report-comment a[href*="/tags/"]:hover {text-decoration: underline}
.owner-comment-tags {margin-top: 10px;padding-top: 10px;border-top: 1px solid #eef0f3}
.owner-comment-tags-only .owner-comment-tags {margin-top: 0;padding-top: 0;border-top: none}
.hashtag-input-label {display: block;margin-bottom: 6px;font-size: 14px;font-weight: 600;color: var(--color-text-primary, #1e293b)}
.hashtag-input-box {display: flex;flex-wrap: wrap;align-items: center;gap: 6px;width: 100%;max-width: 100%;box-sizing: border-box;min-height: 42px;padding: 8px 10px;border: 1px solid var(--color-border-light, #e5e7eb);border-radius: var(--radius-md, 10px);background: #fff;cursor: text;transition: border-color 0.2s, box-shadow 0.2s}
.hashtag-input-box:focus-within {border-color: var(--color-primary, #3b82f6);box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)}
.hashtag-input-chips {display: contents}
.hashtag-input-chip {display: inline-flex;align-items: center;gap: 2px;max-width: 100%;box-sizing: border-box;padding: 3px 8px;border-radius: 14px;font-size: 13px;font-weight: 600;background: #e0e7ff;color: #3730a3;white-space: nowrap}
.hashtag-input-chip-name {min-width: 0;overflow: hidden;text-overflow: ellipsis}
.hashtag-input-chip-remove {position: relative;display: inline-flex;flex: none;align-items: center;justify-content: center;width: 16px;height: 16px;margin-left: 2px;padding: 0;border: none;border-radius: 50%;background: rgba(55, 48, 163, 0.15);color: #3730a3;font-size: 12px;line-height: 1;cursor: pointer}
.hashtag-input-chip-remove::before {content: "";position: absolute;inset: -4px}
.hashtag-input-chip-remove:hover {background: rgba(239, 68, 68, 0.2);color: #ef4444}
.hashtag-input-text {flex: 1;min-width: 80px;border: none;outline: none;font-size: 16px;color: var(--color-text-primary, #1e293b);background: transparent}
.hashtag-input-help {margin: 6px 0 0;font-size: 12px;color: #6b7280}
.hashtag-input-warning {margin: 6px 0 0;font-size: 12px;font-weight: 500;color: #dc2626}
.hashtag-input-warning[hidden] {display: none !important}
.tags-page {max-width: 1080px;margin: 0 auto;padding: 20px 16px 40px;box-sizing: border-box}
.tags-breadcrumb {margin-bottom: 8px;font-size: 13px}
.tags-breadcrumb a {color: #4f46e5;text-decoration: none}
.tags-page-header {margin-bottom: 20px}
.tags-page-title {margin: 0 0 4px;font-size: 24px;font-weight: 700;color: #1e293b;overflow-wrap: anywhere}
.tags-page-lead {margin: 0;font-size: 14px;color: #64748b}
.tags-hero {position: relative;overflow: hidden;margin-bottom: 20px;padding: 28px 32px;border-radius: 16px;background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%)}
.tags-hero-glyph {position: absolute;top: -28px;right: -12px;font-size: 160px;font-weight: 700;line-height: 1;color: #c7d2fe;opacity: 0.35;pointer-events: none;user-select: none}
.tags-hero-main {position: relative;display: flex;align-items: flex-start;gap: 16px}
.tags-hero-icon {display: flex;flex: none;align-items: center;justify-content: center;width: 56px;height: 56px;border-radius: 14px;background: #4f46e5;color: #fff}
.tags-hero-text {min-width: 0}
.tags-hero .tags-page-title {font-size: 28px;line-height: 1.3}
.tags-hero .tags-page-lead {line-height: 1.7}
.tags-hero-stat {position: relative;display: inline-flex;align-items: center;gap: 5px;height: 32px;margin: 14px 0 0 72px;padding: 0 14px;border-radius: 999px;background: #fff;box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);white-space: nowrap}
.tags-hero-stat-label,
.tags-hero-stat-unit {font-size: 12px;color: #64748b}
.tags-hero-stat-value {font-size: 16px;font-weight: 700;color: #3730a3}
.tags-board {min-width: 0;border: 1px solid #e8ecef;border-radius: 12px;background: #fff}
.tags-board-tabs {display: flex;overflow-x: auto;border-bottom: 1px solid #e2e8f0;border-radius: 12px 12px 0 0;background: #fff}
.tags-board-tab {display: flex;flex: 1 0 auto;align-items: center;justify-content: center;gap: 6px;height: 44px;margin-bottom: -1px;padding: 0 18px;border: 0;border-bottom: 2px solid transparent;background: none;font: inherit;font-size: 15px;font-weight: 700;color: #64748b;white-space: nowrap;cursor: pointer}
.tags-board-tab[aria-selected="true"] {color: #4f46e5;border-bottom-color: #4f46e5}
.tags-board-tab:focus-visible {outline: 2px solid #4f46e5;outline-offset: -2px}
.tags-board-panels {min-width: 0}
.tags-board-panel {display: none;min-width: 0;padding: 16px}
.tags-board-panel.is-active {display: block}
.tags-section-icon {color: #ea580c;flex: none}
.tags-section-note {margin: 2px 0 12px;font-size: 12px;color: #6b7280}
.tags-ranking {display: grid;grid-template-columns: minmax(0, 1fr);margin: 0;padding: 0;list-style: none}
.tags-ranking-item {display: grid;grid-template-columns: 26px minmax(0, 1fr) 40px 96px;align-items: center;column-gap: 10px;min-width: 0;height: 52px;border-top: 1px solid #f1f5f9}
.tags-ranking-item:first-child {border-top: none}
.tags-ranking-item-newest {grid-template-columns: minmax(0, 1fr) auto}
.tags-ranking-rank {width: 26px;height: 26px;border-radius: 50%;background: #eef2ff;color: #4338ca;font-size: 13px;font-weight: 700;line-height: 26px;text-align: center}
.tags-ranking-item:first-child .tags-ranking-rank {background: #4f46e5;color: #fff}
.tags-ranking-name {min-width: 0;font-size: 15px;font-weight: 700;color: #3730a3;text-decoration: none;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.tags-ranking-name:hover {text-decoration: underline}
.tags-ranking-item-newest .hashtag-chip {justify-self: start}
.tags-ranking-count {min-width: 0;font-size: 12px;line-height: 1.3;color: #64748b;text-align: right;overflow-wrap: anywhere}
.tags-ranking-growth {font-weight: 700;color: #c2410c}
.tags-ranking-growth-new {color: #047857}
.tags-sparkline {display: flex;align-items: flex-end;justify-self: end;gap: 2px;height: 18px}
.tags-sparkline-bar {display: block;width: 4px;height: 2px;border-radius: 1px;background: #a5b4fc}
.tags-sparkline-bar:last-child {background: #4f46e5}
.tags-sparkline-bar[data-level="1"] { height: 4px; }
.tags-sparkline-bar[data-level="2"] { height: 6px; }
.tags-sparkline-bar[data-level="3"] { height: 8px; }
.tags-sparkline-bar[data-level="4"] { height: 11px; }
.tags-sparkline-bar[data-level="5"] { height: 13px; }
.tags-sparkline-bar[data-level="6"] { height: 16px; }
.tags-sparkline-bar[data-level="7"] { height: 18px; }
@media (min-width: 1024px) {#tags-panel-popular .tags-ranking {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 8px 24px}
#tags-panel-popular .tags-ranking-item {border-top: none;border-bottom: 1px solid #f1f5f9}}
.tags-empty {margin: 0;padding: 16px 0;font-size: 14px;color: #6b7280}
.tags-show-layout {display: grid;grid-template-columns: minmax(0, 1fr) 260px;gap: 24px;align-items: start}
.tags-show-main {min-width: 0}
.tags-tabs {display: flex;gap: 4px;margin-bottom: 16px;border-bottom: 1px solid #e5e7eb}
.tags-tab {padding: 10px 16px;margin-bottom: -1px;border-bottom: 2px solid transparent;font-size: 14px;font-weight: 600;color: #64748b;text-decoration: none}
.tags-tab.is-active {border-bottom-color: #4f46e5;color: #3730a3}
.tag-report-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));gap: 12px}
.tag-report-card {display: flex;flex-direction: column;min-width: 0;overflow: hidden;border: 1px solid #e8ecef;border-radius: 12px;background: #fff;color: inherit;text-decoration: none;transition: box-shadow 0.2s}
.tag-report-card:hover {box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)}
.tag-report-card-image {aspect-ratio: 1 / 1;background: #eef2f6;overflow: hidden}
.tag-report-card-image img {display: block;width: 100%;height: 100%;object-fit: cover}
.tag-report-card-placeholder {display: flex;align-items: center;justify-content: center;height: 100%;font-size: 12px;color: #6b7280}
.tag-report-card-body {display: flex;flex-direction: column;gap: 2px;padding: 8px 10px 10px;min-width: 0}
.tag-report-card-fish {font-size: 14px;font-weight: 700;color: #1e293b;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.tag-report-card-meta,
.tag-report-card-tags {font-size: 12px;color: #64748b;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.tag-report-card-tags {color: #4338ca;font-weight: 600}
.tags-more {margin-top: 16px;text-align: center}
.tags-more-link {display: inline-block;padding: 10px 24px;border: 1px solid #c7d2fe;border-radius: 999px;color: #4338ca;font-size: 14px;font-weight: 600;text-decoration: none}
.tags-more-link:hover {background: #eef2ff}
.tags-show-side {display: flex;flex-direction: column;gap: 16px;min-width: 0}
.tags-side-section {padding: 14px;border: 1px solid #e8ecef;border-radius: 12px;background: #fff}
.tags-side-title {margin: 0 0 10px;font-size: 14px;font-weight: 700;color: #1e293b}
.tags-fish-list {margin: 0;padding: 0;list-style: none}
.tags-fish-item {display: flex;justify-content: space-between;gap: 8px;padding: 6px 0;font-size: 14px;border-top: 1px solid #f1f5f9}
.tags-fish-item:first-child {border-top: none}
.tags-fish-name {min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.tags-fish-count {flex: none;color: #64748b}
@media (max-width: 768px) {.tags-show-layout {grid-template-columns: minmax(0, 1fr)}
.tag-report-grid {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px}
.tags-page-title {font-size: 20px}
.tags-hero {margin-bottom: 16px;padding: 20px 16px}
.tags-hero-glyph {top: -20px;font-size: 120px}
.tags-hero-main {gap: 12px}
.tags-hero-icon {width: 48px;height: 48px}
.tags-hero .tags-page-title {font-size: 24px}
.tags-hero-stat {margin-left: 0}
.tags-board-tabs {position: sticky;top: 0;z-index: 2}
.tags-board-panels {display: flex;align-items: flex-start;overflow-x: auto;overflow-y: hidden;scroll-snap-type: x mandatory;overscroll-behavior-x: contain;-webkit-overflow-scrolling: touch;scrollbar-width: none}
.tags-board-panels::-webkit-scrollbar {display: none}
.tags-board-panel,
.tags-board-panel.is-active {display: block;flex: 0 0 100%;padding: 12px 14px 8px;scroll-snap-align: start;scroll-snap-stop: always}}
@media (max-width: 480px) {.tags-board-tab {padding: 0 8px;font-size: 14px;gap: 4px}
.tags-board-tab .tags-section-icon {display: none}
.tags-ranking-item {grid-template-columns: 26px minmax(0, 1fr) 27px 88px;column-gap: 8px}
.tags-ranking-item-newest {grid-template-columns: minmax(0, 1fr) auto}
.tags-sparkline {gap: 1px}
.tags-sparkline-bar {width: 3px}}
.hashtag-input-head,
.crowd-tags-head {display: flex;flex-wrap: wrap;align-items: center;gap: 4px 6px;position: relative}
.hashtag-input-head .hashtag-input-label {margin-bottom: 0}
.hashtag-input-head {margin-bottom: 6px}
.hashtag-info {display: inline-flex}
.hashtag-info-toggle {display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 50%;color: #64748b;cursor: pointer;list-style: none}
.hashtag-info-toggle::-webkit-details-marker {display: none}
.hashtag-info-toggle:hover,
.hashtag-info[open] .hashtag-info-toggle {color: #4338ca;background: #eef2ff}
.hashtag-info-toggle:focus-visible {outline: 2px solid #4f46e5;outline-offset: 1px}
.hashtag-info-panel {position: absolute;top: calc(100% + 4px);left: 0;right: 0;z-index: 20;box-sizing: border-box;max-width: 100%;box-shadow: 0 6px 16px rgb(15 23 42 / 12%);padding: 10px 12px;border: 1px solid #e0e7ff;border-radius: 10px;background: #f8faff;font-size: 13px;line-height: 1.6;color: #334155;overflow-wrap: anywhere}
.hashtag-info-panel p {margin: 0 0 6px}
.hashtag-info-heading {font-weight: 700;color: #1e293b}
.hashtag-info-list {margin: 0 0 8px;padding-left: 1.2em}
.hashtag-info-examples {display: grid;grid-template-columns: auto 1fr;gap: 2px 10px;margin: 0 0 8px}
.hashtag-info-examples dt {color: #64748b}
.hashtag-info-examples dd,
.hashtag-info-tags {margin: 0;color: #4338ca;font-weight: 600}
.hashtag-info-tag {white-space: nowrap}
.hashtag-info-panel .hashtag-info-note {margin: 0;color: #64748b;font-size: 12px}
.crowd-tags {margin: 12px 0;padding: 12px 14px;border-radius: 12px;background: #fff;box-shadow: 0 1px 3px rgb(15 23 42 / 8%)}
.crowd-tags-title {margin: 0;font-size: 14px;font-weight: 700;color: #1e293b}
.crowd-tag-chips {margin-top: 8px}
.crowd-tag-item {display: inline-flex;align-items: center;max-width: 100%}
.hashtag-chip--crowd {background: #ecfdf5;color: #047857}
.hashtag-chip--crowd:hover {background: #d1fae5}
.crowd-tag-remove-form {display: inline-flex}
.crowd-tag-remove {display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;margin-left: 2px;padding: 0;border: none;border-radius: 50%;background: transparent;color: #64748b;cursor: pointer}
.crowd-tag-remove:hover {background: #f1f5f9;color: #b91c1c}
.crowd-tags-empty,
.crowd-tags-note {margin: 8px 0 0;font-size: 12px;color: #64748b}
.crowd-tag-form {display: flex;gap: 6px;margin-top: 10px}
.crowd-tag-input {flex: 1 1 auto;min-width: 0;max-width: 100%;box-sizing: border-box;padding: 7px 10px;border: 1px solid #cbd5e1;border-radius: 8px;font-size: 16px}
.crowd-tag-submit {flex: 0 0 auto;padding: 7px 14px;border: none;border-radius: 8px;background: #059669;color: #fff;font-size: 14px;font-weight: 600;cursor: pointer}
.crowd-tag-submit:hover {background: #047857}
.crowd-tags-message {margin: 8px 0 0;font-size: 13px;color: #047857}
.crowd-tags-message.is-error {color: #b91c1c}