/* * 註冊前同意元件（registration-consent-gate，#1542；#1535 第二件的 LINE 最後一步、醫師同意頁也會用）。 * 一個大勾選框＋一顆主按鈕；沒勾就按用紅字提示，不把按鈕變灰（年長者看到灰按鈕以為壞了）。 * #1535 Wayne 11/04 照原型：「同意書重點」直接放在頁面上（.rc-points-box，不再開底部視窗）、「看完整同意書」原地展開； * 同意頁與註冊表上方不放進度列（11/04 先做、同日窗口 Wenny 回饋像好幾個入口而拿掉）。 * 必填記號 .dre-required-dot 在這裡放大成紅色粗體「*」（主樣式在 doctor-register-edit.css——那支已超過行數上限不能再長；本檔排在它後面載入）。 * 顏色走 patient-consent.css 的 --pc-primary（醫師頁自動用醫師藍）。只用 .rc-* 類別，不影響其他頁。 * 另外收註冊表（同一條註冊流程）的小樣式：醫師註冊表頂部按鈕手機格子（.reg-topnav，主樣式在 doctor-register-edit.css——那支已超過行數上限不能再長）、 * 民眾註冊表上方（返回小字、標題、LINE 鈕、分隔線）與送出鈕下方「已經有帳號？登入」。 */ .rc-form { display: grid; gap: 12px; margin: 18px 0 6px; } .rc-check { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 2px solid #c9d6d1; border-radius: 14px; background: #fff; cursor: pointer; font-size: 19px; line-height: 1.55; color: #1f2a26; } .rc-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rc-box { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 1px; border: 2px solid var(--pc-primary, #2E6B57); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; } .rc-box svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .rc-check input:checked + .rc-box { background: var(--pc-primary, #2E6B57); } .rc-check input:checked + .rc-box svg { opacity: 1; } .rc-check input:focus-visible + .rc-box { outline: 3px solid #f2b705; outline-offset: 2px; } .rc-check:has(input:checked) { border-color: var(--pc-primary, #2E6B57); background: var(--pc-primary-soft, #F6FAF7); } .rc-form.is-error .rc-check { border-color: #c0392b; background: #fff6f5; } .rc-err { margin: 0 2px; color: #b03a2e; font-size: 18px; font-weight: 700; } .rc-err[hidden] { display: none; } .rc-done { margin: 4px 0 12px; font-size: 18px; line-height: 1.6; font-weight: 700; color: var(--pc-primary, #2E6B57); } /* LINE 情境說明（#1535，Wayne 11/04，照原型站 /a/start/）：已授權 LINE、或按「用 LINE 註冊」被同意擋下來時，在同意書重點上面多一行；一般免費註冊沒有這行。 */ .pc-pane .rc-context-note { margin: 16px 0 0; text-align: center; color: #1f2a26; font-size: calc(18px * var(--aidr-fz, 1)); line-height: 1.6; font-weight: 700; } /* 前綴 .pc-pane：壓過 patient-consent.css 的 .pc-pane p 色與間距 */ /* 同意書重點（#1535，Wayne 11/04 照原型 #mock-consent）：淡底框、標題、兩句重點、下面「看完整同意書」原地展開。 兩句重點沿用 #1304 原句與盾牌勾圖示；全文區塊限高可捲，避免長條文把勾選框推到很下面。 */ .rc-points-box { margin: 16px 0 0; padding: 14px 16px 6px; border: 1.5px solid var(--color-patient-tint-deep, #CBE4D9); border-radius: 14px; background: var(--pc-primary-soft, #F6FAF7); } .rc-points-title { margin: 0 0 4px; font-size: calc(19px * var(--aidr-fz, 1)); line-height: 1.4; font-weight: 800; color: #1f2a26; } .rc-points { list-style: none; margin: 0; padding: 0; } .rc-points li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e3ece7; font-size: calc(18px * var(--aidr-fz, 1)); line-height: 1.6; color: #2b3632; } .rc-points li:last-child { border-bottom: 0; } .rc-points svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 3px; fill: none; stroke: var(--pc-primary, #2E6B57); stroke-width: 2; } .rc-full { margin: 2px 0 0; font-size: calc(16px * var(--aidr-fz, 1)); line-height: 1.7; color: #3a4742; } .rc-full summary { min-height: 48px; display: flex; align-items: center; gap: 6px; font-size: calc(18px * var(--aidr-fz, 1)); line-height: 1.4; font-weight: 700; color: var(--pc-primary, #2E6B57); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .rc-full summary:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; border-radius: 6px; } .rc-full-body { max-height: 40vh; overflow: auto; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #e3e9e6; border-radius: 10px; background: #fff; } /* 選身分頁「請問您是？」（/register，#1535 甲-1 照原型 d2b）：兩張實心大卡片，民眾主色／醫師主色。 電腦上並排、整組最寬 720 置中；手機（寬度放不下兩張 240）自動上下排。 */ .rc-role-title, .rc-role-lead { text-align: center; } .rc-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 720px; margin: 18px auto 6px; } .rc-role { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-height: 120px; padding: 18px 16px; border-radius: 16px; background: var(--color-patient-primary, #2E6B57); color: #fff; text-align: center; text-decoration: none; box-sizing: border-box; } .rc-role--doctor { background: var(--color-doctor-primary, #264E73); } .rc-role-name { font-size: calc(24px * var(--aidr-fz, 1)); font-weight: 800; line-height: 1.3; } .pc-pane .rc-role p { margin: 0; color: #fff; font-size: calc(17px * var(--aidr-fz, 1)); font-weight: 500; opacity: .92; line-height: 1.45; } .rc-role:hover { filter: brightness(1.1); } .rc-role:focus-visible { outline: 3px solid #f2b705; outline-offset: 3px; } /* 醫師註冊表頂部按鈕（#1535，Wayne 11/03 iPhone 390 實看排版跑掉）：手機寬度改成 2 欄等寬格子—— 第一列 返回上一頁｜切換為民眾，第二列 已有帳號？登入（三顆時最後一顆橫跨兩欄，不留空洞）；中間的撐開元素在格子裡用不到。 民眾註冊表上方已改成返回小字＋LINE 鈕（見下一段），不用 .reg-topnav。 寬螢幕維持 doctor-register-edit.css 的一列（返回靠左、其餘靠右）。本檔排在它後面載入，只改排版、不動字級。 */ @media (max-width: 640px) { .reg-topnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10, 10px); } .reg-topnav .reg-sp { display: none; } .reg-topnav a { justify-content: center; text-align: center; min-width: 0; min-height: 48px; padding: 0 var(--space-10, 10px); } .reg-topnav > a:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; } } /* 民眾註冊表上方（#1535，Wayne 11/03：「保留一個 line 我沒意見，但不要寫最快」；11/04 照原型 #mock-form）：左上「← 返回上一頁」小字（無外框）、 標題「免費註冊」＋兩步進度列、一顆滿版「用 LINE 註冊」（下面不放說明）、分隔線「或填寫以下資料」； 送出鈕下方一行「已經有帳號？登入」（全頁只有這一處）。 LINE 鈕底色用民眾深綠 token（10/24 Wayne 定案 B「深綠白字、純文字、不放 LINE 商標」）：官方 LINE 綠 #06C755 配白字只有約 2.2:1。 */ .reg-backbar { margin: 0 0 var(--space-12, 12px); } .reg-back-link { display: inline-flex; align-items: center; gap: var(--space-8, 8px); min-height: 44px; color: var(--color-patient-primary, #2E6B57); font-size: var(--text-base, 1.6rem); font-weight: 700; line-height: 1.4; text-decoration: none; } .reg-back-link:hover { text-decoration: underline; text-underline-offset: 3px; } .reg-title { margin: 0 0 var(--space-12, 12px); color: #1f2a26; font-size: calc(26px * var(--aidr-fz, 1)); line-height: 1.35; font-weight: 800; } .reg-line-cta { margin: 0 0 var(--space-16, 16px); } .reg-line-btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 56px; padding: var(--space-12, 12px) var(--space-16, 16px); border-radius: var(--radius-12, 12px); background: var(--color-patient-primary-ink, #1F4D3E); color: var(--color-bg-card, #fff); font-size: var(--text-lg, 1.8rem); font-weight: 800; line-height: 1.3; text-align: center; text-decoration: none; } .reg-line-btn:visited { color: var(--color-bg-card, #fff); } .reg-line-btn:hover { background: var(--color-patient-primary-hover, #27604E); color: var(--color-bg-card, #fff); } .reg-or-divider { display: flex; align-items: center; gap: var(--space-12, 12px); margin: var(--space-16, 16px) 0 0; color: var(--color-text-secondary, #374151); font-size: var(--text-base, 1.6rem); line-height: 1.4; } .reg-or-divider::before, .reg-or-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--color-border-light, #90949A); } .reg-signin-row { margin: var(--space-16, 16px) 0 0; color: var(--color-text-secondary, #374151); font-size: var(--text-base, 1.6rem); line-height: 1.5; text-align: center; } .reg-signin-row a { color: var(--color-patient-primary, #2E6B57); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .reg-back-link:focus-visible, .reg-line-btn:focus-visible, .reg-signin-row a:focus-visible { outline: 3px solid var(--color-patient-primary-ink, #1F4D3E); outline-offset: 3px; } @media (min-width: 1024px) { .reg-title { font-size: calc(30px * var(--aidr-fz, 1)); line-height: 1.3; } } /* 必填記號（#1535，窗口 Wenny 11/04：原本的紅點太小看不到；Wayne 同日「星號再大」）：民眾與醫師註冊表共用的 .dre-required-dot 改成紅色粗體「*」、2 倍字級（跟原型站同值），line-height:0 加 vertical-align 讓星號跟標籤字一樣高、不撐開行高，標籤與輸入框間距不變。 只改長相：模板裡的