@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* ============ 선물픽 디자인 시스템 ============
   뚝딱툴 시스템 기반. 흰 바탕 + 중립 그레이, 포인트는 웜 레드 하나.
   radius 8/12/16, 그림자는 낮고 부드럽게. 모바일 우선. */
:root{
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#f2f4f6;
  --ink:#191f28; --muted:#4e5968; --faint:#606a77;
  --line:#e5e8eb; --border:#d7dce2;
  --accent:#c2493d; --accent-dark:#9c352b; --accent-soft:#fbeeec;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(25,31,40,.04),0 4px 16px rgba(25,31,40,.05);
  --maxw:720px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  letter-spacing:-.01em; line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection{ background:var(--accent); color:#fff; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* 헤더 */
header.site{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand{ display:inline-flex; align-items:center; font-weight:800; font-size:19px; letter-spacing:-.04em; color:var(--ink); }
.brand::before{ content:""; width:10px; height:10px; border-radius:3px; background:var(--accent); margin-right:8px; flex:none; }
.brand:hover{ text-decoration:none; color:var(--accent); }
nav.top{ display:flex; gap:6px; }
nav.top a{ color:var(--muted); font-size:14px; font-weight:600; padding:7px 10px; border-radius:var(--r-sm); }
nav.top a:hover{ color:var(--ink); background:var(--surface-2); text-decoration:none; }

/* 히어로 */
.hero{ padding:44px 0 6px; }
.hero h1{ font-size:clamp(1.9rem,1.3rem+2.8vw,2.6rem); font-weight:800; letter-spacing:-.045em; margin:0; line-height:1.15; text-wrap:balance; }
.hero p{ color:var(--muted); font-size:16.5px; margin:12px 0 8px; max-width:34em; text-wrap:pretty; }

/* 페이지 상단 */
.crumb{ font-size:13px; color:var(--faint); margin:20px 0 0; } .crumb a{ color:var(--faint); }
h1.page{ font-size:clamp(1.55rem,1.2rem+1.6vw,1.9rem); letter-spacing:-.04em; margin:10px 0 6px; font-weight:800; line-height:1.2; text-wrap:balance; }
.lead{ color:var(--muted); font-size:15.5px; margin:0 0 8px; text-wrap:pretty; }
.lead.sub{ font-size:14px; color:var(--faint); }

/* 선물 고르기(홈 피커) */
.picker{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; margin:22px 0; box-shadow:var(--shadow); }
.picker fieldset{ border:none; margin:0 0 16px; padding:0; }
.picker fieldset:last-of-type{ margin-bottom:0; }
.picker legend{ font-weight:700; font-size:13.5px; color:var(--muted); padding:0; margin-bottom:8px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips label{ position:relative; }
.chips input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.chips span{ display:inline-block; padding:9px 15px; border:1px solid var(--border); border-radius:999px;
  background:var(--surface); font-size:14.5px; font-weight:600; color:var(--muted); cursor:pointer;
  transition:border-color .15s,background .15s,color .15s; }
.chips label:hover span{ border-color:var(--accent); color:var(--ink); }
.chips input:checked+span{ background:var(--accent); border-color:var(--accent); color:#fff; }
.chips input:focus-visible+span{ outline:3px solid var(--accent); outline-offset:2px; }
.pick-hint{ color:var(--faint); font-size:13.5px; margin:14px 0 0; }

/* 결과·선물 카드 */
.count{ font-size:14px; color:var(--muted); margin:20px 0 10px; font-weight:600; }
.count b{ color:var(--accent); }
.gifts{ display:grid; gap:10px; margin:0 0 8px; }
.gift{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 18px 14px; transition:border-color .15s,box-shadow .15s; }
.gift:hover{ border-color:var(--border); box-shadow:var(--shadow); }
.gift h3{ margin:0; font-size:16.5px; font-weight:700; letter-spacing:-.025em; }
.gift h3 a{ color:var(--ink); }
.gift h3 a:hover{ color:var(--accent); text-decoration:none; }
.gift .why{ color:var(--muted); font-size:14px; margin:6px 0 10px; line-height:1.65; }
.gift .meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; }
.gift .price{ font-size:13.5px; font-weight:700; color:var(--faint); background:var(--surface-2); border-radius:999px; padding:4px 11px; }
.gift .go{ font-size:13.5px; font-weight:700; color:var(--accent); }
.gift .go::after{ content:" →"; }

/* 예산 섹션·점프 내비 */
.jump{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 4px; }
.jump a{ font-size:13px; font-weight:600; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:6px 12px; }
.jump a:hover{ color:var(--accent); background:var(--accent-soft); text-decoration:none; }
.budget-sec{ margin:26px 0 0; }
.budget-sec h2{ font-size:17px; font-weight:800; letter-spacing:-.03em; margin:0 0 10px 2px; scroll-margin-top:70px; }

/* 조합 페이지 링크 그리드(홈) */
.combos-sec{ margin:34px 0 0; }
.combos-sec>h2{ font-size:15px; font-weight:700; color:var(--faint); letter-spacing:-.02em; margin:0 0 10px 2px; }
.combos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.combos a{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 14px; color:var(--ink); font-size:13.5px; font-weight:600;
  transition:border-color .15s,color .15s; }
.combos a:hover{ text-decoration:none; border-color:var(--accent); color:var(--accent); }

/* 본문 프로즈·관련 링크 */
.prose h2{ font-size:18px; margin:28px 0 8px; letter-spacing:-.03em; font-weight:800; }
.prose p{ color:var(--muted); font-size:15px; margin:0 0 12px; line-height:1.75; } .prose p strong{ color:var(--ink); }
.prose ul,.prose ol{ color:var(--muted); font-size:15px; margin:0 0 12px; padding-left:22px; line-height:1.75; }
.prose li{ margin:4px 0; }
.related{ margin-top:10px; padding:14px 16px; background:var(--surface-2); border-radius:var(--r);
  font-size:13.5px; color:var(--muted); line-height:1.9; }

/* 푸터 */
footer.site{ border-top:1px solid var(--line); margin-top:52px; background:var(--surface); }
footer.site .wrap{ padding:24px 20px 34px; }
.foot-top{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.foot-top a{ color:var(--faint); font-size:13px; font-weight:600; }
.foot-top a:hover{ color:var(--ink); }
.foot-note{ color:var(--faint); font-size:12px; margin-top:12px; }

a:focus-visible,button:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }