@charset "utf-8";
/* =========================================================
   ELOREA 리디자인 시안 — gift.html 전용 (page-gift.css)
   style.css · sub.css 다음에 불러온다. 토큰(:root)은 style.css 그대로 사용.
   01 기프트 세트   02 가격대별 표   03 마음별 추천 (다크)
   04 메시지 카드 미리보기 (js/page-gift.js)   05 선물 FAQ
   ========================================================= */

/* ---------- 01. 기프트 세트 ---------- */
.gf-sets { gap: 32px 24px; }
.gf-set .card__media .still__obj { width: 24%; margin-bottom: 5%; }
.gf-set .card__media .still__obj--wide { width: 64%; margin-bottom: 8%; }
.gf-add { min-height: 44px; padding: 0 20px; }
.gf-tbd { color: var(--muted); font-weight: 500; }
@media (min-width: 1280px) { .gf-sets { gap: 24px; } }

/* ---------- 02. 가격대별 선물 ---------- */
.gf-table th a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.gf-table th a:hover { color: var(--coral-deep); text-decoration-color: currentColor; }
.gf-band {
  display: inline-block; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: #fff; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.gf-band--2 { background: #FBE3D9; border-color: #F2C1AE; }
.gf-band--3 { background: var(--umber); border-color: var(--umber); color: var(--cream); }
.gf-table .num { font-weight: 600; }

/* ---------- 03. 마음별 추천 (다크) ---------- */
.gf-moment .card__media .still__obj { width: 32%; margin-bottom: 6%; }
.gf-moment__pick { margin-top: 6px; font-family: var(--f-serif); font-size: 15px; line-height: 1.5; color: #F6C7B2; }
.gf-moment .card__more:hover { color: #fff; }
.gf-moment .card__more:focus-visible { outline-color: var(--cream); }

/* ---------- 04. 메시지 카드 미리보기 ---------- */
.gf-msg { display: grid; gap: 40px; }
.gf-msg__form .form-grid { gap: 22px 24px; }
.gf-tone span::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%;
  background: var(--tone); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.gf-tone input:checked + span::before { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.gf-msg .form__actions .btn { min-height: 44px; padding: 0 20px; }
.gf-preview__cap { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.gf-stage {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 340px; padding: 40px 16px 60px; background: #fff;
}
.gf-envelope {
  position: absolute; left: 50%; bottom: 26px; width: 84%; height: 52%;
  background: #EDE3D4; transform: translateX(-50%) rotate(2deg);
  box-shadow: 0 16px 30px -22px rgba(60, 20, 8, .5);
}
.gf-envelope::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%; background: #E2D4C1; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gf-card {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: 90%; max-width: 440px; min-height: 260px; padding: 26px 24px 20px;
  transform: rotate(-1.5deg); box-shadow: 0 26px 40px -26px rgba(60, 20, 8, .55);
  transition: color .35s, box-shadow .35s;
}
.gf-card--coral { background: linear-gradient(150deg, #F8714E 0%, var(--coral) 100%); color: var(--walnut-ink); }
.gf-card--cream { background: #FBF8F3; color: var(--umber); box-shadow: inset 0 0 0 1px var(--line), 0 26px 40px -26px rgba(60, 20, 8, .45); }
.gf-card--umber { background: radial-gradient(90% 70% at 80% 10%, #7A5339 0%, rgba(122, 83, 57, 0) 60%), var(--umber); color: var(--cream); }
.gf-card__to, .gf-card__from { font-family: var(--f-serif); font-size: 15px; line-height: 1.5; }
.gf-card__msg {
  flex: 1; margin: 14px 0 18px; font-family: var(--f-serif); font-weight: 300; font-size: 18px; line-height: 1.7;
  white-space: pre-line; overflow-wrap: anywhere;
}
.gf-card__from { text-align: right; }
.gf-card__mark {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid currentColor; opacity: .8;
  font-family: var(--f-en); font-size: 12px; font-weight: 500; letter-spacing: .42em; text-align: center;
}
.gf-card .is-empty { opacity: .6; }
@media (min-width: 1024px) {
  .gf-msg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .gf-preview { position: sticky; top: calc(var(--header-h) + var(--lnb-h) + 24px); }
}
@media (min-width: 1280px) {
  .gf-msg { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; }
  .gf-stage { min-height: 460px; padding: 56px 32px 76px; }
  .gf-card { padding: 36px 36px 26px; min-height: 300px; }
  .gf-card__msg { font-size: 21px; }
}

/* ---------- 05. 선물 FAQ ---------- */
.link-inline { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.link-inline:hover { color: var(--coral-deep); }
.gf-faq__note { font-size: 13px; color: var(--muted); }
@media (min-width: 1280px) {
  .gf-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 96px; align-items: start; }
  .gf-faq .sec-head { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gf-card { transition: none; }
}