/* =========================================================
   個人網站樣式（Editorial 編輯感風格）
   黑白灰、手機優先。顏色與尺寸都用 CSS 變數集中管理，
   想換色/換圓角只要改這裡的 :root 就好。
   ========================================================= */

:root{
  /* 版面寬度 */
  --maxw: 480px;          /* 首頁的窄欄寬度（像 link-in-bio） */
  --maxw-wide: 960px;     /* 作品集/後台的寬版 */

  /* 字體 */
  --font-display: "Noto Serif TC", "Times New Roman", serif;  /* 大標題用襯線 */
  --font-body: "Inter", "Noto Sans TC", sans-serif;           /* 內文用無襯線 */
  --font-mono: "JetBrains Mono", monospace;                   /* 帳號/標籤用等寬 */

  /* 顏色 */
  --bg: #fbfbf9;
  --surface: #fbfbf9;
  --surface-2: #f1f0ec;
  --text: #111110;
  --muted: #77756e;
  --border: #dedcd4;
  --accent: #111110;
  --accent-fg: #fbfbf9;
  --green: #22c55e;

  /* 圓角 */
  --radius: 4px;
  --radius-sm: 2px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.2; font-weight:700; }

/* 版面容器 */
.viewport{ display:flex; justify-content:center; padding:0 16px 80px; }
.page{ width:100%; max-width:var(--maxw); }
.page.wide{ max-width:var(--maxw-wide); }

section{ padding:44px 0; }

.section-label{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:18px;
}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px;
  background:var(--accent); color:var(--accent-fg); border:none;
  border-radius:var(--radius-sm); font-family:inherit; font-weight:600; font-size:15px;
  text-decoration:none; cursor:pointer; transition:.18s;
}
.btn:hover{ opacity:.88; transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.btn.ghost:hover{ border-color:var(--text); opacity:1; }
.btn.sm{ width:auto; padding:9px 16px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* 共用小圖示 */
svg.i{
  width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:middle; flex-shrink:0;
}

/* ================= 首頁 ================= */

/* Hero */
.hero{ padding-top:52px; text-align:center; }
.avatar{
  width:112px; height:112px; border-radius:999px; margin:0 auto 22px;
  object-fit:cover; background:var(--surface-2); border:1px solid var(--border);
}
.avatar.skeleton{ border-radius:999px; } /* 載入中的頭貼維持圓形 */
.hero .eyebrow{
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px; font-weight:600;
}
.hero h1{ font-size:clamp(30px,9vw,42px); margin-bottom:6px; letter-spacing:-.01em; }
.hero .handle{ color:var(--muted); font-size:15px; margin-bottom:16px; font-family:var(--font-mono); }
.hero .bio{ font-size:15.5px; opacity:.85; max-width:34ch; margin:0 auto 18px; }
.status{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);
  background:var(--surface-2); padding:7px 14px; border-radius:999px; border:1px solid var(--border);
}
.status[hidden]{ display:none; } /* 沒填「目前正在做」時，連同綠點一起隱藏 */
.status .dot{
  width:7px; height:7px; border-radius:999px; background:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.18);
}

/* 社群連結（清單式：一列一個） */
.socials{ border-top:1px solid var(--border); }
.social{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; border-bottom:1px solid var(--border);
  text-decoration:none; color:var(--text); transition:.15s;
}
.social:hover{ padding-left:10px; }
.social .left{ display:flex; align-items:center; gap:14px; }
.social .name{ font-size:15px; font-family:var(--font-display); }
.social .arrow{ color:var(--muted); }
.social svg{ width:22px; height:22px; }

/* 作品卡片（首頁精選 + 作品集共用） */
.works-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.works-head h2{ font-size:22px; }
.featured{ display:grid; gap:14px; }
.work-card{
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  background:var(--surface); transition:.18s; text-decoration:none; color:inherit; display:block;
}
.work-card:hover{ transform:translateY(-3px); border-color:var(--text); }
/* 封面圖與標題可能是 <a>，設成 block 才不會塌掉高度 */
.thumb{ display:block; aspect-ratio:4/3; background:var(--surface-2); position:relative; overflow:hidden; }
.wtitle{ display:block; text-decoration:none; color:inherit; }
.wtitle:hover h3{ text-decoration:underline; }
/* contain：完整顯示整張圖不裁切（圖比例和卡片不同時，兩側/上下會留底色） */
/* cover：縮圖填滿卡片（浮水印才會壓在照片上）；完整原圖點開燈箱看 */
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:11px; font-family:var(--font-mono);
}
.work-body{ padding:16px; }
.work-body h3{ font-size:17px; margin-bottom:5px; overflow-wrap:anywhere; }
.work-body p{ font-size:13.5px; color:var(--muted); margin-bottom:12px; line-height:1.5; white-space:pre-line; } /* 保留簡介裡的換行 */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.chip{
  font-size:11px; padding:3px 9px; border-radius:999px;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--border);
  font-family:var(--font-mono);
}
.work-meta{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:6px 12px;                 /* 放不下就換行，不擠出框 */
  font-size:12px; color:var(--muted); padding-top:10px; border-top:1px solid var(--border);
}
.work-meta > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 分類·時間太長用…收尾 */
.work-meta .links{ display:flex; gap:12px; flex-shrink:0; }
.work-meta .lk{ color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:4px; opacity:.8; }
.work-meta .lk:hover{ opacity:1; }

