/* =====================================================================
   style.css — OGP・メタタグ確認 ツール固有の微調整。
   共通スタイルは /_shared/shirugear.css に任せ、ここでは
   SNSプレビューカードとメタ一覧テーブルのみ定義する。
   ===================================================================== */

/* --- SNSプレビューカード --- */
.og-card {
  border: 1px solid var(--sg-border, rgba(127, 127, 127, 0.25));
  border-radius: var(--sg-radius, 12px);
  overflow: hidden;
  background: var(--sg-surface, #fff);
}

.og-card__media {
  position: relative;
  aspect-ratio: 1200 / 630;
  background: var(--sg-surface-2, rgba(127, 127, 127, 0.08));
}

.og-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.og-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sg-space-2);
  color: var(--sg-muted, #888);
  text-align: center;
  padding: var(--sg-space-3);
}
/* display:block / display:flex が UA の [hidden]{display:none} を上書きするため打ち消す */
.og-card__img[hidden],
.og-card__placeholder[hidden] {
  display: none;
}

.og-card__placeholder-icon {
  font-size: 2rem;
  line-height: 1;
}

.og-card__placeholder-text {
  font-size: 0.85rem;
}

.og-card__body {
  padding: var(--sg-space-3);
}

.og-card__host {
  margin: 0;
  font-size: 0.78rem;
  color: var(--sg-muted, #888);
  text-transform: lowercase;
  word-break: break-all;
}

.og-card__title {
  margin: var(--sg-space-1) 0 0;
  font-weight: 700;
  line-height: 1.35;
  /* 2行で省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.og-card__desc {
  margin: var(--sg-space-1) 0 0;
  font-size: 0.9rem;
  color: var(--sg-muted, #666);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- メタ一覧テーブル --- */
.og-table-wrap {
  overflow-x: auto;
}

.og-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.og-table th,
.og-table td {
  text-align: left;
  padding: var(--sg-space-2) var(--sg-space-2);
  border-bottom: 1px solid var(--sg-border, rgba(127, 127, 127, 0.18));
  vertical-align: top;
}

.og-table thead th {
  font-size: 0.78rem;
  color: var(--sg-muted, #888);
  font-weight: 600;
}

.og-table__key {
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
}

.og-table__val {
  word-break: break-word;
}

.og-muted {
  color: var(--sg-muted, #aaa);
}

.og-ok {
  color: #2f9e44;
  font-weight: 700;
}

.og-ng {
  color: #e03131;
  font-weight: 700;
}