/* ==================================================================
   响应式改造样式（极简版：仅 PC 端 + 手机端）
   适用范围：PC端（>768px 保持原样），手机端（≤768px 自动适配）
   ================================================================== */

/* ---------- 全局与基础组件 ---------- */
.mobile-nav-toggle { display: none; } /* 汉堡按钮：桌面默认隐藏 */

/* ==================================================================
   手机端 (≤ 768px) 全部适配
   ================================================================== */
@media screen and (max-width: 768px) {
    html, body { overflow-x: hidden; }
    
    /* 手机端隐藏次要元素 */
    .top, .head .ad, .head .info, .mobile_link { display: none; }

    /* ==================== 【A】头部与抽屉导航 ==================== */
    .head {
        width: 100% !important; height: auto !important; min-height: 44px;
        padding: 2px 8px !important; box-sizing: border-box;
        display: flex; align-items: center; justify-content: space-between;
        position: relative; background: #fff;
    }
    .head .logo { float: none !important; width: auto !important; margin: 0 !important; }
    .head .logo img { max-width: 120px; height: auto; display: block; }

    /* 汉堡按钮 */
    .mobile-nav-toggle {
        display: block; position: absolute; right: 10px; top: 50%;
        transform: translateY(-50%); width: 40px; height: 40px;
        padding: 0; margin: 0; background: #2969a6; border: none; border-radius: 6px;
        z-index: 100; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15);
    }
    .mobile-nav-toggle .mn-bar {
        position: absolute; left: 9px; width: 22px; height: 2px;
        background: #fff; border-radius: 1px; transition: transform .25s, opacity .25s;
    }
    .mobile-nav-toggle .mn-bar:nth-child(1) { top: 13px; }
    .mobile-nav-toggle .mn-bar:nth-child(2) { top: 19px; }
    .mobile-nav-toggle .mn-bar:nth-child(3) { top: 25px; }
    .mobile-nav-toggle.is-active .mn-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .mobile-nav-toggle.is-active .mn-bar:nth-child(2) { opacity: 0; }
    .mobile-nav-toggle.is-active .mn-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* 主导航抽屉 */
    html.js-enabled .navigation {
        width: 100% !important; height: auto !important;
        background: #2969a6 !important; display: block !important; float: none !important;
        padding: 0 !important; max-height: 0; overflow: hidden; transition: max-height .35s ease;
    }
    html.js-enabled .navigation.mobile-nav-open { max-height: 75vh; overflow-y: auto; }
    .navigation a {
        display: flex !important; align-items: center !important; justify-content: center !important;
        float: left !important; width: 33.333% !important; height: 50px !important;
        padding: 0 !important; box-sizing: border-box !important; font-size: 15px !important;
        color: #fff !important; text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,.15) !important;
        border-right: 1px solid rgba(255,255,255,.15) !important;
    }
    /* 首页独占一行 */
    .navigation a:first-of-type { width: 100% !important; justify-content: flex-start !important; padding-left: 20px !important; border-right: none !important; }
    .navigation a:nth-of-type(3n+1):not(:first-of-type) { border-right: none !important; }
    .navigation em, .navigation .first, .navigation .last { display: none !important; }
    
    /* 二级导航 */
    .navigationChild { width: 100% !important; height: auto !important; padding: 8px !important; box-sizing: border-box !important; float: none !important; }
    .navigationChild .tips { display: none !important; }
    .navigationChild .menus { width: 100% !important; height: auto !important; display: flex; flex-wrap: wrap; }
    .navigationChild .menus a { margin: 4px 8px !important; font-size: 13px !important; }

    /* ==================== 【B】搜索栏与热门词 ==================== */
    .yuepu365-header-search-wrap { width: 100% !important; height: auto !important; padding: 0 8px 4px 8px !important; box-sizing: border-box !important; line-height: normal !important; display: block !important; background: transparent !important; margin: 0 auto !important; }
    .yuepu365-header-search-wrap .yuepu365-search-left-box { float: none !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; }
    .yuepu365-header-search-wrap .yuepu365-search-left-box form { display: flex; flex: 1; align-items: center; margin: 0 !important; }
    .yuepu365-header-search-wrap .search-tip, .yuepu365-header-search-wrap .yuepu365-search-input, .yuepu365-header-search-wrap .yuepu365-search-select, .yuepu365-header-search-wrap .yuepu365-search-btn { float: none !important; margin: 0 !important; height: 26px !important; line-height: 26px !important; }
    .yuepu365-header-search-wrap .search-tip { margin-right: 4px !important; flex-shrink: 0; }
    .yuepu365-header-search-wrap .yuepu365-search-input { flex: 1; width: auto !important; min-width: 0; }
    .yuepu365-header-search-wrap .yuepu365-search-select { width: 84px !important; flex-shrink: 0; }
    .yuepu365-header-search-wrap .yuepu365-search-btn { flex-shrink: 0; padding: 0 10px !important; }
    .yuepu365-header-search-wrap .yuepu365-search-right-hot { float: none !important; width: 100% !important; height: auto !important; line-height: 1.6 !important; margin: 2px 0 0 0 !important; padding: 0 !important; font-size: 12px !important; background: transparent !important; border: none !important; }
    .yuepu365-hot-item { display: inline-block !important; margin-right: 6px !important; margin-bottom: 2px !important; }

    /* ==================== 【C】基础单栏与面包屑 ==================== */
    .body { width: 100% !important; display: block !important; padding: 0 8px !important; box-sizing: border-box !important; }
    .body .main, .main, .body .side, .side { width: 100% !important; float: none !important; padding-top: 0 !important; margin-top: 12px; }
    
    .area { padding: 6px 8px !important; font-size: 13px; border: none !important; background: #f7f7f7 !important; border-bottom: 1px solid #e7e7e7 !important; box-sizing: border-box !important; width: 100% !important; }
    .area em { display: none; }
    .area h1, .area strong, .area span, .area a { font-size: 13px; }

    /* ==================== 【D】文章内容页专属 ==================== */
    .body .content { float: none !important; width: 100% !important; margin: 5px 0 0 0 !important; padding: 0 !important; border: none !important; box-sizing: border-box !important; }
    .content_head { width: 100% !important; box-sizing: border-box !important; padding: 0 5px !important; }
    .content_head h1 { font-size: 20px !important; line-height: 1.5 !important; margin: 10px 0 6px 0 !important; padding: 0 !important; }
    .content_head .sub-title { font-size: 15px !important; margin-bottom: 10px !important; }
    .content_head .info { width: 100% !important; height: auto !important; padding: 8px 10px !important; font-size: 12px !important; line-height: 1.8 !important; text-align: left !important; box-sizing: border-box !important; margin-bottom: 5px !important; }
    
    .bd_share { width: 100% !important; height: auto !important; padding: 10px 5px !important; margin: 0 !important; box-sizing: border-box !important; line-height: 1.8 !important; overflow-wrap: anywhere !important; }
    .bd_share em { float: none !important; display: inline !important; height: auto !important; padding: 0 !important; }
    .bd_share a { margin-right: 6px !important; display: inline-block !important; }
    .picsay { width: auto !important; padding: 10px !important; margin: 0 5px 10px 5px !important; font-size: 13px !important; line-height: 1.8 !important; box-sizing: border-box !important; }
    
    .content .content_body { width: auto !important; margin: 10px 0 !important; padding: 0 10px !important; font-size: 15px !important; line-height: 1.8 !important; box-sizing: border-box !important; overflow-wrap: anywhere !important; }
    .content .content_body p { margin-bottom: 12px !important; text-indent: 2em !important; }
    .content .content_body img, .content .content_body video, .content .content_body iframe { max-width: 100% !important; height: auto !important; display: block !important; margin: 10px auto !important; }
    .content .content_body table { max-width: 100% !important; table-layout: fixed !important; word-break: break-all !important; }
    .content .imageList img { max-width: 100% !important; height: auto !important; }

    /* 内容页分页与相关文章 */
    .pageHtml { width: 100% !important; box-sizing: border-box !important; padding: 10px 5px !important; text-align: center !important; }
    .pageHtml a, .pageHtml b, .pageHtml .current { display: inline-block !important; margin: 2px !important; padding: 4px 8px !important; font-size: 12px !important; box-sizing: border-box !important; }
    .page_turn { flex-direction: column !important; gap: 8px !important; padding: 12px 10px !important; margin: 10px 0 !important; }
    .page_turn .turn-item { flex: none !important; width: 100% !important; font-size: 14px !important; line-height: 1.6 !important; }
    
    .related_article { padding: 12px 10px !important; margin: 10px 0 !important; box-sizing: border-box !important; }
    .related_article h4 { font-size: 15px !important; margin-bottom: 8px !important; }
    .related_article ul { display: block !important; }
    .related_article li { width: 100% !important; border-bottom: 1px dashed #ddd !important; margin-bottom: 0 !important; }
    .related_article li:last-child { border-bottom: none !important; }
    .related_article a { padding: 8px 0 8px 15px !important; font-size: 14px !important; }
    .related_article a::before { top: 16px !important; }

    /* ==================== 【E】侧边栏通用组件 ==================== */
    .body .side, .body .side-fixed { float: none !important; position: static !important; top: auto !important; left: auto !important; width: 100% !important; margin: 10px 0 0 0 !important; padding: 0 !important; overflow: visible !important; }
    .related { width: 100% !important; margin: 10px 0 !important; padding-bottom: 5px !important; box-sizing: border-box !important; }
    .related h3 { float: none !important; width: auto !important; height: 32px !important; line-height: 32px !important; margin: 1px !important; }
    .related .list ul { width: auto !important; margin: 0 !important; padding: 0 10px !important; box-sizing: border-box !important; }
    .related .list li { float: none !important; width: 100% !important; height: auto !important; min-height: 32px !important; margin-left: 0 !important; line-height: 1.6 !important; }
    .related .list li a { padding: 7px 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
    .sidebar-article-search { padding: 8px 10px !important; box-sizing: border-box !important; }
    .sidebar-article-search input[type="text"] { width: 100% !important; height: 36px !important; margin: 0 0 8px 0 !important; padding: 0 8px !important; box-sizing: border-box !important; }
    .sidebar-article-search select.search_select { width: 66% !important; height: 36px !important; box-sizing: border-box !important; }
    .sidebar-article-search input[type="submit"] { width: 30% !important; height: 36px !important; margin: 0 !important; box-sizing: border-box !important; }

    /* ==================== 【F】首页专属 ==================== */
    .clist { width: 100% !important; float: none !important; margin: 12px 0 0 0 !important; height: auto !important; }
    .clist .list { height: auto !important; }
    .clist .list ul { width: 100% !important; }
    .clist .list li { line-height: 36px !important; font-size: 14px !important; }
    .clist .list li a { max-width: calc(100% - 60px) !important; padding-left: 15px !important; font-size: 14px !important; background: url(images/main.png) -468px -278px no-repeat !important; }
    .clist .list li span { margin-right: 8px !important; font-size: 12px !important; }
    
    .side .list, .side .list_rank, .nav, .memberList, .authorInfo { width: 100% !important; float: none !important; }
    .side .list_rank { height: auto !important; margin-top: 12px !important; }
    .side .list_rank div ul { width: 100% !important; }
    .side .list_rank div ul li a { font-size: 13px !important; padding-left: 15px !important; }
    
    /* 热门 TAG (核心修复：一行三个) */
    .side .list_rank:last-child div ul { display: block !important; padding: 8px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; background: none !important; }
    .side .list_rank:last-child div ul li { display: block !important; width: 100% !important; height: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; }
    .side .list_rank:last-child div ul li::after { content: "" !important; display: block !important; clear: both !important; }
    .side .list_rank:last-child div ul li a { display: block !important; float: left !important; width: 33.333% !important; font-size: 15px !important; color: #333 !important; line-height: 2.2 !important; padding: 2px 0 !important; margin: 0 !important; text-align: center !important; box-sizing: border-box !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: transparent !important; text-decoration: none !important; }

    /* ==================== 【G】列表页专属重排与隔离 ==================== */
    body:not(.homepage) .body { display: flex !important; flex-direction: column !important; }
    body:not(.homepage) .main, body:not(.homepage) .side { display: contents !important; }
    
    /* 排序 */
    body:not(.homepage) .main .area { order: 1; }
    body:not(.homepage) .side .nav { order: 2; margin-top: 8px !important; } 
    body:not(.homepage) .main .opern_list { order: 3; margin-top: 8px !important; } 
    body:not(.homepage) .main .main_Item { order: 4; margin-top: 8px !important; margin-bottom: 8px !important; } 
    body:not(.homepage) .side .list_rank:nth-child(2) { order: 5; margin-top: 8px !important; } 
    body:not(.homepage) .side .list_rank:nth-child(3) { order: 6; margin-top: 8px !important; } 
    
    body:not(.homepage) .main .area, body:not(.homepage) .side .nav, body:not(.homepage) .main .opern_list, body:not(.homepage) .side .list_rank { width: 100% !important; float: none !important; box-sizing: border-box !important; }

    /* 列表页主表格 */
    .opern_list { table-layout: fixed !important; width: 100% !important; font-size: 13px; }
    .opern_list th { background: #ebf0f6 !important; font-size: 12px; line-height: 32px; padding: 0 4px !important; border-bottom: 1px solid #6385a6; }
    .opern_list th em { font-size: 11px; }
    .opern_list td { padding: 6px 4px !important; }
    .opern_list .f2, .opern_list .f6, .opern_list .f3, .opern_list .f4, .opern_list .f5 { display: none !important; } 
    .opern_list .f0 { width: 40px !important; text-align: center !important; padding: 10px 0 10px 5px !important; background: none !important; font-size: 12px; color: #999; }
    .opern_list .f1 { width: auto !important; padding: 10px 8px !important; }
    .opern_list .f1 a, .opern_list.opern_article .f1 a { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; white-space: normal !important; word-wrap: break-word !important; line-height: 1.5 !important; overflow: hidden !important; font-size: 13px !important; }
    .opern_list tbody tr:nth-child(even) { background-color: #fafafa; }
    .opern_list tbody td { border-bottom: 1px dotted #e3e3e3 !important; }
    .opern_list .line { width: calc(100% - 20px) !important; }

    /* 列表分页强制单行 */
    .main_Item { width: 100% !important; text-align: center !important; padding: 10px 0 !important; margin: 0 !important; box-sizing: border-box !important; line-height: normal !important; white-space: nowrap !important; overflow-x: auto !important; }
    .main_Item a, .main_Item b:not(:first-child) { display: inline-block !important; padding: 4px 6px !important; margin: 2px 1px !important; font-size: 12px !important; min-width: 26px !important; line-height: 1.2 !important; box-sizing: border-box !important; vertical-align: middle !important; }
    .main_Item b:first-child { display: inline-block !important; padding: 0 !important; margin: 0 4px 0 0 !important; font-size: 12px !important; background: transparent !important; border: none !important; }

    /* 列表侧边栏正圆点 */
    body:not(.homepage) .nav .title, body:not(.homepage) .list_rank .title { width: 100% !important; box-sizing: border-box !important; }
    body:not(.homepage) .nav div { display: flex !important; flex-wrap: wrap !important; padding: 5px !important; }
    body:not(.homepage) .nav div a { float: none !important; width: 33.33% !important; box-sizing: border-box !important; padding: 8px 5px !important; border-bottom: 1px dotted #ccc !important; text-align: center !important; }
    
    body:not(.homepage) .side .nav ~ .list_rank div ul { width: 100% !important; padding: 0 10px !important; margin: 0 !important; background: none !important; display: block !important; box-sizing: border-box !important; }
    body:not(.homepage) .side .nav ~ .list_rank div ul li { display: block !important; float: none !important; width: 100% !important; height: auto !important; padding: 10px 0 10px 14px !important; margin: 0 !important; box-sizing: border-box !important; border-bottom: 1px dashed #e0e0e0 !important; background: none !important; list-style: none !important; position: relative !important; }
    body:not(.homepage) .side .nav ~ .list_rank div ul li:last-child { border-bottom: none !important; }
    body:not(.homepage) .side .nav ~ .list_rank div ul li a { display: block !important; float: none !important; width: 100% !important; max-width: 100% !important; font-size: 14px !important; color: #333 !important; line-height: 1.6 !important; white-space: normal !important; word-wrap: break-word !important; word-break: break-all !important; overflow: visible !important; text-overflow: clip !important; height: auto !important; padding: 0 !important; margin: 0 !important; text-indent: 0 !important; text-align: left !important; }
    body:not(.homepage) .side .nav ~ .list_rank div ul li::before { content: "" !important; position: absolute !important; left: 2px !important; top: 18px !important; width: 5px !important; height: 5px !important; background-color: #2969a6 !important; border-radius: 50% !important; border: none !important; margin: 0 !important; }

    /* 兼容其他列表 */
    .album_list, .author_list { width: 100% !important; padding-left: 0 !important; box-sizing: border-box !important; }
    .album_list .item { float: none !important; width: 100% !important; height: auto !important; padding: 10px 0 !important; box-sizing: border-box !important; }
    .album_list .item .image { width: 96px; height: 76px; overflow: hidden; }
    .album_list .item .image img { width: 100%; height: auto; }
    .album_list .item .info { float: left; width: calc(100% - 106px); margin-left: 10px; }
    .album_list .item .info .rtop span { float: none; display: block; margin-top: 4px; }
    .album_list.bookList ul li { height: auto !important; padding: 8px 0; box-sizing: border-box; }
    .album_list.bookList ul li span { float: none !important; display: block; line-height: 22px; }
    .album_list.bookList ul li .s1 { width: 100%; padding-left: 4px; }
    .album_list.bookList ul li .s2, .album_list.bookList ul li .s3 { width: auto; font-size: 12px; color: #999; }
    .album_list.bookList ul #shead { display: none; }
    .needTable, .bookTable, .needInfoTable { width: 100% !important; }
    .bookTable th, .bookTable td, .needTable th, .needTable td, .needInfoTable th, .needInfoTable td { padding: 4px 6px !important; font-size: 12px !important; }
    .bookTable td a, .needTable td a, .needInfoTable td a { font-size: 13px !important; }
    .bookTable .rediv, .needInfoTable .rediv { padding: 6px !important; }
    .bookTable .bookMore, .bookTable .secretTip { width: 100% !important; }
    .needTop { width: 100% !important; padding: 0 8px !important; box-sizing: border-box !important; }
    .needTop span { float: none !important; display: block !important; margin-top: 4px !important; }

    /* ==================== 【H】友情链接与页脚 ==================== */
    .links { width: calc(100% - 16px) !important; height: auto !important; margin: 8px auto 0 auto !important; padding: 8px !important; box-sizing: border-box !important; }
    .links .title { margin: -8px -8px 8px -8px !important; padding-left: 8px !important; }
    .links .list a { font-size: 13px; }
    
    .food { width: 100% !important; padding: 12px 8px !important; margin-top: 5px !important; box-sizing: border-box !important; text-align: center !important; background: none !important; border-top: 1px solid #eee !important; }
    .food, .food *, .food a:hover, .food a:link, .food a:visited { border: none !important; text-decoration: none !important; outline: none !important; box-shadow: none !important; }
    .food hr, .food .line, .food br { display: none !important; }
    .food .link { display: block !important; width: 100% !important; text-align: center !important; padding: 0 0 8px 0 !important; margin: 0 0 8px 0 !important; line-height: 1.5 !important; border-bottom: 1px dotted #e0e0e0 !important; }
    .food .link span { display: none !important; }
    .food .link a { display: inline-block !important; float: none !important; font-size: 12px !important; color: #666 !important; margin: 2px 0 !important; padding: 0 6px !important; vertical-align: middle !important; line-height: 1.2 !important; }
    .food .link a:not(:last-child) { border-right: 1px solid #ddd !important; }
    .food .info, .food .info p, .food .info div, .food .info a, .food p, .foot-copy, .foot-desc { font-size: 11px !important; color: #999 !important; line-height: 1.4 !important; margin: 0 !important; padding: 0 4px !important; display: block !important; }
    .foot-copy { font-size: 11px !important; color: #888 !important; margin-bottom: 2px !important; white-space: nowrap !important; }
    .foot-desc { text-align: justify !important; text-justify: inter-ideograph !important; margin-bottom: 2px !important; }
    .food a { color: #888 !important; }
    .food a:hover { color: #2969a6 !important; }

    /* ==================== 【I】返回顶部 ==================== */
    #back-gotop { width: 38px !important; height: 38px !important; line-height: 38px !important; border-radius: 50% !important; background: rgba(41, 105, 166, 0.75) !important; right: 12px !important; bottom: 20px !important; color: #fff !important; font-size: 16px !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important; }
    #back-gotop:hover { background: rgba(41, 105, 166, 1) !important; }
}

/* ==================================================================
   超小屏微调 (≤ 360px) —— 极小屏专属
   ================================================================== */
@media screen and (max-width: 360px) {
    .head .logo img { max-width: 110px; }
    .yuepu365-header-search-wrap .yuepu365-search-select { width: 70px !important; }
    .opern_list .f6 { width: 60px !important; font-size: 11px; }
    .content_head h1 { font-size: 18px !important; }
    .content .content_body { font-size: 14px !important; padding: 0 8px !important; }
    .page_turn { padding: 10px 6px !important; }
    .related_article { padding: 10px 8px !important; }
}

/* ==================================================
   【修复】乐谱内容页专属：防文字截断 + 修复重叠提示
   ================================================== */
@media screen and (max-width: 768px) {
    /* 1. 修复作词、作曲、来源等信息被从中间截断 */
    .content_head .info {
        word-break: keep-all !important; /* 防止汉字词组被从中间打断 */
        line-height: 2 !important;       /* 增大行高，避免文字挤在一起 */
        padding: 10px 15px !important;   /* 增加左右内边距，让排版更从容 */
    }
    /* 保证“作词：”、“演奏（唱）：”等标签不被拆行 */
    .content_head .info span {
        display: inline-block !important;
        white-space: nowrap !important;
        margin-right: 4px !important;
    }

    /* 2. 修复提示语与图片重叠，并让文字居中换行 */
    .content .save_tip {
        display: block !important;
        clear: both !important;         /* 强力清除上方可能残留的浮动 */
        width: 100% !important;
        height: auto !important;
        margin: 20px 0 15px 0 !important; /* 顶部强制留出 20px 安全距离，防止重叠 */
        padding: 10px 20px !important;  /* 左右留出空间，让文字自然折行 */
        line-height: 1.8 !important;    /* 拉大行距，让两行字看起来更舒服 */
        font-size: 13px !important;
        text-align: center !important;  /* 确保整体文字水平居中 */
        box-sizing: border-box !important;
        word-break: break-all !important;
    }
    /* 如果想让“提示：”两个字单占一行，可以开启下面这段代码 */
    .content .save_tip span {
        display: block !important;
        margin-bottom: 5px !important;
        font-weight: bold !important;
    }

    /* 3. 确保下方的曲谱图片列表有安全的顶部间距 */
    .content .imageList {
        margin-top: 10px !important;
        clear: both !important;
    }
}
/* ==================================================================
   【J】专辑页专属适配（专辑列表页 + 专辑封面/详情页）
   仅作用于专辑页，不影响其他页面已有规则
   ================================================================== */
@media screen and (max-width: 768px) {

    /* ---------- J-1. 专辑列表页：模块排序修正 ---------- */
    /* 页面 DOM 顺序：面包屑 → 分类导航(.main_Item) → 专辑列表 → 分页 → 侧栏(搜索/推荐专辑/推荐曲谱/热门曲谱) */
    /* 覆盖 G 区把 .main_Item 当分页处理的 order:4，恢复为专辑页正确顺序 */
    body:not(.homepage) .body.album-list-page > .area { order: 1; }
    body:not(.homepage) .body.album-list-page .main .main_Item { order: 2; }
    body:not(.homepage) .body.album-list-page .main .album_list { order: 3; }
    body:not(.homepage) .body.album-list-page .main .pageHtml { order: 4; }
    body:not(.homepage) .body.album-list-page .side .list:nth-child(1) { order: 5; }  /* 专辑搜索 */
    body:not(.homepage) .body.album-list-page .side .list:nth-child(2) { order: 6; }  /* 推荐专辑 */
    body:not(.homepage) .body.album-list-page .side .list_rank:nth-child(3) { order: 7; } /* 推荐曲谱 */
    body:not(.homepage) .body.album-list-page .side .list_rank:nth-child(4) { order: 8; } /* 热门曲谱 */
    body:not(.homepage) .body.album-list-page .main .album_list,
    body:not(.homepage) .body.album-list-page .main .pageHtml { width: 100% !important; float: none !important; box-sizing: border-box !important; }

    /* ---------- J-2. 专辑列表页：顶部分类导航 ---------- */
    /* G 区把 .main_Item 强制成单行横向滚动（分页用），专辑页改回自动换行；底部间距收紧，避免与专辑列表之间出现大片空白 */
    body:not(.homepage) .body.album-list-page .main .main_Item {
        text-align: left !important; white-space: normal !important; overflow-x: visible !important;
        padding: 6px 8px 0 8px !important; margin: 0 !important; line-height: 1.5 !important;
    }
    body:not(.homepage) .body.album-list-page .main .album_list { margin-top: 5px !important; }
    .album-list-page .main_Item a.ztdh {
        display: inline-block !important; padding: 5px 12px !important; margin: 0 4px 2px 0 !important;
        font-size: 13px !important; line-height: 1.4 !important; box-sizing: border-box !important;
    }

    /* ---------- J-2b. 专辑条目：清除浮动，修复底边虚线错位到图片中间的问题 ---------- */
    .album-list-page .album_list .item::after { content: "" !important; display: block !important; clear: both !important; }

    /* ---------- J-2c. 专辑简介：最多显示 2 行，超出省略号 ---------- */
    .album-list-page .album_list .item .info .rfood {
        display: -webkit-box !important; -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important; overflow: hidden !important;
        line-height: 18px !important;
    }

    /* ---------- J-2d. 收紧条目间距：图片下方、简介下方到虚线的空白 ---------- */
    .album-list-page .album_list .item { padding: 8px 0 6px 0 !important; }
    .album-list-page .album_list .item .image { height: auto !important; }

    /* ---------- J-3. 专辑列表页：分页居中且可换行 ---------- */
    .album-list-page .pageHtml { display: block !important; text-align: center !important; margin: 15px auto !important; }
    .album-list-page .pageHtml a,
    .album-list-page .pageHtml .current,
    .album-list-page .pageHtml .pageInfo {
        float: none !important; display: inline-block !important;
        margin: 3px 2px !important; vertical-align: middle !important;
    }

    /* ---------- J-4. 专辑列表页：侧栏专辑搜索框（覆盖模板内联宽度） ---------- */
    .album-list-page .side .list form { display: flex !important; align-items: center !important; }
    .album-list-page .side .list form input[type="text"] {
        flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
        height: 34px !important; margin: 0 5px 0 0 !important; padding: 0 8px !important; box-sizing: border-box !important;
    }
    .album-list-page .side .list form input[type="submit"] {
        flex: 0 0 auto !important; width: 60px !important; height: 34px !important; margin: 0 !important; box-sizing: border-box !important;
    }

    /* ---------- J-5. 专辑列表页：侧栏"推荐专辑"图标列表（标题单行占满、超出省略号） ---------- */
    .album-list-page .album_list_icon .item {
        width: 100% !important; height: auto !important; margin: 0 !important;
        padding: 7px 8px !important; box-sizing: border-box !important;
        display: flex !important; align-items: center !important;
    }
    .album-list-page .album_list_icon .item img { float: none !important; flex: 0 0 auto !important; margin: 0 !important; }
    .album-list-page .album_list_icon .item a {
        float: none !important; display: block !important; flex: 1 1 auto !important; min-width: 0 !important;
        margin-left: 6px !important; font-size: 13px !important; line-height: 1.5 !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }

    /* ---------- J-6. 专辑封面/详情页：横幅、简介、曲谱列表 ---------- */
    .album_topimg { width: 100% !important; overflow: hidden; box-sizing: border-box !important; }
    .album_topimg img { width: 100% !important; height: auto !important; display: block !important; }

    .album_introduction { width: 100% !important; box-sizing: border-box !important; padding: 10px !important; margin: 8px 0 !important; }
    .album_introduction h2 { font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 6px !important; }
    .album_introduction .note { font-size: 13px !important; line-height: 1.8 !important; overflow-wrap: anywhere !important; }
    .album_introduction .note img { max-width: 100% !important; height: auto !important; }

    /* 曲谱链接列表：手机端一行两个 */
    .opernList { width: 100% !important; box-sizing: border-box !important; padding: 8px !important; margin-top: 8px !important; display: flex !important; flex-wrap: wrap !important; }
    .opernList h3 { width: 100% !important; flex: 0 0 100% !important; font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 6px !important; box-sizing: border-box !important; }
    .opernList a {
        float: none !important; display: block !important; width: 50% !important; flex: 0 0 50% !important;
        box-sizing: border-box !important; padding: 7px 8px 7px 2px !important; margin: 0 !important;
        font-size: 13px !important; line-height: 1.5 !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
}

/* ==================================================================
   专辑页 · 超小屏微调 (≤ 360px)
   ================================================================== */
@media screen and (max-width: 360px) {
    .opernList a { width: 100% !important; flex: 0 0 100% !important; } /* 曲谱链接一行一个 */
    .album-list-page .main_Item a.ztdh { padding: 4px 8px !important; font-size: 12px !important; }
    .album_introduction h2 { font-size: 15px !important; }
}

/* ==================================================================
   【J-7】修复：专辑页"热门曲谱"被 F 区"热门 TAG（一行三个）"规则误伤
   原因：F 区按 .side .list_rank:last-child 选择 TAG 云，但专辑页侧栏
   最后一个 list_rank 是"热门曲谱"，被改成了三列居中、无序号、无虚线。
   这里按"推荐曲谱"的样式完整还原：序号背景条 + 整行标题 + 虚线分隔。
   ================================================================== */
@media screen and (max-width: 768px) {
    /* 还原 ul 的序号背景条（与推荐曲谱同一张 main_long.gif 数字条） */
    body:not(.homepage) .album-list-page .side .list_rank:last-child div ul {
        display: block !important; padding: 3px 8px 4px 8px !important; margin: 0 !important;
        background: url(images/main_long.gif) -1336px -357px no-repeat !important;
    }
    /* li 恢复整行、左侧留出序号位置、底部虚线 */
    body:not(.homepage) .album-list-page .side .list_rank:last-child div ul li {
        float: none !important; width: auto !important; height: 30px !important; line-height: 1 !important;
        margin: 0 !important; padding: 1px 0 2px 21px !important;
        border-bottom: 1px #CCC dotted !important; background: none !important;
    }
    body:not(.homepage) .album-list-page .side .list_rank:last-child div ul li::after { content: none !important; display: none !important; }
    /* 标题左对齐、单行占满、超出省略号 */
    body:not(.homepage) .album-list-page .side .list_rank:last-child div ul li a {
        float: none !important; display: block !important; width: 100% !important; max-width: 100% !important;
        margin: 0 !important; padding: 0 0 0 15px !important; box-sizing: border-box !important;
        text-align: left !important; font-size: 14px !important; line-height: 30px !important; color: #383838 !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
        background: transparent !important;
    }
}
/* ==================================================================
   【K】搜索结果页专属适配（仅手机端）
   标题第一行，词曲/分类/日期换行，所有换行内容对齐标题文字
   ================================================================== */
@media screen and (max-width: 768px) {
    /* 固定1200px居中包裹压成100% */
    .list_content div[style*="width: 1200px"],
    .list_content div[style*="width:1200px"] {
        width: 100% !important;
    }

    /* 搜索结果项：序号绝对定位，其余内容统一在标题文字列内 */
    .list_content h3.r {
        position: relative !important;
        display: block !important;
        padding-left: 18px !important;
        margin: 12px 0 !important;
        line-height: 1.5 !important;
    }
    /* 序号固定在最左 */
    .list_content h3.r > span:first-child {
        position: absolute !important;
        left: 0 !important;
        top: 2px !important;
        float: none !important;
    }
    /* 标题链接不浮动，与副标题同处第一行 */
    .list_content h3.r > a.l {
        float: none !important;
        display: inline !important;
        margin-right: -10px !important;
    }
    /* 副标题跟随标题，放不下时在标题文字列内自然换行 */
    .list_content h3.r > .sub-title {
        display: inline !important;
        float: none !important;
    }
    /* 词曲信息：换行显示，自动对齐标题文字，与标题距离近 */
    .list_content h3.r > :nth-child(4) {
        display: block !important;
        margin: 2px 0 0 0 !important;
    }
    /* 分类、日期：换行，自动对齐标题文字 */
    .list_content h3.r > :nth-child(5) {
        display: inline-block !important;
        margin: 4px 0 0 0 !important;
    }
    .list_content h3.r > :nth-child(6) {
        display: inline-block !important;
        margin: 4px 0 0 6px !important;
    }
}
/* ==================================================================
   【K-2】搜索页修复：给主体加上左右边距，防止贴边
   ================================================================== */
@media screen and (max-width: 768px) {
    /* 给最外层容器加上左右 8px 的安全边距 */
    .list_content {
        padding: 0 8px !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* 内层那个原本 1200px 的 div 宽度撑满即可，不要再加 padding 了 */
    .list_content > div {
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}
/* ==================================================================
   【L】高级搜索页专属适配 (单栏堆叠，防挤压)
   ================================================================== */
@media screen and (max-width: 768px) {
    /* 1. 搜索主容器内边距缩小，防止手机屏幕太窄放不下 */
    .search-main {
        padding: 10px !important;
        margin: 10px 0 !important;
    }
    
    /* 2. 左右分栏改为上下堆叠 */
    .search-col {
        float: none !important;
        width: 100% !important;
    }
    .search-col.left {
        padding-right: 0 !important;
        border-right: none !important;
        border-bottom: 1px solid #f0f0f0 !important; /* 原本的右侧分割线改为底部分割线 */
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
    }
    .search-col.right {
        padding-left: 0 !important;
    }
    
    /* 3. 时间限制的输入框自适应 */
    .form-row {
        padding: 8px 0 !important;
    }
    .form-row input[name="starttime"],
    .form-row input[name="endtime"] {
        width: 90px !important; /* 缩小宽度，保证“从xxx到xxx”能在一行显示 */
        margin: 2px 0 !important;
    }

    /* 4. 搜索范围的单选框换行更美观 */
    .form-radio label {
        margin-right: 12px !important;
        display: inline-block !important;
        margin-bottom: 4px !important;
    }
    
    /* 5. 关键字搜索栏自适应 (独占一行，防止挤压) */
    .keyword-bar {
        flex-wrap: wrap !important;
        padding-top: 10px !important;
    }
    .keyword-bar .form-input {
        width: 100% !important;
        margin: 6px 0 !important;
    }
    .keyword-bar .search-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 6px !important;
        height: 38px !important;
    }
    .keyword-bar .tip {
        display: block !important;
        width: 100% !important;
        margin: 6px 0 0 0 !important;
    }
}
/* ==================================================================
   【终极美化】专辑曲谱列表：字号放大 + 行高间距加宽
   ================================================================== */
@media screen and (max-width: 768px) {
    /* 1. 给整个列表容器加一点内边距，不要太贴边 */
    .opernList {
        padding: 10px 15px !important; 
    }
    
    /* 2. 调整每一项（a标签）的尺寸 */
    .opernList a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
        
        /* --- 核心修改区域 --- */
        font-size: 14px !important;     /* 字号从 13px 调大到 14px */
        line-height: 1.8 !important;    /* 行高拉大到 1.8，不那么挤 */
        padding: 18px 0 !important;     /* 上下间距从 8px 增加到 12px */
        margin: 0 !important;
        /* -------------------- */
        
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-bottom: 1px dashed #e3e3e3 !important; /* 浅色虚线更精致 */
    }

    /* 3. 调整前面序号（1、 2、）的样式 */
    .opernList a span {
        display: inline-block !important;
        flex-shrink: 0 !important;
        margin-right: 8px !important;   /* 序号和标题之间间距从 6px 增加到 8px */
        font-size: 15px !important;     /* 序号稍微再大一点点，起强调作用 */
        color: #D20005 !important;      /* 保留原版的红色序号 */
        font-weight: bold !important;   /* 序号加粗一下更好看 */
    }
}