/* 容器卡片外觀（不改 HTML 結構） */
.member_page{
  max-width: 560px;
  margin: 0 auto;
  padding: 50px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
}

/* 每一列用 grid：左側文字(標籤) | 右側輸入框 */
.member_page p{
  display: grid;
  grid-template-columns: 92px 1fr; /* 標籤寬 / 輸入寬 */
  align-items: center;
  column-gap: 12px;
  margin: 0 0 14px;
  line-height: 1.4;
  color: #0f172a;
  font-size: 16px;
}

/* 輸入欄位通用樣式 */
.member_page input[type="text"]{
  height: 46px;
  padding: 0 0 0 46px;   /* 左側留空給圖示 */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  width: -webkit-fill-available;
}

/* Placeholder 樣式 */
.member_page input[type="text"]::placeholder{
  color: #9aa3af;
}


/* 針對兩個欄位個別加上左側圖示（純 CSS，不改 HTML） */
.member_page #Name{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2362748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21a8 8 0 0 0-16 0'/><circle cx='12' cy='7' r='4'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px 50%;
}
.member_page #IDNumber{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2362748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><line x1='7' y1='8' x2='17' y2='8'/><line x1='7' y1='12' x2='13' y2='12'/><line x1='7' y1='16' x2='11' y2='16'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px 50%;
}

/* 送出按鈕列：讓按鈕與標籤對齊 */
.member_page p:last-child{
  grid-template-columns: 92px auto;
}

/* 送出按鈕樣式（覆蓋 inline 寬度設定） */
.member_page #btnOK{
  appearance: none;
  display: inline-block;
  border: 1px solid var(--complement);
  background: linear-gradient(180deg, var(--complement), var(--complement));
  color: #ffffff;
  padding: 10px 18px !important;  /* 保持不改 HTML，用 !important 蓋過 inline */
  margin-right: 0 !important;      /* 蓋過 inline 的 margin-right */
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgb(142 142 142 / 25%);
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
  text-align: center;
  width: 220px;
}
.member_page #btnOK:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgb(142 142 142 / 30%);
}
.member_page #btnOK:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(37,99,235,.25);
}


.member_page .more {
    margin-top: 50px;
}

/* 行動裝置優化 */
@media (max-width: 640px){
  .member_page{
    padding: 30px 15px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(2,6,23,.08);
  }
  .member_page p{
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .member_page input[type="text"]{
    height: 44px;
    padding-left: 44px;
    font-size: 15px;
  }
    .member_page .more {
    margin-top: 30px;
}
}


/* 列印：去陰影、提高對比 */
@media print{
  .member_page{
    box-shadow: none;
    border-color: #cbd5e1;
    background: #fff;
  }
}