/* src/assets/css/hub.css — 글·허브·문 공용 (Claude 작성, 실제 쓰는 클래스만) */
.breadcrumb-list { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .8125rem; color: #64748B; }
.breadcrumb-list a { color: #2563EB; text-decoration: none; }
.breadcrumb-item.current { color: #334155; }
.article-header { margin-bottom: 1.5rem; }
.article-title { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; color: #0F172A; line-height: 1.3; margin: 0 0 .5rem; word-break: keep-all; }
.article-desc { color: #475569; margin: 0 0 .75rem; line-height: 1.6; }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: #64748B; }
.meta-tag { background: #EFF6FF; color: #1D4ED8; padding: .125rem .5rem; border-radius: 4px; font-weight: 700; }
.article-content-body { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.5rem; color: #1E293B; line-height: 1.8; font-size: 1rem; word-break: keep-all; overflow-wrap: anywhere; }
.article-content-body h2 { font-size: 1.375rem; font-weight: 800; color: #0F172A; margin: 2rem 0 .75rem; }
.article-content-body h3 { font-size: 1.125rem; font-weight: 700; color: #0F172A; margin: 1.5rem 0 .5rem; }
.article-content-body p { margin: 0 0 1rem; }
.article-content-body ul, .article-content-body ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.article-content-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.article-content-body th, .article-content-body td { border: 1px solid #E2E8F0; padding: .625rem .75rem; white-space: nowrap; }
.article-content-body th { background: #F8FAFC; }
.article-content-body a { color: #2563EB; }
.article-faq-section, .article-related-section, .article-bottom-actions { margin-top: 2.5rem; }
.related-section-title { font-size: 1.25rem; font-weight: 800; color: #0F172A; margin: 0 0 1rem; }
.related-direct-list { padding-left: 1.25rem; margin: 0 0 1rem; }
.related-direct-list a, .related-hub-link a { color: #2563EB; font-weight: 600; }
.hub-article-grid, .sub-category-grid, .door-map-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .hub-article-grid, .sub-category-grid, .door-map-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hub-article-grid, .sub-category-grid, .door-map-grid { grid-template-columns: repeat(3, 1fr); } }
.hub-article-card, .sub-category-card, .door-cat-card, .empty-notice-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.25rem; color: #0F172A; box-sizing: border-box; }
.hub-article-type { font-size: .75rem; font-weight: 700; color: #1D4ED8; }
.hub-article-title, .sub-category-title, .door-cat-title { font-size: 1.0625rem; font-weight: 700; margin: .25rem 0 .5rem; word-break: keep-all; }
.hub-article-title a, .door-cat-title a { color: #0F172A; text-decoration: none; }
.hub-article-title a:hover, .door-cat-title a:hover { color: #2563EB; }
.hub-article-desc { font-size: .875rem; color: #475569; margin: 0; line-height: 1.5; }
.sub-category-count { font-size: .8125rem; color: #64748B; }
.sub-category-footer { margin-top: .75rem; }
.sub-category-link { color: #2563EB; font-weight: 700; text-decoration: none; }
.empty-notice-card { color: #475569; }
.type-section-group { margin-bottom: 2rem; }
.type-section-title { display: flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 800; color: #0F172A; margin: 0 0 .75rem; }
.type-icon-dot { width: 8px; height: 8px; border-radius: 50%; background: #2563EB; }
.sibling-sub-pills, .summary-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.sub-pill-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .875rem; border: 1px solid #CBD5E1; border-radius: 999px; background: #FFFFFF; color: #1E293B; font-size: .875rem; font-weight: 600; text-decoration: none; }
.sub-pill-link:hover { border-color: #2563EB; color: #2563EB; }
.door-sub-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .375rem; }
.door-sub-list a { color: #334155; text-decoration: none; font-size: .9375rem; }
.door-sub-list a:hover { color: #2563EB; }
.btn-action-group { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.btn-secondary-inline { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.5rem; border: 1px solid #2563EB; color: #2563EB; background: #FFFFFF; border-radius: 8px; font-weight: 700; text-decoration: none; }
.doors-section { padding: 1.5rem 1rem; max-width: 1140px; margin: 0 auto; box-sizing: border-box; }
.doors-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .doors-grid { grid-template-columns: repeat(2, 1fr); } }
.door-hero-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border-radius: 16px; background: #FFFFFF; color: #0F172A; text-decoration: none; border: 2px solid #E2E8F0; transition: border-color .15s ease; }
.door-hero-card:hover { border-color: #2563EB; }
.door-tag { font-size: .8125rem; font-weight: 700; color: #64748B; }
.door-hero-title { font-size: 1.75rem; font-weight: 900; margin: 0; }
.pill-item { font-size: .8125rem; background: #F1F5F9; color: #334155; padding: .25rem .625rem; border-radius: 999px; }
.door-hero-btn { margin-top: auto; font-weight: 800; color: #2563EB; }