.product-wrap{font:16px/1.5 system-ui,sans-serif;margin:0 auto;max-width:1100px;padding:32px 16px}.muted{color:#666}.dl{display:grid;gap:8px 16px;grid-template-columns:180px 1fr}.dl dt{color:#666}.thumb{max-width:360px}.thumb img{border-radius:12px;display:block;height:auto;width:100%}.stat{display:inline-block;margin-right:12px}.layout{display:grid;gap:28px;grid-template-columns:1fr 300px}@media (max-width:960px){.layout{grid-template-columns:1fr}.layout__aside{position:static}}.layout__aside{align-self:start;height:fit-content;position:sticky;top:80px}.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}@media (max-width:480px){.grid{gap:16px}}.card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;height:100%;overflow:hidden;transition:transform .12s,box-shadow .12s}.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}.card__link{color:inherit;height:100%;text-decoration:none}.card__body,.card__link{display:flex;flex-direction:column}.card__body{flex:1;gap:8px;padding:12px}.card__badge{align-self:flex-start;background:#eef2ff;border-radius:999px;font-size:.75rem;padding:2px 8px}.card__title{font-size:1.1rem;line-height:1.3;margin:0}@media (max-width:480px){.card__title{font-size:1rem}}.card__excerpt{color:#6b7280;display:-webkit-box;margin:0;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card__date{color:#9ca3af;font-size:.85rem}.card__img{display:block;object-fit:cover}.card__img,.card__img-placeholder{aspect-ratio:16/9;margin-top:auto;width:100%}.card__img-placeholder{background:#f9fafb}.sb__box{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:14px;padding:14px}.sb__title{color:#111827;font-size:14px;margin:0 0 8px}.sb__input{border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;width:100%}.cat-tree{display:block}.cat{margin:2px 0}.cat>summary{align-items:center;cursor:pointer;display:flex;gap:8px;justify-content:space-between;list-style:none;padding:6px 4px}.cat>summary::-webkit-details-marker{display:none}.cat__children{display:grid;gap:4px;margin:6px 0 6px 14px;padding:0}.cat a{color:#374151;text-decoration:none}.cat a:hover{color:#111827}.cat__count{color:#6b7280;font-size:.85rem}.tags{display:flex;flex-wrap:wrap;gap:8px}.tag{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;color:#374151;font-size:12px;padding:6px 10px;text-decoration:none}.tag:hover{border-color:#d1d5db}.layout__aside{font-size:14px;max-width:220px}.cat-tree{font-family:monospace;font-size:13px;line-height:1.6;padding-left:8px}.cat-list{list-style:none;margin:0;padding-left:15px;position:relative}.cat-list li{padding-left:16px;position:relative}.cat-list li:before{color:#9ca3af;content:"├──";font-size:12px;left:0;position:absolute}.cat-list li:last-child:before{color:#9ca3af;content:"└──"}.cat-root{background:#f3f4f6;border-radius:12px;color:#374151;display:inline-block;font-size:13px;margin:2px 0;padding:3px 8px;text-decoration:none;transition:background .2s}.cat-root:hover{background:#e5e7eb;color:#111827}.cat-list a{background:#f3f4f6;border-radius:12px;color:#374151;display:inline-block;font-size:13px;margin:2px 0;padding:3px 8px;text-decoration:none;transition:background .2s}.cat-list a:hover{background:#e5e7eb;color:#111827}.tags .tag{background:#f3f4f6;border-radius:12px;color:#374151;display:inline-block;font-size:13px;margin:2px 4px 4px 0;padding:3px 8px;text-decoration:none;transition:background .2s}.tags .tag:hover{background:#e5e7eb;color:#111827}