@charset "utf-8";

.post-container-wrapper {
    padding: 0 0.67rem;
    background-color: #ffffff;
}

.post-container {
    max-width: 1110px;
    margin: auto;
    padding: 70px 0;
}

.post-layout {
    display: flex;
    gap: 5%;
}

.post-content {
    width: 70%;
}

.post-content p {
    color: #373737;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.post-title {
    font-size: 35px;
    letter-spacing: 0.05em;
    margin: 0.7em 0 0.8em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #dadada;
}

.post-date {
    font-size: 14px;
    line-height: 1.75;
    color: #888;
}

.cat {
    margin-top: 50px;
}

.post-sidebar {
    width: 25%;
}

.breadcrumb {
    font-size: 0.85rem;
    color: #777;
    background-color: #fdf5eb;
    padding: 0 0.67rem;
}

.breadcrumb ol {
    max-width: 1110px;
    margin: 0 auto;
    padding: 0.5em 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.breadcrumb li::after {
    content: "›";
    margin: 0 0.5em;
    color: #aaa;
}

.breadcrumb li:last-child::after {
    content: "";
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
}

.breadcrumb li:last-child {
    color: #333;
}


@media screen and (max-width: 1180px) {
    .post-layout {
        flex-direction: column;
    }

    .post-content,
    .post-sidebar {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .post-container {
        padding: 40px 0;
    }

    .post-title {
        font-size: 28px;
    }
}