/* unify-public-site-nav：選單沿用本頁原本的藍。本頁 var(--blue) 用 10 次、
   var(--green) 用 0 次，後者是未使用的死變數，故主色取 --blue。 */
:root{--nav-accent:var(--blue);--nav-accent-soft:#dbe9f2;
  --subnav-inline:clamp(16px,4vw,48px);--subnav-max:1280px;}
/* 共用頁尾（css/site-footer.css）的主色覆寫。醫師頁：footer 主色藍，與本頁 --nav-accent 同族。
   規則本體在共用檔，本頁只宣告變數；載入順序是共用檔在前、本檔在後。 */
:root{--footer-grad-a:#1c4468;--footer-grad-b:#102941;--footer-ink:#e9f1f9;--footer-ink-rgb:233,241,249;--footer-head:#a9cdec;--footer-z:1;--footer-margin-top:40px;}
    :root {
      --ink: #1e2c3a;
      --ink-2: #2c4258;
      --muted: #54677a;
      --paper: #eef4fa;
      --paper-2: #e2ecf5;
      --surface: rgba(250, 252, 255, .86);
      --line: rgba(52, 104, 156, .18);
      --line-strong: rgba(52, 104, 156, .3);
      --teal: #34689c;
      --green: #2f7a67;
      --blue: #1c527d;
      --blue-2: #143958;
      --amber: #c38722;
      --red: #b85b52;
      --shadow: 0 24px 70px rgba(23, 52, 88, .14);
      --soft-shadow: 0 14px 34px rgba(20, 48, 80, .11);
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 22px;
      --max: 1720px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
      color: var(--ink);
      background:
        linear-gradient(90deg, rgba(16, 132, 124, .035) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(0deg, rgba(16, 132, 124, .035) 1px, transparent 1px) 0 0 / 42px 42px,
        radial-gradient(circle at 16% 12%, rgba(52, 104, 156, .12), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(40, 84, 132, .11), transparent 32%),
        linear-gradient(140deg, #fbfbf7 0%, var(--paper) 52%, #e9f1ef 100%);
    }

    .page {
      min-height: 100vh;
      overflow: hidden;
      position: relative;
    }

    .page::before,
    .page::after {
      content: "";
      position: fixed;
      pointer-events: none;
      z-index: 0;
    }

    .page::before {
      inset: auto -8vw -18vh auto;
      width: 58vw;
      height: 48vh;
      background: linear-gradient(120deg, rgba(52, 104, 156, .16), rgba(40, 84, 132, .08));
      border-radius: 999px 0 0 0;
      filter: blur(32px);
      opacity: .75;
    }

    .page::after {
      left: -12vw;
      top: 36vh;
      width: 42vw;
      height: 28vh;
      border-radius: 50%;
      background: rgba(47, 122, 103, .08);
      filter: blur(28px);
    }

    header {
      width: min(1280px, calc(100% - 72px));
      margin: 24px auto 0;
      padding: 16px 34px;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .62);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .64), rgba(245, 250, 247, .38)),
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .7), transparent 36%);
      box-shadow:
        0 20px 55px rgba(18, 44, 46, .12),
        inset 0 1px 0 rgba(255, 255, 255, .86);
      backdrop-filter: blur(18px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
      color: inherit;
      text-decoration: none;
    }

    .brand:focus-visible {
      outline: 3px solid rgba(16, 132, 124, .28);
      outline-offset: 7px;
      border-radius: 16px;
    }

    .brand img {
      width: 66px;
      height: auto;
      display: block;
    }



    .top-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 17px;
      color: var(--ink-2);
      white-space: nowrap;
      font-weight: 800;
    }

    .top-nav a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      padding: 8px 16px;
      border-radius: 999px;
      color: inherit;
      text-decoration: none;
      transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .top-nav a:not(.cta):hover {
      color: var(--ink);
      background: rgba(255, 255, 255, .58);
      box-shadow: inset -2px -2px 2px rgba(0, 0, 0, .06);
    }

    .top-nav .cta {
      min-height: 44px;
      padding: 8px 20px;
      border: 2px solid rgba(16, 47, 47, .86);
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
      box-shadow: 0 12px 24px rgba(23, 62, 64, .08);
      color: var(--teal);
      font-weight: 900;
    }

    .top-nav .cta:hover {
      background: rgba(255, 255, 255, .88);
      color: var(--ink);
      box-shadow: 0 14px 30px rgba(23, 62, 64, .14);
    }

    .hero {
      width: min(var(--max), calc(100% - 44px));
      margin: 0 auto;
      padding: 58px 0 54px;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(340px, .88fr) minmax(560px, 1.12fr);
      gap: 46px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 36px;
      padding: 7px 13px;
      border-radius: 999px;
      color: var(--blue-2);
      background: rgba(255, 255, 255, .68);
      border: 1px solid var(--line);
      box-shadow: 0 10px 22px rgba(23, 52, 88, .08);
      font-size: 14px;
      font-weight: 800;
    }

    .pulse-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 0 7px rgba(52, 104, 156, .12);
      animation: pulse 2.6s ease-out infinite;
    }

    @keyframes pulse {
      0%, 70%, 100% { box-shadow: 0 0 0 7px rgba(52, 104, 156, .1); }
      35% { box-shadow: 0 0 0 13px rgba(52, 104, 156, 0); }
    }

    h1 {
      margin: 22px 0 0;
      font-size: clamp(40px, 3.85vw, 58px);
      line-height: 1.16;
      letter-spacing: 0;
      font-weight: 900;
      color: #123b3b;
      word-break: keep-all;
      overflow-wrap: normal;
    }

    h1 span {
      display: block;
      white-space: nowrap;
    }

    .hero-lead {
      max-width: 680px;
      margin: 24px 0 0;
      font-size: clamp(18px, 1.45vw, 22px);
      line-height: 1.78;
      color: var(--ink-2);
      font-weight: 600;
    }

    .feature-strip {
      margin: 28px 0 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      max-width: 620px;
    }

    .feature-chip {
      min-height: 58px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, .66);
      border: 1px solid var(--line);
      color: var(--ink-2);
      font-size: 15px;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(30, 60, 98, .07);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 32px;
    }

    .btn {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 22px;
      border-radius: 999px;
      border: 1px solid transparent;
      text-decoration: none;
      font-size: 17px;
      font-weight: 900;
    }

    .btn-primary {
      color: #f7fbf8;
      background: #2d5f8f;
      box-shadow: 0 18px 30px rgba(15, 111, 104, .22);
    }

    .btn-secondary {
      color: var(--blue-2);
      background: rgba(255, 255, 255, .72);
      border-color: var(--line-strong);
    }

    .visual {
      position: relative;
      min-height: 520px;
    }

    .workspace {
      position: absolute;
      inset: 24px 0 auto auto;
      width: min(100%, 690px);
      padding: 18px;
      border-radius: 28px;
      background:
        linear-gradient(150deg, rgba(255,255,255,.92), rgba(246,250,248,.78)),
        linear-gradient(90deg, rgba(52,104,156,.08), transparent);
      border: 1px solid rgba(255, 255, 255, .82);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .workspace::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(40, 84, 132, .05) 1px, transparent 1px) 0 0 / 38px 38px,
        linear-gradient(0deg, rgba(40, 84, 132, .05) 1px, transparent 1px) 0 0 / 38px 38px;
      mask-image: linear-gradient(180deg, black, transparent 88%);
      pointer-events: none;
    }

    .workspace-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 12px 18px;
    }

    .workspace-title strong {
      display: block;
      font-size: 21px;
      color: var(--ink);
    }

    .workspace-title span {
      display: block;
      margin-top: 3px;
      font-size: 13px;
      color: var(--muted);
    }

    .mini-tabs {
      display: inline-flex;
      gap: 6px;
      padding: 5px;
      border-radius: 999px;
      background: rgba(237, 244, 240, .86);
      border: 1px solid rgba(35, 80, 130, .12);
    }

    .mini-tabs span {
      padding: 8px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      color: var(--muted);
    }

    .mini-tabs .active {
      background: #fff;
      color: var(--teal);
      box-shadow: 0 8px 16px rgba(22, 60, 96, .08);
    }

    .workspace-grid {
      position: relative;
      z-index: 1;
    }

    .todo-panel,
    .drawer-panel {
      border: 1px solid rgba(29, 68, 104, .13);
      background: rgba(255,255,255,.76);
      border-radius: 18px;
      box-shadow: 0 14px 30px rgba(20, 50, 84, .08);
    }

    .todo-panel {
      min-height: 294px;
      padding: 15px;
    }

    .panel-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 13px;
      font-weight: 900;
      color: var(--ink);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      background: rgba(52, 104, 156, .11);
      color: var(--teal);
    }

    .task-list {
      margin-top: 14px;
      display: grid;
      gap: 9px;
    }

    .task {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 9px;
      align-items: center;
      padding: 10px;
      border-radius: 12px;
      background: rgba(244, 248, 246, .72);
      color: var(--ink-2);
      font-size: 12px;
      font-weight: 800;
    }

    .task b {
      font-size: 17px;
      color: var(--ink);
    }

    .task-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--teal);
    }

    .task-dot.warn { background: var(--amber); }
    .task-dot.blue { background: var(--blue); }
    .task-dot.red { background: var(--red); }









    /* ===== ② why-section（為什麼用 AIDR） ===== */
    .why-section {
      padding: clamp(34px, 4.5vw, 62px);
      border: 1px solid var(--line);
      border-radius: 30px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(241, 248, 245, .66)),
        radial-gradient(circle at 18% 12%, rgba(52, 104, 156, .08), transparent 32%);
      box-shadow: var(--shadow);
    }
    .why-head { max-width: 760px; margin: 0 auto; text-align: center; }
    .why-head h2 { margin: 12px 0 10px; }
    .why-head h2 span { display: block; }
    .why-head p { color: var(--muted); font-size: 17px; line-height: 1.9; }
    .why-contrast { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 14px; align-items: stretch;
      max-width: 1240px; margin: 30px auto 0; }
    .why-card { border-radius: 20px; padding: 20px 22px; border: 1px solid var(--line);
      background: rgba(255,255,255,.82); box-shadow: 0 18px 38px rgba(20, 50, 84, .08); }
    .why-bad { background: rgba(246, 245, 240, .9); border-color: rgba(0,0,0,.07); }
    .why-title { font-size: 17px; font-weight: 900; margin-bottom: 12px; color: var(--ink); }
    .why-bad .why-title { color: #7c847f; }
    .why-good .why-title { color: var(--teal); }

    .why-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
      border: 1px solid var(--line); border-radius: 13px; padding: 10px 13px; margin-top: 9px;
      background: rgba(251, 255, 254, .9); font-size: 14.5px; font-weight: 700; }
    .why-row b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .why-chip { background: rgba(52, 104, 156, .1); color: var(--teal); border-radius: 999px;
      padding: 3px 9px; font-size: max(.78rem, 14px); font-weight: 900; white-space: nowrap; }
    .why-chip.warn { background: #fdf1d8; color: #a96f00; }
    /* 手機第二批（2026-09-25）：「高風險」用紅色，與醫師端總覽的高風險色一致；#8f1712／#fee4e2 對比約 7.6:1
       （AIDR 對比下限 7:1＝WCAG AAA，Codex #883 R1）。字級同步守 14px 下限（原 12.5px）。 */
    .why-chip.high { background: #fee4e2; color: #8f1712; }
    /* 窄手機：標籤、數值、標記擠一排時，四字標籤被壓成一字一行（320px「風險趨勢」三行、列高 106px）。
       ≤420px 改成標籤獨占一行、數值與標記在下一行，四列排法一致。 */
    @media (max-width: 420px) {
      .why-row { flex-wrap: wrap; row-gap: 4px; }
      .why-row > span:first-child { flex-basis: 100%; }
    }
    /* 平板兩欄（約 721–1000px）示意卡只有 323–363px 寬，「風險趨勢」一樣被擠成一字一行（手機第二批 2a
       測試站驗收 768／820px 實測；正式站 2a 之前就這樣）。改看卡片自己的寬度：卡片內容寬（扣掉左右內距）
       ≤360px（卡片約 ≤406px）就讓標籤獨占一行，不管螢幕多寬；一排最寬的「風險趨勢」列約需 320px，留 40px 餘裕。
       上面 ≤420px 那條留著，給不支援 container query 的舊瀏覽器。 */
    .why-good { container: why-card / inline-size; }
    @container why-card (max-width: 360px) {
      .why-row { flex-wrap: wrap; row-gap: 4px; }
      .why-row > span:first-child { flex-basis: 100%; }
    }
    /* 卡片說明在 320px 只剩「示。」一個字掉到第二行：斷得平均 */
    .why-sub { text-wrap: balance; }
    .why-sub { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 12px; font-weight: 700; }
    .why-mid { display: flex; align-items: center; justify-content: center; }
    .why-mid span { width: 42px; height: 42px; border-radius: 50%; background: var(--teal); color: #fff;
      font-weight: 900; font-size: 18px; display: grid; place-items: center;
      box-shadow: 0 10px 22px rgba(23,127,116,.32); }

    /* ===== ⑦ duty-section（邊界與責任帶） ===== */
    .duty-section { border-radius: 30px; padding: clamp(30px, 4vw, 52px);
      background: linear-gradient(150deg, #153f61, #1c527d);
      color: #eef4f9; box-shadow: var(--shadow); }
    .duty-title { text-align: center; color: #fff; font-size: clamp(24px, 2.6vw, 32px);
      font-weight: 900; margin-bottom: 26px; }
    .duty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1280px; margin: 0 auto; }
    .duty-cell { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
      border-radius: 16px; padding: 20px 22px; }
    .duty-cell svg { width: 26px; height: 26px; stroke: #a9cdec; fill: none; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
    .duty-cell b { display: block; font-size: 17px; color: #fff; margin-bottom: 6px; }
    .duty-cell p { font-size: 14.5px; color: rgba(238,244,249,.82); line-height: 1.75; }

    @media (max-width: 720px) {
      .why-contrast { grid-template-columns: 1fr; }
      .why-mid span { transform: rotate(90deg); }
      .duty-grid { grid-template-columns: 1fr; }
    }
    .sections {
      position: relative;
      z-index: 1;
      width: min(var(--max), calc(100% - 44px));
      margin: 20px auto 92px;
      display: grid;
      gap: 22px;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      padding-top: 22px;
    }

    .section-head h2 {
      margin: 0;
      font-size: clamp(30px, 3.4vw, 46px);
      line-height: 1.15;
      letter-spacing: 0;
      color: var(--ink);
    }

    .section-head p {
      max-width: 520px;
      margin: 0;
      color: var(--ink-2);
      font-size: 17px;
      line-height: 1.75;
      font-weight: 650;
    }









    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 34px;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      border: 1px solid var(--line);
      color: var(--teal);
      font-size: 14px;
      font-weight: 900;
    }

    .section-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 0 7px rgba(52,104,156,.11);
    }















    .home-todo,
    .home-patient-preview {
      min-height: 352px;
      padding: 16px;
      border-radius: 20px;
      border: 1px solid rgba(29,68,104,.12);
      background: rgba(248,251,249,.84);
    }

    .home-panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: var(--ink);
      font-size: 16px;
      font-weight: 900;
    }

    .home-panel-title b {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(52,104,156,.12);
      color: var(--teal);
      font-size: 13px;
    }

    .home-task-list {
      margin-top: 16px;
      display: grid;
      gap: 10px;
    }









    .preview-row {
      padding: 12px;
      border-radius: 15px;
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(29,68,104,.08);
    }

    .preview-row strong {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.35;
      font-weight: 900;
    }

    .preview-row strong span {
      color: var(--teal);
      font-size: 13px;
      white-space: nowrap;
    }

    .preview-row p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
      font-weight: 700;
    }































    .role-chip,
    .status-chip,
    .score-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 999px;
      font-size: 12px;
      line-height: 1.2;
      font-weight: 900;
      white-space: nowrap;
    }

    .role-chip.primary {
      color: var(--teal);
      background: rgba(52,104,156,.12);
    }

    .role-chip.shared {
      color: var(--blue);
      background: rgba(28,82,125,.12);
    }



    .status-chip.waiting {
      color: var(--blue);
      background: rgba(28,82,125,.12);
    }

    .status-chip.warn {
      color: #8f5d0f;
      background: rgba(195,135,34,.15);
    }

    .status-chip.done {
      color: var(--teal);
      background: rgba(52,104,156,.12);
    }















    .record-card {
      width: min(100%, 760px);
      margin-left: auto;
      padding: 18px;
      border-radius: 30px;
      border: 1px solid rgba(255,255,255,.78);
      background: rgba(255,255,255,.84);
      box-shadow: 0 26px 72px rgba(24, 66, 68, .16);
      backdrop-filter: blur(18px);
    }

    .record-id {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 10px 14px;
      border-bottom: 1px solid rgba(29,68,104,.1);
    }

    .record-id strong {
      display: block;
      color: var(--ink);
      font-size: 25px;
      line-height: 1.2;
      font-weight: 900;
    }

    .record-id span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      font-weight: 750;
    }

    .record-light {
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 999px;
      color: #8f5d0f;
      background: rgba(195,135,34,.15);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }























    .record-chart {
      width: 100%;
      height: 130px;
      margin-top: 12px;
      display: block;
    }

























    .referral-status-badge {
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 999px;
      color: var(--blue);
      background: rgba(28,82,125,.12);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

























    .doctor-cta-section {
      padding: clamp(34px, 4.5vw, 60px);
      border-radius: 30px;
      border: 1px solid var(--line);
      background:
        linear-gradient(135deg, rgba(255,255,255,.84), rgba(239,248,245,.72)),
        radial-gradient(circle at 18% 22%, rgba(52,104,156,.12), transparent 30%),
        radial-gradient(circle at 86% 78%, rgba(28,82,125,.08), transparent 36%);
      box-shadow: var(--shadow);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .doctor-cta-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(52,104,156,.04) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(0deg, rgba(52,104,156,.04) 1px, transparent 1px) 0 0 / 40px 40px;
      pointer-events: none;
    }

    .doctor-cta-inner {
      position: relative;
      z-index: 1;
      max-width: 760px;
      margin: 0 auto;
    }

    .doctor-cta-section h2 {
      margin: 0;
      color: var(--ink);
      font-size: clamp(34px, 3.5vw, 48px);
      line-height: 1.18;
      font-weight: 900;
      letter-spacing: 0;
    }

    .doctor-cta-section p {
      max-width: 36em;
      margin: 18px auto 0;
      color: var(--ink-2);
      font-size: clamp(16px, 1.2vw, 18px);
      line-height: 1.75;
      font-weight: 650;
    }

    .doctor-cta-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .doctor-cta-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 12px 22px;
      border-radius: 999px;
      text-decoration: none;
      font-size: 16px;
      font-weight: 900;
      border: 1px solid var(--line-strong);
    }

    .doctor-cta-actions .primary {
      color: #f7fbf8;
      background: var(--blue-2);
      border-color: transparent;
      box-shadow: 0 16px 32px rgba(20,57,88,.22);
    }

    .doctor-cta-actions .secondary {
      color: var(--ink);
      background: rgba(255,255,255,.74);
    }

    .doctor-faq-section {
      padding: clamp(34px, 4.5vw, 58px);
      border-radius: 30px;
      border: 1px solid var(--line);
      background:
        linear-gradient(145deg, rgba(255,255,255,.84), rgba(246,251,249,.74)),
        radial-gradient(circle at 86% 12%, rgba(52,104,156,.1), transparent 30%);
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .doctor-faq-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(52,104,156,.04) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(0deg, rgba(52,104,156,.04) 1px, transparent 1px) 0 0 / 40px 40px;
      pointer-events: none;
    }

    .doctor-faq-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(280px, .82fr) minmax(520px, 1.18fr);
      gap: clamp(28px, 4vw, 54px);
      align-items: start;
    }

    .doctor-faq-copy h2 {
      max-width: 9em;
      margin: 18px 0 0;
      color: var(--ink);
      font-size: clamp(38px, 3.5vw, 50px);
      line-height: 1.16;
      font-weight: 900;
      letter-spacing: 0;
    }

    .doctor-faq-copy h2 span {
      display: block;
      white-space: nowrap;
    }

    .doctor-faq-copy p {
      max-width: 28em;
      margin: 18px 0 0;
      color: var(--ink-2);
      font-size: clamp(16px, 1.12vw, 18px);
      line-height: 1.72;
      font-weight: 650;
    }

    .faq-list {
      display: grid;
      gap: 12px;
    }

    .faq-item {
      padding: 18px 20px;
      border-radius: 18px;
      border: 1px solid rgba(29,68,104,.12);
      border-left: 6px solid rgba(52,104,156,.72);
      background: rgba(255,255,255,.72);
      box-shadow: 0 14px 30px rgba(23,52,88,.07);
    }

    .faq-item:nth-child(1) {
      border-left-color: rgba(195,135,34,.86);
      background: linear-gradient(90deg, rgba(255,248,233,.72), rgba(255,255,255,.74));
    }

    .faq-item:nth-child(even) {
      border-left-color: rgba(28,82,125,.74);
    }

    .faq-item strong {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.35;
      font-weight: 900;
    }

    .faq-item strong::before {
      content: "Q";
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: rgba(52,104,156,.13);
      color: var(--teal);
      font-size: 13px;
      line-height: 1;
      font-weight: 950;
      margin-top: -2px;
    }

    .faq-item:nth-child(1) strong::before {
      background: rgba(195,135,34,.16);
      color: #8f5d0f;
    }

    .faq-item:nth-child(even) strong::before {
      background: rgba(28,82,125,.13);
      color: var(--blue);
    }

    .faq-item p {
      margin: 9px 0 0 42px;
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.72;
      font-weight: 650;
    }

    .faq-item p.note {
      color: #5d4a25;
      font-weight: 800;
    }

    @media (max-width: 1040px) {
      header {
        width: min(100% - 44px, var(--max));
        padding: 14px 22px;
        border-radius: 34px;
      }

      .brand img {
        width: 58px;
      }



      .top-nav {
        gap: 4px;
        font-size: 15px;
      }

      .top-nav a {
        padding: 7px 10px;
      }

      .hero {
        grid-template-columns: 1fr;
        padding-top: 42px;
      }

      .visual {
        min-height: 620px;
      }

      .workspace {
        left: 0;
        margin: 0 auto;
      }

    }

    @media (max-width: 720px) {
      header {
        width: min(100% - 28px, var(--max));
        align-items: flex-start;
        margin-top: 18px;
        padding: 12px 16px;
        border-radius: 28px;
      }

      .brand img {
        width: 58px;
      }

      .brand-text span,
      .top-nav {
        display: none;
      }

      .hero,
      .sections {
        width: min(100% - 28px, var(--max));
      }

      .hero {
        gap: 24px;
        padding-top: 30px;
      }

      h1 {
        font-size: clamp(30px, 8vw, 34px);
        line-height: 1.22;
      }

      .hero-lead {
        font-size: 17px;
      }

      .feature-strip {
        grid-template-columns: 1fr;
      }

      .visual {
        min-height: 0;
      }

      .workspace {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 0;
        padding: 13px;
        transform: none;
      }

      .workspace-top {
        align-items: flex-start;
        flex-direction: column;
      }

      .workspace-grid {
        grid-template-columns: 1fr;
      }



      .section-head {
        display: block;
        padding-top: 0;
      }

      .section-head p {
        margin-top: 12px;
      }













      .home-todo,
      .home-patient-preview {
        min-height: 0;
        padding: 14px;
        border-radius: 18px;
      }













      .role-chip,
      .status-chip,
      .score-chip {
        width: fit-content;
      }











      .record-card {
        width: 100%;
        padding: 13px;
        border-radius: 24px;
      }

      .record-id {
        padding: 8px 8px 13px;
      }

      .record-id strong {
        font-size: 23px;
      }

      .record-light {
        display: none;
      }

















      .referral-status-badge {
        display: none;
      }

      .doctor-cta-section {
        padding: 32px 16px;
        border-radius: 26px;
      }

      .doctor-cta-section h2 {
        font-size: clamp(28px, 7.4vw, 34px);
      }

      .doctor-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .doctor-faq-section {
        padding: 32px 16px;
        border-radius: 26px;
      }

      .doctor-faq-layout {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .doctor-faq-copy h2 {
        font-size: clamp(28px, 7.4vw, 34px);
      }

      .doctor-faq-copy h2 span {
        white-space: normal;
      }

      .faq-item {
        padding: 16px;
      }

      .faq-item p {
        margin-left: 0;
      }
    }



    /* ===== why 區診間實景 ===== */
    .why-scene { position: relative; min-height: 300px; background: #f3f1ec; border-color: rgba(0,0,0,.06); }
    .why-bub { position: absolute; background: #fff; border: 1px solid rgba(0,0,0,.08);
      border-radius: 14px 14px 14px 4px; padding: 9px 15px; color: #5b6773; font-size: 15px;
      box-shadow: 0 10px 22px rgba(0,0,0,.06); white-space: nowrap; }
    .wb1 { left: 8%; top: 24%; transform: rotate(-2deg); }
    .wb2 { right: 6%; top: 45%; transform: rotate(1.5deg); }
    .wb3 { left: 12%; top: 66%; transform: rotate(-1deg); }
    .why-scene-foot { position: absolute; left: 0; right: 0; bottom: 14px; }
    @media (max-width: 720px) {
      .why-bub { position: static; display: inline-block; margin-top: 9px; white-space: normal; }
      .why-scene { min-height: 0; padding-bottom: 52px; }
    }

    /* ===== 門診的一天（直式時間軸） ===== */
    .day-section { padding: clamp(34px, 4.5vw, 62px); border: 1px solid var(--line); border-radius: 30px;
      background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(240, 246, 252, .68)); box-shadow: var(--shadow); }
    .day-head { text-align: center; max-width: 720px; margin: 0 auto 6px; }
    .day-head h2 span { display: block; }
    .dayline { position: relative; max-width: 860px; margin: 30px auto 0; padding-left: 150px; }
    .dayline::before { content: ""; position: absolute; left: 104px; top: 8px; bottom: 8px; width: 3px;
      border-radius: 3px; background: linear-gradient(180deg, #7fb0dc, var(--teal)); }
    .day-stop { position: relative; margin-bottom: 22px; }
    .day-stop::before { content: ""; position: absolute; left: -52px; top: 30px; width: 15px; height: 15px;
      border-radius: 50%; background: #fff; border: 4px solid var(--teal); box-shadow: 0 0 0 5px rgba(52,104,156,.15); }
    .day-when { position: absolute; left: -150px; top: 24px; width: 84px; text-align: right;
      font-weight: 900; color: var(--blue); font-size: 17px; font-variant-numeric: tabular-nums; }
    .day-when small { display: block; font-weight: 700; color: var(--muted); font-size: 12.5px; }
    .day-card { background: #fff; border: 1px solid var(--line); border-radius: 18px;
      box-shadow: 0 16px 36px rgba(29, 68, 104, .1); padding: 20px 26px; }
    .day-card h3 { font-size: 19px; font-weight: 900; margin: 7px 0 5px; color: var(--ink); }
    .day-card p { color: var(--muted); font-size: 15.5px; line-height: 1.8; }
    .day-chip { display: inline-block; background: #dcE9f5; color: var(--blue);
      border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 900; }
    .day-dark { background: linear-gradient(150deg, #20486e, #2f5f92); border-color: transparent; }
    .day-dark h3 { color: #fff; }
    .day-dark p { color: rgba(234, 242, 250, .88); }
    .day-dark .day-chip { background: rgba(255,255,255,.16); color: #dcecfa; }
    @media (max-width: 720px) {
      .dayline { padding-left: 26px; }
      .dayline::before { left: 5px; }
      .day-stop::before { left: -27px; top: 8px; }
      .day-when { position: static; text-align: left; width: auto; margin-bottom: 6px; display: block; }
      .day-when small { display: inline; margin-left: 6px; }
      .day-card { padding: 16px 18px; }
    }

    /* ===== 滿版色帶（拿掉區塊外框，同首頁手法） ===== */
    .sections { width: 100%; max-width: none; gap: 0; margin: 28px 0 0; }
    .sections > div {
      border: 0; border-radius: 0; box-shadow: none;
      padding-left: clamp(22px, 5vw, 90px); padding-right: clamp(22px, 5vw, 90px);
      padding-top: clamp(44px, 5.5vw, 76px); padding-bottom: clamp(44px, 5.5vw, 76px);
    }
    .sections > div::before { display: none; }
    .why-section { background: rgba(255, 255, 255, .62); }
    .day-section { background: transparent; }
    .duty-section { background: linear-gradient(150deg, #173a5c, #2a5686); }
    .doctor-faq-section { background: rgba(255, 255, 255, .62); }
    .doctor-cta-section { background: transparent; }
    .doctor-faq-layout, .doctor-cta-inner { max-width: 1720px; margin-left: auto; margin-right: auto; }
    .why-contrast, .duty-grid { max-width: 1280px; }