/* 封面浮水印 + 張數標記 + 可點開 */
.thumb[role="button"]{ cursor:pointer; }
/* 照片＋浮水印用 canvas 合成成同一張圖（不是另外疊一層），填滿卡片 */
.wm-canvas{ display:block; width:100%; height:100%; }
.thumb .count{ position:absolute; left:8px; top:8px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:2px 7px; border-radius:999px; font-family:var(--font-mono); }

/* 燈箱（點作品看多張照片） */
.lightbox{ position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; }
.lightbox[hidden]{ display:none; }
.lightbox .lb-stage{ position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.lightbox .lb-canvas{ max-width:92vw; max-height:86vh; display:block; border-radius:4px; }
.lightbox .lb-close{ position:absolute; top:14px; right:20px; background:none; border:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; opacity:.85; }
.lightbox .lb-close:hover{ opacity:1; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:none; color:#fff; width:46px; height:46px; border-radius:999px; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lightbox .lb-nav:hover{ background:rgba(255,255,255,.25); }
.lightbox .lb-prev{ left:16px; }
.lightbox .lb-next{ right:16px; }
.lightbox .lb-count{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; font-family:var(--font-mono); opacity:.8; }

/* 後台：作品多圖管理 */
.img-manager{ display:flex; flex-wrap:wrap; gap:8px; }
.img-item{ position:relative; width:84px; height:64px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface-2); }
.img-item img{ width:100%; height:100%; object-fit:cover; }
.img-item .cover-badge{ position:absolute; left:3px; top:3px; background:var(--text); color:var(--bg); font-size:9px; padding:1px 5px; border-radius:4px; }
.img-item .img-del{ position:absolute; right:2px; top:2px; width:18px; height:18px; border:none; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; }
.img-item .img-cover{ position:absolute; left:0; right:0; bottom:0; border:none; background:rgba(0,0,0,.55); color:#fff; font-size:9px; padding:2px; cursor:pointer; }
.img-add{ width:84px; height:64px; border:1.5px dashed var(--border); border-radius:8px; background:var(--surface); color:var(--muted); cursor:pointer; font-size:12px; }
.img-add:hover{ border-color:var(--text); color:var(--text); }
.img-add:disabled{ opacity:.6; cursor:default; }

/* 關於我 */
.about p.lead{ font-size:15.5px; opacity:.85; margin-bottom:24px; }
.about h3.sub{
  font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  margin:22px 0 12px; font-family:var(--font-body);
}
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{ font-size:13px; padding:6px 12px; border:1px solid var(--border); border-radius:999px; color:var(--text); }
.timeline{ border-left:2px solid var(--border); padding-left:18px; margin-top:6px; display:grid; gap:18px; }
.timeline .item{ position:relative; }
.timeline .item::before{
  content:""; position:absolute; left:-24px; top:5px;
  width:9px; height:9px; border-radius:999px; background:var(--text);
}
.timeline .yr{ font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.timeline .item h4{ font-size:15px; margin:2px 0 3px; }
.timeline .item p{ font-size:13.5px; color:var(--muted); }

/* 頁尾 */
footer.site{ text-align:center; padding:32px 0 8px; color:var(--muted); font-size:12px; border-top:1px solid var(--border); }
footer.site .top{ display:block; margin-bottom:14px; color:var(--text); text-decoration:none; font-size:13px; }
footer.site .foot-mail{
  display:inline-flex; align-items:center; gap:6px; color:var(--text); text-decoration:none;
  font-size:14px; margin-bottom:10px; font-family:var(--font-mono);
}
footer.site .foot-mail[hidden]{ display:none; } /* email 未載入前隱藏 */
footer.site .foot-mail:hover{ text-decoration:underline; }

/* ================= 作品集分頁 ================= */
.page-head{ padding:48px 0 24px; }
.page-head .back{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.page-head h1{ font-size:clamp(28px,7vw,40px); margin:14px 0 8px; }
.page-head p{ color:var(--muted); font-size:15px; }
.filters{
  display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 24px;
}
.filter{
  font-family:inherit; font-size:13px; cursor:pointer; padding:7px 15px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--muted); transition:.15s;
}
.filter:hover{ color:var(--text); }
.filter.on{ background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.works-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; align-items:start; }

/* ================= 後台 ================= */
.admin-login{ max-width:360px; margin:60px auto; text-align:center; }
.admin-login .lock{
  width:52px; height:52px; border-radius:14px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; border:1px solid var(--border);
}
.admin-login h2{ font-size:22px; margin-bottom:6px; }
.admin-login p{ color:var(--muted); font-size:14px; margin-bottom:22px; }

.field{ text-align:left; margin-bottom:14px; }
.field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.08em; }
/* 輸入框字級 16px：避免手機 iOS 自動放大 */
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; font-size:16px; font-family:inherit;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text);
}
.field textarea{ resize:vertical; min-height:80px; line-height:1.5; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--text); }
.field .hint{ font-size:11px; color:var(--muted); margin-top:5px; }

