/* 목록 화면에서도 홈과 같은 색과 그림으로 상위 카테고리 표시 */
.cs-subpage-categories {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 16px 12px;
    margin: 0 0 32px;
    padding: 8px 0 10px;
}
.cs-subpage-categories > a {
    --category-bg: #e8f1f4;
    --category-color: #507381;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 0;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #37515e;
    text-decoration: none;
    text-align: center;
}
.cs-subpage-categories .cs-category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--category-bg);
    color: var(--category-color);
    transition: background .18s, color .18s, transform .18s, box-shadow .18s;
}
.cs-subpage-categories .cs-category-icon svg {
    display: block;
    width: 43px;
    height: 43px;
}
.cs-subpage-categories .cs-category-label {
    font-weight: 500;
    letter-spacing: -.4px;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.cs-subpage-categories [data-category-id="20"] { --category-bg: #edf4de; --category-color: #689238; }
.cs-subpage-categories [data-category-id="30"] { --category-bg: #e3f4ed; --category-color: #2c8b78; }
.cs-subpage-categories [data-category-id="50"] { --category-bg: #fff0d9; --category-color: #ba8530; }
.cs-subpage-categories [data-category-id="60"] { --category-bg: #f0e9f7; --category-color: #9473b3; }
.cs-subpage-categories [data-category-id="70"] { --category-bg: #e3f2fc; --category-color: #388cbb; }
.cs-subpage-categories [data-category-id="80"] { --category-bg: #fce9e9; --category-color: #c77373; }
.cs-subpage-categories [data-category-id="90"] { --category-bg: #f8ebdf; --category-color: #aa7c54; }
.cs-subpage-categories [data-category-id="a0"] { --category-bg: #e8edf9; --category-color: #6f83b7; }
.cs-subpage-categories [data-category-id="b0"] { --category-bg: #e4f3e6; --category-color: #589369; }
.cs-subpage-categories > .is-active { color: #173c49; }
.cs-subpage-categories .is-active .cs-category-icon {
    background: #173c49;
    color: #fff;
    box-shadow: 0 0 0 3px #d1e9ec, 0 5px 13px #173c4914;
}
.cs-subpage-categories .is-active .cs-category-label { font-weight: 700; }
.cs-subpage-categories > a:focus-visible { outline: 2px solid #13a8ca; outline-offset: 4px; }
@media (hover: hover) {
    .cs-subpage-categories > a:hover .cs-category-icon { transform: translateY(-3px); box-shadow: 0 5px 13px #173c4912; }
    .cs-subpage-categories > a.is-active:hover .cs-category-icon { box-shadow: 0 0 0 3px #d1e9ec, 0 5px 13px #173c4914; }
}
@media (max-width: 1024px) {
    .cs-subpage-categories { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 12px; }
    .cs-subpage-categories > a { font-size: 13px; gap: 10px; }
    .cs-subpage-categories .cs-category-icon { width: 64px; height: 64px; }
    .cs-subpage-categories .cs-category-icon svg { width: 39px; height: 39px; }
}
@media (max-width: 760px) {
    .cs-subpage-categories { gap: 18px 8px; margin-bottom: 24px; }
    .cs-subpage-categories > a { gap: 8px; font-size: 12px; line-height: 1.45; }
    .cs-subpage-categories .cs-category-icon { width: min(52px, 100%); height: auto; aspect-ratio: 1; }
    .cs-subpage-categories .cs-category-icon svg { width: 32px; height: 32px; }
    .cs-subpage-categories .cs-category-label { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-subpage-categories .cs-category-icon { transition: none; }
    .cs-subpage-categories > a:hover .cs-category-icon { transform: none; }
}