/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, picture, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; }

/* ===== Design Tokens — 白 + 黒 + 深紺（アカデミック） ===== */
:root {
  /* 紙 */
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --bg-soft: #FAFAFB;
  --bg-card: #FFFFFF;
  /* 墨 */
  --text: #0E0E12;
  --text-muted: #3F424B;
  --text-soft: #6B6E78;
  /* 紺 — アクセント */
  --accent: #1E3A8A;
  --accent-2: #2C4DA8;
  --accent-dark: #142457;
  --accent-soft: rgba(30, 58, 138, 0.40);
  --accent-bg: rgba(30, 58, 138, 0.06);
  --border: rgba(14, 14, 18, 0.10);
  --border-soft: rgba(14, 14, 18, 0.05);
  --shadow-sm: 0 1px 2px rgba(14, 14, 13, 0.03);
  --shadow-md: 0 2px 12px rgba(14, 14, 13, 0.04);
  --shadow-lg: 0 8px 28px rgba(14, 14, 13, 0.06);

  --serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --container: 1200px;
  --container-narrow: 720px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
}

[data-theme="dark"] {
  --bg: #0A0A0F;
  --bg-alt: #16161C;
  --bg-soft: #12121A;
  --bg-card: #0F0F14;
  --text: #F2F2F5;
  --text-muted: #B5B5BC;
  --text-soft: #888892;
  --accent: #6B8AFC;        /* dark mode は navy を明るく調整 */
  --accent-2: #8FA5FF;
  --accent-dark: #4A6AE0;
  --accent-soft: rgba(107, 138, 252, 0.36);
  --accent-bg: rgba(107, 138, 252, 0.08);
  --border: rgba(250, 250, 255, 0.10);
  --border-soft: rgba(250, 250, 255, 0.05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
}

/* ===== Base ===== */
html {
  /* iOS Safari でフォントが拡大されて横にあふれるのを防ぐ */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  /* モバイルのドロワー（translateX(100%)）が横スクロールを生まないように */
  overflow-x: clip;
  width: 100%;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  transition: background 0.3s, color 0.3s;
  position: relative;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

h1 { font-size: 2.4rem; letter-spacing: -0.02em; }
h2 { font-size: 1.8rem; letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p { color: var(--text); }

a { text-decoration: none; }
a:hover { color: var(--accent); }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 2px solid var(--accent, #1E3A8A);
  border-bottom: 1px solid var(--border-soft);
}

[data-theme="dark"] .site-header {
  background: rgba(15, 15, 22, 0.92);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.logo {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.logo .accent { color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  padding: 8px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
}

.nav-link:hover {
  background: var(--bg-alt);
  color: var(--text);
}

.nav-link.active {
  color: var(--accent);
  background: var(--accent-bg);
}

.theme-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background 0.2s, color 0.2s;
}

.theme-toggle:hover {
  background: var(--bg-alt);
  color: var(--text);
}

.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

/* ===== Hero ===== */
.hero {
  padding: 80px 0 64px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.hero .lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
}

.hero .tagline {
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ===== Sections ===== */
section { padding: 64px 0; }

.section-header {
  margin-bottom: 40px;
  text-align: center;
}

.section-header h2 {
  margin-bottom: 8px;
}

.section-header p {
  color: var(--text-muted);
}

.section-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ===== Multi-axis Entry ===== */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.entry-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.entry-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
  color: var(--text);
}

.entry-card .icon {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 600;
}

.entry-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.entry-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* ===== Articles List ===== */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
  color: var(--text);
}

.article-card .category {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}

.article-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  line-height: 1.5;
}

.article-card .excerpt {
  font-size: 0.92rem;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 16px;
}

.article-card .meta {
  font-size: 0.78rem;
  color: var(--text-soft);
  display: flex;
  gap: 16px;
}

/* ===== Article Page ===== */
.article-page {
  padding: 56px 0 80px;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 8px; color: var(--text-soft); }

.article-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.article-header .category {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}

.article-header h1 {
  font-size: 2.2rem;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
}

.article-header .lead {
  font-size: 1.08rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.article-meta {
  display: flex;
  gap: 20px;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.article-body {
  font-size: 1rem;
  line-height: 1.85;
}

.article-body h2 {
  margin: 56px 0 20px;
  font-size: 1.6rem;
  padding-left: 14px;
  border-left: 4px solid var(--accent);
}

.article-body h3 {
  margin: 36px 0 14px;
  font-size: 1.2rem;
  color: var(--text);
}

.article-body p {
  margin-bottom: 20px;
}

.article-body ul, .article-body ol {
  margin: 0 0 20px 24px;
}

.article-body ul li, .article-body ol li {
  margin-bottom: 8px;
  list-style: disc;
}

.article-body ol li { list-style: decimal; }

.article-body strong {
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(to bottom, transparent 60%, var(--accent-bg) 60%);
}

.article-body em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.92rem;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.article-body th, .article-body td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.article-body th {
  background: var(--bg-alt);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
}

.article-body tr:last-child td { border-bottom: none; }

.article-body blockquote {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--accent-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.98rem;
}

.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body .callout {
  margin: 32px 0;
  padding: 24px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.article-body .callout h4 {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.article-body .summary-box {
  margin: 40px 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--bg-alt) 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-soft);
}

.article-body .summary-box h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 12px;
}

.related {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.related h3 {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--sans);
  margin-bottom: 20px;
}

/* ===== Lookup Page ===== */
.lookup-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  margin-top: 32px;
}

.filter-sidebar {
  position: sticky;
  top: 88px;
  align-self: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.filter-group {
  margin-bottom: 24px;
}

.filter-group:last-child { margin-bottom: 0; }

.filter-group h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  padding: 6px 12px;
  font-size: 0.82rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  transition: all 0.18s;
}

.filter-chip:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

.filter-chip.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.filter-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-range input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.range-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.filter-clear {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.filter-clear:hover { color: var(--accent); }

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.results-count {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.results-count strong {
  color: var(--text);
  font-weight: 700;
}

.sort-select {
  padding: 6px 12px;
  font-size: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.piece-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.piece-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
}

.piece-card .composer {
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.piece-card .title {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.5;
  color: var(--text);
}

.piece-card .meta-row {
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.piece-card .meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.piece-card .difficulty {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.diff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.diff-dot.filled { background: var(--accent); }

.piece-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.piece-tag {
  font-size: 0.72rem;
  padding: 3px 8px;
  background: var(--bg-alt);
  color: var(--text-muted);
  border-radius: 999px;
}

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}

.empty-state h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text);
}

/* ===== Tools / Forms ===== */
.tool-page {
  padding: 56px 0 80px;
}

.tool-header {
  text-align: center;
  margin-bottom: 48px;
}

.tool-header h1 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.tool-header p {
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.quiz-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.quiz-progress {
  margin-bottom: 32px;
}

.quiz-progress-bar {
  height: 4px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.quiz-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s;
}

.quiz-progress-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.quiz-question {
  font-family: var(--serif);
  font-size: 1.4rem;
  margin-bottom: 28px;
  line-height: 1.5;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  transition: all 0.18s;
}

.quiz-option:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  transform: translateY(-1px);
}

.quiz-result {
  text-align: center;
  padding: 24px 0;
}

.quiz-result .level-badge {
  display: inline-block;
  padding: 8px 20px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  font-weight: 600;
}

.quiz-result h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.quiz-result .description {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 32px;
  text-align: left;
  line-height: 1.85;
}

.quiz-result .recommendations {
  text-align: left;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.quiz-result .recommendations h3 {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.btn {
  display: inline-block;
  padding: 12px 28px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 0.18s, transform 0.18s;
}

.btn:hover {
  background: #6e1c2a;
  color: white;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-alt);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg-card);
  color: var(--text);
}

/* ===== Footer ===== */
.site-footer {
  padding: 48px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  margin-top: 80px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col a {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.footer-col a:hover { color: var(--accent); }

.footer-brand p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.7;
}

.footer-bottom {
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 24px 24px 0;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-soft);
  text-align: center;
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .lookup-layout { grid-template-columns: 1fr; }
  .filter-sidebar {
    position: static;
    max-height: none;
  }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  h1 { font-size: 1.9rem; }
  h2 { font-size: 1.5rem; }
  .hero { padding: 56px 0 48px; }
  .hero h1 { font-size: 2rem; }
  section { padding: 48px 0; }
  .menu-toggle { display: flex; position: relative; z-index: 210; }
  /* 右からスライドインするドロワー — header より上の z-index に */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(80vw, 320px);
    flex-direction: column;
    gap: 0;
    padding: 84px 28px 48px;
    background: var(--bg);
    border-left: 1px solid var(--border-soft);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex !important;
  }
  .nav.open { transform: translateX(0); }
  .nav-link {
    width: 100%;
    padding: 18px 0;
    font-size: 1.05rem;
    font-family: var(--serif);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-soft);
    background: transparent !important;
    color: var(--text) !important;
    border-radius: 0 !important;
  }
  .nav-link:last-of-type { border-bottom: none; }
  .nav-link.active {
    color: var(--text) !important;
    font-weight: 600;
    background: transparent !important;
  }
  .nav .theme-toggle {
    margin-top: 32px;
    width: 36px;
    height: 36px;
    align-self: flex-start;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
  }
  .article-header h1 { font-size: 1.7rem; }
  .article-body h2 { font-size: 1.35rem; }
  .article-body table { font-size: 0.82rem; }
  .article-body th, .article-body td { padding: 8px 10px; }
  .quiz-card { padding: 28px 20px; }
  .quiz-question { font-size: 1.2rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== Utility ===== */
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.hidden { display: none !important; }

/* ===== Hero Enhancement ===== */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-keys {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  pointer-events: none;
  opacity: 0.07;
}

.hero-keys .white-key {
  flex: 1;
  border-right: 1px solid var(--text);
  background: linear-gradient(180deg, transparent 0%, currentColor 100%);
}

.hero-keys .white-key:last-child { border-right: none; }

.hero-keys .black-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  display: flex;
  pointer-events: none;
}

.hero-keys .black-key {
  width: 4%;
  height: 100%;
  background: var(--text);
  border-radius: 0 0 2px 2px;
}

.hero-keys .gap { flex: 1; }

/* ===== Featured Spotlight ===== */
.spotlight-wrap {
  margin-bottom: 48px;
}

.spotlight {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--accent-bg) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.spotlight:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.spotlight::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  opacity: 0.3;
  border-radius: 50%;
  transform: translate(40%, -40%);
}

.spotlight-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}

.spotlight h3 {
  font-size: 1.7rem;
  line-height: 1.4;
  margin-bottom: 16px;
  color: var(--text);
  font-weight: 600;
}

.spotlight p {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin-bottom: 20px;
  line-height: 1.85;
}

.spotlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
}

.spotlight-cta::after {
  content: '→';
  transition: transform 0.2s;
}

.spotlight:hover .spotlight-cta::after {
  transform: translateX(4px);
}

.spotlight-visual {
  position: relative;
  z-index: 1;
}

.spotlight-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mini-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  text-align: center;
}

.mini-stat .num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.mini-stat .lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.mini-stat.muted .num {
  color: var(--text-soft);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
}

@media (max-width: 720px) {
  .spotlight { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
  .spotlight h3 { font-size: 1.35rem; }
  .spotlight-stats { gap: 12px; }
}

/* ===== Verdict Cards (Fact-check) ===== */
.verdict-section {
  margin: 32px 0;
  padding: 28px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  border-left-width: 4px;
}

.verdict-section[data-verdict] { border-left-color: var(--accent-soft); border-left-width: 1px; }
.verdict-section[data-verdict="inflated"] { border-left-color: var(--accent); }

.verdict-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: var(--sans);
  white-space: nowrap;
}

.verdict-badge {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.verdict-badge.inflated { color: var(--accent); border-color: var(--accent-soft); }
.verdict-badge.confirmed { color: var(--text); }

.verdict-claim {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 !important;
  line-height: 1.5;
  flex: 1 1 auto;
  min-width: 0;
}

.verdict-section .article-body p,
.verdict-section p {
  font-size: 0.95rem;
  margin-bottom: 12px;
  line-height: 1.8;
}

.verdict-section p:last-child { margin-bottom: 0; }

.verdict-section .label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 8px;
}

/* ===== Stat Block Row ===== */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.stat-block {
  padding: 24px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
}

.stat-block:hover {
  transform: translateY(-2px);
  border-color: var(--accent-soft);
}

.stat-number {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.stat-number .small { font-size: 0.7em; }
.stat-number .unit { font-size: 0.55em; color: var(--text-soft); margin-left: 2px; }

.stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-context {
  font-size: 0.74rem;
  color: var(--text-soft);
  margin-top: 6px;
}

/* ===== Comparison Bars ===== */
.compare {
  margin: 28px 0;
  padding: 24px;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
}

.compare-title {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
}

.compare-row {
  margin-bottom: 14px;
}

.compare-row:last-child { margin-bottom: 0; }

.compare-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.compare-label .source {
  font-size: 0.72rem;
  color: var(--text-soft);
  font-weight: 500;
}

.compare-bar {
  position: relative;
  height: 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.compare-fill {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  transition: width 0.6s ease;
}

.compare-fill.industry { background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border); }
.compare-fill.reality { background: var(--text); color: var(--bg); }
[data-theme="dark"] .compare-fill.industry { color: var(--text-muted); }

/* ===== Editorial Note ===== */
.editorial-note {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--bg-alt);
  border-left: 3px solid var(--text-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.editorial-note h5 {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}

.editorial-note p { margin-bottom: 0 !important; }

/* ===== Reading Progress Bar ===== */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  width: 0%;
  z-index: 200;
  transition: width 0.05s linear;
}

/* ===== Section divider — 横線 + ◇ + アイブロウ + ◇ + 横線（editorial） ===== */
.eyebrow-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.eyebrow-line::before,
.eyebrow-line::after {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
  position: relative;
}
.eyebrow-line {
  position: relative;
}
/* 横線の外側端に小さな◇ */
.eyebrow-line {
  --diamond: 6px;
}
.eyebrow-line .section-eyebrow {
  position: relative;
}
.eyebrow-line .section-eyebrow::before,
.eyebrow-line .section-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: var(--diamond);
  height: var(--diamond);
  background: var(--accent);
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.8;
}
.eyebrow-line .section-eyebrow::before { left: -22px; }
.eyebrow-line .section-eyebrow::after  { right: -22px; }

/* ===== Site Stats Section ===== */
.site-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.site-stat {
  text-align: center;
  padding: 24px 20px;
  border-right: 1px solid var(--border);
}

.site-stat:last-child { border-right: none; }

.site-stat-num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.site-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .site-stat { border-right: none; border-bottom: 1px solid var(--border); padding: 20px; }
  .site-stat:last-child { border-bottom: none; }
}

/* ===== Article TOC (anchor jump) ===== */
.article-toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin: 32px 0;
}

.article-toc h4 {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 700;
}

.article-toc ol {
  margin: 0 !important;
  list-style: none !important;
  counter-reset: toc-counter;
}

.article-toc li {
  list-style: none !important;
  counter-increment: toc-counter;
  padding: 6px 0;
  margin-bottom: 0 !important;
  border-bottom: 1px dashed var(--border);
}

.article-toc li:last-child { border-bottom: none; }

.article-toc li::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: var(--serif);
  color: var(--accent);
  font-weight: 600;
  margin-right: 12px;
  font-size: 0.85rem;
}

.article-toc a {
  font-size: 0.92rem;
  color: var(--text);
}

.article-toc a:hover { color: var(--accent); }

/* ===== Polish: Article cards ===== */
.article-card {
  position: relative;
  overflow: hidden;
}

.article-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--accent);
  transition: height 0.3s ease;
}

.article-card:hover::before { height: 100%; }

/* ===== Featured ribbon ===== */
.ribbon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--accent-bg);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ===== Article body anchor links ===== */
.article-body h2 {
  scroll-margin-top: 80px;
}

/* ===== Mobile fix for verdict cards ===== */
@media (max-width: 720px) {
  .verdict-section { padding: 20px; }
  .verdict-claim { font-size: 1.05rem; }
  .stat-number { font-size: 1.7rem; }
  .compare { padding: 16px; }
}

/* ===== Composer Profile ===== */
.composer-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin-bottom: 32px;
  scroll-margin-top: 80px;
}

.composer-head {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.composer-portrait {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-bg), var(--bg-alt));
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--accent);
  font-weight: 700;
  border: 1px solid var(--accent-soft);
}

.composer-info h2 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  line-height: 1.3;
}

.composer-meta {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.composer-meta span {
  position: relative;
}

.composer-meta span::after {
  content: '·';
  margin-left: 16px;
  color: var(--text-soft);
}

.composer-meta span:last-child::after { content: ''; }

.composer-tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: 0.95rem;
  margin-top: 8px;
}

.composer-body p { margin-bottom: 14px; line-height: 1.85; }

.composer-body h4 {
  font-size: 0.92rem;
  color: var(--text);
  margin: 24px 0 10px;
  font-family: var(--sans);
  letter-spacing: 0.04em;
}

.composer-body h4::before {
  content: '◆';
  color: var(--accent);
  margin-right: 8px;
  font-size: 0.78em;
}

.composer-pieces {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.composer-pieces strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.composer-pieces a {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent-soft);
}

.composer-nav {
  position: sticky;
  top: 80px;
  z-index: 50;
  display: flex;
  gap: 6px;
  padding: 12px 0;
  margin-bottom: 32px;
  background: var(--bg);
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.composer-nav a {
  padding: 6px 12px;
  font-size: 0.84rem;
  color: var(--text-muted);
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  transition: all 0.18s;
  flex-shrink: 0;
}

.composer-nav a:hover {
  color: var(--accent);
  border-color: var(--accent-soft);
}

@media (max-width: 720px) {
  .composer-card { padding: 24px; }
  .composer-head { grid-template-columns: 70px 1fr; gap: 16px; }
  .composer-portrait { width: 70px; height: 70px; font-size: 1.8rem; }
}

/* ===== Timeline (chapter-based, scrollable river) ===== */

/* 上部の進捗バー */
.timeline-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--text);
  z-index: 200;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ヒーロー — 本文の timeline-wrap (1080px) と左端を揃える */
.timeline-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 144px 32px 96px;
  text-align: left;
}

.timeline-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 16px 0 24px;
  max-width: 720px;
}

.timeline-hero .lead {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.95;
  max-width: 540px;
}

.timeline-hero-meta {
  margin-top: 56px;
  display: flex;
  gap: 16px;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-soft);
  flex-wrap: wrap;
}

/* 章立て（左側：時代軸、右側：本文） */
.timeline-wrap {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px 96px;
}

