/* ===========================================================================
   Tools · OG preview — platform-native card styles.
   Loaded ONLY on /tools/og (via useHead in OgToolMain.vue), kept in public/css/
   so it stays out of the shared CSS bundle/budget. INTENTIONALLY does not use
   design-system tokens: each block reproduces a platform’s real look. All
   selectors are scoped under .ogp to avoid global collisions.
   =========================================================================== */

/* ── FACEBOOK ────────────────────────────────────────────────────────────── */
.ogp .fb {
  width: 100%;
  max-width: 500px;
  background: #F0F2F5;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1c1e21;
  border-radius: 8px;
  overflow: hidden;
}
.ogp .fb__img {
  aspect-ratio: 1.91 / 1;
  background-size: cover;
  background-position: center;
  background-color: #1c1e21;
  border-bottom: 1px solid #dadde1;
}
.ogp .fb__meta { padding: 10px 12px 12px; background: #F2F3F5; }
.ogp .fb__host {
  font-size: 12px;
  color: #606770;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 3px;
}
.ogp .fb__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  color: #1c1e21;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .fb__desc {
  font-size: 13px;
  color: #606770;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── LINKEDIN ────────────────────────────────────────────────────────────── */
.ogp .li {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #000000E6;
  border-radius: 8px;
  border: 1px solid #E0DFDC;
  overflow: hidden;
}
.ogp .li__img {
  aspect-ratio: 1.91 / 1;
  background-size: cover;
  background-position: center;
  background-color: #1c1e21;
}
.ogp .li__meta { padding: 10px 14px 14px; background: #EDF3F8; }
.ogp .li__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #000000E6;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .li__host {
  font-size: 12px;
  color: #00000099;
}

/* ── X / TWITTER ─────────────────────────────────────────────────────────── */
.ogp .x {
  width: 100%;
  max-width: 420px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #000000;
  border: 1px solid #2F3336;
  border-radius: 16px;
  overflow: hidden;
}
.ogp .x__img {
  aspect-ratio: 1.91 / 1;
  background-size: cover;
  background-position: center;
  background-color: #0f1419;
  position: relative;
  border-bottom: 1px solid #2F3336;
}
.ogp .x__host {
  position: absolute;
  bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.7);
  color: #e7e9ea;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.ogp .x__meta { padding: 8px 12px 10px; }
.ogp .x__title {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: #e7e9ea;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── SLACK ───────────────────────────────────────────────────────────────── */
.ogp .slack {
  width: 100%;
  max-width: 460px;
  font-family: "Slack-Lato", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d1c1d;
  background: #ffffff;
  padding: 8px 0;
}
.ogp .slack__user { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ogp .slack__avatar {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg, #4A154B, #36C5F0);
  color: white;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
.ogp .slack__line { display: flex; align-items: baseline; gap: 8px; }
.ogp .slack__name { font-weight: 700; font-size: 15px; color: #1d1c1d; }
.ogp .slack__time { font-size: 12px; color: #616061; }
.ogp .slack__link {
  color: #1264A3;
  font-size: 15px;
  text-decoration: underline;
  padding: 2px 0 8px 44px;
  word-break: break-all;
}
.ogp .slack__card {
  margin-left: 44px;
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 12px;
  border-left: 4px solid #4A154B;
  padding: 8px 12px;
  background: #ffffff;
}
.ogp .slack__card-text { min-width: 0; }
.ogp .slack__site {
  font-size: 13px;
  color: #1d1c1d;
  font-weight: 700;
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px;
}
.ogp .slack__favicon {
  width: 16px; height: 16px;
  border-radius: 3px;
  background: #0254f7;
  display: inline-block;
}
.ogp .slack__title-link {
  display: block;
  color: #1264A3;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  line-height: 1.3;
  margin-bottom: 4px;
}
.ogp .slack__desc {
  font-size: 14px;
  color: #1d1c1d;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .slack__thumb {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #1c1e21;
}

/* ── DISCORD ─────────────────────────────────────────────────────────────── */
.ogp .dc {
  width: 100%;
  max-width: 440px;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #313338;
  color: #dbdee1;
  padding: 8px 12px;
  border-radius: 4px;
}
.ogp .dc__user-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ogp .dc__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #5865F2;
}
.ogp .dc__user { display: flex; align-items: baseline; gap: 8px; }
.ogp .dc__name { color: #f2f3f5; font-weight: 500; font-size: 15px; }
.ogp .dc__tag { color: #949ba4; font-size: 12px; }
.ogp .dc__link {
  color: #00A8FC;
  font-size: 14px;
  margin: 2px 0 6px 40px;
  word-break: break-all;
}
.ogp .dc__embed {
  margin-left: 40px;
  background: #2B2D31;
  border-left: 4px solid #5865F2;
  border-radius: 4px;
  padding: 10px 12px;
  max-width: 360px;
}
.ogp .dc__site {
  font-size: 12px;
  color: #b5bac1;
  margin-bottom: 4px;
}
.ogp .dc__title {
  display: block;
  color: #00A8FC;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 4px;
}
.ogp .dc__desc {
  font-size: 13px;
  color: #dbdee1;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .dc__img {
  aspect-ratio: 1.91 / 1;
  background-size: cover;
  background-position: center;
  background-color: #1c1e21;
  border-radius: 4px;
}

/* ── iMESSAGE ────────────────────────────────────────────────────────────── */
.ogp .im {
  width: 100%;
  max-width: 260px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.ogp .im__bubble {
  background: #E9E9EB;
  border-radius: 18px;
  overflow: hidden;
  width: 240px;
  text-align: left;
}
.ogp .im__img {
  aspect-ratio: 1.91 / 1;
  background-size: cover;
  background-position: center;
  background-color: #1c1e21;
}
.ogp .im__meta { padding: 8px 12px 10px; background: #ffffff; }
.ogp .im__title {
  font-size: 13px;
  font-weight: 600;
  color: #000;
  line-height: 1.3;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .im__host {
  font-size: 11px;
  color: #8e8e93;
}
.ogp .im__time {
  font-size: 10px;
  color: #8e8e93;
  letter-spacing: 0.02em;
}

/* ── TELEGRAM ────────────────────────────────────────────────────────────── */
.ogp .tg {
  width: 100%;
  max-width: 340px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  background: #E5EFFA;
  padding: 12px 8px;
  border-radius: 6px;
}
.ogp .tg__msg {
  background: #ffffff;
  border-radius: 12px 12px 12px 4px;
  padding: 8px 10px 6px;
  max-width: 300px;
  position: relative;
}
.ogp .tg__user {
  font-size: 13px;
  color: #3A88C9;
  font-weight: 600;
  margin-bottom: 2px;
}
.ogp .tg__link {
  font-size: 13px;
  color: #3A88C9;
  text-decoration: underline;
  word-break: break-all;
  margin-bottom: 6px;
}
.ogp .tg__card {
  display: flex;
  gap: 8px;
  padding: 2px 0 2px 8px;
  border-left: 2px solid #3A88C9;
}
.ogp .tg__bar { display: none; }
.ogp .tg__body { flex: 1; }
.ogp .tg__site {
  font-size: 12px;
  color: #3A88C9;
  font-weight: 600;
  margin-bottom: 2px;
}
.ogp .tg__title {
  font-size: 13px;
  color: #000;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .tg__desc {
  font-size: 12px;
  color: #707579;
  line-height: 1.35;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .tg__img {
  aspect-ratio: 1.91 / 1;
  background-size: cover;
  background-position: center;
  background-color: #1c1e21;
  border-radius: 6px;
}
.ogp .tg__time {
  font-size: 10px;
  color: #adadad;
  text-align: right;
  margin-top: 4px;
}

/* ── BLUESKY ─────────────────────────────────────────────────────────────── */
.ogp .bs {
  width: 100%;
  max-width: 380px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: #ffffff;
  color: #0B0F19;
  border: 1px solid #E1E8ED;
  border-radius: 8px;
  padding: 12px;
}
.ogp .bs__post { display: flex; gap: 10px; }
.ogp .bs__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0A7AFF 0%, #00d3ff 100%);
  flex: 0 0 38px;
}
.ogp .bs__body { flex: 1; min-width: 0; }
.ogp .bs__user { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ogp .bs__name { font-weight: 600; font-size: 14px; color: #0B0F19; }
.ogp .bs__handle { color: #788896; font-size: 13px; }
.ogp .bs__text {
  font-size: 14px;
  color: #0B0F19;
  line-height: 1.4;
  margin: 4px 0 8px;
}
.ogp .bs__card {
  border: 1px solid #E1E8ED;
  border-radius: 8px;
  overflow: hidden;
}
.ogp .bs__img {
  aspect-ratio: 1.91 / 1;
  background-size: cover;
  background-position: center;
  background-color: #1c1e21;
}
.ogp .bs__meta { padding: 8px 12px 10px; }
.ogp .bs__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #0B0F19;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .bs__desc {
  font-size: 12px;
  color: #788896;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ogp .bs__host {
  font-size: 12px;
  color: #788896;
}