/* ==========================================================
           DAZHE Guide CMS
           只定义攻略频道专属结构；Header/Footer/导航继续使用主站 app.css
           ========================================================== */

        .dzg-page {
            padding-top: 28px;
            padding-bottom: 38px;
        }

        .dzg-heading {
            padding: 0 0 13px;
        }

        .dzg-heading h1 {
            margin: 0 0 4px;
            color: #182230;
            font-size: clamp(25px, 2.2vw, 32px);
            line-height: 1.16;
            letter-spacing: -.025em;
        }

        .dzg-heading p {
            max-width: 760px;
            margin: 9px 0 0;
            color: #667085;
            font-size: 14px;
            line-height: 1.72;
        }

        .dzg-category-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 5px 0 23px;
        }

        .dzg-category-strip a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 35px;
            padding: 6px 13px;
            border: 1px solid #e7e2de;
            border-radius: 999px;
            background: #fff;
            color: #59636f;
            font-size: 12px;
            font-weight: 750;
            line-height: 1;
            text-decoration: none;
            transition: border-color .16s ease, background .16s ease, color .16s ease;
        }

        .dzg-category-strip a:hover,
        .dzg-category-strip a.active,
        .dzg-category-strip a[aria-current="page"] {
            border-color: #efc4be;
            background: #fff1ef;
            color: #aa2d23;
        }

        .dzg-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 300px;
            gap: 28px;
            align-items: start;
        }

        .dzg-main,
        .dzg-sidebar {
            min-width: 0;
        }

        /* ---------- 参考图：纵向攻略列表 ---------- */

        .dzg-list {
            display: grid;
            gap: 14px;
        }

        .dzg-list-item {
            display: grid;
            grid-template-columns: 225px minmax(0, 1fr);
            min-height: 150px;
            overflow: hidden;
            border: 1px solid #ebe7e3;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 3px 12px rgba(16, 24, 40, .035);
            transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
        }

        .dzg-list-item:hover {
            transform: translateY(-1px);
            border-color: #ddd5cf;
            box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
        }

        .dzg-list-media {
            display: block;
            min-height: 150px;
            overflow: hidden;
            background: #f5f3f1;
            text-decoration: none;
        }

        .dzg-list-media img {
            width: 100%;
            height: 100%;
            min-height: 150px;
            object-fit: cover;
            transition: transform .2s ease;
        }

        .dzg-list-item:hover .dzg-list-media img {
            transform: scale(1.025);
        }

        .dzg-list-placeholder {
            height: 100%;
            min-height: 150px;
            display: grid;
            place-items: center;
            color: #a1a1aa;
            font-size: 12px;
            font-weight: 700;
        }

        .dzg-list-copy {
            display: flex;
            min-width: 0;
            flex-direction: column;
            padding: 17px 19px 15px;
        }

        .dzg-list-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            min-height: 22px;
            margin-bottom: 7px;
            color: #98a2b3;
            font-size: 11px;
        }

        .dzg-list-category {
            display: inline-flex;
            align-items: center;
            min-height: 22px;
            padding: 3px 8px;
            border-radius: 999px;
            background: #fff0ee;
            color: #aa2d23;
            font-size: 10px;
            font-weight: 800;
            text-decoration: none;
        }

        .dzg-list-category:hover {
            background: #ffe6e2;
        }

        .dzg-list-item h2 {
            margin: 0 0 7px;
            font-size: 19px;
            line-height: 1.4;
            letter-spacing: -.018em;
        }

        .dzg-list-item h2 a {
            color: #1f2937;
            text-decoration: none;
        }

        .dzg-list-item h2 a:hover {
            color: var(--dz-red);
        }

        .dzg-list-excerpt {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin: 0;
            color: #667085;
            font-size: 13px;
            line-height: 1.65;
        }

        .dzg-list-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: auto;
            padding-top: 11px;
            color: #98a2b3;
            font-size: 11px;
        }

        .dzg-read-more {
            color: var(--dz-red);
            font-weight: 800;
            text-decoration: none;
            white-space: nowrap;
        }

        /* ---------- 右栏 ---------- */

        .dzg-sidebar {
            display: grid;
            gap: 16px;
            position: sticky;
            top: 112px;
        }

        .dzg-side-card {
            overflow: hidden;
            border: 1px solid #ebe7e3;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 3px 12px rgba(16, 24, 40, .035);
        }

        .dzg-side-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 15px 16px 11px;
            border-bottom: 1px solid #f1eeeb;
        }

        .dzg-side-head h2 {
            margin: 0;
            color: #27313d;
            font-size: 15px;
            letter-spacing: -.015em;
        }

        .dzg-side-head a {
            color: #98a2b3;
            font-size: 10px;
            font-weight: 700;
            text-decoration: none;
        }

        .dzg-hot-list {
            margin: 0;
            padding: 6px 16px 9px;
            list-style: none;
            counter-reset: dzg-hot;
        }

        .dzg-hot-list li {
            counter-increment: dzg-hot;
            border-bottom: 1px solid #f2efec;
        }

        .dzg-hot-list li:last-child {
            border-bottom: 0;
        }

        .dzg-hot-list a {
            display: grid;
            grid-template-columns: 26px minmax(0, 1fr);
            gap: 9px;
            align-items: start;
            padding: 11px 0;
            color: #344054;
            text-decoration: none;
        }

        .dzg-hot-list a::before {
            content: counter(dzg-hot, decimal-leading-zero);
            padding-top: 1px;
            color: #d94a3e;
            font-size: 12px;
            font-weight: 850;
            font-variant-numeric: tabular-nums;
        }

        .dzg-hot-copy {
            min-width: 0;
        }

        .dzg-hot-copy strong {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 12px;
            line-height: 1.5;
        }

        .dzg-hot-copy span {
            display: block;
            margin-top: 4px;
            color: #98a2b3;
            font-size: 10px;
        }

        .dzg-side-categories {
            display: grid;
            padding: 8px 10px 11px;
        }

        .dzg-side-categories a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-height: 39px;
            padding: 7px 8px;
            border-radius: 8px;
            color: #475467;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
        }

        .dzg-side-categories a:hover,
        .dzg-side-categories a.active {
            background: #fff3f1;
            color: #a62e24;
        }

        .dzg-side-categories small {
            color: #98a2b3;
            font-size: 10px;
            font-weight: 650;
        }

        .dzg-side-links {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 12px;
        }

        .dzg-side-links a {
            display: grid;
            place-items: center;
            min-height: 42px;
            padding: 7px;
            border: 1px solid #eee9e5;
            border-radius: 9px;
            background: #faf9f8;
            color: #59636f;
            font-size: 11px;
            font-weight: 750;
            text-align: center;
            text-decoration: none;
        }

        .dzg-side-links a:hover {
            border-color: #efc4be;
            background: #fff3f1;
            color: #a62e24;
        }

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

        .dzg-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 7px;
            margin-top: 24px;
        }

        .dzg-pagination a,
        .dzg-pagination span {
            min-height: 38px;
            display: grid;
            place-items: center;
            padding: 7px 12px;
            border: 1px solid #e4ded9;
            border-radius: 10px;
            background: #fff;
            color: #59636f;
            font-size: 13px;
            font-weight: 750;
            text-decoration: none;
        }

        .dzg-pagination a:hover {
            border-color: #f0c5bf;
            background: #fff0ee;
            color: #a52a20;
        }

        .dzg-pagination .active {
            border-color: var(--dz-red);
            background: var(--dz-red);
            color: #fff;
        }

        .dzg-empty {
            padding: 42px 24px;
            border: 1px dashed #ddd6d0;
            border-radius: 14px;
            background: #fff;
            color: #667085;
            text-align: center;
        }

        .dzg-empty h2 {
            margin: 0 0 8px;
            color: #344054;
            font-size: 19px;
        }

        /* ---------- Detail ---------- */

        .dzg-breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
            margin: 2px 0 14px;
            color: #98a2b3;
            font-size: 11px;
        }

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

        .dzg-breadcrumb a:hover {
            color: var(--dz-red);
        }

        .dzg-article {
            overflow: hidden;
            border: 1px solid #ebe7e3;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 4px 17px rgba(16, 24, 40, .04);
        }

        .dzg-article-head {
            padding: 28px 30px 22px;
        }

        .dzg-article-kicker {
            display: inline-flex;
            align-items: center;
            min-height: 23px;
            padding: 4px 8px;
            border-radius: 999px;
            background: #fff0ee;
            color: #aa2d23;
            font-size: 10px;
            font-weight: 800;
            text-decoration: none;
        }

        .dzg-article-head h1 {
            margin: 10px 0 13px;
            color: #182230;
            font-size: clamp(32px, 4.4vw, 47px);
            line-height: 1.18;
            letter-spacing: -.04em;
        }

        .dzg-article-summary {
            max-width: 780px;
            margin: 0;
            color: #59636f;
            font-size: 15px;
            line-height: 1.76;
        }

        .dzg-article-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 17px;
            color: #98a2b3;
            font-size: 11px;
        }

        .dzg-article-cover {
            background: #f5f3f1;
        }

        .dzg-article-cover img {
            display: block;
            width: 100%;
            max-height: 610px;
            object-fit: cover;
        }

        .dzg-article-body {
            padding: 28px 30px 32px;
            color: #303946;
            font-size: 16px;
            line-height: 1.88;
        }

        .dzg-article-body > :first-child {
            margin-top: 0;
        }

        .dzg-article-body h2 {
            margin: 34px 0 13px;
            color: #182230;
            font-size: 25px;
            line-height: 1.32;
            letter-spacing: -.02em;
        }

        .dzg-article-body h3 {
            margin: 27px 0 11px;
            color: #182230;
            font-size: 20px;
            line-height: 1.4;
        }

        .dzg-article-body p {
            margin: 0 0 19px;
        }

        .dzg-article-body ul,
        .dzg-article-body ol {
            margin: 0 0 20px;
            padding-left: 24px;
        }

        .dzg-article-body blockquote {
            margin: 23px 0;
            padding: 14px 17px;
            border-left: 4px solid #df665b;
            border-radius: 0 10px 10px 0;
            background: #fff6f4;
            color: #59636f;
        }

        .dzg-article-body img {
            max-width: 100%;
            height: auto;
            border-radius: 11px;
        }

        .dzg-article-body a {
            color: var(--dz-red);
            text-decoration-thickness: 1px;
            text-underline-offset: 3px;
        }

        .dzg-article-body table {
            display: block;
            width: 100%;
            overflow-x: auto;
            margin: 20px 0;
            border-collapse: collapse;
        }

        .dzg-article-body th,
        .dzg-article-body td {
            padding: 9px 11px;
            border: 1px solid #e7e2de;
            text-align: left;
            white-space: nowrap;
        }

        .dzg-tags {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 7px;
            padding: 0 30px 26px;
        }

        .dzg-tags a {
            display: inline-flex;
            padding: 6px 9px;
            border-radius: 999px;
            background: #f5f3f1;
            color: #667085;
            font-size: 11px;
            font-weight: 700;
            text-decoration: none;
        }

        .dzg-prev-next {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 15px;
        }

        .dzg-prev-next a {
            display: block;
            min-width: 0;
            padding: 15px 16px;
            border: 1px solid #ebe7e3;
            border-radius: 13px;
            background: #fff;
            color: #344054;
            text-decoration: none;
        }

        .dzg-prev-next a:hover {
            border-color: #eac5bf;
            background: #fff9f8;
        }

        .dzg-prev-next small {
            display: block;
            margin-bottom: 5px;
            color: #98a2b3;
            font-size: 10px;
        }

        .dzg-prev-next strong {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 12px;
            line-height: 1.48;
        }

        .dzg-related {
            margin-top: 25px;
        }

        .dzg-related > h2 {
            margin: 0 0 13px;
            color: #27313d;
            font-size: 20px;
        }

        .dzg-related-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 13px;
        }

        .dzg-related-card {
            overflow: hidden;
            border: 1px solid #ebe7e3;
            border-radius: 12px;
            background: #fff;
            color: #344054;
            text-decoration: none;
        }

        .dzg-related-card img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

        .dzg-related-card div {
            padding: 11px 12px;
        }

        .dzg-related-card strong {
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 12px;
            line-height: 1.48;
        }

        .dzg-related-card span {
            display: block;
            margin-top: 5px;
            color: #98a2b3;
            font-size: 10px;
        }

        /* 攻略静态页首屏布局稳定 */
        html {
            scrollbar-gutter: stable;
        }

        .guide-site .public-header-actions {
            min-width: 270px;
            flex: 0 0 270px;
            justify-content: flex-end;
        }

        /* Session 状态确认前保留操作区尺寸但不绘制游客占位，避免登录态恢复时横向抖动。 */
        @media (min-width: 861px) {
            html.js .guide-site[data-guide-state-ready="0"] .public-header-actions {
                visibility: hidden;
            }
        }

        @media (max-width: 1120px) {
            .guide-site .public-header-actions {
                min-width: 156px;
                flex-basis: 156px;
            }
        }

        @media (max-width: 860px) {
            .guide-site .public-header-actions {
                min-width: 68px;
                flex-basis: 68px;
            }
        }

        /* 静态攻略页 Session / City Bridge */
        [data-guide-auth-only][hidden],
        [data-guide-guest-only][hidden],
        [data-guide-logout-form][hidden],
        [data-guide-mobile-account][hidden],
        [data-stores-channel-link][hidden],
        [data-guides-channel-link][hidden] {
            display: none !important;
        }

        /* 攻略在当前主导航中固定为当前频道 */
        .guide-site .public-desktop-nav a.guide-current {
            color: var(--dz-red);
        }

        .guide-site .public-desktop-nav a.guide-current::after {
            content: "";
            position: absolute;
            left: 10%;
            right: 10%;
            bottom: -1px;
            height: 2px;
            border-radius: 2px;
            background: var(--dz-red);
        }

        .guide-site .mobile-nav-links a.guide-current {
            color: var(--dz-red);
            background: #fff3f1;
        }


        .dzg-preview-badge {
            position: fixed;
            right: 14px;
            bottom: 82px;
            z-index: 70;
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 5px 10px;
            border: 1px solid #e6ddd7;
            border-radius: 999px;
            background: rgba(255,255,255,.94);
            box-shadow: 0 6px 18px rgba(16,24,40,.08);
            color: #7a514b;
            font-size: 10px;
            font-weight: 800;
            backdrop-filter: blur(8px);
        }

        @media (max-width: 980px) {
            .dzg-layout {
                grid-template-columns: minmax(0, 1fr);
            }

            .dzg-sidebar {
                position: static;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .dzg-side-card:last-child {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 860px) {
            .dzg-page {
                padding-top: 18px;
            }
        }

        @media (max-width: 700px) {
            .dzg-heading {
                padding-top: 10px;
            }

            .dzg-heading h1 {
                font-size: 24px;
                line-height: 1.18;
            }

            .dzg-list-item {
                grid-template-columns: 118px minmax(0, 1fr);
                min-height: 142px;
            }

            .dzg-list-media,
            .dzg-list-media img,
            .dzg-list-placeholder {
                min-height: 142px;
                height: 100%;
            }

            .dzg-list-copy {
                padding: 12px 13px 11px;
            }

            .dzg-list-item h2 {
                margin-bottom: 6px;
                font-size: 15px;
            }

            .dzg-list-excerpt {
                font-size: 12px;
                -webkit-line-clamp: 2;
            }

            .dzg-list-bottom {
                padding-top: 8px;
            }

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

            .dzg-side-card:last-child {
                grid-column: auto;
            }

            .dzg-article-head {
                padding: 22px 20px 18px;
            }

            .dzg-article-head h1 {
                font-size: 31px;
            }

            .dzg-article-summary {
                font-size: 14px;
            }

            .dzg-article-body {
                padding: 22px 20px 27px;
                font-size: 15px;
                line-height: 1.82;
            }

            .dzg-article-body h2 {
                font-size: 22px;
            }

            .dzg-tags {
                padding: 0 20px 22px;
            }

            .dzg-prev-next {
                grid-template-columns: 1fr;
            }

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

        @media (max-width: 620px) {
            .dzg-page {
                padding-top: 12px;
            }
        }

        @media (max-width: 420px) {
            .dzg-list-item {
                grid-template-columns: 102px minmax(0, 1fr);
                min-height: 132px;
            }

            .dzg-list-media,
            .dzg-list-media img,
            .dzg-list-placeholder {
                min-height: 132px;
            }

            .dzg-list-copy {
                padding: 10px;
            }

            .dzg-list-meta {
                gap: 5px;
                margin-bottom: 5px;
            }

            .dzg-list-item h2 {
                font-size: 14px;
                line-height: 1.38;
            }

            .dzg-list-excerpt {
                display: none;
            }

            .dzg-read-more {
                display: none;
            }
        }

/* ---------- Guide Interaction V1 / content detail visual alignment ---------- */
.dzg-interaction-bar{
    width:100%;
    max-width:none;
    flex-wrap:wrap;
    margin:2px 0 14px;
}
.dzg-interaction-bar .detail-utility-actions{flex-wrap:wrap}
.dzg-interaction-notice{flex-basis:100%;margin:2px 0 0}
.dzg-interaction-notice.error{border-color:#fecdca;background:#fef3f2;color:#b42318}

/* V1.7.8.6.9.29.3.4.16.27.3 Guide inline media */
.dzg-article-body figure{margin:26px 0;text-align:center}.dzg-article-body figure img{display:block;max-width:100%;height:auto;margin:0 auto}.dzg-article-body figcaption{margin-top:8px;color:#7a8490;font-size:13px;line-height:1.55;text-align:center}


/* V1.7.8.6.9.29.3.4.17.2.21 Guide Purchase CTA desktop visibility */
/* app.css intentionally hides .detail-top-buy-button on desktop for standard content
   because ordinary content has a separate desktop commerce CTA. Guide pages use the
   utility bar as their only CTA location, so explicitly restore it inside Guide only. */
.dzg-interaction-bar .detail-top-buy-button{display:inline-flex}