/* ═══════════════════════════════════════════════════════════════
   補教契約線上簽署平台 — 全站共用樣式
   風格：深藍專業風
   ═══════════════════════════════════════════════════════════════ */

:root{
  --navy-900:#12314d;
  --navy-800:#1a3d5c;
  --navy-700:#1f4e79;
  --navy-600:#2b6198;
  --navy-100:#dce6f1;
  --navy-050:#eff4f9;

  --ink-900:#152838;
  --ink-700:#334e68;
  --ink-500:#627d98;
  --ink-300:#9fb3c8;
  --line:#e2e8f0;
  --bg:#f4f6f9;

  --ok-fg:#1a7f45;  --ok-bg:#e3f5e9;
  --warn-fg:#8a6100; --warn-bg:#fdf3d8;
  --bad-fg:#a12622; --bad-bg:#fbe4e3;

  --radius:10px;
  --shadow:0 1px 3px rgba(18,49,77,.08), 0 4px 16px rgba(18,49,77,.06);
  --font:"Microsoft JhengHei","PingFang TC","Noto Sans TC","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink-900);
     font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}

a{color:var(--navy-700);text-decoration:none}
a:hover{text-decoration:underline}

/* ── 頁首 ──────────────────────────────────────────────────── */
.topbar{background:var(--navy-800);color:#fff;padding:0 24px;
        display:flex;align-items:center;justify-content:space-between;
        height:60px;box-shadow:0 2px 8px rgba(18,49,77,.15)}
.topbar .brand{font-size:17px;font-weight:bold;color:#fff;letter-spacing:.5px;
                display:flex;align-items:center;gap:11px}
.topbar .brand:hover{text-decoration:none;opacity:.9}
.topbar .brand small{display:block;font-size:11px;font-weight:normal;
                     opacity:.65;letter-spacing:1px;margin-top:-4px}
.brand-mark{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#fff;padding:2px}
.topbar nav{display:flex;align-items:center;gap:20px;font-size:14px}
.topbar nav a{color:rgba(255,255,255,.85)}
.topbar nav a:hover{color:#fff;text-decoration:none}
.topbar .who{color:rgba(255,255,255,.6);font-size:13px}
.topbar .who b{color:#fff;font-weight:600}

/* ── 版面 ──────────────────────────────────────────────────── */
.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 60px}
.wrap-narrow{max-width:520px;margin:0 auto;padding:44px 20px 60px}

h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:30px 0 12px;padding-left:11px;
   border-left:4px solid var(--navy-700);color:var(--navy-700)}
.lead{color:var(--ink-500);font-size:14px;margin:0 0 24px}

/* ── 卡片 ──────────────────────────────────────────────────── */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
      padding:26px 28px;margin-bottom:20px}
.card h2:first-child{margin-top:0}
.card-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.card-head h1{margin:0}