.timeline-era {
  position: relative;
  padding: 96px 0 48px;
  border-top: 1px solid var(--border-soft);
}
.timeline-era:first-child { border-top: none; padding-top: 32px; }

/* 章ヘッダー：sticky で時代がスクロールに張り付く（背景は全幅、内容は控えめに） */
.timeline-era-header {
  position: sticky;
  top: 56px;
  z-index: 5;
  background: var(--bg);
  padding: 22px 32px 18px;
  margin: 0 -32px 56px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.timeline-era-header > * {
  max-width: 540px;
}

.era-chapter {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}

.era-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  margin-bottom: 4px;
  display: inline;
}

.era-range {
  font-family: var(--serif);
  font-size: 0.86rem;
  color: var(--text-soft);
  letter-spacing: 0.1em;
  margin: 0 0 0 16px;
  display: inline;
}

.era-summary {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 540px;
  margin-top: 10px;
}

.era-summary strong {
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

/* イベントの並び */
.timeline-events {
  position: relative;
  padding-left: 32px;
}

/* 縦の細い線（時間軸） */
.timeline-events::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-soft);
}

/* 個別イベント */
.timeline-event {
  position: relative;
  padding: 0 0 72px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 28px;
  align-items: start;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-event.in-view {
  opacity: 1;
  transform: translateY(0);
}

.timeline-event:last-child { padding-bottom: 32px; }

/* 左側：年（時間軸の上に乗る） */
.timeline-axis {
  position: relative;
  padding-left: 0;
  margin-left: -32px;
  padding-top: 4px;
  text-align: left;
}

.timeline-axis::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 1px;
  background: var(--text);
}

.timeline-axis-year {
  display: inline-block;
  margin-left: 24px;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
}

/* カード本体 */
.timeline-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: start;
}

.timeline-portrait {
  width: 96px;
  height: 128px;
  object-fit: cover;
  object-position: center top;
  background: var(--bg-alt);
  filter: grayscale(100%);
  opacity: 0.94;
  transition: filter 0.5s ease, opacity 0.3s ease;
}

.timeline-event:hover .timeline-portrait {
  filter: grayscale(0%);
  opacity: 1;
}

.timeline-content {
  min-width: 0;
}

.timeline-tag {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 10px;
}

.timeline-title {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  margin: 0 0 14px;
  color: var(--text);
}

.timeline-desc {
  font-size: 0.96rem;
  color: var(--text-muted);
  line-height: 1.95;
  margin: 0 0 18px;
}

.timeline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 10px;
}

.timeline-links a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}

.timeline-links a:hover {
  border-color: var(--text);
  color: var(--text);
}

/* 画像なしカードは内容だけ広げる */
.timeline-card:not(:has(.timeline-portrait)) {
  grid-template-columns: 1fr;
}

/* 右側ナビゲーション（時代レール） */
.era-rail {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-soft);
}

.era-rail-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text-soft);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  transition: color 0.2s;
  border-left: 1px solid transparent;
}

.era-rail-item:hover {
  color: var(--text);
}

.era-rail-item.active {
  color: var(--text);
  border-left-color: var(--text);
}

.era-rail-num {
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  min-width: 24px;
}

.era-rail-item.active .era-rail-num {
  color: var(--text);
}

.era-rail-name {
  font-size: 0.82rem;
  font-weight: 400;
}

/* アウトロ */
.timeline-outro {
  max-width: 720px;
  margin: 96px auto;
  padding: 96px 32px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.timeline-outro .lead {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 48px;
}

.timeline-outro-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.timeline-outro-links a {
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-decoration: none;
  text-transform: none;
  transition: color 0.2s;
}

.timeline-outro-links a:hover {
  color: var(--text);
}

/* レスポンシブ */
@media (max-width: 1199px) {
  .era-rail { display: none; }
}

@media (max-width: 720px) {
  .timeline-hero { padding: 96px 24px 64px; }
  .timeline-wrap { padding: 0 20px 64px; }
  .timeline-era-header { top: 52px; padding: 22px 20px 16px; margin: 0 -20px 32px; }
  .timeline-events { padding-left: 24px; }

  .timeline-event {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 48px;
  }

  .timeline-axis {
    margin-left: -24px;
    padding-left: 0;
  }
  .timeline-axis::before { width: 12px; }
  .timeline-axis-year { margin-left: 18px; font-size: 0.86rem; }

  .timeline-card {
    grid-template-columns: 72px 1fr;
    gap: 16px;
  }
  .timeline-portrait { width: 72px; height: 96px; }
  .timeline-title { font-size: 1rem; }
  .timeline-desc { font-size: 0.86rem; }

  .timeline-outro { padding: 64px 24px; margin: 48px auto; }
}

/* ===== Spotlight: composer portrait grid ===== */
.composer-portrait-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.portrait-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent-soft);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--accent);
  font-size: 1.4rem;
  transition: transform 0.2s, background 0.2s;
}

.spotlight:hover .portrait-cell {
  background: var(--accent-bg);
}

.spotlight:hover .portrait-cell:nth-child(1) { transform: translateY(-3px); transition-delay: 0.05s; }
.spotlight:hover .portrait-cell:nth-child(2) { transform: translateY(-3px); transition-delay: 0.1s; }
.spotlight:hover .portrait-cell:nth-child(3) { transform: translateY(-3px); transition-delay: 0.15s; }
.spotlight:hover .portrait-cell:nth-child(4) { transform: translateY(-3px); transition-delay: 0.2s; }
.spotlight:hover .portrait-cell:nth-child(5) { transform: translateY(-3px); transition-delay: 0.25s; }
.spotlight:hover .portrait-cell:nth-child(6) { transform: translateY(-3px); transition-delay: 0.3s; }
.spotlight:hover .portrait-cell:nth-child(7) { transform: translateY(-3px); transition-delay: 0.35s; }
.spotlight:hover .portrait-cell:nth-child(8) { transform: translateY(-3px); transition-delay: 0.4s; }

@media (max-width: 720px) {
  .portrait-cell { font-size: 1.1rem; }
}

/* ===== Glossary ===== */
.glossary-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.glossary-cat-btn {
  padding: 8px 18px;
  font-size: 0.88rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-weight: 500;
}

.glossary-cat-btn:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

.glossary-section {
  margin-bottom: 56px;
  scroll-margin-top: 80px;
}

.glossary-section h2 {
  font-size: 1.4rem;
  padding-left: 16px;
  border-left: 4px solid var(--accent);
  margin-bottom: 24px;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.glossary-term {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: border-color 0.2s, transform 0.2s;
}

.glossary-term:hover {
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}

.glossary-term dt {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.glossary-term .reading {
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-weight: 500;
}

.glossary-term dd {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

/* ===== Country Profiles ===== */
.country-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-bottom: 28px;
  scroll-margin-top: 80px;
  position: relative;
  overflow: hidden;
}

.country-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.country-card[data-flag]::before { background: var(--accent); height: 1px; }

.country-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.country-emoji {
  font-size: 2.2rem;
  font-family: var(--serif);
  color: var(--accent);
  font-weight: 700;
}

.country-info h2 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.country-tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  font-size: 0.95rem;
}

.country-body h4 {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 24px 0 10px;
  font-weight: 700;
}

.country-body p { margin-bottom: 12px; line-height: 1.85; }

.country-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.country-stat {
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.country-stat .l {
  font-size: 0.72rem;
  color: var(--text-soft);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.country-stat .v {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}

@media (max-width: 720px) {
  .country-card { padding: 24px; }
}

/* ===== Street Piano Map ===== */
.region-section {
  margin-bottom: 40px;
  scroll-margin-top: 80px;
}

.region-section h2 {
  font-size: 1.4rem;
  padding: 8px 16px;
  background: var(--bg-alt);
  border-left: 4px solid var(--accent);
  margin-bottom: 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.piano-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.piano-spot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: transform 0.2s, border-color 0.2s;
}

.piano-spot:hover {
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}

.piano-spot .city {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}

.piano-spot .place {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--text);
}

.piano-spot .note {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 8px;
}

.piano-spot .access {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.region-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.region-link {
  padding: 6px 14px;
  font-size: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}

.region-link:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

/* ===== Concours ===== */
.concours-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin-bottom: 28px;
  scroll-margin-top: 80px;
}

.concours-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.concours-head h2 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  line-height: 1.4;
}

.concours-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.concours-meta span::after {
  content: '·';
  margin-left: 16px;
  color: var(--text-soft);
}

.concours-meta span:last-child::after { content: ''; }

.concours-body h4 {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 20px 0 8px;
}

.concours-body h4::before {
  content: '◆';
  color: var(--accent);
  margin-right: 8px;
  font-size: 0.78em;
}

.concours-winners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.concours-winner {
  padding: 10px 14px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.concours-winner .year {
  display: block;
  font-size: 0.74rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.concours-winner .name {
  font-weight: 500;
  color: var(--text);
}

@media (max-width: 720px) {
  .concours-card { padding: 24px; }
}

/* ===== Composer page (individual) ===== */
.composer-page-hero {
  text-align: center;
  padding: 120px 32px 96px;
  background: transparent;
  border-radius: 0;
  margin-bottom: 96px;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}

.composer-page-portrait {
  width: 120px;
  height: 120px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--bg-card);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  border: 2px solid var(--accent-soft);
  box-shadow: var(--shadow-md);
}

.composer-page-hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 24px;
}

.composer-page-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.composer-page-meta span::after {
  content: '·';
  margin-left: 20px;
  color: var(--text-soft);
}

.composer-page-meta span:last-child::after { content: ''; }

.composer-page-tagline {
  font-family: var(--serif);
  font-style: normal;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.85;
  max-width: 540px;
  margin: 0 auto;
}

.composer-page-body {
  max-width: 720px;
  margin: 0 auto;
}

.composer-page-body h2 {
  margin: 96px 0 32px;
  font-size: 1.4rem;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding-left: 0;
  border-left: none;
}

.composer-page-body h3 {
  margin: 56px 0 16px;
  font-size: 1.08rem;
  font-family: var(--serif);
  font-weight: 500;
}

.composer-page-body p { margin-bottom: 24px; line-height: 2.05; }

.composer-pieces-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.composer-piece-item {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, transform 0.2s;
}

.composer-piece-item:hover {
  border-color: var(--accent-soft);
  transform: translateY(-1px);
  color: var(--text);
}

.composer-piece-item .piece-title {
  font-family: var(--serif);
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.95rem;
}

.composer-piece-item .piece-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.influence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}

.influence-box {
  padding: 18px 22px;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
}

.influence-box h4 {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
}

.influence-box ul li {
  list-style: none !important;
  padding: 4px 0;
  font-size: 0.92rem;
  margin-bottom: 0 !important;
}

@media (max-width: 720px) {
  .composer-page-hero { padding: 40px 20px 32px; }
  .composer-page-hero h1 { font-size: 1.7rem; }
  .composer-page-portrait { width: 90px; height: 90px; font-size: 2.2rem; }
  .influence-grid { grid-template-columns: 1fr; }
}

/* ===== Composer photo (real image) ===== */
.composer-photo {
  width: 200px;
  height: 240px;
  margin: 0 auto 56px;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  border: none;
  box-shadow: none;
  background: var(--bg-alt);
  filter: grayscale(100%);
  opacity: 0.94;
  transition: filter 0.6s ease, opacity 0.4s ease;
}

.composer-photo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.composer-photo-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.photo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}

.photo-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-soft);
}

.photo-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.photo-card .caption {
  padding: 12px 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

.photo-card .caption strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 0.92rem;
}

@media (max-width: 720px) {
  .composer-photo { width: 130px; height: 130px; }
}

/* ===== Personality / Routine ===== */
.personality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.trait-card {
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.trait-card .label {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}

.trait-card .value {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 8px;
}

.trait-card .desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.routine-list {
  margin: 24px 0;
  position: relative;
  padding-left: 28px;
}

.routine-list::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 2px;
  background: var(--accent-soft);
}

.routine-step {
  position: relative;
  padding: 6px 0 14px 16px;
}

.routine-step::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}

.routine-time {
  font-family: var(--serif);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-block;
  margin-right: 12px;
  min-width: 100px;
}

.routine-desc {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.7;
}

/* ===== Works list (categorized) ===== */
.works-categories {
  margin: 24px 0;
}

.works-cat {
  margin-bottom: 24px;
}

.works-cat h4 {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.works-cat ul {
  margin-left: 0 !important;
}

.works-cat li {
  list-style: none !important;
  padding: 6px 0;
  font-size: 0.92rem;
  color: var(--text);
  border-bottom: 1px dotted var(--border-soft);
  margin-bottom: 0 !important;
}

.works-cat li:last-child { border-bottom: none; }

.works-cat li .num {
  font-family: var(--serif);
  color: var(--accent);
  font-weight: 600;
  margin-right: 8px;
  font-size: 0.85rem;
}

/* ===== Pilgrimage ===== */
.pilgrimage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.pilgrimage-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  position: relative;
  transition: transform 0.2s, border-color 0.2s;
}

.pilgrimage-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-soft);
}

.pilgrimage-card .pin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}

.pilgrimage-card .pin::before {
  content: '◉';
  font-size: 0.85em;
}

.pilgrimage-card .place-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
}

.pilgrimage-card .place-loc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pilgrimage-card .place-desc {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 8px;
}

.pilgrimage-card .place-access {
  font-size: 0.78rem;
  color: var(--text-soft);
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}

.pilgrimage-map-note {
  margin: 16px 0;
  padding: 14px 18px;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-muted);
  border-left: 3px solid var(--accent-soft);
}

/* ===== Quote (composer's own words) ===== */
.composer-quote {
  margin: 28px 0;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--accent-bg), var(--bg-alt));
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text);
  position: relative;
}

.composer-quote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 12px;
  font-size: 4rem;
  font-family: var(--serif);
  color: var(--accent-soft);
  font-style: normal;
  line-height: 1;
}

.composer-quote .source {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: right;
}

.composer-quote .source::before { content: '— '; }

/* ===== Composer index card ===== */
.composer-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 32px 0;
}

.composer-index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
/* 左下に navy 角アクセント（hover 時に拡大） */
.composer-index-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--accent, #1E3A8A);
  transition: width 0.35s var(--ease, ease);
  z-index: 2;
}
.composer-index-card:hover::after { width: 100%; }

.composer-index-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-soft);
  color: var(--text);
}

.composer-index-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  background: linear-gradient(135deg, var(--accent-bg), var(--bg-alt));
  display: block;
}

.composer-index-photo.placeholder {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 4rem;
  font-weight: 700;
  color: var(--accent);
}

.composer-index-info {
  padding: 20px 24px 24px;
}

.composer-index-info h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
  line-height: 1.4;
}

.composer-index-info .dates {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.composer-index-info .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--accent);
  line-height: 1.6;
}

/* ===== Atmosphere: Refinements ===== */
section { padding: 96px 0; }
.hero { padding: 144px 0 96px; }

@media (max-width: 720px) {
  section { padding: 64px 0; }
  .hero { padding: 88px 0 64px; }
}

/* Refined header */
.site-header {
  background: rgba(251, 250, 247, 0.85);
  border-bottom: 1px solid var(--border-soft);
}
[data-theme="dark"] .site-header {
  background: rgba(11, 11, 10, 0.85);
}
.header-inner { height: 72px; }
.logo {
  font-family: var(--serif);
  letter-spacing: 0.02em;
}
.nav-link {
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text);
  text-transform: lowercase;
  padding: 8px 12px;
}
.nav-link:hover { background: transparent; color: var(--accent); }
.nav-link.active { background: transparent; color: var(--accent); }

/* Refined hero */
.hero h1 {
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.tagline {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ===== FAB (Floating Action Button) ===== */
.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-paper, var(--bg-card));
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-sm);
}

.fab-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
  color: var(--accent);
}

.fab-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
}

.fab-btn.is-on {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.fab-btn.is-on svg .bm-fill { opacity: 1 !important; }
.fab-btn.is-on svg .bm-stroke { display: none; }

/* FAB の初回ヒント */
.fab-btn { position: relative; }
.fab-btn::after {
  content: attr(data-hint);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  font-family: var(--sans);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.fab.hinting .fab-btn::after { opacity: 1; }

/* キーボードでフォーカス時もヒント表示 */
.fab-btn:focus-visible::after { opacity: 1; }

/* FAB 分の下方余白を確保（最後のリンクと被らないように） */
body { padding-bottom: 96px; }

@media (max-width: 720px) {
  .fab { right: 16px; bottom: 16px; }
  .fab-btn { width: 40px; height: 40px; }
  body { padding-bottom: 80px; }
}

/* iOS Safari セーフエリア */
@supports (padding: max(0px)) {
  .fab { bottom: max(24px, env(safe-area-inset-bottom)); }
  @media (max-width: 720px) {
    .fab { bottom: max(16px, env(safe-area-inset-bottom)); }
  }
}

/* ===== From Banner（感情からの動線継承） ===== */
.from-banner {
  position: relative;
  margin: 0 auto;
  max-width: var(--container);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-soft);
}

.from-banner .from-label {
  font-family: var(--sans);
}

.from-banner .from-value {
  font-family: var(--serif);
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: none;
  font-size: 0.92rem;
}

.from-banner .from-back {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
}

.from-banner .from-back::after {
  content: ' →';
  margin-left: 4px;
}

.from-banner .from-back:hover { color: var(--accent); }

@media (max-width: 720px) {
  .from-banner { padding: 12px 16px; gap: 8px; flex-wrap: wrap; }
  .from-banner .from-back { width: 100%; margin-left: 0; margin-top: 4px; }
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  pointer-events: none;
  box-shadow: var(--shadow-md);
  font-family: var(--sans);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .toast { top: 16px; right: 16px; left: 16px; }
}

/* ===== Intro Page (silent entrance) ===== */
.intro-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  padding: 24px;
}

.intro-stage::after {
  content: '';
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 64px;
  background: var(--border);
  opacity: 0.5;
}

.intro-core {
  text-align: center;
  max-width: 480px;
}

.intro-orb {
  width: 88px;
  height: 88px;
  margin: 0 auto 56px;
  border-radius: 50%;
  background: var(--text);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  position: relative;
  border: none;
  outline: none;
  display: block;
}

.intro-orb::before,
.intro-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--text);
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}

.intro-orb:hover {
  transform: scale(1.04);
}

.intro-orb.pulsing::before {
  animation: orbPulse 2400ms var(--ease) infinite;
}

.intro-orb.activated {
  background: var(--accent);
}

.intro-orb.activated::before,
.intro-orb.activated::after {
  animation: ripple 1600ms var(--ease) forwards;
}

.intro-orb.activated::after {
  animation-delay: 200ms;
}

