@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   랜딩 — 구조는 빌더가, 조판은 «코드» 가 잡는다.

   ☠ **격자를 빌더에 두지 않는다.** 잠금을 안 쓰기로 했으므로(대표님 2026-09-02)
      고객이 CSS 를 만지면 개수 감당이 깨진다. 격자는 여기 남는다.
   ☠ `repeat(auto-fit, minmax(a, b))` 는 칸 수를 «b» 로 센다 — **상한은 반드시 `1fr`**.
      고정 길이를 주면 3열이 2열로 줄어든다(실측: 402 로 주니 3개가 2+1).
   ⚠ 하한은 «내용에서» 나온 값이다. 다른 템플릿에 그대로 옮기지 말 것 — 거기서 다시 잰다.
   ⚠ 한글 12px 하한 · 입력칸 16px(iOS 확대 방지)
   ══════════════════════════════════════════════════════════════ */

.ld-types{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px }
/* ⚠ 평면이 «1개» 인 단지가 실제로 있다(단일 평형). 전폭이 되면 오히려 허전하다 */
.ld-types:has(> :only-child){ max-width:640px; margin-left:auto; margin-right:auto }

.ld-card{ background:#fff; border:1px solid var(--rule,#E4E0D6); border-radius:14px; overflow:hidden }
.ld-card .ld-plan{ display:block; aspect-ratio:4/3; overflow:hidden; background:#F2F0EA }
/* ☠ 사진 칸을 `<span>` 으로 두면 `aspect-ratio`·`overflow` 가 «조용히 무시» 된다 — 블록으로 둔다 */
.ld-card .ld-plan img{ width:100%; height:100%; object-fit:contain; display:block }
.ld-card .ld-b{ padding:16px 18px 18px }
.ld-card .ld-ty{ display:flex; align-items:baseline; gap:10px }
.ld-card .ld-ty b{ font-size:20px; font-weight:800 }
.ld-card .ld-ty span{ font-size:14px; color:var(--ink-3,#5D6572) }
/* ⚠ `flex-wrap` 이 없으면 스펙이 4개↑에서 넘친다. 「펜트리」 하나만 더해도 그렇다 */
.ld-card .ld-meta{ margin-top:8px; font-size:14px; color:var(--ink-3,#5D6572);
  display:flex; gap:14px; flex-wrap:wrap }

/* ⚠ 모바일은 «일부러» 한 열이다. auto-fit 을 두면 하한 때문에 어중간하게 붙는다 */
@media(max-width:767px){ .ld-types{ grid-template-columns:1fr; gap:14px } }