:root{--ad-green:#00b968;--ad-red:#ef3444;--ad-ink:#09251b;--ad-muted:#61756d;--ad-line:#cfe0d8;--ad-soft:#f3f9f6}*,*::before,*::after{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}.public-article-detail{width:min(100%,760px);max-width:100%;margin:0 auto;padding:14px 10px 108px;overflow:hidden;color:var(--ad-ink);background:linear-gradient(180deg,#f4faf7,#edf4f1)}.public-article-detail a{color:inherit;text-decoration:none}.article-detail-back{padding:4px 4px 12px}.article-detail-back a{color:#008d50;font-weight:850}.article-detail-card,.article-journey{overflow:hidden;border:1px solid var(--ad-line);border-radius:20px;background:#fff;box-shadow:0 10px 28px #173e2f0b}.article-detail-header{padding:20px 17px}.article-detail-kicker{margin:0;color:#e22937;font-size:12px;font-weight:900;letter-spacing:.04em}.article-detail-header h1{margin:10px 0;font-size:clamp(30px,8vw,46px);line-height:1.08}.article-detail-lead{margin:0;color:var(--ad-muted);font-size:16px;line-height:1.6}.article-detail-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.article-detail-meta span,.article-detail-topics a{padding:6px 9px;border-radius:999px;background:#edf7f2;color:#587068;font-size:12px}.article-detail-topics{display:flex;gap:7px;margin-top:10px;overflow-x:auto}.article-detail-topics a{flex:none;color:#007b45;font-weight:800}.article-detail-cover{margin:0;aspect-ratio:16/10;overflow:hidden;background:#e9f3ee}.article-detail-cover img{width:100%;height:100%;object-fit:cover}.article-detail-content{padding:22px 18px;color:#18362b;font-size:16px;line-height:1.78}.article-detail-content h2,.article-detail-content h3,.article-detail-content h4{color:#071f17;line-height:1.25;scroll-margin-top:20px}.article-detail-content h2{margin:30px 0 10px;font-size:26px;border-left:4px solid var(--ad-green);padding-left:11px}.article-detail-content h3{margin:24px 0 8px;font-size:21px}.article-detail-content h4{margin:20px 0 7px;font-size:18px}.article-detail-content p{margin:0 0 16px}.article-detail-content ul,.article-detail-content ol{padding-left:23px}.article-detail-content blockquote{margin:18px 0;padding:14px 16px;border-left:4px solid #f5a04d;background:#fff7ef;border-radius:0 12px 12px 0}.article-detail-content a{color:#008a4e;text-decoration:underline}.article-detail-like{padding:16px 18px 20px;border-top:1px solid #e2ebe7}.article-detail-like button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:49px;border:1px solid #ef8e97;border-radius:14px;background:#fff;color:#d92332;font:inherit;font-weight:900}.article-detail-like button.is-liked{background:#fff0f2}.article-detail-like button:disabled{opacity:.62}.article-detail-like [data-like-icon]{font-size:24px}.article-detail-like p{min-height:18px;margin:8px 0 0;color:var(--ad-muted);font-size:12px;text-align:center}.article-journey{margin-top:16px;padding:18px}.article-journey h2{margin:6px 0 14px;font-size:23px}.article-journey-links{display:grid;gap:10px}.article-journey-links a{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:14px;border:1px solid #cfe1d8;border-radius:15px;background:var(--ad-soft)}.article-journey-links a>span{grid-row:1/3;font-size:25px}.article-journey-links small{color:#60746c}.article-related-list{display:grid;gap:9px;margin-top:14px}.article-related-list>a{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:13px;border:1px solid #d6e3dd;border-radius:14px}.article-related-list small{color:#687c74}.article-related-list span{grid-column:2;grid-row:1/3;align-self:center;color:#e42b38;font-size:24px}.article-detail-bottom-nav{position:fixed;z-index:50;left:50%;bottom:8px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;width:min(calc(100% - 14px),720px);height:76px;padding:8px 5px;border:1px solid #65dca3;border-radius:18px;background:#fffe;box-shadow:0 10px 34px #0b5b3d22;transform:translateX(-50%);backdrop-filter:blur(12px)}.article-detail-bottom-nav a{display:grid;place-items:center;gap:3px;min-width:0;color:#58655f;font-weight:800}.article-detail-bottom-nav a>span{font-size:17px}.article-detail-bottom-nav small{font-size:10px;white-space:nowrap}.article-detail-bottom-nav a.is-active{color:#00a75d}.article-detail-bottom-nav__mark{display:grid!important;place-items:center;width:58px;height:58px;margin-top:-31px;border:3px solid #00cf72;border-radius:50%;background:#fff;box-shadow:0 7px 18px #006b3c24}.article-detail-bottom-nav__mark img{width:48px;height:48px;object-fit:contain;border-radius:50%}.article-detail-bottom-nav__home>small{color:#008f50}@media(min-width:620px){.public-article-detail{padding-inline:16px}.article-detail-header,.article-detail-content{padding-left:30px;padding-right:30px}.article-journey-links{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:360px){.article-detail-bottom-nav small{font-size:9px}.article-detail-header h1{font-size:29px}}


/* DMC 9.15B - Article detail desktop */
@media (min-width: 1024px) {
    body:has(#public-article-detail-page) .auth-shell {
        width: min(100%, 1240px);
        max-width: none;
        padding: 28px 28px 116px;
        justify-content: flex-start;
    }

    body:has(#public-article-detail-page) .auth-content {
        width: 100%;
        min-width: 0;
    }

    .public-article-detail {
        display: grid;
        grid-template-columns: minmax(0, 820px) minmax(290px, 1fr);
        align-items: start;
        gap: 24px;
        width: 100%;
        max-width: 1180px;
        padding: 20px 0 40px;
        overflow: visible;
    }

    .article-detail-back {
        grid-column: 1 / -1;
        padding: 3px 2px 0;
        font-size: 15px;
    }

    .article-detail-card {
        grid-column: 1;
        border-radius: 26px;
    }

    .article-detail-header {
        padding: 42px 52px 34px;
    }

    .article-detail-header h1 {
        font-size: clamp(38px, 4vw, 56px);
    }

    .article-detail-lead {
        font-size: 18px;
    }

    .article-detail-content {
        padding: 42px 56px 54px;
        font-size: 17px;
        line-height: 1.86;
    }

    .article-detail-like {
        padding: 20px 56px 28px;
    }

    .article-journey {
        position: sticky;
        top: 22px;
        grid-column: 2;
        margin-top: 0;
        padding: 24px;
        border-radius: 22px;
    }

    .article-journey-links {
        grid-template-columns: 1fr;
    }

    .article-related-list {
        grid-template-columns: 1fr;
    }
}

/* DMC 9.20 - responsive images embedded in article content */
.article-detail-content .article-content-image {
    width: 100%;
    margin: 24px 0;
}

.article-detail-content .article-content-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 820px;
    object-fit: contain;
    border-radius: 16px;
    background: #eef5f1;
    box-shadow: 0 8px 24px rgba(17, 73, 48, .08);
}

.article-detail-content .article-content-image figcaption {
    max-width: 760px;
    margin: 9px auto 0;
    color: #617168;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

@media (min-width: 900px) {
    .article-detail-content .article-content-image {
        margin-block: 32px;
    }

    .article-detail-content .article-content-image img {
        border-radius: 20px;
    }
}