/* 日本流行語博物館（memoriba.com）共通の見た目。build.py が assets/style.css として書き出す */
:root {
  --paper: #FAF8F3;
  --ink: #201D19;
  --ink-soft: #5C564D;
  --line: #E3DED3;
  --shu: #C63D1C;
  --card: #FFFFFF;
  /* 年代の色（流行した年代） */
  --e70: #6F7A3A;
  --e80: #A87B2F;
  --e90: #C25E6E;
  --e00: #4E5E8E;
  --e10: #3E8A85;
  --e20: #C63D1C;
  --era: var(--ink-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191714; --ink: #EFEAE0; --ink-soft: #A79E90; --line: #35312A;
    --shu: #E05A35; --card: #211E1A;
    --e70: #A3AE6A; --e80: #C99B4C; --e90: #D97F8D; --e00: #7C8CB8; --e10: #5FADA7; --e20: #E05A35;
  }
}
:root[data-theme="dark"] {
  --paper: #191714; --ink: #EFEAE0; --ink-soft: #A79E90; --line: #35312A;
  --shu: #E05A35; --card: #211E1A;
  --e70: #A3AE6A; --e80: #C99B4C; --e90: #D97F8D; --e00: #7C8CB8; --e10: #5FADA7; --e20: #E05A35;
}
.era-1970 { --era: var(--e70); }
.era-1980 { --era: var(--e80); }
.era-1990 { --era: var(--e90); }
.era-2000 { --era: var(--e00); }
.era-2010 { --era: var(--e10); }
.era-2020 { --era: var(--e20); }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  line-height: 1.95;
  letter-spacing: 0.02em;
}
.label {
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 0.72rem; letter-spacing: 0.2em;
  color: var(--ink-soft);
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 640px; margin: 0 auto; padding: 0 28px; }
a { color: inherit; }

/* ---------- ヘッダー ---------- */
header { border-bottom: 1px solid var(--line); }
.header-in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0 18px; flex-wrap: wrap;
}
.brand .name { font-size: 1.15rem; font-weight: 600; text-decoration: none; letter-spacing: 0.12em; }
.brand .en-eyebrow {
  display: block; font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 2px;
}
.site-nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.site-nav a {
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 0.8rem; letter-spacing: 0.12em;
  text-decoration: none; color: var(--ink-soft);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--shu); border-bottom-color: var(--shu); }
.search { margin: 0; }
.search input {
  font: inherit; font-size: 0.82rem; width: 11em;
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
}
.search input:focus { outline: none; border-color: var(--shu); }

/* ---------- 展示の見出し ---------- */
.exhibit-head { padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.head-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px; align-items: center;
}
.big-word {
  font-size: clamp(120px, 22vw, 230px);
  line-height: 1.05; font-weight: 600; margin: 0;
  text-align: center; letter-spacing: 0;
  word-break: keep-all; overflow-wrap: anywhere; /* 「／」の位置で折り返す */
}
/* 字数が多い語は小さく（1行に収まりきらない分は折り返す） */
.big-word.len-3 { font-size: clamp(76px, 13vw, 150px); }
.big-word.len-4 { font-size: clamp(60px, 10vw, 116px); }
.big-word.len-long { font-size: clamp(44px, 7vw, 84px); line-height: 1.2; }
.head-info .crumbs { margin: 0 0 18px; }
.head-info .crumbs a { text-decoration: none; color: var(--ink-soft); }
.head-info .crumbs a:hover { color: var(--shu); }
.reading { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: 0.3em; }
.head-info .meta { color: var(--ink-soft); font-size: 0.88rem; margin: 0 0 18px; }
.oneliner { font-size: 1.2rem; line-height: 1.8; margin: 0 0 20px; max-width: 22em; }
.chip {
  display: inline-block;
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 0.7rem; letter-spacing: 0.12em; text-decoration: none;
  padding: 2px 12px; border-radius: 999px;
  color: var(--era); border: 1px solid var(--era);
}
a.chip:hover, a.chip:focus-visible { background: var(--era); color: var(--paper); }

