/* ---------- WHAT WE DO (하는 일) ----------
   히어로와 About 사이. 카드 대신 가는 세로선으로 나눈 4칸 — 제품 목록과 같은 에디토리얼 톤 (2026-10-17) */
.wwd { padding: 0 96px 96px; }
.wwd__head {
  padding: 76px 0 36px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wwd__head span:last-child { font-size: 14px; color: var(--muted); }

.wwd__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.wwd__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 28px 30px;
  border-left: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.wwd__item:first-child { border-left: none; padding-left: 4px; }
.wwd__item:hover { background: var(--hover); }

.wwd__num {
  font-family: var(--font-point);
  font-size: 15px;
  color: var(--coral);
}
.wwd__title {
  font-family: var(--font-point);
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.wwd__desc {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  flex: 1;
}
.wwd__tag { font-size: 13px; color: var(--fg); letter-spacing: 0.2px; }
.wwd__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral);
}
.wwd__item:hover .wwd__more { color: var(--fg); }

@media (max-width: 1100px) {
  .wwd__grid { grid-template-columns: repeat(2, 1fr); }
  .wwd__item:nth-child(odd) { border-left: none; padding-left: 4px; }
  .wwd__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .wwd { padding: 0 28px 64px; }
  .wwd__head { padding: 56px 0 24px; }
}

@media (max-width: 600px) {
  .wwd__grid { grid-template-columns: 1fr; }
  .wwd__item { border-left: none; padding: 26px 4px; gap: 10px; }
  .wwd__item + .wwd__item { border-top: 1px solid var(--line); }
  .wwd__title { font-size: 21px; }
}