.fish-book-container {max-width: 1200px;margin: 0 auto;padding: 20px}
.fish-book-hero {background: linear-gradient(135deg, #0d47a1 0%, #1565c0 50%, #1976d2 100%);border-radius: 20px;padding: 24px;margin-bottom: 24px;color: #fff;position: relative;overflow: hidden}
.fish-book-hero::before {content: "";position: absolute;top: -50%;right: -20%;width: 300px;height: 300px;background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);pointer-events: none}
.fish-book-back-btn {position: absolute;z-index: 1;top: 16px;left: 16px;width: 36px;height: 36px;background: rgba(255, 255, 255, 0.15);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;text-decoration: none;transition: background 0.2s ease}
.fish-book-back-btn:hover {background: rgba(255, 255, 255, 0.25)}
.fish-book-hero-content {display: flex;flex-direction: column;gap: 20px}
.fish-book-main-stat {display: flex;align-items: center;gap: 20px;padding-top: 8px}
.completion-badge {position: relative;width: 100px;height: 100px;flex-shrink: 0}
.completion-badge .circular-chart {display: block;width: 100%;height: 100%;filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2))}
.completion-badge .circle-bg {fill: none;stroke: rgba(255, 255, 255, 0.2);stroke-width: 3}
.completion-badge .circle {fill: none;stroke: #4fc3f7;stroke-width: 3.5;stroke-linecap: round;transform: rotate(-90deg);transform-origin: center;transition: stroke-dasharray 0.6s ease;filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.6))}
.completion-badge-inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;display: flex;align-items: baseline;justify-content: center}
.completion-badge-value {font-size: 2em;font-weight: 800;color: #fff;line-height: 1;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}
.completion-badge-unit {font-size: 0.9em;font-weight: 600;color: rgba(255, 255, 255, 0.9);margin-left: 1px}
.fish-book-title-area {flex: 1}
.fish-book-title {font-size: 1.5em;font-weight: 700;margin: 0 0 8px 0;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15)}
.fish-book-progress {display: flex;align-items: baseline;gap: 2px;flex-wrap: wrap}
.progress-caught {font-size: 2em;font-weight: 800;color: #4fc3f7;line-height: 1;text-shadow: 0 0 10px rgba(79, 195, 247, 0.5)}
.progress-separator {font-size: 1.2em;color: rgba(255, 255, 255, 0.6);margin: 0 2px}
.progress-total {font-size: 1.2em;font-weight: 600;color: rgba(255, 255, 255, 0.8)}
.progress-label {font-size: 0.9em;color: rgba(255, 255, 255, 0.7);margin-left: 6px}
.fish-book-rarity-mini {display: flex;gap: 8px;flex-wrap: wrap}
.rarity-mini-item {flex: 1;min-width: 80px;background: rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 10px}
.rarity-mini-stars {font-size: 0.7em;margin-bottom: 6px;line-height: 1}
.rarity-mini-stars .star {color: #fbbf24;text-shadow: 0 0 4px rgba(251, 191, 36, 0.5)}
.rarity-mini-progress {display: flex;align-items: center;gap: 6px}
.rarity-mini-bar {flex: 1;height: 4px;background: rgba(255, 255, 255, 0.2);border-radius: 2px;overflow: hidden}
.rarity-mini-fill {height: 100%;background: linear-gradient(90deg, #4fc3f7, #81d4fa);border-radius: 2px;transition: width 0.4s ease}
.rarity-mini-count {font-size: 0.7em;color: rgba(255, 255, 255, 0.8);white-space: nowrap}
.fish-book-categories {display: flex;flex-direction: column;gap: 24px}
.fish-book-category {background: #fff;border-radius: 16px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08)}
.fish-book-category.locked {opacity: 0.7}
.category-header {margin-bottom: 16px}
.category-title-area {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px}
.category-title {font-size: 1.2em;font-weight: 600;color: #1c1e21;margin: 0;display: flex;align-items: center;gap: 8px}
.category-icon {display: inline-flex;align-items: center;justify-content: center;width: 28px;height: 28px;border-radius: 6px}
.unlocked-icon {background: #e7f3ff;color: #1877f2}
.locked-icon {background: #f0f2f5;color: #606770}
.category-count {font-size: 0.9em;color: #606770;font-weight: 500}
.category-progress {display: flex;align-items: center;gap: 12px}
.category-progress-bar {flex: 1;height: 6px;background: #e4e6e9;border-radius: 3px;overflow: hidden}
.category-progress-fill {height: 100%;background: linear-gradient(90deg, #1877f2, #42a5f5);border-radius: 3px;transition: width 0.4s ease}
.category-rate {font-size: 0.85em;font-weight: 600;color: #1877f2;min-width: 35px;text-align: right}
.category-fishes {display: grid;grid-template-columns: repeat(auto-fill, 100px);gap: 12px;justify-content: start}
.fish-card {min-height: 100px;border-radius: 12px;cursor: pointer;transition: all 0.2s ease}
.fish-card:hover {transform: translateY(-2px)}
.fish-card-inner {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 12px 8px;text-align: center;box-sizing: border-box}
.fish-card.caught {background: linear-gradient(135deg, #e7f3ff 0%, #d4e9ff 100%);border: 2px solid #1877f2}
.fish-card.caught:hover {box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3)}
.fish-card.caught .fish-card-icon {color: #1877f2;margin-bottom: 6px}
.fish-card.caught .fish-card-name {font-size: 0.75em;font-weight: 600;color: #1c1e21;line-height: 1.2;word-break: break-all}
.fish-card.has-image {position: relative;overflow: hidden;border: 2px solid #1877f2;padding: 0}
.fish-card-image {width: 100%;height: 100px;overflow: hidden}
.fish-card-image img {width: 100%;height: 100%;object-fit: cover;display: block}
.fish-card-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);padding: 24px 6px 6px;text-align: center}
.fish-card.has-image .fish-card-overlay .fish-card-name {font-size: 0.75em;font-weight: 700;color: #ffffff;line-height: 1.2;word-break: break-all;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);display: block;margin-bottom: 2px}
.fish-card.has-image .fish-card-overlay .fish-card-rarity {margin-top: 2px;font-size: 0.6em;line-height: 1}
.fish-card.has-image .fish-card-overlay .star {color: rgba(255, 255, 255, 0.5)}
.fish-card.has-image .fish-card-overlay .star.filled {color: #fbbf24}
.fish-card.not-caught {background: #f5f6f7;border: 2px dashed #dddfe2}
.fish-card.not-caught:hover {border-color: #bbbfc4}
.fish-card-silhouette {width: 48px;height: 48px;background: #dddfe2;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 6px}
.silhouette-mark {font-size: 1.5em;font-weight: 700;color: #fff}
.fish-card-name.unknown {font-size: 0.75em;color: #bbbfc4;font-weight: 500}
.fish-card-rarity {margin-top: 4px;font-size: 0.65em;line-height: 1}
.fish-card-rarity .star {color: #dddfe2}
.fish-card-rarity .star.filled {color: #fbbf24}
.fish-card.not-caught .fish-card-rarity .star {color: #e4e6e9}
@media (max-width: 768px) {.fish-book-container {padding: 12px}
.fish-book-hero {padding: 16px;border-radius: 16px;margin-bottom: 16px}
.fish-book-back-btn {top: 12px;left: 12px;width: 32px;height: 32px}
.fish-book-main-stat {gap: 16px}
.completion-badge {width: 80px;height: 80px}
.completion-badge-value {font-size: 1.6em}
.fish-book-title {font-size: 1.2em}
.progress-caught {font-size: 1.6em}
.progress-total {font-size: 1em}
.rarity-mini-item {min-width: 60px;padding: 8px}
.fish-book-category {padding: 16px;border-radius: 12px}
.category-fishes {grid-template-columns: repeat(auto-fill, 80px);gap: 8px}
.fish-card {min-height: 85px}
.fish-card-inner {padding: 8px 6px}
.fish-card.caught .fish-card-icon svg {width: 24px;height: 24px}
.fish-card-image {height: 85px}
.fish-card-silhouette {width: 36px;height: 36px}
.silhouette-mark {font-size: 1.2em}}
@media (max-width: 480px) {.fish-book-main-stat {flex-direction: column;text-align: center;gap: 12px}
.fish-book-progress {justify-content: center}
.fish-book-rarity-mini {gap: 6px}
.rarity-mini-item {min-width: 50px;padding: 6px}
.rarity-mini-stars {font-size: 0.6em}
.rarity-mini-count {font-size: 0.6em}
.category-fishes {grid-template-columns: repeat(auto-fill, 70px)}
.fish-card {min-height: 75px}
.fish-card-image {height: 75px}
.fish-card-name {font-size: 0.65em !important}
.fish-card-rarity {font-size: 0.55em}}
.fbk {--fbk-paper: #fff;--fbk-plate: #f7fafd;--fbk-plate-un: #e6edf4;--fbk-deep: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.52));--fbk-deep-rule: #8a8f94;--fbk-rule: #d0dce8;--fbk-ink: #17324a;--fbk-ink-mut: #4d6278;--fbk-star: #b97800;--fbk-star-off: #d3dde8;--fbk-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;--fbk-primary: #1f4e79;--fbk-focus: var(--fbk-primary);--fbk-meter: #e2725b;--fbk-accent-ink: #b8442d;--fbk-new: #c2442c;--fbk-hot: #1d7a55;--fbk-track: rgba(31, 78, 121, 0.14);--fbk-shadow: 0 2px 8px rgba(31, 78, 121, 0.1);--fbk-g-tag: #d4a23c;--fbk-g-tag-ink: #2b1e05;--fbk-g-pale: #fff4d9;--fbk-g-band: #f0d796;--fbk-g-ink: #3d2c07;--fbk-g-icon: #9a6f12;max-width: 960px;padding: 0 10px 12px;container: fbk / inline-size;overflow-wrap: anywhere;--fbk-chrome: 61px;box-sizing: border-box;height: calc(var(--app-vh, 100dvh) - var(--fbk-chrome));min-height: 460px;display: flex;flex-direction: column}
@media (max-width: 768px) {.fbk {--fbk-chrome: calc(60px + env(safe-area-inset-bottom, 0px))}}
.fbk-bar,
.fbk-toc {flex: none}
.fbk *,
.fbk *::before,
.fbk *::after {box-sizing: border-box}
.fbk [hidden] {display: none !important}
.fbk :focus-visible {outline: 3px solid var(--fbk-focus);outline-offset: 2px}
.fbk button {font: inherit}
.fbk-bar {height: 52px;display: flex;align-items: center}
.fbk-back {width: 44px;height: 44px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;color: var(--fbk-ink);background: var(--fbk-plate);border: 1px solid var(--fbk-rule);text-decoration: none}
.fbk-toc {position: sticky;top: 0;z-index: 5;background: #f0f2f5}
.fbk-tabs {display: flex;align-items: flex-end;gap: 4px;height: 56px;padding: 0 6px;overflow-x: auto;overflow-y: hidden;scrollbar-width: none;-webkit-overflow-scrolling: touch}
.fbk-tabs::-webkit-scrollbar {display: none}
.fbk-tab {flex: none;position: relative;height: 44px;min-width: 64px;padding: 0 12px 4px;border: 0;border-radius: 4px 4px 0 0;background: var(--tab);color: var(--fbk-ink);cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: center;line-height: 1.2;white-space: nowrap;filter: brightness(0.84) saturate(0.85);box-shadow: inset 0 -8px 10px -8px rgba(0, 0, 0, 0.28), 0 -1px 2px rgba(0, 0, 0, 0.18);transition: height 0.15s ease, filter 0.15s ease}
.fbk-tab::before {content: "";position: absolute;left: 0;right: 0;top: 0;height: 7px;border-radius: 4px 4px 0 0;background: linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0))}
.fbk-tab b {font-size: 12.5px;font-weight: 800}
.fbk-tab small {font-size: 10px;font-weight: 700;font-variant-numeric: tabular-nums}
.fbk-tab.is-empty {opacity: 0.78}
.fbk-tab[aria-pressed="true"] {height: 54px;filter: none;opacity: 1;box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.22);z-index: 1}
.fbk-tab--cover {--tab: #dce8f3}
.fbk-binder {position: relative;padding: 8px;border-radius: 0 0 16px 16px;background: linear-gradient(#2c5f8f, #1f4e79 40%, #173e63);box-shadow: var(--fbk-shadow), inset 0 0 0 2px rgba(255, 255, 255, 0.05);scroll-margin-top: 64px;flex: 1;min-height: 0;display: flex;flex-direction: column}
.fbk-binder::before {content: "";position: absolute;inset: 4px;pointer-events: none;border: 1.5px dashed rgba(255, 255, 255, 0.55);border-radius: 12px}
.fbk-spread {position: relative;flex: 1;min-height: 0;display: flex;flex-direction: column}
.fbk-slot {flex: 1;min-height: 0;display: flex;flex-direction: column}
.fbk-slot > .fbk-pg:not([hidden]) {flex: 1;min-height: 0}
.fbk-slot--cover > .fbk-pg {overflow-y: auto;overscroll-behavior-y: contain}
.fbk-cat {display: flex;flex-direction: column}
.fbk-scroll {flex: 1;min-height: 0;margin: 0 -10px -16px;padding: 2px 10px 16px;overflow-y: auto;overscroll-behavior-y: contain}
.fbk-pg {position: relative;min-width: 0;padding: 12px 10px 16px;border-radius: 8px;color: var(--fbk-ink);background: var(--fbk-paper);box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06)}
.fbk[data-view="cover"] .fbk-slot--cat,
.fbk[data-view="cat"] .fbk-slot--cover {display: none}
.fbk-hd {flex: none;display: flex;flex-wrap: wrap;align-items: center;gap: 10px 16px;min-height: 34px;margin-bottom: 8px}
.fbk-note {margin: 0;max-width: 55%;min-width: 0;height: 26px;padding: 0 12px;display: inline-flex;align-items: center;border-radius: 2px;background: var(--tab);color: var(--fbk-ink);font-size: 14px;font-weight: 800;transform: rotate(-1.5deg);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;box-shadow: 0 2px 3px rgba(0, 0, 0, 0.22), inset 0 6px 6px -6px rgba(255, 255, 255, 0.6)}
.fbk-nwrap {position: relative;display: inline-flex;flex: 0 0 auto;min-width: 0;max-width: calc(100% - 16px)}
.fbk-nwrap .fbk-note {max-width: 100%;padding-right: 20px}
.fbk-stamp {position: absolute;z-index: 1;top: -6px;right: -15px;width: 31px;height: 31px;border: 1.5px solid var(--fbk-accent-ink);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: var(--fbk-accent-ink);background: rgba(255, 255, 255, 0.6);font-size: 10.5px;font-weight: 800;line-height: 1;font-variant-numeric: tabular-nums;opacity: 0.92;transform: rotate(-8deg);pointer-events: none}
.fbk-stamp::before {content: "";position: absolute;inset: 1.5px;border: 1px dashed var(--fbk-accent-ink);border-radius: 50%;opacity: 0.55}
.fbk-stamp small {font-size: 8px;font-weight: 800}
.fbk-stamp.is-zero {color: var(--fbk-ink-mut);border-color: var(--fbk-ink-mut);border-style: dashed;opacity: 0.85}
.fbk-stamp.is-zero::before {display: none}
.fbk-nwrap.is-complete {max-width: calc(100% - 40px);margin-right: 22px}
.fbk-done {position: absolute;top: 0;right: -38px;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;color: var(--fbk-g-icon)}
.fbk-filter {margin-left: auto;flex: none;display: flex;align-items: center;gap: 3px}
.fbk-filter-btn {position: relative;height: 32px;padding: 0 5px;display: flex;align-items: center;gap: 2px;border: 1px solid var(--fbk-rule);border-radius: 999px;background: var(--fbk-plate);color: var(--fbk-ink-mut);font-weight: 800;white-space: nowrap;cursor: pointer;-webkit-tap-highlight-color: transparent;transition: transform 0.12s ease, background-color 0.18s ease-out, color 0.18s ease-out}
.fbk-filter-btn::after {content: "";position: absolute;inset: -6px -1px}
.fbk-filter-btn[data-filter="all"] {padding: 0 7px}
.fbk-filter-btn:active {transform: scale(0.97)}
.fbk-filter-btn[aria-pressed="true"] {border-color: var(--fbk-primary);background: var(--fbk-primary);color: #fff;box-shadow: 0 1px 2px rgba(23, 50, 74, 0.12), 0 4px 10px rgba(23, 50, 74, 0.08)}
.fbk-filter-btn svg {display: block;flex: none;width: 18px;height: 18px}
.fbk-filter-tri {fill: var(--fbk-meter);stroke: none}
.fbk-filter-btn b {margin-left: 2px;font-size: 10.5px;font-variant-numeric: tabular-nums}
.fbk-filter-btn[aria-pressed="true"] b {color: rgba(255, 255, 255, 0.85)}
.fbk-filter-lb {position: absolute;width: 1px;height: 1px;overflow: hidden;clip-path: inset(50%);white-space: nowrap}
.fbk-empty {padding: 40px 16px;display: flex;flex-direction: column;align-items: center;gap: 12px;color: var(--fbk-ink-mut);text-align: center}
.fbk-empty p {margin: 0;font-size: 13px;font-weight: 700}
.fbk-empty-reset {min-height: 44px;padding: 0 18px;border: 1px solid var(--fbk-rule);border-radius: 999px;background: var(--fbk-plate);color: var(--fbk-ink);font-size: 13px;font-weight: 800;cursor: pointer}
@media (prefers-reduced-motion: reduce) {.fbk-filter-btn {transition: none}}
.fbk-hint {margin: 0 0 10px;display: flex;align-items: center;gap: 5px;font-size: 11px;color: var(--fbk-ink-mut)}
.fbk-hint svg {flex: none}
.fbk-grid {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 8px}
.fbk-sp {position: relative;display: flex;flex-direction: column;min-width: 0;margin: 0;padding: 0;text-align: left;cursor: pointer;overflow: hidden;border: 1px solid var(--fbk-rule);border-radius: 6px;background: var(--fbk-plate);color: var(--fbk-ink);-webkit-tap-highlight-color: transparent;transition: transform 0.12s ease}
.fbk-sp.is-own {box-shadow: var(--fbk-shadow)}
.fbk-sp:active {transform: scale(0.98)}
.fbk-sp.is-un {border-style: dashed;background: var(--fbk-plate-un)}
.fbk-sp-plate {position: relative;display: block;aspect-ratio: 16 / 10;overflow: hidden;background: radial-gradient(90% 90% at 50% 40%, #fff, var(--fbk-plate))}
.fbk-sp.is-un .fbk-sp-plate {background: var(--fbk-plate-un)}
.fbk-sp.is-un:not(.is-sight) {border-style: solid;border-color: var(--fbk-deep-rule)}
.fbk-sp.is-un:not(.is-sight) .fbk-sp-plate {background: var(--fbk-deep), var(--fbk-plate-un)}
.fbk-sp-deep {position: absolute;inset: 0;display: block;width: 100%;height: 100%;fill: #fff}
.fbk-sp-tok {position: absolute;top: 50%;left: 50%;color: #fff;font: 800 22px/1 var(--fbk-serif);transform: translate(-50%, -52%)}
.fbk-sp-bub {display: block;width: 30px;height: 16px;fill: var(--fbk-ink-mut);opacity: 0.7}
.fbk-sp.is-sight .fbk-sp-nm {color: var(--fbk-ink);letter-spacing: normal}
.fbk-sp-card,
.fdm-card-mark {position: absolute;top: 0;left: 0;z-index: 3;width: 13px;height: 13px;background: var(--fbk-meter, #e2725b);clip-path: polygon(0 0, 100% 0, 0 100%);pointer-events: none}
.fdm-card-mark {width: 34px;height: 34px}
.fbk-sp.has-card .fbk-b-cnt {left: 15px}
.fbk-sp-photo {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover}
.fbk-art {position: absolute;inset: 0;display: flex;align-items: center;justify-content: center;overflow: hidden}
.fbk-art img {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;mix-blend-mode: multiply;transform: scale(1.04)}
.fbk-art:not(.has-image) img,
.fbk-art.has-image .fbk-ph {display: none}
.fbk-ph {width: 58%;height: auto;fill: var(--fbk-ink);opacity: 0.22}
.fbk-sp.is-un .fbk-art img,
.fbk-nt-pl .fbk-art img,
.fdm-unst img {-webkit-user-drag: none;-webkit-touch-callout: none;user-select: none;pointer-events: none}
.fbk-sp.is-un .fbk-art img,
.fbk-nt-pl .fbk-art img {filter: grayscale(1) brightness(0.55) contrast(30);opacity: 0.42}
.fbk-b-cnt {position: absolute;top: 4px;left: 4px;padding: 0 6px;height: 18px;display: inline-flex;align-items: center;border-radius: 999px;background: var(--fbk-primary);color: #fff;font-size: 10.5px;font-weight: 800;font-variant-numeric: tabular-nums;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3)}
.fbk-b-new {position: absolute;top: 4px;right: 4px;padding: 0 5px;height: 16px;display: inline-flex;align-items: center;border-radius: 3px;background: var(--fbk-new);color: #fff;font-size: 9.5px;font-weight: 800;letter-spacing: 0.04em;transform: rotate(4deg);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3)}
.fbk-sp-lb {display: flex;flex-direction: column;gap: 2px;padding: 5px 6px 7px;border-top: 1px solid var(--fbk-rule);min-width: 0;flex: 1}
.fbk-sp-r1 {display: flex;align-items: center;justify-content: space-between;gap: 4px;min-width: 0}
.fbk-sp-no {padding: 0 4px;border: 1px solid var(--fbk-rule);border-radius: 3px;background: var(--fbk-paper);font-size: 9.5px;font-weight: 700;letter-spacing: 0.02em;color: var(--fbk-ink-mut);font-variant-numeric: tabular-nums;white-space: nowrap}
.fbk-stars {font-size: 8.5px;letter-spacing: -0.5px;white-space: nowrap;color: var(--fbk-star-off)}
.fbk-stars .on {color: var(--fbk-star)}
.fbk-sp-nm {font-size: 12.5px;font-weight: 800;line-height: 1.3;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.fbk-sp.is-un .fbk-sp-nm {color: var(--fbk-ink-mut);letter-spacing: 0.12em}
.fbk-sp-rec {display: flex;align-items: center;gap: 3px;font-size: 10px;font-weight: 700;color: var(--fbk-ink-mut);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.fbk-sp-rec svg {flex: none;width: 11px;height: 11px}
.fbk-cv-top {display: flex;align-items: center;gap: 14px;min-width: 0;margin-bottom: 16px}
.fbk-cv-ttl {min-width: 0}
.fbk-cv-ttl h1 {margin: 0;font-size: 20px;line-height: 1.2;font-weight: 800;letter-spacing: 0;color: var(--fbk-ink)}
.fbk-nw {white-space: nowrap}
.fbk-tiles {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0;margin-bottom: 16px;border-block: 1px solid var(--fbk-rule)}
.fbk-tile {min-width: 0;display: flex;flex-direction: column;gap: 8px;padding: 12px 0}
.fbk-tile--caught {padding-right: 16px}
.fbk-tile--found {padding-left: 16px;border-left: 1px solid var(--fbk-rule)}
.fbk-tile-h {margin: 0;display: flex;align-items: center;gap: 8px;font-size: 14px;line-height: 1.4;font-weight: 800;color: var(--fbk-ink-mut)}
.fbk-tile-h svg {display: block;flex: none;width: 24px;height: 24px}
.fbk-tile-n {margin: 0;font-weight: 800;line-height: 1.2;color: var(--fbk-ink);font-variant-numeric: tabular-nums}
.fbk-tile-n b {display: inline-block;min-width: calc(var(--nd, 1) * 1ch);font-size: 36px;font-weight: 800}
.fbk-tile--found .fbk-tile-n b {font-weight: 700;color: var(--fbk-ink-mut)}
.fbk-tile-n span {margin-left: 4px;font-size: 16px;font-weight: 700;color: var(--fbk-ink-mut)}
.fbk-tiles.is-popped .fbk-tile--caught .fbk-tile-n b:not([data-n="0"]) {transform-origin: 0 100%;animation: fbk-count-pop 280ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms backwards}
@keyframes fbk-count-pop {0% {transform: scale(1)}
45% {transform: scale(1.1)}
100% {transform: scale(1)}}
@media (prefers-reduced-motion: reduce) {.fbk-tiles.is-popped .fbk-tile--caught .fbk-tile-n b:not([data-n="0"]) {animation: none}}
.fbk-sec {margin: 0 0 12px;display: flex;align-items: baseline;gap: 8px;font-size: 16px;line-height: 1.4;font-weight: 800;color: var(--fbk-ink);padding-bottom: 8px;border-bottom: 1px solid var(--fbk-rule)}
.fbk-sec small {font-size: 11px;font-weight: 700;color: var(--fbk-ink-mut)}
.fbk-fav {min-width: 0}
.fbk-fav-card {position: relative;padding: 8px 8px 12px;background: #fff;border: 1px solid var(--fbk-rule);border-radius: 14px;box-shadow: var(--fbk-shadow)}
.fbk-fav-photo {position: relative;aspect-ratio: 4 / 3;overflow: hidden;border-radius: 8px;background: var(--fbk-plate-un);isolation: isolate}
.fbk-fav-photo .bg {position: absolute;inset: -12px;width: calc(100% + 24px);height: calc(100% + 24px);object-fit: cover;filter: blur(14px) saturate(1.1);opacity: 0.85;z-index: -1}
.fbk-fav-photo .fg {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: contain}
.fbk-fav-photo::before,
.fbk-fav-photo::after {content: "";position: absolute;width: 18px;height: 18px;border: 2px solid rgba(255, 255, 255, 0.9);filter: drop-shadow(0 0 1px rgba(23, 50, 74, 0.6));z-index: 2;pointer-events: none}
.fbk-fav-photo::before {top: 6px;right: 6px;border-left: 0;border-bottom: 0}
.fbk-fav-photo::after {bottom: 20px;left: 6px;border-right: 0;border-top: 0}
.fbk-fav-label {position: relative;z-index: 2;margin: -16px 8px 0;padding: 12px;background: var(--fbk-plate);border: 2px solid var(--fbk-ink);border-radius: 12px;box-shadow: 0 5px 0 -3px var(--fbk-rule), var(--fbk-shadow);display: grid;gap: 8px;min-width: 0}
.fbk-fav-name {font-family: var(--fbk-serif);font-size: 20px;font-weight: 800;line-height: 1.2;color: var(--fbk-ink)}
.fbk-fav-facts {display: flex;flex-wrap: wrap;gap: 8px;min-width: 0}
.fbk-fav-fact {display: inline-flex;align-items: center;gap: 4px;height: 32px;padding: 0 12px 0 8px;border-radius: 999px;background: #fff;border: 1px solid var(--fbk-rule);font-size: 14px;line-height: 1.4;font-weight: 800;font-variant-numeric: tabular-nums;color: var(--fbk-ink);white-space: nowrap}
.fbk-fav-fact svg {flex: none;color: var(--fbk-primary)}
.fbk-fav-meta {display: flex;flex-wrap: wrap;gap: 4px 16px;font-size: 14px;line-height: 1.4;font-weight: 700;color: var(--fbk-ink-mut);min-width: 0}
.fbk-fav-meta span {display: inline-flex;align-items: center;gap: 4px;min-width: 0}
.fbk-fav-meta svg {flex: none}
.fbk-fav-acts {display: flex;gap: 8px;margin-top: 12px}
.fbk-fav-go {flex: 1 1 auto;min-width: 0;min-height: 48px;display: flex;align-items: center;justify-content: center;gap: 8px;padding: 8px 12px;border-radius: 12px;background: var(--fbk-primary);color: #fff;font-size: 14px;font-weight: 700;text-decoration: none}
.fbk-fav-go:hover {opacity: 0.92}
.fbk-fav-sub {flex: none;min-width: 56px;min-height: 48px;padding: 0 12px;border-radius: 12px;border: 1px solid var(--fbk-rule);background: #fff;color: var(--fbk-ink);font-size: 14px;font-weight: 700;cursor: pointer}
.fbk-fav-sub.is-off {color: var(--fbk-accent-ink)}
.fbk-fav-sub:hover {background: var(--fbk-plate)}
.fbk-fav-empty {padding: 10px 10px 12px;border: 1.5px dashed var(--fbk-ink-mut);border-radius: 14px;background: var(--fbk-plate)}
.fbk-fav-hatch {position: relative;aspect-ratio: 16 / 8;border-radius: 8px;display: grid;place-items: center;background: var(--fbk-plate-un) repeating-linear-gradient(45deg, rgba(77, 98, 120, 0.16) 0 1.5px, transparent 1.5px 11px)}
.fbk-fav-hatch .ic {width: 52px;height: 52px;border-radius: 50%;display: grid;place-items: center;background: #fff;border: 1.5px solid var(--fbk-rule);color: var(--fbk-g-icon);box-shadow: var(--fbk-shadow)}
.fbk-fav-et {margin: 12px 0 4px;font-size: 16px;font-weight: 800;line-height: 1.4;color: var(--fbk-ink)}
.fbk-fav-ed {font-size: 14px;color: var(--fbk-ink-mut);line-height: 1.6}
.fbk-fav-steps {list-style: none;display: grid;gap: 8px;margin-top: 10px;counter-reset: s}
.fbk-fav-steps li {counter-increment: s;display: flex;align-items: center;gap: 8px;min-height: 32px;font-size: 14px;line-height: 1.4;font-weight: 700;color: var(--fbk-ink);min-width: 0}
.fbk-fav-steps li::before {content: counter(s);flex: none;width: 22px;height: 22px;border-radius: 50%;display: grid;place-items: center;background: var(--fbk-primary);color: #fff;font-size: 12px;font-weight: 800}
.fbk-fake-btn {display: inline-flex;align-items: center;height: 24px;padding: 0 8px;border-radius: 999px;border: 1px solid var(--fbk-primary);color: var(--fbk-primary);background: #fff;font-size: 12px;font-weight: 800;white-space: nowrap;margin: 0 2px}
.fbk-fav-none {padding: 8px;border: 1px solid var(--fbk-rule);border-radius: 14px;background: #fff;box-shadow: var(--fbk-shadow)}
.fbk-fav-none .fbk-fav-hatch {aspect-ratio: 4 / 3}
.fbk-fav-none .fbk-fav-hatch img {width: 62%;height: auto;opacity: 0.2;filter: grayscale(1) brightness(0.55) contrast(30);mix-blend-mode: multiply}
.fbk-fav-none .fbk-fav-plate {margin: -16px 8px 0;position: relative;z-index: 2;padding: 10px 12px;text-align: center;background: var(--fbk-plate);border: 2px dashed var(--fbk-ink-mut);border-radius: 12px}
.fbk-fav-none .fbk-fav-plate b {display: block;font-size: 14px;color: var(--fbk-ink)}
.fbk-fav-none .fbk-fav-plate span {display: block;margin-top: 2px;font-size: 12px;color: var(--fbk-ink-mut)}
.fbk-fav {margin-top: 0}
.fbk-fav-name,
.fbk-fav-et {margin: 0}
.fbk-fav-et {margin-top: 12px}
.fbk-fav-ed {margin: 0}
.fbk-fav-steps {margin: 10px 0 0;padding: 0}
.fbk-fav-name:focus {outline: none}
.fbk-fav-photo.is-illust .fg {padding: 12%;box-sizing: border-box}
.fbk-fav-form {display: flex;margin: 0}
.fbk-fav-go,
.fbk-fav-sub,
.fbk-empty-cta {-webkit-tap-highlight-color: transparent;touch-action: manipulation}
.fbk-fav-go:focus-visible,
.fbk-fav-sub:focus-visible {outline: 3px solid var(--fbk-focus);outline-offset: 2px}
.fbk-empty {padding: 16px 8px 8px;text-align: center}
.fbk-empty-title {margin: 0 0 8px;font-size: 16px;font-weight: 800}
.fbk-empty-text {margin: 0 0 16px;font-size: 14px;line-height: 1.6;color: var(--fbk-ink-mut);text-align: left}
.fbk-empty-cta {display: inline-flex;align-items: center;gap: 6px;min-height: 48px;padding: 0 20px;border-radius: 999px;background: var(--fbk-primary);color: #fff;font-size: 14px;font-weight: 700;text-decoration: none}
.fbk-memo {position: relative;margin: 24px 4px 4px;padding: 16px 12px 12px;border-radius: 2px;transform: rotate(-0.6deg);color: var(--fbk-ink);background: #fff6cf repeating-linear-gradient(transparent 0 27px, rgba(31, 78, 121, 0.12) 27px 28px);box-shadow: var(--fbk-shadow)}
.fbk-memo::before {content: "";position: absolute;top: -9px;left: 50%;width: 76px;height: 20px;margin-left: -38px;background: rgba(226, 114, 91, 0.35);transform: rotate(2deg);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15)}
.fbk-memo h2 {margin: 0 0 4px;display: flex;align-items: center;gap: 8px;font-size: 16px;line-height: 1.4;font-weight: 800}
.fbk-memo > p {margin: 0 0 8px;font-size: 12px;line-height: 1.4;color: var(--fbk-ink-mut)}
.fbk-nt {display: flex;align-items: center;gap: 12px;width: 100%;margin: 0 0 8px;padding: 8px;border: 1px solid rgba(77, 98, 120, 0.3);border-radius: 6px;background: rgba(247, 250, 253, 0.8);color: inherit;text-decoration: none}
.fbk-nt:last-child {margin-bottom: 0}
.fbk-nt-pl {position: relative;flex: none;width: 84px;aspect-ratio: 16 / 10;border-radius: 4px;background: var(--fbk-plate);overflow: hidden}
.fbk-nt-pl .fbk-ph {width: 56%}
.fbk-nt-hot {position: absolute;left: 4px;top: 4px;padding: 0 6px;height: 20px;display: inline-flex;align-items: center;border-radius: 999px;background: var(--fbk-hot);color: #fff;font-size: 12px;line-height: 1;font-weight: 800}
.fbk-nt-b {min-width: 0;display: flex;flex-direction: column;gap: 4px}
.fbk-nt-nm {display: flex;align-items: center;gap: 8px;font-size: 14px;line-height: 1.4;font-weight: 800;min-width: 0}
.fbk-nt-h {font-size: 12px;line-height: 1.4;color: var(--fbk-ink);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.fbk-nt .fbk-stars {font-size: 12px;line-height: 1;letter-spacing: 0}
.fbk-nt-h b {margin-right: 5px;font-weight: 700;color: var(--fbk-ink-mut)}
@container fbk (min-width: 720px) {.fbk-tabs {height: 60px;padding-left: 14px}
.fbk-bar {padding-left: 4px}
.fbk-tab--cover {display: none}
.fbk[data-view] .fbk-slot--cat,
.fbk[data-view] .fbk-slot--cover {display: flex;flex-direction: column;min-height: 0}
.fbk-binder {padding: 18px 22px;border-radius: 0 0 20px 20px}
.fbk-binder::before {inset: 7px;border-radius: 15px}
.fbk-spread {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: minmax(0, 1fr);align-items: stretch}
.fbk-scroll {margin: 0 -16px -20px;padding: 2px 16px 20px}
.fbk-pg {padding: 16px 16px 20px;border-radius: 0}
.fbk-slot--cover .fbk-pg {border-radius: 8px 0 0 8px;box-shadow: inset -22px 0 18px -16px rgba(0, 0, 0, 0.22)}
.fbk-slot--cat .fbk-pg {border-radius: 0 8px 8px 0;box-shadow: inset 22px 0 18px -16px rgba(0, 0, 0, 0.22)}}
@media (prefers-reduced-motion: reduce) {.fbk-tab,
.fbk-sp {transition: none}}
.fbk-b-big {position: absolute;left: 4px;bottom: 4px;padding: 0 6px;height: 16px;display: inline-flex;align-items: center;border-radius: 3px;background: var(--fbk-g-tag);color: var(--fbk-g-tag-ink);font-size: 10px;font-weight: 800;letter-spacing: 0.05em}
.fbk-sp.is-big .fbk-sp-plate {box-shadow: 0 0 0 2px var(--fbk-g-tag)}
.fbk-tab b svg {margin-right: 2px;vertical-align: -1px;color: var(--fbk-hot)}
.fish-detail-modal {--fdm-paper: #fff;--fdm-plate: #f7fafd;--fdm-plate-un: #e6edf4;--fdm-rule: #d0dce8;--fdm-ink: #17324a;--fdm-ink-mut: #4d6278;--fdm-star: #b97800;--fdm-star-off: #d3dde8;--fdm-navy: #1f4e79;--fdm-focus: var(--fdm-navy);--fdm-g-tag: #d4a23c;--fdm-g-tag-ink: #2b1e05;--fdm-g-edge: var(--fdm-g-tag);--fdm-g-pale: #fff4d9;--fdm-g-band: #f0d796;--fdm-g-ink: #3d2c07;--fdm-shadow: 0 2px 8px rgba(31, 78, 121, 0.1);--fdm-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;position: fixed;inset: 0;z-index: var(--z-index-modal);display: flex;align-items: center;justify-content: center;padding: 16px;box-sizing: border-box}
.fish-detail-modal.hidden {display: none}
.fish-detail-overlay {position: absolute;inset: 0;background: rgba(23, 50, 74, 0.55);backdrop-filter: blur(4px)}
.fish-detail-content {position: relative;width: 100%;max-width: 440px;max-height: calc(100dvh - 32px);display: flex;flex-direction: column;background: var(--fdm-plate);color: var(--fdm-ink);border-radius: 20px;box-shadow: 0 2px 8px rgba(31, 78, 121, 0.1), 0 12px 32px rgba(23, 50, 74, 0.18);overflow: hidden;overflow-wrap: anywhere;font-size: 14px;line-height: 1.5;animation: fdm-in 0.42s ease-out both}
.fish-detail-content:has(.fdm-tabs) {height: min(640px, calc(100dvh - 32px))}
@keyframes fdm-in {from {opacity: 0;transform: translateY(14px) rotateX(-10deg)}
to {opacity: 1;transform: none}}
.fish-detail-close {position: absolute;top: 10px;right: 10px;z-index: 5;width: 44px;height: 44px;display: grid;place-items: center;padding: 0;border: 0;border-radius: 50%;background: rgba(247, 250, 253, 0.92);color: var(--fdm-ink);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);cursor: pointer}
.fish-detail-close svg {width: 18px;height: 18px}
.fish-detail-body {flex: 1 1 auto;min-height: 0;display: flex;flex-direction: column;overflow-y: auto}
.fish-detail-body :where(h2, h3, p, dl, dd) {margin: 0;padding: 0}
.fish-detail-body *,
.fish-detail-body *::before,
.fish-detail-body *::after {box-sizing: border-box}
.fish-detail-body a:focus-visible,
.fish-detail-body button:focus-visible,
.fish-detail-close:focus-visible {outline: 3px solid var(--fdm-focus);outline-offset: 2px}
.fdm-ic {width: 16px;height: 16px;flex: none}
.fdm-num {font-weight: 800;font-variant-numeric: tabular-nums;line-height: 1}
.fdm-num small {margin-left: 2px;font-weight: 700;color: var(--fdm-ink-mut)}
.fdm-stars {display: inline-flex;gap: 2px;margin-top: 6px;font-size: 16px;line-height: 1;color: var(--fdm-star-off)}
.fdm-stars .filled {color: var(--fdm-star)}
.fdm-head {flex: none}
.fdm-top {position: relative;padding: 12px 12px 0}
.fdm-mount {position: relative;padding: 8px;background: #fff;border: 1px solid var(--fdm-rule);border-radius: 14px;box-shadow: var(--fdm-shadow)}
.fdm-mount::before,
.fdm-mount::after {content: "";position: absolute;width: 18px;height: 18px;border: 2px solid var(--fdm-ink-mut);opacity: 0.5}
.fdm-mount::before {top: 6px;left: 6px;border-right: 0;border-bottom: 0}
.fdm-mount::after {bottom: 6px;right: 6px;border-left: 0;border-top: 0}
.fdm-mount img {display: block;width: 100%;aspect-ratio: 16 / 7;object-fit: contain}
.fdm-mount img.is-photo {object-fit: cover;border-radius: 6px}
.fdm-mount.is-broken {height: 96px;background: var(--fdm-plate-un) repeating-linear-gradient(45deg, rgba(77, 98, 120, 0.16) 0 1.5px, transparent 1.5px 11px)}
.fdm-mount.is-broken img {display: none}
.fdm-top .fdm-gtag {position: absolute;top: 14px;left: 14px;z-index: 3}
.fdm-label {position: relative;z-index: 2;display: grid;grid-template-columns: auto minmax(0, 1fr) auto;gap: 12px;align-items: center;margin: -18px 12px 0;padding: 8px 12px;background: var(--fdm-plate);border: 2px solid var(--fdm-ink);border-radius: 14px;box-shadow: 0 6px 0 -3px var(--fdm-rule), var(--fdm-shadow)}
.fdm-head.is-plain .fdm-label {margin-top: 16px;margin-right: 64px}
.fdm-no {padding: 4px 8px;border: 1.5px dashed var(--fdm-ink-mut);border-radius: 8px;text-align: center;font-family: var(--fdm-serif);line-height: 1.05}
.fdm-no span {display: block;font-family: system-ui, sans-serif;font-size: 10px;font-weight: 700;letter-spacing: 0.2em;color: var(--fdm-ink-mut)}
.fdm-no b {font-size: 22px;font-weight: 800}
.fdm-name {font-family: var(--fdm-serif);font-size: 23px;font-weight: 800;line-height: 1.15}
.fdm-cat {display: inline-block;margin-top: 2px;padding: 0 10px;border-radius: 999px;background: var(--fdm-paper);border: 1px solid var(--fdm-rule);font-size: 12px;font-weight: 700;color: var(--fdm-ink-mut)}
.fdm-cnt {text-align: right}
.fdm-cnt .fdm-num {font-size: 28px}
.fdm-cnt .fdm-num small {font-size: 14px}
.fdm-cnt p {font-size: 11px;font-weight: 700;color: var(--fdm-ink-mut)}
.fdm-gtag {flex: none;display: inline-flex;align-items: center;padding: 2px 10px;border-radius: 999px;background: var(--fdm-g-tag);color: var(--fdm-g-tag-ink);font-size: 13px;font-weight: 800;letter-spacing: 0.08em;white-space: nowrap}
.fdm-gtag.is-sm {padding: 1px 8px;font-size: 11px}
.fdm-foil {position: relative;overflow: hidden;background: linear-gradient(135deg, var(--fdm-g-pale), var(--fdm-g-band) 45%, var(--fdm-g-edge) 100%);border: 1.5px solid var(--fdm-g-edge);color: var(--fdm-g-ink)}
.fdm-foil::after {content: "";position: absolute;inset: 0;pointer-events: none;background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.8) 50%, transparent 65%);transform: translateX(-120%);animation: fdm-shine 1.2s ease-out 0.35s 1 forwards}
@keyframes fdm-shine {to {transform: translateX(120%)}}
.fdm-big {display: flex;align-items: center;gap: 12px;padding: 8px 12px;border-radius: 14px}
.fdm-big p {flex: 1;min-width: 0;font-size: 15px;font-weight: 800}
.fdm-tabwrap {flex: 1 1 auto;min-height: 0;display: flex;flex-direction: column;padding: 10px 12px 0}
.fdm-tabs {flex: none;display: grid;grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column;gap: 2px;height: 44px;padding: 3px;border-radius: 8px;background: var(--fdm-paper);border: 1px dashed var(--fdm-ink-mut)}
.fdm-tabs button {min-width: 0;padding: 0;border: 0;border-radius: 6px;background: transparent;color: var(--fdm-ink-mut);font-family: inherit;font-size: 13px;font-weight: 700;line-height: 1;cursor: pointer;transition: background-color 0.2s ease-out, color 0.2s ease-out}
.fdm-tabs button[aria-selected="true"] {background: var(--fdm-navy);color: var(--fdm-paper)}
.fdm-tbody {flex: 1 1 auto;min-height: 0;overflow: hidden auto;overscroll-behavior: contain}
.fdm-tp {display: grid;gap: 8px;align-content: start;min-width: 0;padding: 10px 0 4px;animation: fdm-tpin 0.2s ease-out}
.fdm-tp[hidden] {display: none !important}
@keyframes fdm-tpin {from {opacity: 0;transform: translateX(8px)}
to {opacity: 1;transform: none}}
.fdm-foot {flex: none;padding: 8px 12px 12px}
.fdm-link {display: flex;align-items: center;justify-content: center;gap: 8px;min-height: 44px;padding: 6px 14px;border-radius: 12px;background: var(--fdm-navy);color: #fff;font-size: 14px;font-weight: 700;text-decoration: none}
.fdm-link:hover {color: #fff;opacity: 0.92}
.fdm-desc {font-size: 13.5px}
.fdm-pair {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 8px}
.fdm-card {min-width: 0;padding: 8px 10px;background: var(--fdm-paper);border: 1px solid var(--fdm-rule);border-radius: 16px}
.fdm-card h3 {display: flex;align-items: center;gap: 6px;font-size: 11.5px;font-weight: 700;color: var(--fdm-ink-mut)}
.fdm-card .fdm-num {margin-top: 2px;font-size: 22px}
.fdm-card .fdm-num small {font-size: 13px}
.fdm-card b {display: block;margin-top: 2px;font-size: 12.5px}
.fdm-sub {margin-top: 2px;font-size: 12px;font-weight: 700;color: var(--fdm-ink-mut)}
.fdm-meter {position: relative;flex: none;height: 32px;margin: 4px 8px 0}
.fdm-card--measure {display: flex;flex-direction: column}
.fdm-card--measure .fdm-meter {box-sizing: content-box;margin-top: auto;border-top: 4px solid transparent}
.fdm-meter .base,
.fdm-meter .band {position: absolute;top: 14px;height: 6px}
.fdm-meter .base {left: 0;right: 0;background: var(--fdm-plate) repeating-linear-gradient(90deg, var(--fdm-ink) 0 1px, transparent 1px calc(100% / 12));border: 1.5px solid var(--fdm-ink);border-radius: 2px}
.fdm-meter .band {background: var(--fdm-g-band);opacity: 0.8;border-top: 1.5px solid var(--fdm-ink);border-bottom: 1.5px solid var(--fdm-ink)}
.fdm-meter .lab {position: absolute;top: 22px;transform: translateX(-50%);font-size: 10px;font-weight: 700;line-height: 1;color: var(--fdm-ink-mut);white-space: nowrap}
.fdm-meter .pin {position: absolute;top: 0;left: var(--x);display: flex;flex-direction: column;align-items: center;transform: translateX(-50%);animation: fdm-pin-slide 0.6s ease-out 0.45s both}
.fdm-meter .pin b {margin: 0;padding: 0 6px;border-radius: 6px;background: var(--fdm-g-tag);color: var(--fdm-g-tag-ink);font-size: 10px;line-height: 12px;white-space: nowrap}
.fdm-meter .pin.is-in b {background: var(--fdm-paper);box-shadow: inset 0 0 0 1.5px var(--fdm-navy);color: var(--fdm-ink)}
.fdm-meter .pin::after {content: "";width: 2px;height: 11px;background: var(--fdm-ink)}
@keyframes fdm-pin-slide {from {left: 0%}
to {left: var(--x)}}
.fdm-warn {display: flex;align-items: flex-start;gap: 10px;padding: 12px 14px;border-radius: 14px;background: #fdecea;border: 1px solid #e8b4ae;color: #7a1f17}
.fdm-warn svg {flex: none;width: 20px;height: 20px;margin-top: 2px}
.fdm-warn b {display: block;font-size: 14px}
.fdm-warn p {font-size: 12.5px}
.fdm-disc {display: grid;grid-template-columns: minmax(0, 1fr);gap: 10px;align-items: center;padding: 10px 12px;background: var(--fdm-paper);border: 1px solid var(--fdm-rule);border-radius: 16px}
.fdm-disc.has-stamp {grid-template-columns: 112px minmax(0, 1fr)}
.fdm-disc h3,
.fdm-meth h3 {font-family: var(--fdm-serif);font-size: 13px;letter-spacing: 0.1em}
.fdm-disc h3 {grid-column: 1 / -1}
.fdm-disc dl {display: grid;gap: 4px;min-width: 0}
.fdm-disc dt {font-size: 11.5px;font-weight: 700;color: var(--fdm-ink-mut)}
.fdm-disc dd {font-size: 16px;line-height: 1.35;font-weight: 800}
.fdm-disc dd small {display: block;font-size: 11.5px;font-weight: 700;color: var(--fdm-ink-mut)}
.fdm-disc.is-stamp-only .fdm-stamp-wrap {justify-self: center}
.fdm-stamp-note {margin-top: 4px;font-size: 11px;font-weight: 700;text-align: center;color: var(--fdm-ink-mut)}
.fdm-stamp {display: block;width: 112px;height: 112px;color: var(--fdm-navy);mix-blend-mode: multiply;transform: rotate(-8deg);animation: fdm-stamp-in 0.4s ease-out 0.25s both}
@keyframes fdm-stamp-in {from {opacity: 0;transform: rotate(-8deg) scale(1.7)}
to {opacity: 0.9;transform: rotate(-8deg) scale(1)}}
.fdm-meth h3 {margin-bottom: 8px}
.fdm-chips {display: flex;flex-wrap: wrap;gap: 8px}
.fdm-chip {display: inline-flex;align-items: center;gap: 6px;min-height: 32px;padding: 6px 12px;border-radius: 999px;border: 1px solid var(--fdm-rule);background: var(--fdm-paper);font-size: 13px;font-weight: 700}
.fdm-chip em {font-style: normal;font-weight: 500;color: var(--fdm-ink-mut)}
.fdm-hint {margin: 0 2px 8px;font-size: 12px;line-height: 1.5;color: var(--fdm-ink-mut)}
.fdm-ledger {display: flex;flex-direction: column;gap: 8px}
.fdm-hist {position: relative;display: grid;grid-template-columns: minmax(0, 1fr) auto;gap: 8px;align-items: center;padding: 8px 10px;background: #fff;border: 1px solid var(--fdm-rule);border-radius: 12px;min-height: 72px}
.fdm-hist.is-cover {background: var(--fdm-g-pale);border-color: var(--fdm-g-tag);padding-left: 14px}
.fdm-hist.is-cover::before {content: "";position: absolute;left: 0;top: 0;bottom: 0;width: 4px;background: var(--fdm-g-tag);border-radius: 12px 0 0 12px}
.fdm-hist.is-flash {animation: fdm-flash 600ms ease-out}
@keyframes fdm-flash {0% {box-shadow: 0 0 0 3px var(--fdm-g-tag), 0 0 14px 2px rgba(212, 162, 60, 0.7)}
100% {box-shadow: 0 0 0 0 rgba(212, 162, 60, 0)}}
@media (prefers-reduced-motion: reduce) {.fdm-hist.is-flash {animation: none}}
.fdm-hist-main {display: grid;grid-template-columns: 56px minmax(0, 1fr);gap: 10px;align-items: center;min-width: 0;min-height: 56px;color: inherit;text-decoration: none;border-radius: 8px}
.fdm-hist-main:hover .fdm-hist-when {text-decoration: underline}
.fdm-thumb {display: block;width: 56px;height: 56px;border-radius: 8px;border: 2px solid #fff;box-shadow: var(--fdm-shadow);object-fit: cover;background: var(--fdm-plate-un);box-sizing: border-box;max-width: 100%}
.is-cover .fdm-thumb {border-color: var(--fdm-g-tag)}
.fdm-hist-txt {display: flex;flex-direction: column;gap: 6px;min-width: 0}
.fdm-hist-when {font-size: 14px;font-weight: 800;color: var(--fdm-ink);white-space: nowrap;font-variant-numeric: tabular-nums}
.fdm-hist .fdm-chips {display: flex;flex-wrap: wrap;gap: 4px 6px;min-width: 0}
.fdm-hist .fdm-chip {display: inline-flex;align-items: center;gap: 4px;height: 22px;padding: 0 8px;border-radius: 999px;background: #fff;border: 1px solid var(--fdm-rule);font-size: 12px;font-weight: 700;color: var(--fdm-ink);white-space: nowrap;font-variant-numeric: tabular-nums}
.fdm-hist .fdm-chip svg {width: 13px;height: 13px;flex: none;color: var(--fdm-ink-mut)}
.fdm-act {display: flex;flex-direction: column;align-items: center;gap: 2px;min-width: 48px}
.fdm-act small {font-size: 10px;font-weight: 700;line-height: 1.2;color: var(--fdm-ink-mut);white-space: nowrap}
.is-cover .fdm-act small {color: var(--fdm-g-ink)}
.fdm-pin,
.fdm-on {width: 44px;height: 44px;min-width: 44px;padding: 0;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center}
.fdm-pin {border: 1.5px solid var(--fdm-navy);background: #fff;color: var(--fdm-navy);cursor: pointer}
.fdm-pin:hover {background: var(--fdm-plate)}
.fdm-on {background: var(--fdm-g-tag);color: var(--fdm-g-tag-ink);border: 1.5px solid var(--fdm-g-tag)}
.fdm-hint {margin: 0 2px 8px}
.fdm-hist-main.is-plain {grid-template-columns: minmax(0, 1fr)}
.fdm-hist-when small {display: block;font-size: 11.5px;font-weight: 700;color: var(--fdm-ink-mut)}
.fdm-thumb.is-none {background: var(--fdm-plate-un) repeating-linear-gradient(45deg, rgba(77, 98, 120, 0.16) 0 1.5px, transparent 1.5px 9px)}
.fdm-pin:disabled {cursor: wait;opacity: 0.6}
.fdm-pin:focus-visible,
.fdm-on:focus-visible,
.fdm-hist-main:focus-visible {outline: 3px solid var(--fdm-focus);outline-offset: 2px}
.fdm-on:focus {outline: none}
.fdm-tp:focus-visible {outline: 3px solid var(--fdm-focus);outline-offset: -3px}
.fdm-tabs button[aria-disabled="true"] {opacity: 0.45;cursor: default}
.fdm-dishes {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 4px}
.fdm-dish {position: relative;display: block;min-width: 0;aspect-ratio: 1;overflow: hidden;border-radius: 6px;background: var(--fdm-plate-un);color: #fff;text-decoration: none}
.fdm-dish-img {display: block;width: 100%;height: 100%}
.fdm-dish-img img {display: block;width: 100%;height: 100%;object-fit: cover}
.fdm-dish-title {position: absolute;right: 0;bottom: 0;left: 0;display: -webkit-box;overflow: hidden;padding: 16px 5px 4px;background: linear-gradient(to top, rgb(0 0 0 / 55%), rgb(0 0 0 / 0%));font-size: 11px;font-weight: 700;line-height: 1.3;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
.fdm-dish:hover .fdm-dish-title {text-decoration: underline}
.fdm-empty {margin: 8px 2px;font-size: 13px;line-height: 1.6;color: var(--fdm-ink-mut)}
.fdm-dish-new {display: flex;align-items: center;justify-content: center;min-height: 44px;padding: 10px 16px;border-radius: 999px;background: var(--fdm-navy);color: var(--fdm-paper);font-size: 14px;font-weight: 700;text-decoration: none}
.fdm-un {display: grid;gap: 12px;padding: 16px}
.fdm-un .fdm-mount {padding: 8px}
.fdm-un .fdm-label {margin: 0}
.fdm-unst {position: relative;height: 220px;overflow: hidden;border-radius: 8px;background-color: var(--fdm-plate-un);background-image:
repeating-linear-gradient(45deg, rgba(77, 98, 120, 0.16) 0 1.5px, transparent 1.5px 11px),
repeating-linear-gradient(135deg, rgba(77, 98, 120, 0.16) 0 1.5px, transparent 1.5px 11px)}
.fdm-unst img {position: absolute;top: 50%;left: 50%;width: min(88%, 440px);height: 78%;object-fit: contain;filter: brightness(0.52) contrast(60) grayscale(1);mix-blend-mode: multiply;opacity: 0.32;transform: translate(-50%, -50%);animation: fdm-sway 4s ease-in-out infinite}
@property --fdm-reveal {syntax: "<percentage>";inherits: true;initial-value: 102%}
.fdm-unst {animation: fdm-reveal 10s ease-in-out 1s infinite}
.fdm-unst img {-webkit-mask-image: linear-gradient(105deg, #000 var(--fdm-reveal, 102%), transparent calc(var(--fdm-reveal, 102%) + 8%), transparent calc(var(--fdm-reveal, 102%) + 32%), #000 calc(var(--fdm-reveal, 102%) + 40%));mask-image: linear-gradient(105deg, #000 var(--fdm-reveal, 102%), transparent calc(var(--fdm-reveal, 102%) + 8%), transparent calc(var(--fdm-reveal, 102%) + 32%), #000 calc(var(--fdm-reveal, 102%) + 40%))}
.fdm-unst .fdm-uncolor {z-index: 1;filter: none;opacity: 1;pointer-events: none;-webkit-mask-image: linear-gradient(105deg, transparent var(--fdm-reveal, 102%), #000 calc(var(--fdm-reveal, 102%) + 8%), #000 calc(var(--fdm-reveal, 102%) + 32%), transparent calc(var(--fdm-reveal, 102%) + 40%));mask-image: linear-gradient(105deg, transparent var(--fdm-reveal, 102%), #000 calc(var(--fdm-reveal, 102%) + 8%), #000 calc(var(--fdm-reveal, 102%) + 32%), transparent calc(var(--fdm-reveal, 102%) + 40%))}
@keyframes fdm-reveal {0% {--fdm-reveal: -42%}
27%,
100% {--fdm-reveal: 102%}}
@keyframes fdm-sway {0%,
100% {transform: translate(-50%, calc(-50% - 3px))}
50% {transform: translate(-50%, calc(-50% + 3px))}}
.fdm-tok {position: absolute;top: 50%;left: 50%;z-index: 2;width: 56px;height: 56px;margin: -28px 0 0 -28px;border-radius: 50%;background: var(--fdm-navy);color: var(--fdm-paper);font: 800 28px/56px var(--fdm-serif);text-align: center;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 14px rgba(31, 78, 121, 0.3);outline: 2px dashed rgba(255, 255, 255, 0.65);outline-offset: -5px;transform: rotate(-6deg)}
.fdm-unhint {display: grid;gap: 2px;text-align: center}
.fdm-unhint b {font-size: 15px;font-weight: 800}
.fdm-unhint span {font-size: 12px;color: var(--fdm-ink-mut)}
@media (max-width: 480px) {.fish-detail-modal {padding: 12px}
.fish-detail-content {max-height: calc(100dvh - 24px)}
.fish-detail-content:has(.fdm-tabs) {height: min(640px, calc(100dvh - 24px))}
.fdm-unst {height: 180px}}
@media (max-height: 700px) {.fdm-top .fdm-mount img {aspect-ratio: 16 / 6}}
@media (max-height: 560px) {.fish-detail-content:has(.fdm-tabs) {height: auto}
.fdm-tabwrap,
.fdm-tbody {flex: none;overflow: visible}}
@media (prefers-reduced-motion: reduce) {.fish-detail-content,
.fdm-stamp,
.fdm-foil::after,
.fdm-meter .pin,
.fdm-tp,
.fdm-unst,
.fdm-unst img {animation: none !important}
.fdm-unst img {-webkit-mask-image: none;mask-image: none}
.fdm-unst .fdm-uncolor {display: none}
.fdm-stamp {opacity: 0.9}
.fdm-foil::after {display: none}
.fdm-tabs button {transition: none}}