/*
 * WordPress Product Experience Layer
 * Version: 1.0.0
 */

:root {
    --wpe-accent: #4F46E5;
    --wpe-accent-dark: #3730A3;
    --wpe-accent-soft: #EEF2FF;
    --wpe-ink: #172033;
    --wpe-muted: #64748B;
    --wpe-bg: #F6F8FC;
    --wpe-surface: #FFFFFF;
    --wpe-border: #E2E8F0;
    --wpe-footer: #111827;

    --wpe-reading: 780px;
    --wpe-wide: 1160px;

    --wpe-radius-sm: 8px;
    --wpe-radius-md: 14px;
    --wpe-radius-lg: 20px;

    --wpe-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 10px 30px rgba(15, 23, 42, .045);

    --wpe-shadow-hover:
        0 16px 40px rgba(15, 23, 42, .09);
}

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
    font-family:
        Pretendard,
        "Pretendard Variable",
        "Noto Sans KR",
        "Apple SD Gothic Neo",
        "Malgun Gothic",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.wpe-enabled {
    margin: 0;
    background: var(--wpe-bg);
    color: var(--wpe-ink);
    font-size: 17px;
    line-height: 1.78;
    letter-spacing: -.008em;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

.wpe-enabled a {
    color: var(--wpe-accent);
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

.wpe-enabled a:hover,
.wpe-enabled a:focus-visible {
    color: var(--wpe-accent-dark);
}

.wpe-enabled .site-header {
    background: var(--wpe-surface);
    border-bottom: 1px solid var(--wpe-border);
}

.wpe-enabled .inside-header {
    max-width: var(--wpe-wide);
    margin: 0 auto;
    padding: 24px 28px 19px;
}

.wpe-enabled .site-branding {
    max-width: 760px;
}

.wpe-enabled .main-title {
    margin: 0;
    color: var(--wpe-ink);
    font-size: clamp(1.65rem, 3vw, 2rem);
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -.045em;
}

.wpe-enabled .main-title a,
.wpe-enabled .main-title a:hover {
    color: inherit;
    text-decoration: none;
}

.wpe-enabled .site-description {
    margin-top: 7px;
    color: var(--wpe-muted);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 550;
}

.wpe-enabled .main-navigation {
    background: var(--wpe-surface);
    border-bottom: 1px solid var(--wpe-border);
}

.wpe-enabled .main-navigation .inside-navigation {
    max-width: var(--wpe-wide);
    margin: 0 auto;
    padding: 0 18px;
}

.wpe-enabled .main-navigation .main-nav ul li a {
    padding: 0 15px;
    background: transparent;
    color: var(--wpe-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 52px;
}

.wpe-enabled .main-navigation .main-nav ul li:hover > a,
.wpe-enabled .main-navigation .main-nav ul li:focus > a,
.wpe-enabled .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    background: transparent;
    color: var(--wpe-accent);
}

.wpe-enabled .site-content {
    max-width: var(--wpe-wide);
    margin: 0 auto;
    padding: 42px 24px 72px;
}

.wpe-enabled .content-area,
.wpe-enabled .site-main {
    width: 100% !important;
}

.wpe-enabled #right-sidebar,
.wpe-enabled #left-sidebar {
    display: none !important;
}

.wpe-enabled.single .inside-article,
.wpe-enabled.page .inside-article {
    max-width: var(--wpe-reading);
    margin-right: auto;
    margin-left: auto;
    padding: 50px 58px 56px;
    background: var(--wpe-surface);
    border: 1px solid var(--wpe-border);
    border-radius: var(--wpe-radius-lg);
    box-shadow: var(--wpe-shadow);
}

.wpe-enabled.home.page .inside-article {
    max-width: 1040px;
}

.wpe-enabled .entry-header {
    margin-bottom: 30px;
}

.wpe-enabled .entry-title {
    margin: 0;
    color: var(--wpe-ink);
    font-size: clamp(2rem, 3.8vw, 2.7rem);
    line-height: 1.22;
    font-weight: 850;
    letter-spacing: -.045em;
}

.wpe-enabled .entry-title a {
    color: inherit;
    text-decoration: none;
}

.wpe-enabled .entry-meta {
    margin-top: 14px;
    color: var(--wpe-muted);
    font-size: 13px;
    line-height: 1.6;
}

.wpe-enabled .entry-meta a {
    color: inherit;
    text-decoration: none;
}

.wpe-enabled .entry-content {
    color: var(--wpe-ink);
    font-size: 17px;
    line-height: 1.84;
}

.wpe-enabled .entry-content > :first-child {
    margin-top: 0;
}

.wpe-enabled .entry-content p {
    margin: 0 0 1.5em;
}

.wpe-enabled .entry-content h2,
.wpe-enabled .entry-content h3,
.wpe-enabled .entry-content h4 {
    color: var(--wpe-ink);
    font-weight: 800;
    letter-spacing: -.035em;
    scroll-margin-top: 32px;
}

.wpe-enabled .entry-content h2 {
    margin: 2.3em 0 .78em;
    font-size: 1.72em;
    line-height: 1.36;
}

.wpe-enabled .entry-content h3 {
    margin: 1.8em 0 .7em;
    font-size: 1.3em;
    line-height: 1.42;
}

.wpe-enabled .entry-content h4 {
    margin: 1.55em 0 .6em;
    font-size: 1.08em;
    line-height: 1.45;
}

.wpe-enabled .entry-content ul,
.wpe-enabled .entry-content ol {
    margin: 0 0 1.55em;
    padding-left: 1.5em;
}

.wpe-enabled .entry-content li {
    margin: .42em 0;
}

.wpe-enabled .entry-content strong {
    color: #111827;
    font-weight: 750;
}

.wpe-enabled .entry-content blockquote {
    margin: 2em 0;
    padding: 18px 22px;
    background: var(--wpe-accent-soft);
    border: 0;
    border-left: 4px solid var(--wpe-accent);
    border-radius: 0 var(--wpe-radius-sm) var(--wpe-radius-sm) 0;
    color: var(--wpe-ink);
    font-size: .98em;
}

.wpe-enabled .entry-content hr {
    margin: 2.6em 0;
    border: 0;
    border-top: 1px solid var(--wpe-border);
}

.wpe-enabled .entry-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 28px 0 34px;
    overflow-x: auto;
    border: 1px solid var(--wpe-border);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    background: var(--wpe-surface);
    font-size: .93em;
    line-height: 1.6;
    -webkit-overflow-scrolling: touch;
}

