/* 🏠260929 이사님 「소개 페이지에도 에메른 넣어」 — emoren.ai/family/ «우리 가족 에메른» 구역(.fle)
   짝 = family/index.html #emern · 글 = Gemini(_tools/fam_buddy_game/copy_landing_emern_260929.json) · 화면 사진 = 실제 방 화면 견본(가상 가족 · /fam/assets/landing-emern-260929/)
   색 = 핑크·그린 파스텔(보라 금지) · 밤 화면 쪽만 남색 · 글꼴·제목·버튼 = 랜딩 공용(.fl-kicker · .fl-h2 · .fl-lede · .fl-go) */
.fle{position:relative;padding:92px 0 96px;background:linear-gradient(180deg,#fff6f9 0%,#fbfcf6 55%,#f2faf5 100%);overflow:hidden}
.fle-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-areas:"copy phones" "points phones" "go phones";column-gap:60px;align-items:start}
.fle-copy{grid-area:copy}
.fle-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:5px 16px 5px 5px;border-radius:99px;background:#fff;border:1px solid #ffd3e2;box-shadow:0 6px 18px rgba(255,107,157,.12);font-size:15px;font-weight:800;color:#b23a67;letter-spacing:-.01em}
.fle-badge img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff5f9}
.fle .fl-lede{max-width:560px}
.fle-phones{grid-area:phones;position:relative;width:100%;aspect-ratio:1/1.38;margin:0}
.fle-phone{position:absolute;margin:0;border:9px solid #273e33;border-radius:36px;background:#273e33;box-shadow:0 24px 54px rgba(36,71,50,.16)}
.fle-phone img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;border-radius:27px;background:#f6f8f4}
.fle-phone.day{left:0;top:0;width:60%;transform:rotate(-3deg);z-index:2}
.fle-phone.night{right:0;top:9%;width:52%;transform:rotate(4deg);z-index:1;border-color:#1f2d48;background:#1f2d48}
.fle-phone figcaption{position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);white-space:nowrap;padding:8px 15px;border-radius:99px;background:#fff;border:1px solid #cfe9da;font-size:13px;font-weight:800;color:#177a47;box-shadow:0 6px 16px rgba(22,179,100,.14)}
.fle-phone.night figcaption{left:auto;right:-8px;transform:none;border-color:#d9e0f0;color:#2c3f66;box-shadow:0 6px 16px rgba(44,63,102,.14)}   /* 낮 휴대폰에 안 가리게 오른쪽 끝 */
.fle-points{grid-area:points;display:grid;gap:12px;margin:30px 0 0}
.fle-point{position:relative;padding:19px 22px 19px 64px;background:#fff;border:1px solid #e6ede6;border-radius:20px;box-shadow:0 8px 22px rgba(49,102,77,.05)}
.fle-point .n{position:absolute;left:20px;top:19px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#FF6B9D;color:#fff;font-size:12px;font-weight:850}
.fle-point:nth-child(2) .n{background:#16B364}
.fle-point:nth-child(3) .n{background:#2c3f66}
.fle-point b{display:block;margin:4px 0 6px;font-size:18px;font-weight:850;color:#1d3a2b;letter-spacing:-.02em}
.fle-point p{margin:0;font-size:15px;line-height:1.72;color:#5d7064;word-break:keep-all}
.fle .fl-go{grid-area:go;justify-self:start;margin-top:28px}
@media(max-width:980px){
  .fle{padding:68px 0 72px}
  .fle-in{grid-template-columns:1fr;grid-template-areas:"copy" "phones" "points" "go"}
  .fle-phones{width:min(100%,500px);margin:34px auto 26px}
  .fle-points{margin-top:12px}
  .fle .fl-go{justify-self:center}
}
@media(max-width:600px){
  .fle{padding:54px 0 58px}
  .fle-badge{font-size:14px;padding:4px 13px 4px 4px}.fle-badge img{width:32px;height:32px}
  .fle-phone{border-width:6px;border-radius:24px}.fle-phone img{border-radius:18px}
  .fle-phone figcaption{font-size:11.5px;padding:6px 10px;bottom:-15px}
  .fle-point{padding:16px 16px 16px 54px;border-radius:18px}
  .fle-point .n{left:14px;top:16px;width:28px;height:28px}
  .fle-point b{font-size:16.5px}.fle-point p{font-size:14.5px}
}

/* 폰(≤600): 두 휴대폰이 겹쳐 밤 꼬리표가 가려진다 → 꼬리표는 사진 아래 한 줄(.fle-tags) · 넓은 화면에선 휴대폰에 붙은 꼬리표 */
.fle-tags{display:none}
@media(max-width:600px){
  .fle-in{grid-template-areas:"copy" "phones" "tags" "points" "go"}
  .fle-phone figcaption{display:none}
  .fle-phones{margin-bottom:14px}
  .fle-tags{grid-area:tags;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 6px}
  .fle-tags span{padding:6px 12px;border-radius:99px;background:#fff;border:1px solid #cfe9da;font-size:12px;font-weight:800;color:#177a47}
  .fle-tags .night{border-color:#d9e0f0;color:#2c3f66}
}

/* 🏠260929 알 4단계 줄(.fle-eggs) — 알 3장 + 나온 에메른 얼굴 · 넓은 화면 = 글 칸 아래 4칸 · 좁은 화면 = 2×2 */
.fle-in{grid-template-areas:"copy phones" "eggs phones" "points phones" "go phones"}
.fle-eggs{grid-area:eggs;margin:28px 0 0;padding:18px 18px 16px;background:#fff;border:1px solid #e6ede6;border-radius:22px;box-shadow:0 8px 22px rgba(49,102,77,.05)}
.fle-eggs-t{margin:0 0 12px;font-size:15px;font-weight:850;color:#177a47;letter-spacing:-.01em}
.fle-eggs ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:egg}
.fle-eggs li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 4px 6px;border-radius:16px;background:linear-gradient(180deg,#f5fbf7,#fff)}
.fle-eggs li::before{counter-increment:egg;content:counter(egg);position:absolute;left:8px;top:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#16B364;color:#fff;font-size:11px;font-weight:850}
.fle-eggs li.s4::before{background:#FF6B9D}
.fle-eggs img{width:84px;height:84px;object-fit:contain}
.fle-eggs li.s4 img{width:72px;height:72px;margin:6px 0;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #ffe1ec}
.fle-eggs b{font-size:14px;font-weight:850;color:#1d3a2b;letter-spacing:-.02em}
.fle-eggs span{font-size:12.5px;line-height:1.5;color:#5d7064;word-break:keep-all}
@media(max-width:980px){.fle-in{grid-template-areas:"copy" "eggs" "phones" "points" "go"}}
@media(max-width:600px){.fle-in{grid-template-areas:"copy" "eggs" "phones" "tags" "points" "go"}.fle-eggs{padding:14px 12px 12px}.fle-eggs ol{grid-template-columns:repeat(2,minmax(0,1fr))}.fle-eggs img{width:76px;height:76px}.fle-eggs li.s4 img{width:64px;height:64px}}