/* ============================================================
         台灣身障制度變遷 · 卷宗式單頁
         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; }
/* Reserve a separate lane for fixed controls on narrow screens. */
@media screen and (max-width: 1499px) {
  body { padding-inline-end: 76px; }
  .fabs { right: 12px; }
}

/* 卷次閱讀模式 */
.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; }
}