/* ══════════════════════════════════════════════════
   허브 페이지 전용 (page-filing.php / page-calculator.php)
   상위 메뉴(신고대행 / 계산기)의 안내 페이지
══════════════════════════════════════════════════ */

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
.hub-grid--2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto;}

.hub-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  padding:28px 24px;
  display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;
  position:relative;
  transition:border-color .2s,box-shadow .2s;
}
a.hub-card:hover{border-color:var(--navy-100);box-shadow:0 8px 24px rgba(20,31,54,.07);}
.hub-card .icon-box{margin-bottom:6px;}

.hub-status{
  position:absolute;top:18px;right:18px;
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
  background:var(--bg-soft);color:var(--text-light);
  white-space:nowrap;
}
.hub-status.is-open{background:var(--navy-700);color:#fff;}
.hub-status.is-closed{background:#fdf1f1;color:#b54a4a;}

.hub-card h3{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.3px;}
.hub-card p{font-size:13.5px;color:var(--text-sub);line-height:1.75;flex:1;}
.hub-meta{
  font-size:12.5px;color:var(--text-light);
  padding-top:10px;border-top:1px solid var(--bg-soft);
}
.hub-go{font-size:13.5px;font-weight:700;color:var(--navy-700);margin-top:2px;}
.hub-go::after{content:' →';}

/* 준비중 카드 */
.hub-card.is-soon{background:var(--bg-soft);border-style:dashed;}
.hub-card.is-soon .icon-box{background:#dfe3ea;color:var(--text-light);}
.hub-card.is-soon h3{color:var(--text-light);}

/* 하단 안내 */
.hub-note{
  margin-top:28px;
  background:#fff;border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px;
}
.hub-note p{font-size:13.5px;color:var(--text-sub);line-height:1.8;}
.hub-note strong{color:var(--ink);font-weight:700;}
.hub-note a{color:var(--navy-700);font-weight:700;text-decoration:none;}
.hub-note a:hover{text-decoration:underline;}

@media(max-width:1024px){
  .hub-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .hub-grid,.hub-grid--2{grid-template-columns:1fr;gap:10px;}
  .hub-card{padding:22px 18px;}
  a.hub-card:hover{box-shadow:none;border-color:var(--border);}
  .hub-status{top:16px;right:16px;}
  .hub-note{padding:16px 18px;}
}