.post-visual-width {
  --article-visual-width: 520px;
}

.post-visual-width .post-content .mermaid-diagram {
  box-sizing: border-box;
  left: auto;
  width: min(100%, var(--article-visual-width));
  max-width: var(--article-visual-width);
  margin: 2rem auto;
  transform: none;
}

.post-visual-width .post-content .mermaid-diagram .diagram-canvas {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.post-visual-width .post-content .mermaid-diagram pre.mermaid {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
}

.post-visual-width .post-content .mermaid-diagram svg {
  max-width: 100% !important;
}

.post-visual-width .post-content .mermaid-diagram--architecture.mermaid-diagram--roundtrip:not(.mermaid-diagram--compact) .diagram-canvas {
  overflow-x: auto;
}

.post-visual-width .post-content table {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--article-visual-width);
  min-width: 0;
  margin: 2rem auto;
  overflow-x: auto;
}

.post-visual-width .post-content iframe.key-prepare-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--article-visual-width);
  margin: 2rem auto;
}

.post-visual-width .post-content .article-visual-frame {
  box-sizing: border-box;
  width: min(100%, var(--article-visual-width));
  max-width: var(--article-visual-width);
  margin: 2rem auto;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(30, 41, 59, 0.045);
}

.post-visual-width .post-content .article-visual-frame img.article-visual-image {
  display: block;
  width: 100%;
  max-width: 470px;
  height: auto;
  margin: 0 auto;
  border: 0;
}

@media (min-width: 601px) {
  .post-visual-width .post-content table th:first-child,
  .post-visual-width .post-content table td:first-child {
    min-width: 7em;
  }
}

@media (max-width: 600px) {
  .post-visual-width .post-content .mermaid-diagram {
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
  }

  .post-visual-width .post-content .mermaid-diagram--architecture.mermaid-diagram--roundtrip:not(.mermaid-diagram--compact) .diagram-canvas {
    padding-right: 12px;
    padding-left: 12px;
  }

  .post-visual-width .post-content .mermaid-diagram--architecture.mermaid-diagram--roundtrip:not(.mermaid-diagram--compact) pre.mermaid {
    width: max-content !important;
  }

  .post-visual-width .post-content .mermaid-diagram--architecture.mermaid-diagram--roundtrip:not(.mermaid-diagram--compact) svg {
    width: 470px !important;
    max-width: none !important;
  }

  .post-visual-width .post-content .article-visual-frame {
    padding: 8px;
    border-radius: 14px;
  }

  .post-visual-width .post-content table:has(th:nth-child(3)) th:first-child,
  .post-visual-width .post-content table:has(th:nth-child(3)) td:first-child {
    min-width: 5em;
  }

  .post-visual-width .post-content table:has(th:nth-child(3)) th,
  .post-visual-width .post-content table:has(th:nth-child(3)) td {
    padding-inline: 8px;
  }
}