.history-article {
  padding: 72px 0;
  background: linear-gradient(180deg, #f7f7ff 0, #fff 420px);
  color: #343252;
}

.history-article__header,
.history-article__body { max-width: 940px; }

.history-article__header { margin: 0 auto 34px; text-align: center; }
.history-article__eyebrow { margin-bottom: 14px; color: #5140f5; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.history-article h1 { margin-bottom: 18px; color: #17164d; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; letter-spacing: -.035em; }
.history-article__intro { max-width: 780px; margin: 0 auto; color: #666381; font-size: 18px; line-height: 1.7; }
.history-article__meta { display: flex; justify-content: center; gap: 18px; margin-top: 18px; color: #85829c; font-size: 13px; }
.history-article__cover { display: block; width: 100%; margin: 0 auto 52px; border-radius: 22px; box-shadow: 0 24px 65px rgba(30, 27, 88, .16); }
.history-article__body { margin: 0 auto; }
.history-article__body h2 { margin: 48px 0 16px; color: #17164d; font-size: clamp(27px, 3vw, 36px); line-height: 1.2; }
.history-article__body h3 { margin: 34px 0 14px; color: #242159; font-size: 24px; }
.history-article__body p,
.history-article__body li { font-size: 17px; line-height: 1.82; }
.history-article__body p { margin-bottom: 18px; text-align: justify; }
.history-article__body a { color: #4432e8; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(68,50,232,.3); text-underline-offset: 3px; }
.history-article__body ul { margin: 18px 0 26px; padding-left: 22px; }
.history-article__body li { margin-bottom: 12px; }
.history-note { margin: 34px 0; border-left: 5px solid #5542f4; border-radius: 0 16px 16px 0; padding: 24px 28px; background: #f1f0ff; color: #29265c; font-size: 18px; line-height: 1.7; }
.history-faq { display: grid; gap: 12px; margin-top: 22px; }
.history-faq details { border: 1px solid #e6e4f1; border-radius: 14px; padding: 0 20px; background: #fff; box-shadow: 0 8px 24px rgba(35,30,88,.05); }
.history-faq summary { padding: 18px 30px 18px 0; color: #242159; font-size: 17px; font-weight: 800; cursor: pointer; }
.history-faq details p { margin: 0; padding: 0 0 20px; font-size: 15px; text-align: left; }
.history-author { margin-top: 52px; border-radius: 18px; padding: 28px; background: linear-gradient(135deg, #211b65, #513cf2); color: #fff; }
.history-author h2 { margin: 0 0 10px; color: #fff; font-size: 24px; }
.history-author p { margin: 0; color: rgba(255,255,255,.84); }

@media (max-width: 767.98px) {
  .history-article { padding: 48px 0; }
  .history-article__header,
  .history-article__body { width: calc(100% - 36px); }
  .history-article__cover { border-radius: 14px; margin-bottom: 36px; }
  .history-article__body p { text-align: left; }
  .history-article__body p,
  .history-article__body li { font-size: 16px; line-height: 1.72; }
  .history-note { padding: 20px; }
}