/* BuySmart — 마트 진열대 가격표에서 가져온 디자인 토큰 */
:root{
  --shelf:#E9EDF1;      /* 진열대 회색: 페이지 바탕 */
  --rail:#CBD2DA;       /* 진열대 선반 모서리 */
  --label:#FFFFFF;      /* 가격표 흰색 */
  --ink:#18233D;        /* 잉크 남색: 글자 */
  --muted:#5B6577;      /* 보조 글자 */
  --tag:#FFD23F;        /* 행사 스티커 노랑 */
  --sale:#D42A2F;       /* 최저가 빨강 */
  --display:"Black Han Sans","IBM Plex Sans KR",sans-serif;
  --text:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --step-0:1rem;--step-1:1.125rem;--step-2:1.375rem;--step-3:1.75rem;--step-4:2.75rem;--step-5:4rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--shelf);color:var(--ink);font-family:var(--text);font-size:var(--step-0);line-height:1.7;font-variant-numeric:tabular-nums;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* 머리글 / 바닥글 */
header.site .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:20px;padding-bottom:8px}
.logo{font-family:var(--display);font-size:var(--step-3);line-height:1;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
nav a{margin-left:20px;color:var(--muted);text-decoration:none;font-size:.9375rem}
nav a:hover{color:var(--ink);text-decoration:underline}
footer.site{margin-top:72px;border-top:6px solid var(--rail);padding:28px 0 40px;color:var(--muted);font-size:.875rem}
footer.site a{color:var(--muted);margin-right:18px}
footer.site p{margin:10px 0 0}

/* 공통 본문 */
main{padding:24px 0 0}
h1{font-family:var(--display);font-weight:400;font-size:var(--step-4);line-height:1.15;margin:12px 0 10px;letter-spacing:-.01em}
.lead{font-size:var(--step-1);color:var(--muted);margin:0 0 28px;max-width:38em}
.prose{max-width:680px}
.prose h2{font-size:var(--step-2);font-weight:700;line-height:1.35;margin:56px 0 12px}
.prose h3{font-size:var(--step-1);font-weight:700;margin:28px 0 6px}
.prose p,.prose li{font-size:1.0625rem;line-height:1.8}
.prose ol,.prose ul{padding-left:1.3em}
.prose li{margin:6px 0}
.note{font-size:.9375rem;color:var(--muted)}
table.plain{border-collapse:collapse;width:100%;margin:12px 0;background:var(--label)}
table.plain th,table.plain td{padding:10px 12px;border-bottom:1px solid var(--shelf);text-align:right}
table.plain th:first-child,table.plain td:first-child{text-align:left}
table.plain thead th{font-weight:700;border-bottom:2px solid var(--ink)}
.faq details{border-top:1px solid var(--rail);padding:14px 0}
.faq details:last-child{border-bottom:1px solid var(--rail)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.0625rem}
.faq p{margin:8px 0 0}

/* 계산기 레이아웃 */
.tool{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
.result-col{position:sticky;top:20px}

/* 상품 행: 선반 위에 놓인 흰 띠 */
.rows{display:grid;gap:14px}
.item{display:grid;grid-template-columns:44px 1fr;background:var(--label);border-bottom:6px solid var(--rail)}
.item-id{background:var(--ink);color:var(--label);font-family:var(--display);font-size:var(--step-2);display:flex;align-items:flex-start;justify-content:center;padding-top:14px}
.item-body{padding:12px 14px 14px}
.item-top{display:flex;gap:10px;align-items:flex-end}
.item-top .f{flex:1}
.del{background:none;border:0;color:var(--muted);font:inherit;font-size:.875rem;padding:10px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.del:disabled{visibility:hidden}
.fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px}
.f{display:flex;flex-direction:column;font-size:.8125rem;color:var(--muted);font-weight:500}
.f.w2{grid-column:span 2}.f.w3{grid-column:span 3}
.f input,.f select{margin-top:4px;padding:10px 10px;border:1px solid var(--rail);border-radius:4px;font:inherit;font-size:1rem;font-weight:400;color:var(--ink);background:var(--label);width:100%;font-variant-numeric:tabular-nums}
.f input::placeholder{color:#9AA3B2}
.f input:focus,.f select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.add{width:100%;margin-top:14px;padding:16px;background:transparent;border:2px dashed var(--rail);color:var(--muted);font:inherit;font-weight:700;cursor:pointer}
.add:hover{border-color:var(--muted);color:var(--ink)}
.add:disabled{display:none}
.tool-actions{display:flex;gap:18px;margin-top:12px}
.linkbtn{background:none;border:0;padding:4px 0;font:inherit;font-size:.9375rem;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}

/* 결과: 진열대 가격표 */
.pricetag{background:var(--label);border-bottom:6px solid var(--rail)}
.pricetag .band{background:var(--tag);color:var(--ink);font-weight:700;padding:8px 16px;font-size:.9375rem}
.pricetag .body{padding:16px 16px 18px}
.pricetag .who{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--step-1);line-height:1.3}
.idchip{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;background:var(--ink);color:var(--label);font-family:var(--display);font-size:1rem;font-weight:400}
.pricetag .big{font-family:var(--display);color:var(--sale);font-size:var(--step-5);line-height:1;margin:14px 0 2px;letter-spacing:-.02em}
.pricetag .big small{font-size:var(--step-2);margin-left:2px}
.pricetag .per{font-weight:700}
.pricetag .meta{color:var(--muted);font-size:.875rem;margin-top:10px;padding-top:10px;border-top:1px dashed var(--rail)}
.pricetag.empty .body{color:var(--muted)}
.pricetag.empty .band{background:var(--shelf);color:var(--muted)}
.verdict{margin:16px 0 0;font-size:1.0625rem;line-height:1.65}
.verdict b{color:var(--sale)}
.warn{margin:14px 0 0;padding:10px 12px;background:var(--label);border-left:4px solid var(--tag);font-size:.9375rem}
.rank{list-style:none;margin:18px 0 0;padding:0}
.rank-title{margin:22px 0 0;font-size:.875rem;color:var(--muted);font-weight:700}
.rank li{display:grid;grid-template-columns:28px 1fr auto;gap:4px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--rail)}
.rank .nm{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .up{font-weight:700;text-align:right}
.rank .bar{grid-column:2 / 4;height:6px;background:var(--label)}
.rank .bar i{display:block;height:100%;background:var(--muted)}
.rank li.best .bar i{background:var(--sale)}
.rank li.best .up{color:var(--sale)}
@media (prefers-reduced-motion:no-preference){
  .pricetag.stamp{animation:stamp .28s ease-out}
  @keyframes stamp{0%{transform:scale(1.035)}100%{transform:scale(1)}}
}

/* 휴대폰: 결과가 화면 밖일 때 하단에 요약 표시 */
.mbar{display:none}
@media (max-width:860px){
  body{padding-bottom:72px}
  .mbar.on{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;align-items:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--tag);color:var(--ink);text-decoration:none;font-weight:700;border-top:2px solid var(--ink)}
  .mbar .mb-price{margin-left:auto;font-family:var(--display);font-weight:400;font-size:var(--step-2);color:var(--sale)}
}

/* 광고 */
.ad{margin:48px 0 0;max-width:680px}
.ad-label{font-size:.75rem;color:var(--muted);margin-bottom:4px}

/* 홈 */
.tool-list{list-style:none;padding:0;margin:8px 0 0;max-width:760px}
.tool-list li{background:var(--label);border-bottom:6px solid var(--rail);margin-bottom:14px}
.tool-list a,.tool-list .soon{display:block;padding:18px 20px;text-decoration:none;color:var(--ink)}
.tool-list a:hover{background:#FFFBEA}
.tool-list b{display:block;font-size:var(--step-2);font-family:var(--display);font-weight:400}
.tool-list span{color:var(--muted)}
.tool-list .soon{color:var(--muted)}
.tool-list .soon b{color:var(--muted)}

@media (max-width:860px){
  .tool{grid-template-columns:1fr;gap:24px}
  .result-col{position:static}
}
@media (max-width:560px){
  :root{--step-4:2.125rem;--step-5:3.25rem}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f.w2,.f.w3{grid-column:span 2}
  .f.half{grid-column:span 1}
  .item{grid-template-columns:36px 1fr}
  nav a{margin-left:14px}
}