.wpe-enabled .entry-content th,
.wpe-enabled .entry-content td {
    min-width: 120px;
    padding: 13px 15px;
    border-right: 1px solid var(--wpe-border);
    border-bottom: 1px solid var(--wpe-border);
    text-align: left;
    vertical-align: top;
}

.wpe-enabled .entry-content th {
    background: var(--wpe-accent-soft);
    color: var(--wpe-ink);
    font-weight: 750;
}

.wpe-enabled .entry-content tr:last-child td {
    border-bottom: 0;
}

.wpe-enabled .entry-content th:last-child,
.wpe-enabled .entry-content td:last-child {
    border-right: 0;
}

.wpe-enabled .entry-content img,
.wpe-enabled .post-image img,
.wpe-enabled .featured-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wpe-radius-md);
}

.wpe-enabled.single .post-image,
.wpe-enabled.single .featured-image {
    max-width: var(--wpe-reading);
    margin: 0 auto 26px;
}

.wpe-enabled.blog .site-main > article,
.wpe-enabled.archive .site-main > article,
.wpe-enabled.search .site-main > article {
    margin: 0 0 24px;
    padding: 32px 36px;
    background: var(--wpe-surface);
    border: 1px solid var(--wpe-border);
    border-radius: var(--wpe-radius-md);
    box-shadow: var(--wpe-shadow);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.wpe-enabled.blog .site-main > article:hover,
.wpe-enabled.archive .site-main > article:hover,
.wpe-enabled.search .site-main > article:hover {
    transform: translateY(-2px);
    border-color: color-mix(
        in srgb,
        var(--wpe-accent) 26%,
        var(--wpe-border)
    );
    box-shadow: var(--wpe-shadow-hover);
}

.wpe-enabled.blog .entry-title,
.wpe-enabled.archive .entry-title,
.wpe-enabled.search .entry-title {
    font-size: clamp(1.45rem, 2.3vw, 1.85rem);
    line-height: 1.34;
}

.wpe-enabled .paging-navigation,
.wpe-enabled .post-navigation {
    margin-top: 32px;
}

.wpe-enabled .site-footer {
    background: var(--wpe-footer);
    color: rgba(255,255,255,.78);
}

.wpe-enabled .site-footer a {
    color: #FFFFFF;
}

.wpe-enabled .site-info {
    background: transparent;
}

.wpe-enabled .inside-site-info {
    max-width: var(--wpe-wide);
    margin: 0 auto;
    padding: 26px 24px;
    font-size: 13px;
    line-height: 1.6;
}

.wpe-enabled button,
.wpe-enabled input[type="button"],
.wpe-enabled input[type="reset"],
.wpe-enabled input[type="submit"],
.wpe-enabled .button {
    border: 0;
    border-radius: 9px;
    background: var(--wpe-accent);
    color: #FFFFFF;
    font-weight: 750;
    transition:
        background .18s ease,
        transform .18s ease;
}

.wpe-enabled button:hover,
.wpe-enabled input[type="button"]:hover,
.wpe-enabled input[type="submit"]:hover,
.wpe-enabled .button:hover {
    background: var(--wpe-accent-dark);
    color: #FFFFFF;
}

.wpe-enabled :focus-visible {
    outline: 3px solid color-mix(
        in srgb,
        var(--wpe-accent) 42%,
        transparent
    );
    outline-offset: 3px;
}

@media (max-width: 768px) {
    body.wpe-enabled {
        font-size: 16px;
        line-height: 1.74;
    }

    .wpe-enabled .inside-header {
        padding: 20px 20px 16px;
    }

    .wpe-enabled .main-title {
        font-size: 1.7rem;
    }

    .wpe-enabled .site-description {
        font-size: 13px;
    }

    .wpe-enabled .main-navigation .inside-navigation {
        padding: 0 10px;
    }

    .wpe-enabled .site-content {
        padding: 22px 12px 48px;
    }

    .wpe-enabled.single .inside-article,
    .wpe-enabled.page .inside-article {
        padding: 30px 22px 38px;
        border-radius: 14px;
    }

    .wpe-enabled .entry-header {
        margin-bottom: 24px;
    }

    .wpe-enabled .entry-title {
        font-size: clamp(1.8rem, 8vw, 2.25rem);
        line-height: 1.25;
    }

    .wpe-enabled .entry-content {
        font-size: 16px;
        line-height: 1.78;
    }

    .wpe-enabled .entry-content h2 {
        margin-top: 2.05em;
        font-size: 1.5em;
    }

    .wpe-enabled .entry-content h3 {
        font-size: 1.22em;
    }

    .wpe-enabled.blog .site-main > article,
    .wpe-enabled.archive .site-main > article,
    .wpe-enabled.search .site-main > article {
        padding: 25px 22px;
        border-radius: 13px;
    }
}

@media (max-width: 480px) {
    .wpe-enabled .site-content {
        padding-right: 8px;
        padding-left: 8px;
    }

    .wpe-enabled.single .inside-article,
    .wpe-enabled.page .inside-article {
        padding-right: 18px;
        padding-left: 18px;
    }

    .wpe-enabled .entry-title {
        font-size: 1.72rem;
    }

    .wpe-enabled .entry-content th,
    .wpe-enabled .entry-content td {
        min-width: 105px;
        padding: 11px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpe-enabled *,
    .wpe-enabled *::before,
    .wpe-enabled *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ===== Product Experience Layer 1.1 ===== */

body.wpe-enabled,
.wpe-enabled button,
.wpe-enabled input,
.wpe-enabled select,
.wpe-enabled textarea {
    font-family:
        "Pretendard Variable",
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        system-ui,
        "Segoe UI",
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;
    font-synthesis: none;
}

.wpe-enabled.home.page .entry-header {
    display: none;
}

.wpe-enabled.home.page .inside-article {
    max-width: 1100px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.wpe-enabled.home.page .entry-content {
    margin: 0;
}

.wpe-product-home {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.wpe-home-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(46px, 7vw, 82px);
    border: 1px solid var(--wpe-border);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 92% 14%,
            color-mix(
                in srgb,
                var(--wpe-accent) 16%,
                transparent
            ) 0,
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--wpe-surface) 0%,
            color-mix(
                in srgb,
                var(--wpe-accent-soft) 64%,
                white
            ) 100%
        );
    box-shadow: var(--wpe-shadow);
}

.wpe-home-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--wpe-accent) 22%,
            transparent
        );
    border-radius: 50%;
    pointer-events: none;
}