@keyframes orbPulse {
  0% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}

@keyframes ripple {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.5); }
}

.intro-prompt {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  font-weight: 400;
}

.intro-hint {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.intro-skip {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-transform: uppercase;
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px 12px;
  font-family: var(--sans);
}

.intro-skip:hover { color: var(--text); }

.intro-fade {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1200ms var(--ease);
}

.intro-fade.active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .intro-orb.pulsing::before,
  .intro-orb.activated::before,
  .intro-orb.activated::after { animation: none; }
}

/* ===== Emotion Grid (new home) ===== */
.atmosphere-hero {
  padding: 192px 32px 128px;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}

.atmosphere-hero > * {
  max-width: 720px;
}

.atmosphere-hero .crest {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 48px;
  font-family: var(--sans);
}

.atmosphere-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 56px;
}

.atmosphere-hero .lead {
  font-size: 1.05rem;
  line-height: 2.1;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0;
}

.emotion-section {
  padding: 144px 32px 192px;
  max-width: 1200px;
  margin: 0 auto;
}

.emotion-section-label {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  color: var(--text-soft);
  margin-bottom: 16px;
  font-family: var(--sans);
}

.emotion-section-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 16px;
}

.emotion-section-help {
  font-size: 0.96rem;
  line-height: 2.1;
  color: var(--text-muted);
  max-width: 540px;
  margin-bottom: 96px;
}

/* （emotion-card 関連は下のセクションに統合） */

.emotion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 80px 48px;
  background: transparent;
}

.emotion-card {
  position: relative;
  background: var(--bg);
  padding: 56px 32px 48px;
  display: block;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
  min-height: 320px;
  overflow: hidden;
}

.emotion-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--bg-alt);
  transition: width var(--dur-slow) var(--ease);
  z-index: 0;
}

.emotion-card:hover::before { width: 100%; }
.emotion-card:hover { color: var(--text); }
.emotion-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.emotion-card > * { position: relative; z-index: 1; }

.emotion-card .tone {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 28px;
  font-weight: 500;
  display: block;
}

.emotion-card h3 {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 18px;
  line-height: 1.4;
}

.emotion-card-sub {
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  line-height: 1.7;
  display: block;
}

.emotion-card .desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 32px;
}

.emotion-card .tags {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-transform: uppercase;
}

.emotion-card .tags span:not(:last-child)::after {
  content: '·';
  margin: 0 8px;
}

/* 4 列 → 2 列（タブレット） */
@media (max-width: 1023px) {
  .emotion-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }
  .emotion-card { padding: 64px 40px; min-height: 280px; }
  .emotion-card h3 { font-size: 1.8rem; }
  .emotion-card .desc { font-size: 0.92rem; }
}

@media (max-width: 720px) {
  .atmosphere-hero { padding: 112px 24px 72px; }
  .atmosphere-hero h1 { margin-bottom: 32px; }
  .atmosphere-hero .lead { line-height: 2.0; }
  .emotion-section { padding: 80px 20px 112px; }
  .emotion-section-help { margin-bottom: 48px; }
  .emotion-grid { grid-template-columns: 1fr; gap: 40px; }
  .emotion-card { padding: 40px 24px 36px; min-height: 0; }
  .emotion-card h3 { font-size: 1.55rem; }
  .emotion-card .desc { font-size: 0.88rem; margin-bottom: 20px; }
  .emotion-card .tone { margin-bottom: 20px; }
  .drift { padding: 80px 24px 112px; }
  .drift-link { padding: 28px 0; }
  .drift-link .title { font-size: 1.05rem; }
  .composer-page-hero { padding: 72px 24px 56px; margin-bottom: 56px; }
  .composer-photo { width: 150px; height: 188px; margin-bottom: 32px; }
  .composer-page-hero h1 { margin-bottom: 16px; }
  .composer-page-meta { margin-bottom: 24px; }
  .composer-page-body h2 { margin: 56px 0 20px; font-size: 1.25rem; }
  .composer-page-body h3 { margin: 36px 0 12px; }
  .composer-page-body p { margin-bottom: 18px; line-height: 1.95; }
}

/* ===== Drift Links (continuous discovery) ===== */
.drift {
  padding: 144px 32px 192px;
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.drift-label {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 64px;
  font-family: var(--sans);
}

.drift-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drift-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 40px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: padding var(--dur-fast) var(--ease);
}

.drift-link:last-child { border-bottom: none; }
.drift-link:hover { padding-left: 12px; color: var(--text); }

.drift-link .num {
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.1em;
  margin-right: 32px;
  min-width: 32px;
}

.drift-link .title {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--text);
  flex: 1;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.drift-link .arrow {
  font-family: var(--serif);
  color: var(--text-soft);
  font-size: 1rem;
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.drift-link:hover .arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ===== Saved (bookmark list) ===== */
.saved-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 48px;
}

.saved-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-soft);
}

.saved-item:last-child { border-bottom: none; }

.saved-item .info { flex: 1; min-width: 0; }

.saved-item .title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-item:hover .title { color: var(--accent); }

.saved-item .url {
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-item .date {
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.saved-item .remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  transition: all var(--dur-fast) var(--ease);
}

.saved-item .remove:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.saved-empty {
  text-align: center;
  padding: 96px 24px;
  color: var(--text-muted);
}

.saved-empty p { font-family: var(--serif); font-size: 1.1rem; }

/* ===== Spotlight refinement (less ornate) ===== */
.spotlight {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: center;
}

.spotlight::before { display: none; }
.spotlight:hover { box-shadow: none; transform: none; border-color: var(--text); }

.spotlight h3 {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .spotlight { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; }
  .spotlight h3 { font-size: 1.4rem; }
}

/* ===== Article body refinement ===== */
.article-body {
  font-size: 1.02rem;
  line-height: 1.95;
}

.article-body strong {
  background: none;
  font-weight: 700;
  color: var(--text);
}

.article-body em {
  color: var(--text);
  font-style: italic;
}

/* ===== Subtle scroll indicator ===== */
.reading-progress {
  height: 1px;
  background: var(--accent);
}

/* ===== Skip link (accessibility) ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  padding: 8px 16px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease);
}

.skip-link:focus {
  top: 16px;
  color: var(--bg);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Focus styles (keyboard) ===== */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible {
  outline-offset: 4px;
}

/* =========================================================
   Atmosphere Overrides — site-wide minimalism
   既存ページの装飾を「白黒+1色」に整える最終調整
   ========================================================= */

/* 強調文字の黄色ハイライトを廃止 */
.article-body strong {
  background: none !important;
  font-weight: 700;
  color: var(--text);
}

/* 余白を増やし、書物的なタイポグラフィへ */
.article-body { font-size: 1.02rem; line-height: 2.0; }
.article-body p { margin-bottom: 24px; }
.article-body h2 {
  margin: 80px 0 24px;
  font-weight: 500;
  border-left: 1px solid var(--rule, var(--border));
  border-left-color: var(--accent-soft);
  border-left-width: 1px;
  padding-left: 20px;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.article-body h3 {
  margin: 48px 0 16px;
  font-size: 1.15rem;
  font-weight: 500;
}

/* テーブルを淡く */
.article-body table {
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
}
.article-body th { background: transparent; font-weight: 500; border-bottom: 1px solid var(--border); }
.article-body td { border-bottom: 1px solid var(--border-soft); }

/* 各種カードの過剰なホバーを抑える */
.entry-card,
.article-card,
.composer-card,
.composer-index-card,
.piece-card,
.piano-spot,
.trait-card,
.pilgrimage-card,
.glossary-term {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.entry-card:hover,
.article-card:hover,
.composer-card:hover,
.composer-index-card:hover,
.piece-card:hover,
.piano-spot:hover,
.trait-card:hover,
.pilgrimage-card:hover,
.glossary-term:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--text);
  background: var(--bg);
}

.composer-index-photo { background: var(--bg-alt); }
.composer-index-info .tagline { font-style: normal; color: var(--text-muted); }

/* 時代区分ラベルは囲み枠だけ */
.timeline-era-label {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
}

/* 引用ブロックを柔らかく */
.composer-quote {
  background: transparent;
  border-left: 1px solid var(--accent-soft);
  font-style: normal;
  font-size: 1.1rem;
  line-height: 2.0;
  padding: 8px 0 8px 32px;
}
.composer-quote::before { display: none; }

blockquote {
  background: transparent;
  border-left: 1px solid var(--accent-soft);
  border-radius: 0;
  font-style: italic;
  padding: 8px 0 8px 24px;
}

/* リボンを廃止 */
.ribbon { display: none; }

/* スポットライト内ミニ統計の打ち消し線（業界主張）も廃止 */
.mini-stat.muted .num {
  text-decoration: none;
  color: var(--text-soft);
}
.mini-stat { background: transparent; border: 1px solid var(--border-soft); }

/* ポートレイト円を簡素に */
.composer-portrait, .composer-page-portrait {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  box-shadow: none;
  font-weight: 500;
  color: var(--text-muted);
}

/* セクション見出しの装飾線を控えめに */
.eyebrow-line::before,
.eyebrow-line::after {
  width: 24px;
  background: var(--border);
  opacity: 1;
}

/* article-page の上部余白 */
.article-page { padding: 64px 0 96px; }
@media (min-width: 720px) {
  .article-page { padding: 96px 0 144px; }
}
.article-header { margin-bottom: 64px; padding-bottom: 40px; border-bottom: 1px solid var(--border-soft); }
.article-header h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.article-header .lead { font-size: 1.05rem; line-height: 1.95; }
.article-header .category { font-size: 0.74rem; letter-spacing: 0.32em; color: var(--text-soft); font-weight: 500; }

/* breadcrumb を小さく */
.breadcrumb { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-soft); }

/* tool/quiz ページの装飾も */
.quiz-card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  box-shadow: none;
  border-radius: 0;
}
.quiz-option {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: var(--serif);
}
.quiz-option:hover { background: var(--bg-alt); border-color: var(--text); transform: none; }
.quiz-question { font-weight: 400; }

/* 共通フッター: シンプル化 */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--border-soft);
  margin-top: 96px;
  padding: 56px 0 32px;
}
.footer-col h4 { font-weight: 500; color: var(--text-soft); }
.footer-col a { font-weight: 400; }
.footer-bottom {
  border-top: none;
  color: var(--text-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* tagline の中の accent 強調も控えめに */
.hero .tagline,
.section-eyebrow {
  color: var(--text-soft);
}

/* 一覧系：細密グリッド（1px ヘアライン区切り） — 偉人グリッドは別扱い */
.articles-grid,
.entry-grid,
.pilgrimage-grid,
.composer-pieces-list,
.glossary-grid,
.piano-grid,
.personality-grid,
.country-stats {
  gap: 1px;
  background: var(--border-soft);
}

.articles-grid > *,
.entry-grid > *,
.pilgrimage-grid > *,
.composer-pieces-list > *,
.glossary-grid > *,
.piano-grid > *,
.personality-grid > *,
.country-stats > * {
  background: var(--bg);
}

.articles-grid .article-card,
.entry-grid .entry-card,
.pilgrimage-grid .pilgrimage-card,
.composer-pieces-list .composer-piece-item,
.glossary-grid .glossary-term,
.piano-grid .piano-spot,
.personality-grid .trait-card {
  border: none;
}

/* 偉人グリッド：余白を最優先（このサイトの呼吸） */
.composer-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 80px 40px;
  margin: 64px 0 96px;
  background: transparent;
}

.composer-index-grid .composer-index-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.composer-index-grid .composer-index-card:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
}

.composer-index-grid .composer-index-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  background: var(--bg-alt);
  margin-bottom: 20px;
  filter: grayscale(100%);
  transition: filter 0.6s ease, opacity 0.4s ease;
  opacity: 0.92;
}

.composer-index-grid .composer-index-card:hover .composer-index-photo {
  filter: grayscale(0%);
  opacity: 1;
}

.composer-index-grid .composer-index-info {
  padding: 0;
}

.composer-index-grid .composer-index-info h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}

.composer-index-grid .composer-index-info .dates {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.composer-index-grid .composer-index-info .tagline {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--text-muted);
  font-style: normal;
}

@media (max-width: 720px) {
  .composer-index-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 56px 24px;
    margin: 48px 0 72px;
  }
}

/* ナビ記事リンクを揃える */
.nav-link.active { color: var(--accent); }

/* 強調アクセント色は現代的な深いボルドー */
.accent { color: var(--accent); }

/* 既存の .compare-fill industry 内での白文字を ink に */
.compare-fill.industry { color: var(--text-muted) !important; }

/* timeline-card を薄く */
.timeline-card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
}
.timeline-event::before {
  background: var(--bg);
  border-color: var(--accent-soft);
  border-width: 1px;
  width: 8px;
  height: 8px;
}

/* concours / glossary cat ボタンも調整 */
.timeline-filter-btn,
.glossary-cat-btn,
.region-link {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.timeline-filter-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* concours / country card の整え */
.concours-card,
.country-card {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 56px 0;
  border-left: none;
  border-right: none;
  margin-bottom: 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: none;
}

.concours-card:last-of-type,
.country-card:last-of-type {
  border-bottom: 1px solid var(--border-soft);
}

/* 引き続き利用するアクセント要素は薄く */
.composer-meta span::after,
.composer-page-meta span::after,
.country-stat .l { color: var(--text-soft); }

/* 不要な飾り絵文字風記号を抑制 */
.composer-body h4::before,
.country-body h4::before,
.concours-body h4::before { content: ''; margin-right: 0; }
.composer-body h4,
.country-body h4,
.concours-body h4 {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  border: none;
}

/* 検索チップを淡く */
.filter-chip {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  font-weight: 400;
}
.filter-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

/* lookup の filter-sidebar 自体も */
.filter-sidebar {
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 0;
}

/* lookup の piece-card 詳細 */
.piece-card { padding: 28px 24px; }
.piece-card .composer { color: var(--text-soft); font-weight: 500; }
.piece-card .title { font-weight: 500; }

.diff-dot { background: var(--border); }
.diff-dot.filled { background: var(--text); }

.piece-tag { background: transparent; border: 1px solid var(--border-soft); }

/* concours-winner / works-cat li をシンプルに */
.concours-winner { background: transparent; border: 1px solid var(--border-soft); border-radius: 0; }

.works-cat li { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.works-cat li:last-child { border: none; }

/* personality-grid の trait-card は枠なし、文字で見せる */
.trait-card { padding: 28px 24px; border: none !important; }
.trait-card .label { letter-spacing: 0.24em; color: var(--text-soft); font-weight: 500; }
.trait-card .value { font-family: var(--serif); font-weight: 500; }

/* routine-list の縦線を細く、点を小さく */
.routine-list::before { width: 1px; background: var(--border); left: 4px; }
.routine-step::before {
  width: 7px; height: 7px; border-width: 1px;
  border-color: var(--accent-soft);
  background: var(--bg);
  left: -19px;
}
.routine-time { color: var(--text); font-weight: 500; min-width: 120px; }

/* glossary-term シンプル化 */
.glossary-term { padding: 24px 28px !important; border: none !important; }
.glossary-term dt { font-weight: 500; font-family: var(--serif); }
.glossary-term .reading { font-style: italic; color: var(--text-soft); font-weight: 400; letter-spacing: 0; }

/* article-card 内の category */
.article-card .category { color: var(--text-soft); font-weight: 500; letter-spacing: 0.24em; }
.article-card h3 { font-weight: 500; }
.article-card { padding: 36px 32px; }

/* entry-card 内の icon を単線に */
.entry-card .icon {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--text-soft);
  font-size: 1.2rem;
  margin-bottom: 24px;
  letter-spacing: 0.1em;
}
.entry-card { padding: 40px 32px; }
.entry-card h3 { font-weight: 500; }

/* 一律でセクション中央寄せの heading h2 を解除（各ページで個別に決める） */
.section-header { text-align: center; }

/* 全体: 細部調整 */
.summary-box {
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: 0;
}
.summary-box h4 { font-style: normal; font-weight: 500; }

.editorial-note {
  background: transparent;
  border-left: 1px solid var(--border);
  border-radius: 0;
}

/* hero-keys（イラスト的鍵盤）を薄く */
.hero-keys { opacity: 0.04; }

/* trait と work-cat の余白 */
.works-cat { margin-bottom: 40px; }
.works-cat h4 { padding-bottom: 12px; border-bottom: 1px solid var(--border); }

/* breadcrumb 縦余白 */
.breadcrumb { margin-bottom: 32px; }

/* =========================================================
   Composer Gallery — multiple images per composer
   ========================================================= */
.composer-gallery {
  margin: 64px 0;
}
.composer-gallery h2 { margin-bottom: 32px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border-soft);
}
.gallery-item {
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--bg-alt);
  display: block;
  filter: saturate(0.85);
  transition: filter var(--dur-base) var(--ease);
}
.gallery-item:hover img { filter: saturate(1); }
.gallery-caption {
  padding: 18px 20px 24px;
}
.gallery-caption h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: 0;
}
.gallery-caption .meta {
  font-size: 0.74rem;
  color: var(--text-soft);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.gallery-caption p {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 !important;
}

/* 期間別バイオの章立て */
.bio-chapter {
  margin: 64px 0;
}
.bio-chapter-label {
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: 500;
}
.bio-chapter h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 20px;
  letter-spacing: -0.005em;
}
.bio-chapter p { line-height: 2.0; }

/* 著名解釈・名演 */
.interpretations {
  margin: 64px 0;
  padding: 48px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.interpretations h2 { margin-top: 0 !important; padding-left: 0 !important; border: none !important; }
.interpretation-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.interpretation {
  padding: 24px 0;
}
.interpretation .pianist {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 4px;
}
.interpretation .work {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.interpretation .desc {
  font-size: 0.85rem;
  line-height: 1.85;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .interpretation-list { grid-template-columns: 1fr; }
}

/* =========================================================
   Glossary (rebuild) — 4-column with symbols & impressions
   ========================================================= */

.glossary-page { /* main wrapper */ }

.glossary-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 144px 32px 88px;
  text-align: left;
}

.glossary-hero .emotion-section-label {
  max-width: 720px;
}

.glossary-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 16px 0 24px;
  max-width: 720px;
}

.glossary-hero .lead {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 2.05;
  max-width: 540px;
}

.glossary-page .glossary-cats {
  max-width: 1080px;
  margin: 0 auto 128px;
  padding: 0 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  justify-content: flex-start;
}

.glossary-page .glossary-cat-btn {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.glossary-page .glossary-cat-btn:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

.glossary-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px 64px;
}

.glossary-page .glossary-section {
  margin-bottom: 128px;
  scroll-margin-top: 80px;
}

