/* 解説欄だけに適用し、共通ページのデザインとは独立させる。 */
.reading-guide {
  margin: 32px 0;
  padding: clamp(16px, 3vw, 24px);
  border: 2px solid var(--brand-ink, #24172e);
  border-radius: 20px;
  background: #fffdf9;
  color: #24172e;
  line-height: 1.95;
  overflow-wrap: anywhere;
}
.reading-guide h2 { margin: 0 0 12px; font-size: 1.2rem; line-height: 1.65; }
.reading-guide h3 { margin: 20px 0 8px; font-size: 1rem; }
.reading-guide p { margin: 12px 0; }
.reading-guide .reading-guide-note { font-size: .9rem; color: #574756; }
.reading-guide details { margin-top: 12px; border: 1px solid #bda4b0; border-radius: 12px; background: #fff; }
.reading-guide summary {
  padding: 15px 16px;
  border-radius: 11px;
  background: #ffe9f2;
  color: #24172e;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.7;
  min-height: 44px;
  box-sizing: border-box;
}
.reading-guide summary::marker { color: #b42364; }
.reading-guide summary:focus-visible { outline: 3px solid #b42364; outline-offset: 3px; }
.reading-guide details[open] > summary { border-bottom: 1px solid #bda4b0; border-radius: 11px 11px 0 0; }
.reading-guide details > p, .reading-guide details > h3 { margin: 16px; }
.reading-guide details > ol { margin: 16px; padding-left: 24px; }
.reading-guide li + li { margin-top: 12px; }
.reading-guide details > details { margin: 12px; }
.reading-guide details > details > summary { background: #fff8df; }
.reading-guide a { color: #942052; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 380px) {
  .reading-guide { padding: 14px 10px; }
  .reading-guide summary { padding: 13px 12px; }
  .reading-guide details > details { margin: 10px 8px; }
}

/* 深い解説でも1行の長さと階層を保つ。共有CSSには影響させない。 */
.reading-guide details > p { max-width: 46em; }
.reading-guide details > details > details { border-left: 3px solid #b42364; }
.reading-guide details > details > details > summary { background: #fff5f9; }
.reading-guide summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.reading-guide [id] { scroll-margin-top: 24px; }
.reading-result-depth { margin: 24px 0; }
@media (max-width: 420px) {
  .reading-guide details > details > details { margin-left: 4px; margin-right: 4px; }
  .reading-guide details > p { margin-left: 12px; margin-right: 12px; }
}