/* 달력 가격비교 — 공통 화면.
   깊이감은 1픽셀 테두리로만 준다. 그림자·빛번짐은 쓰지 않는다. */
:root{
  --line:#e9e3dc; --line-strong:#d8cec2;
  --text:#1c1611; --sub:#4b423a; --muted:#7d7268;
  --bg:#fff; --soft:#faf7f3; --point:#a5561c; --point-soft:#f8eee4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Pretendard","Malgun Gothic",system-ui,-apple-system,sans-serif;
  line-height:1.65;font-size:15px;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* 머리 */
header.site{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20}
header.site .wrap{display:flex;align-items:center;gap:18px;height:58px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;letter-spacing:-.03em;flex:none}
.logo svg{width:20px;height:20px;color:var(--point)}
nav.main{display:flex;gap:15px;margin-left:auto;font-size:14px;color:var(--sub);flex-wrap:wrap}
nav.main a{padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--point);border-bottom-color:var(--point)}

/* 본문 공통 */
main{padding:32px 0 56px}
h1{font-size:24px;line-height:1.4;letter-spacing:-.035em;margin:0 0 10px}
h2{font-size:18.5px;letter-spacing:-.03em;margin:0 0 4px}
h3{font-size:15px;letter-spacing:-.02em;margin:0 0 6px}
p{margin:0 0 12px;color:var(--sub)}
.lead{font-size:15px;color:var(--sub);margin-bottom:20px}
section{scroll-margin-top:72px;margin:0 0 42px}
.sec-head{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:16px}
.sec-head .cnt{font-size:13px;color:var(--muted);font-weight:400;margin-left:6px}
.crumb{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.crumb a:hover{color:var(--point)}

/* 수량 고르는 단추 */
.qty-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;
  padding:11px 14px;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.qty-bar .lb{font-size:13px;color:var(--sub);font-weight:600;margin-right:2px}
.qty-bar a{display:inline-block;padding:5px 11px;border:1px solid var(--line-strong);
  border-radius:4px;font-size:13px;color:var(--sub);background:#fff}
.qty-bar a:hover{border-color:var(--point);color:var(--point)}
.qty-bar a.on{background:var(--point);border-color:var(--point);color:#fff;font-weight:600}

/* 갈래 줄 */
.cat-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.cat-strip a{border:1px solid var(--line-strong);border-radius:4px;padding:5px 11px;
  font-size:13px;color:var(--sub)}
.cat-strip a:hover{border-color:var(--point);color:var(--point)}
.cat-strip a.on{background:var(--point);border-color:var(--point);color:#fff;font-weight:600}

/* 표 */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:100%;min-width:680px;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{background:var(--soft);font-size:12.5px;color:var(--sub);font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fdfaf7}
td.nm{white-space:normal;min-width:290px;line-height:1.45}
td.nm a:hover{color:var(--point)}
td.price{font-weight:700;font-variant-numeric:tabular-nums}
td.price .won{font-weight:400;color:var(--muted);font-size:12px;margin-left:1px}
.best{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;
  background:var(--point-soft);color:var(--point);font-size:11px;font-weight:700;vertical-align:1px}
.tag{display:inline-block;padding:1px 6px;border:1px solid var(--line-strong);
  border-radius:3px;font-size:11.5px;color:var(--muted)}
.tag.cat{border-color:var(--point-soft);background:var(--point-soft);color:var(--point)}

/* 갈래 칸 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:12px}
.card{border:1px solid var(--line);border-radius:6px;padding:13px 15px}
.card:hover{border-color:var(--point)}
.card .nm{font-weight:700;letter-spacing:-.02em;margin-bottom:3px}
.card .mt{font-size:12.5px;color:var(--muted)}
.card .pr{margin-top:8px;font-size:14px}
.card .pr b{font-size:17px;color:var(--point)}

/* 가격대 띠 */
.bands{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.band{border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:var(--soft)}
.band .bl{font-weight:700;font-size:14px;letter-spacing:-.02em}
.band .bc{font-size:12.5px;color:var(--muted);margin-top:2px}

/* 상세 요약 */
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:0 0 20px}
.sum .cell{padding:13px 16px;border-right:1px solid var(--line)}
.sum .cell:last-child{border-right:0}
.sum .k{font-size:12.5px;color:var(--muted)}
.sum .v{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.sum .v.point{color:var(--point)}

/* 자주 묻는 질문 */
.faq{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:13px 15px;cursor:pointer;font-weight:600;font-size:14.5px;
  letter-spacing:-.02em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";display:inline-block;width:18px;color:var(--point);font-weight:800}
.faq details[open] summary{background:var(--soft)}
.faq .ans{padding:0 15px 14px 33px;color:var(--sub);font-size:14px;margin:0}

/* 안내 상자 */
.box{border:1px solid var(--line);border-radius:6px;padding:16px 18px;background:var(--soft)}
.box ul{margin:0;padding-left:18px;color:var(--sub)}
.box li{margin:4px 0}

/* 문의 */
.inq{border:1px solid var(--line);border-radius:6px;padding:18px}
.inq .mail{display:inline-block;margin-top:4px;font-size:17px;font-weight:700;color:var(--point);
  border-bottom:1px solid var(--point)}

/* 꼬리 */
footer.site{border-top:1px solid var(--line);background:var(--soft);margin-top:10px}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1fr;gap:26px;padding:28px 0 22px}
footer.site h4{font-size:13px;margin:0 0 9px;letter-spacing:-.02em}
footer.site .brand p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.7}
footer.site .lk{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
footer.site .lk a:hover{color:var(--point)}
footer.site .notice{border-top:1px solid var(--line);padding:14px 0;font-size:11.5px;
  color:var(--muted);line-height:1.8}
footer.site .bottom{border-top:1px solid var(--line);padding:12px 0 24px;font-size:11.5px;
  color:var(--muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

@media (max-width:820px){
  footer.site .cols{grid-template-columns:1fr 1fr;gap:20px}
  .sum{grid-template-columns:1fr 1fr}
  .sum .cell{border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  header.site .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:8px}
  nav.main{margin-left:0;width:100%;gap:12px;font-size:13px}
  h1{font-size:21px}
  main{padding:26px 0 42px}
  footer.site .cols{grid-template-columns:1fr}
}