.article-shell {
    padding-bottom: 2rem;
}

.site-breadcrumb {
    margin: 1.25rem 0 1.1rem;
}

.site-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.site-breadcrumb-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.site-breadcrumb-list li:not(:last-child)::after {
    content: '/';
    color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
    font-weight: 500;
}

.site-breadcrumb-list a {
    color: var(--amber-hot);
    text-decoration: none;
    font-weight: 600;
}

.site-breadcrumb-list a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.site-breadcrumb-list [aria-current='page'] span,
.site-breadcrumb-list [aria-current='page'] {
    color: var(--ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(70vw, 28rem);
}

.article-main {
    padding: 0.2rem 0 1.5rem;
    /* 與 site-breadcrumb／home-shell 同寬，勿另設 max-width */
    max-width: none;
    width: 100%;
}

.article-meta {
    margin: 0 0 0.65rem;
    color: var(--ink-soft);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
}

.article-title {
    margin: 0 0 0.9rem;
    font-family: var(--serif);
    font-size: clamp(1.55rem, 4.2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--interior);
}

.article-excerpt {
    margin: 0 0 1.75rem;
    padding: 1rem 1.15rem 1rem 1.2rem;
    border-left: 3px solid var(--amber);
    border-radius: 0 14px 14px 0;
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.75;
    background:
        linear-gradient(
            110deg,
            color-mix(in srgb, var(--amber) 10%, transparent),
            color-mix(in srgb, var(--glass) 65%, transparent) 55%,
            transparent
        );
}

.article-body {
    --article-indent: clamp(0.85rem, 3.2vw, 1.55rem);
    --article-rail: 0.72rem;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.9;
    letter-spacing: 0.01em;
}

/* 開篇段落：略大、不縮排，作為導讀 */
.article-body > p:first-child {
    margin: 0 0 1.35rem;
    padding: 0;
    font-size: clamp(1.06rem, 2.4vw, 1.14rem);
    line-height: 1.95;
    color: color-mix(in srgb, var(--ink) 92%, var(--interior));
}

.article-body > p:first-child + p {
    margin-bottom: 1.5rem;
}

/* h2：左側飾線 + 略突出，與內文形成層次 */
.article-body > h2 {
    position: relative;
    margin: 2.35rem 0 1rem;
    padding: 0.35rem 0.4rem 0.35rem calc(var(--article-rail) + 0.75rem);
    font-family: var(--serif);
    font-size: clamp(1.22rem, 2.8vw, 1.42rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--interior);
}

.article-body > h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        var(--amber-hot),
        color-mix(in srgb, var(--amber) 55%, transparent)
    );
}

.article-body > h2::after {
    content: '';
    display: block;
    width: min(7.5rem, 42%);
    height: 1px;
    margin-top: 0.65rem;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--amber) 55%, transparent),
        transparent
    );
}

.article-body > h3 {
    margin: 1.55rem 0 0.7rem;
    padding-left: var(--article-indent);
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
    color: color-mix(in srgb, var(--interior) 88%, var(--amber));
}

/* 段落／列表：內縮層次，寬度與 nav／標題欄對齊 */
.article-body > p,
.article-body > ul,
.article-body > ol {
    margin: 0 0 1.05rem;
    padding-left: var(--article-indent);
    max-width: none;
}

.article-body > ul,
.article-body > ol {
    padding-left: calc(var(--article-indent) + 1.15rem);
}

.article-body > ul {
    list-style: none;
}

.article-body > ul > li {
    position: relative;
    margin: 0.45rem 0;
    padding-left: 0.15rem;
}

.article-body > ul > li::before {
    content: '';
    position: absolute;
    left: calc(-0.95rem);
    top: 0.72em;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--amber-hot) 80%, var(--interior));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent);
}

.article-body > ol > li {
    margin: 0.4rem 0;
    padding-left: 0.15rem;
}

.article-body > p + ul,
.article-body > p + ol {
    margin-top: -0.15rem;
}

.article-body a {
    color: var(--amber-hot);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.article-body a:hover {
    color: var(--interior);
}

/* h2 後第一段稍微緊一點，形成「標題＋內容」單元感 */
.article-body > h2 + p,
.article-body > h2 + ul,
.article-body > h2 + ol {
    margin-top: 0.15rem;
}

@media (max-width: 639px) {
    .article-body {
        --article-indent: 0.7rem;
        --article-rail: 0.55rem;
    }

    .article-body > h2 {
        margin-top: 2rem;
        font-size: 1.18rem;
    }

    .article-excerpt {
        padding: 0.85rem 0.95rem;
    }
}

.article-faq {
    margin: 2.6rem 0 1.5rem;
    padding: 1.25rem 1.15rem 1.35rem;
    border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--line));
    border-radius: 18px;
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--amber) 12%, transparent),
            color-mix(in srgb, var(--glass) 80%, transparent) 42%,
            transparent
        );
    box-shadow: 0 12px 28px color-mix(in srgb, var(--pavement-deep) 28%, transparent);
}

.article-faq-head {
    margin: 0 0 1.1rem;
}

.article-faq-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--amber-hot);
    text-transform: uppercase;
}

.article-faq-title {
    margin: 0 0 0.4rem !important;
    font-size: clamp(1.25rem, 3vw, 1.55rem) !important;
}

.article-faq-list {
    display: grid;
    gap: 0.75rem;
}

.article-faq-item {
    padding: 0.9rem 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--pavement-deep) 22%, transparent);
}

.article-faq-q,
.article-faq-a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: start;
}

.article-faq-a {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
}

.article-faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--btn-primary-ink, #1a1208);
    background: linear-gradient(145deg, var(--amber-hot), var(--amber));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--amber) 35%, transparent);
}

.article-faq-badge.is-a {
    color: var(--interior);
    background: color-mix(in srgb, var(--glass) 70%, var(--pavement));
    border: 1px solid var(--line);
    box-shadow: none;
}

.article-faq-question {
    margin: 0.1rem 0 0 !important;
    font-family: var(--serif);
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    color: var(--interior) !important;
}

.article-faq-answer {
    margin: 0.15rem 0 0 !important;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.75;
}

.article-related {
    margin: 2.2rem 0 0.5rem;
    padding: 1.15rem 1.1rem 1.2rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--glass) 55%, transparent);
}

.article-related-title {
    margin: 0 0 0.35rem !important;
    font-size: clamp(1.15rem, 2.8vw, 1.4rem) !important;
}

.article-related-list {
    margin: 0 0 0.9rem !important;
    padding-left: 1.15rem !important;
}

.article-related-list li {
    margin: 0.4rem 0;
}

.article-related-list a {
    font-weight: 600;
}

.article-related-nav {
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    align-items: center;
    font-size: 0.92rem;
}

.article-related-sep {
    opacity: 0.55;
}

.articles-list-head {
    margin: 0 0 1.25rem;
}

.articles-list-title {
    margin: 0 0 0.45rem;
    font-family: var(--serif);
    font-size: clamp(1.55rem, 4vw, 2rem);
    color: var(--interior);
}

.articles-list-sub {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.articles-list-rail {
    display: grid;
    gap: 0.85rem;
}

.articles-list-empty {
    margin: 0;
    color: var(--ink-soft);
}

.article-footer {
    margin-top: 2rem;
}