/* =========================================================
   禾宇合署會計師事務所 — 共用樣式
   對齊 heyucpa.com.tw 官網視覺：暖米白底、寶藍標題、磚紅強調、白卡大圓角
   ========================================================= */

:root {
    /* 原始配色（維持原本風格，未變動） */
    --cream:        #f1f5f9;   /* 頁面底（原本的淺灰藍） */
    --cream-deep:   #e2e8f0;   /* 次層底色 */
    --paper:        #ffffff;   /* 卡片白 */
    --blue:         #1e293b;   /* 主標題深板岩藍（原本的標題色） */
    --blue-deep:    #1e293b;
    --blue-soft:    #f0f7ff;   /* 淡藍底 */
    --brick:        #3b82f6;   /* 強調／主 CTA（原本的藍） */
    --brick-soft:   #f0f7ff;   /* 淡藍底（提醒框） */
    --gold:         #64748b;   /* 次要標籤（灰） */
    --ink:          #1e293b;   /* 內文 */
    --ink-soft:     #64748b;   /* 次要文字 */
    --line:         #e2e8f0;   /* 柔和框線 */
    --line-strong:  #cbd5e1;   /* 強框線 */

    --radius:       8px;
    --radius-lg:    12px;
    --shadow:       0 4px 14px rgba(30, 41, 59, 0.06);
    --shadow-lift:  0 10px 28px rgba(30, 41, 59, 0.10);
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: var(--cream);
    color: var(--ink);
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

/* 襯線標題（呼應官網印章／襯線 logo） */
.serif { font-weight: 700; }

/* ===== 頁首 ===== */
.site-header {
    background: #1e293b;
    color: #ffffff;
    border-bottom: 4px solid #3b82f6;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.site-seal {
    width: 34px; height: 34px;
    border-radius: 6px;
    border: 2px solid #ffffff;
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px;
    flex-shrink: 0;
    font-weight: 700;
}
.site-name {
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #ffffff;
    font-size: 16px;
}
.site-sub {
    font-size: 11px;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,.7);
    font-weight: 500;
}

/* ===== 標題區 ===== */
.doc-title {
    text-align: center;
    padding: 34px 24px 26px;
}
.doc-eyebrow {
    display: inline-block;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 11px;
    letter-spacing: 0.24em;
    font-weight: 700;
    margin-bottom: 16px;
}
.doc-title h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--blue);
    margin: 0 0 8px;
    letter-spacing: 0.06em;
    line-height: 1.35;
}
.doc-title h1 .accent { color: var(--brick); }
.doc-title p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.7;
}

/* ===== 卡片 ===== */
.card {
    background: var(--paper);
    border-radius: 8px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 24px 22px;
    margin-bottom: 18px;
}

.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}
.card-title .num {
    width: 5px;
    height: 20px;
    border-radius: 2px;
    background: #3b82f6;
    color: transparent;
    font-size: 0;
    flex-shrink: 0;
}

/* ===== 表單元件 ===== */
.field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 7px;
    letter-spacing: 0.05em;
}
.field-label .req { color: var(--brick); margin-left: 3px; }

.input-box {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    padding: 13px 14px;
    font-size: 15px;
    background: var(--paper);
    color: var(--ink);
    appearance: none;
    transition: border-color .18s, box-shadow .18s;
    font-family: inherit;
}
.input-box:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}
.input-box::placeholder { color: #b8b0a6; }

/* ===== 選項卡 ===== */
.option-item {
    border: 1px solid var(--line-strong);
    background: var(--paper);
    border-radius: 6px;
    padding: 15px 18px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all .18s;
}
.option-item:hover { border-color: var(--line-strong); }
.option-item.active {
    border-color: #3b82f6;
    border-width: 2px;
    background: #f0f7ff;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
}
.option-item .opt-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    margin: 0 0 3px;
}
.option-item.active .opt-name { color: var(--ink); }
.option-item .opt-desc {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}
.check-mark {
    width: 24px; height: 24px;
    border-radius: 999px;
    border: 1.5px solid var(--line-strong);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: transparent;
    font-size: 13px; font-weight: 700;
    transition: all .18s;
}
.option-item.active .check-mark {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* ===== 按鈕 ===== */
.btn {
    width: 100%;
    border-radius: 8px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .18s;
    font-family: inherit;
}
.btn:active { transform: scale(0.985); }
.btn-primary {
    background: var(--brick);
    color: #fff;
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.22);
}
.btn-primary:hover { background: #2563eb; }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-ghost {
    background: var(--paper);
    color: var(--ink-soft);
    border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--cream-deep); }
