.krds-breadcrumb-wrap {
    border-bottom: 1px solid var(--krds-color-light-gray-20);
    background: var(--krds-color-light-gray-0);
}

.krds-breadcrumb-wrap .container {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

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

.breadcrumb li + li::before {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    margin-right: var(--space-2);
    flex: 0 0 auto;
    background-color: var(--krds-color-light-gray-40);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("../../icon/ico_angle.svg");
    mask-image: url("../../icon/ico_angle.svg");
    transform: rotate(-90deg);
}

.breadcrumb .txt {
    color: var(--krds-color-light-gray-70);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    max-width: 32ch;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.breadcrumb a.txt:hover {
    color: var(--krds-color-light-primary-60);
    text-decoration: underline;
}

.breadcrumb .txt.is-current {
    color: var(--krds-color-light-gray-90);
    font-weight: var(--font-weight-medium);
}

.breadcrumb .home .txt,
.breadcrumb .home .txt.is-current {
    color: var(--krds-color-light-gray-70);
}

.breadcrumb .home .icon-inline {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 47.99rem) {
    .krds-breadcrumb-wrap .container {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .breadcrumb {
        gap: var(--space-1);
    }

    .breadcrumb li + li::before {
        margin-right: var(--space-1);
    }

    .breadcrumb .txt {
        font-size: var(--font-size-xs);
        max-width: 20ch;
    }
}