.glossary-page .glossary-section h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding-left: 0;
  border-left: none;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-soft);
}

/* 3 列グリッド（最大）。コンテナ幅で自動段組み */
.glossary-page .glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 88px 64px !important;
  background: transparent !important;
}

.glossary-page .glossary-term {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0 !important;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.glossary-page .glossary-term:hover {
  transform: none;
  border: none !important;
  background: transparent !important;
}

.glossary-page .glossary-term dt {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: 0;
  margin-bottom: 4px;
  line-height: 1.4;
}

.glossary-page .glossary-term .reading {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.glossary-page .glossary-term .symbol {
  font-family: 'Noto Serif JP', 'Times New Roman', serif;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 500;
  color: var(--text);
  margin: 4px 0 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 1.6em;
}

.glossary-page .glossary-term .impression {
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.85;
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 1px solid var(--border);
  font-feature-settings: 'palt' 1;
}

.glossary-page .glossary-term dd {
  font-size: 0.84rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0;
}

/* 用語アウトロ */
.glossary-outro {
  max-width: 720px;
  margin: 96px auto;
  padding: 96px 32px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.glossary-outro .lead {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 48px;
  letter-spacing: 0.02em;
  line-height: 1.7;
}

.glossary-outro-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.glossary-outro-links a {
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s;
}

.glossary-outro-links a:hover {
  color: var(--text);
}

/* 3 列 → 2 列（タブレット） */
@media (max-width: 1023px) {
  .glossary-page .glossary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 72px 48px !important;
  }
}

@media (max-width: 720px) {
  .glossary-hero { padding: 96px 24px 64px; }
  .glossary-page .glossary-cats {
    padding: 0 20px;
    margin-bottom: 80px;
    gap: 18px 24px;
  }
  .glossary-wrap { padding: 0 20px 48px; }
  .glossary-page .glossary-section { margin-bottom: 96px; }
  .glossary-page .glossary-section h2 {
    font-size: 1.2rem;
    margin-bottom: 40px;
    padding-bottom: 20px;
  }
  .glossary-page .glossary-grid {
    grid-template-columns: 1fr;
    gap: 56px 0 !important;
  }
  .glossary-page .glossary-term .symbol {
    font-size: 1.4rem;
  }
  .glossary-outro { padding: 64px 24px; margin: 48px auto; }
}


/* =========================================================
   Play — vertical piano (real keyboard layout)
   ========================================================= */

.play-stage {
  display: grid;
  grid-template-rows: auto 1fr;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  background: var(--bg);
  overflow: hidden;
}

.play-display {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px 24px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
  min-height: 240px;
  flex: 0 0 auto;
}

.play-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 14px;
}

.play-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
  gap: 8px;
}

.play-note-letter {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  display: inline-block;
  font-style: italic;
  min-width: 64px;
  min-height: 1em;
}

.play-note-letter.pulse {
  animation: play-note-pulse 0.7s ease-out;
}

@keyframes play-note-pulse {
  0%   { transform: scale(0.92); opacity: 0.5; }
  30%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.play-note-jp {
  font-size: 0.86rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  font-family: var(--serif);
}

.play-ripples {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}

.ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 1px solid var(--text);
  opacity: 0.45;
  animation: ripple-spread 1.4s ease-out forwards;
}

@keyframes ripple-spread {
  0%   { transform: scale(0.4); opacity: 0.5; }
  100% { transform: scale(7); opacity: 0; }
}

.play-controls {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.play-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.play-preset {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border-soft);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  font-family: inherit;
}

.play-preset:hover {
  color: var(--text);
  border-color: var(--text);
}

.play-preset[data-active="true"] {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.play-octave {
  display: flex;
  align-items: center;
  gap: 12px;
}

.play-octave button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s, background 0.2s;
}

.play-octave button:hover {
  border-color: var(--text);
  background: var(--bg-alt);
}

.play-octave span {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  min-width: 56px;
  text-align: center;
}

/* キーボード本体 — 白鍵レイアウト + 黒鍵を絶対配置で重ねる */
.play-keyboard {
  position: relative;
  background: var(--bg-alt);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  --black-width: 6.4%;   /* 白鍵 1 つの幅の約 60% */
  --black-height: 60%;   /* 鍵盤の高さに対して */
}

.play-whites {
  display: flex;
  height: 100%;
}

.play-blacks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--black-height);
  pointer-events: none;
}

.play-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  transition: background 0.4s ease;
}

/* 白鍵 */
.play-key.white {
  flex: 1 1 0;
  height: 100%;
  background: #fafaf8;
  color: var(--text);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0 0 28px;
}
.play-key.white:last-child { border-right: none; }
.play-key.white:hover { background: #f0efeb; }

/* 黒鍵 */
.play-key.black {
  position: absolute;
  top: 0;
  width: var(--black-width);
  height: 100%;
  background: #1a1a1a;
  color: #f5f5f7;
  pointer-events: auto;
  padding: 0 0 14px;
  z-index: 2;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
}
.play-key.black:hover { background: #2a2a2a; }

/* 押された瞬間 */
.play-key.white.hit {
  animation: key-hit-white 0.55s ease-out;
}
@keyframes key-hit-white {
  0%   { background: var(--text); color: var(--bg); }
  100% { background: #fafaf8; color: var(--text); }
}

.play-key.black.hit {
  animation: key-hit-black 0.55s ease-out;
}
@keyframes key-hit-black {
  0%   { background: #f5f5f7; color: #1a1a1a; }
  100% { background: #1a1a1a; color: #f5f5f7; }
}

.play-key-label {
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.play-key.black .play-key-label {
  font-size: 0.7rem;
  margin-bottom: 2px;
}

.play-key-meta {
  font-family: var(--serif);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  font-style: italic;
}

.play-key.black .play-key-meta {
  color: rgba(244, 243, 240, 0.45);
  font-size: 0.56rem;
}

@media (max-width: 720px) {
  /* スマホでは display を大きく取り、鍵盤を 1.4fr に押さえる（縦に長くなりすぎないように） */
  .play-stage {
    grid-template-rows: 1fr 1.35fr;
  }
  .play-display {
    padding: 24px 20px 20px;
    min-height: 0;
    justify-content: center;
  }
  .play-eyebrow { margin-bottom: 12px; font-size: 0.64rem; }
  .play-note { margin-bottom: 16px; gap: 6px; }
  .play-note-letter { font-size: clamp(3rem, 14vw, 4.5rem); }
  .play-note-jp { font-size: 0.78rem; }
  .play-controls { gap: 14px; }
  .play-presets { gap: 6px; }
  .play-preset { font-size: 0.66rem; padding: 4px 10px; letter-spacing: 0.06em; }
  .play-octave { gap: 8px; }
  .play-octave button { width: 24px; height: 24px; font-size: 0.85rem; }
  .play-octave span { font-size: 0.66rem; min-width: 44px; letter-spacing: 0.1em; }

  .play-keyboard {
    --black-width: 7%;
    --black-height: 58%;
  }
  .play-key.white { padding-bottom: 18px; }
  .play-key.black { padding-bottom: 10px; }
  .play-key-label { font-size: 0.78rem; }
  .play-key.black .play-key-label { font-size: 0.6rem; }
  .play-key-meta { font-size: 0.54rem; }
  .play-key.black .play-key-meta { display: none; }
}

/* =========================================================
   Piece card additions — context line + action links
   ========================================================= */

.piece-card .piece-context {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.7;
  letter-spacing: 0.02em;
  font-family: var(--serif);
}

.piece-card .piece-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 16px;
  padding-top: 14px;
}

.piece-card .piece-action {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
  font-family: var(--sans);
}

.piece-card .piece-action:hover {
  border-color: var(--text);
}

.piece-card .piece-action-yt {
  font-weight: 500;
}

@media (max-width: 720px) {
  .piece-card .piece-actions { gap: 10px 16px; }
  .piece-card .piece-action { font-size: 0.72rem; }
}

/* =========================================================
   Composer external links (YouTube / Wikipedia / IMSLP)
   ========================================================= */
.composer-external-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  justify-content: center;
  max-width: 720px;
  margin: 32px auto 0;
}

.composer-external-links a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  transition: border-color 0.2s, color 0.2s;
  font-family: var(--sans);
}

.composer-external-links a:hover {
  border-color: var(--text);
}

@media (max-width: 720px) {
  .composer-external-links { gap: 12px 20px; margin-top: 24px; }
  .composer-external-links a { font-size: 0.74rem; }
}

/* =========================================================
   Composer search & filter (composers.html)
   ========================================================= */
.composer-search {
  max-width: 720px;
  margin: 0 auto 64px;
  padding: 0 24px;
  text-align: center;
}

.composer-search input[type="search"] {
  width: 100%;
  max-width: 540px;
  padding: 14px 20px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  letter-spacing: 0.02em;
  text-align: center;
  transition: border-color 0.2s;
}

.composer-search input[type="search"]:focus {
  border-bottom-color: var(--text);
}

.composer-search input[type="search"]::placeholder {
  color: var(--text-soft);
}

.composer-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 28px 0 16px;
}

.composer-filter-chip {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--border-soft);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.composer-filter-chip:hover {
  color: var(--text);
  border-color: var(--text);
}

.composer-filter-chip[data-active="true"] {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}

.composer-search-count {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  margin-top: 12px;
}

@media (max-width: 720px) {
  .composer-search { margin-bottom: 48px; padding: 0 20px; }
  .composer-search input[type="search"] { font-size: 0.86rem; padding: 12px 16px; }
  .composer-filter-chips { gap: 6px; margin-top: 22px; }
  .composer-filter-chip { font-size: 0.68rem; padding: 5px 11px; }
}

/* =========================================================
   Mobile breathing room — 余白で語る（思い切って広く）
   ========================================================= */
@media (max-width: 720px) {
  /* TOP ヒーロー：呼吸する余白 */
  .atmosphere-hero {
    padding: 192px 28px 152px;
  }
  .atmosphere-hero .crest {
    margin-bottom: 88px;
  }
  .atmosphere-hero h1 {
    margin-bottom: 80px;
    line-height: 1.34;
  }
  .atmosphere-hero .lead {
    line-height: 2.2;
  }

  /* 8 つの感情カード：間で呼吸する */
  .emotion-section {
    padding: 160px 24px 200px;
  }
  .emotion-section-label {
    margin-bottom: 32px;
  }
  .emotion-section-title {
    margin-bottom: 32px;
    line-height: 1.4;
  }
  .emotion-section-help {
    margin-bottom: 120px;
    line-height: 2.15;
  }
  .emotion-grid {
    grid-template-columns: 1fr;
    gap: 96px !important;
  }
  .emotion-card {
    padding: 72px 36px 64px;
    min-height: 0;
  }
  .emotion-card .tone {
    margin-bottom: 36px;
  }
  .emotion-card h3 {
    font-size: 1.75rem;
    margin-bottom: 24px;
  }
  .emotion-card-sub {
    margin-bottom: 28px;
  }
  .emotion-card .desc {
    margin-bottom: 40px;
    line-height: 2.05;
  }

  /* もっと深く知る（drift） */
  .drift {
    padding: 160px 28px 200px;
  }
  .drift-label {
    margin-bottom: 80px;
  }
  .drift-link {
    padding: 48px 0;
  }
  .drift-link .title {
    font-size: 1.08rem;
    line-height: 1.55;
  }

  /* 作曲家ページの hero と本文 */
  .composer-page-hero {
    padding: 144px 28px 120px;
    margin-bottom: 112px;
  }
  .composer-photo {
    width: 180px;
    height: 224px;
    margin-bottom: 64px;
  }
  .composer-page-hero h1 {
    margin-bottom: 32px;
  }
  .composer-page-meta {
    margin-bottom: 40px;
  }
  .composer-external-links {
    gap: 20px 32px;
    margin-top: 40px;
  }
  .composer-page-body h2 {
    margin: 112px 0 36px;
  }
  .composer-page-body h3 {
    margin: 72px 0 20px;
  }
  .composer-page-body p {
    margin-bottom: 26px;
    line-height: 2.1;
  }

  /* 用語 */
  .glossary-hero {
    padding: 144px 28px 96px;
  }
  .glossary-page .glossary-cats {
    margin-bottom: 128px;
    gap: 28px 32px;
  }
  .glossary-page .glossary-section {
    margin-bottom: 160px;
  }
  .glossary-page .glossary-section h2 {
    margin-bottom: 56px;
    padding-bottom: 28px;
  }
  .glossary-page .glossary-grid {
    gap: 104px 0 !important;
  }
  .glossary-outro {
    padding: 128px 28px;
    margin: 112px auto;
  }

  /* 年表ヒーロー */
  .timeline-hero {
    padding: 144px 28px 112px;
  }
  .timeline-hero .lead {
    line-height: 2.1;
  }
  .timeline-event {
    padding-bottom: 88px;
  }
  .timeline-events {
    padding-left: 32px;
  }
  .timeline-era {
    padding: 80px 0 48px;
  }
  .timeline-era-header {
    margin: 0 -28px 64px;
    padding: 28px 28px 22px;
  }

  /* 共通：パンくず */
  .breadcrumb {
    margin-bottom: 56px;
  }

  /* 共通：セクションヘッダ */
  .section-header {
    margin-bottom: 56px !important;
  }
}

/* =========================================================
   Lookup mobile — collapsible filter groups
   ========================================================= */
@media (max-width: 720px) {
  .filter-sidebar {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .filter-toggle-all {
    width: 100%;
    text-align: right;
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    padding: 12px 0 24px;
    cursor: pointer;
    font-family: inherit;
  }
  .filter-toggle-all:hover { color: var(--text); }

  .filter-group {
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-soft) !important;
  }

  .filter-group h4.filter-group-toggle {
    margin: 0;
    padding: 18px 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.02em;
    transition: color 0.2s;
  }
  .filter-group h4.filter-group-toggle::after {
    content: '−';
    font-weight: 300;
    font-size: 1.2em;
    color: var(--text-soft);
    margin-left: 16px;
    transition: transform 0.2s, color 0.2s;
    line-height: 1;
  }
  .filter-group[data-collapsed="true"] h4.filter-group-toggle::after {
    content: '+';
  }
  .filter-group h4.filter-group-toggle:hover { color: var(--text); }
  .filter-group h4.filter-group-toggle:hover::after { color: var(--text); }

  /* 折りたたみ時：h4 以外を隠す */
  .filter-group[data-collapsed="true"] > *:not(h4) {
    display: none !important;
  }

  /* 開いているとき：内側に余白 */
  .filter-group:not([data-collapsed="true"]) > .filter-options,
  .filter-group:not([data-collapsed="true"]) > .filter-range {
    padding: 4px 0 22px;
  }

  /* クリアボタンを sticky で下に固定 */
  .filter-clear {
    margin-top: 28px !important;
    width: 100%;
    padding: 14px 0 !important;
  }

  /* 結果ヘッダー（並び順）も少し上に余白 */
  .results-header {
    margin-top: 32px !important;
  }
}

/* =========================================================
   Timeline mobile — sticky 章ヘッダーをコンパクトに
   ========================================================= */
@media (max-width: 720px) {
  /* sticky 時の高さを抑える：summary を非表示、タイトルを小さく */
  .era-summary {
    display: none;
  }
  .era-chapter {
    font-size: 0.62rem;
    margin-bottom: 4px;
    letter-spacing: 0.32em;
  }
  .era-title {
    font-size: 1.15rem !important;
    font-weight: 500;
    letter-spacing: 0;
  }
  .era-range {
    font-size: 0.78rem;
    margin-left: 12px !important;
  }
  .timeline-era-header {
    padding: 14px 28px 12px !important;
    margin: 0 -28px 48px !important;
  }
  /* イベント間も少し詰めて読みやすく */
  .timeline-event {
    padding-bottom: 64px;
  }
}

/* =========================================================
   Mobile breathing room — 最終バンプ（さらに広く）
   ========================================================= */
@media (max-width: 720px) {
  .atmosphere-hero {
    padding: 224px 28px 184px;
  }
  .atmosphere-hero .crest { margin-bottom: 104px; }
  .atmosphere-hero h1 {
    margin-bottom: 96px;
    line-height: 1.36;
  }
  .atmosphere-hero .lead { line-height: 2.25; }

  .emotion-section { padding: 192px 24px 224px; }
  .emotion-section-label { margin-bottom: 40px; }
  .emotion-section-title { margin-bottom: 40px; line-height: 1.4; }
  .emotion-section-help { margin-bottom: 144px; line-height: 2.2; }

  .emotion-grid { gap: 120px !important; }
  .emotion-card { padding: 88px 40px 80px; }
  .emotion-card .tone { margin-bottom: 44px; }
  .emotion-card h3 { font-size: 1.78rem; margin-bottom: 28px; }
  .emotion-card-sub { margin-bottom: 32px; }
  .emotion-card .desc { margin-bottom: 48px; line-height: 2.1; }

  .drift { padding: 192px 28px 224px; }
  .drift-label { margin-bottom: 96px; }
  .drift-link { padding: 56px 0; }

  .composer-page-hero { padding: 176px 28px 140px; margin-bottom: 128px; }
  .composer-photo { margin-bottom: 80px; }
  .composer-page-hero h1 { margin-bottom: 36px; }
  .composer-page-body h2 { margin: 128px 0 40px; }
  .composer-page-body h3 { margin: 80px 0 22px; }
  .composer-page-body p { line-height: 2.15; margin-bottom: 28px; }

  .glossary-hero { padding: 176px 28px 112px; }
  .glossary-page .glossary-cats { margin-bottom: 144px; gap: 32px 36px; }
  .glossary-page .glossary-section { margin-bottom: 192px; }
  .glossary-page .glossary-grid { gap: 120px 0 !important; }
  .glossary-outro { padding: 144px 28px; margin: 128px auto; }

  .timeline-hero { padding: 176px 28px 128px; }
  .timeline-event { padding-bottom: 96px; }

  .breadcrumb { margin-bottom: 64px; }

  /* 逆引きヒーロー */
  .lookup-layout {
    padding-top: 16px;
  }
  main.container .section-header {
    margin-bottom: 64px !important;
  }
}

/* =========================================================
   Structural marks — 線と枠で読みやすさを足す
   余白を尊重しつつ、たまに使って視線を定着させる
   ========================================================= */

/* セクション見出しに前線（細い水平線）を添える */
.emotion-section-label,
.drift-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 0;
}

.emotion-section-label::before,
.drift-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--text);
  margin-right: 18px;
  opacity: 0.55;
  vertical-align: middle;
}

/* 感情カードの音名「C」「D」を小さな鍵キャップ風の枠に */
.emotion-card .tone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--text);
  font-family: var(--serif);
  font-size: 0.86rem;
  letter-spacing: 0;
  color: var(--text);
  font-weight: 500;
}

