/* 자료 › OG 이미지 (#page-og-images) — 링크 미리보기 규격과 실제 이미지 갤러리.
   카드 = 원본 이미지 | 카카오톡·X 미리보기 예시 프레임(근사). 안전 영역 1080×560 = 좌우 5% · 위아래 5.556% */
.og-doc .og-anatomy { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.og-anat-frame { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--hairline); }
.og-anat-frame img, .og-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.og-safe, .og-show-safe .og-shot::after { position: absolute; inset: 5.556% 5%; border: 2px dashed #FF2CBF; border-radius: 4px; box-shadow: 0 0 0 999px rgba(255, 44, 191, .14); pointer-events: none; }
.og-show-safe .og-shot::after { content: ""; }
.og-anat-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.og-anat-notes b { color: var(--ink); font-weight: 600; }

.og-code { margin: 16px 0 8px; padding: 18px 20px; border-radius: 10px; background: var(--code-bg); overflow-x: auto; }
.og-code code { display: block; white-space: pre; font-size: 12.5px; line-height: 1.7; background: none; padding: 0; }

.og-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 8px 0 4px; font-size: 13px; color: var(--ink-soft); }
.og-safe-toggle { min-height: 44px; padding: 0 18px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.og-safe-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.og-safe-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.og-gallery { display: grid; gap: 28px; margin: 20px 0 8px; }
.og-card { margin: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "shot mocks" "cap mocks"; grid-template-rows: auto 1fr; gap: 12px 24px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--hairline); min-width: 0; }
.og-card:last-child { border-bottom: 0; padding-bottom: 0; }
.og-shot { grid-area: shot; position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--hairline); background: var(--surface-soft); }
.og-card figcaption { grid-area: cap; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 13px; line-height: 1.5; min-width: 0; }
.og-card figcaption b { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.og-sw { flex: none; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.og-url { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); overflow-wrap: anywhere; }
span.og-url { color: var(--ink-soft); }
.og-card figcaption code { font-size: 12px; overflow-wrap: anywhere; }
.og-card figcaption small { flex: 1 1 100%; color: var(--ink-faint); font-size: 12px; }

.og-mocks { grid-area: mocks; display: grid; gap: 14px; min-width: 0; }
.og-mock-t { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-faint); }
/* 카카오톡: 채팅 배경 위 말풍선 · 가로 2:1로 가운데를 잘라 보여 주는 경우 */
.og-kakao { padding: 12px; border-radius: 12px; background: #B2C7D9; }
.og-kakao .og-mock-t { color: #4C5F70; }
.og-bubble { width: min(100%, 250px); border-radius: 4px 14px 14px 14px; overflow: hidden; background: #FFFFFF; color: #191919; }
.og-kimg { aspect-ratio: 2 / 1; overflow: hidden; }
.og-kimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-ktext { display: grid; gap: 2px; padding: 9px 12px 10px; font-size: 12px; line-height: 1.4; }
.og-ktext b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-ktext span { color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.og-ktext small { color: #999; font-size: 11px; }
/* X: 1.91:1 그대로 · 둥근 모서리 16 · 왼쪽 아래 도메인 라벨이 이미지를 덮는다 */
.og-x { padding: 12px; border-radius: 12px; background: #000000; color: #E7E9EA; }
.og-x .og-mock-t { color: #71767B; }
.og-xcard { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px #2F3336; }
.og-xcard img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.og-xcard span { position: absolute; left: 10px; bottom: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .77); color: #fff; font-size: 11px; line-height: 1.5; }
.og-x > small { display: block; margin-top: 5px; color: #71767B; font-size: 11px; }

.og-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0 8px; }
.og-dd > div { padding: 18px 20px; border-radius: 12px; background: var(--surface-soft); font-size: 13.5px; line-height: 1.6; }
.og-dd > div > b { display: block; margin-bottom: 6px; font-size: 14px; }
.og-do > b { color: #0B7A5F; }
.og-dont > b { color: var(--sev-conflict); }
.og-dd ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .og-do > b { color: #4FD8B4; } }
:root[data-theme="dark"] .og-do > b { color: #4FD8B4; }

@media (max-width: 760px) {
  .og-doc .og-anatomy, .og-card, .og-dd { grid-template-columns: minmax(0, 1fr); }
  .og-card { grid-template-areas: "shot" "cap" "mocks"; grid-template-rows: none; }
  .og-mocks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .og-kakao, .og-x { padding: 10px; }
}
@media (max-width: 420px) { .og-mocks { grid-template-columns: minmax(0, 1fr); } }
.og-doc td:first-child { white-space: nowrap; }