@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/SpaceGrotesk-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --c-bg: #0a0a0c; --c-surface: #161616; --c-surface-2: #242424; --c-text: #f6f1e4; --c-muted: #c8c0b0;
  --c-border: rgba(255, 255, 255, 0.12); --c-chip-line: rgba(255, 255, 255, 0.40);
  --c-accent: #ffe58a; --c-hot: #ffee00; --c-on-accent: #1a1408;
  --c-fam-create: #c9b6ff; --c-fam-it: #8fd3ff; --c-fam-work: #7fe3d4;
  --c-fam-food: #ffc48a; --c-fam-outdoor: #a8e890; --c-fam-hands: #ffaed6;
  --c-on-family: #0a0a0c;
  --c-notice-bg: #2a2618; --c-notice-border: rgba(255, 255, 255, 0.40);
  --c-fixture: #7a1fa2; --c-error: #ffb4b4; --c-error-bg: #2a1416; --c-focus: #ffe58a;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px;
  --fs-s: 0.875rem; --fs-m: 1rem; --fs-l: 1.25rem; --fs-xl: 2rem; --lh: 1.65;
  --radius: 12px; --max: 1080px;
  --font: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
  --font-display: "Space Grotesk", var(--font);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--sticky-h, 72px); }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: var(--fs-m)/var(--lh) var(--font); overflow-wrap: anywhere; word-break: normal; line-break: strict; }
