/* Lab「Safari の Liquid Glass に思うこと」だけで使うスタイル */

/* iPhone の画面（スクリーンショット）を横に並べる */
.sg-shots {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 1.8em 0;
}
.sg-shots figure {
  flex: 0 1 240px;
  min-width: 0;
  margin: 0;
}
/* スマホでも、折り返さずに 2 枚を横に並べる（画像は小さくなってよい。対応前と対応後を見比べるため） */
@media (max-width: 600px) {
  .sg-shots { gap: 12px; }
  .sg-shots figure { flex: 1 1 0; }
  .sg-shots img { border-radius: 14px; }
  .sg-shots figcaption { font-size: 12px; text-align: left; }
}
.sg-shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
}
.sg-shots figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  opacity: 0.8;
}
.theme-light .wrap .sg-shots img { border-color: #cfd6e0; }

/* コード */
.prose pre.sg-code {
  margin: 1.4em 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.prose pre.sg-code code {
  padding: 0;
  background: none;
  color: #dbe6f5;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre;
}