/* ---------- 本文 ---------- */
.panel { padding: 56px 0; border-bottom: 1px solid var(--line); }
.panel.last { border-bottom: none; }
.panel-label { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.panel-label::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.panel h2 { font-size: 0.78rem; font-weight: 400; margin: 0; }
.panel p { margin: 0 0 1.3em; font-size: 1.04rem; }
.panel p:last-child { margin-bottom: 0; }

/* 移り変わりの図 */
.evolution {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--card);
  padding: 28px 20px; margin: 30px 0;
}
.evo-step { text-align: center; }
.evo-step .g { font-size: 1.9rem; font-weight: 600; line-height: 1.3; }
.evo-step .c { font-size: 0.7rem; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0.08em; }
.evo-arrow { color: var(--shu); font-size: 1.1rem; }

/* ---------- カード ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mini-card {
  border: 1px solid var(--line); background: var(--card);
  padding: 20px 22px 18px; text-decoration: none;
  display: flex; flex-direction: column; gap: 2px;
  transition: transform 0.15s ease;
  border-top: 3px solid var(--era);
}
.mini-card:hover, .mini-card:focus-visible { transform: translateY(-2px); }
.mini-card .n { font-size: 0.66rem; }
.mini-card .w { font-size: 1.6rem; font-weight: 600; line-height: 1.5; }
.mini-card .r { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.2em; }
.mini-card .g { font-size: 0.86rem; margin-top: 6px; line-height: 1.75; }

/* 共有 */
.strip {
  display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 30px 0; border-bottom: 1px solid var(--line);
}
.strip a, .strip button {
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 0.78rem; letter-spacing: 0.08em; cursor: pointer;
  text-decoration: none; color: var(--ink-soft); background: none;
  border: 1px solid var(--line); padding: 6px 16px; border-radius: 999px;
}
.strip a:hover, .strip button:hover { color: var(--shu); border-color: var(--shu); }

/* 記事内の広告枠（build.py の AD_SLOT_…）。本文と区別がつくよう上に「広告」と添える */
.ad-slot { padding-top: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.ad-slot .label { display: block; text-align: center; margin-bottom: 10px; font-size: 0.66rem; }
/* 広告が配信されなかった枠は、「広告」の文字と余白ごと隠す */
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }

/* 前後の展示 */
.walk { display: flex; justify-content: space-between; gap: 20px; padding: 36px 0 56px; }
.walk a { text-decoration: none; max-width: 45%; }
.walk .dir { display: block; margin-bottom: 4px; }
.walk .word { font-size: 1.25rem; font-weight: 600; }
.walk a:hover .word, .walk a:focus-visible .word { color: var(--shu); }
.walk .next { text-align: right; margin-left: auto; }

/* ---------- トップ・一覧 ---------- */
.intro { padding: 72px 0 56px; border-bottom: 1px solid var(--line); }
.intro h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 600; letter-spacing: 0.14em; margin: 0 0 14px; }
.intro p { margin: 0; color: var(--ink-soft); max-width: 32em; }
.era-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.page-head { padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.12em; margin: 0; }
.era-block { padding: 44px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 16px; }
.era-block h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 20px; color: var(--era); letter-spacing: 0.1em; }
.prose { padding: 48px 0 72px; }
.prose p { margin: 0 0 1.3em; }
.prose h2 { font-size: 1.05rem; margin: 2em 0 0.6em; }
.note { color: var(--ink-soft); font-size: 0.92rem; }

/* 検索 */
.search-big input {
  font: inherit; width: 100%; font-size: 1.05rem;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
}
.search-big input:focus { outline: none; border-color: var(--shu); }
.search-count { margin: 18px 0 22px; }

footer { border-top: 1px solid var(--line); padding: 28px 0 56px; }
.foot-in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.foot-links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--shu); }
.foot-note { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 860px) {
  .head-grid { grid-template-columns: 1fr; gap: 20px; }
  .exhibit-head { padding: 40px 0 44px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap, .narrow { padding: 0 16px; }
  .search { flex: 1 1 100%; }
  .search input { width: 100%; }
  .card-grid { grid-template-columns: 1fr; }
  .intro { padding: 48px 0 40px; }
}