/* drift link の番号を細い枠で囲む */
.drift-link .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--border);
  font-family: var(--serif);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  margin-right: 28px;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}

.drift-link:hover .num {
  border-color: var(--text);
  color: var(--text);
}

/* 年代ラベル（作曲家ページ）に後線 */
.bio-chapter-label {
  display: inline-flex;
  align-items: center;
}

.bio-chapter-label::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--text);
  margin-left: 16px;
  opacity: 0.55;
}

/* 作曲家ページ：基本情報メタを薄い罫線でくくる */
.composer-page-meta {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 24px;
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* 用語の記号を、薄い背景の枠で目立たせる */
.glossary-page .glossary-term .symbol {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--border-soft);
  background: var(--bg-alt);
  margin-bottom: 18px;
  min-height: auto;
  line-height: 1.2;
}

/* 用語の「印象」セクションは、枠ごと立てた縦線で意味づけ */
.glossary-page .glossary-term .impression {
  border-left: 2px solid var(--text);
  padding-left: 16px;
  font-style: normal;
}

/* 年表の年号にも小さな枠を */
.timeline-axis-year {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--text);
  background: var(--bg);
  font-size: 0.84rem;
}

/* 章ヘッダーの章番号に枠 */
.era-chapter {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  color: var(--text-soft);
}

/* セクション間に細い水平線（hero と emotion の間など） */
.atmosphere-hero {
  border-bottom: 1px solid var(--border-soft);
}

/* 引用ブロック（composer-quote）— 必要時に手動で使えるユーティリティ */
.composer-quote {
  border-left: 2px solid var(--text);
  padding: 12px 0 12px 24px;
  margin: 32px 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--text);
  letter-spacing: 0.005em;
}
.composer-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  font-style: normal;
}

/* モバイル：枠線・記号枠を少し小さく */
@media (max-width: 720px) {
  .emotion-card .tone {
    width: 36px;
    height: 36px;
    font-size: 0.82rem;
  }
  .drift-link .num {
    min-width: 32px;
    height: 28px;
    font-size: 0.7rem;
    margin-right: 20px;
  }
  .timeline-axis-year {
    padding: 3px 8px;
    font-size: 0.76rem;
  }
  .era-chapter {
    padding: 3px 8px;
    font-size: 0.6rem;
  }
  .glossary-page .glossary-term .symbol {
    padding: 10px 14px;
  }
  .composer-quote {
    padding-left: 18px;
    font-size: 1rem;
  }
}

/* =========================================================
   Nav backdrop (mobile drawer)
   ========================================================= */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 190;     /* header(100) より上、ドロワー(200) より下 */
}
.nav-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   Unified site footer
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: 96px 32px 48px;
  margin-top: 96px;
  background: var(--bg);
}

.site-footer .footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border-soft);
}

.site-footer .footer-brand .logo {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--text);
  font-weight: 500;
}

.site-footer .footer-brand .logo .accent {
  color: var(--accent);
}

.site-footer .footer-tagline {
  margin-top: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-soft);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  max-width: 360px;
  line-height: 1.7;
}

.site-footer .footer-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: right;
}

.site-footer .footer-nav a {
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  font-family: var(--serif);
  transition: color 0.2s, letter-spacing 0.2s;
}

.site-footer .footer-nav a:hover {
  color: var(--text);
  letter-spacing: 0.08em;
}

.site-footer .footer-meta {
  max-width: 1080px;
  margin: 32px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-soft);
}

.site-footer .footer-note {
  font-style: italic;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .site-footer {
    padding: 72px 24px 40px;
    margin-top: 72px;
  }
  .site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 40px;
  }
  .site-footer .footer-nav {
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px 28px;
  }
  .site-footer .footer-nav a {
    font-size: 0.86rem;
  }
  .site-footer .footer-meta {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    margin-top: 24px;
    font-size: 0.66rem;
  }
}

/* =========================================================
   Page title / section heading utility classes
   ========================================================= */

/* インライン style 撤廃用：基本のページタイトル */
.page-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.32;
  margin: 16px 0 24px;
  color: var(--text);
}

/* 大型のページタイトル（saved.html などの手紙的な見出し） */
.page-title.page-title-large {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin-bottom: 28px;
  line-height: 1.28;
}

/* セクション h2（旧：紫の左ボーダー付き）— モノクロでフラットに */
.page-section {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 64px 0 24px;
  padding: 0;
  border-left: none;
  color: var(--text);
}

/* セクションヘッダーのレイアウト */
.section-header.section-header-center {
  text-align: center;
  margin-bottom: 64px;
}
.section-header.section-header-left {
  text-align: left;
  margin-bottom: 32px;
}

@media (max-width: 720px) {
  .page-title { font-size: clamp(1.7rem, 7vw, 2rem); margin: 12px 0 18px; }
  .page-title.page-title-large { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .page-section { font-size: 1.16rem; margin: 48px 0 18px; }
  .section-header.section-header-center { margin-bottom: 48px; }
}

/* =========================================================
   Emotion grid — タブレット・大型スマホで 2 列 (481-720px)
   ========================================================= */
@media (min-width: 481px) and (max-width: 720px) {
  .emotion-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 56px 32px !important;
  }
  .emotion-card {
    padding: 56px 28px 48px !important;
    min-height: 280px;
  }
  .emotion-card h3 {
    font-size: 1.5rem !important;
  }
  .emotion-card .desc {
    font-size: 0.86rem !important;
    line-height: 1.95 !important;
    margin-bottom: 24px !important;
  }
  .emotion-card .tone {
    margin-bottom: 28px !important;
  }
  .emotion-card-sub {
    margin-bottom: 18px !important;
  }
}

/* TOC スタイルは下方の「作曲家ページ：左サイド固定 TOC」セクションに統一済み */

/* =========================================================
   Lookup keyword search input + empty states
   ========================================================= */
.lookup-keyword {
  margin: 0 0 48px;
}
.lookup-keyword input[type="search"] {
  width: 100%;
  max-width: 600px;
  padding: 16px 0;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  outline: none;
  letter-spacing: 0.02em;
  transition: border-color 0.2s;
}
.lookup-keyword input[type="search"]:focus {
  border-bottom-color: var(--text);
}
.lookup-keyword input[type="search"]::placeholder {
  color: var(--text-soft);
}

.composer-search-empty {
  text-align: center;
  padding: 96px 32px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  margin: 32px auto;
  max-width: 540px;
}
.composer-search-empty .empty-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 12px;
}
.composer-search-empty .empty-hint {
  font-size: 0.86rem;
  color: var(--text-soft);
  line-height: 1.85;
}

/* =========================================================
   play.html — 黒鍵に立体感、reduced-motion 配慮
   ========================================================= */
.play-key.black {
  background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 65%, #050505 100%);
  border-radius: 0 0 4px 4px;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.35),
    inset 0 -2px 4px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.play-key.white {
  background: linear-gradient(180deg, #ffffff 0%, #fafaf8 90%, #ededea 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.04);
}

@media (prefers-reduced-motion: reduce) {
  .play-key.hit { animation: none !important; }
  .ripple { animation: none !important; opacity: 0 !important; }
  .play-note-letter.pulse { animation: none !important; }
}

/* =========================================================
   保存ページの警告メッセージ
   ========================================================= */
.saved-notice {
  margin: 32px 0 64px;
  padding: 24px 28px;
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--text);
  background: var(--bg-alt);
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--text-muted);
}
.saved-notice strong {
  color: var(--text);
  font-weight: 500;
}

@media (max-width: 720px) {
  .lookup-keyword { margin-bottom: 32px; }
  .lookup-keyword input[type="search"] { font-size: 0.94rem; padding: 14px 0; }
  .composer-search-empty { padding: 64px 24px; margin: 24px auto; }
  .saved-notice { padding: 18px 20px; font-size: 0.82rem; margin: 24px 0 40px; }
}

/* =========================================================
   Composer profile readability — 大きく改善
   ========================================================= */

/* 本文：もっと「読み物」らしく */
.composer-page-body {
  max-width: 720px;
  margin: 0 auto;
}

.composer-page-body p {
  font-size: 1rem;
  line-height: 2.15;
  margin-bottom: 28px;
  color: var(--text);
}

.composer-page-body p strong {
  font-weight: 500;
  background: linear-gradient(transparent 60%, var(--bg-alt) 60%);
  padding: 0 2px;
}

/* h2：章タイトルを「本文と区別がつく塊」に。太字＋薄背景＋黒の左バー */
.composer-page-body h2 {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.45;
  margin: 144px 0 40px;
  padding: 26px 28px 26px 28px;
  background: var(--bg-alt);
  border-left: 4px solid var(--text);
  position: relative;
  color: var(--text);
}

.composer-page-body h2::before {
  content: none;
}

.composer-page-body h2 + p {
  font-size: 1.04rem;
  line-height: 2.05;
  color: var(--text);
  margin-bottom: 36px;
  margin-top: 0;
}

.composer-page-body h3 {
  margin: 64px 0 16px;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0;
}

.composer-page-body h3 + p {
  margin-top: 18px;
}

.composer-page-body h3-fallback {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* personality-grid：2 列で罫線で仕切る */
.composer-page-body .personality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 !important;
  margin: 32px 0 !important;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}

.composer-page-body .trait-card {
  padding: 28px 24px !important;
  border: none !important;
  border-right: 1px solid var(--border-soft) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.composer-page-body .trait-card .label {
  font-size: 0.66rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}

.composer-page-body .trait-card .value {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  margin: 4px 0 6px;
  line-height: 1.45;
}

.composer-page-body .trait-card .desc {
  font-size: 0.84rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin: 0;
}

/* routine-list */
.composer-page-body .routine-list {
  margin: 32px 0;
  border-top: 1px solid var(--border-soft);
}

.composer-page-body .routine-step {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: baseline;
}

.composer-page-body .routine-time {
  font-family: var(--serif);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--text);
  font-weight: 500;
}

.composer-page-body .routine-desc {
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--text-muted);
}

/* works-categories */
.composer-page-body .works-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin: 32px 0;
}

.composer-page-body .works-cat h4 {
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-transform: none !important;
}

.composer-page-body .works-cat h4::before {
  content: '';
  margin-right: 0;
}

.composer-page-body .works-cat ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.composer-page-body .works-cat li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border-soft) !important;
  font-size: 0.92rem;
  line-height: 1.65;
}

.composer-page-body .works-cat li:last-child {
  border-bottom: none !important;
}

.composer-page-body .works-cat li .num {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* composer-pieces-list */
.composer-page-body .composer-pieces-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 32px 0;
  border-top: 1px solid var(--border-soft);
}

.composer-page-body .composer-piece-item {
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text);
  transition: padding 0.2s, color 0.2s;
}

.composer-page-body .composer-piece-item:hover {
  padding-left: 12px;
}

.composer-page-body .composer-piece-item .piece-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

.composer-page-body .composer-piece-item .piece-note {
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text-muted);
}

/* pilgrimage-card */
.composer-page-body .pilgrimage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 32px 0;
  border-top: 1px solid var(--border-soft);
}

.composer-page-body .pilgrimage-card {
  padding: 28px 0;
  border-bottom: 1px solid var(--border-soft) !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

.composer-page-body .pilgrimage-card .pin {
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  color: var(--text-soft);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.composer-page-body .pilgrimage-card .place-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.composer-page-body .pilgrimage-card .place-loc {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-bottom: 12px;
  font-style: italic;
}

.composer-page-body .pilgrimage-card .place-desc {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.composer-page-body .pilgrimage-card .place-access {
  font-size: 0.8rem;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* composer-quote */
.composer-page-body .composer-quote {
  margin: 56px 0;
  padding: 24px 0 24px 32px;
  border-left: 1px solid var(--text);
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.95;
  color: var(--text);
  letter-spacing: 0.005em;
  font-style: normal;
}

.composer-page-body .composer-quote .source,
.composer-page-body .composer-quote cite {
  display: block;
  margin-top: 16px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  font-family: var(--sans);
  font-style: normal;
}

/* 関連作曲家・時代 */
.composer-page-body .related {
  margin: 64px 0 0;
  padding-top: 48px;
  border-top: 1px solid var(--border-soft);
}

.composer-page-body .related h3 {
  margin: 0 0 16px !important;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: none;
  color: var(--text-soft);
  font-family: var(--sans);
  font-weight: 500;
}

/* モバイル */
@media (max-width: 720px) {
  .composer-page-body p { font-size: 0.96rem; line-height: 2.1; margin-bottom: 22px; }
  .composer-page-body h2 + p { font-size: 1rem; line-height: 2.0; }

  .composer-page-body .personality-grid {
    grid-template-columns: 1fr !important;
    border-top: none;
    border-left: none;
  }
  .composer-page-body .trait-card {
    border-right: none !important;
    padding: 24px 0 !important;
  }

  .composer-page-body .routine-step {
    grid-template-columns: 100px 1fr;
    gap: 16px;
    padding: 14px 0;
  }
  .composer-page-body .routine-time { font-size: 0.8rem; }
  .composer-page-body .routine-desc { font-size: 0.88rem; }

  .composer-page-body .works-cat li {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    font-size: 0.86rem;
  }
  .composer-page-body .works-cat li .num { font-size: 0.78rem; }

  .composer-page-body .composer-quote {
    padding: 18px 0 18px 22px;
    font-size: 1.06rem;
    margin: 40px 0;
  }
}

/* =========================================================
   Piece detail modal (lookup page)
   ========================================================= */
.piece-card {
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.piece-card:hover {
  border-color: var(--text);
}

.piece-card .piece-action {
  position: relative;
  z-index: 2;
}

.piece-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
}

.piece-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.piece-modal {
  background: var(--bg);
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 48px 40px 40px;
  position: relative;
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  border: 1px solid var(--border-soft);
}

.piece-modal-backdrop.open .piece-modal {
  transform: translateY(0);
  opacity: 1;
}

.piece-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 1px solid var(--border);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}

.piece-modal-close:hover {
  border-color: var(--text);
  background: var(--bg-alt);
}

.piece-modal .modal-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 14px;
}

.piece-modal .modal-composer {
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  margin-bottom: 8px;
  font-family: var(--serif);
}

.piece-modal .modal-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 24px;
}

.piece-modal .modal-context {
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.piece-modal .modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin-bottom: 32px;
}

.piece-modal .modal-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.piece-modal .modal-row .label {
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.piece-modal .modal-row .value {
  font-family: var(--serif);
  font-size: 0.96rem;
  color: var(--text);
}

.piece-modal .modal-difficulty {
  display: flex;
  gap: 3px;
  align-items: center;
}

.piece-modal .modal-difficulty .diff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
}

.piece-modal .modal-difficulty .diff-dot.filled {
  background: var(--text);
}

.piece-modal .modal-tags-section {
  margin-bottom: 28px;
}

.piece-modal .modal-tags-section .label {
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 12px;
  display: block;
}

.piece-modal .modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.piece-modal .modal-chip {
  padding: 6px 14px;
  border: 1px solid var(--border-soft);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.piece-modal .modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
}

.piece-modal .modal-actions a {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  transition: border-color 0.2s;
}

.piece-modal .modal-actions a:hover {
  border-color: var(--text);
}

@media (max-width: 720px) {
  .piece-modal-backdrop { padding: 0; align-items: flex-end; }
  .piece-modal {
    padding: 40px 28px 32px;
    max-height: 88vh;
    border-bottom: none;
  }
  .piece-modal .modal-title { font-size: 1.35rem; margin-bottom: 20px; }
  .piece-modal .modal-grid { grid-template-columns: 1fr; gap: 20px; }
  .piece-modal-close { width: 32px; height: 32px; top: 12px; right: 12px; }
}


/* =========================================================
   外部リンク SVG アイコン共通スタイル
   ========================================================= */
.link-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  flex-shrink: 0;
}

.link-text {
  display: inline;
}

.link-arrow {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.86em;
  opacity: 0.7;
  transition: transform 0.2s, opacity 0.2s;
}

a:hover .link-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.composer-external-links a {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.piece-card .piece-action {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.piece-card .piece-action .link-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 6px;
}

.piece-modal .modal-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

@media (max-width: 720px) {
  .link-icon { width: 14px; height: 14px; margin-right: 6px; }
  .composer-external-links a { font-size: 0.78rem; }
  .piece-card .piece-action .link-icon { width: 12px; height: 12px; }
}

/* =========================================================
   太字 / 強調を読みやすく
   ========================================================= */
.composer-page-body p strong,
.composer-page-body li strong {
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.10) 62%);
  padding: 0 3px;
  letter-spacing: 0.005em;
  color: var(--text);
}

/* em（斜体強調）も控えめにスタイル */
.composer-page-body p em,
.composer-page-body li em {
  font-style: italic;
  font-family: var(--serif);
  color: var(--text);
  letter-spacing: 0.01em;
}

/* h2 直下のリード段落の strong は色も濃く */
.composer-page-body h2 + p strong {
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.14) 60%);
  font-weight: 600;
}

/* article 系（記事ページ）の bold も同じスタイル */
.article-body p strong {
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.10) 62%);
  padding: 0 3px;
}

/* =========================================================
   Section mark — ヒーローやセクション右側に置く章番号
   モノクロ・ミニマル・1023px 以下では非表示
   ========================================================= */
.section-mark {
  display: none;
}

@media (min-width: 1024px) {
  .atmosphere-hero,
  .emotion-section,
  .drift {
    position: relative;
  }

  .section-mark {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    position: absolute;
    right: 32px;
    top: 192px;
    text-align: right;
    user-select: none;
    pointer-events: none;
    max-width: none !important;
  }

  .atmosphere-hero .section-mark { top: 192px; }
  .emotion-section .section-mark { top: 144px; }
  .drift .section-mark { top: 144px; }

  .section-mark .mark-num {
    font-family: var(--serif);
    font-size: 4.2rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text);
    font-style: italic;
    line-height: 1;
    opacity: 0.85;
  }

  .section-mark .mark-line {
    display: block;
    width: 36px;
    height: 1px;
    background: var(--text);
    opacity: 0.55;
    margin: 6px 0 4px;
  }

  .section-mark .mark-label {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  .section-mark .mark-jp {
    font-family: var(--serif);
    font-size: 0.9rem;
    color: var(--text-soft);
    letter-spacing: 0.08em;
    font-style: italic;
  }
}

/* 大画面でずれないよう、コンテンツの max-width 制約を解除 */
@media (min-width: 1024px) {
  .atmosphere-hero > .section-mark,
  .emotion-section > .section-mark,
  .drift > .section-mark {
    max-width: none !important;
  }
}

