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

/* 픽. 뚝딱툴 시스템 기반. 흰 바탕 + 중립 그레이, 포인트는 초록 하나. 모바일 우선. */
:root{
  --bg:#f7f8fa; --surface:#fff; --surface-2:#f2f4f6;
  --ink:#191f28; --muted:#4e5968; --faint:#6b7684;
  --line:#e5e8eb; --border:#d7dce2;
  --accent:#1a7f4b; --accent-dark:#13623a; --accent-soft:#e6f3ec;
  --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:860px;
}
*{ 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; word-break:keep-all; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.muted{ color:var(--faint); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
b{ font-weight:700; }

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; }
.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; }

.notice{ margin:0; background:var(--accent-soft); color:var(--accent-dark); font-size:12.5px; line-height:1.5; padding:8px 0; }
.notice .wrap{ display:block; }

.hero{ padding:40px 0 8px; }
.hero h1{ font-size:clamp(1.8rem,1.2rem+2.8vw,2.5rem); font-weight:800; letter-spacing:-.045em; margin:0; line-height:1.15; text-wrap:balance; }
.hero p{ color:var(--muted); font-size:16px; margin:12px 0 18px; max-width:36em; text-wrap:pretty; }
.search input{ width:100%; max-width:420px; height:48px; padding:0 16px; font:inherit; font-size:16px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); }
.search input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }

.group{ margin:28px 0 8px; }
.group h2, .how h2, .note h2, .related h2{ font-size:17px; font-weight:800; letter-spacing:-.03em; margin:0 0 10px; }
.cats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.cats a{ display:flex; flex-direction:column; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; color:var(--ink); box-shadow:var(--shadow); min-height:78px; }
.cats a:hover{ border-color:var(--accent); text-decoration:none; }
.cats .cname{ font-weight:700; font-size:16px; }
.cats .ans{ font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cats .ans b{ color:var(--accent-dark); }
.cats .ans .mall{ color:var(--faint); }
.how{ margin:40px 0 20px; color:var(--muted); font-size:15px; max-width:44em; }
.how p{ margin:0 0 10px; }

.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:15px; margin:0 0 16px; text-wrap:pretty; }

.answers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin:0 0 22px; }
.answer{ display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; color:var(--ink); box-shadow:var(--shadow); }
.answer:hover{ text-decoration:none; border-color:var(--accent); }
.answer.empty{ border-style:dashed; box-shadow:none; }
.answer .lbl{ font-size:12.5px; font-weight:700; color:var(--accent-dark); letter-spacing:.02em; }
.answer .val{ font-size:26px; font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1.2; }
.answer .val small{ font-size:13px; font-weight:600; color:var(--faint); margin-left:4px; letter-spacing:0; }
.answer .who{ font-size:13.5px; color:var(--ink); margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.answer .mall{ font-size:12.5px; color:var(--faint); }

.controls{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin:4px 0 8px; font-size:14px; color:var(--muted); }
.controls select{ font:inherit; font-size:14px; padding:6px 8px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); max-width:220px; }
.controls .count{ margin-left:auto; font-variant-numeric:tabular-nums; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 8px; }
.chips-lbl{ font-size:13px; color:var(--faint); margin-right:2px; }
.chips button{ font:inherit; font-size:13.5px; font-weight:600; padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--muted); cursor:pointer; }
.chips button:hover{ border-color:var(--accent); color:var(--ink); }
.chips button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }

.items{ list-style:none; margin:12px 0 0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.items li{ display:grid; grid-template-columns:28px 56px 1fr auto auto; gap:12px; align-items:center; padding:12px 14px; border-top:1px solid var(--line); }
.items li:first-child{ border-top:0; }
.items li[hidden]{ display:none; }
.rank{ font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums; text-align:right; }
.items img, .noimg{ width:56px; height:56px; border-radius:var(--r-sm); object-fit:cover; background:var(--surface-2); display:block; }
.info{ min-width:0; }
.title{ color:var(--ink); font-size:14.5px; font-weight:600; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.meta{ display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12.5px; color:var(--faint); margin-top:4px; }
.meta .mall{ color:var(--muted); font-weight:600; }
.tag{ background:var(--surface-2); color:var(--muted); padding:1px 7px; border-radius:6px; }
.pricebox{ display:flex; flex-direction:column; align-items:flex-end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.unit{ font-size:17px; letter-spacing:-.03em; }
.per{ font-size:11.5px; color:var(--faint); }
.total{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.go{ font-size:13.5px; font-weight:700; padding:8px 12px; border:1px solid var(--accent); border-radius:var(--r-sm); white-space:nowrap; }
.go:hover{ background:var(--accent); color:#fff; text-decoration:none; }

.note{ margin:36px 0 0; color:var(--muted); font-size:15px; max-width:44em; }
.note p{ margin:0; }
.related{ margin:28px 0 0; }
.related div{ display:flex; flex-wrap:wrap; gap:6px; }
.related a{ font-size:13.5px; font-weight:600; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); }
.related a:hover{ border-color:var(--accent); color:var(--ink); text-decoration:none; }

.prose h2{ font-size:17px; font-weight:800; margin:24px 0 6px; }
.prose p{ margin:0 0 10px; color:var(--muted); font-size:15px; max-width:44em; }

footer.site{ margin-top:56px; border-top:1px solid var(--line); padding:22px 0 36px; }
.foot-top{ display:flex; flex-wrap:wrap; gap:14px; font-size:13.5px; font-weight:600; }
.foot-top a{ color:var(--muted); }
.foot-note{ font-size:12.5px; color:var(--faint); margin:12px 0 0; }

@media (max-width:640px){
  .items li{ grid-template-columns:48px 1fr auto; grid-template-areas:"img info price" "img info go"; row-gap:4px; }
  .rank{ display:none; }
  .items img, .noimg{ grid-area:img; width:48px; height:48px; }
  .info{ grid-area:info; }
  .pricebox{ grid-area:price; }
  .go{ grid-area:go; justify-self:end; padding:5px 10px; }
  .controls .count{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }