/* ============================================================
         台灣身障制度變遷 · 卷宗式單頁
         v22（2026-09-18）流暢導航＋資料更新版
         新增：2026制度更新、五層落地成熟度、動態導覽定位、URL狀態同步
         介面：深色模式、側邊卷次導航、閱讀進度、站內搜尋、字級調整
         ============================================================ */

      /* ---------- 設計代幣（淺色） ---------- */
      :root {
        color-scheme: light dark;

        --paper: #fff8ee;
        --paper-deep: #f8ebdd;
        --card: #fffdf9;
        --card-hi: #ffffff;

        --ink: #3d302b;
        --ink-soft: #6b5a51;
        --ink-faint: #7a685c;

        --green: #497a67;
        --green-deep: #2c4f44;
        --green-mid: #3d6a5a;
        --green-light: #487964;
        --green-pale: rgba(23, 82, 57, 0.035);
        --green-pale-2: rgba(23, 82, 57, 0.06);

        --red: #c96d5b;
        --red-ink: #a8402f;
        --red-soft: #fbe8e1;

        --gold: #c28a45;
        --gold-ink: #8a5f14;
        --gold-soft: #fff0d6;
        --gold-bright: #f0cf78;
        --gold-pale: rgba(143, 110, 31, 0.07);

        --line: #e7d6c6;
        --line-strong: #d5bda8;

        --nav-bg: rgba(12, 42, 30, 0.97);
        --nav-ink: #d7e1d7;
        --band-ink: #f4efe2;
        --hero-sub: #e0ece4;
        --hero-meta: #d7e8dd;

        --note-bg: #fff0d6;
        --note-ink: #5c4a18;
        --warn-bg: #fbe8e1;
        --warn-ink: #6e241f;

        --one-bg: #f5d8c7;
        --one-ink: #5c4137;
        --one-accent: #a0392a;
        --one-tag: #7a3a2c;

        --stamp-bg: rgba(255, 248, 238, 0.93);
        --stamp-ink: #b43f2f;

        --pill-jp-bg: #f7f0dc;
        --pill-jp-ink: #7b5b12;
        --pill-jp-line: #c9a84c;
        --pill-tw-bg: #edf5ee;
        --pill-tw-ink: #497a67;
        --pill-tw-line: #6d9b80;

        --rule-red: rgba(168, 64, 47, 0.42);
        --rule-red-2: rgba(168, 64, 47, 0.18);
        --hair: rgba(23, 82, 57, 0.05);

        --shadow-1:
          0 1px 2px rgba(23, 40, 31, 0.05), 0 2px 8px rgba(23, 40, 31, 0.045);
        --shadow-2:
          0 2px 4px rgba(23, 40, 31, 0.07), 0 12px 28px rgba(23, 40, 31, 0.09);
        --shadow-paper: 0 5px 18px rgba(111, 76, 55, 0.07);
        --shadow-nav: 0 6px 20px rgba(12, 42, 30, 0.26);

        --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
        --serif: "Noto Serif TC", "PMingLiU", serif;
        --sans: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
        --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
        accent-color: var(--green);
      }

      /* ---------- 設計代幣（深色） ---------- */
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
          --paper: #171c19;
          --paper-deep: #1f2622;
          --card: #1e2420;
          --card-hi: #242b26;

          --ink: #ece5da;
          --ink-soft: #c5baac;
          --ink-faint: #a2978a;

          --green: #86c6a8;
          --green-deep: #101512;
          --green-mid: #16211b;
          --green-light: #1d2c24;
          --green-pale: rgba(134, 198, 168, 0.05);
          --green-pale-2: rgba(134, 198, 168, 0.09);

          --red: #d98874;
          --red-ink: #f0a28d;
          --red-soft: #2d1c18;

          --gold: #d9ae5c;
          --gold-ink: #e7bf73;
          --gold-soft: #2a2416;
          --gold-bright: #f0cf78;
          --gold-pale: rgba(231, 191, 115, 0.09);

          --line: #333c36;
          --line-strong: #4a554d;

          --nav-bg: rgba(8, 13, 10, 0.97);
          --nav-ink: #cbd8ce;
          --band-ink: #ece5da;
          --hero-sub: #cfe0d6;
          --hero-meta: #b7cdc0;

          --note-bg: #2a2416;
          --note-ink: #f0dfae;
          --warn-bg: #2d1c18;
          --warn-ink: #f5c3b5;

          --one-bg: #33241d;
          --one-ink: #f1d8c8;
          --one-accent: #ff9d86;
          --one-tag: #e8b49c;

          --stamp-bg: rgba(240, 232, 218, 0.92);
          --stamp-ink: #a8382a;

          --pill-jp-bg: #2a2416;
          --pill-jp-ink: #e8c987;
          --pill-jp-line: #6d5c2d;
          --pill-tw-bg: #17251e;
          --pill-tw-ink: #8fd0b0;
          --pill-tw-line: #3d6b55;

          --rule-red: rgba(217, 136, 116, 0.35);
          --rule-red-2: rgba(217, 136, 116, 0.15);
          --hair: rgba(255, 255, 255, 0.032);

          --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
          --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4);
          --shadow-paper: 0 5px 18px rgba(0, 0, 0, 0.3);
          --shadow-nav: 0 6px 20px rgba(0, 0, 0, 0.5);
        }
      }
      :root[data-theme="dark"] {
        --paper: #171c19;
        --paper-deep: #1f2622;
        --card: #1e2420;
        --card-hi: #242b26;

        --ink: #ece5da;
        --ink-soft: #c5baac;
        --ink-faint: #a2978a;

        --green: #86c6a8;
        --green-deep: #101512;
        --green-mid: #16211b;
        --green-light: #1d2c24;
        --green-pale: rgba(134, 198, 168, 0.05);
        --green-pale-2: rgba(134, 198, 168, 0.09);

        --red: #d98874;
        --red-ink: #f0a28d;
        --red-soft: #2d1c18;

        --gold: #d9ae5c;
        --gold-ink: #e7bf73;
        --gold-soft: #2a2416;
        --gold-bright: #f0cf78;
        --gold-pale: rgba(231, 191, 115, 0.09);

        --line: #333c36;
        --line-strong: #4a554d;

        --nav-bg: rgba(8, 13, 10, 0.97);
        --nav-ink: #cbd8ce;
        --band-ink: #ece5da;
        --hero-sub: #cfe0d6;
        --hero-meta: #b7cdc0;

        --note-bg: #2a2416;
        --note-ink: #f0dfae;
        --warn-bg: #2d1c18;
        --warn-ink: #f5c3b5;

        --one-bg: #33241d;
        --one-ink: #f1d8c8;
        --one-accent: #ff9d86;
        --one-tag: #e8b49c;

        --stamp-bg: rgba(240, 232, 218, 0.92);
        --stamp-ink: #a8382a;

        --pill-jp-bg: #2a2416;
        --pill-jp-ink: #e8c987;
        --pill-jp-line: #6d5c2d;
        --pill-tw-bg: #17251e;
        --pill-tw-ink: #8fd0b0;
        --pill-tw-line: #3d6b55;

        --rule-red: rgba(217, 136, 116, 0.35);
        --rule-red-2: rgba(217, 136, 116, 0.15);
        --hair: rgba(255, 255, 255, 0.032);

        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
        --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.4);
        --shadow-paper: 0 5px 18px rgba(0, 0, 0, 0.3);
        --shadow-nav: 0 6px 20px rgba(0, 0, 0, 0.5);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: calc(16px * var(--fz, 1));
        scroll-behavior: smooth;
        scroll-padding-top: 84px;
        -webkit-text-size-adjust: 100%;
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        * {
          animation: none !important;
          transition: none !important;
        }
      }
      body {
        font-family: var(--sans);
        color: var(--ink);
        background: var(--paper);
        line-height: 1.85;
        font-size: 16px;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-kerning: normal;
        background-image: repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 31px,
          var(--hair) 31px,
          var(--hair) 32px
        );
      }
      ::selection {
        background: var(--green);
        color: var(--paper);
      }
      h1,
      h2,
      h3,
      h4 {
        text-wrap: balance;
      }
      p,
      li,
      small,
      dd {
        text-wrap: pretty;
      }
      p {
        margin-bottom: 14px;
      }
      strong {
        color: var(--green);
      }
      a:focus-visible,
      button:focus-visible,
      summary:focus-visible,
      input:focus-visible,
      [tabindex]:focus-visible {
        outline: 2px solid var(--gold-ink);
        outline-offset: 2px;
        border-radius: 1px;
      }
      .kpi b,
      .hero-meta b,
      .status-band b,
      .tl-item .yr,
      .vlog .vv,
      .brow .vl {
        font-variant-numeric: tabular-nums lining-nums;
      }
      .skip-link {
        position: fixed;
        left: 16px;
        top: -60px;
        z-index: 130;
        background: var(--card);
        color: var(--green);
        padding: 10px 16px;
        border: 2px solid var(--gold-ink);
        font-weight: 700;
      }
      .skip-link:focus {
        top: 10px;
      }

      /* ---------- 閱讀進度 ---------- */
      #readBar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 100;
        pointer-events: none;
        background: linear-gradient(to right, var(--gold), var(--gold-bright));
        transform: scaleX(0);
        transform-origin: 0 50%;
      }

      /* ---------- 帳冊紅線容器 ---------- */
      .wrap {
        max-width: 1060px;
        margin: 0 auto;
        padding: 0 26px;
        position: relative;
      }
      @media (min-width: 768px) {
        .wrap.ledger {
          padding-left: 54px;
        }
        .wrap.ledger::before,
        .wrap.ledger::after {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          width: 1px;
        }
        .wrap.ledger::before {
          left: 28px;
          background: var(--rule-red);
        }
        .wrap.ledger::after {
          left: 32px;
          background: var(--rule-red-2);
        }
      }
      @media (min-width: 900px) {
        .wrap.ledger {
          padding-left: 64px;
        }
        .wrap.ledger::before {
          left: 34px;
        }
        .wrap.ledger::after {
          left: 38px;
        }
      }

      /* ---------- 導覽 ---------- */
      nav.topnav {
        position: sticky;
        top: 0;
        z-index: 60;
        background: var(--nav-bg);
        backdrop-filter: blur(8px);
        border-bottom: 2px solid var(--gold);
        transition: box-shadow 0.25s var(--ease);
      }
      nav.topnav.scrolled {
        box-shadow: var(--shadow-nav);
      }
      .nav-in {
        position: relative;
        max-width: 1060px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .nav-in::-webkit-scrollbar {
        display: none;
      }
      .nav-brand {
        font-family: var(--serif);
        font-weight: 900;
        color: #f0ead8;
        font-size: 0.92rem;
        padding: 14px 14px 14px 0;
        white-space: nowrap;
        border-right: 1px solid rgba(240, 234, 216, 0.25);
        margin-right: 6px;
      }
      .nav-brand small {
        font-family: var(--mono);
        font-weight: 400;
        font-size: 0.6rem;
        color: var(--gold-bright);
        display: block;
        letter-spacing: 0.12em;
        line-height: 1;
      }
      nav.topnav a {
        color: var(--nav-ink);
        text-decoration: none;
        font-size: 0.8rem;
        padding: 16px 9px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        letter-spacing: 0.03em;
        border-bottom: 3px solid transparent;
        transition:
          color 0.15s,
          border-bottom-color 0.15s;
      }
      nav.topnav a:hover,
      nav.topnav a:focus-visible {
        color: #fff;
        border-bottom-color: var(--gold-bright);
        outline: none;
      }
      nav.topnav a.on {
        color: #fff;
        border-bottom-color: var(--gold-bright);
        font-weight: 700;
      }
      nav.topnav a .nico {
        font-style: normal;
        margin-right: 4px;
      }
      nav.topnav::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 34px;
        pointer-events: none;
        background: linear-gradient(to left, var(--nav-bg), transparent);
      }

      /* ---------- 側邊卷次導航（大桌機） ---------- */
      #sideNav {
        display: none;
      }
      @media (min-width: 1500px) {
        #sideNav {
          display: block;
          position: fixed;
          left: 20px;
          top: 96px;
          width: 186px;
          z-index: 50;
          max-height: calc(100vh - 130px);
          overflow-y: auto;
          border: 1px solid var(--line-strong);
          border-radius: 8px;
          background: var(--card);
          box-shadow: var(--shadow-1);
          scrollbar-width: thin;
        }
        #sideNav .sn-t {
          font-family: var(--mono);
          font-size: 0.56rem;
          letter-spacing: 0.2em;
          color: var(--ink-faint);
          padding: 10px 14px 8px;
          border-bottom: 1px solid var(--line);
        }
        #sideNav a {
          display: flex;
          gap: 8px;
          align-items: baseline;
          padding: 9px 14px;
          font-size: 0.78rem;
          color: var(--ink-soft);
          text-decoration: none;
          border-left: 3px solid transparent;
          border-bottom: 1px solid var(--line);
        }
        #sideNav a:last-child {
          border-bottom: none;
        }
        #sideNav a span {
          font-family: var(--mono);
          font-size: 0.58rem;
          color: var(--ink-faint);
          letter-spacing: 0.06em;
          flex-shrink: 0;
        }
        #sideNav a:hover {
          color: var(--green);
          border-left-color: var(--line-strong);
        }
        #sideNav a.on {
          border-left-color: var(--gold);
          background: var(--paper-deep);
          color: var(--ink);
          font-weight: 700;
        }
        #sideNav a.on span {
          color: var(--red-ink);
        }
      }

      /* ---------- 封面 ---------- */
      header {
        position: relative;
        overflow: hidden;
        color: var(--band-ink);
        background: linear-gradient(
          135deg,
          var(--green-deep) 0%,
          var(--green-mid) 58%,
          var(--green-light) 100%
        );
      }
      header::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 31px,
          rgba(239, 234, 219, 0.045) 31px,
          rgba(239, 234, 219, 0.045) 32px
        );
      }
      .hero {
        max-width: 1060px;
        margin: 0 auto;
        padding: 70px 26px 60px;
        position: relative;
      }
      .hero::before,
      .hero::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        pointer-events: none;
        opacity: 0.6;
      }
      .hero::before {
        top: 24px;
        left: 26px;
        border-top: 2px solid var(--gold-bright);
        border-left: 2px solid var(--gold-bright);
      }
      .hero::after {
        bottom: 22px;
        right: 26px;
        border-bottom: 2px solid var(--gold-bright);
        border-right: 2px solid var(--gold-bright);
      }
      .file-no {
        font-family: var(--mono);
        font-size: 0.72rem;
        letter-spacing: 0.24em;
        color: var(--gold-bright);
        border: 1px solid rgba(240, 207, 120, 0.55);
        display: inline-block;
        padding: 5px 14px;
        margin-bottom: 26px;
      }
      .hero h1 {
        font-family: var(--serif);
        font-weight: 900;
        font-size: clamp(1.9rem, 4.6vw, 3.3rem);
        line-height: 1.28;
        letter-spacing: 0.02em;
        margin-bottom: 8px;
        color: #fffaf0;
      }
      .hero h1 .yr {
        font-family: var(--mono);
        font-weight: 500;
        font-size: 0.42em;
        color: var(--gold-bright);
        letter-spacing: 0.1em;
        vertical-align: middle;
        margin-left: 0.5em;
      }
      .hero .sub {
        color: var(--hero-sub);
        font-size: 0.98rem;
        letter-spacing: 0.06em;
        margin-bottom: 30px;
      }
      .hero .thesis {
        font-family: var(--serif);
        font-size: clamp(1.05rem, 2.2vw, 1.4rem);
        font-weight: 700;
        border-left: 4px solid #f3c77d;
        padding: 6px 0 6px 20px;
        color: #fff8ee;
        max-width: 640px;
      }
      .stamp {
        position: absolute;
        right: 26px;
        top: 64px;
        transform: rotate(9deg);
        font-family: var(--serif);
        font-weight: 900;
        color: var(--stamp-ink);
        background: var(--stamp-bg);
        border: 3px double var(--stamp-ink);
        border-radius: 6px;
        padding: 8px 16px;
        font-size: 1.05rem;
        letter-spacing: 0.32em;
        text-indent: 0.32em;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
      }
      @media (max-width: 720px) {
        .stamp {
          position: static;
          display: inline-block;
          margin: 10px 0 22px;
          transform: rotate(-3deg);
        }
      }
      .hero-meta {
        display: flex;
        flex-wrap: wrap;
        margin-top: 44px;
        border-top: 1px solid rgba(239, 234, 219, 0.22);
      }
      .hero-meta div {
        padding: 16px 30px 4px 0;
        margin-right: 30px;
      }
      .hero-meta b {
        font-family: var(--mono);
        font-size: 1.35rem;
        font-weight: 600;
        color: #fffaf0;
        display: block;
        line-height: 1.3;
      }
      .hero-meta span {
        font-size: 0.76rem;
        color: var(--hero-meta);
        letter-spacing: 0.06em;
      }
      .hero-tag {
        display: block;
        text-align: right;
        font-family: var(--serif);
        font-size: clamp(0.9rem, 2vw, 1.2rem);
        letter-spacing: 0.08em;
        color: #fff8ee;
        padding: 0 26px 24px;
        max-width: 1060px;
        margin: -18px auto 0;
        position: relative;
      }

      /* ---------- 一句話摘要 ---------- */
      .oneliner {
        background: var(--one-bg);
        border-top: 1px solid var(--rule-red);
        border-bottom: 1px solid var(--rule-red-2);
      }
      .oneliner-in {
        max-width: 1060px;
        margin: 0 auto;
        padding: 20px 26px;
        display: flex;
        gap: 16px;
        align-items: baseline;
        flex-wrap: wrap;
      }
      .oneliner-in .ol-tag {
        font-family: var(--mono);
        font-size: 0.64rem;
        letter-spacing: 0.22em;
        color: var(--one-tag);
        border: 1px solid currentColor;
        padding: 3px 10px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .oneliner-in p {
        margin: 0;
        font-family: var(--serif);
        font-weight: 700;
        font-size: clamp(0.95rem, 1.9vw, 1.12rem);
        color: var(--one-ink);
        line-height: 1.75;
      }
      .oneliner-in p strong {
        color: var(--one-accent);
      }

      /* ---------- 章節骨架 ---------- */
      section {
        padding: 70px 0 26px;
      }
      .sec-head {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-bottom: 10px;
        flex-wrap: wrap;
      }
      .sec-no {
        font-family: var(--mono);
        font-size: 0.72rem;
        letter-spacing: 0.24em;
        color: var(--red-ink);
        border: 1px solid currentColor;
        padding: 3px 10px;
        white-space: nowrap;
      }
      h2 {
        font-family: var(--serif);
        font-weight: 900;
        font-size: clamp(1.45rem, 3vw, 2rem);
        letter-spacing: 0.035em;
      }
      .sec-lede {
        color: var(--ink-soft);
        max-width: 760px;
        margin: 10px 0 34px;
        font-size: 0.95rem;
      }
      h3 {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 1.12rem;
        margin: 34px 0 14px;
        letter-spacing: 0.02em;
      }
      h4 {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0.02em;
      }

      /* ---------- 卡片 / 註記 ---------- */
      .card {
        background: var(--card);
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        padding: 26px 28px;
        margin: 22px 0;
        box-shadow: var(--shadow-paper);
      }
      .card h4 {
        margin-bottom: 8px;
      }
      .card > p:last-child,
      .card > ul:last-child {
        margin-bottom: 0;
      }
      .note,
      .warn {
        padding: 14px 20px;
        font-size: 0.86rem;
        margin: 20px 0;
        border-radius: 0 6px 6px 0;
      }
      .note {
        background: var(--note-bg);
        border-left: 4px solid var(--gold);
        color: var(--note-ink);
      }
      .warn {
        background: var(--warn-bg);
        border-left: 4px solid var(--red);
        color: var(--warn-ink);
      }
      .note strong,
      .warn strong {
        color: inherit;
      }
      .grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }
      .grid4 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
      }
      @media (max-width: 760px) {
        .grid2 {
          grid-template-columns: 1fr;
        }
      }

      /* ---------- KPI ---------- */
      .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
        gap: 1px;
        background: var(--line-strong);
        border: 1px solid var(--line-strong);
        border-radius: 12px;
        overflow: hidden;
        margin: 26px 0;
        box-shadow: var(--shadow-paper);
      }
      .kpi {
        background: var(--card);
        padding: 22px 20px 18px;
        position: relative;
      }
      .kpi::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--green);
        opacity: 0.75;
      }
      .kpi .tag {
        font-family: var(--mono);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        color: var(--ink-faint);
        display: block;
        margin-bottom: 10px;
      }
      .kpi b {
        font-family: var(--serif);
        font-weight: 900;
        font-size: 1.7rem;
        color: var(--green);
        line-height: 1.15;
        display: block;
      }
      .kpi small {
        display: block;
        color: var(--ink-soft);
        font-size: 0.78rem;
        margin-top: 8px;
        line-height: 1.6;
      }
      @media (hover: hover) {
        .kpi {
          transition: background 0.18s var(--ease);
        }
        .kpi:hover {
          background: var(--card-hi);
        }
      }

      /* ---------- 進度面板 ---------- */
      .status-band {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 1px;
        background: var(--line-strong);
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        overflow: hidden;
        margin: 24px 0;
        box-shadow: var(--shadow-paper);
      }
      .status-band > div {
        background: var(--card);
        padding: 14px 16px;
      }
      .status-band .tag {
        font-family: var(--mono);
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        color: var(--ink-faint);
        display: block;
        margin-bottom: 8px;
      }
      .status-band b {
        font-family: var(--mono);
        font-size: 0.86rem;
        color: var(--ink);
        font-weight: 600;
        display: block;
      }
      .status-band small {
        display: block;
        font-size: 0.76rem;
        color: var(--ink-soft);
        margin-top: 5px;
        line-height: 1.6;
      }
      .pstrip {
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        background: var(--card);
        padding: 16px 18px 14px;
        margin: 22px 0;
        box-shadow: var(--shadow-paper);
      }
      .pstrip .phead {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px;
        align-items: baseline;
      }
      .pstrip .phead b {
        font-family: var(--serif);
        font-size: 0.98rem;
      }
      .pstrip .phead span {
        font-family: var(--mono);
        font-size: 0.7rem;
        color: var(--red-ink);
      }
      .pstrip .pbar {
        height: 16px;
        display: flex;
        border: 1px solid var(--line);
        border-radius: 3px;
        overflow: hidden;
        margin: 10px 0;
      }
      .pstrip .pbar i {
        display: block;
        height: 100%;
      }
      .pstrip .pbar .ok {
        background: var(--green);
      }
      .pstrip .pbar .go {
        background: var(--gold);
      }
      .pstrip .pbar .no {
        background: var(--red);
      }
      .pstrip .plg {
        font-size: 0.76rem;
        color: var(--ink-soft);
        line-height: 1.7;
        margin: 0;
      }

      /* ---------- 三階段模式 ---------- */
      .model-shift {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        gap: 14px;
        align-items: stretch;
        margin: 20px 0 6px;
      }
      .model-shift article {
        background: var(--card);
        border: 1px solid var(--line-strong);
        border-top: 4px solid var(--green);
        border-radius: 10px;
        padding: 20px;
        box-shadow: var(--shadow-1);
      }
      .model-shift article:last-of-type {
        border-top-color: var(--gold);
      }
      .model-shift span {
        display: inline-block;
        font-size: 0.7rem;
        color: var(--red-ink);
        border: 1px solid currentColor;
        padding: 1px 7px;
        margin-bottom: 7px;
        border-radius: 2px;
      }
      .model-shift b {
        display: block;
        font-family: var(--serif);
        font-size: 1.05rem;
      }
      .model-shift p {
        margin: 8px 0 0;
        color: var(--ink-soft);
        font-size: 0.86rem;
      }
      .model-shift > i {
        align-self: center;
        color: var(--gold-ink);
        font-style: normal;
        font-size: 1.2rem;
      }

      /* ---------- 時間軸 ---------- */
      .tl {
        border-left: 2px solid var(--line-strong);
        margin: 26px 0 10px 8px;
      }
      .tl-item {
        position: relative;
        padding: 0 0 30px 30px;
      }
      .tl-item::before {
        content: "";
        position: absolute;
        left: -7px;
        top: 8px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--paper);
        border: 2.5px solid var(--green);
      }
      .tl-item.hot::before {
        border-color: var(--red);
        background: var(--red-soft);
      }
      .tl-item.next::before {
        border-color: var(--gold);
        background: var(--gold-soft);
      }
      .tl-item .yr {
        font-family: var(--mono);
        font-weight: 600;
        color: var(--green);
        font-size: 0.86rem;
        letter-spacing: 0.06em;
      }
      .tl-item.hot .yr {
        color: var(--red-ink);
      }
      .tl-item.next .yr {
        color: var(--gold-ink);
      }
      .tl-item b {
        font-family: var(--serif);
        display: block;
        font-size: 1rem;
        margin: 2px 0 4px;
      }
      .tl-item p {
        font-size: 0.86rem;
        color: var(--ink-soft);
        margin: 0;
        max-width: 720px;
      }

      /* ---------- 行內來源 ---------- */
      a.ref {
        font-family: var(--mono);
        font-size: 0.68rem;
        color: #6f4b0f;
        text-decoration: none;
        border: 1px solid currentColor;
        background: var(--gold-pale);
        padding: 1px 6px;
        border-radius: 2px;
        white-space: nowrap;
        vertical-align: middle;
        margin-left: 5px;
        transition:
          background 0.15s,
          color 0.15s;
      }
      a.ref:hover,
      a.ref:focus-visible {
        background: var(--gold-ink);
        color: var(--paper);
      }

      /* ---------- 表格 ---------- */
      .tbl-wrap {
        position: relative;
        overflow-x: auto;
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        background: var(--card);
        margin: 22px 0;
        box-shadow: var(--shadow-paper);
        scrollbar-width: thin;
        scrollbar-color: var(--line-strong) transparent;
      }
      .tbl-wrap::-webkit-scrollbar {
        height: 8px;
      }
      .tbl-wrap::-webkit-scrollbar-thumb {
        background: var(--line-strong);
        border-radius: 4px;
      }
      .tbl-hint {
        display: none;
        font-family: var(--mono);
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        color: var(--ink-faint);
        background: var(--paper-deep);
        border-bottom: 1px dashed var(--line-strong);
        padding: 6px 14px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
        min-width: 640px;
      }
      thead th {
        background: var(--green-deep);
        color: #f0ece0;
        font-weight: 500;
        text-align: left;
        padding: 11px 14px;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
        border-bottom: 2px solid var(--gold);
      }
      tbody th[scope="row"] {
        text-align: left;
        font-family: var(--serif);
        font-weight: 700;
        color: var(--green);
        padding: 11px 14px;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
        white-space: nowrap;
      }
      tbody td {
        padding: 11px 14px;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
      }
      tbody tr:nth-child(even) {
        background: var(--green-pale);
      }
      tbody tr {
        transition: background 0.12s;
      }
      tbody tr:hover {
        background: var(--gold-pale);
      }
      tbody tr:last-child td,
      tbody tr:last-child th[scope="row"] {
        border-bottom: none;
      }
      .tbl-cap {
        font-size: 0.75rem;
        color: var(--ink-faint);
        padding: 10px 14px;
        border-top: 1px dashed var(--line-strong);
        background: var(--paper-deep);
        margin: 0;
      }
      .pill {
        display: inline-block;
        padding: 3px 9px;
        border: 1px solid var(--line-strong);
        background: var(--paper-deep);
        font-size: 0.72rem;
        margin: 2px 5px 2px 0;
        border-radius: 2px;
      }
      .pill.jp {
        color: var(--pill-jp-ink);
        border-color: var(--pill-jp-line);
        background: var(--pill-jp-bg);
      }
      .pill.tw {
        color: #2c5f4d;
        border-color: var(--pill-tw-line);
        background: var(--pill-tw-bg);
      }
      .proposal {
        display: inline-block;
        font-size: 0.7rem;
        color: var(--green);
        border: 1px solid currentColor;
        padding: 1px 7px;
        margin: 0 6px 6px 0;
        border-radius: 2px;
        white-space: nowrap;
      }

      /* ---------- CSS 長條圖 ---------- */
      .chart {
        background: var(--card);
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        padding: 24px 24px 18px;
        margin: 24px 0;
        box-shadow: var(--shadow-paper);
      }
      .chart h4 {
        margin-bottom: 4px;
      }
      .chart .unit {
        font-family: var(--mono);
        font-size: 0.64rem;
        color: var(--ink-faint);
        letter-spacing: 0.08em;
        margin-bottom: 18px;
        display: block;
      }
      .brow {
        display: grid;
        grid-template-columns: 178px 1fr 74px;
        gap: 12px;
        align-items: center;
        margin-bottom: 11px;
      }
      @media (max-width: 640px) {
        .brow {
          grid-template-columns: 112px 1fr 62px;
          gap: 8px;
        }
      }
      .brow .lb {
        font-size: 0.78rem;
        color: var(--ink-soft);
        line-height: 1.45;
      }
      .brow .bar {
        height: 20px;
        background: var(--paper-deep);
        position: relative;
        border: 1px solid var(--line);
        border-radius: 2px;
        overflow: hidden;
      }
      .brow .bar i {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: var(--green);
        animation: growX 0.9s var(--ease);
      }
      .brow .bar i.g {
        background: var(--gold);
      }
      .brow .bar i.jp {
        background: repeating-linear-gradient(
          135deg,
          var(--gold) 0,
          var(--gold) 7px,
          #b99a4b 7px,
          #b99a4b 13px
        );
      }
      @keyframes growX {
        from {
          width: 0;
        }
      }
      .brow .vl {
        font-family: var(--mono);
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--green);
        text-align: right;
      }
      .brow .vl.g {
        color: var(--gold-ink);
      }
      .chart-key {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 18px;
        margin: 4px 0 16px;
        font-size: 0.74rem;
        color: var(--ink-soft);
      }
      .chart-key span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }
      .chart-key i {
        display: inline-block;
        width: 26px;
        height: 11px;
        border: 1px solid var(--line-strong);
        background: var(--green);
      }
      .chart-key i.jp {
        background: repeating-linear-gradient(
          135deg,
          var(--gold) 0,
          var(--gold) 5px,
          #b99a4b 5px,
          #b99a4b 9px
        );
      }
      .chart-note {
        font-size: 0.74rem;
        color: var(--ink-faint);
        margin: 14px 0 0;
        border-top: 1px dashed var(--line);
        padding-top: 10px;
      }

      /* ---------- 缺口卡 ---------- */
      .route {
        border: 1px solid var(--line-strong);
        border-left: 4px solid var(--green);
        border-radius: 10px;
        padding: 14px 18px;
        background: var(--card);
        margin: 14px 0;
        box-shadow: var(--shadow-paper);
      }
      .route b {
        font-family: var(--serif);
        display: block;
        margin-bottom: 4px;
      }
      .route p {
        margin: 0;
        font-size: 0.87rem;
        color: var(--ink-soft);
      }
      .route.pending {
        border-left-color: var(--red);
      }
      .route .flag {
        display: inline-block;
        font-family: var(--mono);
        font-size: 0.62rem;
        letter-spacing: 0.06em;
        color: var(--red-ink);
        border: 1px solid currentColor;
        background: var(--warn-bg);
        padding: 1px 7px;
        border-radius: 2px;
        margin-top: 8px;
      }
      @media (hover: hover) {
        .route {
          transition:
            border-color 0.18s,
            box-shadow 0.18s var(--ease);
        }
        .route:hover {
          border-color: var(--gold);
          box-shadow: var(--shadow-2);
        }
      }

      /* ---------- 摺疊（結論性意見 / FAQ） ---------- */
      details {
        background: var(--card);
        border: 1px solid var(--line-strong);
        border-radius: 8px;
        margin: 12px 0;
        box-shadow: var(--shadow-1);
        transition:
          border-color 0.18s,
          box-shadow 0.18s var(--ease);
      }
      details:hover {
        border-color: var(--gold);
      }
      summary {
        cursor: pointer;
        padding: 15px 20px;
        font-family: var(--serif);
        font-weight: 700;
        font-size: 0.96rem;
        list-style: none;
        display: flex;
        gap: 12px;
        align-items: center;
        min-height: 44px;
        transition: color 0.15s;
      }
      summary::-webkit-details-marker {
        display: none;
      }
      summary:hover {
        color: var(--green);
      }
      summary::before {
        content: "問";
        font-family: var(--mono);
        font-size: 0.68rem;
        color: var(--paper);
        background: var(--green);
        padding: 2px 7px;
        border-radius: 2px;
        flex-shrink: 0;
      }
      details[open] summary {
        border-bottom: 1px dashed var(--line-strong);
      }
      details .ans {
        padding: 15px 20px 18px;
        font-size: 0.88rem;
        color: var(--ink-soft);
      }
      details .ans p:last-child {
        margin-bottom: 0;
      }
      details.obs summary::before {
        content: "見";
        background: var(--red);
      }
      details.obs {
        border-left: 4px solid var(--red);
      }
      details.obs summary:hover {
        color: var(--red-ink);
      }
      details.obs summary .art {
        font-family: var(--mono);
        font-size: 0.66rem;
        color: var(--ink-faint);
        margin-left: auto;
        white-space: nowrap;
      }
      @supports (interpolate-size: allow-keywords) {
        :root {
          interpolate-size: allow-keywords;
        }
        details::details-content {
          block-size: 0;
          overflow: clip;
          transition:
            block-size 0.3s var(--ease),
            content-visibility 0.3s allow-discrete;
        }
        details[open]::details-content {
          block-size: auto;
        }
      }
      .obsmap {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 12px;
        margin: 22px 0;
      }
      .obsmap details {
        margin: 0;
      }
      .faq-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 6px 0 16px;
      }
      .faq-filter button {
        font-family: var(--sans);
        font-size: 0.8rem;
        letter-spacing: 0.04em;
        cursor: pointer;
        border: 1px solid var(--line-strong);
        background: var(--card);
        color: var(--ink-soft);
        padding: 7px 16px;
        border-radius: 20px;
        min-height: 38px;
      }
      .faq-filter button:hover {
        border-color: var(--gold);
        color: var(--gold-ink);
      }
      .faq-filter button.on {
        background: var(--green-deep);
        color: #f0ead8;
        border-color: var(--green-deep);
        font-weight: 700;
      }
      details.faq-hide {
        display: none;
      }
      .faq-count {
        font-size: 0.74rem;
        color: var(--ink-faint);
        margin: 0 0 14px;
      }

      /* ---------- 名詞解釋 ---------- */
      .glossary {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 14px;
        margin: 22px 0;
      }
      .gterm {
        background: var(--card);
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        padding: 16px 18px;
        box-shadow: var(--shadow-1);
      }
      .gterm dt {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 1rem;
        margin-bottom: 2px;
      }
      .gterm dt small {
        display: block;
        font-family: var(--mono);
        font-size: 0.62rem;
        font-weight: 400;
        color: var(--ink-faint);
        letter-spacing: 0.04em;
        margin-top: 3px;
      }
      .gterm dd {
        margin: 8px 0 0;
        font-size: 0.84rem;
        color: var(--ink-soft);
        line-height: 1.75;
      }

      /* ---------- 改革流程 ---------- */
      .flow {
        display: grid;
        margin: 26px 0;
      }
      .fstep {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 18px;
        position: relative;
        padding-bottom: 26px;
      }
      .fstep::before {
        content: "";
        position: absolute;
        left: 25px;
        top: 52px;
        bottom: 0;
        width: 2px;
        background: var(--line-strong);
      }
      .fstep:last-child::before {
        display: none;
      }
      .fdot {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 2px solid var(--green);
        background: var(--card);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--mono);
        font-weight: 600;
        color: var(--green);
        font-size: 0.95rem;
        z-index: 1;
      }
      .fstep.alert .fdot {
        border-color: var(--red);
        color: var(--red-ink);
        border-style: dashed;
      }
      .fbody b {
        font-family: var(--serif);
        font-size: 1rem;
      }
      .fbody p {
        font-size: 0.85rem;
        color: var(--ink-soft);
        margin: 4px 0 0;
      }
      .fstep.alert .fbody b {
        color: var(--red-ink);
      }

      /* ---------- 來源 ---------- */
      .source-list {
        font-size: 0.82rem;
        color: var(--ink-soft);
        list-style: none;
      }
      .source-list li {
        margin: 12px 0;
      }
      .source-list li:first-child {
        margin-top: 0;
      }
      .source-list li:last-child {
        margin-bottom: 0;
      }
      .source-list a {
        color: var(--green);
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .source-list a:hover {
        color: var(--gold-ink);
      }
      .styp {
        display: inline-block;
        font-family: var(--mono);
        font-size: 0.6rem;
        letter-spacing: 0.08em;
        color: var(--gold-ink);
        border: 1px solid currentColor;
        background: var(--paper-deep);
        padding: 1px 7px;
        border-radius: 2px;
        margin-right: 8px;
        vertical-align: 1px;
      }
      .source-list .note-line {
        display: block;
        font-size: 0.76rem;
        color: var(--ink-faint);
        margin-top: 3px;
      }
      .source-list li:target {
        background: var(--gold-soft);
        outline: 2px solid var(--gold);
        padding: 6px 8px;
        border-radius: 3px;
      }
      .vlog {
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        background: var(--card);
        margin: 20px 0;
        box-shadow: var(--shadow-paper);
        overflow: hidden;
      }
      .vlog > div {
        display: grid;
        grid-template-columns: 70px 96px 1fr;
        gap: 12px;
        padding: 11px 16px;
        border-bottom: 1px solid var(--line);
        font-size: 0.82rem;
        align-items: baseline;
      }
      .vlog > div:last-child {
        border-bottom: none;
      }
      .vlog .vv {
        font-family: var(--mono);
        font-weight: 600;
        color: var(--green);
        font-size: 0.78rem;
      }
      .vlog .vd {
        font-family: var(--mono);
        font-size: 0.7rem;
        color: var(--ink-faint);
      }
      .vlog p {
        margin: 0;
        color: var(--ink-soft);
      }
      @media (max-width: 640px) {
        .vlog > div {
          grid-template-columns: 62px 1fr;
          gap: 4px 10px;
        }
        .vlog .vd {
          grid-column: 2;
          margin-top: -4px;
        }
        .vlog p {
          grid-column: 1 / -1;
        }
      }
      .fin {
        border-top: 1px solid var(--line-strong);
        margin-top: 30px;
        padding-top: 20px;
        font-family: var(--mono);
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        line-height: 1.9;
        color: var(--ink-faint);
      }

      /* ---------- 站內搜尋 ---------- */
      .sitesearch {
        position: relative;
        margin: 22px 0 6px;
        max-width: 560px;
      }
      .sitesearch input {
        width: 100%;
        font-family: var(--sans);
        font-size: 0.92rem;
        padding: 12px 16px 12px 42px;
        border: 1.5px solid var(--line-strong);
        border-radius: 6px;
        background: var(--card);
        color: var(--ink);
        outline: none;
      }
      .sitesearch input:focus {
        border-color: var(--gold);
      }
      .sitesearch .ss-ic {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-faint);
        font-size: 0.95rem;
        pointer-events: none;
      }
      .ss-results {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 2px);
        z-index: 80;
        background: var(--card);
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        box-shadow: var(--shadow-2);
        display: none;
        max-height: 320px;
        overflow-y: auto;
      }
      .ss-results.open {
        display: block;
      }
      .ss-results button {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        border-bottom: 1px solid var(--line);
        padding: 11px 14px;
        cursor: pointer;
        font-family: var(--sans);
        font-size: 0.84rem;
        color: var(--ink);
      }
      .ss-results button:last-child {
        border-bottom: none;
      }
      .ss-results button:hover,
      .ss-results button:focus-visible {
        background: var(--gold-soft);
        outline: none;
      }
      .ss-results button .ss-vol {
        font-family: var(--mono);
        font-size: 0.6rem;
        color: var(--red-ink);
        letter-spacing: 0.12em;
        display: block;
        margin-bottom: 2px;
      }
      .ss-results .ss-none {
        padding: 12px 14px;
        font-size: 0.8rem;
        color: var(--ink-faint);
      }
      .ss-hint {
        font-size: 0.72rem;
        color: var(--ink-faint);
        margin: 8px 2px 0;
      }
      .ss-hint button {
        font-family: var(--mono);
        font-size: max(14px, 0.78rem);
        color: var(--ink);
        background: var(--paper-deep);
        border: 1px solid var(--line);
        padding: 2px 9px;
        margin: 3px 4px 0 0;
        cursor: pointer;
        border-radius: 2px;
      }
      .ss-hint button:hover {
        border-color: var(--gold);
        color: var(--gold-ink);
      }
      .flash-target {
        animation: flashBg 1.8s ease;
      }
      @keyframes flashBg {
        0%,
        60% {
          background: var(--gold-soft);
          outline: 2px solid var(--gold);
        }
        100% {
          background: transparent;
          outline: 2px solid transparent;
        }
      }

      /* ---------- 引言帶 / 頁尾 ---------- */
      .quote-band {
        background: var(--green-deep);
        color: var(--band-ink);
        text-align: center;
        padding: 60px 26px;
        margin-top: 70px;
        border-top: 3px double rgba(240, 207, 120, 0.6);
        border-bottom: 3px double rgba(240, 207, 120, 0.6);
      }
      .quote-band p {
        font-family: var(--serif);
        font-weight: 900;
        font-size: clamp(1.2rem, 3vw, 1.8rem);
        letter-spacing: 0.05em;
        margin: 0;
      }
      .quote-band strong {
        color: #ffdc95;
        border-bottom: 2px solid var(--gold);
      }
      footer {
        background: var(--green-deep);
        color: #d8e7dc;
        padding: 54px 0 44px;
        font-size: 0.82rem;
      }
      footer h4 {
        color: #f0ece0;
        font-size: 1rem;
        margin-bottom: 14px;
      }
      footer p {
        max-width: 780px;
      }
      footer .fin {
        border-top-color: rgba(239, 234, 219, 0.2);
        color: #a8c0b1;
      }

      /* ---------- 浮動控制 ---------- */
      .fabs {
        position: fixed;
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        z-index: 70;
        display: flex;
        flex-direction: column;
        gap: 9px;
      }
      .fabs button,
      .fabs a {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1.5px solid var(--gold-bright);
        background: var(--green-deep);
        color: var(--gold-bright);
        font-family: var(--sans);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(12, 42, 30, 0.3);
        transition:
          opacity 0.25s,
          transform 0.15s var(--ease),
          background 0.15s;
      }
      @media (hover: hover) {
        .fabs button:hover,
        .fabs a:hover {
          transform: translateY(-2px);
          background: var(--green);
          color: var(--paper);
        }
      }
      .fabs button:active,
      .fabs a:active {
        transform: scale(0.94);
      }
      #toTop {
        opacity: 0;
        pointer-events: none;
      }
      #toTop.show {
        opacity: 1;
        pointer-events: auto;
      }
      #fontBtn {
        font-size: 0.82rem;
        letter-spacing: -0.02em;
      }
      #tocFab {
        display: flex;
      }
      @media (min-width: 1500px) {
        #tocFab {
          display: none;
        }
      }
      #tocSheet {
        position: fixed;
        inset: 0;
        z-index: 85;
        display: none;
      }
      #tocSheet.open {
        display: block;
      }
      #tocSheet .ts-mask {
        position: absolute;
        inset: 0;
        background: rgba(12, 42, 30, 0.55);
        border: 0;
        width: 100%;
        cursor: pointer;
      }
      #tocSheet .ts-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 78vh;
        overflow-y: auto;
        background: var(--paper);
        border-top: 3px solid var(--gold);
        padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
        animation: sheetUp 0.25s ease;
      }
      @keyframes sheetUp {
        from {
          transform: translateY(30px);
          opacity: 0;
        }
      }
      #tocSheet .ts-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
      }
      #tocSheet .ts-head b {
        font-family: var(--serif);
        font-size: 1rem;
      }
      #tocSheet .ts-close {
        background: none;
        border: 1px solid var(--line-strong);
        border-radius: 4px;
        width: 34px;
        height: 34px;
        font-size: 1rem;
        cursor: pointer;
        color: var(--ink-soft);
      }
      #tocSheet .ts-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
      }
      #tocSheet .ts-list a {
        display: block;
        border: 1px solid var(--line-strong);
        border-radius: 6px;
        background: var(--card);
        padding: 10px 12px;
        text-decoration: none;
        color: var(--ink);
        font-size: 0.84rem;
        line-height: 1.4;
      }
      #tocSheet .ts-list a span {
        font-family: var(--mono);
        font-size: 0.56rem;
        color: var(--red-ink);
        letter-spacing: 0.12em;
        display: block;
        margin-bottom: 2px;
      }
      #tocSheet .ts-list a.on {
        border-color: var(--gold);
        background: var(--gold-soft);
        font-weight: 700;
      }
      @media (max-width: 400px) {
        #tocSheet .ts-list {
          grid-template-columns: 1fr;
        }
      }

      /* ================= 手機（≤640px） ================= */
      @media (max-width: 640px) {
        html {
          scroll-padding-top: 72px;
        }
        body {
          font-size: 15px;
          line-height: 1.8;
        }
        .wrap,
        .hero,
        .hero-tag,
        .oneliner-in {
          padding-left: 18px;
          padding-right: 18px;
        }
        section {
          padding: 46px 0 18px;
        }
        .hero {
          padding-top: 44px;
          padding-bottom: 40px;
        }
        .hero-meta {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0 14px;
        }
        .hero-meta div {
          margin-right: 0;
          padding-right: 0;
        }
        .hero-meta b {
          font-size: 1.15rem;
        }
        .hero-tag {
          text-align: left;
          margin-top: 0;
        }
        .file-no {
          font-size: 0.64rem;
          letter-spacing: 0.16em;
          padding: 4px 10px;
        }
        .kpi-grid,
        .status-band {
          grid-template-columns: 1fr 1fr;
        }
        .kpi {
          padding: 15px 13px 13px;
        }
        .kpi b {
          font-size: 1.28rem;
        }
        .card {
          padding: 18px 16px;
        }
        .grid4 {
          grid-template-columns: 1fr;
        }
        .sec-head {
          gap: 10px;
        }
        .sec-lede {
          margin-bottom: 24px;
        }
        h3 {
          margin-top: 28px;
        }
        .note,
        .warn {
          padding: 12px 15px;
          font-size: 0.83rem;
        }
        .chart {
          padding: 18px 15px 14px;
        }
        thead th,
        tbody td,
        tbody th[scope="row"] {
          padding: 9px 10px;
        }
        table {
          font-size: 0.8rem;
        }
        .tbl-hint {
          display: block;
        }
        .fstep {
          grid-template-columns: 42px 1fr;
          gap: 13px;
        }
        .fdot {
          width: 42px;
          height: 42px;
          font-size: 0.82rem;
        }
        .fstep::before {
          left: 20px;
          top: 42px;
        }
        .tl-item {
          padding-left: 22px;
          padding-bottom: 24px;
        }
        .quote-band {
          padding: 44px 18px;
        }
        summary {
          padding: 13px 16px;
          font-size: 0.92rem;
        }
        details .ans {
          padding: 14px 16px 16px;
        }
        a.ref {
          padding: 2px 7px;
          min-height: 24px;
          display: inline-flex;
          align-items: center;
        }
      }
      @media (max-width: 380px) {
        .hero-meta,
        .status-band,
        .kpi-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ================= 平板（641–1024px） ================= */
      @media (min-width: 641px) and (max-width: 1024px) {
        .wrap,
        .hero,
        .hero-tag,
        .oneliner-in {
          padding-left: 32px;
          padding-right: 32px;
        }
        .hero {
          padding-top: 60px;
          padding-bottom: 54px;
        }
        section {
          padding: 60px 0 24px;
        }
        .kpi-grid,
        .grid4,
        .status-band,
        .obsmap,
        .glossary {
          grid-template-columns: repeat(2, 1fr);
        }
        .hero-meta div {
          margin-right: 22px;
          padding-right: 22px;
        }
      }
      @media (min-width: 721px) and (max-width: 1024px) {
        .tbl-hint {
          display: block;
        }
      }

      /* ================= 桌機（≥1025px）：長者閱讀友善 ================= */
      @media (min-width: 1025px) {
        html {
          font-size: calc(18px * var(--fz, 1));
        }
        body {
          font-size: 1rem;
          line-height: 1.95;
        }
        :root {
          --ink-soft: #5b4b42;
          --ink-faint: #6b5a4e;
        }
        :root[data-theme="dark"] {
          --ink-soft: #cfc5b8;
          --ink-faint: #ada294;
        }
        .kpi-grid {
          grid-template-columns: repeat(4, 1fr);
        }
        nav.topnav a {
          font-size: 0.84rem;
          padding: 16px 11px;
        }
        .nav-brand {
          font-size: 0.98rem;
        }
        .hero .sub {
          font-size: 1.02rem;
        }
        .oneliner-in p {
          font-size: 1.12rem;
        }
        .sec-lede {
          font-size: 1rem;
          max-width: 820px;
        }
        h3 {
          font-size: 1.2rem;
        }
        h4 {
          font-size: 1.05rem;
        }
        .note,
        .warn {
          font-size: 0.92rem;
          padding: 16px 22px;
          line-height: 1.9;
        }
        .kpi small,
        .status-band small,
        .route p,
        .gterm dd {
          font-size: 0.86rem;
          line-height: 1.8;
        }
        .model-shift p,
        .fbody p,
        .tl-item p {
          font-size: 0.9rem;
          line-height: 1.9;
        }
        .tl-item b {
          font-size: 1.08rem;
        }
        table {
          font-size: 0.9rem;
        }
        thead th {
          font-size: 0.82rem;
          padding: 13px 16px;
        }
        tbody td,
        tbody th[scope="row"] {
          padding: 13px 16px;
        }
        summary {
          font-size: 1.02rem;
          padding: 17px 22px;
        }
        details .ans {
          font-size: 0.94rem;
          line-height: 1.95;
          padding: 17px 22px 20px;
        }
        .faq-filter button {
          font-size: 0.85rem;
          min-height: 42px;
        }
        .tbl-cap,
        .chart-note,
        .pstrip .plg,
        .source-list,
        .vlog > div {
          font-size: 0.86rem;
        }
        .brow .lb {
          font-size: 0.84rem;
        }
        .fin {
          font-size: 0.76rem;
        }
        a.ref {
          font-size: 0.68rem;
          padding: 2px 7px;
        }
        .sitesearch input {
          font-size: 1rem;
        }
        .fabs button,
        .fabs a {
          width: 52px;
          height: 52px;
          font-size: 1.15rem;
        }
        #fontBtn {
          font-size: 0.9rem;
        }
      }
      @media (min-width: 1440px) {
        .wrap,
        .hero,
        .hero-tag,
        .nav-in,
        .oneliner-in {
          max-width: 1120px;
        }
      }

      /* ================= 窄螢幕：表格改為堆疊卡片 ================= */
      @media (max-width: 720px) {
        .model-shift {
          grid-template-columns: 1fr;
        }
        .model-shift > i {
          transform: rotate(90deg);
          justify-self: center;
        }
        .tbl-wrap:has(.stack-table) {
          overflow-x: visible;
        }
        .stack-table,
        .stack-table tbody,
        .stack-table tr,
        .stack-table td,
        .stack-table th[scope="row"] {
          display: block;
          min-width: 0;
          width: 100%;
        }
        .stack-table thead {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
        .stack-table tr {
          padding: 10px 14px;
          border-bottom: 1px solid var(--line-strong);
        }
        .stack-table tr:last-child {
          border-bottom: none;
        }
        .stack-table th[scope="row"] {
          border: 0;
          padding: 4px 0 6px;
          font-size: 1rem;
          white-space: normal;
        }
        .stack-table td {
          border: 0;
          padding: 8px 0 8px 8.5em;
          position: relative;
        }
        .stack-table td::before {
          content: attr(data-lb);
          position: absolute;
          left: 0;
          top: 8px;
          width: 7.8em;
          color: var(--ink-faint);
          font-weight: 700;
          font-size: 0.78rem;
        }
        .tbl-hint {
          display: none;
        }
      }

      /* ================= 列印 ================= */
      @media print {
        nav.topnav,
        #sideNav,
        .fabs,
        #tocSheet,
        .skip-link,
        #readBar,
        .sitesearch,
        .faq-filter,
        .faq-count,
        .tbl-hint {
          display: none !important;
        }
        details.faq-hide {
          display: block !important;
        }
        details,
        details .ans {
          display: block !important;
        }
        details::details-content {
          display: block !important;
          block-size: auto !important;
        }
        body {
          background: #fff;
          font-size: 11pt;
          line-height: 1.7;
        }
        header,
        .quote-band,
        footer,
        thead th {
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }
        section {
          padding: 18px 0;
          page-break-after: always;
          break-after: page;
        }
        section:last-of-type {
          page-break-after: auto;
          break-after: auto;
        }
        .wrap.ledger::before,
        .wrap.ledger::after {
          display: none;
        }
        .card,
        .route,
        .kpi-grid,
        .status-band,
        .pstrip,
        .tbl-wrap,
        .vlog,
        .tl-item,
        .fstep,
        .chart,
        details,
        .gterm {
          box-shadow: none;
          break-inside: avoid;
        }
        a {
          color: inherit;
          text-decoration: none;
        }
        .source-list a::after {
          content: " (" attr(href) ")";
          font-family: var(--mono);
          font-size: 0.72em;
          font-weight: 400;
          word-break: break-all;
        }
        a.ref {
          display: none;
        }
      }

      /* ---------- v22 流暢導航 ---------- */
      :root { --nav-offset: 84px; }
      section, header, [id] { scroll-margin-top: calc(var(--nav-offset) + 14px); }
      nav.topnav a.on { transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease); }
      #tocSheet { transition: opacity .18s var(--ease), visibility .18s; }
      .maturity5 { grid-template-columns: 1fr auto 1fr auto 1fr; }
      .maturity2 { grid-template-columns: 1fr auto 1fr; max-width: 680px; }
      @media (max-width: 760px) {
        .maturity5, .maturity2 { grid-template-columns: 1fr; }
        .maturity5 > i, .maturity2 > i { transform: rotate(90deg); justify-self: center; }
      }
      /* 手機可用性微調：維持原有視覺，只改善觸控與窄螢幕行為 */
      @media (max-width: 640px) {
        html, body { overflow-x: hidden; }
        .sitesearch input { font-size: 16px; }
        button, a, summary { touch-action: manipulation; }
        button, .topnav a, #sideNav a, summary { min-height: 44px; }
      }

      /* CSP-safe data widths and spacing */
      .w-33 { width: 33%; }
      .w-34 { width: 34%; }
      .w-333 { width: 33.3%; }
      .w-507 { width: 50.7%; }
      .w-56 { width: 56%; }
      .w-90 { width: 90%; }
      .w-100 { width: 100%; }
      .sec-lede-spaced { margin-bottom: 18px; }

      @media (prefers-color-scheme: dark) {
        a.ref { color: #f2d08c; }
        .pill.tw { color: #9bd4b9; }
      }
      :root[data-theme="dark"] a.ref { color: #f2d08c; }
      :root[data-theme="dark"] .pill.tw { color: #9bd4b9; }


/* ---------- 溫暖人本視覺系統 ---------- */
.nico{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;margin-right:.42rem;border:1px solid rgba(240,207,120,.42);border-radius:.58rem;color:var(--gold-bright);background:rgba(255,255,255,.07);font-family:var(--serif);font-size:.7rem;font-style:normal;font-weight:800;line-height:1}
nav.topnav a:hover .nico,nav.topnav a:focus-visible .nico,nav.topnav a.on .nico{color:var(--green-deep);border-color:var(--gold-bright);background:var(--gold-bright)}
.hero{min-height:610px}.hero>.file-no,.hero>h1,.hero>.sub,.hero>.thesis{position:relative;z-index:2;max-width:51%}.hero-art{position:absolute;z-index:1;top:144px;right:26px;width:min(47%,500px);margin:0;overflow:hidden;border:1px solid rgba(255,248,238,.42);border-radius:34px 34px 34px 10px;box-shadow:0 26px 60px rgba(7,34,24,.32);transform:rotate(1deg)}.hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 8px rgba(255,255,255,.06);border-radius:inherit}.hero-art img{display:block;width:100%;height:auto}.hero-meta{position:relative;z-index:2;max-width:56%}
.card{border-radius:18px;box-shadow:0 10px 28px rgba(29,55,43,.07);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}.card:hover{transform:translateY(-2px);border-color:rgba(169,113,66,.38);box-shadow:0 16px 38px rgba(29,55,43,.11)}.sec-head h2::after{content:"";display:block;width:3.5rem;height:4px;margin-top:.55rem;border-radius:999px;background:linear-gradient(90deg,var(--gold),transparent)}
@media(max-width:900px){.hero{min-height:auto}.hero>.file-no,.hero>h1,.hero>.sub,.hero>.thesis,.hero-meta{max-width:100%}.hero-art{position:relative;top:auto;right:auto;width:100%;max-width:none;margin:30px 0 8px;border-radius:26px 26px 26px 8px;transform:none}}
@media(max-width:520px){.hero-art{margin-top:24px;border-radius:20px 20px 20px 7px}.hero-art img{width:132%;max-width:none;transform:translateX(-24%)}.card:hover{transform:none}}
body.sheet-open { overflow: hidden; }
/* 浮動工具列：不再整頁內縮（原本會讓主視覺與導覽背景右側出現空白條、手機內文只剩約八成寬）。
   中等寬度只替內容欄保留右側通道；手機改為底部橫向工具列，向下捲動時自動收起。 */
@media screen and (min-width: 901px) and (max-width: 1239px) {
  .wrap { padding-right: 84px; }
  .fabs { right: 12px; }
}
@media screen and (max-width: 900px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .fabs {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    flex-direction: row;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(20, 44, 35, 0.86);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .fabs button, .fabs a { width: 46px; height: 46px; }
  .fabs.fabs-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; }
  #toTop:not(.show) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fabs { transition: none; } }

/* ---- 2026-09-25 補強：螢幕閱讀器專用、點按目標、列印 ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a.ref{display:inline-block;min-height:24px;line-height:22px}
@media print{
  .stamp{display:none!important}
  h2,h3,h4{break-after:avoid;page-break-after:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;word-break:break-all}
  a.ref{border:0;background:none;padding:0;min-height:0}
}
.hero-art picture{display:block}

/* 卷次閱讀模式 */
.chapter-mode main > section[hidden],
.chapter-mode header[hidden] { display: none !important; }
.chapter-mode main > section:not([hidden]) { animation: chapter-enter .22s ease-out; }
@keyframes chapter-enter {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chapter-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 22px 0 8px;
  border-top: 1px solid var(--line-strong);
}
.chapter-pager a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}
.chapter-pager a:hover, .chapter-pager a:focus-visible { text-decoration: underline; }
.chapter-pager span { color: var(--ink-soft); font-size: .88rem; }
@media (prefers-reduced-motion: reduce) {
  .chapter-mode main > section:not([hidden]) { animation: none; }
}
@media print {
  .chapter-mode main > section[hidden], .chapter-mode header[hidden] { display: block !important; }
  .chapter-pager { display: none !important; }
  .chapter-mode main > section:not([hidden]) { animation: none; }
}

/* ---------- v22.2 修正與新增 ---------- */
/* 資料新鮮度提醒（查證日距今超過 45 天才出現） */
footer .freshness {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--gold-bright);
  border-radius: 6px;
  color: #fff4d6;
  background: rgba(240, 207, 120, 0.12);
}
footer .freshness[hidden] { display: none; }

/* 中型桌機（900–1499px）：隱藏導覽圖示字，讓九個卷次完整排入，不再被裁切 */
@media (min-width: 900px) and (max-width: 1499px) {
  nav.topnav a .nico { display: none; }
  nav.topnav a { padding-left: 8px; padding-right: 8px; }
  nav.topnav::after { display: none; }
}
/* 小螢幕：漸層遮罩貼齊導覽列捲動邊緣，提示右側還有項目 */
@media (max-width: 899px) {
  .nav-in {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
  nav.topnav::after { display: none; }
}

/* 搜尋結果：鍵盤聚焦時有明確的左側標記 */
.ss-results button:focus-visible {
  box-shadow: inset 4px 0 0 var(--gold);
}

/* 高對比模式：保留按鈕與卡片邊框 */
@media (forced-colors: active) {
  .fabs button, .fabs a, .ss-hint button, .faq-filter button { border: 1px solid ButtonText; }
  #readBar { background: Highlight; }
}

/* 介面精修預覽：沿用原有色彩與互動，新增編輯式排版。 */
@media screen {
  body { line-height: 1.85; }
  .hero { padding-top: 84px; padding-bottom: 64px; min-height: 650px; }
  .hero h1 { font-size: clamp(2rem, 4.1vw, 3.2rem); line-height: 1.4; }
  .hero h1 .yr { display: block; margin: 12px 0 0; font-size: .38em; }
  .file-no { border-radius: 6px; letter-spacing: .12em; line-height: 1.8; }
  .hero .sub { margin-top: 20px; font-size: .94rem; line-height: 1.9; }
  .hero .thesis { font-size: clamp(1rem, 1.65vw, 1.15rem); font-weight: 500; line-height: 2; border-left-width: 2px; }
  .hero-art { top: 176px; border-radius: 24px; transform: none; background: #f5edde; padding: 12px; }
  .hero-art img { width: 100%; height: auto; transform: none; }
  .hero-art::after { box-shadow: inset 0 0 0 8px rgba(255,255,255,.18); }
  .stamp { border-width: 1px; border-radius: 999px; font-size: .8rem; letter-spacing: .16em; padding: 8px 16px; transform: none; }
  .hero-meta { margin-top: 30px; }
  .sec-head { align-items: center; gap: 18px; margin-bottom: 18px; }
  .sec-no { padding: 7px 12px; border-radius: 6px; letter-spacing: .12em; }
  .sec-lede { line-height: 2; max-width: 780px; }
  h3 { margin-top: 42px; }
  .card { border-color: var(--line); padding: 30px; box-shadow: var(--shadow-paper); }
  .card:hover { transform: none; }
  .kpi-grid { gap: 16px; background: none; border: none; box-shadow: none; overflow: visible; }
  .kpi { position: relative; padding: 22px !important; background: var(--card); border: 1px solid var(--line) !important; border-radius: 18px; }
  .kpi-illustration { display: block; width: 100%; max-width: 142px; height: 104px; object-fit: contain; margin: 0 auto 20px; }
  .kpi .tag { font-size: .72rem; letter-spacing: .08em; }
  .kpi small { line-height: 1.9; margin-top: 12px; }
  .status-band { border-radius: 16px; overflow: hidden; }
  .sitesearch { border-radius: 12px; box-shadow: var(--shadow-1); }
  .ss-hint button { border-radius: 999px; }
  .note, .warn { border-radius: 0 12px 12px 0; line-height: 1.95; }
  details { border-radius: 12px; }
  .nav-icon { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .nico { background: none !important; border: none !important; }
  .ss-ic .nav-icon { width: 20px; height: 20px; }
}
@media screen and (max-width: 900px) {
  .hero { min-height: auto; padding-top: 48px; }
  .hero-art { top: auto; margin: 32px auto 24px; max-width: 540px; border-radius: 20px; }
}
@media screen and (max-width: 640px) {
  .hero { padding-bottom: 36px; }
  .hero h1 { font-size: 2rem; }
  .hero-art { padding: 10px; }
  .hero-art img { width: 100%; transform: none; }
  .card { padding: 22px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 16px !important; }
  .kpi-illustration { height: 86px; margin-bottom: 12px; }
  .kpi b { font-size: 1.6rem; }
  .sec-head { gap: 12px; }
}
@media screen and (max-width: 359px) {
  .kpi-grid { grid-template-columns: 1fr; }
}
@media print {
  .kpi-illustration { width: 90px; height: 66px; }
  .nav-icon { width: 16px; height: 16px; }
}

.site-meta{margin:0 0 24px;color:var(--ink-soft);font-size:.86rem;line-height:1.7}

/* 2026-10-02：手機、平板、電腦章節選單 */
nav.topnav .nav-in{max-width:1400px;overflow:visible;gap:14px;mask-image:none;-webkit-mask-image:none;padding:10px 24px;flex-wrap:wrap}
.nav-brand{flex-shrink:0;padding:6px 16px 6px 0;margin:0}
.nav-chapters{display:flex;flex:1 1 700px;min-width:0;gap:4px;flex-wrap:wrap}
nav.topnav .nav-chapters a{flex:1 1 auto;justify-content:center;min-height:48px;padding:8px 10px;border:1px solid transparent;border-radius:10px;font-size:.84rem;letter-spacing:0}
nav.topnav .nav-chapters a.on{color:#fff4cf;background:rgba(240,207,120,.14);border-color:rgba(240,207,120,.65);box-shadow:inset 0 -3px var(--gold-bright)}
nav.topnav .nav-chapters a:focus-visible,.nav-menu-btn:focus-visible,#tocSheet .ts-list a:focus-visible,#tocSheet .ts-close:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}
nav.topnav::after{display:none}
.nav-menu-btn{display:none;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border:1px solid rgba(240,207,120,.5);border-radius:10px;background:rgba(255,255,255,.06);color:#fff4cf;font:inherit;font-size:.85rem;cursor:pointer}
.nav-menu-symbol{font-size:1.15rem}.nav-current{font-size:.75rem;color:#d7e1d7}
#tocSheet .ts-panel{max-height:85vh;max-height:85dvh;overscroll-behavior:contain;border-radius:24px 24px 0 0;box-shadow:0 -12px 48px rgba(0,0,0,.2)}
#tocSheet .ts-head{gap:16px}#tocSheet .ts-close{width:48px;height:48px;border-radius:12px;flex-shrink:0}
#tocSheet .ts-list a{min-height:60px;border-radius:12px;padding:12px 14px;font-size:.95rem}
#tocSheet .ts-list a.on{border-color:var(--green);box-shadow:inset 4px 0 var(--green)}
#tocSheet .ts-list a.on::after{content:"目前章節";display:block;font-size:.72rem;margin-top:4px;color:var(--ink-soft)}
@media(min-width:601px) and (max-width:1199px){
 nav.topnav .nav-in{gap:8px;padding:8px 20px}.nav-brand{flex:1;border:0}
 .chapter-mode .nav-menu-btn{display:flex}.nav-chapters{flex:0 0 100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 nav.topnav .nav-chapters a{font-size:.83rem;padding:7px 5px;white-space:normal;text-align:center;line-height:1.4}
 nav.topnav .nav-chapters a .nico{display:none}.nav-current{display:none}
 #tocSheet .ts-panel{left:50%;right:auto;bottom:24px;transform:translateX(-50%);width:min(680px,calc(100% - 48px));border-radius:24px;animation:none}
 #tocSheet .ts-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
 nav.topnav .nav-in{padding:8px 14px;gap:8px;align-items:center}.nav-brand{flex:1;border:0;font-size:.85rem;padding:0;white-space:normal;line-height:1.4}.nav-brand small{display:none}
 .chapter-mode .nav-menu-btn{display:flex;flex-direction:row;flex-wrap:wrap;max-width:60%;justify-content:center;gap:4px 8px;font-size:.8rem;min-height:48px}
 .nav-current{flex-basis:100%;text-align:center;font-size:.7rem}.chapter-mode .nav-chapters{display:none}
 .nav-chapters{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 nav.topnav .nav-chapters a .nico{display:none}
 #tocSheet .ts-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#tocSheet .ts-panel{padding:14px 14px calc(20px + env(safe-area-inset-bottom))}
}
@media(min-width:1200px){nav.topnav .nav-chapters a .nico{display:inline-grid}nav.topnav .nav-chapters a .nico{width:1.3rem;height:1.3rem;margin-right:5px;border:0;background:none}}
@media(prefers-reduced-motion:reduce){#tocSheet .ts-panel{animation:none}}
@media print{.nav-menu-btn{display:none!important}}

/* 溫暖閱讀設計預覽：只調整視覺，保留原有功能。 */
@media screen {
 body { line-height: 1.9; }
 .wrap { max-width: 1140px; }
 .sec-head { gap: 16px; margin-bottom: 22px; }
 .sec-head h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.5; letter-spacing: .025em; }
 .sec-head h2::after { width: 48px; height: 3px; background: var(--gold); opacity: .65; }
 .sec-no { border-radius: 8px; padding: 8px 12px; }
 .section-icon { width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; color: var(--green-deep); background: var(--gold-soft); border: 1px solid var(--line); border-radius: 14px; }
 .section-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
 .sec-lede { max-width: 76ch; font-size: 1rem; line-height: 1.95; }
 .hero { padding-top: 64px; padding-bottom: 42px; min-height: 580px; }
 .hero-art { top: 145px; border-radius: 28px 28px 60px 28px; padding: 10px; background: #fff4e5; box-shadow: 0 18px 48px rgba(15,35,27,.18); }
 .hero-art::after { box-shadow: none; }
 .hero-art img { border-radius: 20px 20px 48px 20px; }
 .hero .thesis { line-height: 1.95; border-left-color: #e1ba88; }
 .hero-tag { letter-spacing: .08em; }
 .hero-meta { gap: 12px; }
 .hero-meta > div { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.06); }
 .kpi-grid { gap: 18px; }
 .kpi { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; text-align: left; padding: 24px !important; border-radius: 22px; box-shadow: 0 4px 18px rgba(85,57,36,.035); }
 .kpi-illustration { width: 152px; height: 112px; margin: 0 auto 18px; max-width: 100%; }
 .kpi .tag { letter-spacing: .05em; font-size: .75rem; color: var(--ink-soft); }
 .kpi b { margin-top: 8px; font-size: 1.85rem; line-height: 1.4; }
 .kpi small { font-size: .86rem; line-height: 1.85; }
 .kpi:nth-child(2) { border-top: 3px solid #7b9984 !important; }
 .kpi:nth-child(1) { border-top: 3px solid #c59b6e !important; }
 .kpi:nth-child(3) { border-top: 3px solid #b18c71 !important; }
 .kpi:nth-child(4) { border-top: 3px solid #879776 !important; }
 .card { padding: 28px; border-radius: 20px; box-shadow: 0 6px 22px rgba(60,43,30,.04); }
 .card:hover { transform: none; box-shadow: 0 6px 22px rgba(60,43,30,.06); }
 .note, .warn { padding: 18px 22px; border-radius: 4px 16px 16px 4px; }
 .sitesearch { border-radius: 16px; border-color: var(--line-strong); }
 .ss-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .ss-hint button { padding: 6px 12px; min-height: 36px; }
 details { border-radius: 16px; overflow: clip; margin-bottom: 12px; }
 summary { padding-top: 18px; padding-bottom: 18px; line-height: 1.7; }
 .status-band { border-radius: 18px; }
 .chapter-pager { border-radius: 16px; padding: 18px; background: var(--card); border: 1px solid var(--line); }
 .nav-icon { width: 19px; height: 19px; stroke-width: 1.65; }
 a, button, summary { -webkit-tap-highlight-color: rgba(194,138,69,.15); }
 :focus-visible { outline-offset: 4px; }
}
@media screen and (max-width: 900px) {
 .hero { min-height: auto; padding-top: 38px; }
 .hero-art { top: auto; width: min(100%,520px); margin: 24px auto; }
 .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .card { padding: 22px; }
}
@media screen and (max-width: 600px) {
 .hero { padding-bottom: 28px; }
 .hero h1 { font-size: clamp(1.8rem,7vw,2.2rem); }
 .sec-head { gap: 10px; flex-wrap: wrap; }
 .sec-head h2 { flex: 1 1 180px; }
 .section-icon { width: 36px; height: 36px; flex-basis: 36px; padding: 8px; border-radius: 11px; }
 .sec-no { font-size: .65rem; padding: 6px 8px; }
 .kpi-grid { gap: 10px; }
 .kpi { padding: 16px !important; border-radius: 16px; }
 .kpi-illustration { height: 90px; margin-bottom: 12px; }
 .kpi b { font-size: 1.5rem; }
 .kpi small { font-size: .8rem; }
 .note, .warn { padding: 16px; }
 .hero-meta > div { padding: 8px 10px; }
}
@media screen and (max-width: 359px) { .kpi-grid { grid-template-columns: 1fr; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section-icon { color: var(--ink); } }
[data-theme="dark"] .section-icon { color: var(--ink); }
@media (forced-colors: active) { .section-icon { border-color: CanvasText; } }
@media print { .section-icon { display: none; } }

/* 目前章節圖示跟隨導覽文字色，保持深底對比。 */
nav.topnav a.on .nico { color: inherit; }