:root {
  --背景: #f3ede5;
  --卡片: #faf7f3;
  --文字: #1f1915;
  --次文字: #6d6259;
  --主藍: #3567d8;
  --深藍: #1f4fca;
  --咖啡: #8a5a33;
  --邊線: rgba(31, 25, 21, 0.08);
  --陰影: 0 18px 45px rgba(31, 25, 21, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--文字);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.65), transparent 26%),
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.45), transparent 20%),
    linear-gradient(180deg, #efe7dc 0%, var(--背景) 16%, var(--背景) 100%);
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
button, input { font: inherit; }

.頁首, main {
  width: min(1160px, calc(100% - 48px));
  margin: 0 auto;
}
.頁首 { min-height: 100vh; padding: 28px 0 48px; }
.導覽列 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.品牌 { font-size: 1.05rem; font-weight: 800; }
.首屏 { width: min(760px, 100%); margin-top: 250px; }

.小標 {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  margin: 0 0 14px; border: 1px solid var(--邊線); border-radius: 999px;
  background: rgba(255, 255, 255, 0.65); color: var(--主藍); font-size: 0.92rem; font-weight: 700;
}
.主標, .區塊主標 { margin: 0; line-height: 1.05; letter-spacing: -0.05em; }
.主標 { display: grid; gap: 0.1em; font-size: clamp(3.4rem, 7vw, 6.4rem); }
.亮塊 {
  display: inline-block; width: fit-content; padding: 0.05em 0.08em 0.08em;
  color: #fff; background: var(--主藍); box-decoration-break: clone; -webkit-box-decoration-break: clone;
  box-shadow: 0.45em 0 0 0 var(--主藍), -0.12em 0 0 0 var(--主藍);
}
.副標 { width: min(720px, 100%); margin: 18px 0 28px; color: var(--甈⊥?摮?); line-height: 1.8; }
.按鈕列 { display: flex; flex-wrap: wrap; gap: 14px; }
.主要按鈕, .次要按鈕 {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; border: 1px solid transparent; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.主要按鈕:hover, .次要按鈕:hover { transform: translateY(-2px); }
.主要按鈕 { color: #fff; background: var(--咖啡); box-shadow: var(--陰影); }
.次要按鈕 { background: rgba(255, 255, 255, 0.72); border-color: rgba(31, 25, 21, 0.08); }
.區塊 { padding: 52px 0 34px; }
.區塊標頭 { margin-bottom: 20px; }
.區塊主標 { display: inline-block; color: var(--文字); font-size: clamp(2rem, 4vw, 3.5rem); }
.卡片列 { display: grid; gap: 18px; }
.三欄 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.卡片, .作品卡片, .關於文字, .聯絡卡, .關於圖片 {
  border: 1px solid var(--邊線); border-radius: 28px; background: rgba(255, 255, 255, 0.82); box-shadow: var(--陰影);
}
.卡片 { min-height: 142px; padding: 24px 22px; }
.卡片標 { display: inline-block; margin: 0 0 12px; color: var(--文字); font-size: 1.15rem; }
.卡片 p, .作品卡片 p, .關於文字 p, .聯絡資訊 p, .狀態說明 { margin: 0; color: var(--次文字); line-height: 1.8; }
.作品列 { margin-top: 6px; }
.作品卡片 { display: flex; gap: 16px; align-items: flex-start; padding: 24px; min-height: 144px; }
.編號 { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--咖啡); color: #fff; font-weight: 800; }
.作品卡片 h3 { display: inline-block; margin: 2px 0 10px; padding: 0.08em 0.12em; color: #fff; background: var(--主藍); font-size: 1.15rem; }
.關於區 { padding-bottom: 52px; }
.關於內容 { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.關於圖片 { overflow: hidden; min-height: 272px; }
.關於圖片 img { height: 100%; object-fit: cover; object-position: center top; }
.關於文字 { display: flex; align-items: flex-start; padding: 26px; }
.關於文字 p { display: inline-block; padding: 0.08em 0.12em; color: #fff; background: var(--主藍); }
.聯絡卡 { padding: 26px; }
.聯絡資訊 { margin-bottom: 18px; }
.聯絡資訊 p + p { margin-top: 8px; }
.表單 { display: grid; gap: 16px; max-width: 760px; }
.欄位 { display: grid; gap: 8px; }
.欄位 label { font-weight: 800; }
.欄位 input { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid rgba(31, 25, 21, 0.1); border-radius: 16px; background: #fff; color: var(--文字); }
.欄位 input:focus { outline: 2px solid rgba(53, 103, 216, 0.24); border-color: rgba(53, 103, 216, 0.4); }
.提交按鈕 { width: 100%; min-height: 48px; }
.狀態文字 { margin: 0; font-weight: 800; color: var(--主藍); }
.狀態說明 { margin-top: -6px; }
@media (max-width: 980px) {
  .三欄 { grid-template-columns: 1fr; }
  .關於內容 { grid-template-columns: 1fr; }
  .首屏 { margin-top: 180px; }
}
@media (max-width: 640px) {
  .頁首, main { width: min(100% - 20px, 1160px); }
  .頁首 { min-height: auto; padding-top: 20px; }
  .首屏 { margin-top: 96px; }
  .主標 { font-size: clamp(2.4rem, 12vw, 4rem); }
  .副標 { font-size: 0.95rem; }
  .區塊 { padding-top: 32px; }
  .卡片, .作品卡片, .關於文字, .聯絡卡, .關於圖片 { border-radius: 22px; }
}