/* 허브 전용 스타일. 토대(색 · 글꼴 · 헤더 · 목차 · 버튼)는 가이드의 style.css를 같이 쓴다. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hub{max-width:1180px;margin:0 auto;padding-block:32px 0;display:flex;flex-direction:column;gap:20px}

/* 홈 */
.hero{display:flex;flex-direction:column;gap:14px;padding-block:28px 12px;max-width:760px}
.hero h1{font-size:clamp(1.9rem,4.2vw,2.9rem);font-weight:700;letter-spacing:-.02em}
.hero .lede{font-size:1.12rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.hsec{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.hsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hsec-head h2{font-size:1.35rem}
.hsec-head a{font-size:14px;color:var(--accent);text-decoration:none}
.hsec-head a:hover{text-decoration:underline}
.hsec > p{margin:0}

/* 가이드 카드 */
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.gcard{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line-faint);border-radius:10px;overflow:hidden}
a.gcard:hover{border-color:var(--accent)}
.gcard img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-bottom:1px solid var(--line-faint)}
.gc-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.gc-body b{font-size:1.15rem;font-weight:700}
.gc-d{font-size:14.5px;color:var(--muted)}
.gc-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.gc-stats span{font-family:var(--f-mono);font-size:11.5px;border:1px solid var(--line-faint);border-radius:999px;padding:1px 8px;color:var(--muted)}
.gcard.soon{border-style:dashed;background:transparent;justify-content:center;min-height:180px}

/* 분야 그리드 */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px}
.catgrid a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line-faint);border-radius:8px;padding:12px 14px}
.catgrid a:hover{border-color:var(--accent)}
.catgrid b{font-weight:600}
.catgrid span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 글 목록 */
.postlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.postlist a{display:grid;grid-template-columns:100px minmax(0,1fr);gap:2px 14px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line-faint);border-radius:8px;padding:12px 16px}
.postlist a:hover{border-color:var(--accent)}
.pr-date{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);padding-top:2px}
.pr-d{grid-column:2;font-size:14px;color:var(--muted)}
@media (max-width:600px){ .postlist a{grid-template-columns:minmax(0,1fr)} .pr-d{grid-column:1} }

/* 서비스 사전 */
.svc-tools{margin-top:-14px}
.svc-tools .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.svc-tools .chips::-webkit-scrollbar{display:none}
.svc-tools .chip{white-space:nowrap;flex:none}
.svc-list{list-style:none;margin:0;padding:0!important;display:flex!important;flex-direction:column;gap:0!important;max-width:none!important;border:1px solid var(--line-faint);border-radius:10px;background:var(--surface);overflow:hidden}
.svc-list li{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:11px 16px;border-top:1px solid var(--line-faint)}
.svc-list li:first-child{border-top:0}
.sv-name b{font-weight:600}
.sv-d{font-size:14.5px;max-width:none!important}
.sv-links{display:flex;gap:12px;font-size:12.5px;white-space:nowrap}
.sv-links a{color:var(--muted);text-decoration:none}
.sv-links a:hover{color:var(--accent)}
.sv-links .sv-guide{color:var(--accent)}
@media (max-width:820px){ .svc-list li{grid-template-columns:minmax(0,1fr)} .sv-links{margin-top:2px} }
.prose section[hidden]{display:none}

/* 마크다운 글 본문 */
.md{display:flex;flex-direction:column;gap:14px}
.md h2{font-size:1.45rem;font-weight:700;margin-top:28px}
.md h3{font-size:1.1rem;font-weight:600;margin-top:12px}
.md h4{font-size:1rem;font-weight:600;margin:8px 0 0}
.md blockquote{margin:0;border-left:3px solid var(--accent);padding:4px 0 4px 14px;color:var(--muted)}
.md hr{border:0;border-top:1px solid var(--line-faint);width:100%}
.md img{border-radius:8px;border:1px solid var(--line-faint)}
.md .tbl table{min-width:640px}