.btn-sm {
    width: auto;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 500;
}

/* ===== 提醒框 ===== */
.notice {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px 20px;
}
.notice-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 13.5px;
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px;
}
.notice p {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.75;
    margin: 0 0 7px;
}
.notice p:last-child { margin-bottom: 0; }

.info {
    background: var(--blue-soft);
    border: 1px solid #dde3fb;
    border-radius: 14px;
    padding: 18px 20px;
    font-size: 13.5px;
    line-height: 1.8;
    color: #3a4a7a;
}
.info strong, .info .hot { color: #dc2626; font-weight: 700; }

/* =========================================================
   ✍️ 簽名板
   ========================================================= */
.sign-wrap {
    position: relative;
    border: 1.5px dashed var(--line-strong);
    border-radius: 14px;
    background: linear-gradient(var(--cream-deep) 0 0) padding-box, var(--paper);
    background: var(--paper);
    overflow: hidden;
    touch-action: none;
    transition: border-color .18s;
}
.sign-wrap.signed {
    border-style: solid;
    border-color: #3b82f6;
    background: #fbfdff;
}
.sign-canvas {
    display: block;
    width: 100%;
    height: 190px;
    touch-action: none;
    cursor: crosshair;
}
/* 簽名基線（像支票的簽名線） */
.sign-baseline {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 46px;
    border-bottom: 1px solid var(--line);
    pointer-events: none;
}
.sign-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    color: #c3bbb0;
    font-size: 13.5px;
    transition: opacity .2s;
}
.sign-hint .pen { font-size: 22px; opacity: .55; }
.sign-wrap.signed .sign-hint { opacity: 0; }

.sign-toolbar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
    flex-wrap: wrap;
}
.sign-tool {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 12.5px;
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    transition: all .16s;
    font-family: inherit;
}
.sign-tool:hover:not(:disabled) { background: var(--cream-deep); color: var(--ink); }
.sign-tool:disabled { opacity: .4; cursor: default; }
.sign-tool.emphasis {
    border-color: #3b82f6;
    color: #2563eb;
    background: #f0f7ff;
    font-weight: 700;
}

.sign-status {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sign-status .dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--line-strong);
    flex-shrink: 0;
}
.sign-wrap.signed ~ .sign-status .dot,
.sign-status.done .dot { background: #2f9e63; }

/* ===== 全螢幕橫向簽名 ===== */
#fs-sign {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: var(--cream);
    flex-direction: column;
}
#fs-sign.open { display: flex; }
#fs-sign .fs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    gap: 10px;
}
#fs-sign .fs-title {
    font-weight: 700;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}
#fs-sign .fs-body {
    flex: 1;
    padding: 14px;
    display: flex;
    min-height: 0;
}
#fs-sign .fs-pad {
    flex: 1;
    position: relative;
    background: var(--paper);
    border: 1.5px dashed var(--line-strong);
    border-radius: 14px;
    overflow: hidden;
    touch-action: none;
}
#fs-sign .fs-pad.signed { border-style: solid; border-color: #3b82f6; }
#fs-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}
#fs-sign .fs-foot {
    display: flex;
    gap: 10px;
    padding: 0 14px 16px;
    flex-shrink: 0;
}
#fs-sign .fs-foot .btn { flex: 1; }

/* ===== 遮罩 / 結果畫面 ===== */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.overlay.open { display: flex; }
.overlay-dim { background: rgba(45, 42, 38, .72); backdrop-filter: blur(3px); }
.overlay-solid { background: var(--cream); flex-direction: column; text-align: center; }

.spinner {
    width: 38px; height: 38px;
    border: 3px solid var(--line);
    border-top-color: #3b82f6;
    border-radius: 999px;
    animation: spin .8s linear infinite;
    margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.modal-box {
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    text-align: center;
    box-shadow: var(--shadow-lift);
    max-width: 340px;
}

.success-seal {
    width: 78px; height: 78px;
    border-radius: 999px;
    background: #eaf7ef;
    color: #2f9e63;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px;
    margin: 0 auto 20px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}