.wpe-home-kicker,
.wpe-section-kicker {
    display: inline-block;
    margin-bottom: 13px;
    color: var(--wpe-accent);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.wpe-home-hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--wpe-ink);
    font-size: clamp(2.55rem, 5.4vw, 4.35rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -.055em;
}

.wpe-home-intro {
    max-width: 710px;
    margin: 24px 0 0;
    color:
        color-mix(
            in srgb,
            var(--wpe-ink) 78%,
            var(--wpe-muted)
        );
    font-size: clamp(
        1.02rem,
        1.7vw,
        1.18rem
    );
    line-height: 1.78;
}

.wpe-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 30px;
}

.wpe-primary-action,
.wpe-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none !important;
}

.wpe-primary-action {
    background: var(--wpe-accent);
    color: #fff !important;
}

.wpe-primary-action:hover,
.wpe-primary-action:focus-visible {
    background: var(--wpe-accent-dark);
    color: #fff !important;
}

.wpe-secondary-action {
    border: 1px solid var(--wpe-border);
    background: rgba(255,255,255,.76);
    color: var(--wpe-ink) !important;
}

.wpe-secondary-action:hover,
.wpe-secondary-action:focus-visible {
    border-color:
        color-mix(
            in srgb,
            var(--wpe-accent) 42%,
            var(--wpe-border)
        );
    color: var(--wpe-accent-dark) !important;
}

