/* Kol Pie MVP — 少量自訂樣式（主要外觀用 Tailwind） */
/* 設計 token 與 assets/js/theme.js 保持同步 */
:root{
  --brand:#C0492B;        /* 磚橙：食慾／CTA */
  --brand-dark:#9C3921;
  --paper:#FAF6F0;        /* 奶油紙底 */
  --ink:#2C2320;          /* 暖啡黑 */
  --espresso:#261B14;     /* 深焙啡 */
  --gold:#A9742C;         /* 奶茶金：Pro */
  --gold-dark:#875C22;
  --tea:#3C7A56;          /* 茶綠：驗證／成功 */
}

/* ---------- 配圖規範：比例由 wrapper 控制，圖片統一 object-cover ---------- */
.media{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#F2E8DC 0%,#E6D4BF 100%);
}
.img-cover{ display:block; width:100%; height:100%; object-fit:cover; }
/* 編輯式慢速 zoom（hover 裝置先有） */
.media-zoom{ transition:transform .6s ease; }
@media (hover:hover){ .group:hover .media-zoom{ transform:scale(1.045); } }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
/* 跳去主內容（鍵盤導航） */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;
  font-size:14px;font-weight:700;
}
.skip-link:focus{ left:0; }
/* 全域 focus ring（鍵盤導航） */
*:focus{ outline:none; }
*:focus-visible{ outline:2px solid var(--brand);outline-offset:2px;border-radius:3px; }
body{
  font-family:"PingFang HK","Microsoft JhengHei","Noto Sans TC",system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
}
/* 港式印章標記 */
.stamp{
  display:inline-flex;align-items:center;gap:4px;
  border:1.5px solid var(--brand);color:var(--brand);
  border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700;letter-spacing:.05em;
}
input,select,textarea{ font-family:inherit; }
.field{
  width:100%;border:1.5px solid #d8d2c8;border-radius:10px;padding:10px 12px;
  background:#fff;font-size:14.5px;color:var(--ink);outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field:focus{ border-color:var(--brand);box-shadow:0 0 0 3px rgba(192,73,43,.12); }
label.lbl{ display:block;font-size:13px;font-weight:700;color:#3c4150;margin-bottom:5px; }
.req{ color:var(--brand); }

/* Toast */
#toast-wrap{ position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px; }
.toast{
  min-width:240px;max-width:90vw;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:0 8px 24px rgba(30,20,10,.16);animation:toast-in .25s ease;text-align:center;
}
.toast-success{ background:#166534;color:#fff; }
.toast-error{ background:#9b1c1c;color:#fff; }
.toast-info{ background:var(--espresso);color:#fff; }
@keyframes toast-in{ from{opacity:0;transform:translateY(-10px);} to{opacity:1;transform:none;} }

/* Modal */
.modal-mask{ position:fixed;inset:0;background:rgba(25,22,18,.55);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px; }
.modal-card{ background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.25); }
.modal-card:focus{ outline:none; }
.modal-close{
  position:absolute;top:14px;right:18px;font-size:22px;color:#8b867c;cursor:pointer;line-height:1;
  background:none;border:0;padding:2px 6px;border-radius:8px;
}
.modal-close:hover{ color:#2C2320;background:#F5F5F4; }
.modal-close:focus-visible{ outline:2px solid var(--brand);outline-offset:2px; }

/* 卡片 hover */
.job-card{ transition:transform .15s ease, box-shadow .15s ease; }
.job-card:hover{ transform:translateY(-2px);box-shadow:0 14px 30px rgba(120,70,40,.12); }

/* Hero 格仔背景 */
.grid-bg{
  background-image:linear-gradient(rgba(192,73,43,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(192,73,43,.05) 1px,transparent 1px);
  background-size:28px 28px;
}

/* ============================================================
 * 媒體升級（v2）：scrim、質感卡、浮動動畫
 * ============================================================ */
/* 圖片由下而上嘅暖色漸層遮罩（承托白字／標籤） */
.scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(38,27,20,.82) 0%, rgba(38,27,20,.30) 42%, rgba(38,27,20,0) 66%);
}
.scrim-tight{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(38,27,20,.78) 0%, rgba(38,27,20,0) 55%);
}
/* 圖上白字陰影 */
.text-shadow{ text-shadow:0 2px 14px rgba(20,12,6,.5); }
/* 圖片淡入（配 is-loaded） */
.img-fade{ opacity:0; transition:opacity .55s ease; }
.img-fade.is-loaded{ opacity:1; }
/* hero 拼貼漂浮（節制、慢速） */
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-7px) rotate(-3deg);} }
.floaty{ animation:floaty 5.5s ease-in-out infinite; }

/* 聊天室「等你確認合作」醒目卡：開卡時一圈提示，唔循環 */
@keyframes pulseOnce{ 0%{ box-shadow:0 0 0 0 rgba(192,73,43,.4);} 70%{ box-shadow:0 0 0 10px rgba(192,73,43,0);} 100%{ box-shadow:0 0 0 0 rgba(192,73,43,0);} }
.animate-pulse-once{ animation:pulseOnce 1.6s ease-out 1; }

/* 匿名鎖頭像：暖色斜紋，唔用真人相 */
.anon-avatar{
  background:
    repeating-linear-gradient(45deg,#EDE6DB 0,#EDE6DB 7px,#E2D8C9 7px,#E2D8C9 14px);
  color:#9A907F;
}

/* 深色承諾區配圖 */
.promise-media img{ filter:saturate(.85) contrast(1.05); }

/* ============ 月費聊天室：表情／圖片／影片 ============ */
.composer-tool{
  width:2.4rem;height:2.4rem;flex:0 0 auto;display:grid;place-items:center;
  border-radius:9999px;background:#F5F5F4;color:#57534E;font-size:1.05rem;line-height:1;
  transition:background .15s ease,color .15s ease,transform .1s ease;
}
.composer-tool:hover{ background:#FCEBE6;color:#C0492B; }
.composer-tool:active{ transform:scale(.92); }
.composer-tool:disabled{ opacity:.5;cursor:not-allowed; }
.composer-tool:focus-visible{ outline:2px solid #C0492B;outline-offset:2px; }

.emoji-panel{
  width:17.4rem;max-width:80vw;padding:.4rem;
  display:grid;grid-template-columns:repeat(8,1fr);gap:1px;
  background:#fff;border:1px solid #E7E5E4;border-radius:1rem;
  box-shadow:0 12px 30px rgba(60,40,25,.16);
}
.emoji-item{
  display:grid;place-items:center;padding:.3rem;border-radius:.5rem;font-size:1.1rem;line-height:1;
  transition:background .12s ease,transform .1s ease;
}
.emoji-item:hover{ background:#FCEBE6;transform:scale(1.15); }
.emoji-item:focus-visible{ outline:2px solid #C0492B;outline-offset:-2px; }

.chat-media{ border-radius:.85rem;overflow:hidden;background:rgba(0,0,0,.08); }
.chat-media img{
  display:block;max-width:15rem;max-height:15rem;width:auto;height:auto;
  object-fit:cover;cursor:zoom-in;
}
.chat-media video{
  display:block;max-width:15rem;max-height:14rem;width:auto;height:auto;background:#000;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important;transition:none!important; }
  .img-fade{ opacity:1; }
}