/* 업소용 초음파 튀김기 (Figma: 9 업소용 초음파 튀김기 pc 1:2648 · tablet 1:2604 · mobile 1:2561) */

.fr-body { padding: 84px 0 150px; }
.fr-wrap { width: 900px; margin: 0 auto; }
.fr-sec + .fr-sec { margin-top: 150px; }

/* 화면별 줄바꿈 (Figma 텍스트 줄바꿈 그대로) */
.fr-body br[class] { display: none; }
@media (min-width: 1024px) { .fr-body br.fr-bp { display: inline; } }
@media (min-width: 768px) and (max-width: 1023px) { .fr-body br.fr-bt { display: inline; } }
@media (max-width: 767px) { .fr-body br.fr-bm { display: inline; } }

.fr-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }

/* ── 1. 제품 정보 ── */
.fr-name { text-align: center; }
.fr-prod { display: flex; align-items: center; gap: 50px; width: 800px; margin: 50px auto 0; }
.fr-pic { flex: none; width: 350px; height: 350px; border-radius: 20px; overflow: hidden; }
.fr-pic img { width: 100%; height: 100%; object-fit: contain; }
.fr-spec { flex: none; display: flex; margin: 0; flex-direction: column; gap: 20px; width: 420px; font-size: 15px; }
.fr-row { display: grid; grid-template-columns: 110px 300px; column-gap: 10px; align-items: start; }
.fr-row dt { height: 18px; font-weight: 600; line-height: 20px; letter-spacing: -0.12px; color: #000; }
.fr-row dd { margin: 0; font-weight: 500; line-height: 20px; letter-spacing: -0.12px; color: #707070; }
.fr-row:first-child dt { letter-spacing: 0.196px; }

/* ── 2. 특징 카드 ── */
.fr-feat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 24px;
  height: 564px;
  margin-top: 50px;
}
.fr-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 35px 30px;
  border-radius: 20px;
  overflow: hidden;
}
.fr-card-bg { position: absolute; inset: 0; z-index: -1; }
.fr-card-bg img { width: 100%; height: 100%; object-fit: cover; }
.fr-card h3 { width: 100%; font-size: 20px; font-weight: 600; line-height: normal; color: #000; }
.fr-card p { width: 100%; font-size: 15px; font-weight: 500; line-height: 1.3; color: #707070; }

/* ── 3. 비교표 ── */
.fr-compare { display: block; margin-top: 50px; }
.fr-compare img { width: 100%; height: auto; }

/* ───────── 태블릿 (디자인 800) ───────── */
@media (max-width: 1023px) {
  .fr-body { padding: 78px 0 100px; }
  .fr-wrap { width: min(650px, 100% - 40px); }
  .fr-sec + .fr-sec { margin-top: 100px; }
  .fr-title { font-size: 25px; }

  .fr-prod { gap: 36.111px; width: 592px; max-width: 100%; margin-top: 36.111px; }
  .fr-pic { width: 252.778px; height: 252.778px; border-radius: 14.444px; }
  .fr-spec { gap: 14.444px; width: 303.333px; font-size: 13px; }
  .fr-row { grid-template-columns: 79.444px 216.667px; column-gap: 7.222px; }
  .fr-row dt { height: 13px; }

  .fr-feat-grid { gap: 15px; height: 407.333px; margin-top: 30px; }
  .fr-card { gap: 7.222px; padding: 25.278px 21.667px; }
  .fr-card h3 { font-size: 15px; }
  .fr-card p { font-size: 12px; }

  .fr-compare { margin-top: 30px; }
}

/* ───────── 모바일 (디자인 375) ───────── */
@media (max-width: 767px) {
  .fr-body { padding: 83px 0 50px; }
  .fr-wrap { width: calc(100% - 54px); }
  .fr-sec + .fr-sec { margin-top: 30px; } /* Figma 모바일: 섹션 간격 30 */
  .fr-title { font-size: 20px; }

  .fr-prod { flex-direction: column; align-items: flex-start; justify-content: center; width: 250px; }
  .fr-spec { width: 251px; }

  .fr-feat-grid { gap: 10px 11px; height: 332px; }
  .fr-card { border-radius: 14.444px; }
}