/* ===== CONTACT PAGE ===== */

        /* 左右兩欄佈局 */
        .contact-layout {
            display: grid;
            grid-template-columns: 1fr 400px;
            gap: 40px;
            align-items: start;
        }

        /* ── 左側：表單 ── */
        .contact-form-wrap {
            background: #fff;
            border: 1.5px solid #e5eaf0;
            border-radius: 10px;
            padding: 36px 38px;
        }

        .contact-form-title {
            font-size: 16px;
            font-weight: 700;
            color: #1a3a52;
            margin-bottom: 6px;
        }

        .contact-form-sub {
            font-size: 13px;
            color: #888;
            margin-bottom: 28px;
            line-height: 1.6;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .cf-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .cf-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .cf-label {
            font-size: 13px;
            font-weight: 700;
            color: #1a3a52;
        }

        .cf-label .req {
            color: #d32f2f;
            margin-left: 3px;
        }

        .cf-input,
        .cf-textarea {
            width: 100%;
            padding: 11px 14px;
            font-size: 14px;
            font-family: inherit;
            color: #333;
            background: #fff;
            border: 1.5px solid #c8d8e8;
            border-radius: 6px;
            box-sizing: border-box;
            transition: border-color 0.18s, box-shadow 0.18s;
        }

        .cf-input:focus,
        .cf-textarea:focus {
            outline: none;
            border-color: #427096;
            box-shadow: 0 0 0 3px rgba(66,112,150,.12);
        }

        .cf-input.error,
        .cf-textarea.error {
            border-color: #d32f2f;
            box-shadow: 0 0 0 3px rgba(211,47,47,.10);
        }

        .cf-textarea {
            resize: vertical;
            min-height: 140px;
            line-height: 1.75;
        }

        /* 字數計數 */
        .cf-char-count {
            font-size: 11px;
            color: #bbb;
            text-align: right;
            margin-top: 2px;
        }

        .cf-char-count.near { color: #e65100; }

        /* 錯誤提示 */
        .cf-error {
            font-size: 12px;
            color: #d32f2f;
            display: none;
            align-items: center;
            gap: 4px;
        }

        .cf-error.visible { display: flex; }

        .cf-error svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

        /* 送出按鈕 */
        .cf-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 13px;
            font-size: 15px;
            font-weight: 700;
            font-family: inherit;
            color: #fff;
            background: #004c99;
            border: none;
            border-radius: 7px;
            cursor: pointer;
            transition: background 0.18s, box-shadow 0.18s;
            margin-top: 4px;
        }

        .cf-submit:hover {
            background: #003a7a;
            box-shadow: 0 4px 14px rgba(0,76,153,.25);
        }

        .cf-submit svg { width: 16px; height: 16px; }

        /* 送出成功 */
        .cf-success {
            display: none;
            text-align: center;
            padding: 48px 20px;
        }

        .cf-success.visible { display: block; }

        .cf-success-icon {
            width: 60px;
            height: 60px;
            background: #e8f5e9;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
        }

        .cf-success-icon svg { width: 28px; height: 28px; color: #2e7d32; }

        .cf-success h3 {
            font-size: 18px;
            font-weight: 700;
            color: #1a3a52;
            margin-bottom: 8px;
        }

        .cf-success p {
            font-size: 14px;
            color: #666;
            line-height: 1.8;
        }

        /* ── 右側：聯絡資訊 ── */
        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: sticky;
            top: 24px;
        }

        /* 各資訊卡 */
        .ci-card {
            background: #f8fafc;
            border: 1.5px solid #e5eaf0;
            border-radius: 10px;
            padding: 22px 24px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .ci-card:hover {
            border-color: #427096;
            box-shadow: 0 4px 14px rgba(66,112,150,.09);
        }

        .ci-card-title {
            font-size: 12px;
            font-weight: 700;
            color: #427096;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .ci-card-title svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
        }

        .ci-rows {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .ci-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            color: #444;
            line-height: 1.6;
        }

        .ci-row svg {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            color: #427096;
            margin-top: 2px;
        }

        .ci-row a {
            color: #004c99;
            text-decoration: none;
        }

        .ci-row a:hover { text-decoration: underline; }

        .ci-label {
            font-size: 11px;
            color: #aaa;
            display: block;
            margin-bottom: 1px;
        }

        /* 辦公時間 */
        .ci-hours {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .ci-hour-row {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            padding: 6px 0;
            border-bottom: 1px solid #edf1f6;
            color: #444;
        }

        .ci-hour-row:last-child { border-bottom: none; }

        .ci-hour-day { color: #555; font-weight: 500; }

        .ci-hour-time { color: #1a3a52; font-weight: 600; }

        .ci-hour-closed { color: #aaa; }

        /* 各組聯絡 */
        .ci-dept-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .ci-dept-item {
            padding: 10px 14px;
            background: #fff;
            border: 1px solid #e5eaf0;
            border-radius: 6px;
            font-size: 13px;
        }

        .ci-dept-name {
            font-weight: 700;
            color: #1a3a52;
            margin-bottom: 6px;
            font-size: 13px;
        }

        .ci-dept-tel {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #444;
        }

        .ci-dept-tel svg {
            width: 12px;
            height: 12px;
            color: #427096;
            flex-shrink: 0;
        }

        .ci-dept-tel a { color: #004c99; text-decoration: none; }
        .ci-dept-tel a:hover { text-decoration: underline; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 900px) {
            .contact-layout {
                grid-template-columns: 1fr;
            }

            .contact-info {
                position: static;
                order: -1;
            }

            /* 小螢幕橫排資訊卡 */
            .contact-info {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }
        }

        @media (max-width: 600px) {
            .contact-form-wrap { padding: 24px 18px; }

            .cf-row { grid-template-columns: 1fr; }

            .contact-info { grid-template-columns: 1fr; }
        }