/* 職場のいきもの図鑑 */
:root {
  --accent: #3d7a4f; --accent-ink: #ffffff; --accent-soft: #e1efe3;
  --paper: #f6efe0; --paper-line: #d9c9a6; --ink: #3b2f22; --red: #c8402f; --rare: #6b4fa0; --rare-soft: #eee8f8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #7cc48f; --accent-ink: #0f1220; --accent-soft: #1d3326; --paper: #2a2620; --paper-line: #4a4234; --ink: #efe6d2; --red: #ef7a68; --rare: #b9a2ef; --rare-soft: #2c2540; }
}
:root[data-theme="dark"] { --accent: #7cc48f; --accent-ink: #0f1220; --accent-soft: #1d3326; --paper: #2a2620; --paper-line: #4a4234; --ink: #efe6d2; --red: #ef7a68; --rare: #b9a2ef; --rare-soft: #2c2540; }

.sz-hero { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); line-height: 0; border: 1px solid var(--line); }
.sz-hero svg, .sz-hero img { width: 100%; height: auto; display: block; }
.sz-art svg, .sz-art img, .sz-mini svg { width: 100%; height: auto; display: block; }
.sz-art-main { width: min(280px, 78%); margin: 4px auto 6px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(40, 30, 10, .18); border: 3px solid var(--paper-line); }

.sz-friend { display: grid; grid-template-columns: 72px 1fr; gap: 10px 12px; align-items: center; }
.sz-friend > button { grid-column: 1 / -1; }
.sz-friend-art .sz-mini { width: 72px; border-radius: 10px; overflow: hidden; }

.sz-daily .sz-dq { font-weight: 800; font-size: 18px; margin: 10px 0 8px; }
.sz-dopts { display: grid; gap: 8px; }
.sz-dbtn { padding: 10px 14px; }
.sz-bar { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr 3.4em; gap: 8px; align-items: center; font-size: 14px; }
.sz-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-bar i { display: block; height: 12px; border-radius: 99px; background: var(--paper-line); min-width: 3px; }
.sz-bar b { text-align: right; }
.sz-bar.is-me i { background: var(--accent); }
.sz-bar.is-me span, .sz-bar.is-me b { color: var(--accent); font-weight: 800; }
.sz-bars { display: grid; gap: 6px; }
.sz-cd { font-variant-numeric: tabular-nums; }

.sz-scene { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 14px 4px 8px; width: fit-content; }
.sz-icon { width: 24px; height: 24px; display: inline-block; }
.sz-icon svg { width: 24px; height: 24px; display: block; }
.sz-qtext { font-size: clamp(20px, 5.6vw, 26px); }
.sz-back { min-height: 36px; padding: 4px 10px; font-size: 14px; }

.sz-anal { padding: 40px 0; }
.sz-loupe { width: 120px; margin: 0 auto; color: var(--ink); animation: sz-search 1.4s ease-in-out infinite; }
@keyframes sz-search { 0%, 100% { transform: translate(-14px, 0) rotate(-8deg); } 50% { transform: translate(14px, -6px) rotate(8deg); } }
.sz-anal-t { font-weight: 700; color: var(--text-sub); }

/* 図鑑のページ */
.sz-entry { background: var(--paper); color: var(--ink); border: 1px solid var(--paper-line); border-radius: 18px; padding: 16px 16px 18px; box-shadow: var(--shadow); position: relative;
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--paper-line) 45%, transparent) 27px 28px); }
.sz-entry.is-rare { border: 2px solid var(--rare); box-shadow: 0 0 0 4px var(--rare-soft), var(--shadow); }
.sz-entry-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sz-no { font-family: var(--font-serif); font-weight: 900; font-size: 20px; letter-spacing: .06em; color: var(--red); }
.sz-rare { font-size: 12px; font-weight: 800; color: var(--surface); background: var(--rare); border-radius: 999px; padding: 2px 10px; }
.sz-name { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; font-size: clamp(22px, 6.4vw, 30px); text-align: center; margin: 4px 0 2px; font-weight: 900; }
.sz-latin { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 14px; opacity: .8; margin: 0 0 8px; }
.sz-pct { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 4px 0 10px; }
.sz-pct b { font-size: 40px; font-weight: 900; color: var(--red); line-height: 1; }
.sz-pct span { font-size: 12px; max-width: 15em; line-height: 1.5; }
.sz-dl { display: grid; grid-template-columns: 7.2em 1fr; gap: 6px 10px; margin: 0; font-size: 15px; }
.sz-dl dt { font-weight: 800; color: var(--accent); }
.sz-dl dd { margin: 0; }
.sz-tip { margin: 12px 0 0; padding: 10px 12px; border-left: 4px solid var(--red); background: color-mix(in srgb, var(--paper) 80%, var(--surface)); border-radius: 0 10px 10px 0; font-size: 15px; }
.sz-combo b { font-size: 20px; }

.sz-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sz-cell { text-align: center; font-size: 12px; font-weight: 700; position: relative; }
.sz-cell .sz-mini { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.sz-cell.is-locked { color: var(--text-sub); }
.sz-cell.is-locked .sz-mini { opacity: .55; }
.sz-cell em { position: absolute; top: 2px; left: 2px; font-style: normal; font-size: 10px; background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 0 5px; }
@media (min-width: 640px) { .sz-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .sz-modal-wide .sz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mn-modal .sz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sz-fact p { margin-bottom: 4px; }
.sz-art { position: relative; }
.sz-ai { position: absolute; right: 6px; bottom: 4px; font-size: 10px; line-height: 1.4; color: var(--text-sub); background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 0 4px; border-radius: 4px; }
.ai-note { margin: 4px 0 8px; text-align: right; }