.wpe-home-section {
    margin: 0;
}

.wpe-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 23px;
}

.wpe-section-heading h2 {
    margin: 0;
    color: var(--wpe-ink);
    font-size: clamp(
        1.75rem,
        3vw,
        2.25rem
    );
    line-height: 1.22;
    font-weight: 820;
    letter-spacing: -.045em;
}

.wpe-text-link {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.wpe-category-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.wpe-category-card {
    position: relative;
    display: flex;
    min-height: 210px;
    flex-direction: column;
    padding: 28px 28px 24px;
    overflow: hidden;
    border: 1px solid var(--wpe-border);
    border-radius: 17px;
    background: var(--wpe-surface);
    box-shadow: var(--wpe-shadow);
    color: var(--wpe-ink) !important;
    text-decoration: none !important;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.wpe-category-card:hover,
.wpe-category-card:focus-visible {
    transform: translateY(-3px);
    border-color:
        color-mix(
            in srgb,
            var(--wpe-accent) 38%,
            var(--wpe-border)
        );
    box-shadow: var(--wpe-shadow-hover);
}

.wpe-category-card__marker {
    width: 34px;
    height: 4px;
    margin-bottom: 23px;
    border-radius: 10px;
    background: var(--wpe-accent);
}

.wpe-category-card__title {
    display: block;
    font-size: 1.28rem;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -.025em;
}

.wpe-category-card__description {
    display: block;
    margin-top: 10px;
    color: var(--wpe-muted);
    font-size: 14px;
    line-height: 1.7;
}

.wpe-category-card__link {
    display: block;
    margin-top: auto;
    padding-top: 22px;
    color: var(--wpe-accent);
    font-size: 13px;
    font-weight: 750;
}

.wpe-principle-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.wpe-principle {
    padding: 24px;
    border-top: 3px solid var(--wpe-accent);
    border-radius: 0 0 13px 13px;
    background: var(--wpe-surface);
    box-shadow: var(--wpe-shadow);
}

.wpe-principle strong {
    display: block;
    color: var(--wpe-ink);
    font-size: 1rem;
    font-weight: 800;
}

.wpe-principle p {
    margin: 9px 0 0;
    color: var(--wpe-muted);
    font-size: 14px;
    line-height: 1.7;
}

.wpe-latest-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.wpe-latest-card {
    overflow: hidden;
    padding: 24px;
    border: 1px solid var(--wpe-border);
    border-radius: 16px;
    background: var(--wpe-surface);
    box-shadow: var(--wpe-shadow);
}

.wpe-latest-card__media {
    display: block;
    margin: -24px -24px 20px;
}

.wpe-latest-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.wpe-latest-card__category {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--wpe-accent);
    font-size: 12px;
    font-weight: 750;
}

.wpe-latest-card h3 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.48;
    font-weight: 800;
    letter-spacing: -.025em;
}

.wpe-latest-card h3 a {
    color: var(--wpe-ink);
    text-decoration: none;
}

.wpe-latest-card p {
    margin: 12px 0 0;
    color: var(--wpe-muted);
    font-size: 14px;
    line-height: 1.68;
}

.wpe-footer-line {
    margin-left: .45em;
    opacity: .74;
}

/* Editorial archive grid */

