:root{
  color-scheme:light;
  --bg:#FFF3F5; --paper:#FFFFFF; --ink:#3A2230; --muted:#8A6B78; --line:#F3D9E0;
  --green:#3A2230; --on-green:#FFFFFF; --ribbon:#FF4F7B; --ribbon-lo:#D93A63; --gold:#FFC94A; --chip:#FFE6EC; --note:#FFF7DC;
  --box:#FF9DB5; --box-hi:#FFC6D4; --box-lo:#F27A98; --lid:#FFB0C3; --lid-hi:#FFD6E0;
  --rib:#FFD86B; --rib-hi:#FFF3C4; --rib-lo:#F0B434;
  --blob1:#FFDDE6; --blob2:#FFF0C7; --shade:rgba(122,40,70,.16);
  --cp:#E52528;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#1C1317; --paper:#261A20; --ink:#F7E8EE; --muted:#C09AAB; --line:#3D2A33;
    --green:#F7E8EE; --on-green:#1C1317; --ribbon:#FF6F93; --ribbon-lo:#C9486C; --gold:#FFD25E; --chip:#35232C; --note:#33291A;
    --box:#E9799A; --box-hi:#FFA6BF; --box-lo:#C45878; --lid:#F28AA8; --lid-hi:#FFB9CC;
    --rib:#FFD25E; --rib-hi:#FFEDB0; --rib-lo:#D9A032;
    --blob1:#3A1F2B; --blob2:#2E2616; --shade:rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1C1317; --paper:#261A20; --ink:#F7E8EE; --muted:#C09AAB; --line:#3D2A33;
  --green:#F7E8EE; --on-green:#1C1317; --ribbon:#FF6F93; --ribbon-lo:#C9486C; --gold:#FFD25E; --chip:#35232C; --note:#33291A;
  --box:#E9799A; --box-hi:#FFA6BF; --box-lo:#C45878; --lid:#F28AA8; --lid-hi:#FFB9CC;
  --rib:#FFD25E; --rib-hi:#FFEDB0; --rib-lo:#D9A032;
  --blob1:#3A1F2B; --blob2:#2E2616; --shade:rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(circle at 12% 0%,var(--blob1),transparent 42%),radial-gradient(circle at 92% 18%,var(--blob2),transparent 38%),var(--bg);background-attachment:fixed;min-height:100vh;color:var(--ink);font-family:"Gowun Dodum",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:15px;line-height:1.6;word-break:keep-all}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--ribbon)}
h1,h2,h3{font-family:"Jua","Gowun Dodum",system-ui,sans-serif;font-weight:400;text-wrap:balance;margin:0}

/* site chrome */
.topbar{max-width:960px;margin:0 auto;padding:14px 16px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-family:"Jua",sans-serif;font-size:20px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:6px}
.logo span{color:var(--ribbon)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;padding:4px 10px;border-radius:999px}
.nav a:hover,.nav a[aria-current]{background:var(--chip);color:var(--ink)}
.foot{max-width:960px;margin:0 auto;padding:24px 16px 40px;color:var(--muted);font-size:13px;display:grid;gap:6px;border-top:1px solid var(--line)}
.foot nav{display:flex;gap:12px;flex-wrap:wrap}
.foot a{color:var(--muted)}
.disclosure{font-size:12px;color:var(--muted);margin:0}

.wrap{max-width:960px;margin:0 auto;padding-inline:16px;padding-block:20px 40px;display:grid;gap:18px}
.main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.side{display:grid;gap:18px}
@media (max-width:760px){.main{grid-template-columns:1fr}.nav{margin-left:0}}
.inside{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:16px;display:grid;gap:10px}
.inside h2{font-size:19px}
.cats{display:flex;flex-wrap:wrap;gap:6px}
.cats span,.cats button,.cats a{border:0;background:var(--chip);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:13px;text-decoration:none}
.cats button[aria-pressed="true"]{background:var(--ribbon);color:#fff}
.cats button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.how{margin:0;padding-left:20px;font-size:14px;color:var(--muted);display:grid;gap:2px}
header.hero h1{font-size:clamp(28px,7vw,38px);line-height:1.15}
header.hero h1 span{color:var(--ribbon)}
header.hero p{margin:4px 0 0;color:var(--muted)}

.stage{background:var(--paper);border-radius:28px;padding:48px 18px 24px;box-shadow:0 24px 60px -30px var(--shade);display:grid;gap:14px;justify-items:center;text-align:center;border:1px solid var(--line)}
.gift{width:220px;height:230px;position:relative;cursor:pointer;border:0;background:none;padding:0;max-width:100%;-webkit-tap-highlight-color:transparent}
.gift:disabled{cursor:default}
.gift:focus-visible{outline:3px solid var(--gold);outline-offset:8px;border-radius:20px}
.gift .glow{position:absolute;left:50%;top:44%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,var(--rib-hi) 0,var(--gold) 22%,transparent 62%);opacity:0;transform:scale(.4);transition:opacity .5s,transform .7s cubic-bezier(.2,1.4,.4,1)}
.gift .floor{position:absolute;left:50%;bottom:4px;width:150px;height:16px;margin-left:-75px;border-radius:50%;background:radial-gradient(ellipse,var(--shade),transparent 70%);animation:floor 3.2s ease-in-out infinite}
.gift .bx{position:absolute;inset:0;animation:bob 3.2s ease-in-out infinite;transition:transform .2s}
.gift:hover .bx{transform:rotate(-3deg) scale(1.03)}
.gift .base{position:absolute;left:30px;right:30px;bottom:24px;height:122px;border-radius:22px;background:linear-gradient(155deg,var(--box-hi),var(--box) 45%,var(--box-lo));box-shadow:inset 0 -10px 0 rgba(0,0,0,.05),inset 6px 6px 0 rgba(255,255,255,.28)}
.gift .base::before{content:"";position:absolute;left:14px;top:14px;width:26px;height:10px;border-radius:10px;background:rgba(255,255,255,.55);transform:rotate(-12deg)}
.gift .rv{position:absolute;left:50%;width:28px;margin-left:-14px;bottom:24px;height:122px;background:linear-gradient(90deg,var(--rib-lo),var(--rib) 35%,var(--rib-hi) 55%,var(--rib) 75%)}
.gift .lid{position:absolute;left:20px;right:20px;top:66px;height:42px;border-radius:18px;background:linear-gradient(170deg,var(--lid-hi),var(--lid) 55%,var(--box));box-shadow:0 8px 14px -8px var(--shade),inset 0 4px 0 rgba(255,255,255,.35);transition:transform .6s cubic-bezier(.25,1.6,.5,1)}
.gift .lid .lrv{position:absolute;left:50%;top:0;bottom:0;width:28px;margin-left:-14px;background:linear-gradient(90deg,var(--rib-lo),var(--rib) 35%,var(--rib-hi) 55%,var(--rib) 75%)}
.gift .bow{position:absolute;left:50%;top:-34px;width:100px;height:40px;margin-left:-50px}
.gift .bow i{position:absolute;bottom:2px;width:46px;height:34px;border-radius:50% 50% 50% 50%/55% 55% 45% 45%;background:radial-gradient(circle at 50% 60%,rgba(0,0,0,.14) 0 20%,transparent 22%),linear-gradient(160deg,var(--rib-hi),var(--rib) 50%,var(--rib-lo))}
.gift .bow i:first-child{left:2px;transform:rotate(-22deg);transform-origin:right bottom}
.gift .bow i:nth-child(2){right:2px;transform:rotate(22deg);transform-origin:left bottom}
.gift .bow b{position:absolute;left:50%;bottom:0;width:24px;height:20px;margin-left:-12px;border-radius:10px;background:linear-gradient(160deg,var(--rib-hi),var(--rib-lo))}
.gift .sp{position:absolute;color:var(--gold);font-size:18px;line-height:1;animation:twinkle 2.4s ease-in-out infinite;pointer-events:none}
.gift .sp.a{left:6px;top:78px}
.gift .sp.b{right:8px;top:40px;font-size:14px;animation-delay:.8s;color:var(--ribbon)}
.gift .sp.c{right:14px;bottom:60px;font-size:12px;animation-delay:1.5s}
.gift.shake .bx{animation:shake .12s linear infinite}
.gift.open .bx{animation:none}
.gift.open .lid{transform:translateY(-54px) rotate(-16deg)}
.gift.open .glow{opacity:.9;transform:scale(1)}
.gift.open .sp{animation:pop .8s ease-out both}
@keyframes shake{0%{transform:rotate(-5deg) scale(1.02)}50%{transform:rotate(5deg) scale(1.02)}100%{transform:rotate(-5deg) scale(1.02)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes floor{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.85);opacity:.7}}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@keyframes pop{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.6)}100%{opacity:1;transform:scale(1)}}

