/* ======================================================
   Myth Page
====================================================== */


:root {
    --page-width: 1280px;

    --text-main: #262626;
    --text-muted: #777;
    --border: #d7d7d7;

    --background: #fafafa;
    --card-background: rgba(255, 255, 255, .86);
}


/* Header / Menu 樣式統一由 common.css 提供（與 index 一致） */


/* ======================================================
   Hero
====================================================== */

.myth-hero {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #fdfdfd,
            #f7f7f5
        );

    border-bottom: 1px solid #ddd;
}

.myth-hero::after {
    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 120px;

    opacity: .12;

    background:
        url("/images/ink-mountain.webp")
        center bottom / cover no-repeat;

    pointer-events: none;
}

.myth-hero-inner {
    width: min(1500px, 100%);

    min-height: 230px;

    margin: 0 auto;

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(240px, 1fr)
        minmax(500px, 1.5fr)
        minmax(240px, 1fr);

    align-items: stretch;
}

.hero-content {
    position: relative;

    z-index: 2;

    padding: 23px 20px 30px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.breadcrumb {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 8px;

    color: #555;

    text-align: left;

    font-size: 13px;
}

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

.hero-content h1 {
    margin: 0 0 10px;

    color: #111;

    font-family:
        "Noto Serif TC",
        "Songti TC",
        "PMingLiU",
        serif;

    font-size: 52px;
    font-weight: 800;

    letter-spacing: .18em;
}

.hero-subtitle {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 13px;

    font-size: 18px;
    letter-spacing: .18em;
}

.hero-line {
    width: 70px;
    height: 1px;

    background: #333;
}

.hero-description {
    max-width: 660px;

    margin: 0;

    color: #444;

    font-size: 14px;

    line-height: 1.9;
}

.hero-illustration {
    position: relative;

    display: flex;
    align-items: flex-end;
}

.hero-illustration img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: bottom center;

    filter: grayscale(1);

    opacity: .9;
}


/* ======================================================
   Main layout
====================================================== */

.myth-content {
    padding: 21px 0 48px;

    background:
        linear-gradient(
            rgba(255, 255, 255, .93),
            rgba(255, 255, 255, .93)
        ),
        url("/images/paper-texture.webp");
}

.myth-layout {
    width: min(var(--page-width), 92%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(280px, 1fr);

    gap: 35px;
}


/* ======================================================
   Toolbar
====================================================== */

.article-toolbar {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-bottom: 18px;
}

.article-search {
    width: 370px;
    height: 42px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 14px;

    border: 1px solid #ccc;
    border-radius: 4px;

    background: white;
}

.article-search svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: #222;
    stroke-width: 1.5;
}

.article-search input {
    flex: 1;

    min-width: 0;

    border: 0;
    outline: none;

    background: transparent;

    color: #333;

    font-size: 14px;
}

