/* 치아미백 — 시안 전용 레이어.
   공통 레이어(newn-figma-2nd.css)에 없는 치수만 적는다. 공통 레이어는 고치지 않는다. */

/* ── 섹션 바탕과 위아래 여백 ───────────────────────── */
.fg14-sec--def     { background: #ffffff; padding: 170px 0; }
.fg14-sec--point   { background: #f5f5f5; padding: 140px 0; }
.fg14-sec--target  { background: #ffffff; padding: 130px 0 160px; }
.fg14-sec--special { background: #f5f5f5; padding: 170px 0 277px; }

/* ── 정의 — 머리 아래 사진 ─────────────────────────── */
.fg14-defmedia { margin-top: 60px; }
.fg14-defmedia__img {
  width: 100%;
  height: 250px;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}

/* ── 미백 종류 3단 ─────────────────────────────────── */
.fg14-types { display: flex; gap: 26px; align-items: center; margin-top: 60px; }
.fg14-type { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.fg14-type__media {
  width: 100%;
  height: 326px;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  background: rgba(0, 0, 0, 0.06);
}
/* 사진과 글상자 사이가 붙어 있다 — 테두리는 안쪽으로 그어 상자 크기를 바꾸지 않는다 */
.fg14-type__body {
  padding: 22px 30px;
  background: #ffffff;
  border: 1px solid #e4e4e4;
  display: flex;
  flex-direction: column;
}

/* ── 추천 대상 — 2행 3칸 ───────────────────────────── */
.fg14-targets { display: flex; flex-direction: column; gap: 14px; margin-top: 60px; }
.fg14-targets__row { display: flex; gap: 14px; }
.fg14-target {
  flex: 1 1 0;
  min-width: 0;
  padding: 30px;
  border: 1px solid #e4e4e4;
  display: flex;
  flex-direction: column;
}

/* ── 특별함 — 머리 아래 카드 줄 ────────────────────── */
/* 공통 줄(.fg2-rail)의 아래 여백은 시안 높이를 넘기므로 이 지면에서만 없앤다 */
.fg14-rail { margin-top: 60px; padding-bottom: 0; scrollbar-width: none; }
.fg14-rail::-webkit-scrollbar { height: 0; }

/* ── 좁은 화면 ─────────────────────────────────────
   폰에서는 넓은 여백과 고정 높이를 줄인다. 가로로 미는 줄은 그대로 둔다. */
@media (max-width: 1023px) {
  .fg14-sec--def,
  .fg14-sec--point,
  .fg14-sec--target,
  .fg14-sec--special { padding: 56px 0; }
  .fg14-defmedia { margin-top: 28px; }
  .fg14-defmedia__img { height: 200px; }
  .fg14-types { flex-direction: column; gap: 20px; margin-top: 28px; align-items: stretch; }
  .fg14-type__media { height: 220px; }
  .fg14-type__body { padding: 20px 22px; }
  .fg14-targets { margin-top: 28px; gap: 12px; }
  .fg14-targets__row { flex-direction: column; gap: 12px; }
  .fg14-target { padding: 20px; }
  .fg14-rail { margin-top: 28px; }
}