@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+TC:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
    --theme-font-display: "Noto Serif TC", "Times New Roman", serif;
    --theme-font-body: "Noto Sans TC", "Segoe UI", sans-serif;
    --theme-color-cortex-ink: #162033;
    --theme-color-cortex-sand: #f5efe4;
    --theme-color-cortex-cream: #fffaf2;
    --theme-color-cortex-gold: #d97706;
    --theme-color-cortex-clay: #b45309;
    --theme-color-cortex-mint: #c8d9cb;
    --theme-color-cortex-sky: #d8e5f4;
    --theme-body-background:
        radial-gradient(circle at top left, rgba(217, 119, 6, 0.14), transparent 28rem),
        radial-gradient(circle at 88% 14%, rgba(22, 32, 51, 0.08), transparent 26rem),
        radial-gradient(circle at bottom right, rgba(180, 83, 9, 0.12), transparent 24rem),
        linear-gradient(180deg, #fffaf2 0%, #f5efe4 100%);
    --theme-selection-background: rgba(22, 32, 51, 0.14);
}

.frontend-breadcrumb-shell {
    width: 100%;
    background: var(--theme-color-background, #ffffff);
    border-bottom: 1px solid rgba(22, 32, 51, 0.08);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.frontend-breadcrumb-list {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0;
    color: color-mix(in srgb, var(--theme-color-text, #162033) 62%, transparent);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: nowrap;
}

.frontend-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.frontend-breadcrumb-item + .frontend-breadcrumb-item::before {
    content: "/";
    margin: 0 0.65rem;
    color: color-mix(in srgb, var(--theme-color-text, #162033) 34%, transparent);
}

.frontend-breadcrumb-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.frontend-breadcrumb-item a:hover {
    color: var(--theme-color-text, #162033);
}

.frontend-breadcrumb-item.is-current {
    color: var(--theme-color-text, #162033);
    font-weight: 600;
}

@media (max-width: 767px) {
    .frontend-breadcrumb-list {
        width: max-content;
        min-width: calc(100% - 32px);
        margin-left: 16px;
        margin-right: 16px;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        font-size: 0.8125rem;
    }
}