.result{min-height:112px;display:grid;gap:4px;justify-items:center;align-content:center;width:100%}
.result .emoji{font-size:42px;line-height:1}
.result .name{word-break:keep-all;text-wrap:balance;font-family:"Jua",sans-serif;font-size:clamp(24px,6vw,30px);line-height:1.2}
.result .meta{color:var(--muted);font-size:14px}
.result.done .name{color:var(--ribbon)}
.letter{background:var(--note);border-radius:12px;padding:12px 16px;font-size:15px;max-width:34ch;white-space:pre-wrap}

.buy{display:grid;gap:6px;justify-items:center;width:100%}
.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
button{font:inherit;cursor:pointer}
.btn{font-family:"Jua",sans-serif;font-size:18px;border-radius:999px;padding:12px 30px;border:0;background:var(--ribbon);color:#fff;box-shadow:0 5px 0 var(--ribbon-lo);transition:transform .08s,box-shadow .08s;text-decoration:none;display:inline-block;text-align:center}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ribbon-lo)}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);font-size:16px;padding:9px 20px;box-shadow:none}
.btn.cp{background:var(--cp);box-shadow:0 5px 0 #A8181B}
.btn.gold{background:var(--gold);color:#3A2230;box-shadow:0 5px 0 var(--rib-lo)}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hint{font-size:13px;color:var(--muted);margin:0}
.field{display:grid;gap:4px}
.field label,.field .lbl{font-size:12px;letter-spacing:.06em;color:var(--muted)}
input,textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0;width:100%}
textarea{resize:vertical;min-height:56px}

/* price-tier product picks */
.picks{width:100%;display:grid;gap:8px;text-align:left}
.picks-h{margin:0;font-family:"Jua",sans-serif;font-size:17px}
.tiers{display:flex;flex-wrap:wrap;gap:6px}
.tiers button{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:4px 12px;font-size:13px}
.tiers button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tiers button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.plist{display:grid;gap:8px}
.pcard{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;text-decoration:none;color:var(--ink);transition:border-color .12s}
.pcard:hover{border-color:var(--cp)}
.pcard img{width:72px;height:72px;object-fit:contain;border-radius:10px;background:#fff}
.pcard .noimg{width:72px;height:72px;border-radius:10px;background:var(--chip);display:grid;place-items:center;font-size:32px}
.pbody{display:grid;gap:2px;min-width:0}
.pt{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pm b{color:var(--cp);font-size:15px}
.rocket{font-size:11px;background:#E8F1FE;color:#1D5FD6;border-radius:4px;padding:0 5px}
.gift-picks h3{font-family:"Jua",sans-serif;font-weight:400;font-size:17px;margin:6px 0 0}
@media (min-width:640px){.gift-picks .plist{grid-template-columns:1fr 1fr}}

/* send-a-box sheet */
.sheet{background:var(--paper);border:1.5px dashed var(--ribbon);border-radius:22px;padding:16px;display:grid;gap:10px;text-align:left;width:100%}
.sheet h2{font-size:19px}

/* ads */
.ad{width:100%;min-height:0;text-align:center}
.ad ins{display:block}

/* content pages */
.article{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:24px 20px;display:grid;gap:14px}
.article h1{font-size:clamp(26px,6vw,34px);line-height:1.2}
.article h2{font-size:21px;margin-top:8px}
.article p{margin:0}
.article ul,.article ol{margin:0;padding-left:20px;display:grid;gap:4px}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.gift-hero{display:grid;gap:6px;justify-items:start}
.gift-hero .emoji{font-size:56px;line-height:1}
.badge{display:inline-block;background:var(--chip);border-radius:999px;padding:3px 10px;font-size:13px}
.buybox{background:var(--note);border-radius:16px;padding:16px;display:grid;gap:8px;justify-items:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;text-decoration:none;color:var(--ink);display:grid;gap:4px;transition:transform .12s}
.card:hover{transform:translateY(-2px);border-color:var(--ribbon)}
.card .emoji{font-size:30px;line-height:1}
.card b{font-weight:400;font-family:"Jua",sans-serif;font-size:16px;line-height:1.3}
.card small{color:var(--muted);font-size:12px}
.cta{background:var(--chip);border-radius:18px;padding:18px;display:grid;gap:8px;justify-items:center;text-align:center}
.faq details{border-bottom:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin-top:6px;color:var(--muted)}

canvas#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:10}
@media (prefers-reduced-motion:reduce){.gift .bx,.gift .floor,.gift .sp,.gift.shake .bx{animation:none}.gift .lid,.gift .glow{transition:none}.card{transition:none}}