:root { --ink:#1e2933; --muted:#66727d; --line:#dbe0dc; --paper:#fcfcfa; --cream:#f3eee3; --plum:#4d2740; --rose:#b15173; --leaf:#587262; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; }
.page { max-width:1100px; margin:auto; padding:32px 24px 84px; }
.back { display:inline-flex; color:var(--plum); font-size:14px; text-underline-offset:4px; }
.hero { max-width:760px; padding:68px 0 56px; }
.eyebrow,.step { color:var(--rose); font-size:12px; font-weight:750; letter-spacing:.12em; margin:0 0 16px; }
h1,h2,h3 { letter-spacing:-.045em; }
h1 { font:600 clamp(48px,8vw,88px)/.98 Georgia,"Noto Serif KR",serif; color:var(--plum); margin:0 0 24px; }
.lead { color:var(--muted); font-size:19px; max-width:640px; margin:0; }
.finder { background:var(--cream); padding:clamp(24px,5vw,56px); display:grid; grid-template-columns:minmax(200px,.7fr) minmax(0,1.45fr); gap:54px; border-radius:4px; }
.finder-intro h2,.results h2,.etiquette h2 { font:600 clamp(28px,4vw,46px)/1.08 Georgia,"Noto Serif KR",serif; color:var(--plum); margin:0 0 16px; }
.finder-intro p:not(.step),.etiquette p { color:var(--muted); margin:0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
label,legend { color:var(--ink); display:block; font-size:14px; font-weight:680; }
select { appearance:none; width:100%; border:1px solid #c8c0b6; border-radius:3px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234d2740' stroke-width='1.5'/%3E%3C/svg%3E") calc(100% - 14px) center/12px 8px no-repeat; color:var(--ink); font:15px inherit; margin-top:7px; padding:12px 38px 12px 12px; }
.interests { grid-column:1/-1; border:0; padding:0; margin:2px 0 4px; display:flex; flex-wrap:wrap; gap:10px 16px; }
.interests legend { width:100%; margin-bottom:4px; }.interests label { font-size:13px; font-weight:500; }.interests input { accent-color:var(--rose); }
button { background:var(--plum); border:0; border-radius:3px; color:#fff; cursor:pointer; font:700 16px inherit; margin-top:28px; padding:15px 21px; transition:background .15s ease,transform .15s ease; }button:hover,button:focus-visible { background:#673451; transform:translateY(-1px); } button span { padding-left:24px; }
.results { border-top:1px solid var(--line); margin-top:80px; padding-top:58px; }.results-heading { max-width:700px; margin-bottom:30px; }.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.gift-card { background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; min-height:470px; overflow:hidden; padding:0 25px 21px; }.rank { color:var(--rose); font-size:13px; font-weight:750; letter-spacing:.1em; margin:19px 0 13px; }.product-image { aspect-ratio:1.42/1; background:#f4f0ea; display:block; height:auto; margin:0 -25px 16px; object-fit:cover; width:calc(100% + 50px); }.merchant { color:var(--rose); font-size:12px; font-weight:750; letter-spacing:.02em; margin:0 0 8px; }.gift-card h3 { color:var(--plum); font-size:21px; line-height:1.2; margin:0 0 9px; }.price { color:var(--ink); font-size:17px; font-weight:780; margin:0 0 12px; }.why { color:var(--muted); font-size:13px; margin:0 0 20px; }.purchase-link { color:var(--plum); font-size:14px; font-weight:700; margin-top:auto; text-underline-offset:4px; }.checked { color:var(--muted); font-size:11px; margin:11px 0 0; } .affiliate-disclosure { color:var(--muted); font-size:11px; line-height:1.5; margin:9px 0 0; padding:7px 10px; background:#f4f0ea; border-radius:4px; }.notice { color:var(--muted); font-size:13px; margin:22px 0 0; } .reshuffle { text-align:center; margin:26px 0 0; } .reshuffle button { background:transparent; border:1px solid var(--plum); color:var(--plum); margin-top:0; padding:12px 20px; font-size:15px; } .reshuffle button:hover,.reshuffle button:focus-visible { background:var(--plum); color:#fff; }.etiquette { border-top:1px solid var(--line); margin-top:80px; max-width:750px; padding-top:58px; }
@media (max-width:760px) { .page { padding:22px 18px 54px; }.hero { padding:46px 0 40px; }.finder { grid-template-columns:1fr; gap:32px; padding:26px 20px; }.form-grid,.cards { grid-template-columns:1fr; }.results { margin-top:54px; padding-top:40px; }.gift-card { min-height:250px; }.rank { margin-bottom:28px; }.etiquette { margin-top:55px; padding-top:40px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } button { transition:none; } }