@charset "utf-8";
/* =========================================================
   ELOREA 리디자인 시안 — scent-finder.html 전용
   퀴즈 카드 · 선택지(.quiz__card · .opt · .quiz__progress)는 style.css를 그대로 쓰고,
   결과 화면의 분포 막대 · 추천 향 카드와 향 노트 사전만 이 파일에서 정의한다.
   ========================================================= */

/* ---------- 서브 히어로 (텍스트형) ---------- */
html[lang="en"] .sf-hero .sub-hero__word { font-size: clamp(72px, 17vw, 240px); }

/* ---------- 02 퀴즈 ---------- */
#quiz .quiz__intro .sec-head__num { margin-bottom: 10px; }
.quiz__last a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(246, 241, 234, .5); }
.quiz__last a:hover { text-decoration-color: currentColor; }
.sf-result:focus-visible { outline: 2px solid var(--cream); outline-offset: 8px; }
.sf-result__head { font-weight: 400; }

/* 답변 분포 */
.sf-breakdown { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(246, 241, 234, .22); }
.sf-breakdown__title, .sf-picks__title { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: rgba(246, 241, 234, .78); }
.sf-breakdown__list { display: grid; gap: 6px; margin-top: 12px; }
.sf-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-size: 13px; line-height: 1.4; color: rgba(246, 241, 234, .82); }
.sf-bar__track { position: relative; height: 4px; overflow: hidden; background: rgba(246, 241, 234, .16); }
.sf-bar__track i { position: absolute; inset: 0 auto 0 0; transition: width .6s var(--ease); }
.sf-bar__count { text-align: right; font-family: var(--f-en); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.sf-bar.is-best { color: #fff; font-weight: 600; }

/* 추천 향 두 가지 */
.sf-picks__title { margin-top: 24px; }
.sf-picks { display: grid; gap: 10px; margin-top: 12px; }
.sf-pick {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 12px 10px 10px; border: 1px solid rgba(246, 241, 234, .22); background: rgba(246, 241, 234, .04);
}
.sf-pick__thumb { width: 60px; aspect-ratio: 4 / 5; }
.sf-pick__thumb .still__obj { width: 62%; margin-bottom: 8%; }
.sf-pick__type { font-size: 12px; line-height: 1.4; color: rgba(246, 241, 234, .72); }
.sf-pick__name { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.sf-pick__name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sf-pick__price { margin-top: 2px; font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(246, 241, 234, .86); }
.sf-pick__add {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(246, 241, 234, .6); font-size: 13px; font-weight: 500; color: var(--cream);
  transition: background-color .25s, color .25s;
}
.sf-pick__add svg { width: 16px; height: 16px; }
.sf-pick__add:hover { background: var(--cream); color: var(--umber); }
.sf-result .quiz__result-cta { margin-top: 24px; }
@media (min-width: 768px) {
  .sf-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 03 향 노트 사전 ---------- */
.sf-note .card__media { align-items: flex-end; justify-content: center; }
.sf-note__obj { position: relative; width: 84%; height: auto; margin-bottom: 2%; filter: drop-shadow(0 16px 20px rgba(60, 20, 8, .2)); transition: transform .7s var(--ease); }
.sf-note:hover .sf-note__obj { transform: scale(1.03); }
.sf-note__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sf-note__head .card__eyebrow { margin-bottom: 0; }
.sf-note__sub { margin: 20px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.sf-note__tags li { padding: 3px 10px; font-size: 12px; color: var(--muted); }
.sf-note__products { display: grid; gap: 0; }
.sf-note__products a {
  display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
.sf-note__products a:hover { color: var(--coral-deep); text-decoration-color: currentColor; }

/* ---------- 04 다음 단계 ---------- */
.sf-arch {
  background:
    radial-gradient(90% 60% at 50% 30%, rgba(176, 120, 76, .45) 0%, rgba(176, 120, 76, 0) 70%),
    linear-gradient(170deg, #694630 0%, var(--umber) 55%, var(--umber-deep) 100%);
}
.sf-arch .store__window { top: 14%; width: 30%; height: 64%; }
.sf-arch__label {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
  font-family: var(--f-en); font-size: 10px; letter-spacing: .24em; color: rgba(246, 241, 234, .72);
}
.card__media .sf-gift { width: 28%; margin-bottom: 4%; }

@media (prefers-reduced-motion: reduce) {
  .sf-bar__track i, .sf-note__obj { transition: none; }
  .sf-note:hover .sf-note__obj { transform: none; }
}