<<<<<<< HEAD
  *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
      color:#1f2430;
      background:#fff;
    }
    img{ max-width:100%; display:block; }

    :root{
      --header-h: 64px;       /*【修改點】Header 高度 */
      --header-border: #e5e7eb;
      --brand-dark:#1d1b5c;
      --border:#f1d8c7;
      --shadow:0 10px 30px rgba(0,0,0,0.08);
      --radius:14px;
      --muted:#6b7280;
      --bg-soft:#faf7f4;
    }

    /* =========================
       1) 固定 Header
       ========================= */
    .site-header{
      position: sticky; /* 捲動固定 */
      top: 0;
      z-index: 1000;
      height: var(--header-h);
      background: #fff;
      border-bottom: 1px solid var(--header-border);
    }
    /* 若你想要更像圖2「完全固定」也可改 fixed：
       .site-header{ position:fixed; top:0; left:0; right:0; }
       然後 body 加 padding-top: var(--header-h);
    */

    .header-inner{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 0 18px;
    }

    .brand-row{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .brand-row .logo{ height:28px; width:auto; }
    .brand-row .x{
      font-weight:800;
      opacity:.7;
      padding:0 2px;
    }

    /* =========================
       2) 主內容：左大圖貼齊 + 右表單
       ========================= */
    .main{
      /* 讓內容不會被 sticky header 遮到（sticky 通常不需要，但保險） */
      padding-top: 0px;
    }

    .hero{
      width:100%;
      min-height: calc(100vh - var(--header-h));
      display:flex;
      align-items:stretch;
      background:#fff;
    }

    /* 左圖：貼齊左側、吃滿高度（像圖2） */
    .hero-left{
      flex: 1;
      min-height: calc(100vh - var(--header-h));
      background: var(--bg-soft);
      overflow:hidden;
    }
    .hero-left img{
      width:100%;
      height:100%;
      object-fit: cover; /* 填滿 */
      object-position: left center; /* 偏左，貼齊左邊感覺 */
    }

    /* 右表單：右側留白、表單置中（像圖2） */
    .hero-right{
      flex: 0.85;
      min-height: calc(100vh - var(--header-h));
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding: 28px 22px;
      background:#fff;
    }

    .form-wrap{
      width: min(440px, 100%);
    }

    .form-card{
      width:100%;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1px solid #f3f4f6;
      background:#fff;
      padding: 18px 18px 18px;
    }

    .form-top{
      text-align:center;
      padding: 2px 0 8px;
    }
    .form-top h2{
      margin: 6px 0 4px;
      font-size: 18px;
      letter-spacing: .5px;
    }
    .form-top .line-id{
      margin:0;
      font-weight:700;
      font-size: 14px;
    }

    .qr-wrap{
      display:flex;
      justify-content:center;
      margin: 10px 0 14px;
    }
    .qr-img{
      width:140px;
      height:140px;
      border-radius:12px;
      border:2px solid rgba(16,185,129,0.2);
      background:#fff;
      padding:8px;
    }

    .welcome{
      margin: 6px 0 12px;
      line-height: 1.55;
      font-size: 14px;
    }

    .field{ margin: 10px 0; }
    .input{
      width:100%;
      height:44px;
      padding:10px 12px;
      border: 1.6px solid var(--border);
      border-radius: 6px;
      outline:none;
      font-size:14px;
      transition: .18s ease;
      background:#fff;
    }
    .input:focus{
      box-shadow: 0 0 0 4px rgba(241,216,199,0.35);
    }

    /* 【修改點】電話欄位：國碼下拉 + 電話輸入（兩欄） */
    .phone-field .phone-row{
    display:flex;
    gap:12px;
    width:100%;
    }

    .phone-field .country-code{
    flex: 0 0 170px; /* 國碼欄固定寬，可依你設計調整 */
    height:44px;
    }

    .phone-field .phone-number{
    flex: 1 1 auto;  /* 電話欄吃剩下寬度 */
    height:44px;
    }

    .select{
      appearance:none;
      background-image:
        linear-gradient(45deg, transparent 50%, #9ca3af 50%),
        linear-gradient(135deg, #9ca3af 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 18px,
        calc(100% - 12px) 18px;
      background-size:6px 6px,6px 6px;
      background-repeat:no-repeat;
      padding-right:34px;
    }

    .agree-row{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-top:12px;
      margin-bottom:10px;
      font-size:13px;
      color:#374151;
    }
    .agree-row input[type="checkbox"]{
      margin-top:3px;
      width:16px;height:16px;
      accent-color: var(--brand-dark);
    }
    .agree-row a{
      color:#2563eb;
      text-decoration:underline;
      text-underline-offset:3px;
    }

    .btn{
      width:100%;
      height:46px;
      border:none;
      border-radius:6px;
      background: var(--brand-dark);
      color:#fff;
      font-weight:800;
      letter-spacing:1px;
      cursor:pointer;
      transition:.18s ease;
    }

    .hint{
      margin-top:10px;
      font-size:12px;
      color: var(--muted);
      text-align:center;
    }

    .error{
      display:none;
      margin-top:8px;
      padding:10px 12px;
      border-radius:10px;
      background:#fff1f2;
      border:1px solid #fecdd3;
      color:#9f1239;
      font-size:13px;
      line-height:1.45;
    }

    /* 【修改點】紅框那一塊的容器要能當定位基準 */
    .form-lock-area{
    position: relative;
    }

    /* 【修改點】只覆蓋紅框區塊的 overlay */
    .loading-overlay-local{
    position: absolute;
    inset: 0;               /* top:0 right:0 bottom:0 left:0 */
    background: rgba(255,255,255,0.85);
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 鎖住區塊內所有點擊/輸入 */
    pointer-events: all;

    /* 如果紅框容器本身有圓角，這裡同步 */
    border-radius: 12px;    /* 依你卡片圓角調整 */
    }

    .loading-overlay-local .loading-text{
    font-size: 18px;
    font-weight: 700;
    color: #141a4f;
    letter-spacing: 1px;
    }

    /* footer */
    .footer-bottom {
    background-color: #222;
    color: white;
    padding: 15px 20px;
    font-size: 16px;
    }

    .footer-bottom-inner {
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
    text-align: center;
    }

    .footer-icons {
    display: inline-flex;
    align-items: flex-end; /* ✅ 對齊底部 */
    gap: 10px;
    }

    .footer-icons a {
    position: relative;
    display: inline-block;
    }

    .footer-icons img {
    height: 20px;    /* ✅ 高度統一，高度控制整齊；你也可改成 24px、32px 等 */
    width: auto;     /* ✅ 宽度自動依比例 */
    vertical-align: bottom;
    }

    .footer-icons .image-after {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    }

    .footer-icons .image-before {
    transition: opacity 0.3s ease;
    }

    .footer-icons a:hover .image-before {
    opacity: 0;
    }

    .footer-icons a:hover .image-after {
    opacity: 1;
    }

    .footer-info,
    .footer-copy {
    white-space: nowrap;
    }

    /* =========================
       3) RWD：手機版（表單在上、圖在下）
       ========================= */
    @media (max-width: 900px){
      :root{ --header-h: 58px; }

      .header-inner{ padding: 0 12px; }

      .hero{
        flex-direction: column;
        min-height: auto;
      }

      .hero-right{
        order: 1;
        min-height: auto;
        padding: 16px 14px;
      }
      .hero-left{
        order: 2;
        min-height: 360px; /* 手機下方大圖高度 */
      }
      .hero-left img{
        object-position: center;
      }

      .form-wrap{ width: 100%; }
      .form-card{ padding: 16px 14px; }
      .qr-img{ width: 120px; height: 120px; }

      /* footer */
      .footer-bottom-inner {
          flex-direction: column;
          align-items: center;
      }
      .footer-icons {
          order: 1;
      }
      .footer-info {
          order: 2;
      }
      .footer-copy {
          order: 3;
      }      
    }

    @media (max-width: 420px){
        .phone-field .phone-row{
            gap:10px;
        }
        .phone-field .country-code{
            flex-basis: 150px;
        }
    } 
    
    @media (max-width: 360px){
        .phone-field .phone-row{ flex-direction: column; }
        .phone-field .country-code{ flex-basis: auto; }
=======
  *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
      color:#1f2430;
      background:#fff;
    }
    img{ max-width:100%; display:block; }

    :root{
      --header-h: 64px;       /*【修改點】Header 高度 */
      --header-border: #e5e7eb;
      --brand-dark:#1d1b5c;
      --border:#f1d8c7;
      --shadow:0 10px 30px rgba(0,0,0,0.08);
      --radius:14px;
      --muted:#6b7280;
      --bg-soft:#faf7f4;
    }

    /* =========================
       1) 固定 Header
       ========================= */
    .site-header{
      position: sticky; /* 捲動固定 */
      top: 0;
      z-index: 1000;
      height: var(--header-h);
      background: #fff;
      border-bottom: 1px solid var(--header-border);
    }
    /* 若你想要更像圖2「完全固定」也可改 fixed：
       .site-header{ position:fixed; top:0; left:0; right:0; }
       然後 body 加 padding-top: var(--header-h);
    */

    .header-inner{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 0 18px;
    }

    .brand-row{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .brand-row .logo{ height:28px; width:auto; }
    .brand-row .x{
      font-weight:800;
      opacity:.7;
      padding:0 2px;
    }

    /* =========================
       2) 主內容：左大圖貼齊 + 右表單
       ========================= */
    .main{
      /* 讓內容不會被 sticky header 遮到（sticky 通常不需要，但保險） */
      padding-top: 0px;
    }

    .hero{
      width:100%;
      min-height: calc(100vh - var(--header-h));
      display:flex;
      align-items:stretch;
      background:#fff;
    }

    /* 左圖：貼齊左側、吃滿高度（像圖2） */
    .hero-left{
      flex: 1;
      min-height: calc(100vh - var(--header-h));
      background: var(--bg-soft);
      overflow:hidden;
    }
    .hero-left img{
      width:100%;
      height:100%;
      object-fit: cover; /* 填滿 */
      object-position: left center; /* 偏左，貼齊左邊感覺 */
    }

    /* 右表單：右側留白、表單置中（像圖2） */
    .hero-right{
      flex: 0.85;
      min-height: calc(100vh - var(--header-h));
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding: 28px 22px;
      background:#fff;
    }

    .form-wrap{
      width: min(440px, 100%);
    }

    .form-card{
      width:100%;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1px solid #f3f4f6;
      background:#fff;
      padding: 18px 18px 18px;
    }

    .form-top{
      text-align:center;
      padding: 2px 0 8px;
    }
    .form-top h2{
      margin: 6px 0 4px;
      font-size: 18px;
      letter-spacing: .5px;
    }
    .form-top .line-id{
      margin:0;
      font-weight:700;
      font-size: 14px;
    }

    .qr-wrap{
      display:flex;
      justify-content:center;
      margin: 10px 0 14px;
    }
    .qr-img{
      width:140px;
      height:140px;
      border-radius:12px;
      border:2px solid rgba(16,185,129,0.2);
      background:#fff;
      padding:8px;
    }

    .welcome{
      margin: 6px 0 12px;
      line-height: 1.55;
      font-size: 14px;
    }

    .field{ margin: 10px 0; }
    .input{
      width:100%;
      height:44px;
      padding:10px 12px;
      border: 1.6px solid var(--border);
      border-radius: 6px;
      outline:none;
      font-size:14px;
      transition: .18s ease;
      background:#fff;
    }
    .input:focus{
      box-shadow: 0 0 0 4px rgba(241,216,199,0.35);
    }

    /* 【修改點】電話欄位：國碼下拉 + 電話輸入（兩欄） */
    .phone-field .phone-row{
    display:flex;
    gap:12px;
    width:100%;
    }

    .phone-field .country-code{
    flex: 0 0 170px; /* 國碼欄固定寬，可依你設計調整 */
    height:44px;
    }

    .phone-field .phone-number{
    flex: 1 1 auto;  /* 電話欄吃剩下寬度 */
    height:44px;
    }

    .select{
      appearance:none;
      background-image:
        linear-gradient(45deg, transparent 50%, #9ca3af 50%),
        linear-gradient(135deg, #9ca3af 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 18px,
        calc(100% - 12px) 18px;
      background-size:6px 6px,6px 6px;
      background-repeat:no-repeat;
      padding-right:34px;
    }

    .agree-row{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-top:12px;
      margin-bottom:10px;
      font-size:13px;
      color:#374151;
    }
    .agree-row input[type="checkbox"]{
      margin-top:3px;
      width:16px;height:16px;
      accent-color: var(--brand-dark);
    }
    .agree-row a{
      color:#2563eb;
      text-decoration:underline;
      text-underline-offset:3px;
    }

    .btn{
      width:100%;
      height:46px;
      border:none;
      border-radius:6px;
      background: var(--brand-dark);
      color:#fff;
      font-weight:800;
      letter-spacing:1px;
      cursor:pointer;
      transition:.18s ease;
    }

    .hint{
      margin-top:10px;
      font-size:12px;
      color: var(--muted);
      text-align:center;
    }

    .error{
      display:none;
      margin-top:8px;
      padding:10px 12px;
      border-radius:10px;
      background:#fff1f2;
      border:1px solid #fecdd3;
      color:#9f1239;
      font-size:13px;
      line-height:1.45;
    }

    /* 【修改點】紅框那一塊的容器要能當定位基準 */
    .form-lock-area{
    position: relative;
    }

    /* 【修改點】只覆蓋紅框區塊的 overlay */
    .loading-overlay-local{
    position: absolute;
    inset: 0;               /* top:0 right:0 bottom:0 left:0 */
    background: rgba(255,255,255,0.85);
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    /* 鎖住區塊內所有點擊/輸入 */
    pointer-events: all;

    /* 如果紅框容器本身有圓角，這裡同步 */
    border-radius: 12px;    /* 依你卡片圓角調整 */
    }

    .loading-overlay-local .loading-text{
    font-size: 18px;
    font-weight: 700;
    color: #141a4f;
    letter-spacing: 1px;
    }

    /* footer */
    .footer-bottom {
    background-color: #222;
    color: white;
    padding: 15px 20px;
    font-size: 16px;
    }

    .footer-bottom-inner {
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
    text-align: center;
    }

    .footer-icons {
    display: inline-flex;
    align-items: flex-end; /* ✅ 對齊底部 */
    gap: 10px;
    }

    .footer-icons a {
    position: relative;
    display: inline-block;
    }

    .footer-icons img {
    height: 20px;    /* ✅ 高度統一，高度控制整齊；你也可改成 24px、32px 等 */
    width: auto;     /* ✅ 宽度自動依比例 */
    vertical-align: bottom;
    }

    .footer-icons .image-after {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    }

    .footer-icons .image-before {
    transition: opacity 0.3s ease;
    }

    .footer-icons a:hover .image-before {
    opacity: 0;
    }

    .footer-icons a:hover .image-after {
    opacity: 1;
    }

    .footer-info,
    .footer-copy {
    white-space: nowrap;
    }

    /* =========================
       3) RWD：手機版（表單在上、圖在下）
       ========================= */
    @media (max-width: 900px){
      :root{ --header-h: 58px; }

      .header-inner{ padding: 0 12px; }

      .hero{
        flex-direction: column;
        min-height: auto;
      }

      .hero-right{
        order: 1;
        min-height: auto;
        padding: 16px 14px;
      }
      .hero-left{
        order: 2;
        min-height: 360px; /* 手機下方大圖高度 */
      }
      .hero-left img{
        object-position: center;
      }

      .form-wrap{ width: 100%; }
      .form-card{ padding: 16px 14px; }
      .qr-img{ width: 120px; height: 120px; }

      /* footer */
      .footer-bottom-inner {
          flex-direction: column;
          align-items: center;
      }
      .footer-icons {
          order: 1;
      }
      .footer-info {
          order: 2;
      }
      .footer-copy {
          order: 3;
      }      
    }

    @media (max-width: 420px){
        .phone-field .phone-row{
            gap:10px;
        }
        .phone-field .country-code{
            flex-basis: 150px;
        }
    } 
    
    @media (max-width: 360px){
        .phone-field .phone-row{ flex-direction: column; }
        .phone-field .country-code{ flex-basis: auto; }
>>>>>>> 85259e76 (20260331 同步資訊)
    }