.blog_post {
  padding: 10rem 0px 12rem;
  background-color: var(--bg);
}
.blog_post .main {
  align-items: flex-start;
}
.blog_post .card {
  position: sticky;
  top: 12rem;
  width: 42rem;
  padding: 3.6rem 3.6rem 4rem;
  border: 1px solid rgba(92, 188, 255, 0.28);
  border-radius: 2.8rem;
  background: radial-gradient(ellipse 40rem 28rem at 0% 0%, rgba(18, 136, 216, 0.2) 0%, rgba(18, 136, 216, 0) 70%), var(--card);
}
.blog_post .jump {
  margin-top: 0px;
}
.blog_post .jump > span {
  display: block;
  color: var(--title);
  font-family: var(--head);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 3rem;
  letter-spacing: 0px;
  text-transform: none;
}
.blog_post .jump a {
  display: block;
  margin-top: 1.4rem;
  color: var(--title);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.2rem;
  transition: color 0.3s;
}
.blog_post .jump a:first-of-type {
  margin-top: 2.4rem;
}
.blog_post .jump a:hover,
.blog_post .jump a.active {
  color: var(--accent);
}
.blog_post .jump a.active {
  font-weight: 600;
}
.read_bar {
  position: fixed;
  z-index: 1001;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.12);
}
.read_bar > span {
  display: block;
  width: 0px;
  height: 100%;
  background-color: var(--accent);
}
.blog_post .article {
  width: 102rem;
}
.blog_post .lead {
  color: var(--title);
  font-size: 2.2rem;
  line-height: 3.4rem;
}
.blog_post .article h2 {
  margin-top: 6.4rem;
  color: var(--title);
  font-family: var(--head);
  font-weight: 600;
  font-size: 4rem;
  line-height: 4.8rem;
  letter-spacing: -0.01em;
}
.blog_post .article h2 em,
.blog_post .article > h3 em {
  color: #9ad8ff;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0px;
}
.blog_post .article > h3 {
  margin-top: 3.2rem;
  color: var(--title);
  font-family: var(--head);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 3.2rem;
}
.blog_post .article p {
  margin-top: 2rem;
  color: var(--text);
  font-size: 1.8rem;
  line-height: 3rem;
}
.blog_post .article > ul:not(.compare):not(.picks),
.blog_post .article > ol {
  margin: 2rem 0 0 1.8rem;
  color: var(--text);
  font-size: 1.8rem;
  line-height: 3rem;
}
.blog_post .article > ul:not(.compare):not(.picks) > li,
.blog_post .article > ol > li {
  margin-top: 0.8rem;
}
.blog_post .article > ul:not(.compare):not(.picks) > li {
  list-style: disc;
}
.blog_post .article > ol > li {
  list-style: decimal;
}
.blog_post .article > ul:not(.compare):not(.picks) > li::marker,
.blog_post .article > ol > li::marker {
  color: var(--accent);
}
.blog_post .article a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
.blog_post .article a:hover {
  color: #9ad8ff;
}
.blog_post .article .figure a,
.blog_post .article .compare a {
  color: inherit;
  text-decoration: none;
}
.blog_post .article strong {
  color: var(--title);
  font-weight: 600;
}
.blog_post .article > img,
.blog_post .article p > img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2.4rem;
  border-radius: 1.6rem;
}
.blog_post .article table {
  width: 100%;
  margin-top: 3.2rem;
  border-collapse: separate;
  border-spacing: 0px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2.4rem;
  background-color: var(--card);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.blog_post .article caption {
  caption-side: bottom;
  padding-top: 1.2rem;
  color: var(--text2);
  font-size: 1.4rem;
  line-height: 2rem;
  text-align: left;
}
.blog_post .article th,
.blog_post .article td {
  padding: 2.1rem 2.4rem;
  border: 0px;
  text-align: left;
  vertical-align: top;
}
.blog_post .article tr + tr > th,
.blog_post .article tr + tr > td {
  border-top: 1px solid var(--line);
}
.blog_post .article th {
  color: var(--text);
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.025);
}
.blog_post .article thead th,
.blog_post .article tr:not(:has(td)) > th {
  color: var(--accent);
  font-weight: 600;
  background-color: rgba(18, 136, 216, 0.16);
}
.blog_post .article table:not(:has(tr > :nth-child(3))) tr:has(> td) > th {
  width: 26rem;
}
.blog_post .article td {
  color: var(--title);
  font-weight: 500;
}
.blog_post .article tfoot th,
.blog_post .article tfoot td {
  color: var(--title);
  font-weight: 600;
}
.blog_post .article th.has-text-align-center,
.blog_post .article td.has-text-align-center,
.blog_post .article th[align="center"],
.blog_post .article td[align="center"] {
  text-align: center;
}
.blog_post .article th.has-text-align-right,
.blog_post .article td.has-text-align-right,
.blog_post .article th[align="right"],
.blog_post .article td[align="right"] {
  text-align: right;
}
.blog_post .article tbody tr:hover > th,
.blog_post .article tbody tr:hover > td {
  background-color: rgba(18, 136, 216, 0.08);
}
.blog_post .figure {
  margin-top: 4rem;
}
.blog_post .figure a,
.blog_post .figure .img {
  display: block;
  height: 48rem;
  border-radius: 2.4rem;
  background-color: #1a1e27;
}
.blog_post .figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog_post .figure figcaption {
  margin-top: 1.4rem;
  color: var(--text2);
  font-size: 1.4rem;
  line-height: 2rem;
}
.blog_post .compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 1.6rem;
  margin-top: 3.6rem;
}
.blog_post .compare li {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background-color: var(--card);
}
.blog_post .compare .pic {
  display: block;
  height: 18rem;
  background-color: #1a1e27;
}
.blog_post .compare .txt {
  padding: 2.2rem 2.2rem 2.6rem;
}
.blog_post .compare h3 {
  color: var(--title);
  font-family: var(--head);
  font-weight: 600;
  font-size: 2rem;
  line-height: 2.6rem;
}
.blog_post .compare p {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 2.3rem;
}
.blog_post .compare em {
  display: block;
  margin-top: 1.4rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog_post blockquote {
  margin-top: 4.4rem;
  padding: 3.2rem 3.6rem;
  border-left: 2px solid var(--accent);
  border-radius: 0px 2rem 2rem 0px;
  background-color: rgba(18, 136, 216, 0.08);
}
.blog_post blockquote p {
  margin-top: 0px;
  color: var(--title);
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.8rem;
  line-height: 3.8rem;
}
.blog_post .article blockquote p {
  margin-top: 0;
}
.blog_post .picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 1.2rem;
  margin-top: 3.2rem;
}
.blog_post .picks li {
  padding: 2.2rem 2rem;
  border: 1px solid var(--line);
  border-radius: 1.6rem;
  background-color: var(--card);
}
.blog_post .picks b {
  display: block;
  color: var(--title);
  font-family: var(--head);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 2.3rem;
}
.blog_post .picks span {
  display: block;
  margin-top: 0.8rem;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 2.2rem;
}