/* =========================================================
   セクション見出しの統一強化（記事 / ページ全般）
   ========================================================= */

/* page-section（lookup・concours・countries 等のページ h2） */
.page-section {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.45;
  margin: 96px 0 32px;
  padding: 22px 24px;
  background: var(--bg-alt);
  border-left: 4px solid var(--text);
  border-bottom: none;
}

/* 記事ページ h2 — 同じパターンで統一 */
.article-body h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.45;
  margin: 96px 0 32px;
  padding: 24px 28px;
  background: var(--bg-alt);
  border-left: 4px solid var(--text);
  border-bottom: none;
}

.article-body h2 + p {
  margin-top: 0;
  font-size: 1.02rem;
  line-height: 2.05;
}

/* article 系 h3 */
.article-body h3 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 600;
  margin: 64px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0;
}

/* 国別ページ・コンクールページなど他の本文 h2 */
.country-body h2,
.concours-body h2,
.composer-body h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.45;
  margin: 80px 0 28px;
  padding: 22px 24px;
  background: var(--bg-alt);
  border-left: 4px solid var(--text);
  border-bottom: none;
}

@media (max-width: 720px) {
  .composer-page-body h2 {
    font-size: 1.28rem !important;
    margin: 96px 0 28px !important;
    padding: 20px 20px !important;
    border-left-width: 3px !important;
  }
  .composer-page-body h3 {
    font-size: 1.04rem !important;
    margin: 48px 0 14px !important;
  }
  .page-section,
  .article-body h2,
  .country-body h2,
  .concours-body h2,
  .composer-body h2 {
    font-size: 1.22rem !important;
    margin: 80px 0 24px !important;
    padding: 18px 20px !important;
    border-left-width: 3px !important;
  }
  .article-body h3 {
    font-size: 1.04rem !important;
    margin: 48px 0 14px !important;
  }
}

/* =========================================================
   モバイル：TOP ヒーローの上余白を詰める（スカスカ対策）
   ========================================================= */
@media (max-width: 720px) {
  .atmosphere-hero {
    padding: 112px 28px 144px !important;
  }
  .atmosphere-hero .crest {
    margin-bottom: 56px !important;
  }
  .atmosphere-hero h1 {
    margin-bottom: 56px !important;
    line-height: 1.32 !important;
  }
  .atmosphere-hero .lead {
    line-height: 2.1 !important;
  }
}

/* =========================================================
   モバイルドロワー：閉じるボタン
   ========================================================= */
.drawer-close {
  display: none;
}

@media (max-width: 720px) {
  .drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text);
    z-index: 1;
    transition: border-color 0.2s, background 0.2s;
  }
  .drawer-close:hover {
    border-color: var(--text);
    background: var(--bg-alt);
  }
  /* drawer 上部にスペースを確保 */
  .nav {
    padding-top: 64px !important;
  }
}

/* =========================================================
   作曲家ページ：もっと余白を（最終バンプ）
   ========================================================= */

/* デスクトップ */
@media (min-width: 721px) {
  .composer-page-hero {
    padding: 160px 32px 128px !important;
    margin-bottom: 144px !important;
  }
  .composer-photo {
    margin-bottom: 72px !important;
  }
  .composer-page-hero h1 {
    margin-bottom: 32px !important;
  }
  .composer-page-meta {
    margin-bottom: 40px !important;
  }
  .composer-external-links {
    margin-top: 48px !important;
    gap: 24px 36px !important;
  }

  /* 本文 */
  .composer-page-body p {
    line-height: 2.2 !important;
    margin-bottom: 32px !important;
  }

  /* 章タイトルの上余白を大きく */
  .composer-page-body h2 {
    margin: 168px 0 48px !important;
    padding: 32px 32px !important;
  }
  .composer-page-body h2 + p {
    margin-top: 0 !important;
    line-height: 2.15 !important;
    margin-bottom: 40px !important;
  }

  /* サブ見出し h3 */
  .composer-page-body h3 {
    margin: 88px 0 22px !important;
    padding-bottom: 14px !important;
  }

  /* personality-grid */
  .composer-page-body .personality-grid {
    margin: 48px 0 !important;
  }
  .composer-page-body .trait-card {
    padding: 36px 32px !important;
  }

  /* routine-list */
  .composer-page-body .routine-list {
    margin: 48px 0 !important;
  }
  .composer-page-body .routine-step {
    padding: 22px 0 !important;
  }

  /* works-categories */
  .composer-page-body .works-categories {
    gap: 64px !important;
    margin: 48px 0 !important;
  }
  .composer-page-body .works-cat li {
    padding: 14px 0 !important;
  }

  /* composer-pieces-list */
  .composer-page-body .composer-pieces-list {
    margin: 48px 0 !important;
  }
  .composer-page-body .composer-piece-item {
    padding: 32px 0 !important;
  }

  /* pilgrimage */
  .composer-page-body .pilgrimage-grid {
    margin: 48px 0 !important;
  }
  .composer-page-body .pilgrimage-card {
    padding: 36px 0 !important;
  }

  /* composer-quote */
  .composer-page-body .composer-quote {
    margin: 80px 0 !important;
    padding: 32px 0 32px 40px !important;
  }

  /* related */
  .composer-page-body .related {
    margin: 96px 0 0 !important;
    padding-top: 64px !important;
  }
}

/* モバイル */
@media (max-width: 720px) {
  .composer-page-hero {
    padding: 144px 28px 112px !important;
    margin-bottom: 112px !important;
  }
  .composer-photo {
    margin-bottom: 56px !important;
  }
  .composer-page-hero h1 {
    margin-bottom: 28px !important;
  }
  .composer-external-links {
    margin-top: 36px !important;
    gap: 18px 28px !important;
  }

  .composer-page-body p {
    line-height: 2.15 !important;
    margin-bottom: 26px !important;
  }

  .composer-page-body h2 {
    margin: 112px 0 32px !important;
    padding: 22px 20px !important;
  }
  .composer-page-body h3 {
    margin: 64px 0 18px !important;
  }

  .composer-page-body .personality-grid {
    margin: 36px 0 !important;
  }
  .composer-page-body .trait-card {
    padding: 28px 0 !important;
  }

  .composer-page-body .routine-list {
    margin: 36px 0 !important;
  }
  .composer-page-body .routine-step {
    padding: 18px 0 !important;
  }

  .composer-page-body .works-categories {
    gap: 48px !important;
    margin: 36px 0 !important;
  }

  .composer-page-body .composer-pieces-list {
    margin: 36px 0 !important;
  }
  .composer-page-body .composer-piece-item {
    padding: 26px 0 !important;
  }

  .composer-page-body .pilgrimage-grid {
    margin: 36px 0 !important;
  }
  .composer-page-body .pilgrimage-card {
    padding: 28px 0 !important;
  }

  .composer-page-body .composer-quote {
    margin: 56px 0 !important;
    padding: 24px 0 24px 24px !important;
  }

  .composer-page-body .related {
    margin: 72px 0 0 !important;
    padding-top: 48px !important;
  }
}

/* =========================================================
   タイポグラフィ：全体的に少し小さく、行頭の改行も整える
   ========================================================= */
.atmosphere-hero h1 {
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.012em !important;
  /* 「す。」が孤立して改行されないようにフレーズ単位で折る */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.atmosphere-hero h1 br {
  /* 行末の break は維持しつつ、続く語が中途半端に折れないように */
}

.emotion-section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
  letter-spacing: -0.005em;
}

.emotion-card h3 {
  font-size: 1.95rem !important;
}

@media (max-width: 720px) {
  .atmosphere-hero h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem) !important;
    line-height: 1.4 !important;
  }
  .emotion-card h3 {
    font-size: 1.55rem !important;
  }
  .emotion-section-title {
    font-size: 1.4rem !important;
  }
}

/* drift-link のタイトルを少しおとなしく */
.drift-link .title {
  font-size: 1.12rem !important;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .drift-link .title {
    font-size: 1rem !important;
  }
}

/* 作曲家ページ h2 を少し控えめに */
.composer-page-body h2 {
  font-size: 1.4rem !important;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  .composer-page-body h2 {
    font-size: 1.18rem !important;
  }
}

/* 記事 h2 / page-section も */
.article-body h2,
.country-body h2,
.concours-body h2,
.composer-body h2,
.page-section {
  font-size: 1.3rem !important;
}
@media (max-width: 720px) {
  .article-body h2,
  .country-body h2,
  .concours-body h2,
  .composer-body h2,
  .page-section {
    font-size: 1.14rem !important;
  }
}

/* =========================================================
   線と四角：もっと白黒の構造を増やす
   ========================================================= */

/* drift-label にも前線（emotion-section-label と同じ） */
.drift-label::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--text);
  margin-right: 18px;
  opacity: 0.55;
  vertical-align: middle;
}

/* 各セクション間の区切り線（モバイルで強化） */
.emotion-section {
  border-top: 1px solid var(--border-soft);
}
.drift {
  border-top: 1px solid var(--border-soft);
}