/* ── 統計磚 ────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:26px}
.tile{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;
      border-top:3px solid var(--navy-700)}
.tile .n{font-size:30px;font-weight:bold;color:var(--navy-800);line-height:1.2}
.tile .t{font-size:13px;color:var(--ink-500);margin-top:2px}
.tile.alert{border-top-color:#c9821a}
.tile.alert .n{color:#8a6100}

/* ── 表單 ──────────────────────────────────────────────────── */
.field{margin-bottom:17px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;color:var(--ink-700)}
.field label .req{color:#a12622;margin-left:3px}
.field .hint{font-size:12.5px;color:var(--ink-300);margin-top:5px;line-height:1.6}
input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea{
  width:100%;padding:10px 13px;border:1px solid #cbd6e2;border-radius:7px;
  font-family:var(--font);font-size:14.5px;color:var(--ink-900);background:#fff;transition:.15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-600);
  box-shadow:0 0 0 3px rgba(43,97,152,.13)}
input::placeholder{color:#b7c4d3}
textarea{min-height:110px;resize:vertical;line-height:1.7}

.btn{display:inline-block;padding:10px 22px;border:none;border-radius:7px;
     font-family:var(--font);font-size:14.5px;font-weight:600;cursor:pointer;transition:.15s}
.btn-primary{background:var(--navy-700);color:#fff}
.btn-primary:hover{background:var(--navy-800);text-decoration:none}
.btn-ghost{background:#fff;color:var(--navy-700);border:1px solid #cbd6e2}
.btn-ghost:hover{background:var(--navy-050);text-decoration:none}
.btn-danger{background:#fff;color:var(--bad-fg);border:1px solid #e8bfbd}
.btn-danger:hover{background:var(--bad-bg);text-decoration:none}
.btn-sm{padding:5px 13px;font-size:13px}
.btn-block{display:block;width:100%;text-align:center}

/* ── 訊息 ──────────────────────────────────────────────────── */
.msg{padding:13px 17px;border-radius:8px;margin-bottom:20px;font-size:14px;border-left:4px solid}
.msg-ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-fg)}
.msg-bad{background:var(--bad-bg);color:var(--bad-fg);border-color:var(--bad-fg)}
.msg-warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-fg)}
.msg-info{background:var(--navy-050);color:var(--navy-700);border-color:var(--navy-600)}
.msg b{display:block;margin-bottom:3px}

/* ── 表格 ──────────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.data th{background:var(--navy-100);color:var(--navy-700);text-align:left;
              padding:11px 13px;font-size:13px;font-weight:600;white-space:nowrap}
table.data td{padding:12px 13px;border-top:1px solid var(--line);vertical-align:middle}
table.data tr:hover td{background:var(--navy-050)}
table.data .num{font-family:Consolas,monospace;color:var(--ink-700)}

.pill{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill-warn{background:var(--warn-bg);color:var(--warn-fg)}
.pill-bad{background:var(--bad-bg);color:var(--bad-fg)}
.pill-mute{background:#eceff3;color:var(--ink-500)}

.empty{text-align:center;padding:52px 20px;color:var(--ink-300)}
.empty .big{font-size:15px;color:var(--ink-500);margin-bottom:6px}

/* ── 頁尾 ──────────────────────────────────────────────────── */
.foot{text-align:center;color:var(--ink-300);font-size:12.5px;padding:34px 20px 44px;line-height:1.9;
       border-top:1px solid var(--line);margin-top:40px}
.foot a{color:var(--ink-500)}
.foot-brand{display:flex;align-items:center;justify-content:center;gap:9px;
            color:var(--ink-500);font-size:13.5px;font-weight:600;margin-bottom:10px}
.foot-brand img{border-radius:50%;flex:0 0 34px}
.foot-copy{color:var(--ink-500);font-size:13px;margin-bottom:9px}
.foot-note{max-width:620px;margin:0 auto;font-size:12px;line-height:1.85;color:var(--ink-300)}

/* ── 首頁 ──────────────────────────────────────────────────── */
.hero{background:linear-gradient(160deg,var(--navy-800),var(--navy-900));color:#fff;
      padding:70px 20px 64px;text-align:center}
.hero h1{font-size:31px;margin:0 0 12px;color:#fff;letter-spacing:.5px}
.hero p{font-size:15.5px;color:rgba(255,255,255,.78);max-width:560px;margin:0 auto 30px;line-height:1.9}
.hero .btn-primary{background:#fff;color:var(--navy-800)}
.hero .btn-primary:hover{background:var(--navy-050)}
.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:36px 0}
.feature{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.feature h3{margin:0 0 8px;font-size:15.5px;color:var(--navy-700)}
.feature p{margin:0;font-size:13.5px;color:var(--ink-500);line-height:1.8}

@media (max-width:640px){
  .topbar{padding:0 14px;height:54px}
  .topbar .who{display:none}
  .wrap{padding:20px 14px 50px}
  .card{padding:20px 18px}
  .hero{padding:50px 18px 46px}
  .hero h1{font-size:24px}
}

/* ── 契約內容顯示（後台檢視與前台簽署頁共用）─────────────── */
.contract-body{font-size:15px;line-height:1.95;color:var(--ink-900)}
.contract-body h2{font-size:19px;color:var(--navy-700);border-left:4px solid var(--navy-700);
                  padding-left:11px;margin:30px 0 13px}
.contract-body h2:first-child{margin-top:0}
.contract-body h3{font-size:16.5px;color:var(--navy-800);margin:22px 0 9px;border:none;padding:0}
.contract-body h4{font-size:15px;color:var(--ink-700);margin:17px 0 7px}
.contract-body p{margin:0 0 13px}
.contract-body ul,.contract-body ol{margin:0 0 14px;padding-left:26px}
.contract-body li{margin-bottom:7px}
.contract-body table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px}
.contract-body th,.contract-body td{border:1px solid #b9c6d4;padding:9px 11px}
.contract-body th{background:var(--navy-100);color:var(--navy-700);font-weight:600}
.contract-body blockquote{border-left:3px solid #cbd6e2;margin:16px 0;padding:8px 16px;
                          color:var(--ink-500);background:#f7f9fb;border-radius:0 6px 6px 0}
.contract-body blockquote p:last-child{margin-bottom:0}
.contract-body img{max-width:100%;height:auto}
.contract-body a{color:var(--navy-700);text-decoration:underline}

/* ═══════════════════════════════════════════════════════════
   簽署頁
   ═══════════════════════════════════════════════════════════ */

.sign-top{background:linear-gradient(160deg,var(--navy-800),var(--navy-900));color:#fff;padding:30px 20px 26px}
.sign-top-in{max-width:820px;margin:0 auto}
.sign-top .sc{font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.5px;margin-bottom:5px}
.sign-top h1{font-size:23px;margin:0 0 6px;color:#fff;line-height:1.45}
.sign-top .ct{font-size:12.5px;color:rgba(255,255,255,.6)}

/* 步驟指示 */
.steps{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 22px;flex-wrap:wrap;font-size:13px}
.steps li{display:flex;align-items:center;gap:7px;color:var(--ink-300);padding:6px 14px 6px 6px;
          background:#fff;border-radius:30px;box-shadow:var(--shadow)}
.steps li .dot{width:22px;height:22px;border-radius:50%;background:#eceff3;color:var(--ink-300);
               font-size:12px;font-weight:bold;display:flex;align-items:center;justify-content:center}
.steps li.now{color:var(--navy-700);font-weight:600}
.steps li.now .dot{background:var(--navy-700);color:#fff}
.steps li.past{color:var(--ok-fg)}
.steps li.past .dot{background:var(--ok-bg);color:var(--ok-fg)}

/* 驗證碼輸入 */
.otp-input{font-size:28px;letter-spacing:14px;text-align:center;font-family:Consolas,monospace;
           padding:14px 10px}
.otp-input::placeholder{letter-spacing:14px;color:#dbe2ea}

/* 契約捲動區 */
.contract-scroll{max-height:min(62vh,620px);overflow-y:auto;border:1px solid var(--line);
                 border-radius:9px;padding:24px 26px;background:#fff;
                 -webkit-overflow-scrolling:touch}
.contract-scroll::-webkit-scrollbar{width:11px}
.contract-scroll::-webkit-scrollbar-thumb{background:#c8d3df;border-radius:6px;border:3px solid #fff}
.scroll-hint{text-align:center;font-size:13px;color:#8a6100;background:var(--warn-bg);
             padding:9px;border-radius:0 0 8px 8px;margin:-2px 0 0}
.scroll-hint.done{color:var(--ok-fg);background:var(--ok-bg)}

/* 簽名區 */
#signCard{position:relative}
.lock-veil{position:absolute;inset:0;background:rgba(244,246,249,.86);border-radius:var(--radius);
           display:flex;align-items:center;justify-content:center;z-index:5;
           color:var(--ink-500);font-size:14.5px;font-weight:600;backdrop-filter:blur(1.5px)}
.sigwrap{position:relative;border:2px dashed #cbd6e2;border-radius:9px;background:#fcfdfe;
         height:190px;touch-action:none;overscroll-behavior:contain}
.sigwrap canvas{width:100%;height:100%;display:block;touch-action:none;border-radius:9px}
.sigline{position:absolute;left:8%;right:8%;bottom:44px;border-bottom:1px solid #dbe2ea;pointer-events:none}
.sigtip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
        color:#c3cedb;font-size:15px;pointer-events:none}

/* 完成畫面 */
.big-tick{width:66px;height:66px;border-radius:50%;background:var(--ok-bg);color:var(--ok-fg);
          font-size:32px;line-height:66px;margin:0 auto 18px}
.done-lead{max-width:340px;margin:0 auto 22px;color:var(--ink-500);font-size:14.5px;line-height:1.85}
table.receipt{width:100%;max-width:520px;margin:0 auto;border-collapse:collapse;
              font-size:14px;text-align:left;table-layout:fixed}
table.receipt td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;
                 overflow-wrap:anywhere;word-break:break-word}
table.receipt td:first-child{color:var(--ink-500);width:32%;white-space:nowrap}
table.receipt tr:last-child td{border-bottom:none}

/* 手機：改成標籤在上、內容在下的堆疊排法，長字串才不會撐破版面 */
@media (max-width:560px){
  table.receipt,table.receipt tbody,table.receipt tr,table.receipt td{display:block;width:100%}
  table.receipt{table-layout:auto}
  table.receipt tr{padding:11px 0;border-bottom:1px solid var(--line)}
  table.receipt tr:last-child{border-bottom:none}
  table.receipt td{padding:0;border:none}
  table.receipt td:first-child{width:auto;font-size:12.5px;color:var(--ink-300);
                               margin-bottom:3px;white-space:normal}
  table.receipt td:last-child{font-size:14.5px;line-height:1.6}
}

@media (max-width:640px){
  .sign-top{padding:22px 16px 20px}
  .sign-top h1{font-size:19px}
  .contract-scroll{padding:18px 16px;max-height:58vh}
  .otp-input{font-size:24px;letter-spacing:10px}
  .steps{font-size:12px}
  .steps li{padding:5px 11px 5px 5px}
}

/* 全螢幕簽名 */
.sig-overlay{display:none;position:fixed;inset:0;z-index:9999;background:#fff;
             flex-direction:column;touch-action:none;overscroll-behavior:none}
.sig-overlay-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
                 padding:12px 14px;background:var(--navy-800);color:#fff;font-size:14.5px;flex:0 0 auto}
.sig-overlay-bar .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.sig-overlay-bar .btn-primary{background:#fff;color:var(--navy-800)}
.sig-overlay-pad{position:relative;flex:1 1 auto;margin:12px;border:2px dashed #cbd6e2;
                 border-radius:10px;background:#fcfdfe;min-height:0}
.sig-overlay-pad canvas{width:100%;height:100%;display:block;touch-action:none;border-radius:10px}
.sig-overlay-line{position:absolute;left:6%;right:6%;bottom:22%;border-bottom:1px solid #dbe2ea;
                  pointer-events:none}
.sig-overlay-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
                  padding:0 16px 16px;flex:0 0 auto}

@media (max-width:640px){
  .sigwrap{height:220px}
}

/* 完成／已簽署 頁面的卡片 */
.done-card{text-align:center;padding:40px 28px}
@media (max-width:560px){
  .done-card{padding:30px 18px}
}

@media (max-width:640px){
  .brand-mark{width:32px;height:32px;flex:0 0 32px}
  .topbar .brand{font-size:15px;gap:8px}
  .foot{padding:28px 16px 36px}
  .foot-note{font-size:11.5px}
}

/* 首頁標誌 */
.hero-mark{width:132px;height:132px;display:block;margin:0 auto 20px;
           background:#fff;border-radius:50%;padding:5px;
           box-shadow:0 6px 22px rgba(0,0,0,.18)}
@media (max-width:640px){ .hero-mark{width:104px;height:104px;margin-bottom:16px} }

/* 停用中的按鈕：明顯變灰、游標變禁止。
   用於「未勾選同意條款」時的送出鈕。這只是視覺提醒，
   真正的把關在後端 —— 使用者關掉 JavaScript 一樣送得出來，
   所以 register.php 的伺服器端驗證絕不能拿掉。 */
.btn:disabled,
.btn[disabled] {
    background: #cfd9e3;
    border-color: #cfd9e3;
    color: #8095aa;
    cursor: not-allowed;
    box-shadow: none;
}
.btn:disabled:hover,
.btn[disabled]:hover {
    background: #cfd9e3;
    border-color: #cfd9e3;
}