#app, main, .site-header { max-width: var(--max); margin: 0 auto; padding-left: var(--sp-3); padding-right: var(--sp-3); }
main { padding-bottom: var(--sp-6); }
h1 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; margin: var(--sp-1) 0 var(--sp-2); }
h2 { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 700; line-height: 1.3; margin: var(--sp-3) 0 var(--sp-2); }
h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin: 0; }
h4 { font-size: var(--fs-s); margin: 0 0 var(--sp-1); color: var(--c-muted); }
a { color: var(--c-text); text-underline-offset: 3px; }
:focus-visible, a:focus, button:focus, summary:focus, select:focus, input:focus { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.skip { position: absolute; left: var(--sp-2); top: -100px; background: var(--c-surface); padding: var(--sp-2) var(--sp-3); z-index: 10; }
.skip:focus { top: var(--sp-2); }
.site-header { position: sticky; top: 0; z-index: 5; background: var(--c-bg); padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-border); }
.header-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.page-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.04em; text-decoration: none; color: var(--c-text); }
.lang { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lang a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; text-decoration: none; background: transparent; color: var(--c-muted); }
.lang a[aria-current="true"] { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-chip-line); }
.fixture-banner { background: var(--c-fixture); color: #fff; padding: var(--sp-2) var(--sp-3); text-align: center; font-weight: 700; font-size: var(--fs-s); }
.kicker { margin: var(--sp-4) 0 0; color: var(--c-muted); font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; }
.lede { margin: 0 0 var(--sp-4); max-width: 38rem; color: var(--c-muted); }
.filters-title { margin: var(--sp-4) 0 var(--sp-2); font-size: 0.8rem; font-weight: 700; color: var(--c-muted); }
.filters { min-width: 0; margin-top: 8px; }
.primary-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 20px; }
.filters .hint { margin: 0; font-size: 0.75rem; line-height: 1.35; }
.filters .chip-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; }
.filters .chips { flex: 1 1 auto; }
.filters .more-filters { margin-top: 4px; }
.zero-inline:empty { display: none; }
.zero-inline .zero-inline-line { margin: 0 0 8px; }
.zero-inline .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-menu > summary { width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 4px 8px; }
.filter-status { font-weight: 500; color: var(--c-muted); }
@media (min-width: 721px) {
  .filter-menu > summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .zero-inline { display: none; }
}
.filters .actions { margin-top: 8px; }
.chip-field { position: relative; border: 0; margin: 0; padding: 0; min-width: 0; }
.chip-field legend { padding: 0; font-weight: 700; font-size: var(--fs-s); }
.hint { margin: var(--sp-1) 0 var(--sp-2); color: var(--c-muted); font-size: var(--fs-s); }
.chips, .ro-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
.chip { max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--c-chip-line); border-radius: 999px; background: transparent; color: var(--c-text); font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer; }
.chip:hover { background: var(--c-surface-2); }
.chip.is-on { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.chip .check { width: 14px; height: 14px; flex: 0 0 auto; }
.ro-chip { max-width: 100%; display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; background: var(--c-surface-2); color: var(--c-muted); font-family: var(--font-display); font-size: 12px; font-weight: 500; line-height: 1.4; cursor: default; }
.choice-backing { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.more-filters { margin-top: var(--sp-3); border-top: 1px solid var(--c-border); padding-top: var(--sp-2); }
.more-filters .grid { background: var(--c-surface); border-radius: 12px; padding: var(--sp-3); }
.panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); margin: var(--sp-3) 0; min-width: 0; }
.panel h2 { margin-top: 0; }
.panel.empty { border-style: dashed; }
.state-error { border-color: var(--c-error); background: var(--c-error-bg); }
.state-error h1 { color: var(--c-error); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.field .hint { margin: 0; }
label { font-weight: 700; font-size: var(--fs-s); }
select, input[type="text"] { min-height: 44px; font: inherit; padding: 0 var(--sp-2); border: 1px solid var(--c-chip-line); border-radius: 8px; background: var(--c-surface-2); color: var(--c-text); width: 100%; max-width: 100%; }
input[aria-invalid="true"] { border-color: var(--c-error); }
.field-error { color: var(--c-error); font-size: var(--fs-s); margin: 0; }
details { margin-top: var(--sp-3); }
details:not([open]) > :not(summary) { display: none; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.more-filters > summary { list-style: none; width: fit-content; max-width: 100%; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::before { content: ""; width: 0.45em; height: 0.45em; margin-right: 8px; border-right: 2px solid var(--c-text); border-bottom: 2px solid var(--c-text); transform: rotate(-45deg); }
.more-filters[open] > summary::before { transform: rotate(45deg); margin-top: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.btn { max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; border: 1px solid var(--c-chip-line); border-radius: 999px; background: transparent; color: var(--c-text); text-decoration: none; cursor: pointer; text-align: center; }
.btn.primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-3); min-width: 0; }
.results-head h2 { margin: 0; }
.cards { display: grid; gap: 14px; min-width: 0; }
.card { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 12px; }
.card-visual {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; padding: 14px;
  background:
    radial-gradient(90% 80% at 8% 0%, rgba(246, 241, 228, 0.72), transparent 58%),
    linear-gradient(165deg, #3a3220 0%, #12110f 68%);
}
.card-visual-deco { position: absolute; inset: 0; pointer-events: none; }
.card-visual-deco::before {
  content: ""; position: absolute; right: 7%; top: 12%; width: 42%; height: 62%;
  border-radius: 16px; background: rgba(246, 241, 228, 0.14); transform: rotate(8deg);
}
.card-visual[data-art="1"] {
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(246, 241, 228, 0.42), transparent 52%),
    linear-gradient(160deg, #243038, #101214 70%);
}
.card-visual[data-art="2"] {
  background:
    radial-gradient(80% 70% at 0% 100%, rgba(246, 241, 228, 0.38), transparent 50%),
    linear-gradient(200deg, #2c241c, #14110f 72%);
}
.card-visual[data-art="2"] .card-visual-deco::before { border-radius: 50%; width: 54%; height: 78%; right: 6%; top: 8%; }
.card-visual[data-art="3"] {
  background:
    linear-gradient(135deg, rgba(246, 241, 228, 0.55) 0 18%, transparent 19%),
    linear-gradient(160deg, #1e2430, #121212 74%);
}
.card-visual[data-art="4"] {
  background:
    radial-gradient(40% 55% at 78% 28%, rgba(246, 241, 228, 0.5), transparent 60%),
    linear-gradient(180deg, #322818, #12100e 76%);
}
.card-visual[data-art="5"] {
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(246, 241, 228, 0.28) 43% 58%, transparent 59%),
    linear-gradient(165deg, #202820, #101210 72%);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; min-width: 0; min-height: 0; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.card-visual-title, .detail-visual h3 {
  position: relative; z-index: 1; margin: 0; max-width: 16em;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25;
  color: #f6f1e4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.detail-visual { max-width: 720px; }
.card .actions { margin-top: auto; }
.card .btn { align-self: flex-start; }
.orig { margin: -4px 0 0; color: var(--c-muted); font-size: var(--fs-s); }
.media-name { margin: 0; }
.representative { margin: 0; }
.card-kicker { display: block; margin-bottom: 2px; color: var(--c-muted); font-size: 0.75rem; font-weight: 700; }
.card-audience, .card-reason, .card-entry-title { margin: 0; }
.card-reason { font-size: 1.0625rem; line-height: 1.65; }
.card-entry { margin: 0; padding-top: 12px; border-top: 1px solid var(--c-border); }
.card-entry .card-kicker { margin-bottom: var(--sp-1); }
dl { margin: var(--sp-2) 0; }
dt { font-weight: 700; font-size: var(--fs-s); color: var(--c-muted); margin-top: var(--sp-2); }
dd { margin: 0; }
.notice { background: var(--c-notice-bg); border-left: 4px solid var(--c-notice-border); padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; font-size: var(--fs-s); }
.entry { border-top: 1px solid var(--c-border); padding-top: var(--sp-4); margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.entry-lead, .entry-meta { min-width: 0; max-width: 40rem; }
.entry-meta { background: var(--c-surface); border-radius: 12px; padding: var(--sp-3); }
.reason-meta { margin: 0; color: var(--c-muted); font-size: 0.75rem; }
.entry-cta { margin: 0; }
.back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 700; }
.muted, .new-tab-note { color: var(--c-muted); font-size: var(--fs-s); }
.active, .count { margin: 0; min-width: 0; }
.count { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-l); }
.active { flex-basis: 100%; color: var(--c-muted); font-size: var(--fs-s); }
.empty-title { font-weight: 750; font-size: var(--fs-l); margin-top: 0; }
ul.plain { list-style: none; padding: 0; margin: var(--sp-2) 0; }
ul.plain li { margin: var(--sp-2) 0; }
.source-block { margin-top: var(--sp-4); }
.sources li { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: var(--sp-2) var(--sp-3); }
.loading { padding: var(--sp-4); }
.badge { display: inline-flex; align-self: flex-start; background: transparent; color: var(--c-text); border: 1px solid var(--c-chip-line); border-radius: 4px; padding: 2px 8px; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; }
@media (max-width: 420px) {
  .site-header { padding-top: 8px; padding-bottom: 8px; }
  .lang a { min-height: 36px; padding: 0 10px; }
  .fixture-banner { padding: 4px 8px; font-size: 0.75rem; line-height: 1.35; }
  h1 { font-size: 1.15rem; margin-bottom: 2px; }
  h3 { font-size: 1.05rem; }
  .lede, .hint { margin-top: 0; margin-bottom: 2px; font-size: 0.75rem; line-height: 1.35; }
  .kicker { margin-top: 8px; }
  .primary-filters { gap: 6px; }
  .filters-title { margin: 8px 0 4px; }
  .chip { min-height: 36px; padding: 4px 10px; font-size: 0.8125rem; }
  .filters .hint:not(#learn-hint) { display: none; }
  .filters > .actions { display: none; }
  .primary-filters { flex-direction: column; }
  .card-visual { aspect-ratio: 16 / 9; }
  .more-filters { margin-top: 8px; padding-top: 4px; }
  summary { min-height: 36px; }
  .results-head { margin-top: 8px; }
  .results-head h2, .count { font-size: 1rem; }
  .active { flex-basis: auto; }
  .card { padding: 12px; gap: 6px; }
  .card-reason { font-size: 0.95rem; line-height: 1.4; }
  .notice { margin: 4px 0; padding: 4px 8px; }
}
.choice-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.choice-row .btn { flex: 1 1 160px; }
a.chip { text-decoration: none; }
a.genre-card { text-decoration: none; color: inherit; }
a.genre-card:hover { border-color: var(--c-chip-line); }
.family-band {
  display: flex; align-items: center; min-height: 28px; margin: -12px -12px 4px; padding: 6px 12px;
  background: var(--c-fam, var(--c-muted)); color: var(--c-on-family);
  font-size: 0.75rem; font-weight: 700; line-height: 1.4;
}
.genre-card[data-family="create"], .genre-tag[data-family="create"] { --c-fam: var(--c-fam-create); }
.genre-card[data-family="it"], .genre-tag[data-family="it"] { --c-fam: var(--c-fam-it); }
.genre-card[data-family="work"], .genre-tag[data-family="work"] { --c-fam: var(--c-fam-work); }
.genre-card[data-family="food"], .genre-tag[data-family="food"] { --c-fam: var(--c-fam-food); }
.genre-card[data-family="outdoor"], .genre-tag[data-family="outdoor"] { --c-fam: var(--c-fam-outdoor); }
.genre-card[data-family="hands"], .genre-tag[data-family="hands"] { --c-fam: var(--c-fam-hands); }
.genre-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; list-style: none; }
.genre-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text); font-size: 0.75rem; font-weight: 700; line-height: 1.4; }
.genre-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-fam, var(--c-muted)); flex: 0 0 auto; }
.level-mark { margin: 0; align-self: flex-start; color: var(--c-text); font-size: 0.75rem; font-weight: 700; }
.level-dots { letter-spacing: 0.08em; }
.card-person { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.card-person h3 { min-width: 0; }
.card-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.card-links .btn { align-items: flex-start; }
.card-links .btn-label { white-space: nowrap; }
.card-links .new-tab-note { white-space: normal; }
.avatar-wrap { position: relative; width: 40px; height: 40px; flex: 0 0 auto; }
.avatar, .avatar-fallback { width: 40px; height: 40px; border-radius: 50%; display: block; }
.avatar { object-fit: cover; }
.avatar-fallback { background: var(--c-surface-2); border: 1px solid var(--c-border); }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--c-surface-2); }
.thumb .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .card-visual { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; }
.thumb img[hidden], .avatar[hidden], .card-visual[hidden], .avatar-fallback[hidden] { display: none; }
@media (max-width: 420px) {
  .choice-row { flex-direction: column; }
  .avatar-wrap, .avatar, .avatar-fallback { width: 36px; height: 36px; }
}
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.btn .new-tab-note { color: inherit; margin-left: var(--sp-1); }
.btn.ext { flex-direction: column; gap: 2px; align-items: flex-start; }