/* =========================
   Design Tokens
   ========================= */
:root {
  /* 主色系 */
  --color-primary: #1c8ed6;
  --color-dark: #3a3a3a;
  --color-bg: #e0e1e0;
  --color-card: #ffffff;
  --color-input: #f1f1f1;
  --color-text: #222;
  --color-muted: #666;
  --color-danger: #e36a6a;

  /* 圓角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* 間距 */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 26px;
  --space-xl: 30px;

  /* 字級 */
  --font-sm: 12px;
  --font-md: 14px;
  --font-lg: 18px;
  --font-xl: 24px;

  /* 陰影 */
  --shadow-card: 0 8px 20px rgba(0,0,0,.15);
}

/***********************************************/
/*COMMON*/
/***********************************************/

* { margin:0;padding:0;max-height:999999px; box-sizing: border-box;}
* { box-sizing: border-box; }


body {position: relative; width: 100%; 
	margin:0 auto;padding:0;
	line-height:1.5;
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:rgba(0,0,0,0); font-size: var(--font-md);
	font-family: 'Noto Sans TC', Helvetica,'Noto Sans', "Microsoft JhengHei", PingFang, STHeiti, Arial, sans-serif;  font-weight:normal;
      background: repeating-linear-gradient(
    135deg,#dfdfde,#dfdfde 10px,var(--color-bg) 10px,var(--color-bg) 20px
  );
}

h1, h2, h3, h4, h5, h6, address {font-size:1em;  font-style:normal; color:#000;margin:0;padding:0;line-height:1; text-align: center;}

a { color:#333;cursor:pointer; text-decoration: none; }
a img { border:none; }
a:hover { border-style:none; }
a:link { border-style:none; }
a:link img { border-style:none; }
p,dl,dt,dd,ul,ol,li,table{ margin:0; padding:0; }
table { border-collapse:collapse; }
img { border:0; vertical-align:bottom; }

.att {padding-left: 1em;text-indent: -1em;}
.yellow{color:#fdff54;}
.hide{ display:none;}
.large{ font-size:larger;}
.small{ font-size:smaller; }
.alt {position:absolute;width:0;height:0;overflow:hidden;}


/* =========================
   Layout
   ========================= */
.logo {
  width: 900px;
  max-width: calc(100% - 20px);
  margin: var(--space-md) auto;
  padding: 6px;
  text-align: left;
  font-weight: bold;
}
.logo img{ width:100%;
  width: 140px; }

/* =========================
   Card
   ========================= */
.card {
  width: 900px;position: relative;
  max-width: calc(100% - 20px);
  margin: 0 auto var(--space-xl);
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.card-header {
  background: var(--color-dark);position: relative;
  color: #fff;
  text-align: center;
  padding: var(--space-sm);
  font-weight: bold;font-size: var(--font-lg);
}

.card-body {
  padding: var(--space-lg);position: relative;
}

/* =========================
   Hero
   ========================= */
.hero-img {
  background: var(--color-accent);
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-img img{ width:100%; height: auto;}

.hero-info { text-align: center; padding: var(--space-xs) ; }

h1{ margin: var(--space-sm) 0; font-size: var(--font-xl);}
p{ margin: 0 0 var(--space-md) 0;}
/* =========================
   Form
   ========================= */
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-md);
}

.row-title {
  width: 90px;font-weight: bold;
  font-size: var(--font-md);
}

.form input,
.form select {
  flex: 1;
  padding: var(--space-sm);
  border: none;
  background: var(--color-input);
  border-radius: var(--radius-sm);
}

.hint {
  font-size: var(--font-sm);
  color: var(--color-danger);
  margin: 0 0 var(--space-md) 0;
}
.hint a{ color:#005FB8;}

/* Checkbox */
.checkbox-row { align-items: center;margin-bottom: var(--space-xs); position: relative; }

.checkbox-field {position: relative;line-height: 1em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.checkbox-field input {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.checkbox-field label{ padding:0; font-size: var(--font-md);  }

/* Button */
.btn {
  display: block;
  margin: var(--space-lg) auto 0;
  padding: var(--space-sm) 40px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--font-md);
  cursor: pointer;
}
.btn:hover{ opacity: 90%;}
/* =========================
   Table
   ========================= */
.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.record-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-md);
}

.record-table thead {
  background: var(--color-bg);
}

.record-table th,
.record-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  white-space: nowrap;
}

.record-table th {
  color: var(--color-muted);
  font-weight: bold;
}

.record-table tbody tr {
  border-bottom: 1px solid #e5e5e5;
  transition: background 0.2s;
}

.record-table tbody tr:hover {
  background: #f9f9f9;
}

.record-table td:first-child {
  font-family: monospace;
}

/* =========================
   Notice
   ========================= */

ol{ margin:0; padding-inline-start:var(--space-lg); font-size: var(--font-md); }
li{ padding-bottom:0.5em;}

/* =========================
   Footer
   ========================= */
.site-footer {
  background: #111;
  color: #ccc;
	font-size: var(--font-sm);
}

.footer-inner {
  max-width: 900px;
  margin: auto;
  padding: var(--space-sm);
  display: flex;
  justify-content: space-between;
}

/* =========================
   Tablet (<=1023px)
   ========================= */
@media (max-width: 1023px) {

  .card,.logo {
    width: 90%;
  }

  
  .form label {
    width: 80px;
  }
}
/* =========================
   Mobile
   ========================= */
@media (max-width: 767px) {
	

  .card {
    width: 100%;
    margin-bottom: var(--space-lg);
  }

 
  .hero-info h1 {
    font-size: var(--font-lg);
  }

  .card-body {
    padding: var(--space-md);
  }

  /* Form */
  .form .form-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .row-title{
    width: 100%;
    margin-bottom: var(--space-xs);
  }
	
	input, select{width:100%;}

  .form-row.checkbox {
    flex-direction: row;
  }

  .btn {
    width: 100%;
  }
	/* Record table → cards */
  .record-table thead {
    display: none;
  }

  .record-table tbody tr {
    display: block;
    background: var(--color-input);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
  }
	.record-table tbody tr:nth-last-child(1){ margin-bottom:0;}

  .record-table tbody td {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
  }

  .record-table tbody td::before {
    content: attr(data-label);
    color: var(--color-muted);
    font-size: var(--font-sm);
  }

  .form-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .row-title {
    width: 100%;
    margin-bottom: var(--space-xs);
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-xs);
  }
}
/* =========================
   Sticky Footer Layout
   ========================= */
html, body {
  height: 100%;
}

.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* footer 推到底 */
.site-footer {
  margin-top: auto;
}