/* Market Mood Lab shared CSS for Hatena header */
.mml-blog-report {
  color: #14213d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic Medium", メイリオ, sans-serif;
  line-height: 1.7;
}
.mml-blog-report * {
  box-sizing: border-box;
}
.mml-shell {
  max-width: 840px;
  margin: 0 auto;
  padding: 16px;
}
.mml-header,
.mml-score-card,
.mml-section {
  background: #ffffff;
  border: 1px solid #d9e2f2;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
}
.mml-eyebrow {
  margin: 0 0 6px;
  color: #44618e;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mml-header h1,
.mml-section h2 {
  margin: 0 0 8px;
}
.mml-header h1 {
  font-size: 1.7rem;
}
.mml-lead,
.mml-band-description,
.mml-interpretation,
.mml-indicator-detail,
.mml-indicator-interpretation,
.mml-disclaimer p {
  margin: 0;
  color: #33415c;
}
.mml-score-card {
  background: linear-gradient(180deg, #f7fbff 0%, #eef4ff 100%);
}
.mml-score-main {
  text-align: center;
  margin-bottom: 18px;
}
.mml-score-label {
  margin: 0 0 4px;
  color: #44618e;
  font-weight: 700;
}
.mml-score-value {
  margin: 0;
  font-size: 3.8rem;
  line-height: 1;
  font-weight: 800;
}
.mml-score-value span {
  font-size: 1rem;
  color: #44618e;
  margin-left: 8px;
}
.mml-band-pill {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #14213d;
  color: #ffffff;
}
.mml-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.mml-meta div {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 14px;
}
.mml-meta dt {
  margin: 0 0 4px;
  color: #44618e;
  font-size: 0.82rem;
  font-weight: 700;
}
.mml-meta dd {
  margin: 0;
  font-weight: 700;
}
.mml-scale,
.mml-indicator-grid {
  display: grid;
  gap: 12px;
}
.mml-scale-band,
.mml-indicator-card,
.mml-missing-list li {
  border-radius: 14px;
  border: 1px solid #d9e2f2;
  padding: 14px;
  background: #f8fbff;
}
.mml-scale-band {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mml-scale-band strong {
  font-size: 1rem;
}
.mml-scale-band span,
.mml-scale-band em {
  color: #44618e;
  font-style: normal;
}
.mml-scale-band.is-active {
  border-color: #14213d;
  box-shadow: inset 0 0 0 2px #14213d;
}
.mml-band-capitulation { background: #f6d8d8; }
.mml-band-pessimism { background: #fde6c8; }
.mml-band-neutral { background: #f3f1e8; }
.mml-band-optimism { background: #d8ede6; }
.mml-band-exuberance { background: #d8e8ff; }
.mml-indicator-name,
.mml-indicator-value {
  margin: 0;
}
.mml-indicator-name {
  color: #44618e;
  font-weight: 700;
}
.mml-indicator-value {
  margin-top: 6px;
  font-size: 1.5rem;
  font-weight: 800;
}
.mml-indicator-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
  color: #33415c;
}
.mml-indicator-interpretation {
  margin-top: 10px;
  font-weight: 700;
}
.mml-missing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.mml-missing-list li {
  display: grid;
  gap: 4px;
}
.mml-note-list {
  margin: 0;
  padding-left: 1.2rem;
  color: #33415c;
}
.mml-note-list li {
  margin: 0 0 8px;
}
.mml-disclaimer {
  border-style: dashed;
}
@media (min-width: 720px) {
  .mml-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mml-scale {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mml-indicator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Dashboard-specific CSS */
.mml-dashboard .mml-note-list { margin: 0; padding-left: 1.2rem; color: #33415c; }
.mml-dashboard .mml-note-list li { margin: 0 0 8px; }
.mml-dashboard, .mml-dashboard * { box-sizing: border-box; }
.mml-dashboard-shell { max-width: 860px; margin: 0 auto; padding: 16px; }
.mml-detail-stack,
.mml-secondary-stack { display: grid; gap: 16px; }
.mml-market-stack { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mml-secondary-box,
.mml-detail-market { background: #ffffff; border: 1px solid #d9e2f2; border-radius: 18px; }
.mml-summary-text,
.mml-summary-meta { margin: 8px 0 0; color: #33415c; }
.mml-summary-text { margin-top: 4px; font-size: 1.1rem; line-height: 1.8; font-weight: 700; }
.mml-summary-meta { width: 100%; text-align: right; font-size: 0.8rem; line-height: 1.7; color: #94a3b8; }
.mml-market-card,
.mml-history-chart-card { background: transparent; border: 0; border-radius: 0; }
.mml-market-card { padding: 18px 10px 8px; text-align: center; }
.mml-history-chart-card { padding: 4px 2px 0; }
.mml-history-chart-card h2 { margin: 0 0 14px; font-size: 1.35rem; color: #14213d; }
.mml-history-chart-card .plotly-graph-div { width: 100% !important; }
.mml-history-chart-card .js-plotly-plot,
.mml-history-chart-card .plot-container { width: 100% !important; }
.mml-history-chart-warning { margin: 0; color: #64748b; font-size: 0.92rem; line-height: 1.7; }
.mml-market-title { margin: 0; font-size: 2rem; line-height: 1.1; }
.mml-market-subtitle { margin: 8px 0 6px; color: #44618e; font-weight: 700; }
.mml-hero-score { margin: 10px 0 4px; font-size: 4.4rem; line-height: 1; font-weight: 800; color: #14213d; }
.mml-hero-score span { font-size: 1rem; color: #44618e; margin-left: 8px; }
.mml-hero-band { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; color: #33415c; }
.mml-hero-comment { margin: 14px 0 8px; color: #33415c; font-size: 0.96rem; line-height: 1.65; }
.mml-hero-date { margin: 0; color: #64748b; font-size: 0.92rem; }
.mml-gauge-wrap { display: flex; justify-content: center; align-items: center; }
.mml-gauge { width: 100%; max-width: 332px; height: auto; overflow: visible; }
.mml-gauge-scale { font-size: 11px; font-weight: 700; fill: #64748b; }
.mml-scale-band { text-align: center; align-items: center; }
.mml-scale-band strong,
.mml-scale-band span,
.mml-scale-band em { color: #14213d; }
.mml-band-capitulation { background: #dbeafe; }
.mml-band-pessimism { background: #e8f1ff; }
.mml-band-neutral { background: #f3f4f6; }
.mml-band-optimism { background: #fde7c7; }
.mml-band-exuberance { background: #fee2e2; }
.mml-secondary-box { padding: 12px 14px; background: linear-gradient(180deg, #fafcff 0%, #f3f7fb 100%); }
.mml-secondary-box h4 { margin: 0 0 10px; }
.mml-secondary-caption { margin: 0; color: #33415c; font-size: 0.92rem; }
.mml-secondary-value { margin: 6px 0 4px; color: #14213d; font-size: 1rem; font-weight: 700; }
.mml-secondary-meta { margin: 0; color: #64748b; font-size: 0.82rem; }
.mml-detail-market { padding: 18px; }
.mml-detail-market h3 { margin: 0 0 12px; font-size: 1.15rem; }
.mml-detail-market .mml-indicator-card { padding: 14px; }
.mml-detail-market .mml-indicator-name { margin: 0 0 4px; font-size: 0.95rem; }
.mml-detail-market .mml-indicator-value { margin: 0 0 6px; font-size: 1.05rem; }
.mml-detail-market .mml-indicator-meta { font-size: 0.82rem; }
.mml-detail-market .mml-indicator-detail { font-size: 0.86rem; line-height: 1.55; }
.mml-subtle-section { background: #fcfdff; }
.mml-fold { border: 1px solid #d9e2f2; border-radius: 14px; background: #ffffff; }
.mml-fold summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700; color: #14213d; }
.mml-fold summary::-webkit-details-marker { display: none; }
.mml-fold summary::after { content: "＋"; float: right; color: #44618e; }
.mml-fold[open] summary::after { content: "−"; }
.mml-fold-body { padding: 0 16px 16px; }
.mml-note-section { padding: 0; background: transparent; }
.mml-note-card { width: 100%; padding: 18px; background: #ffffff; border: 1px solid #d9e2f2; border-radius: 18px; box-sizing: border-box; }
.mml-short-note { margin: 0; color: #33415c; font-size: 0.92rem; line-height: 1.7; overflow-wrap: break-word; word-break: normal; }
.mml-short-note-subtle { margin-top: 8px; color: #64748b; font-size: 0.84rem; }
@media (max-width: 720px) {
  .mml-market-stack { grid-template-columns: 1fr; }
  .mml-market-title { font-size: 1.7rem; }
  .mml-hero-score { font-size: 3.5rem; }
  .mml-market-card { padding: 14px 4px 6px; }
  .mml-history-chart-card { padding: 2px 0 0; }
}