.admin-top{ display:flex; align-items:center; justify-content:space-between; padding:24px 0; border-bottom:1px solid var(--border); }
.admin-top h2{ font-size:20px; }
.admin-top .who{ font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.admin-top .right{ display:flex; align-items:center; gap:12px; }

.admin-tabs{ display:flex; gap:4px; padding:16px 0; flex-wrap:wrap; }
.admin-tab{
  font-family:inherit; font-size:13px; cursor:pointer; padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid transparent; background:transparent; color:var(--muted);
}
.admin-tab.on{ background:var(--surface-2); color:var(--text); border-color:var(--border); }

.admin-panel{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.admin-panel .panel-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); }
.admin-panel .panel-head h3{ font-size:15px; }

.admin-row{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border); }
.admin-row:last-child{ border-bottom:none; }
.admin-row .rthumb{ width:52px; height:42px; border-radius:8px; background:var(--surface-2); flex-shrink:0; border:1px solid var(--border); object-fit:cover; }
.admin-row .rmain{ flex:1; min-width:0; }
.admin-row .rmain .t{ font-size:14px; font-weight:600; }
.admin-row .rmain .s{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-row .ract{ display:flex; gap:6px; }

.icon-btn{
  width:34px; height:34px; border:1px solid var(--border); border-radius:8px; background:var(--surface);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ color:var(--text); border-color:var(--text); }
.icon-btn.danger:hover{ color:#dc2626; border-color:#dc2626; }

.badge{ font-size:11px; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); border:1px solid var(--border); }
.badge.on{ background:#111110; color:#fbfbf9; border-color:#111110; }

.empty{ padding:36px 18px; text-align:center; color:var(--muted); font-size:13px; }

/* Modal（新增/編輯用的彈窗） */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200;
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto;
}
.modal-backdrop[hidden]{ display:none; }
.modal{
  background:var(--bg); width:100%; max-width:440px; border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.modal .m-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); }
.modal .m-head h3{ font-size:16px; }
.modal .m-body{ padding:18px; }
.modal .m-foot{ display:flex; gap:10px; padding:16px 18px; border-top:1px solid var(--border); }

/* 圖片上傳區 */
.upload{
  border:1.5px dashed var(--border); border-radius:var(--radius-sm); padding:18px; text-align:center;
  color:var(--muted); font-size:13px; cursor:pointer;
}
.upload:hover{ border-color:var(--text); }
.upload img{ max-height:120px; margin:0 auto 8px; border-radius:6px; }

/* 提示訊息 */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:10px 20px; border-radius:999px; font-size:14px;
  z-index:300; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* 載入骨架 */
.skeleton{ background:linear-gradient(90deg,var(--surface-2),#eae8e2,var(--surface-2)); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:var(--radius-sm); }
@keyframes sk{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* 設定提醒橫幅（沒填 Supabase 設定時顯示） */
.setup-banner{
  background:#fef3c7; color:#92400e; border:1px solid #fde68a; border-radius:var(--radius);
  padding:14px 16px; font-size:13px; line-height:1.6; margin:16px 0;
}
.setup-banner code{ background:rgba(146,64,14,.12); padding:1px 6px; border-radius:4px; font-family:var(--font-mono); font-size:12px; }