/* drift-link の番号の枠を、ホバー時に黒で塗りつぶし */
.drift-link:hover .num {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* 作曲家グリッドのカードに薄い枠 */
.composer-index-card {
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
  transition: padding-top 0.2s ease, color 0.2s ease;
}
.composer-index-card:hover {
  padding-top: 8px;
  border-top-color: var(--text);
}

/* =========================================================
   タップで色が変わる（音色のような瞬間的な印象）
   ========================================================= */

/* 共通：tap-color クラスで一瞬だけ色が変わる */
.tap-flash {
  position: relative;
  transition: background 0.5s ease, color 0.4s ease, border-color 0.4s ease;
}

/* emotion-card：トーンごとの淡い色 */
.emotion-card[data-tone] { transition: background 0.6s ease; }
.emotion-card[data-tone="do"].tone-flash    { background: #f0e8d4; }
.emotion-card[data-tone="re"].tone-flash    { background: #ece9d2; }
.emotion-card[data-tone="mi"].tone-flash    { background: #e0e8d8; }
.emotion-card[data-tone="fa"].tone-flash    { background: #ecdfd6; }
.emotion-card[data-tone="sol"].tone-flash   { background: #d8e0e8; }
.emotion-card[data-tone="la"].tone-flash    { background: #e0d8e6; }
.emotion-card[data-tone="si"].tone-flash    { background: #ecd8d8; }
.emotion-card[data-tone="do-h"].tone-flash  { background: #f0e0d8; }

/* :active でも瞬間的に：すぐに反応する */
.emotion-card:active { background: var(--bg-alt); }

/* drift-link / composer-index-card / piece-card：タップ時にうっすら反転 */
.drift-link:active,
.composer-index-card:active,
.piece-card:active,
.composer-piece-item:active,
.composer-external-links a:active {
  background: var(--bg-alt);
  transition: background 0s;
}

/* tone（音名）の枠：タップ時に黒地白文字に */
.emotion-card.tone-flash .tone {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* drift-link タップ時に番号枠も反転 */
.drift-link:active .num {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* =========================================================
   本文テキストを少し小さく（見出しはそのまま）
   ========================================================= */

/* 作曲家ページ本文 */
.composer-page-body p {
  font-size: 0.94rem !important;
  line-height: 2.0 !important;
}
.composer-page-body h2 + p {
  font-size: 0.96rem !important;
  line-height: 1.95 !important;
}

/* 記事ページ本文 */
.article-body p {
  font-size: 0.94rem !important;
  line-height: 2.0 !important;
}
.article-body h2 + p {
  font-size: 0.96rem !important;
}

/* 国別・コンクール・作曲家系の本文 */
.country-body p,
.concours-body p,
.composer-body p {
  font-size: 0.94rem !important;
  line-height: 2.0 !important;
}

/* リード段落 */
.atmosphere-hero .lead,
.timeline-hero .lead,
.glossary-hero .lead,
.timeline-outro .lead,
.glossary-outro .lead {
  font-size: 0.96rem !important;
  line-height: 2.05 !important;
}

/* 見出し直下の routine-desc / piece-note などの説明文 */
.composer-page-body .routine-desc,
.composer-page-body .composer-piece-item .piece-note,
.composer-page-body .pilgrimage-card .place-desc,
.composer-page-body .trait-card .desc {
  font-size: 0.84rem !important;
  line-height: 1.85 !important;
}

@media (max-width: 720px) {
  .composer-page-body p,
  .article-body p,
  .country-body p,
  .concours-body p,
  .composer-body p {
    font-size: 0.9rem !important;
    line-height: 1.95 !important;
  }
  .composer-page-body h2 + p,
  .article-body h2 + p {
    font-size: 0.92rem !important;
  }
  .atmosphere-hero .lead,
  .timeline-hero .lead,
  .glossary-hero .lead {
    font-size: 0.92rem !important;
  }
  .composer-page-body .routine-desc,
  .composer-page-body .composer-piece-item .piece-note,
  .composer-page-body .pilgrimage-card .place-desc,
  .composer-page-body .trait-card .desc {
    font-size: 0.82rem !important;
  }
}

/* =========================================================
   人となりの trait-card と H2 box：余白を確保
   ========================================================= */

/* H2「人となり」などの背景ボックス内に余白を確保 */
@media (min-width: 721px) {
  .composer-page-body h2,
  .article-body h2,
  .country-body h2,
  .concours-body h2,
  .composer-body h2,
  .page-section {
    padding: 30px 36px !important;
  }
}

@media (max-width: 720px) {
  .composer-page-body h2,
  .article-body h2,
  .country-body h2,
  .concours-body h2,
  .composer-body h2,
  .page-section {
    padding: 22px 26px !important;
  }
}

/* trait-card：背景がついていた時代の名残を完全に消す + 内側に余白 */
.composer-page-body .trait-card,
.composer-page-body .personality-grid > .trait-card {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 721px) {
  .composer-page-body .trait-card {
    padding: 36px 36px !important;
  }
}

@media (max-width: 720px) {
  /* モバイルでは横にも余白を入れて、文字が縁に張りつかないように */
  .composer-page-body .trait-card {
    padding: 28px 24px !important;
  }
  .composer-page-body .personality-grid {
    /* 1 列でも左右に枠線を出さず、純粋に hairline で区切る */
    border: none !important;
    margin: 32px -24px !important;     /* container padding を埋めて画面幅近くまで */
  }
  .composer-page-body .personality-grid .trait-card {
    border-right: none !important;
    border-bottom: 1px solid var(--border-soft) !important;
    padding: 28px 24px !important;
  }
  .composer-page-body .personality-grid .trait-card:last-child {
    border-bottom: none !important;
  }
}

/* H2 直後の段落とのリズムも整える */
.composer-page-body h2 + p {
  margin-top: 8px !important;
}

/* H2 box の内側でテキストは少しブリージング */
.composer-page-body h2 {
  line-height: 1.5 !important;
}

/* =========================================================
   研ぎ澄ます：見出しを「新聞の章」風にリファイン
   - bg-alt の塊感を捨てて、太い水平線＋自動章番号＋太字タイトル
   ========================================================= */

/* CSS カウンター：composer / article / general 用に独立 */
.composer-page-body { counter-reset: chap-c; }
.article-body { counter-reset: chap-a; }

/* h2：bg を抜いて、上に 1px 黒線 + 章番号 eyebrow + 大きな太字タイトル */
.composer-page-body h2,
.article-body h2,
.country-body h2,
.concours-body h2,
.composer-body h2 {
  background: transparent !important;
  border-left: none !important;
  border-top: 1px solid var(--text) !important;
  border-bottom: none !important;
  padding: 32px 0 0 !important;
  margin: 144px 0 32px !important;
  position: relative;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

/* page-section（lookup や countries 等）も同じパターン */
.page-section {
  background: transparent !important;
  border-left: none !important;
  border-top: 1px solid var(--text) !important;
  border-bottom: none !important;
  padding: 32px 0 0 !important;
  margin: 96px 0 32px !important;
  font-family: var(--serif);
  font-weight: 600;
}

/* 章番号 eyebrow を ::before で自動採番 */
.composer-page-body h2 { counter-increment: chap-c; }
.article-body h2 { counter-increment: chap-a; }

.composer-page-body h2::before,
.article-body h2::before {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  color: var(--text-soft);
  font-weight: 500;
  margin-bottom: 14px;
  font-style: normal;
}

.composer-page-body h2::before {
  content: counter(chap-c, decimal-leading-zero);
}
.article-body h2::before {
  content: counter(chap-a, decimal-leading-zero);
}

/* h3：上に短い水平線 + 太字 */
.composer-page-body h3,
.article-body h3 {
  position: relative;
  padding-top: 18px !important;
  border-bottom: none !important;
  margin: 80px 0 16px !important;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: 0;
}

.composer-page-body h3::before,
.article-body h3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 1px;
  background: var(--text);
}

/* 本文の strong（太字）をもう一段研ぎ澄ます */
.composer-page-body p strong,
.article-body p strong,
.composer-page-body li strong,
.article-body li strong {
  font-weight: 700 !important;
  background: linear-gradient(180deg, transparent 64%, rgba(0,0,0,0.08) 64%) !important;
  padding: 0 2px !important;
  letter-spacing: 0 !important;
  color: var(--text);
}

/* タグ・カテゴリの小さなラベル（用途別ですべて統一） */
.composer-page-body .trait-card .label,
.composer-page-body .pilgrimage-card .pin,
.composer-page-body .works-cat h4 {
  font-family: var(--sans) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.36em !important;
  text-transform: uppercase !important;
  color: var(--text-soft) !important;
  font-weight: 500 !important;
  border: none !important;
  padding-bottom: 0 !important;
}

/* trait-card / pilgrimage / pieces：罫線だけで仕切る */
.composer-page-body .trait-card .value,
.composer-page-body .pilgrimage-card .place-name,
.composer-page-body .composer-piece-item .piece-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* 引用ブロック：太い左バーで「金言」を強調 */
.composer-page-body .composer-quote {
  border-left: 3px solid var(--text) !important;
  font-weight: 500;
  font-style: normal;
  padding: 16px 0 16px 28px !important;
  margin: 64px 0 !important;
  background: transparent;
}

/* drift-link の番号枠：通常時もしっかり見える */
.drift-link .num {
  font-weight: 500 !important;
  color: var(--text) !important;
}

/* drift-link のタイトル：太字 + シャープ */
.drift-link .title {
  font-weight: 500 !important;
  letter-spacing: -0.005em;
}

/* 章番号を h2 のないモバイルでも詰まらないように */
@media (max-width: 720px) {
  .composer-page-body h2,
  .article-body h2,
  .country-body h2,
  .concours-body h2,
  .composer-body h2,
  .page-section {
    padding: 26px 0 0 !important;
    margin: 112px 0 28px !important;
  }
  .composer-page-body h2::before,
  .article-body h2::before {
    margin-bottom: 12px;
    font-size: 0.62rem;
  }
  .composer-page-body h3,
  .article-body h3 {
    margin: 60px 0 14px !important;
    padding-top: 14px !important;
  }
}

/* =========================================================
   drift セクション：section-mark とリストの重なり問題を解消
   ========================================================= */
@media (min-width: 1024px) {
  /* drift だけ section-mark を小さく、上に貼り付ける */
  .drift .section-mark {
    top: 96px;            /* セクション padding-top(160) 上で完結 */
    gap: 8px;
  }
  .drift .section-mark .mark-num {
    font-size: 2.6rem;    /* 4.2 → 2.6rem に縮小 */
  }
  .drift .section-mark .mark-line {
    width: 24px;
  }
  .drift .section-mark .mark-label {
    font-size: 0.62rem;
  }
  .drift .section-mark .mark-jp {
    font-size: 0.78rem;
  }

  /* リスト全体を section-mark の下から始める */
  .drift .drift-links {
    margin-top: 32px;
  }
  /* 「もっと深く知る」の下にも十分な空間を */
  .drift .drift-label {
    margin-bottom: 64px;
  }

  /* atmosphere-hero / emotion-section の section-mark もコンパクト化（統一感） */
  .atmosphere-hero .section-mark .mark-num,
  .emotion-section .section-mark .mark-num {
    font-size: 3.2rem;
  }
  .atmosphere-hero .section-mark,
  .emotion-section .section-mark {
    gap: 10px;
  }
}

/* =========================================================
   モバイルでも 01 / 02 / 03 章マークを表示（インライン形式）
   ========================================================= */
@media (max-width: 1023px) {
  .section-mark {
    display: flex !important;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    position: static !important;
    transform: none !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    text-align: left !important;
    pointer-events: auto;
    max-width: none !important;
    background: transparent;
  }
  .section-mark .mark-num {
    font-family: var(--serif);
    font-size: 1.2rem !important;
    font-style: italic;
    color: var(--text);
    line-height: 1;
    opacity: 1;
  }
  .section-mark .mark-line {
    display: inline-block;
    width: 18px !important;
    height: 1px;
    background: var(--text);
    opacity: 0.55;
    margin: 0;
  }
  .section-mark .mark-label {
    font-family: var(--sans);
    font-size: 0.62rem !important;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-soft);
  }
  .section-mark .mark-jp {
    font-family: var(--serif);
    font-size: 0.78rem !important;
    font-style: italic;
    color: var(--text-soft);
    letter-spacing: 0.06em;
  }
}

/* =========================================================
   作曲家ページ：楽譜風のリファイン（章番号を Roman に、書体を整える）
   ========================================================= */

/* 章番号を「I. / II. / III.」のローマ字風に（楽譜の楽章記譜風） */
.composer-page-body h2::before {
  content: counter(chap-c, upper-roman) ".";
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--text-soft) !important;
  margin-bottom: 16px !important;
}

/* article は journalistic に「01 / 02 / 03」のまま（用途で書き分け） */

/* h1（作曲家名）のサイズ／余白調整 */
.composer-page-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* h3 を本文との対比をしっかり */
.composer-page-body h3 {
  font-size: 1.18rem !important;
  font-weight: 600;
}

/* h2 直下のリード段落を本文より少し大きくして章導入感を演出 */
.composer-page-body h2 + p {
  font-size: 1.02rem !important;
  line-height: 2.05 !important;
  color: var(--text);
  font-weight: 400;
}

/* trait-card / pilgrimage / pieces：value（主要見出し）を大きく */
.composer-page-body .trait-card .value,
.composer-page-body .pilgrimage-card .place-name,
.composer-page-body .composer-piece-item .piece-title {
  font-size: 1.08rem !important;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.5;
}

/* 楽譜風の小さな「ト音記号」をヒーローに置く（控えめ） */
.composer-page-hero {
  position: relative;
}
.composer-page-hero::before {
  content: '𝄞';
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
  color: var(--text);
  opacity: 0.45;
  pointer-events: none;
}

/* 楽譜の薄い 5 線（小節線として）を h2 の上に */
.composer-page-body h2 {
  border-top: 1px solid var(--text) !important;
  position: relative;
}
.composer-page-body h2::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 8px;
  height: 24px;
  background: var(--text);
  /* 楽譜の冒頭の縦バー（「∥」風）を表現 */
  /* 別案：薄い縦線を 4 本 → 五線譜にしたい場合は box-shadow */
  display: none;  /* デフォは非表示 — 冗長になるので削る */
}

@media (max-width: 720px) {
  .composer-page-hero h1 {
    font-size: clamp(1.7rem, 6.5vw, 2.2rem) !important;
  }
  .composer-page-body h3 {
    font-size: 1.05rem !important;
  }
  .composer-page-body h2 + p {
    font-size: 0.96rem !important;
    line-height: 1.95 !important;
  }
  .composer-page-body .trait-card .value,
  .composer-page-body .pilgrimage-card .place-name,
  .composer-page-body .composer-piece-item .piece-title {
    font-size: 1rem !important;
  }
  .composer-page-hero::before {
    top: 24px;
    font-size: 1.3rem;
  }
}

/* =========================================================
   モバイル：作曲家ヒーローの写真を小さく、余白を増やす
   ========================================================= */
@media (max-width: 720px) {
  .composer-photo {
    width: 130px !important;
    height: 162px !important;
    margin: 0 auto 64px !important;
  }
  .composer-page-hero {
    padding: 112px 28px 88px !important;
  }
}

@media (max-width: 480px) {
  .composer-photo {
    width: 116px !important;
    height: 144px !important;
    margin-bottom: 56px !important;
  }
}

/* =========================================================
   もっと深く知る（drift）：項目バランスを整える
   ========================================================= */

/* 全体のリズムを少し詰めて、番号と題名のバランスを整える */
.drift-link {
  padding: 36px 0 !important;
  align-items: center;
}

/* 番号枠：少し小さく、タイポも控えめに */
.drift-link .num {
  min-width: 36px !important;
  height: 30px !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
  font-weight: 400 !important;
  color: var(--text-soft) !important;
  border-color: var(--border) !important;
  margin-right: 32px !important;
}

/* タイトル：セリフでもう少し大人しく、行間も整える */
.drift-link .title {
  font-family: var(--serif) !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  color: var(--text);
}

/* 矢印は控えめに */
.drift-link .arrow {
  font-size: 0.9rem !important;
  opacity: 0.5;
}
.drift-link:hover .arrow {
  opacity: 1;
}

/* drift ラベル → リストの距離 */
@media (min-width: 1024px) {
  .drift .drift-label {
    margin-bottom: 88px !important;
  }
}

/* モバイル */
@media (max-width: 720px) {
  .drift-link {
    padding: 28px 0 !important;
  }
  .drift-link .num {
    min-width: 30px !important;
    height: 26px !important;
    font-size: 0.66rem !important;
    margin-right: 22px !important;
  }
  .drift-link .title {
    font-size: 0.96rem !important;
  }
}

/* =========================================================
   作曲家グリッドのカード間隔を広く
   ========================================================= */
.composer-index-grid {
  gap: 80px 32px !important;
}

@media (max-width: 1023px) {
  .composer-index-grid {
    gap: 64px 24px !important;
  }
}

@media (max-width: 720px) {
  .composer-index-grid {
    gap: 56px 0 !important;
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ページ BGM の再生ボタン
   ========================================================= */
.page-music-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
  padding: 0;
  font-family: inherit;
}

.page-music-btn:hover {
  border-color: var(--text);
  transform: scale(1.05);
}

.page-music-btn.playing {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.page-music-btn.playing:hover {
  background: #2a2a2a;
}

@media (max-width: 720px) {
  .page-music-btn {
    bottom: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
  }
}

/* play.html / intro.html では非表示 */
.play-stage ~ .page-music-btn,
.intro-stage ~ .page-music-btn {
  display: none !important;
}

/* =========================================================
   Accent（セピア）の戦略的な使い方
   ========================================================= */

/* リンクのホバー：見やすく */
a:hover {
  color: var(--accent);
}

.nav-link:hover,
.footer-nav a:hover,
.timeline-links a:hover,
.composer-external-links a:hover,
.piece-action:hover,
.drift-link:hover .title {
  color: var(--accent) !important;
}

.composer-external-links a:hover,
.piece-card .piece-action:hover,
.timeline-links a:hover {
  border-bottom-color: var(--accent) !important;
}

/* drift-link：ホバー時に番号枠もセピアに */
.drift-link:hover .num {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: var(--accent) !important;
}

/* drift-link active 時のタイトルもセピア */
.drift-link:hover .arrow {
  color: var(--accent) !important;
}

/* BGM 再生ボタン：再生中はセピアに */
.page-music-btn.playing {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg) !important;
}

/* 強調テキスト：マーカー色をセピアに */
.composer-page-body p strong,
.composer-page-body li strong,
.article-body p strong,
.article-body li strong {
  background: linear-gradient(180deg, transparent 64%, rgba(30, 58, 138, 0.18) 64%) !important;
  color: var(--text);
}

.composer-page-body h2 + p strong {
  background: linear-gradient(180deg, transparent 60%, rgba(30, 58, 138, 0.24) 60%) !important;
}

/* 引用ブロック：左バーをセピアに */
.composer-page-body .composer-quote {
  border-left-color: var(--accent) !important;
}

/* 章番号 (h2 の I. / II.)：セピアで「古い本」感 */
.composer-page-body h2::before {
  color: var(--accent) !important;
  opacity: 0.85;
}

/* article は journalistic な番号「01」もセピアで */
.article-body h2::before {
  color: var(--accent) !important;
  opacity: 0.7;
}

/* 感情カードの音名「C/D/E…」枠：ホバーでセピア線 */
.emotion-card:hover .tone {
  border-color: var(--accent);
  color: var(--accent);
}

/* ホバー時、感情カード自体に淡いセピアの線を */
.emotion-card:hover {
  outline: 1px solid var(--accent-soft);
  outline-offset: -8px;
}

/* 「今、聴いている」マークはセピアで */
[data-theme="dark"] {
  /* ダークモード時のアクセントを微調整 */
  --accent: #C99368;
  --accent-soft: rgba(201, 147, 104, 0.4);
  --accent-bg: rgba(201, 147, 104, 0.1);
}

/* 章マーク（01/02/03）の数字もうっすらセピアに */
.section-mark .mark-num {
  color: var(--text);
}

/* タップ時のセピア反応（小さな確認） */
.composer-index-card:active,
.piece-card:active,
.drift-link:active,
.composer-piece-item:active {
  border-color: var(--accent) !important;
}

/* 入力フィールドのフォーカス */
input:focus,
input[type="search"]:focus,
input[type="range"]:focus {
  border-color: var(--accent) !important;
  outline: none;
}

/* 積極的に押すボタン（active state）にセピア下線 */
.composer-filter-chip[data-active="true"],
.play-preset[data-active="true"],
.timeline-filter-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg) !important;
}

/* =========================================================
   作曲家ページのタブナビ
   ========================================================= */
.composer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  max-width: 720px;
  margin: 0 auto 64px !important;
  padding: 0 0 0 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 64px;
  z-index: 8;
  background: var(--bg);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.composer-tabs::-webkit-scrollbar { display: none; }

.composer-tab {
  background: transparent;
  border: none;
  padding: 16px 18px;
  font-family: var(--serif);
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--text-soft);
  cursor: pointer;
  letter-spacing: 0;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  position: relative;
  border-bottom: 2px solid transparent;
}

.composer-tab:hover {
  color: var(--text);
}

.composer-tab.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* TOC は復活（左サイド固定）— display スタイルは下方で定義 */

/* セクション間の余白を、タブ前提に調整 */
.composer-section {
  padding-top: 16px;
}

@media (max-width: 720px) {
  .composer-tabs {
    top: 56px;
    margin: 0 -28px 48px !important;
    padding: 0 28px;
    border-radius: 0;
  }
  .composer-tab {
    padding: 14px 14px;
    font-size: 0.88rem;
  }
}

/* =========================================================
   外部リンクを「外部で深掘り」枠としてまとめる
   ========================================================= */
.composer-external-links {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 24px 0 22px !important;
  margin: 40px auto 0 !important;
  max-width: 720px !important;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px !important;
  justify-content: center;
}

.composer-external-links::before {
  content: '外部で深掘り';
  display: block;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 16px;
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.composer-external-links a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  font-family: var(--sans);
}

@media (max-width: 720px) {
  .composer-external-links {
    margin: 32px -28px 0 !important;
    padding: 22px 28px 20px !important;
    gap: 14px 24px !important;
  }
  .composer-external-links::before {
    font-size: 0.58rem;
  }
  .composer-external-links a {
    font-size: 0.78rem;
  }
}

/* =========================================================
   ピアニスト名鑑のグリッド
   ========================================================= */
.pianists-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 64px 40px;
  max-width: 1200px;
  margin: 64px auto 96px;
  padding: 0 32px;
}

.pianist-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pianist-photo-wrap {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  overflow: hidden;
}

.pianist-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(100%);
  opacity: 0.92;
  transition: filter 0.5s ease, opacity 0.3s ease;
}

.pianist-card:hover .pianist-photo {
  filter: grayscale(0%);
  opacity: 1;
}

.pianist-photo.placeholder {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--text-soft);
  font-style: italic;
  filter: none;
  opacity: 1;
}

.pianist-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pianist-info h3 {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text);
  line-height: 1.4;
}

.pianist-en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  margin-top: -2px;
}

.pianist-meta {
  font-size: 0.74rem;
  color: var(--text-soft);
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.pianist-tagline {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 8px 0 0;
}

.pianist-bio {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.85;
  margin: 4px 0 0;
}

.pianist-links {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.pianist-links a {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}

.pianist-links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 720px) {
  .pianists-grid {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 0 24px;
    margin: 48px auto 64px;
  }
  .pianist-info h3 {
    font-size: 1.08rem;
  }
  .pianist-photo.placeholder {
    font-size: 3rem;
  }
}

@media (min-width: 721px) and (max-width: 1023px) {
  .pianists-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   作曲家グリッド：間隔をもう少し広く + スマホ 2 列
   ========================================================= */
.composer-index-grid {
  gap: 96px 48px !important;
}

@media (min-width: 1024px) {
  .composer-index-grid {
    gap: 112px 48px !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (min-width: 721px) and (max-width: 1023px) {
  .composer-index-grid {
    gap: 80px 32px !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 720px) {
  .composer-index-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 16px !important;
  }
  .composer-index-card .composer-index-info h3 {
    font-size: 0.95rem;
  }
  .composer-index-card .dates {
    font-size: 0.7rem;
  }
  .composer-index-card .tagline {
    font-size: 0.78rem;
    line-height: 1.6;
  }
}

/* =========================================================
   play.html の黒鍵と白鍵のあいだの隙間問題を解消
   ========================================================= */
.play-key.black {
  /* 下の浮き影を取り去って、黒鍵がそのまま埋まっているように */
  box-shadow:
    inset 0 -2px 4px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  /* ぐらでーしょんを少し延ばして、下端がふんわり溶ける */
  background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 50%, #0c0c0c 92%, #050505 100%) !important;
}

/* 黒鍵の高さも 60% → 64% にして、白鍵への落ち着きを良く */
.play-keyboard {
  --black-height: 64% !important;
}

@media (max-width: 720px) {
  .play-keyboard {
    --black-height: 62% !important;
  }
}

/* =========================================================
   作曲家ページ：代表曲リストの ▶ 再生ボタン
   ========================================================= */
.composer-piece-item.with-play {
  display: flex !important;
  align-items: center;
  gap: 0;
  padding-left: 0 !important;
}

.composer-piece-item.with-play:hover {
  padding-left: 0 !important;  /* hover の左スライドを無効化 */
}

.composer-piece-item.with-play > div,
.composer-piece-item.with-play > .piece-title,
.composer-piece-item.with-play > .piece-note {
  flex: 1;
}

.piece-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  margin-right: 24px;
  flex-shrink: 0;
  color: var(--text);
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
  padding: 0;
  font-family: inherit;
  /* SVG の paddingLeft 補正で見た目を中心に */
}

.piece-play svg {
  margin-left: 2px;
}

.piece-play:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  transform: scale(1.06);
}

.piece-play.playing {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  .piece-play {
    width: 32px;
    height: 32px;
    margin-right: 16px;
  }
}

/* 曲別音源が見つかった ▶ ボタンは枠を黒に */
.piece-play.has-audio {
  border-color: var(--text);
}

/* =========================================================
   作曲家のつながりページ
   ========================================================= */
.connections-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 144px 32px 88px;
  text-align: left;
}

.connections-hero .emotion-section-label {
  max-width: 720px;
}

.connections-hero h1 {
  max-width: 720px;
  margin: 16px 0 24px;
  line-height: 1.3;
}

.connections-hero .lead {
  max-width: 540px;
  font-size: 1rem;
  line-height: 2.05;
  color: var(--text-muted);
}

.connections-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px 64px;
}

.lineage {
  border-top: 1px solid var(--border-soft);
  padding: 80px 0;
  position: relative;
}

.lineage:last-child {
  border-bottom: 1px solid var(--border-soft);
}

.lineage-num {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.4em;
  color: var(--text-soft);
  font-style: italic;
  margin-bottom: 12px;
}

.lineage-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.4;
  margin: 0 0 20px;
  color: var(--text);
}

.lineage-desc {
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 2.0;
  max-width: 640px;
  margin-bottom: 48px;
}

.lineage-graph {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}

.lineage-node {
  flex: 1 1 140px;
  min-width: 140px;
  max-width: 200px;
  padding: 20px 16px;
  border: 1px solid var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--serif);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.2s, color 0.2s;
}

.lineage-node a {
  color: var(--text);
  text-decoration: none;
  display: block;
}

.lineage-node:hover {
  background: var(--text);
}
.lineage-node:hover a {
  color: var(--bg);
}

.lineage-node .years {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  font-weight: 400;
  margin-top: 4px;
  font-style: italic;
}

.lineage-node:hover .years {
  color: rgba(255, 255, 255, 0.6);
}

.lineage-node-ref {
  border-style: dashed;
  font-style: italic;
  color: var(--text-soft);
}

.lineage-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--text-soft);
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 80px;
}

.lineage-break {
  flex-basis: 100%;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--text-soft);
  letter-spacing: 0.12em;
  padding: 16px 0;
  position: relative;
}

.lineage-break::before,
.lineage-break::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--text-soft);
  vertical-align: middle;
  margin: 0 12px;
  opacity: 0.5;
}

/* アウトロ */
.connections-outro {
  max-width: 720px;
  margin: 96px auto;
  padding: 96px 32px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
}

