/* ══════════════════════════════════════════════════════════════════
   조각-영역.css — 7영역 카드 그리드 (O4)
   대문.css(--dm-* 토큰)를 소비만 한다. 색·둥글기·그림자 신규 리터럴 0건.
   정본 근거: 디자인카탈로그.md #4 리스트카드 · #9 hover 그림자 · #21 구분선
             여백은 --dm-sp-1…10만(임의 24/32px 금지)
   전제: <link> 순서 = 크라우니디자인.css → 대문.css → 조각-영역.css
   ══════════════════════════════════════════════════════════════════ */

/* 3열 고정(태블릿 정본 1194px 기준) — dm-grid의 auto-fit을 대문 영역에서만 명시 3열로 */
#areasGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--dm-sp-5);
  text-align:left;
}
@media (max-width:980px){ #areasGrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ #areasGrid{ grid-template-columns:1fr; } }

/* 카드 — 골격은 .dm-card가 담당. 여기서는 7영역 배치용 여백 리듬만 */
#areasGrid > .dm-card{
  gap:var(--dm-sp-4);
  padding:var(--dm-sp-6) var(--dm-sp-7);
  text-decoration:none;
  color:var(--dm-ink);
}
/* 설명 본문 — 카드 높이 균일화(3줄 클램프) */
#areasGrid > .dm-card > .dm-body{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13px;
}
/* hover — 정본 그림자 토큰만(--dm-shadow-up), 들어올림은 transform */
#areasGrid > .dm-card-link:hover{
  transform:translateY(-3px);
  box-shadow:var(--dm-shadow-up);
  border-color:var(--dm-accent);
}
/* 아이콘 원 — 카드 안에서는 정본 48px 그대로, 축소 금지 */
#areasGrid .dm-icon{ flex:none; }

/* 섹션 제목 줄 — 필 칩 + 가는 선 */
#areasWrap > .dm-row{ gap:var(--dm-sp-4); }
#areasWrap > .dm-row > .dm-hr{ min-width:var(--dm-sp-10); }

/* 접근성 — 키보드 포커스 링(정본 아바타 링 토큰 재사용) */
#areasGrid > .dm-card-link:focus-visible{
  outline:none;
  box-shadow:var(--dm-ring-accent);
}

/* 모션 축소 선호 */
@media (prefers-reduced-motion:reduce){
  #areasGrid > .dm-card-link{ transition:none; }
  #areasGrid > .dm-card-link:hover{ transform:none; }
}