/* ============================================================
   components.css — 共用元件
   按鈕／標籤／狀態／圖片佔位／頭像／卡片（畫家、作品、許願、提案）／
   表單／篩選列／分段切換／提示框／清單列／表格／對話框／數字卡
   ============================================================ */

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.8rem 1.6rem; text-decoration:none; cursor:pointer;
  font-family:var(--f-body); font-size:1rem; font-weight:600; line-height:1.2;
  border:1px solid var(--ink); border-radius:var(--r-btn); background:var(--ink); color:#fff;
  transition:background .15s var(--ease),transform .15s var(--ease);
  touch-action:manipulation;
}
.btn:hover{ background:#2b2b2b; }
.btn:active{ transform:scale(.97); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--light{ background:var(--bg); color:var(--ink); border-color:var(--border); }
.btn--light:hover{ background:var(--bg-alt); }
.btn--invert{ background:var(--invert-fg); color:var(--invert-bg); border-color:var(--invert-fg); }
.btn--invert:hover{ background:#e6e6e6; }
.btn--danger{ background:transparent; color:var(--accent); border-color:var(--accent); }
.btn--danger:hover{ background:var(--accent); color:#fff; }
.btn--sm{ min-height:40px; padding:.5rem 1.1rem; font-size:.92rem; }
.btn--block{ width:100%; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* Google 登入按鈕（依 Google 品牌規範：白底、灰框、彩色 G） */
.btn--google{ background:#fff; color:#1f1f1f; border-color:#747775; font-weight:500; }
.btn--google:hover{ background:#f8f9fa; }
.btn--google svg{ width:20px; height:20px; }

/* ---------- 標籤（風格、題材） ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:0; }
.tag{
  display:inline-flex; align-items:center; font-size:.8rem; font-weight:500; line-height:1.2;
  padding:.3rem .7rem; border:1px solid var(--border); border-radius:var(--r-btn); background:var(--bg); color:var(--ink);
}

/* ---------- 狀態標示 ---------- */
.status{
  display:inline-flex; align-items:center; gap:.35rem; flex:none; white-space:nowrap;
  font-size:.8rem; font-weight:600; line-height:1.2; padding:.3rem .7rem; border-radius:var(--r-btn);
  color:var(--ink-soft); background:var(--bg-alt); border:1px solid var(--border);
}
.status::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:currentColor; }
.status--ok{   color:var(--ok);     background:var(--ok-bg);     border-color:var(--ok-border); }
.status--warn{ color:var(--warn);   background:var(--warn-bg);   border-color:var(--warn-border); }
.status--bad{  color:var(--accent); background:var(--accent-bg); border-color:#f2c9c4; }

/* 客製委託標章 */
.badge{
  display:inline-flex; align-items:center; gap:.35rem; width:fit-content; font-size:.8rem; font-weight:600;
  padding:.3rem .7rem; border-radius:var(--r-btn);
  color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-border);
}
.badge svg{ width:14px; height:14px; }

/* ---------- 圖片佔位（接上資料庫後換成 <img>） ---------- */
.ph{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-img);
  --c:var(--ph-1);
  background:
    radial-gradient(circle at 70% 28%, rgba(255,255,255,.55) 0 13%, transparent 13.5%),
    linear-gradient(to top, color-mix(in srgb, var(--c) 70%, #000 12%) 0 32%, transparent 32%),
    linear-gradient(165deg, var(--c), color-mix(in srgb, var(--c) 85%, #000 8%));
}
.ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph--square{ aspect-ratio:1; }
.ph--wide{ aspect-ratio:3/2; }
.ph--2{ --c:var(--ph-2); } .ph--3{ --c:var(--ph-3); } .ph--4{ --c:var(--ph-4); }
.ph--5{ --c:var(--ph-5); } .ph--6{ --c:var(--ph-6); }

/* ---------- 頭像 ---------- */
.avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none; overflow:hidden;
  width:48px; height:48px; border-radius:50%;
  background:var(--bg-alt); border:1px solid var(--border);
  font-weight:700; font-size:1rem; color:var(--ink);
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar--sm{ width:32px; height:32px; font-size:.82rem; }
.avatar--lg{ width:96px; height:96px; font-size:1.8rem; }
.avatar--xl{ width:clamp(112px,20vw,160px); height:clamp(112px,20vw,160px); font-size:2.4rem; }

/* ---------- 收藏按鈕（愛心） ---------- */
.fav-btn{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,.94); cursor:pointer; color:var(--ink);
  transition:transform .15s var(--ease);
}
.fav-btn:hover{ transform:scale(1.06); }
.fav-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.fav-btn[aria-pressed="true"]{ color:var(--accent); }
.fav-btn[aria-pressed="true"] svg{ fill:currentColor; }
.card .fav-btn{ position:absolute; top:.65rem; right:.65rem; z-index:2; }

/* ============================================================
   卡片
   ============================================================ */
.card{ position:relative; display:flex; flex-direction:column; }
.card-link{ display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit; }
.card-link:hover .card-title{ text-decoration:underline; text-underline-offset:4px; }
.card-title{ font-size:1.1rem; font-weight:700; margin:0; }
.card-sub{ font-size:.92rem; color:var(--ink-soft); line-height:1.6; margin:.2rem 0 0; }

/* 畫家卡片：手機一欄時封面改橫的，避免卡片太長 */
@media (max-width:639px){ .artist-card .ph{ aspect-ratio:4/3; } }
.artist-card .card-body{ padding:.9rem .15rem 0; display:flex; flex-direction:column; gap:.7rem; }
.artist-card .who{ display:flex; align-items:center; gap:.7rem; }

/* 作品卡片 */
.work-card .card-body{ padding:.75rem .15rem 0; }
.work-card .card-title{ font-size:1rem; }
.work-meta{ font-size:.88rem; color:var(--ink-soft); margin:.15rem 0 0; }
.price{ font-weight:700; font-size:.98rem; margin:.35rem 0 0; }
.work-card .status{ position:absolute; left:.65rem; top:.65rem; z-index:2; }

/* 許願卡片 */
.wish-card{
  padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg);
  display:flex; flex-direction:column; gap:var(--sp-2);
}
.wish-quote{ margin:0; font-size:1.08rem; font-weight:500; line-height:1.8; }
.wish-facts{ display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; margin:0; font-size:.9rem; }
.wish-facts div{ display:flex; gap:.4rem; }
.wish-facts dt{ color:var(--ink-soft); }
.wish-facts dd{ margin:0; font-weight:600; }
.wish-foot{
  margin-top:auto; padding-top:var(--sp-2); border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem;
  font-size:.9rem; color:var(--ink-soft);
}
.wish-foot .more-link{ color:var(--ink); }

/* 畫家提案：只有文字＋畫家頁連結；預估價格只有許願者看得到 */
.proposal{ padding:var(--sp-3) 0; border-bottom:1px solid var(--border); }
.proposal:first-child{ padding-top:0; }
.proposal-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.proposal-artist{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:700; min-height:44px; }
.proposal-artist:hover span:last-child{ text-decoration:underline; text-underline-offset:4px; }
.proposal p{ margin:0; white-space:pre-line; }
.proposal-private{
  margin-top:.9rem; padding:.7rem 1rem; border-radius:var(--r-input); background:var(--bg-alt);
  display:flex; flex-wrap:wrap; gap:.25rem 1rem; align-items:center; justify-content:space-between; font-size:.92rem;
}
.proposal-private .muted{ font-size:.82rem; }
.proposal-actions{ margin-top:.9rem; }

/* ============================================================
   表單（沿用 demo submit.html 的結構：.field > .q + .hint + .ctrl + .err）
   ============================================================ */
.form-card{ padding:clamp(1.25rem,4vw,2rem); border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); }
.form-group{ padding-bottom:var(--sp-3); margin-bottom:var(--sp-3); border-bottom:1px solid var(--border); }
.form-group:last-of-type{ border-bottom:0; margin-bottom:0; }
.form-group > h2,.form-group > h3{ font-size:1.2rem; margin-bottom:var(--sp-3); }
.field{ margin-bottom:var(--sp-3); }
.field:last-child{ margin-bottom:0; }
.field-row{ display:grid; gap:0 var(--sp-3); grid-template-columns:1fr; align-items:end; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }
.field-row > .field{ margin-bottom:var(--sp-3); }   /* 同一列底部對齊，不吃 :last-child 的 0 */
.q{ display:block; font-weight:600; font-size:1rem; margin-bottom:.35rem; }
.req{ color:var(--accent); }
.hint{ display:block; font-size:.88rem; color:var(--ink-soft); line-height:1.65; margin-bottom:.55rem; }
.ctrl{
  display:block; width:100%; min-height:48px; padding:.7rem 1rem;
  font:inherit; font-size:1rem; color:var(--ink); background:var(--bg);
  border:1px solid #cfcfcf; border-radius:var(--r-input);
  transition:border-color .15s var(--ease);
}
.ctrl:hover{ border-color:#9a9a9a; }
.ctrl:focus{ border-color:var(--ink); outline:none; box-shadow:0 0 0 3px rgba(45,93,161,.25); }
.ctrl:disabled{ background-color:var(--bg-alt); color:var(--ink-soft); border-color:var(--border); cursor:not-allowed; }   /* 停用的欄位（例如媒材選電繪時的底材） */
textarea.ctrl{ min-height:8rem; resize:vertical; line-height:1.7; }
select.ctrl{
  appearance:none; padding-right:2.5rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:16px;
}
.counter{ display:block; margin-top:.4rem; font-size:.85rem; color:var(--ink-soft); text-align:right; }
.err{ display:none; margin:.45rem 0 0; font-size:.9rem; color:var(--accent); }
.field.is-invalid .ctrl{ border-color:var(--accent); }
.field.is-invalid .err{ display:block; }
.pair{ display:flex; align-items:center; gap:.6rem; }
.pair > span{ color:var(--ink-soft); flex:none; }
.ctrl-prefix{ position:relative; }
.ctrl-prefix > span{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none; }
.ctrl-prefix .ctrl{ padding-left:2.1rem; }

/* 膠囊選項（單選／複選） */
.opts{ display:flex; flex-wrap:wrap; gap:.5rem; border:0; padding:0; margin:0; }
.opt{ position:relative; }
.opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.opt span{
  display:inline-flex; align-items:center; min-height:44px; padding:.55rem 1.1rem; cursor:pointer;
  border:1px solid #cfcfcf; border-radius:var(--r-btn); font-size:.95rem; background:var(--bg);
}
.opt input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.opt input:focus-visible + span{ outline:3px solid var(--accent2); outline-offset:2px; }

/* 一般勾選框 */
.check{ display:flex; gap:.6rem; align-items:flex-start; min-height:44px; padding-top:.6rem; cursor:pointer; font-size:.98rem; }
.check input{ width:20px; height:20px; margin:.15rem 0 0; flex:none; accent-color:var(--ink); }

/* 圖片上傳 */
.pick{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  aspect-ratio:4/5; width:100%; overflow:hidden; cursor:pointer; text-align:center;
  border:1px dashed var(--border-strong); border-radius:var(--r-img); background:var(--bg-alt);
  font-size:.88rem; color:var(--ink-soft); line-height:1.5; padding:1rem;
}
.pick:hover{ background:#ebebeb; }
.pick svg{ width:26px; height:26px; color:var(--ink); }
.pick input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.pick:has(input:focus-visible){ outline:3px solid var(--accent2); outline-offset:3px; }
.pick--round{ width:120px; height:120px; aspect-ratio:auto; border-radius:50%; }

.form-actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:flex-end; padding-top:var(--sp-3); margin-top:var(--sp-3); border-top:1px solid var(--border); }
.form-actions .muted{ margin:0 auto 0 0; font-size:.88rem; }

/* ---------- 篩選列（找畫家、許願牆） ---------- */
.filters{
  display:grid; gap:.75rem; grid-template-columns:1fr; align-items:end;
  padding:var(--sp-2); border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg);
  margin-bottom:var(--sp-3);
}
@media (min-width:640px){ .filters{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .filters{ grid-template-columns:2fr repeat(3,1fr) auto; } }
.filters .q{ font-size:.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:.25rem; }
.filters .check{ padding-top:0; align-items:center; min-height:48px; }
.search-ctrl{ position:relative; }
.search-ctrl svg{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-soft); pointer-events:none; }
.search-ctrl .ctrl{ padding-left:2.6rem; }
.result-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:var(--sp-3); }
.result-bar p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* 篩選小籤（許願牆題材） */
.chips{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; margin-bottom:var(--sp-3); }
.chips .opt{ flex:none; }

/* 分段切換（看畫家／看作品） */
.seg{ display:inline-flex; padding:.25rem; border-radius:var(--r-btn); background:var(--bg-alt); border:1px solid var(--border); }
.seg a,.seg button{
  display:inline-flex; align-items:center; min-height:40px; padding:.4rem 1.1rem; border-radius:var(--r-btn);
  text-decoration:none; font-weight:600; font-size:.92rem; color:var(--ink-soft); border:0; background:none; cursor:pointer;
}
.seg [aria-current="true"],.seg [aria-selected="true"]{ background:var(--bg); color:var(--ink); box-shadow:var(--shadow-sm); }

/* ---------- 提示框 ---------- */
.notice{
  padding:1rem 1.25rem; border:1px solid var(--border); border-radius:var(--r-input);
  background:var(--bg-alt); font-size:.98rem; line-height:1.75;
  display:flex; gap:.75rem; align-items:flex-start;
}
.notice svg{ width:20px; height:20px; flex:none; margin-top:.2rem; }
.notice p{ margin:0; max-width:none; }
.notice strong{ display:block; }
.notice--ok{   color:var(--ok);     background:var(--ok-bg);     border-color:var(--ok-border); }
.notice--warn{ color:var(--warn);   background:var(--warn-bg);   border-color:var(--warn-border); }
.notice--bad{  color:var(--accent); background:var(--accent-bg); border-color:#f2c9c4; }
.notice + *{ margin-top:var(--sp-3); }

/* 空狀態 */
.empty{
  text-align:center; padding:var(--sp-4) var(--sp-2); border:1px dashed var(--border); border-radius:var(--r-card);
  color:var(--ink-soft);
}
.empty p{ margin:0 auto var(--sp-2); }

/* ---------- 清單列（詢問、許願、提案紀錄） ---------- */
.rows{ list-style:none; border-top:1px solid var(--border); }
.row{ display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; padding:1.1rem 0; border-bottom:1px solid var(--border); }
.row-main{ min-width:0; flex:1; }
.row-main h3{ font-size:1rem; margin-bottom:.2rem; }
.row-main h3 a{ text-decoration:none; }
.row-main h3 a:hover{ text-decoration:underline; text-underline-offset:4px; }
.row-main p{ margin:0; font-size:.94rem; color:var(--ink-soft); }
.row-main .quote{ color:var(--ink); margin-top:.35rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.row-side{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; flex:none; font-size:.85rem; color:var(--ink-soft); }

/* ---------- 表格（管理後台） ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-card); }
.table{ width:100%; border-collapse:collapse; font-size:.94rem; min-width:640px; }
.table th,.table td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; }
.table th{ font-size:.8rem; font-weight:600; color:var(--ink-soft); background:var(--bg-alt); white-space:nowrap; }
.table tr:last-child td{ border-bottom:0; }
.table .who{ display:flex; align-items:center; gap:.6rem; font-weight:600; }
.table .actions{ white-space:nowrap; text-align:right; }

/* ---------- 數字卡 ---------- */
.stat{ padding:1.1rem 1.25rem; border:1px solid var(--border); border-radius:var(--r-card); background:var(--bg); }
.stat-label{ font-size:.85rem; color:var(--ink-soft); margin:0; }
.stat-value{ font-family:var(--f-head); font-weight:800; font-size:1.9rem; letter-spacing:-.02em; margin:.15rem 0 0; }
.stat-note{ font-size:.82rem; color:var(--ink-soft); margin:.1rem 0 0; }

/* ---------- 對話框（詢問、許願） ---------- */
.dialog{
  width:min(560px,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); padding:0;
  border:0; border-radius:var(--r-card); box-shadow:var(--shadow-lg); color:var(--ink);
}
.dialog::backdrop{ background:rgba(17,17,17,.45); }
.dialog-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border); }
.dialog-head h2{ font-size:1.2rem; }
.dialog-body{ padding:1.5rem; }
.dialog .form-actions{ margin-top:0; padding:1rem 1.5rem; }
.close-btn{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none;
  border:1px solid var(--border); border-radius:50%; background:var(--bg); cursor:pointer;
}
.close-btn svg{ width:16px; height:16px; }

/* 登入提示（按下「詢問／許願」等需要登入的按鈕時跳出；js/site-chrome.js 產生） */
.dialog--sm{ width:min(420px,calc(100vw - 2rem)); }
.login-prompt{ display:flex; flex-direction:column; gap:.75rem; text-align:center; }
.login-prompt .btn{ width:100%; }
.login-prompt-lead{ margin:0 0 .25rem; font-size:1.05rem; font-weight:600; max-width:none; }
.login-prompt-note{ margin:0; font-size:.88rem; color:var(--ink-soft); max-width:none; }

/* ---------- 麵包屑 ---------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; font-size:.88rem; color:var(--ink-soft); margin-bottom:var(--sp-3); }
.crumbs li + li::before{ content:"/"; margin-right:.4rem; color:var(--border-strong); opacity:.35; }
.crumbs a{ text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- 資料載入中（骨架）／讀取失敗 ---------- */
.skel .ph,.skel-block{ background:var(--skel); animation:skel-pulse 1.4s ease-in-out infinite; }
.skel .avatar{ background:var(--skel); border-color:transparent; animation:skel-pulse 1.4s ease-in-out infinite; }
.skel-line{ display:block; height:.85em; max-width:100%; border-radius:6px; background:var(--skel); margin-top:.7rem; animation:skel-pulse 1.4s ease-in-out infinite; }
.skel-line--title{ height:1.6em; width:min(60%,18rem); }
.skel-line--short{ width:55%; }
.skel-line--mid{ width:80%; }
@keyframes skel-pulse{ 50%{ opacity:.5; } }
@media (prefers-reduced-motion:reduce){ .skel .ph,.skel-block,.skel .avatar,.skel-line{ animation:none; } }
.empty--bad{ color:var(--accent); border-color:#f2c9c4; background:var(--accent-bg); }
.empty .btn{ margin-top:.25rem; }
/* 整頁的「找不到」畫面（畫家頁、作品頁） */
.not-found{ max-width:32rem; margin-inline:auto; padding-block:var(--sp-4); text-align:center; }
.not-found h1{ font-size:clamp(1.5rem,4vw,2rem); margin-bottom:.75rem; }
.not-found p{ color:var(--ink-soft); margin:0 auto var(--sp-3); }
.not-found .btn-row{ justify-content:center; }
/* 篩選功能還沒開放時的說明 */
.filters-note{ margin:calc(-1 * var(--sp-2)) 0 var(--sp-3); font-size:.88rem; color:var(--ink-soft); max-width:none; }

/* ---------- 載入更多 ---------- */
.load-more{ display:flex; justify-content:center; margin-top:var(--sp-4); }