/* ============ Feature rows ============ */
.feature {
  position: relative;
  z-index: 1;
}
.feature .glow {
  width: 500px;
  height: 500px;
  opacity: 0.22;
}
/* [F10] 설명 칸은 글 폭만큼(max-content), 폰 칸이 나머지 — 설명 끝에서 폰까지 간격을 모든 행에서 80px 로 동일하게
   (예전 1fr 1fr 은 01 처럼 글이 짧은 행에서 남는 칸 폭만큼 간격이 벌어졌다: 01 247px · 02 78px · 03 130px) */
.frow {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 80px;
  align-items: center;
  padding: 40px 0; /* [S2] 70 → 40px (기능 행 사이 140 → 80px) */
}
/* [S2] 섹션의 마지막 행은 아래 여백 없이 섹션 여백만 */
.frow:last-child {
  padding-bottom: 0;
}
.frow.rev {
  grid-template-columns: minmax(0, 1fr) max-content;
}
.frow.rev .fcopy {
  order: 2;
}
.fnum {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--accent);
  opacity: 0.85;
}
.fcopy h3 {
  --fs: clamp(26px, 3.6vw, 42px);
  font-size: var(--fs);
  margin: 14px 0 18px;
}
.fcopy p {
  color: var(--muted);
  font-size: 17px;
  max-width: 480px; /* [H4] 460 → 480: 02 몰입 둘째 문장(469px)이 한 줄로 */
  margin-bottom: 24px;
}
.flist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink);
  font-size: 15px;
}
.flist li .ck {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(248, 87, 180, 0.16);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  margin-top: 1px;
}
.fvisual {
  position: relative;
  display: flex;
  justify-content: flex-start; /* [F10] 폰을 설명 쪽에 붙임 */
}
.frow.rev .fvisual {
  justify-content: flex-end;
}
.fvisual .phone {
  --pw: 280px; /* [D1] 높이 등은 비율로 계산 (phone-mockup.css) */
}