/* 링크 미리보기 카드 · 소셜 임베드 — H-14 3층/1층. `domain/image.js` 가 그리는 마크업만 본다.
 *
 * ── 별 파일인 이유 ────────────────────────────────────────────
 * `style.css` 는 §I 창이 갖고 있다. 한 파일을 두 창이 고치면 그 순간 손으로 병합해야
 * 한다 (창고 병렬작업 규칙과 같은 자리). layout 에 붙이는 한 줄은 §I 창에 알리고 넣는다.
 *
 * ── 디시 짝이 없다 ────────────────────────────────────────────
 * **실측 디시에는 링크 미리보기 카드가 없다.** 골격 css-index 3,900여 줄에 0건이고,
 * 코퍼스 본문에 있는 것은 `OutLink.renderOutLinkWarning` — 카드가 아니라 «외부 링크
 * 경고» 다. 그래서 이 카드는 «디시를 베낀 것» 이 아니라 우리가 정한 물건이다.
 * 지어낸 실측을 적지 않는다 — 대신 값을 우리 토큰과 기존 치수에서 가져온다:
 *   썸네일 120×90  = 목록 축소본 `_c`(240×160)의 절반 결
 *   테두리 1px --line, 바탕 --sub  = 사이드 상자·대댓글과 같은 칸
 *
 * 야간은 토큰이 알아서 뒤집는다. 여기서 색 리터럴을 다시 적지 않는다
 * (H-9 §④ 「회색 글자를 리터럴로 다시 안 적는다」).
 */

.linkcard {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 10px 0;
  padding: 0;
  max-width: 500px;
  border: 1px solid var(--line);
  background: var(--sub);
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
}

.linkcard:hover {
  border-color: var(--gall-line, var(--line));
}

.linkcard .lc_thumb {
  flex: 0 0 120px;
  display: block;
  width: 120px;
  height: 90px;
  overflow: hidden;
  background: var(--bg);
}

.linkcard .lc_thumb img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
}

.linkcard .lc_body {
  display: block;
  min-width: 0; /* flex 항목이 자식 글자 폭에 밀려 넘치지 않게 */
  padding: 8px 10px 8px 0;
}

/* 그림이 없는 카드는 왼쪽 여백을 스스로 진다 — 썸네일 자리가 비지 않는다 */
.linkcard.no_thumb .lc_body {
  padding-left: 10px;
}

.linkcard .lc_title {
  display: block;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--fg);
  /* 두 줄까지. 카드가 세로로 자라면 그 줄이 목록에서 제일 큰 물건이 된다 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.linkcard .lc_desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-meta);
}

.linkcard .lc_src {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--dim);
}

/* ── 소셜 임베드 ───────────────────────────────────────────────
 * 위젯 스크립트가 붙으면 그쪽이 blockquote 를 갈아 끼운다. 안 붙어 있는 동안에도
 * 인용문 + 원문 링크로 읽히게 둔다 — 죽은 자리를 만들지 않는다.
 */
.embed_area.social {
  margin: 10px 0;
  max-width: 550px;
}

.embed_area.social blockquote {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--mini-line, var(--line));
  background: var(--sub);
  font-size: 13px;
}

.embed_area.social blockquote a {
  color: var(--navy-text, var(--fg));
}

/* 폰. mobile.css 는 style.css 를 안 싣지만 이 파일은 양쪽에 붙는다 —
 * 카드 마크업이 한 벌이라 규칙도 한 벌이면 된다 */
@media (max-width: 768px) {
  .linkcard {
    max-width: 100%;
  }

  .linkcard .lc_thumb,
  .linkcard .lc_thumb img {
    flex-basis: 96px;
    width: 96px;
    height: 72px;
  }

  .embed_area.social {
    max-width: 100%;
  }
}