.connections-outro .lead {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 48px;
  letter-spacing: 0.02em;
}

.connections-outro-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.connections-outro-links a {
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s;
}

.connections-outro-links a:hover {
  color: var(--text);
}

@media (max-width: 720px) {
  .connections-hero {
    padding: 96px 24px 64px;
  }
  .lineage {
    padding: 56px 0;
  }
  .lineage-title {
    font-size: 1.28rem;
  }
  .lineage-desc {
    font-size: 0.9rem;
    line-height: 1.9;
    margin-bottom: 32px;
  }
  .lineage-graph {
    flex-direction: column;
    gap: 0;
  }
  .lineage-node {
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: 18px 16px;
    font-size: 0.86rem;
  }
  .lineage-arrow {
    min-width: 0;
    padding: 12px 0;
    transform: rotate(90deg);
  }
  .connections-wrap {
    padding: 0 24px 48px;
  }
  .connections-outro {
    padding: 64px 24px;
    margin: 48px auto;
  }
}

/* ===== モーダル内の音源プレイヤー ===== */
.modal-audio {
  margin: 20px 0 24px;
  padding: 18px 20px 16px;
  background: var(--bg-soft, #f5f5f7);
  border: 1px solid var(--border, #e5e5e8);
  border-radius: 6px;
}
.modal-audio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--text-soft, #6b6e78);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.modal-audio-player {
  width: 100%;
  height: 36px;
  display: block;
  /* モノクロ寄せ（Chromium 系のみ効くが、他は無視されるだけで害は無い） */
  filter: grayscale(1) contrast(0.92) brightness(0.96);
}
.modal-audio-player:focus { outline: 2px solid var(--text, #2a2a2a); outline-offset: 2px; }
.modal-audio-credit {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--text-soft, #6b6e78);
  letter-spacing: 0.02em;
}

/* 検索結果カード上の "音源あり" バッジ（カード右上コーナー） */
.piece-card { position: relative; }
.piece-audio-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 8px;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--accent, #1E3A8A);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}
.piece-card.has-audio { box-shadow: inset 0 0 0 1px var(--accent, #1E3A8A); }
.piece-audio-badge svg { display: block; }

/* フィルタサイドバー：音源あり チップ */
.filter-group-audio { padding-bottom: 4px; }
.filter-chip-audio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--border, #e5e5e8);
  border-radius: 999px;
  color: var(--text-soft, #6b6e78);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.filter-chip-audio:hover {
  border-color: var(--accent, #1E3A8A);
  color: var(--accent, #1E3A8A);
}
.filter-chip-audio.active {
  background: var(--accent, #1E3A8A);
  border-color: var(--accent, #1E3A8A);
  color: #fff;
}
.filter-chip-audio svg { display: block; }

@media (max-width: 720px) {
  .modal-audio { padding: 14px 14px 12px; margin: 16px 0 20px; }
  .modal-audio-player { height: 32px; }
  .piece-audio-badge { top: 10px; right: 10px; font-size: 0.58rem; padding: 2px 8px 2px 7px; gap: 4px; }
}

/* ===== 今日の作曲家 (index) ===== */
.today-composer {
  position: relative;
  max-width: 880px;
  margin: 96px auto 32px;
  padding: 0 24px;
  text-align: center;
}
.today-composer-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6e78);
  margin-bottom: 14px;
}
.today-composer-heading {
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  color: var(--text, #2a2a2a);
}
.today-composer-help {
  color: var(--text-muted, #6b6e78);
  font-size: 0.86rem;
  margin: 0 0 36px;
}
.today-composer-card {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px 36px 32px 40px;
  border: 1px solid var(--border, #e5e5e8);
  border-radius: 6px;
  background: var(--bg-soft, #f5f5f7);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  max-width: 720px;
  margin: 0 auto;
}
/* 左端に navy の縦アクセント線 */
.today-composer-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  background: var(--accent, #1E3A8A);
}
/* 右上角に navy 小さい四角 */
.today-composer-card::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 18px;
  height: 18px;
  background: var(--accent, #1E3A8A);
  transition: transform 0.25s ease;
}
.today-composer-card:hover {
  border-color: var(--accent, #1E3A8A);
  background: #fff;
  transform: translateY(-3px);
}
.today-composer-card:hover::after {
  transform: scale(1.15) rotate(45deg);
}
.today-composer-photo-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-soft-2, #efe9da);
  flex-shrink: 0;
}
.today-composer-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.5);
  transition: filter 0.35s ease;
}
.today-composer-card:hover .today-composer-photo {
  filter: grayscale(0) sepia(0);
}
.today-composer-photo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--serif, serif);
  font-size: 4rem;
  color: var(--text-soft, #a8a8b0);
}
.today-composer-dates {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--text-soft, #6b6e78);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.today-composer-name {
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--text, #2a2a2a);
}
.today-composer-tagline {
  color: var(--text-muted, #3f424b);
  font-size: 0.92rem;
  line-height: 1.85;
  margin: 0 0 18px;
}
.today-composer-cta {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-soft, #6b6e78);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.today-composer-card:hover .today-composer-cta {
  color: var(--text, #2a2a2a);
}

@media (max-width: 720px) {
  .today-composer { margin: 56px auto 24px; padding: 0 16px; }
  .today-composer-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
    text-align: center;
  }
  .today-composer-photo-wrap {
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }
}

/* ===== 音符モチーフ装飾（hero エリア） ===== */
/* JS が hero に <div class="hero-notes"> を注入し、その中に SVG 音符を散らす */
.hero-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  /* hero テキスト等は z-index: 1 以上にすれば上に来る */
}
.hero-note {
  position: absolute;
  color: var(--text-soft, #a8a8b0);
  opacity: 0;
  animation: hero-note-float 14s ease-in-out infinite;
}
.hero-note svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes hero-note-float {
  0%   { transform: translateY(20px) rotate(-6deg); opacity: 0; }
  20%  { opacity: 0.18; }
  50%  { transform: translateY(-30px) rotate(4deg); opacity: 0.22; }
  80%  { opacity: 0.14; }
  100% { transform: translateY(-60px) rotate(-2deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-note { animation: none; opacity: 0.18; }
}
.hero-relative { position: relative; }

/* ===== 作曲家ページ：左サイド固定 TOC ===== */
.composer-toc {
  position: fixed;
  top: 96px;
  left: 16px;
  z-index: 20;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-width: thin;
}
.composer-toc::-webkit-scrollbar { width: 4px; }
.composer-toc::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }
.composer-toc-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 16px 12px;
  background: rgba(244, 240, 231, 0.78);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid var(--border-soft, #e5e5e8);
  border-radius: 4px;
  box-shadow: 0 8px 32px -14px rgba(0,0,0,0.18);
  min-width: 180px;
}
.composer-toc-label {
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6e78);
  padding: 2px 8px 8px;
  border-bottom: 1px solid var(--border-soft, #e5e5e8);
}
.composer-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.composer-toc-link {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--text-soft, #6b6e78);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  line-height: 1.45;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.composer-toc-num {
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: 0.66rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-soft, #a8a8b0);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}
.composer-toc-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.composer-toc-link:hover {
  color: var(--text, #2a2a2a);
  background: rgba(30, 58, 138, 0.07);
}
.composer-toc-link:hover .composer-toc-num { color: var(--text, #2a2a2a); }
.composer-toc-link.active {
  color: var(--text, #2a2a2a);
  border-left-color: var(--text, #2a2a2a);
  font-weight: 500;
  background: rgba(0,0,0,0.025);
}
.composer-toc-link.active .composer-toc-num {
  color: var(--text, #2a2a2a);
  font-weight: 500;
}

@media (max-width: 1380px) {
  .composer-toc { left: 8px; }
  .composer-toc-inner { min-width: 160px; padding: 14px 10px; }
  .composer-toc-link { font-size: 0.72rem; padding: 5px 8px 5px 6px; gap: 6px; }
  .composer-toc-text { max-width: 130px; }
  .composer-toc-num { font-size: 0.6rem; }
}
@media (max-width: 1100px) {
  .composer-toc { display: none; }
}

/* ===== Editorial: 共通タイポ品質 ===== */
h1, h2, h3, .sec-h, .composer-page-name, .page-title {
  text-wrap: balance;
  hanging-punctuation: allow-end;
}
.phrase {
  display: inline-block;
  word-break: keep-all;
}

/* ===== Editorial: 作曲家ヒーロー トップルール ===== */
.composer-hero-wrap .composer-hero-rule {
  max-width: 1100px;
  margin: 0 auto 36px;
  padding: 0 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans, "Inter", "Noto Sans JP", sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6e78);
  border-bottom: 1px solid var(--accent, #1e3a8a);
  position: relative;
  z-index: 1;
}
.composer-hero-rule .chr-left { color: var(--accent, #1e3a8a); font-weight: 700; }
.composer-hero-rule .chr-center {
  font-style: italic;
  font-weight: 500;
  color: var(--text, #2a2a2a);
  letter-spacing: 0.22em;
}
.composer-hero-rule .chr-right {
  color: var(--accent, #1e3a8a);
  font-family: var(--serif, "Noto Serif JP", serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.16em;
}
@media (max-width: 720px) {
  .composer-hero-wrap .composer-hero-rule {
    font-size: 0.54rem;
    letter-spacing: 0.24em;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .composer-hero-rule .chr-center { flex-basis: 100%; order: -1; margin-bottom: 4px; }
}

/* ===== Editorial: プル・クォート（composer-quote 再設計） ===== */
.composer-main-wide .composer-page-body > .composer-quote {
  max-width: 760px;
  margin: 56px auto 56px;
  padding: 28px 32px 28px 36px;
  border-left: 4px solid var(--text, #2a2a2a);
  background: var(--bg-soft, #f5f5f7);
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: 1.15rem;
  line-height: 1.95;
  color: var(--text, #2a2a2a);
  font-style: italic;
  position: relative;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.08);
}
.composer-main-wide .composer-page-body > .composer-quote::before {
  content: "“";
  position: absolute;
  top: -8px;
  left: 18px;
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: 4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  color: var(--accent, #1e3a8a);
  opacity: 0.55;
}
.composer-main-wide .composer-page-body > .composer-quote .source {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--text-soft, #6b6e78);
  text-transform: uppercase;
}

/* ===== 作曲家ページ：HP 風レイアウト ===== */
.composer-main-wide {
  width: 100%;
  padding: 0;
}
.composer-main-wide > .breadcrumb {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px max(24px, 5vw) 0;
}

.composer-hero-wrap {
  position: relative;
  padding: 64px max(24px, 5vw) 80px;
  background:
    radial-gradient(ellipse at top right, rgba(30, 58, 138, 0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-soft, #f5f5f7) 0%, var(--bg, #fafafb) 100%);
  border-bottom: 1px solid var(--border-soft, #e5e5e8);
  margin: 16px 0 72px;
  overflow: hidden;
}
/* hero 背後に巨大な薄い CHAPTER ワードマーク */
.composer-hero-wrap::after {
  content: "CHAPTER";
  position: absolute;
  right: -2vw;
  bottom: -4vw;
  font-family: var(--serif, "Noto Serif JP", serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(120px, 18vw, 240px);
  color: rgba(30, 58, 138, 0.045);
  letter-spacing: -0.02em;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
/* hero 左上の小さな navy 角アクセント */
.composer-hero-wrap::before {
  content: "";
  position: absolute;
  left: max(24px, 5vw);
  top: 32px;
  width: 36px;
  height: 2px;
  background: var(--accent, #1E3A8A);
  z-index: 1;
}
.composer-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.composer-hero-photo-wrap {
  position: relative;
  width: 280px;
  height: 360px;
  border-radius: 4px;
  overflow: visible;
  background: var(--bg-card, #f5f5f7);
}
.composer-hero-photo-wrap > img,
.composer-hero-photo-wrap > .composer-page-portrait {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.composer-hero-photo-wrap > img {
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.18), 0 4px 12px -4px rgba(0,0,0,0.12);
}
/* 写真右下に小さな navy 角アクセント（HaneruTo の btn--mark::before パターン） */
.composer-hero-photo-wrap::before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 28px;
  height: 28px;
  background: var(--accent, #1E3A8A);
  z-index: 0;
}
/* 写真左上に小さな番号ラベル "FIG. 24" 風キャプション */
.composer-hero-photo-wrap .photo-fignum {
  position: absolute;
  left: -10px;
  top: -10px;
  z-index: 3;
  background: var(--text, #0E0E12);
  color: #fff;
  padding: 4px 9px 4px 10px;
  font-family: var(--sans, sans-serif);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-left: 3px solid var(--accent, #1E3A8A);
}
.composer-hero-photo-wrap .photo-fignum-num {
  font-family: var(--serif, serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 4px;
  font-size: 0.74rem;
  color: var(--accent, #6B8AFC);
}
.composer-hero-photo-wrap .composer-photo {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  display: block !important;
  box-shadow: none !important;
  filter: grayscale(0.15);
  transition: filter 0.5s ease, transform 0.8s ease;
}
.composer-hero-wrap:hover .composer-photo {
  filter: grayscale(0) sepia(0);
  transform: scale(1.02);
}
.composer-hero-photo-wrap .composer-page-portrait {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  font-size: 6rem;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 70%),
    var(--bg-card, #f5f5f7);
}

.composer-hero-info { text-align: left; min-width: 0; }
.composer-hero-info .composer-page-meta {
  justify-content: flex-start;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.composer-hero-info .composer-page-name {
  text-align: left;
  font-family: var(--serif, "Noto Serif JP", serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 22px;
}
.composer-hero-info .composer-page-tagline {
  text-align: left;
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-muted, #3f424b);
  margin: 0 0 36px;
  max-width: 540px;
}
.composer-hero-info .composer-external-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

/* 本文は中央の読みやすい幅に */
.composer-main-wide .composer-page-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 max(24px, 5vw);
}
.composer-main-wide .composer-page-body > h2,
.composer-main-wide .composer-page-body > h3,
.composer-main-wide .composer-page-body > p,
.composer-main-wide .composer-page-body > blockquote,
.composer-main-wide .composer-page-body > .composer-quote,
.composer-main-wide .composer-page-body > .composer-section-intro,
.composer-main-wide .composer-page-body > ul,
.composer-main-wide .composer-page-body > ol {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* グリッド/リスト系は全幅で */
.composer-main-wide .composer-page-body > .personality-grid,
.composer-main-wide .composer-page-body > .routine-list,
.composer-main-wide .composer-page-body > .composer-repertoire,
.composer-main-wide .composer-page-body > .pilgrimage-list,
.composer-main-wide .composer-page-body > .composer-photo-row,
.composer-main-wide .composer-page-body > .composer-cta,
.composer-main-wide .composer-page-body > .related {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.composer-main-wide .composer-page-body > .personality-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 28px 0 36px;
}
.composer-main-wide .composer-page-body > .routine-list {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* 作曲家ページのつながりセクションを wide レイアウトに馴染ませる */
.composer-main-wide .composer-connections {
  margin: 96px auto 48px;
  max-width: 1100px;
  padding: 0 max(24px, 5vw);
}

@media (max-width: 880px) {
  .composer-hero-wrap {
    padding: 40px 20px 56px;
    margin-bottom: 48px;
  }
  .composer-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .composer-hero-photo-wrap {
    width: 180px;
    height: 230px;
    margin: 0 auto;
  }
  .composer-hero-photo-wrap .composer-page-portrait { font-size: 4rem; }
  .composer-hero-info { text-align: center; }
  .composer-hero-info .composer-page-meta { justify-content: center; }
  .composer-hero-info .composer-page-name { text-align: center; }
  .composer-hero-info .composer-page-tagline { text-align: center; margin-left: auto; margin-right: auto; }
  .composer-hero-info .composer-external-links { justify-content: center; }
}

/* ===== 作曲家ページ内：つながりセクション ===== */
.composer-connections {
  margin: 80px auto 32px;
  padding: 0 24px;
  max-width: 880px;
}
.cc-wrap {
  position: relative;
  padding: 56px 0 24px;
  border-top: 1px solid var(--border, #e5e5e8);
}
.cc-eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6e78);
  margin-bottom: 10px;
}
.cc-title {
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  color: var(--text, #2a2a2a);
}
.cc-lead {
  color: var(--text-muted, #3f424b);
  font-size: 0.92rem;
  line-height: 1.85;
  max-width: 640px;
  margin: 0 0 36px;
}

.cc-lineage {
  position: relative;
  padding: 28px 28px 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border, #e5e5e8);
  border-radius: 4px;
  background: var(--bg-soft, #f5f5f7);
}
.cc-lineage-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}
.cc-lineage-num {
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-soft, #6b6e78);
  letter-spacing: 0.05em;
  min-width: 2em;
}
.cc-lineage-title {
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  color: var(--text, #2a2a2a);
}
.cc-lineage-desc {
  color: var(--text-muted, #3f424b);
  font-size: 0.86rem;
  line-height: 1.85;
  margin: 6px 0 22px;
}

/* チェーン：横並び（モバイルでは縦） */
.cc-chain {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.cc-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 16px;
  min-width: 110px;
  border: 1px solid var(--border, #e5e5e8);
  border-radius: 4px;
  background: #fff;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cc-node-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text, #2a2a2a);
}
.cc-node-link:hover {
  color: var(--accent, #6b6e78);
}
.cc-node-name {
  font-family: var(--serif, "Noto Serif JP", serif);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: block;
}
.cc-node-years {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-soft, #6b6e78);
  margin-top: 2px;
  display: block;
}
.cc-node.is-me {
  background: var(--text, #2a2a2a);
  border-color: var(--text, #2a2a2a);
}
.cc-node.is-me .cc-node-name { color: #fff; }
.cc-node.is-me .cc-node-years { color: rgba(255,255,255,0.6); }

.cc-edge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  flex: 0 0 auto;
  align-self: center;
}
.cc-edge-line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--text-soft, #a8a8b0);
}
.cc-edge-label {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--text-soft, #6b6e78);
  white-space: nowrap;
}

.cc-outro {
  margin-top: 32px;
  text-align: right;
}
.cc-more {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--text-soft, #6b6e78);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.18s ease;
}
.cc-more:hover { color: var(--text, #2a2a2a); }

@media (max-width: 720px) {
  .composer-connections { margin: 56px auto 24px; padding: 0 16px; }
  .cc-wrap { padding: 36px 0 16px; }
  .cc-lineage { padding: 20px 18px 18px; }
  .cc-chain {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .cc-node {
    width: 100%;
    min-width: 0;
  }
  .cc-edge {
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
  }
  .cc-edge-line {
    width: 1px;
    height: 14px;
  }
}