.article-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.filter-button {
    min-width: 59px;
    height: 38px;

    padding: 0 16px;

    border: 1px solid #ccc;
    border-radius: 4px;

    background: white;

    color: #333;

    font-size: 14px;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.filter-button:hover,
.filter-button.active {
    color: white;
    background: #292929;
    border-color: #292929;
}


/* ======================================================
   Article cards
====================================================== */

.myth-article-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.article-card {
    min-height: 145px;

    padding: 18px 20px;

    position: relative;

    display: flex;
    flex-direction: column;

    border: 1px solid var(--border);
    border-radius: 4px;

    background: var(--card-background);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.article-card:hover {
    transform: translateY(-2px);

    border-color: #aaa;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .045);
}

.article-card-title {
    margin:
        0
        0
        8px;

    font-size: 18px;

    line-height: 1.5;
}

.article-card-title a {
    color: #222;

    text-decoration: none;
}

.article-card-excerpt {
    margin: 0;

    flex: 1;

    color: #555;

    font-size: 13px;

    line-height: 1.7;
}

.article-card-meta {
    display: flex;
    gap: 10px;

    margin-top: 13px;

    color: #777;

    font-size: 12px;
}

.article-card-meta span + span::before {
    content: "｜";

    margin-right: 10px;

    color: #aaa;
}

.article-read-more {
    position: absolute;

    right: 18px;
    bottom: 15px;

    color: #444;

    text-decoration: none;

    font-size: 12px;

    opacity: 0;

    transition: opacity .15s ease;
}

.article-card:hover .article-read-more {
    opacity: 1;
}

.article-loading,
.article-empty,
.article-error {
    grid-column: 1 / -1;

    padding: 80px 20px;

    color: #777;

    text-align: center;
}


/* ======================================================
   Sidebar
====================================================== */

.myth-sidebar {
    display: flex;
    flex-direction: column;

    gap: 13px;
}

.sidebar-card {
    padding: 18px 20px;

    border: 1px solid var(--border);
    border-radius: 4px;

    background:
        rgba(255, 255, 255, .9);
}

.sidebar-title {
    display: flex;
    align-items: center;

    gap: 9px;

    margin:
        0
        0
        13px;

    color: #222;

    font-family:
        "Noto Serif TC",
        serif;

    font-size: 20px;

    letter-spacing: .08em;
}

.sidebar-icon {
    font-size: 16px;
}

.popular-list {
    margin: 0;

    padding-left: 27px;
}

.popular-list li {
    padding: 7px 0;

    color: #222;

    font-size: 13px;
}

.popular-list a,
.recommend-list a {
    color: #333;

    text-decoration: none;
}

.popular-list a:hover,
.recommend-list a:hover {
    text-decoration: underline;
}

.recommend-list {
    margin: 0;

    padding-left: 20px;

    font-size: 13px;

    line-height: 1.9;
}

.sidebar-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.sidebar-tags button {
    padding: 5px 10px;

    border: 1px solid #d1d1d1;
    border-radius: 4px;

    background: #fff;

    color: #444;

    font-size: 12px;

    cursor: pointer;
}

.sidebar-tags button:hover {
    background: #eee;
}


/* ======================================================
   Member
====================================================== */

.member-card {
    display: flex;

    gap: 16px;
}

.member-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid #444;
    border-radius: 50%;

    color: #444;
}

.member-card h2 {
    margin: 0 0 7px;

    font-family:
        "Noto Serif TC",
        serif;

    font-size: 17px;
}

.member-card p {
    margin: 0 0 14px;

    color: #555;

    font-size: 12px;

    line-height: 1.6;
}

.member-actions {
    display: flex;
    gap: 11px;
}

.button {
    min-width: 105px;

    padding: 9px 18px;

    display: inline-flex;
    justify-content: center;

    border-radius: 3px;

    text-decoration: none;

    font-size: 13px;
}

.button-light {
    color: #222;

    border: 1px solid #999;

    background: white;
}

.button-dark {
    color: white;

    border: 1px solid #333;

    background: #333;
}


/* ======================================================
   Pagination
====================================================== */

.pagination {
    min-height: 54px;

    margin-top: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;
}

.pagination button {
    min-width: 36px;
    height: 36px;

    border: 1px solid #ddd;
    border-radius: 3px;

    background: white;

    cursor: pointer;
}

.pagination button.active {
    color: white;

    background: #292929;

    border-color: #292929;
}


/* ======================================================
   Footer
====================================================== */

.site-footer {
    border-top: 1px solid #ddd;

    background: rgba(255, 255, 255, .96);
}

.footer-inner {
    width: min(var(--page-width), 92%);

    min-height: 60px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #666;

    font-size: 12px;
}

.footer-nav {
    display: flex;
    gap: 25px;
}

.footer-nav a {
    color: #555;
    text-decoration: none;
}


/* ======================================================
   Back to top
====================================================== */

.back-to-top {
    width: 42px;
    height: 42px;

    position: fixed;

    right: 24px;
    bottom: 20px;

    border: 0;
    border-radius: 50%;

    color: white;
    background: #292929;

    font-size: 20px;

    cursor: pointer;
}


/* ======================================================
   Responsive
====================================================== */

@media (max-width: 1050px) {

    .myth-layout {
        grid-template-columns: 1fr;
    }

    .myth-sidebar {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 820px) {

    .myth-hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-illustration {
        display: none;
    }

    .hero-content h1 {
        font-size: 38px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-line {
        width: 30px;
    }

    .article-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .article-search {
        width: 100%;
    }

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

    .myth-sidebar {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        padding: 20px 0;

        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
    }

}



/* ======================================================
   ShangHan Learning Map
====================================================== */

.shanghan-learning-map {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-top: 6px;
}

.learning-step {
    padding: 9px 11px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border: 1px solid #ddd;
    border-radius: 3px;

    background:
        rgba(255, 255, 255, .72);
}

.learning-step strong {
    flex: 0 0 75px;

    color: #222;

    font-family:
        "Noto Serif TC",
        serif;

    font-size: 14px;
}

.learning-step span {
    flex: 1;

    color: #666;

    text-align: right;

    font-size: 11px;
}

.learning-arrow {
    height: 10px;

    color: #999;

    text-align: center;

    font-size: 11px;

    line-height: 10px;
}



/* ======================================================
   Sidebar More
====================================================== */

.sidebar-more-link {
    margin-top: 12px;

    display: inline-block;

    color: #555;

    text-decoration: none;

    font-size: 12px;
}

.sidebar-more-link:hover {
    text-decoration: underline;
}



/* ======================================================
   Series Progress
====================================================== */

.series-progress {
    margin-top: 5px;
}

.series-progress-header,
.series-progress-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.series-progress-header {
    margin-bottom: 9px;

    color: #333;

    font-size: 13px;
}

.series-progress-footer {
    margin-top: 7px;

    color: #888;

    font-size: 11px;
}

.series-progress-bar {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 10px;

    background: #ddd;
}

.series-progress-value {
    height: 100%;

    border-radius: 10px;

    background: #333;
}


/* ======================================================
   Case - Diagnostic Thinking
====================================================== */

.case-thinking {
    margin-top: 6px;
}

.case-thinking-step {
    display: flex;
    align-items: center;

    gap: 12px;
}

.thinking-number {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #555;
    border-radius: 50%;

    color: #333;

    font-family:
        "Noto Serif TC",
        serif;

    font-size: 12px;
}

.case-thinking-step strong {
    display: block;

    color: #333;

    font-size: 13px;
}

.case-thinking-step p {
    margin: 2px 0 0;

    color: #888;

    font-size: 11px;
}

.thinking-line {
    width: 1px;
    height: 15px;

    margin: 3px 0 3px 13px;

    background: #ccc;
}



/* ======================================================
   Case - Formula Index
====================================================== */

.formula-index {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}

.formula-index a {
    min-height: 34px;

    padding: 7px 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #ddd;
    border-radius: 3px;

    background:
        rgba(255, 255, 255, .72);

    color: #444;

    text-decoration: none;

    font-size: 12px;
}

.formula-index a:hover {
    border-color: #999;

    background: #f4f4f4;
}

.formula-index a span:last-child {
    color: #999;

    font-size: 11px;
}


/* ======================================================
   Pagination Enhanced
====================================================== */

.pagination button {
    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.pagination button:hover:not(:disabled) {
    border-color: #999;
    background: #f1f1f1;
}

.pagination button.active {
    color: #fff;
    background: #292929;
    border-color: #292929;

    cursor: default;
}

.pagination button:disabled {
    opacity: .35;

    cursor: not-allowed;
}

.pagination-ellipsis {
    min-width: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #888;
}

.article-empty strong {
    display: block;

    margin-bottom: 8px;

    color: #444;

    font-size: 16px;
}

.article-empty p {
    margin: 0;

    color: #888;

    font-size: 13px;
}


/* ======================================================
   Myth Mockup Layout
   2026-08 - list page visual alignment
====================================================== */

/*
 * 此區只針對 myth.html。
 * shanghan.html / case.html 仍沿用前方既有樣式。
 */

.myth-page {
    background: #fafafa;
}


/* ------------------------------------------------------
   Hero
------------------------------------------------------ */

.myth-page .myth-hero {
    background:
        linear-gradient(
            rgba(255, 255, 255, .76),
            rgba(255, 255, 255, .76)
        ),
        url("/images/paper-texture.webp");
}


.myth-page .myth-hero::after {
    height: 105px;

    opacity: .10;
}


.myth-page .myth-hero-inner {
    width: min(1500px, 100%);

    min-height: 228px;

    grid-template-columns:
        minmax(250px, 1fr)
        minmax(520px, 1.45fr)
        minmax(250px, 1fr);
}


.myth-page .hero-content {
    padding:
        18px
        20px
        24px;
}


.myth-page .breadcrumb {
    width: min(690px, 100%);

    margin-bottom: 5px;

    color: #555;

    font-size: 12px;
}


.myth-page .hero-content h1 {
    margin-bottom: 6px;

    font-size: 48px;

    line-height: 1.25;

    letter-spacing: .20em;
}


.myth-page .hero-subtitle {
    gap: 12px;

    margin-bottom: 8px;

    font-size: 16px;
}


.myth-page .hero-line {
    width: 55px;
}


.myth-page .hero-description {
    max-width: 650px;

    font-size: 13px;

    line-height: 1.75;
}


.myth-page .hero-illustration img {
    filter:
        grayscale(1)
        contrast(.92);

    opacity: .88;
}


/* ------------------------------------------------------
   Content
------------------------------------------------------ */

.myth-page .myth-content {
    padding:
        20px
        0
        36px;

    background:
        linear-gradient(
            rgba(255, 255, 255, .94),
            rgba(255, 255, 255, .94)
        ),
        url("/images/paper-texture.webp");
}


.myth-page .myth-layout {
    width: min(1280px, 92%);

    grid-template-columns:
        minmax(0, 3.05fr)
        minmax(285px, .95fr);

    gap: 34px;
}


/* ------------------------------------------------------
   Search / Filters
------------------------------------------------------ */

.myth-page .article-toolbar {
    gap: 20px;

    margin-bottom: 16px;
}


.myth-page .article-search {
    width: 365px;
    height: 39px;

    border-color: #d6d6d6;

    border-radius: 4px;

    background:
        rgba(255, 255, 255, .94);
}


.myth-page .article-search input {
    font-size: 13px;
}


.myth-page .article-filters {
    gap: 8px;
}


.myth-page .filter-button {
    min-width: 56px;
    height: 37px;

    padding:
        0
        14px;

    border-color: #d2d2d2;

    border-radius: 4px;

    background:
        rgba(255, 255, 255, .94);

    font-size: 13px;
}


.myth-page .filter-button:hover,
.myth-page .filter-button.active {
    color: #fff;

    background: #292929;

    border-color: #292929;
}


/* ------------------------------------------------------
   Article Grid
------------------------------------------------------ */

.myth-page .myth-article-grid {
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 9px;
}


/*
 * Mockup 卡片：
 * 左圖、右文字。
 */
.myth-page .article-card.myth-article-card {
    min-height: 112px;

    padding: 0;

    display: grid;

    grid-template-columns:
        168px
        minmax(0, 1fr);

    overflow: hidden;

    border:
        1px solid
        #d8d8d8;

    border-radius: 4px;

    background:
        rgba(255, 255, 255, .90);

    box-shadow: none;
}


.myth-page .article-card.myth-article-card:hover {
    transform:
        translateY(-1px);

    border-color: #aaa;

    box-shadow:
        0
        4px
        14px
        rgba(0, 0, 0, .035);
}


.myth-page .article-card-thumbnail {
    min-width: 0;
    height: 100%;

    overflow: hidden;

    display: block;

    background: #f3f3f1;
}


.myth-page .article-card-thumbnail img {
    width: 100%;
    height: 100%;

    min-height: 112px;

    display: block;

    object-fit: cover;

    object-position: center;

    filter:
        grayscale(1)
        contrast(.88);

    opacity: .86;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.myth-page .article-card:hover
.article-card-thumbnail img {
    transform:
        scale(1.025);

    opacity: .94;
}


.myth-page .article-card-content {
    min-width: 0;

    padding:
        12px
        14px
        10px;

    display: flex;
    flex-direction: column;
}


.myth-page .article-card-title {
    margin:
        0
        0
        10px;

    font-family:
        "Noto Serif TC",
        "Songti TC",
        "PMingLiU",
        serif;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.45;
}


.myth-page .article-card-title a {
    color: #222;
}


.myth-page .article-card-prefix {
    color: #666;

    font-size: .92em;
    font-weight: 500;
}


.myth-page .article-card-excerpt {
    margin: 0;

    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: #555;

    font-size: 13px;

    line-height: 1.55;
}


.myth-page .article-card-meta {
    margin-top: auto;

    padding-top: 7px;

    gap: 8px;

    color: #777;

    font-size: 10.5px;
}


.myth-page
.article-card-meta
span + span::before {
    margin-right: 8px;
}


/* ------------------------------------------------------
   Sidebar
------------------------------------------------------ */

.myth-page .myth-sidebar {
    gap: 12px;
}


.myth-page .sidebar-card {
    padding:
        14px
        16px;

    border:
        1px solid
        #d8d8d8;

    border-radius: 4px;

    background:
        rgba(255, 255, 255, .92);
}


.myth-page .sidebar-title {
    gap: 7px;

    margin-bottom: 10px;

    font-size: 19px;

    line-height: 1.45;

    letter-spacing: .06em;
}


.myth-page .sidebar-icon {
    font-size: 13px;
}


.myth-page .popular-list {
    padding-left: 23px;
}


.myth-page .popular-list li {
    padding:
        4px
        0;

    font-size: 14px;

    line-height: 1.6;
}


.myth-page .popular-list li::marker {
    color: #333;

    font-weight: 600;
}


.myth-page .recommend-list {
    padding-left: 18px;

    font-size: 14px;

    line-height: 1.8;
}


.myth-page .sidebar-tags {
    gap: 6px;
}


.myth-page .sidebar-tags button {
    padding:
        4px
        9px;

    border-radius: 4px;

    font-size: 13px;
}


/* ------------------------------------------------------
   Member Card
------------------------------------------------------ */

.myth-page .member-card {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr);

    gap: 10px;

    padding:
        13px
        16px;
}


.myth-page .member-icon {
    width: 26px;
    height: 26px;

    border: 0;

    color: #222;

    font-size: 8px;
}


.myth-page .member-card h2 {
    margin-bottom: 4px;

    font-size: 17px;
}


.myth-page .member-card p {
    margin-bottom: 10px;

    font-size: 13px;

    line-height: 1.65;
}


.myth-page .member-actions {
    gap: 8px;
}


.myth-page .button {
    min-width: 92px;

    padding:
        7px
        13px;

    font-size: 13px;
}


/* ------------------------------------------------------
   Pagination
------------------------------------------------------ */

.myth-page .pagination {
    min-height: 46px;

    margin-top: 20px;

    gap: 8px;
}


.myth-page .pagination button {
    min-width: 34px;
    height: 34px;

    font-size: 12px;
}


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

.myth-page + .site-footer {
    background:
        rgba(255, 255, 255, .97);
}


/* ------------------------------------------------------
   Responsive
------------------------------------------------------ */

@media (
    max-width: 1120px
) {

    .myth-page .article-card.myth-article-card {
        grid-template-columns:
            145px
            minmax(0, 1fr);
    }


    .myth-page .myth-layout {
        gap: 26px;
    }

}


@media (
    max-width: 1050px
) {

    .myth-page .myth-layout {
        grid-template-columns:
            1fr;
    }


    .myth-page .myth-sidebar {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 820px
) {

    .myth-page .myth-hero-inner {
        min-height: auto;

        grid-template-columns:
            1fr;
    }


    .myth-page .hero-content {
        padding:
            25px
            20px
            28px;
    }


    .myth-page .hero-content h1 {
        font-size: 38px;
    }


    .myth-page .article-toolbar {
        flex-direction: column;

        gap: 12px;
    }


    .myth-page .article-search {
        width: 100%;
    }


    .myth-page .myth-article-grid {
        grid-template-columns:
            1fr;
    }


    .myth-page .myth-sidebar {
        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 560px
) {

    .myth-page .article-card.myth-article-card {
        grid-template-columns:
            118px
            minmax(0, 1fr);

        min-height: 105px;
    }


    .myth-page .article-card-thumbnail img {
        min-height: 105px;
    }


    .myth-page .article-card-content {
        padding:
            10px
            11px;
    }


    .myth-page .article-card-title {
        font-size: 14px;
    }


    .myth-page .article-card-excerpt {
        -webkit-line-clamp: 1;
    }

}



/* ======================================================
   Vue Page Helpers
====================================================== */

[v-cloak] {
    display: none !important;
}


.myth-page .sidebar-tags button.active {
    color: #fff;
    background: #292929;
    border-color: #292929;
}




/* ======================================================
   ShangHan Sidebar
   對齊 Myth / Case 右側欄視覺。
====================================================== */

.shanghan-page .myth-sidebar {
    gap: 12px;
}


.shanghan-page .sidebar-card {
    padding:
        14px
        16px;

    border:
        1px solid
        #d8d8d8;

    border-radius: 4px;

    background:
        rgba(255, 255, 255, .92);
}


.shanghan-page .sidebar-title {
    gap: 7px;

    margin-bottom: 10px;

    font-size: 19px;

    line-height: 1.45;

    letter-spacing: .06em;
}


.shanghan-page .sidebar-icon {
    font-size: 13px;
}


/* 推薦閱讀 */
.shanghan-page .recommend-list {
    padding-left: 18px;

    font-size: 14px;

    line-height: 1.8;
}


/* 學習地圖 */
.shanghan-page .shanghan-learning-map {
    gap: 6px;

    margin-top: 5px;
}


.shanghan-page .learning-step {
    padding:
        8px
        10px;

    gap: 12px;
}


.shanghan-page .learning-step strong {
    font-size: 14px;
}


.shanghan-page .learning-step span {
    font-size: 13px;

    line-height: 1.5;
}


.shanghan-page .learning-arrow {
    font-size: 12px;
}


.shanghan-page .sidebar-more-link,
.shanghan-page .sidebar-more-button {
    font-size: 13px;
}


/* 系列進度 */
.shanghan-page .series-progress-header {
    font-size: 14px;
}


.shanghan-page .series-progress-footer {
    font-size: 13px;
}


/* 熱門主題 */
.shanghan-page .sidebar-tags {
    gap: 6px;
}


.shanghan-page .sidebar-tags button {
    padding:
        4px
        9px;

    border-radius: 4px;

    font-size: 13px;
}


/* 會員卡片 */
.shanghan-page .member-card {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr);

    gap: 10px;

    padding:
        13px
        16px;
}


.shanghan-page .member-icon {
    width: 26px;
    height: 26px;

    border: 0;

    color: #222;

    font-size: 8px;
}


.shanghan-page .member-card h2 {
    margin-bottom: 4px;

    font-size: 17px;
}


.shanghan-page .member-card p {
    margin-bottom: 10px;

    font-size: 13px;

    line-height: 1.65;
}


.shanghan-page .member-actions {
    gap: 8px;
}


.shanghan-page .button {
    min-width: 92px;

    padding:
        7px
        13px;

    font-size: 13px;
}


/* ======================================================
   ShangHan Vue Helpers
====================================================== */

.shanghan-page .sidebar-tags button.active {
    color: #fff;
    background: #292929;
    border-color: #292929;
}


.sidebar-empty-text {
    margin: 0;
    color: #888;
    font-size: 12px;
    line-height: 1.7;
}


.sidebar-more-button {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 12px;
    cursor: pointer;
}


.sidebar-more-button:hover {
    text-decoration: underline;
}


/* ======================================================
   ShangHan Article Cards
   與 Myth 新版文章卡片同視覺，但使用獨立 selector，
   避免影響傷寒論學堂原有版面與側欄。
====================================================== */

.shanghan-page .shanghan-article-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}


.shanghan-page .shanghan-article-card {
    min-width: 0;
    min-height: 112px;

    padding: 0;

    position: relative;

    display: grid;

    grid-template-columns:
        168px
        minmax(0, 1fr);

    overflow: hidden;

    border: 1px solid #d8d8d8;
    border-radius: 4px;

    background: rgba(255, 255, 255, .90);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.shanghan-page .shanghan-article-card:hover {
    transform: translateY(-1px);

    border-color: #aaa;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .035);
}


.shanghan-page .shanghan-card-thumbnail {
    min-width: 0;
    min-height: 112px;

    overflow: hidden;

    display: block;

    background: #f3f3f1;
}


.shanghan-page .shanghan-card-thumbnail img {
    width: 100%;
    height: 100%;
    min-height: 112px;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        grayscale(1)
        contrast(.88);

    opacity: .86;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.shanghan-page .shanghan-article-card:hover .shanghan-card-thumbnail img {
    transform: scale(1.025);

    opacity: .94;
}


.shanghan-page .shanghan-card-content {
    min-width: 0;

    padding: 12px 14px 10px;

    display: flex;
    flex-direction: column;
}


.shanghan-page .shanghan-card-title {
    margin: 0 0 10px;

    font-family:
        "Noto Serif TC",
        "Songti TC",
        "PMingLiU",
        serif;

    font-size: 18px;
    font-weight: 600;

    line-height: 1.45;
}


.shanghan-page .shanghan-card-title a {
    color: #222;

    text-decoration: none;
}


.shanghan-page .shanghan-card-prefix {
    color: #666;

    font-size: .92em;
    font-weight: 500;
}


.shanghan-page .shanghan-card-excerpt {
    margin: 0 0 10px;

    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: #555;

    font-size: 13px;

    line-height: 1.55;
}


.shanghan-page .shanghan-card-meta {
    margin-top: auto;

    padding-top: 7px;

    display: flex;

    gap: 8px;

    color: #777;

    font-size: 10.5px;
}


.shanghan-page .shanghan-card-meta span + span::before {
    content: "｜";

    margin-right: 8px;

    color: #aaa;
}


.shanghan-page .shanghan-article-grid > .article-loading,
.shanghan-page .shanghan-article-grid > .article-empty,
.shanghan-page .shanghan-article-grid > .article-error {
    grid-column: 1 / -1;
}


@media (max-width: 1120px) {

    .shanghan-page .shanghan-article-card {
        grid-template-columns:
            145px
            minmax(0, 1fr);
    }

}


@media (max-width: 820px) {

    .shanghan-page .shanghan-article-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 560px) {

    .shanghan-page .shanghan-article-card {
        grid-template-columns:
            118px
            minmax(0, 1fr);

        min-height: 105px;
    }


    .shanghan-page .shanghan-card-thumbnail,
    .shanghan-page .shanghan-card-thumbnail img {
        min-height: 105px;
    }


    .shanghan-page .shanghan-card-content {
        padding: 10px 11px;
    }


    .shanghan-page .shanghan-card-title {
        font-size: 18px;
    }


    .shanghan-page .shanghan-card-excerpt {
        -webkit-line-clamp: 1;
    }

}


/* ======================================================
   Case Vue Helpers
====================================================== */

.case-page .sidebar-tags button.active {
    color: #fff;
    background: #292929;
    border-color: #292929;
}




/* ======================================================
   Case Sidebar
   對齊 Myth 右側欄；「辨證思路」卡片維持原樣。
====================================================== */

.case-page .myth-sidebar {
    gap: 12px;
}


/* 一般右欄卡片：排除辨證思路 */
.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card) {
    padding:
        14px
        16px;

    border:
        1px solid
        #d8d8d8;

    border-radius: 4px;

    background:
        rgba(255, 255, 255, .92);
}


.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.sidebar-title {
    gap: 7px;

    margin-bottom: 10px;

    font-size: 19px;

    line-height: 1.45;

    letter-spacing: .06em;
}


.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.sidebar-icon {
    font-size: 13px;
}


/* 熱門醫案 */
.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.popular-list {
    padding-left: 23px;
}


.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.popular-list li {
    padding:
        4px
        0;

    font-size: 14px;

    line-height: 1.6;
}


.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.popular-list li::marker {
    color: #333;

    font-weight: 600;
}


/* 方劑索引：配合 Myth 右欄字級比例 */
.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.formula-index {
    gap: 6px;
}


.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.formula-index a {
    min-height: 33px;

    padding:
        6px
        9px;

    font-size: 13px;
}


.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.formula-index a span:last-child {
    font-size: 12px;
}


/* 熱門標籤 */
.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.sidebar-tags {
    gap: 6px;
}


.case-page
.myth-sidebar
> .sidebar-card:not(.case-thinking-card)
.sidebar-tags button {
    padding:
        4px
        9px;

    border-radius: 4px;

    font-size: 13px;
}


/* 會員卡片 */
.case-page .member-card:not(.case-thinking-card) {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr);

    gap: 10px;

    padding:
        13px
        16px;
}


.case-page .member-card:not(.case-thinking-card) .member-icon {
    width: 26px;
    height: 26px;

    border: 0;

    color: #222;

    font-size: 8px;
}


.case-page .member-card:not(.case-thinking-card) h2 {
    margin-bottom: 4px;

    font-size: 17px;
}


.case-page .member-card:not(.case-thinking-card) p {
    margin-bottom: 10px;

    font-size: 13px;

    line-height: 1.65;
}


.case-page .member-card:not(.case-thinking-card) .member-actions {
    gap: 8px;
}


.case-page .member-card:not(.case-thinking-card) .button {
    min-width: 92px;

    padding:
        7px
        13px;

    font-size: 13px;
}


/* ======================================================
   Case Article Cards
   與 Myth / ShangHan 新版文章卡片同視覺，
   但使用獨立 selector，避免影響其他頁面。
====================================================== */

.case-page .case-article-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}


.case-page .case-article-card {
    min-width: 0;
    min-height: 112px;

    padding: 0;

    position: relative;

    display: grid;

    grid-template-columns:
        168px
        minmax(0, 1fr);

    overflow: hidden;

    border: 1px solid #d8d8d8;
    border-radius: 4px;

    background: rgba(255, 255, 255, .90);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.case-page .case-article-card:hover {
    transform: translateY(-1px);

    border-color: #aaa;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, .035);
}


.case-page .case-card-thumbnail {
    min-width: 0;
    min-height: 112px;

    overflow: hidden;

    display: block;

    background: #f3f3f1;
}


.case-page .case-card-thumbnail img {
    width: 100%;
    height: 100%;
    min-height: 112px;

    display: block;

    object-fit: cover;
    object-position: center;

    filter:
        grayscale(1)
        contrast(.88);

    opacity: .86;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.case-page .case-article-card:hover .case-card-thumbnail img {
    transform: scale(1.025);

    opacity: .94;
}


.case-page .case-card-content {
    min-width: 0;

    padding: 12px 14px 10px;

    display: flex;
    flex-direction: column;
}


.case-page .case-card-title {
    margin: 0 0 10px;

    font-family:
        "Noto Serif TC",
        "Songti TC",
        "PMingLiU",
        serif;

    font-size: 18px;
    font-weight: 600;

    line-height: 1.45;
}


.case-page .case-card-title a {
    color: #222;

    text-decoration: none;
}


.case-page .case-card-prefix {
    color: #666;

    font-size: .92em;
    font-weight: 500;
}


.case-page .case-card-excerpt {
    margin: 0;

    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: #555;

    font-size: 13px;

    line-height: 1.55;
}


.case-page .case-card-meta {
    margin-top: auto;

    padding-top: 7px;

    display: flex;

    gap: 8px;

    color: #777;

    font-size: 10.5px;
}


.case-page .case-card-meta span + span::before {
    content: "｜";

    margin-right: 8px;

    color: #aaa;
}


.case-page .case-article-grid > .article-loading,
.case-page .case-article-grid > .article-empty,
.case-page .case-article-grid > .article-error {
    grid-column: 1 / -1;
}


@media (max-width: 1120px) {

    .case-page .case-article-card {
        grid-template-columns:
            145px
            minmax(0, 1fr);
    }

}


@media (max-width: 820px) {

    .case-page .case-article-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 560px) {

    .case-page .case-article-card {
        grid-template-columns:
            118px
            minmax(0, 1fr);

        min-height: 105px;
    }


    .case-page .case-card-thumbnail,
    .case-page .case-card-thumbnail img {
        min-height: 105px;
    }


    .case-page .case-card-content {
        padding: 10px 11px;
    }


    .case-page .case-card-title {
        font-size: 14px;
    }


    .case-page .case-card-excerpt {
        -webkit-line-clamp: 1;
    }

}


/* =========================================================
   Case Formula Index Toggle
========================================================= */

.formula-index-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.formula-index-header .sidebar-title {
    margin-bottom: 0 !important;
}

.formula-index-toggle {
    flex: 0 0 auto;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: #777;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

.formula-index-toggle:hover {
    color: #222;
}