/* 以桌面版的青色导航、标题与卡片为样板；仅在窄屏启用。 */
@media (max-width: 768px) {
  body { -webkit-text-size-adjust: 100%; }
  #head_banner #header .menu, #head_banner #header .close1 {
    width: 72px; height: 44px; background: none; color: #fff;
    align-items: center; justify-content: flex-end; gap: 9px; cursor: pointer;
  }
  #head_banner #header .menu { display: flex !important; }
  #head_banner #header .close1 { display: none !important; }
  .jc-mobile-open #head_banner #header .menu { display: none !important; }
  .jc-mobile-open #head_banner #header .close1 { display: flex !important; }
  #head_banner #header .menu::before {
    content: ''; width: 21px; height: 16px;
    background: linear-gradient(#fff,#fff) center top / 21px 2px no-repeat,
      linear-gradient(#fff,#fff) center / 21px 2px no-repeat,
      linear-gradient(#fff,#fff) center bottom / 21px 2px no-repeat;
  }
  #head_banner #header .close1::before {
    content: ''; width: 18px; height: 18px;
    background: linear-gradient(45deg,transparent 44%,#fff 44%,#fff 54%,transparent 54%),
      linear-gradient(-45deg,transparent 44%,#fff 44%,#fff 54%,transparent 54%);
  }
  #head_banner #header .menu::after { content: '菜单'; font-size: 13px; }
  #head_banner #header .close1::after { content: '关闭'; font-size: 13px; }
  #head_banner #header [role=button]:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px; border-radius: 4px; }
  #nav a:focus-visible, #nav input:focus-visible, #nav button:focus-visible,
  #website a:focus-visible, #website input:focus-visible, #website select:focus-visible,
  #website textarea:focus-visible, #website button:focus-visible { outline: 2px solid #1d6f8e !important; outline-offset: 2px; }
  /* 菜单里的搜索输入框：焦点框画在边框内侧（offset -2）。
     画在外面会被它所在那一行（.jc-nav-search-field，overflow:hidden）剪掉，
     左边、上边、下边全没了，只在输入框与「搜索」按钮之间的缝里留一条蓝竖条——
     站主 2026-10-14 截图上圈出来的「搜索框右侧多余的蓝色」就是它。
     画到内侧之后焦点照样看得见（输入框的边框整个变成青色），也不会再留残片。 */
  #nav .jc-nav-search-input:focus-visible { outline-offset: -2px; }
  body.jc-mobile-open { overflow: hidden; }
  #nav {
    position: fixed; top: 64px !important; right: 0; width: 100%; height: 0;
    /* 先写 vh 再写 dvh：认 dvh 的用动态视口高度（键盘弹出时更准），
       不认的（老 iOS/内嵌浏览器）至少还有 vh 这条退路——没有它 max-height 整条失效，
       面板高度变成 auto，超出屏幕的菜单项就滚不到了。 */
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    background: #fff; z-index: 1002;
    opacity: 0; visibility: hidden; overflow: hidden; transition: opacity .18s ease;
    box-shadow: 0 12px 28px rgba(20,45,60,.14); border-radius: 0 0 12px 12px;
  }
  .jc-mobile-open #nav { height: auto !important; opacity: 1; visibility: visible; overflow-y: auto; }
  #nav.man { transition: opacity .16s ease; }
  #nav .nav_list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; width: calc(100% - 40px); margin: 20px auto; }
  #nav ul li.left { width: auto; height: auto; float: none; border: 0; min-width: 0; }
  #nav ul li .one { height: 44px; line-height: 44px; padding: 0 14px; border-radius: 6px; color: #22313c; background: #f4f7f9; font-size: 15px; font-family: inherit; text-align: left; }
  #nav ul li .one:hover { background: #eaf3f7; color: #1d6f8e; }
  #nav ul li .one[aria-current=page], #nav ul li .one[aria-current=page]:hover { color: #fff; background: #1d6f8e; }
  #nav .jc-nav-search-item { grid-column: 1 / -1; margin-top: 8px; }
  #nav .jc-nav-search-mobile { width: 100%; }
  #nav .jc-nav-search-mobile > .one { display: none; }
  #nav .jc-nav-search-field, #nav .jc-nav-search-mobile.is-open .jc-nav-search-field {
    display: flex; max-height: none; padding: 0; gap: 8px;
  }
  #nav .jc-nav-search-input { min-width: 0; width: 100%; flex: 1; opacity: 1; height: 44px; padding: 0 12px; border: 1px solid #dbe5eb; border-radius: 6px; background: #fff; color: #22313c; font-size: 16px; }
  #nav .jc-nav-search-go { height: 44px; flex: 0 0 64px; background: #1d6f8e; color: #fff; border-radius: 6px; font-size: 14px; padding: 0; }
  .jc-mobile-backdrop { position: fixed; top: 64px; bottom: 0; left: 0; width: 100%; z-index: 1000; padding: 0; border: 0; background: rgba(18,37,49,.28); }
  .jc-mobile-backdrop[hidden] { display: none; }

  body:not(.page-home) #website { margin-top: 0; margin-bottom: 48px; }
  body:not(.page-home) #website.w1200 { padding-top: 28px; }
  #website .bread { height: auto; padding: 18px 0 0; margin: 0 0 22px; font-size: 13px; line-height: 1.8; color: #5b6a75; overflow-wrap: anywhere; }
  #website .bread * { font-size: inherit; line-height: inherit; color: inherit; }
  body:not(.page-home) #website .pub_tit { padding: 0; margin: 0 0 24px; border: 0; }
  body:not(.page-home) #website .pub_tit .tit { font-size: 24px; font-weight: 500; line-height: 1.4; margin: 0 0 6px; color: #22313c; }
  body:not(.page-home) #website .pub_tit .en { font-size: 12px; line-height: 1.6; letter-spacing: 1.5px; color: #5b6a75; margin: 0; }
  /* 联系页例外：它下面紧跟的是「约我出去玩」这个同级标题，中间没有线两个标题就贴成一块，
     看着不协调（站主 2026-10-14）。桌面端本来就有这条下划线（.jc-shell .pub_tit 的下边框），
     这里只是把手机上被统一去掉的那条补回来，颜色、粗细都与桌面一致。 */
  body:not(.page-home) #website.contact_box .pub_tit {
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
  }
  #website .category { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 0 4px; margin: 0 0 24px; width: 100%; overflow-x: auto; scrollbar-width: none; text-align: left; }
  #website .category::-webkit-scrollbar { display: none; }
  #website .category a.dis { flex: 0 0 auto; margin: 0; padding: 0 14px; min-height: 40px; line-height: 40px; border: 1px solid #e2e9ee; border-radius: 4px; font-size: 14px; background: #fff; color: #3c4a55; }
  #website .category a.dis.on, #website .category a.dis.on:hover { background: #1d6f8e; border-color: #1d6f8e; color: #fff; }
  #website .category a.dis:hover { color: #1d6f8e; background: #f3f8fa; }

  #website .jc-collections, #website .jc-episodes { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
  #website .jc-collection { display: grid; grid-template-columns: 88px minmax(0,1fr) 16px; gap: 12px; padding: 16px; border-radius: 10px; }
  #website .jc-collection-cover { width: 88px; height: 62px; border-radius: 6px; }
  #website .jc-collection-name { font-size: 17px; line-height: 1.5; font-weight: 600; }
  #website .jc-collection-meta, #website .jc-series-count { font-size: 12px; line-height: 1.7; margin: 5px 0 7px; }
  #website .jc-collection-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 13px; line-height: 1.8; }
  #website .jc-collection-go svg { width: 16px; height: 16px; }
  #website .jc-series { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 14px; padding: 16px; margin-bottom: 20px; align-items: start; border-radius: 10px; }
  #website .jc-series-cover { width: 96px; height: 64px; border-radius: 6px; }
  #website .jc-series-name { font-size: 18px; line-height: 1.5; }
  #website .jc-series-desc { font-size: 13px; line-height: 1.8; }
  #website .jc-series-feed { display: flex; flex-wrap: wrap; gap: 5px 10px; font-size: 13px; }
  #website .jc-series-feed-hint { margin: 0; font-size: 12px; }
  #website .jc-episode { display: grid; grid-template-columns: 56px minmax(0,1fr) 32px; gap: 12px; align-items: start; padding: 16px 14px; border-radius: 10px; }
  #website .jc-episode-cover { width: 56px; height: 56px; border-radius: 6px; }
  #website .jc-episode-title { font-size: 16px; line-height: 1.5; font-weight: 600; }
  #website .jc-episode-meta { font-size: 12px; line-height: 1.7; margin: 5px 0 6px; }
  #website .jc-episode-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.8; }
  #website .jc-episode-play { width: 32px; height: 32px; align-self: center; }
  #website .jc-episode-play svg { width: 17px; height: 17px; }

  /* 播客用紧凑的节目列表；不影响首页、搜索结果和桌面卡片。 */
  #website.jc-plain-tit .bread { padding-top: 14px; margin-bottom: 16px; }
  #website.jc-plain-tit .pub_tit { margin-bottom: 18px; }
  #website.jc-plain-tit .pub_tit .tit { font-size: 22px; margin-bottom: 4px; }
  #website.jc-plain-tit .category { margin-bottom: 16px; }
  #website.jc-plain-tit .jc-collections,
  #website.jc-plain-tit .jc-episodes { gap: 8px; }
  #website.jc-plain-tit .jc-collection {
    grid-template-columns: 64px minmax(0,1fr) 14px; gap: 10px;
    padding: 12px; border-radius: 6px; align-items: start;
  }
  #website.jc-plain-tit .jc-collection-cover { width: 64px; height: 44px; border-radius: 4px; }
  #website.jc-plain-tit .jc-collection-name { font-size: 16px; line-height: 1.45; }
  #website.jc-plain-tit .jc-collection-meta { margin: 3px 0 4px; line-height: 1.6; }
  #website.jc-plain-tit .jc-collection-desc { -webkit-line-clamp: 2; line-height: 1.6; }
  #website.jc-plain-tit .jc-collection-go svg { width: 14px; height: 14px; }
  #website.jc-plain-tit .jc-series {
    grid-template-columns: 64px minmax(0,1fr); gap: 12px;
    padding: 12px; margin-bottom: 14px; border-radius: 6px;
  }
  #website.jc-plain-tit .jc-series-cover { width: 64px; height: 44px; border-radius: 4px; }
  #website.jc-plain-tit .jc-series-name { font-size: 16px; line-height: 1.45; }
  #website.jc-plain-tit .jc-series-count { margin: 3px 0 5px; line-height: 1.6; }
  #website.jc-plain-tit .jc-series-desc { line-height: 1.6; }
  #website.jc-plain-tit .jc-series-feed { margin-top: 5px; }
  #website.jc-plain-tit .jc-episode {
    grid-template-columns: 44px minmax(0,1fr) 28px; gap: 10px;
    padding: 11px 12px; border-radius: 6px;
  }
  #website.jc-plain-tit .jc-episode-cover { width: 44px; height: 44px; border-radius: 4px; }
  #website.jc-plain-tit .jc-episode-title { font-size: 15px; line-height: 1.5; }
  #website.jc-plain-tit .jc-episode-meta { margin: 3px 0 4px; line-height: 1.6; }
  #website.jc-plain-tit .jc-episode-desc { -webkit-line-clamp: 1; line-height: 1.6; }
  #website.jc-plain-tit .jc-episode-play { width: 28px; height: 28px; }
  #website.jc-plain-tit .jc-episode-play svg { width: 15px; height: 15px; }
  #website.jc-plain-tit .jc-episode-play.is-text svg { width: 15px; height: 15px; }

  #website.info_box .list > .item { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 16px; height: auto; min-height: 0; padding: 20px 0; border-bottom: 1px solid #e6edf1; overflow: visible; }
  #website.info_box .list > .item:first-child { padding-top: 0; }
  #website.info_box .list > .item .date { display: none; }
  #website.info_box .list > .item > .img { position: static; width: 88px; height: 88px; grid-column: 1; grid-row: 1; }
  #website.info_box .list > .item > .img img { display: block; width: 100%; height: 100%; object-fit: contain; }
  #website.info_box .list > .item > .info { position: static; width: auto; height: auto; grid-column: 2; grid-row: 1; min-width: 0; border: 0; }
  #website.info_box .list > .item .info::before { display: none; }
  #website.info_box .list > .item .info .title { width: 100%; margin: 0; padding: 0; }
  #website.info_box .list > .item .info .title a { display: block; font-size: 16px; line-height: 1.6; font-weight: 500; }
  #website.info_box .list > .item .info .brief { width: 100%; margin: 7px 0; font-size: 13px; line-height: 1.8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #website.info_box .list > .item .info .inner_date { display: block; margin: 0; font-size: 12px; line-height: 1.7; color: #5b6a75; }
  #website.index_box .info_list, #website.index_box .info_list.two { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 16px; margin: 0 0 24px; }
  #website.index_box .info_list .picture { width: 112px; float: none; }
  #website.index_box .info_list .picture .img { height: 86px; padding: 0; }
  #website.index_box .info_list .picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
  #website.index_box .info_list .content { width: auto; float: none !important; margin: 0; min-width: 0; }
  #website.index_box .info_list .content .a { padding: 0; background: none; font-size: 16px; line-height: 1.6; white-space: normal; font-weight: 500; }
  #website.index_box .info_list .desc { font-size: 13px; line-height: 1.8; margin-top: 7px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #website.index_box .info_list .day { margin-top: 7px; font-size: 12px; }
  #website.index_box .info_list .clear { display: none; }

  #website.info_detail > .title { padding: 20px 0; margin-top: 0; }
  #website.info_detail > .title h1.t { font-size: 21px; font-weight: 500; line-height: 1.5; margin: 0 0 10px; }
  #website.info_detail > .title .dis { font-size: 12px; line-height: 18px; background-size: 15px auto; }
  #website.info_detail > .title .time { padding-left: 20px; }
  #website.info_detail > .title .eyes { padding-left: 23px; }
  #website.info_detail .content { margin-top: 24px; padding-top: 0; overflow-wrap: break-word; }
  #website.info_detail .content > div:first-child p { font-size: 15px; line-height: 1.85; margin: 0 0 14px; }
  #website.info_detail .content > div:first-child p:empty { display: none; }
  #website.info_detail .content > div:first-child h1, #website.info_detail .content > div:first-child h2, #website.info_detail .content > div:first-child h3 { font-size: 19px; line-height: 1.6; margin: 24px 0 12px; }
  #website.info_detail .prev_next { margin-top: 28px; padding-top: 18px; }
  #website.info_detail .prev_next .same { line-height: 1.8; margin-bottom: 12px; }
  #website.about_box .content { font-size: 15px; line-height: 1.85; }
  #website.about_box .content p { margin-bottom: 14px; }

  #website .jc-pair { gap: 30px; }
  #website .jc-date-head .tit { font-size: 20px; line-height: 1.5; margin: 0 0 6px; }
  #website .jc-date-head .en { font-size: 12px; letter-spacing: 1px; }
  #website .jc-date-lead, #website .jc-account-lead { font-size: 14px; line-height: 1.8; margin: 12px 0 18px; }
  #website .jc-date-form, #website .jc-account-card, #website .jc-resume-ask, #website .jc-gate { padding: 18px 16px; border-radius: 10px; }
  #website .jc-account-card .jc-date-form { padding: 0; border: 0; background: transparent; }
  #website .jc-date-field { min-width: 0; flex-basis: 100%; }
  #website .jc-date-field.wide { margin-top: 16px; }
  #website .jc-date-row { gap: 16px; }
  #website .jc-date-field > span { font-size: 14px; line-height: 1.7; }
  #website .jc-date-field .jc-date-hint { display: block; margin: 3px 0 0; font-size: 12px; line-height: 1.6; }
  #website input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]), #website select, #website textarea { font-size: 16px; min-width: 0; max-width: 100%; }
  #website .jc-date-foot { gap: 14px; margin-top: 20px; }
  #website .jc-date-quiz { display: grid; grid-template-columns: auto minmax(0,1fr) 92px; gap: 8px; align-items: center; width: 100%; }
  #website .jc-date-quiz input { width: 100%; min-width: 0; }
  #website .jc-captcha { width: 92px; height: 38px; object-fit: contain; }
  #website .jc-date-submit { min-height: 44px; font-size: 15px; border-radius: 6px; }
  #website .jc-need-login-ops { flex-direction: column; align-items: center; gap: 14px; }
  #website .jc-need-login-ops .jc-date-submit { width: auto; min-width: 120px; }
  #website .jc-avatar-form .jc-date-submit { width: auto; }
  #website .jc-avatar-form input[type=file] { max-width: 100%; min-width: 0; }
  #website .jc-resume-ask { margin-top: 26px; margin-bottom: 0; }
  #website .jc-resume-ask-t { font-size: 18px; line-height: 1.5; }
  #website .jc-resume-ask-p, #website .jc-note-block { font-size: 14px; line-height: 1.85; }
  #website .jc-note-block h2 { font-size: 18px; line-height: 1.5; margin: 24px 0 12px; }
  #website .jc-note-block li { font-size: 14px; line-height: 1.85; }
  #website .jc-search { gap: 8px; }
  #website .jc-search button { padding: 0 16px; min-height: 44px; }
  #website .jc-account-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  #website .jc-dm-head { flex-wrap: wrap; gap: 12px; }
  #website .jc-dm-box, #website .jc-dm-compose { max-width: 100%; }
  #website .jc-empty { margin: 24px auto; padding: 24px 18px; }
  #website .pglist { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 24px 0 0; }
  #website .pglist a, #website .pglist span { margin: 0; min-height: 38px; line-height: 38px; padding: 0 11px; font-size: 13px; border-radius: 4px; }

  #footer { padding-top: 22px; }
  #footer > .w1200 { width: calc(100% - 40px); max-width: none; padding: 0; }
  #footer .left { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; text-align: left; }
  #footer .left .logo { width: 140px; height: 32px; margin: 0; }
  #footer .share { margin: 0; }
  #footer .bdsharebuttonbox { display: flex; gap: 7px; }
  #footer .bdsharebuttonbox a { margin: 0; }
  #footer .right .same .span { width: 38px; min-width: 38px; font-size: 12px; }
  #footer .right .same .msg { min-width: 0; font-size: 13px; line-height: 1.8; }
  #footer .copyright { margin-top: 18px; padding: 14px 20px; font-size: 12px; line-height: 1.8; }
  #footer .copyright * { font-size: 12px; line-height: inherit; }
}