/* 첫 화면 배너 아래 홍보 줄(2026-10-17, 시안 v4). 카드 모양은 home-promo.js promoCardHtml. 관리자 미리보기도 이 파일을 쓴다.
   왼쪽 작은 선 아이콘 + 카테고리명·제목·요약·주소를 한 세로선에 맞춤. 오른쪽 아래 빈자리엔 그 사이트의 앱 아이콘(웹서비스는 파비콘)을 자동으로(2026-10-17). 폰에서는 숨김(home.css) */
.promo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 6px 0 0; }
.promo-card {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 12px; align-content: start;
  padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 3px;
  background: color-mix(in srgb, #fff 42%, transparent); color: var(--ink); text-decoration: none;
  transition: border-color .25s, background .25s, transform .25s;
}
.promo-card:hover { border-color: color-mix(in srgb, var(--ink) 32%, transparent); background: color-mix(in srgb, #fff 75%, transparent); transform: translateY(-2px); }
.promo-ic { grid-row: 1; align-self: center; width: 20px; height: 20px; color: var(--c, var(--muted)); }
.promo-ic svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.promo-app { grid-column: 3; margin-left: 4px; grid-row: 2 / span 3; align-self: end; display: block; object-fit: contain; }
.promo-app.app { width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.promo-app.fav { width: 28px; height: 28px; margin: 0 6px 6px 0; }
.promo-kind { grid-column: 2 / -1; align-self: center; display: flex; justify-content: space-between; gap: 8px; font: 600 10px/1 var(--sans); letter-spacing: .18em; color: var(--faint); white-space: nowrap; }
.promo-kind i { font-style: normal; letter-spacing: 0; font-size: 12px; transition: color .25s; }
.promo-card:hover .promo-kind i { color: var(--ink); }
.promo-title { grid-column: 2; margin-top: 10px; font: 700 15.5px/1.35 var(--serif); }
.promo-sum { grid-column: 2; margin-top: 6px; font: 400 12.5px/1.6 var(--serif); color: var(--muted); word-break: keep-all; }
.promo-host { grid-column: 2; padding-top: 10px; font: 400 10.5px/1 var(--sans); letter-spacing: .06em; color: var(--faint); }
.promo-host b { font-weight: 700; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .promo-card { transition: none; } .promo-card:hover { transform: none; } }