@media screen and (min-width: 769px) and (max-width: 1500px) {
  .blog_post .card {
    width: 32%;
  }
  .blog_post .article {
    width: 64%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .blog_post .main {
    flex-direction: column-reverse;
    gap: 4rem;
  }
  .blog_post .card,
  .blog_post .article {
    position: static;
    width: 100%;
  }
  .blog_post .compare,
  .blog_post .picks {
    grid-template-columns: minmax(0px, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .blog_post {
    padding: 56px 0px 64px;
  }
  .blog_post .main {
    flex-direction: column-reverse;
    gap: 36px;
  }
  .blog_post .card,
  .blog_post .article {
    position: static;
    width: 100%;
  }
  .blog_post .card {
    padding: 22px 18px 24px;
    border-radius: 18px;
  }
  .blog_post .jump > span {
    font-size: 20px;
    line-height: 1.3;
  }
  .blog_post .jump {
    margin-top: 0px;
  }
  .blog_post .jump a {
    margin-top: 10px;
    font-size: 14px;
  }
  .blog_post .jump a:first-of-type {
    margin-top: 16px;
  }
  .blog_post .lead {
    font-size: 17px;
    line-height: 1.6;
  }
  .blog_post .article h2 {
    margin-top: 36px;
    font-size: 26px;
    line-height: 1.25;
  }
  .blog_post .article > h3 {
    margin-top: 20px;
    font-size: 20px;
    line-height: 1.3;
  }
  .blog_post .article > ul:not(.compare):not(.picks),
  .blog_post .article > ol {
    margin-left: 18px;
    font-size: 15px;
    line-height: 1.7;
  }
  .blog_post .article > img,
  .blog_post .article p > img {
    margin-top: 14px;
    border-radius: 12px;
  }
  .blog_post .article table {
    margin-top: 18px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
  }
  .blog_post .article th,
  .blog_post .article td {
    padding: 12px 14px;
  }
  .blog_post .article table:not(:has(tr > :nth-child(3))):not(:has(thead)):has(th + td):not(:has(td + td)) th,
  .blog_post .article table:not(:has(tr > :nth-child(3))):not(:has(thead)):has(th + td):not(:has(td + td)) td {
    display: block;
    width: 100%;
  }
  .blog_post .article table:not(:has(tr > :nth-child(3))):not(:has(thead)):has(th + td):not(:has(td + td)) th {
    padding-bottom: 0px;
    color: var(--text2);
    font-size: 12px;
    background-color: transparent;
  }
  .blog_post .article table:not(:has(tr > :nth-child(3))):not(:has(thead)):has(th + td):not(:has(td + td)) tr + tr > td {
    border-top: 0px;
  }
  .blog_post .article table:not(:has(tr > :nth-child(3))):not(:has(thead)):has(th + td):not(:has(td + td)) td {
    padding-top: 2px;
  }
  .blog_post .article table:has(tr > :nth-child(3)),
  .blog_post .article table:has(thead) {
    display: block;
    overflow-x: auto;
  }
  .blog_post .article table:has(tr > :nth-child(3)) th,
  .blog_post .article table:has(tr > :nth-child(3)) td,
  .blog_post .article table:has(thead) th,
  .blog_post .article table:has(thead) td {
    white-space: nowrap;
  }
  .blog_post .article p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.7;
  }
  .blog_post .figure {
    margin-top: 20px;
  }
  .blog_post .figure a,
  .blog_post .figure .img {
    height: 200px;
    border-radius: 16px;
  }
  .blog_post .figure figcaption {
    margin-top: 8px;
    font-size: 12px;
  }
  .blog_post .compare,
  .blog_post .picks {
    grid-template-columns: minmax(0px, 1fr);
    gap: 10px;
    margin-top: 18px;
  }
  .blog_post .compare li,
  .blog_post .picks li {
    border-radius: 14px;
  }
  .blog_post .compare .pic {
    height: 160px;
  }
  .blog_post .compare .txt,
  .blog_post .picks li {
    padding: 16px;
  }
  .blog_post .compare h3,
  .blog_post .picks b {
    font-size: 16px;
  }
  .blog_post .compare p,
  .blog_post .picks span {
    font-size: 14px;
    line-height: 1.55;
  }
  .blog_post blockquote {
    margin-top: 24px;
    padding: 18px 16px;
    border-radius: 0px 14px 14px 0px;
  }
  .blog_post blockquote p {
    font-size: 22px;
    line-height: 1.35;
  }
}


.cd_related {
  padding: 12rem 0px 12rem;
  background-color: var(--bg2);
}
.cd_related .head {
  align-items: flex-end;
}
.cd_related .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 2.8rem;
  margin-top: 5.6rem;
}
.cd_related .grid a {
  display: block;
}
.cd_related .pic {
  position: relative;
  display: block;
  height: 34rem;
  border-radius: 2.4rem;
  background-color: #1a1e27;
}
.cd_related .pic::after {
  content: '';
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.4s;
}
.cd_related a:hover .pic img {
  transform: scale(1.06);
}
.cd_related a:hover .pic::after {
  box-shadow: inset 0px 0px 0px 2px rgba(141, 212, 255, 0.7), 0px 0px 3rem rgba(19, 126, 207, 0.3);
}
.cd_related .pic .chip {
  position: absolute;
  left: 2rem;
  top: 2rem;
  z-index: 1;
}
.cd_related .info {
  display: block;
  padding-top: 2.4rem;
}
.cd_related .info i {
  display: block;
  color: var(--accent);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cd_related h3 {
  margin-top: 1.2rem;
  color: var(--title);
  font-family: var(--head);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 3rem;
  transition: color 0.3s;
}
.cd_related a:hover h3 {
  color: #8dd4ff;
}
.cd_related .info p {
  margin-top: 1rem;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 2.5rem;
}

@media screen and (max-width: 768px) {
  .cd_related {
    padding: 64px 0px 64px;
  }
  .cd_related .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .cd_related .grid {
    display: flex;
    gap: 12px;
    margin: 24px -20px 0px;
    padding: 0px 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cd_related .grid li {
    flex-shrink: 0;
    width: 250px;
  }
  .cd_related .pic {
    height: 190px;
    border-radius: 16px;
  }
  .cd_related .pic .chip {
    left: 10px;
    top: 10px;
  }
  .cd_related .info {
    padding-top: 12px;
  }
  .cd_related .info i {
    font-size: 11px;
  }
  .cd_related h3 {
    margin-top: 6px;
    font-size: 17px;
    line-height: 1.3;
  }
  .cd_related .info p {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
  }
}