@charset "utf-8";
/* =========================================================
   ELOREA 리디자인 시안 — home-fragrance.html 전용 (page-home-fragrance.css)
   style.css · sub.css 다음에 불러온다. 토큰(:root)은 style.css 그대로 사용.
   01 홈 컬렉션 카드   02 공간별 향 제안   03 사용법 스플릿   04 관리 · 안전 (다크)
   ========================================================= */

/* ---------- 01. 홈 컬렉션 ---------- */
.hf-product .card__media .still__obj { width: 50%; }
.hf-tbd { color: var(--muted); font-weight: 500; }
.hf-add { min-height: 44px; padding: 0 20px; }
@media (max-width: 767px) {
  .hf-product .card__title { font-size: 15px; }
  .hf-product .card__text { font-size: 13px; }
  .hf-product .card__meta { font-size: 14px; }
  .hf-add { width: 100%; padding: 0 12px; }
}

/* ---------- 02. 공간별 향 제안 ---------- */
.hf-room { box-shadow: inset 0 3px 0 var(--note, var(--coral)); }
.hf-room .card__icon { width: 36px; height: 36px; color: var(--text); }
.hf-room__note { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--ochre); }
.hf-room .card__text { margin-top: 10px; }

/* ---------- 03. 디퓨저 사용법 ---------- */
.hf-howto .split__media { aspect-ratio: 4 / 3; }
.hf-howto .split__media .still__obj { width: 34%; margin-bottom: 7%; }
.hf-howto .split__body .sec-head { margin-bottom: 32px; }
@media (min-width: 768px) {
  .hf-howto { align-items: start; }
  .hf-howto .split__media { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--header-h) + var(--lnb-h) + 24px); }
  .hf-howto .split__media .still__obj { width: 44%; }
}

/* ---------- 04. 관리 · 안전 안내 (크림 — 바로 아래 엄버 CTA 밴드와 구분) ---------- */
@media (min-width: 1280px) {
  .hf-care { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 96px; align-items: start; }
  .hf-care .sec-head { grid-row: span 2; margin-bottom: 0; }
  .hf-care .note-box { grid-column: 2; }
}