/* =========================================================
   각잡살림 허브(index.html) 전용 스타일 — 공유 style.css 뒤에 로드
   개별 도구 페이지는 건드리지 않음. 이 파일은 index.html에서만 로드됨.
   방향: 애플 웹 표면에서 실측된 값(캔버스 #F5F5F7, 잉크 #1D1D1F,
   액션 블루 #0071E3, 980px 필, 18px 카드 반경)을 참고 톤으로 사용.
   SF Pro는 라이선스 폰트라 대신 Pretendard(이미 로드 중)로 절제된
   위계를 낸다. 개별 도구 카드 색은 강요하지 않고 허브 톤으로 통일.
   ========================================================= */
:root{
  --hub-canvas:#F5F5F7;
  --hub-surface:#FFFFFF;
  --hub-ink:#1D1D1F;
  --hub-muted:#6E6E73;
  --hub-accent:#0071E3;
  --hub-accent-ink:#0058B0;
  --hub-line:#D6D6DB;
}

body{background:var(--hub-canvas);color:var(--hub-ink)}

.nav{background:rgba(245,245,247,.82);border-bottom:1px solid var(--hub-line);backdrop-filter:blur(20px)}
.nav .brand{color:var(--hub-ink)}
.nav .brand svg{color:var(--hub-accent)}
.nav .links a{color:var(--hub-muted)}
.nav .links a:hover{color:var(--hub-ink);background:#EBEBEE}
.theme-btn{background:var(--hub-surface);border:1px solid var(--hub-line);color:var(--hub-muted)}
.theme-btn:hover{border-color:var(--hub-accent);color:var(--hub-accent)}

/* ---------- 히어로 ---------- */
.hero h1{
  font-size:clamp(30px,5.2vw,42px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--hub-ink);
}
.hero p{color:var(--hub-muted);font-size:16px;line-height:1.6}
.brand-desc{
  background:var(--hub-surface)!important;
  border:1px solid var(--hub-line)!important;
  color:var(--hub-muted)!important;
  border-radius:980px;
  padding:9px 20px;
}
.brand-desc b{color:var(--hub-ink)}

/* ---------- 고민별 필터 칩 ---------- */
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cat-filter .chip{
  font:inherit;font-size:13px;font-weight:600;
  background:var(--hub-surface);
  border:1px solid var(--hub-line);
  color:var(--hub-muted);
  border-radius:980px;
  padding:8px 16px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.cat-filter .chip:hover{border-color:var(--hub-accent);color:var(--hub-accent)}
.cat-filter .chip.on{background:var(--hub-accent);border-color:var(--hub-accent);color:#fff}

/* 카드 안 카테고리 태그 */
.tool-cards .cat-tag{
  display:inline-block;
  font-size:11px;font-weight:700;
  color:var(--hub-muted);
  margin-bottom:4px;
}

.hub-grid{margin-top:16px}

/* ---------- 도구 카드 ---------- */
.tool-cards a{
  background:var(--hub-surface);
  border:1px solid var(--hub-line);
  border-radius:18px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s;
}
.tool-cards a:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(0,0,0,.09);
  border-color:#C7C7CC;
  text-decoration:none;
}
.tool-cards .ico{
  background:#EEF4FC;
  color:var(--hub-ink);
  border-radius:14px;
}
.tool-cards .tbody b{color:var(--hub-ink);font-weight:700;letter-spacing:-.01em}
.tool-cards .tbody span{color:var(--hub-muted)}
.tool-cards .go{
  display:flex;
  align-items:center;justify-content:center;
  flex:none;
  width:26px;height:26px;
  border-radius:50%;
  background:#EBEBEE;
  color:var(--hub-muted);
  font-size:13px;
  transition:background .18s,color .18s,transform .18s;
}
.tool-cards a:hover .go{
  background:var(--hub-accent);
  color:#fff;
  transform:translateX(2px);
}


/* ---------- 하단 CTA ---------- */
.hub-cta{
  background:var(--hub-surface);
  border:1px solid var(--hub-line);
  border-radius:18px;
  box-shadow:none;
}
.hub-cta .desc{color:var(--hub-muted)}
.hub-cta-btn{
  display:inline-block;
  margin-top:14px;
  background:var(--hub-accent);
  color:#fff;
  font-weight:700;
  font-size:15px;
  padding:11px 26px;
  border-radius:980px;
  text-decoration:none;
  transition:background .15s;
}
.hub-cta-btn:hover{background:var(--hub-accent-ink);text-decoration:none}
.hub-cta-btn:focus-visible{outline:2px solid var(--hub-accent);outline-offset:3px}

/* ---------- 푸터 ---------- */
.footer{border-top:1px solid var(--hub-line)}
.footer a{color:var(--hub-muted)}
.footer a:hover{color:var(--hub-ink)}
.footer .cp{color:#8E8E93}

@media (prefers-reduced-motion:reduce){
  .tool-cards a,.tool-cards .go{transition:none}
}