.wpe-enabled.blog .site-main,
.wpe-enabled.archive .site-main,
.wpe-enabled.search .site-main {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.wpe-enabled.blog .site-main > .page-header,
.wpe-enabled.archive .site-main > .page-header,
.wpe-enabled.search .site-main > .page-header,
.wpe-enabled.blog .site-main > .paging-navigation,
.wpe-enabled.archive .site-main > .paging-navigation,
.wpe-enabled.search .site-main > .paging-navigation,
.wpe-enabled.blog .site-main > .no-results,
.wpe-enabled.archive .site-main > .no-results,
.wpe-enabled.search .site-main > .no-results {
    grid-column: 1 / -1;
}

.wpe-enabled.blog .site-main > article,
.wpe-enabled.archive .site-main > article,
.wpe-enabled.search .site-main > article {
    height: 100%;
    margin: 0;
}

.wpe-enabled.blog .post-image img,
.wpe-enabled.archive .post-image img,
.wpe-enabled.search .post-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (max-width: 820px) {
    .wpe-product-home {
        gap: 48px;
    }

    .wpe-home-hero {
        padding: 42px 30px;
        border-radius: 21px;
    }

    .wpe-category-grid,
    .wpe-latest-grid,
    .wpe-principle-grid,
    .wpe-enabled.blog .site-main,
    .wpe-enabled.archive .site-main,
    .wpe-enabled.search .site-main {
        grid-template-columns: 1fr;
    }

    .wpe-category-card {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .wpe-home-hero {
        padding: 34px 22px;
        border-radius: 17px;
    }

    .wpe-home-hero h1 {
        font-size: 2.28rem;
    }

    .wpe-home-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .wpe-primary-action,
    .wpe-secondary-action {
        width: 100%;
    }

    .wpe-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ===== Generic Article Experience 1.2 ===== */

.wpe-enabled.single-post .inside-article {
    max-width: 860px;
    padding: 54px 64px 48px;
}

.wpe-enabled.single-post .entry-header {
    margin-bottom: 34px;
}

.wpe-enabled.single-post .entry-header > .entry-meta {
    display: none;
}

.wpe-article-context {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
}

.wpe-article-category {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 10px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--wpe-accent) 22%,
            var(--wpe-border)
        );
    border-radius: 999px;
    background: var(--wpe-accent-soft);
    color: var(--wpe-accent-dark) !important;
    font-size: 12px;
    line-height: 1;
    font-weight: 750;
    text-decoration: none !important;
}

.wpe-article-type {
    color: var(--wpe-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.wpe-enabled.single-post .entry-title {
    max-width: 760px;
    font-size: clamp(
        2.15rem,
        4.15vw,
        3.05rem
    );
    line-height: 1.19;
    letter-spacing: -.052em;
}

.wpe-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 18px;
    color: var(--wpe-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.wpe-article-meta span {
    position: relative;
}

.wpe-article-meta span + span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--wpe-border);
    transform: translateY(-50%);
}

.wpe-enabled.single-post .entry-content {
    font-size: 17px;
    line-height: 1.9;
}

.wpe-enabled.single-post .entry-content > p:first-of-type {
    color:
        color-mix(
            in srgb,
            var(--wpe-ink) 88%,
            var(--wpe-muted)
        );
    font-size: 1.035em;
}

.wpe-article-toc {
    margin: 0 0 42px;
    padding: 24px 26px;
    border: 1px solid var(--wpe-border);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            var(--wpe-surface),
            color-mix(
                in srgb,
                var(--wpe-accent-soft) 42%,
                white
            )
        );
}

.wpe-article-toc__header {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 15px;
}

.wpe-article-toc__kicker {
    color: var(--wpe-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wpe-article-toc__header strong {
    color: var(--wpe-ink);
    font-size: 16px;
    font-weight: 800;
}

.wpe-article-toc__list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    counter-reset: wpe-toc;
}

.wpe-article-toc__list li {
    position: relative;
    margin: 0 !important;
    padding: 7px 0 7px 31px !important;
    counter-increment: wpe-toc;
}

.wpe-article-toc__list li::before {
    content:
        counter(wpe-toc, decimal-leading-zero);
    position: absolute;
    top: 8px;
    left: 0;
    color: var(--wpe-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

.wpe-article-toc__list li.is-subsection {
    padding-left: 46px !important;
}

.wpe-article-toc__list li.is-subsection::before {
    left: 15px;
    opacity: .62;
}

.wpe-article-toc__list a {
    color: var(--wpe-ink);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 650;
    text-decoration: none;
}

.wpe-article-toc__list a:hover,
.wpe-article-toc__list a:focus-visible {
    color: var(--wpe-accent);
}

.wpe-enabled.single-post .entry-content h2 {
    position: relative;
    margin-top: 2.55em;
    padding-top: .25em;
    font-size: 1.72em;
}

.wpe-enabled.single-post .entry-content h2::before {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin-bottom: 15px;
    border-radius: 10px;
    background: var(--wpe-accent);
}

.wpe-enabled.single-post .entry-content h3 {
    margin-top: 2em;
}

.wpe-enabled.single-post .entry-content table {
    margin-top: 30px;
    margin-bottom: 38px;
    box-shadow:
        0 1px 2px rgba(15,23,42,.025);
}

.wpe-article-end {
    margin-top: 58px;
    padding-top: 30px;
    border-top: 1px solid var(--wpe-border);
}

.wpe-article-end__category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--wpe-accent-soft);
}

.wpe-article-end__category span {
    color: var(--wpe-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.wpe-article-end__category a {
    color: var(--wpe-accent-dark);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.wpe-related {
    margin-top: 48px;
}

.wpe-related__heading {
    margin-bottom: 18px;
}

.wpe-related__heading > span {
    display: block;
    margin-bottom: 4px;
    color: var(--wpe-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.wpe-related__heading h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.45rem !important;
}

.wpe-related__heading h2::before {
    display: none !important;
}

.wpe-related__grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
    gap: 12px;
}

.wpe-related-card {
    padding: 18px;
    border: 1px solid var(--wpe-border);
    border-radius: 12px;
    background: var(--wpe-surface);
}

.wpe-related-card h3 {
    margin: 0 0 12px !important;
    font-size: .96rem !important;
    line-height: 1.5 !important;
}

.wpe-related-card h3 a {
    color: var(--wpe-ink);
    text-decoration: none;
}

.wpe-related-card h3 a:hover {
    color: var(--wpe-accent);
}

.wpe-related-card > span {
    color: var(--wpe-muted);
    font-size: 11px;
}

/* Site-specific editorial nuance without article IDs */

.wpe-product-docknas.single-post
.wpe-article-toc {
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F5F7FF
        );
}

.wpe-product-teeroutine.single-post
.wpe-article-toc {
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F4FAF6
        );
}

.wpe-product-3fuelcar.single-post
.wpe-article-toc {
    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #FFF8F2
        );
}

@media (max-width: 768px) {
    .wpe-enabled.single-post .inside-article {
        padding:
            34px
            22px
            38px;
    }

    .wpe-enabled.single-post .entry-title {
        font-size: clamp(
            1.85rem,
            8vw,
            2.25rem
        );
        line-height: 1.24;
    }

    .wpe-article-meta {
        gap: 6px 14px;
    }

    .wpe-article-meta span + span::before {
        left: -8px;
    }

    .wpe-article-toc {
        margin-bottom: 34px;
        padding: 20px;
    }

    .wpe-related__grid {
        grid-template-columns: 1fr;
    }

    .wpe-article-end__category {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* =========================================================
   Product Brand Shell 1.3
   ========================================================= */

/*
 * The legacy GeneratePress navigation remains in markup
 * as a fallback, but the product shell owns visible
 * navigation when Experience Layer is enabled.
 */

.wpe-enabled .main-navigation {
    display: none;
}

/* ---------- Brand header ---------- */

.wpe-enabled .site-header {
    border: 0;
    background: var(--wpe-surface);
}

.wpe-enabled .inside-header {
    display: flex;
    min-height: 104px;
    align-items: center;
    justify-content: space-between;
    max-width: var(--wpe-wide);
    margin: 0 auto;
    padding: 23px 28px 21px;
}

.wpe-enabled .site-branding {
    position: relative;
    max-width: 720px;
    padding-left: 18px;
}

.wpe-enabled .site-branding::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 4px;
    border-radius: 99px;
    background: var(--wpe-accent);
}

.wpe-enabled .main-title {
    font-size: clamp(
        1.75rem,
        2.5vw,
        2.18rem
    );
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -.052em;
}

.wpe-enabled .site-description {
    max-width: 620px;
    margin-top: 8px;
    color: var(--wpe-muted);
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 550;
}

/* ---------- Product topic navigation ---------- */

.wpe-topic-nav-shell {
    position: relative;
    z-index: 20;
    border-top: 1px solid var(--wpe-border);
    border-bottom: 1px solid var(--wpe-border);
    background:
        color-mix(
            in srgb,
            var(--wpe-surface) 94%,
            var(--wpe-accent-soft)
        );
}

.wpe-topic-nav-wrap {
    max-width: var(--wpe-wide);
    margin: 0 auto;
    padding: 0 18px;
}

.wpe-topic-nav {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.wpe-topic-nav::-webkit-scrollbar {
    display: none;
}

.wpe-topic-nav__item {
    position: relative;
    display: inline-flex;
    min-height: 49px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    color: var(--wpe-muted) !important;
    font-size: 13.5px;
    line-height: 1;
    font-weight: 680;
    letter-spacing: -.012em;
    text-decoration: none !important;
    transition:
        color .16s ease,
        background .16s ease;
}

.wpe-topic-nav__item:hover,
.wpe-topic-nav__item:focus-visible {
    color: var(--wpe-ink) !important;
}

.wpe-topic-nav__item.is-active {
    color: var(--wpe-accent-dark) !important;
    font-weight: 780;
}

.wpe-topic-nav__item.is-active::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 3px;
    border-radius: 9px 9px 0 0;
    background: var(--wpe-accent);
}

/* ---------- Overall product canvas ---------- */

body.wpe-enabled {
    background:
        color-mix(
            in srgb,
            var(--wpe-bg) 82%,
            #FFFFFF
        );
}

.wpe-enabled .site-content {
    padding-top: 48px;
}

/* ---------- Premium article canvas ---------- */

/*
 * Remove the oversized rounded "blog card" feeling.
 * The article should read like an editorial page.
 */

.wpe-enabled.single-post .inside-article {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
    padding:
        58px
        68px
        68px;
    border: 0;
    border-radius: 0;
    background: var(--wpe-surface);
    box-shadow:
        0 1px 0 rgba(15,23,42,.04),
        0 22px 56px rgba(15,23,42,.035);
}

.wpe-enabled.single-post .entry-header {
    position: relative;
    margin-bottom: 42px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--wpe-border);
}

.wpe-enabled.single-post .entry-title {
    max-width: 760px;
}

.wpe-enabled.single-post .entry-content {
    color:
        color-mix(
            in srgb,
            var(--wpe-ink) 95%,
            black
        );
}

/* stronger editorial rhythm */

.wpe-enabled.single-post
.entry-content > p {
    max-width: 100%;
}

.wpe-enabled.single-post
.entry-content > p + p {
    margin-top: -.08em;
}

.wpe-enabled.single-post
.entry-content h2 {
    margin-top: 2.75em;
}

.wpe-enabled.single-post
.entry-content h3 {
    margin-top: 2.15em;
}

/* ---------- Tables ---------- */

.wpe-enabled.single-post
.entry-content table {
    border-radius: 13px;
    background: #FFFFFF;
    box-shadow:
        0 8px 28px rgba(15,23,42,.035);
}

.wpe-enabled.single-post
.entry-content th {
    color: var(--wpe-ink);
    background:
        color-mix(
            in srgb,
            var(--wpe-accent-soft) 72%,
            #FFFFFF
        );
}

/* ---------- Archive / search editorial shell ---------- */

.wpe-enabled.wpe-editorial-index
.site-content {
    padding-top: 42px;
}

.wpe-enabled.wpe-editorial-index
.page-header {
    margin-bottom: 8px;
    padding: 0 0 24px;
    border: 0;
    background: transparent;
}

.wpe-enabled.wpe-editorial-index
.page-title {
    color: var(--wpe-ink);
    font-size: clamp(
        2rem,
        3.6vw,
        2.65rem
    );
    line-height: 1.16;
    font-weight: 850;
    letter-spacing: -.045em;
}

.wpe-enabled.blog .site-main > article,
.wpe-enabled.archive .site-main > article,
.wpe-enabled.search .site-main > article {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow:
        0 1px 2px rgba(15,23,42,.025),
        0 10px 30px rgba(15,23,42,.035);
}

.wpe-enabled.blog .site-main > article:hover,
.wpe-enabled.archive .site-main > article:hover,
.wpe-enabled.search .site-main > article:hover {
    transform: translateY(-3px);
}

/* ---------- Footer ---------- */

.wpe-enabled .site-footer {
    margin-top: 72px;
    border-top:
        4px solid
        color-mix(
            in srgb,
            var(--wpe-accent) 78%,
            var(--wpe-footer)
        );
}

.wpe-enabled .inside-site-info {
    min-height: 104px;
    display: flex;
    align-items: center;
}

/* ---------- Per-product nuance ---------- */

.wpe-product-docknas .site-branding::before {
    box-shadow:
        0 0 0 5px
        rgba(79,70,229,.055);
}

.wpe-product-teeroutine .site-branding::before {
    box-shadow:
        0 0 0 5px
        rgba(15,118,110,.055);
}

.wpe-product-3fuelcar .site-branding::before {
    box-shadow:
        0 0 0 5px
        rgba(234,88,12,.055);
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    .wpe-enabled .inside-header {
        min-height: 88px;
        padding:
            18px
            20px
            16px;
    }

    .wpe-enabled .site-branding {
        padding-left: 14px;
    }

    .wpe-enabled .site-branding::before {
        width: 3px;
    }

    .wpe-enabled .main-title {
        font-size: 1.72rem;
    }

    .wpe-enabled .site-description {
        max-width: 90vw;
        font-size: 12.5px;
    }

    .wpe-topic-nav-wrap {
        padding:
            0
            8px;
    }

    .wpe-topic-nav__item {
        min-height: 46px;
        padding:
            0
            11px;
        font-size: 13px;
    }

    .wpe-enabled .site-content {
        padding-top: 24px;
    }

    .wpe-enabled.single-post .inside-article {
        padding:
            34px
            22px
            44px;
        box-shadow: none;
    }

    .wpe-enabled.single-post .entry-header {
        margin-bottom: 31px;
        padding-bottom: 25px;
    }

    .wpe-enabled .site-footer {
        margin-top: 48px;
    }

    .wpe-enabled .inside-site-info {
        min-height: 84px;
    }
}

@media (max-width: 480px) {
    .wpe-enabled .inside-header {
        padding-right: 16px;
        padding-left: 16px;
    }

    .wpe-enabled .main-title {
        font-size: 1.58rem;
    }

    .wpe-enabled.single-post .inside-article {
        padding:
            28px
            18px
            40px;
    }
}

/* =========================================================
   Visual Refinement 1.4
   Evidence: desktop article screenshot QC
   ========================================================= */

/* 1. Better-balanced article headline.
   Keep editorial impact without oversized awkward wrapping. */

.wpe-enabled.single-post .entry-title {
    max-width: 930px;
    font-size: clamp(
        2.4rem,
        3.55vw,
        3.55rem
    );
    line-height: 1.12;
    letter-spacing: -.052em;
    text-wrap: balance;
}

/* 2. Narrow long-form reading measure.
   Featured visual remains wide; prose becomes easier to scan. */

.wpe-enabled.single-post .entry-content {
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
}

.wpe-enabled.single-post .entry-content p,
.wpe-enabled.single-post .entry-content li {
    line-height: 1.88;
}

/* Tables should retain the usable editorial width. */

.wpe-enabled.single-post .entry-content table {
    width: 100%;
}

/* 3. Refine the table-of-contents footprint.
   Long TOCs should not dominate the opening viewport. */

.wpe-enabled .wpe-article-toc {
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 900px) {
    .wpe-enabled
    .wpe-article-toc
    ol {
        column-count: 2;
        column-gap: 44px;
    }

    .wpe-enabled
    .wpe-article-toc
    li {
        break-inside: avoid;
    }
}

/* 4. Slightly tighter article ending and transition to footer. */

.wpe-enabled.single-post .inside-article {
    padding-bottom: 54px;
}

.wpe-enabled.single-post .site-footer {
    margin-top: 48px;
}

/* 5. Footer spacing/readability.
   Prevent contact link and copyright from visually touching. */

.wpe-enabled .inside-site-info {
    padding: 30px 28px;
    line-height: 1.7;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 10px;
}

.wpe-enabled .inside-site-info a {
    display: inline-block;
    margin-right: 24px;
}

.wpe-enabled .inside-site-info a:last-of-type {
    margin-right: 30px;
}

/* 6. Current topic state is intentionally more visible. */

.wpe-enabled.single-post
.wpe-topic-nav__item.is-active {
    color: var(--wpe-accent-dark) !important;
    background:
        color-mix(
            in srgb,
            var(--wpe-accent-soft) 54%,
            transparent
        );
}

/* Mobile keeps a comfortable measure and simpler TOC. */

@media (max-width: 899px) {
    .wpe-enabled
    .wpe-article-toc
    ol {
        column-count: 1;
    }
}

@media (max-width: 768px) {
    .wpe-enabled.single-post .entry-title {
        max-width: none;
        font-size: clamp(
            2rem,
            8.5vw,
            2.65rem
        );
        line-height: 1.14;
    }

    .wpe-enabled.single-post .entry-content {
        max-width: none;
    }

    .wpe-enabled.single-post .inside-article {
        padding-bottom: 38px;
    }

    .wpe-enabled.single-post .site-footer {
        margin-top: 34px;
    }

    .wpe-enabled .inside-site-info {
        padding:
            26px
            20px;
    }

    .wpe-enabled .inside-site-info a {
        margin-right: 18px;
    }
}


/* =========================================================
   Experience Layer 1.4.1
   Final mobile long-TOC refinement.
   Desktop rendering intentionally unchanged.
   ========================================================= */

.wpe-article-toc__mobile-hint {
    display: none;
}

@media (max-width: 768px) {
    .wpe-enabled
    .wpe-article-toc.is-long {
        padding:
            18px
            18px
            16px;
    }

    .wpe-enabled
    .wpe-article-toc.is-long
    .wpe-article-toc__header {
        margin-bottom: 8px;
    }

    .wpe-enabled
    .wpe-article-toc.is-long
    .wpe-article-toc__mobile-hint {
        display: block;
        margin:
            0
            0
            9px;
        color: var(--wpe-muted);
        font-size: 11px;
        line-height: 1.4;
        font-weight: 600;
    }

    .wpe-enabled
    .wpe-article-toc.is-long
    .wpe-article-toc__list {
        max-height: 430px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        -webkit-overflow-scrolling: touch;
        padding-right: 8px !important;
    }

    .wpe-enabled
    .wpe-article-toc.is-long
    .wpe-article-toc__list
    li {
        padding:
            5px
            0
            5px
            30px !important;
    }

    .wpe-enabled
    .wpe-article-toc.is-long
    .wpe-article-toc__list
    li.is-subsection {
        padding-left:
            42px !important;
    }

    .wpe-enabled
    .wpe-article-toc.is-long
    .wpe-article-toc__list
    a {
        font-size: 13.5px;
        line-height: 1.4;
    }
}