:root{
  --bg:#fbf7f2;
  --card:#ffffff;
--text:#3e2f27;   /* 主文字 深棕 */
--muted:#7a5c4f;  /* 次文字 淺棕 */
  --line:#e9dfd2;
  --accent:#c47b5a;
--accent2:#6a4f42;
  --radius:18px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Microsoft JhengHei", "PingFang TC", Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;

  /* 防君子：禁止選取（下面會開放部分文字可選） */
  -webkit-user-select:none;
  user-select:none;
}
a{color:inherit}
.wrap{
  width: min(100% - 56px, 1080px);
  margin: 0 auto;
  padding: 40px 0 56px;
}

.nav{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;

  position:fixed;   /* ⭐ 改這裡 */
  top:0;
  left:0;
  width:100%;

  background:rgba(251,247,242,.92);
  border-bottom:1px solid var(--line);
  padding:14px 22px;

  z-index:9999;
}
/* backdrop-filter 支援才會套用 */
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .nav{
    background:rgba(251,247,242,.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.4px;
}
.navlinks a{color:var(--accent2);text-decoration:none;margin-left:14px;font-weight:900}

.hero{
  padding:100px 0 18px;
  display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;
}
.pill{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--accent2);background:#fff}
h1{font-size:40px;line-height:1.2;margin:14px 0 10px}
p{margin:10px 0;color:var(--muted)}
.small{font-size:14px}
.note{margin-top:10px}

.btns{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;padding:12px 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-weight:900;
}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

@media (max-width: 700px){
.wrap{
  width: min(100% - 56px, 1080px);
  margin: 0 auto;
  padding: 40px 0 56px;
}

  .card{
    padding: 16px;
  }
}


.section{padding:34px 0}
.section h2{margin:0 0 12px;font-size:22px}
.kicker{color:var(--accent2);font-weight:900;margin-bottom:6px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.email{font-size:18px;margin:0}

/* 允許部分文字可選（避免你想複製 Email 時卡住） */
.section p, .section li, .section h2, .hero p, .hero h1, .brand, .navlinks a, .email{
  -webkit-user-select:text;
  user-select:text;
}

/* ===== 展示圖：浮水印＋防拖拉另存（防君子）===== */
.thumb{
  -webkit-user-drag: none;
  user-drag: none;
}


/* 用 aspect-ratio + fallback（更穩） */
.thumb-wrap{
  position:relative;
  width:80;
  border-radius:14px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#fff;
}

/* 支援 aspect-ratio 的瀏覽器 */
@supports (aspect-ratio: 4 / 3) {
  .thumb-wrap{ aspect-ratio: 1 / 1; }
}

/* 不支援 aspect-ratio 的 fallback：用 padding 撐 4:3 */
@supports not (aspect-ratio: 4 / 3) {
  .thumb-wrap::before{
    content:"";
    display:block;
    padding-top:75%; /* 3/4 = 75% */
  }
  .thumb-wrap img.thumb{
    position:absolute;left:0;top:0;
  }
}

.thumb-wrap img.thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  border-radius:0;
}

.thumb-wrap::after{
  content: attr(data-wm);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) rotate(-18deg);
  font-weight:900;
  letter-spacing:1px;
  font-size:20px;
  color: rgba(122, 106, 90, 0.22);
  padding:8px 14px;
  border:1px solid rgba(233, 223, 210, 0.55);
  border-radius:999px;
  background: rgba(251, 247, 242, 0.35);
  pointer-events:none;
}
/* ===== 浮水印比例微調（低調版）===== */
.thumb-wrap::after{
  font-size:12px;
  letter-spacing:0.4px;
  padding:5px 8px;
  color: rgba(122, 106, 90, 0.12);
  background: rgba(251, 247, 242, 0.18);
}

/* ===== 分類橫向滑動作品區 ===== */
.work-section{margin-bottom:32px}
.work-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px;
}
.work-title{
  font-size:18px;
  font-weight:900;
  margin:0;
  color:var(--text);
}
.work-count{
  font-size:13px;
  font-weight:900;
  color:var(--accent2);
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
}

.work-scroll{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}
.work-scroll::-webkit-scrollbar{height:6px}
.work-scroll::-webkit-scrollbar-thumb{
  background:var(--line);
  border-radius:999px;
}

.work-card{
  min-width:150px;
  scroll-snap-align:start;
  flex-shrink:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
}
.work-card p{
  margin:8px 0 0;
  text-align:center;
  color:var(--text);
}

.footer{padding:28px 0 12px;text-align:center;color:#8a7b6c;font-size:14px}

@media (max-width: 700px){
  .hero{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  h1{font-size:34px}
  .work-card{min-width:210px}
}
/* ===== 燈箱放大預覽（不提供下載） ===== */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox.hidden{
  display: none;
}

.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}

.lightbox-content{
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  background: #fff;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  z-index: 1;
}

.lightbox-content img{
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;

  /* 防君子 */
  pointer-events: none;
  -webkit-user-drag: none;
}

#lightbox-video{
  display: none;
  max-width: 100%;
  max-height: 80vh;
  border-radius: 10px;
}
/* ===== 作品集左右雙欄排列 ===== */
.work-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

/* 單一分類卡 */
.work-section{
  margin-bottom: 0;
}

/* 手機版改回單欄 */
@media (max-width: 900px){
  .work-row{
    grid-template-columns: 1fr;
  }
}
/* ===== 保證變成橫向滑動（強制覆蓋版）===== */
.work-scroll{
  display: flex !important;
  flex-wrap: nowrap !important;       /* 不准換行 */
  overflow-x: auto !important;        /* 允許左右滑 */
  overflow-y: hidden !important;
  gap: 10px !important;
  padding-bottom: 10px !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.work-card{
  flex: 0 0 170px !important;         /* 固定卡片寬度 */
  width: 170px !important;
  max-width: 170px !important;
  scroll-snap-align: start;
}

.thumb-wrap{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;     /* 你要整體縮小就用 1:1 */
}

@media (max-width: 900px){
  .work-card{
    flex: 0 0 150px !important;
    width: 150px !important;
    max-width: 150px !important;
  }
}
/* ✅ Grid 內要允許內容縮小，橫向 overflow 才會生效 */
.work-row > *{
  min-width: 0;
}
.work-section{
  min-width: 0;
}
.work-scroll{
  min-width: 0;
}
/* ===== 手機 Menu（工作室質感） ===== */
.menu-btn{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  color:var(--accent2);
  cursor:pointer;
}

.mobile-menu.hidden{ display:none; }

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:9998;
}

.mobile-menu-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}

.mobile-menu-panel{
  position:absolute;
  right:14px;
  top:66px;                 /* 會在表頭下方展開 */
  width:min(320px, calc(100vw - 28px));
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  overflow:hidden;
}

.mobile-menu-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background: rgba(251,247,242,.85);
}

.mobile-menu-title{
  font-weight:900;
  color:var(--accent2);
}

.menu-close{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:900;
  color:var(--accent2);
}

.mobile-menu-links{
  display:flex;
  flex-direction:column;
  padding:10px;
  gap:8px;
}

.mobile-menu-links a{
  text-decoration:none;
  color:var(--text);
  font-weight:900;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background: #fff;
}

.mobile-menu-links a:active{
  transform: scale(.99);
}

/* 手機版：隱藏桌機導覽，顯示 Menu 按鈕 */
@media (max-width: 700px){
  .navlinks{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; gap:8px; }
  .nav{ padding: 10px 14px; gap: 10px; }
  .brand{ font-size:14px; white-space:nowrap; }
}
/* ===== Lightbox 左右箭頭 ===== */
.lb-arrow{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  color: var(--accent2);
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-prev{ left: 16px; }
.lb-next{ right: 16px; }

@media (max-width: 700px){
  .lb-arrow{
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
}
/* ===== Lightbox 內容顯示規則 ===== */
#lightbox-img, #lightbox-video, #lightbox-embed{
  display:none;
  width: min(1000px, 90vw);
  max-height: 80vh;
  border-radius: 12px;
}

/* 圖片 */
#lightbox-img{
  object-fit: contain;
}

/* mp4 */
#lightbox-video{
  background:#000;
}

/* 影片 iframe（預設給橫式 16:9） */
#lightbox-embed{
  aspect-ratio: 16 / 9;
  border: 0;
  background:#000;
}

/* 如果你想 Shorts 直式更好看：加一個直式 class 用 */
#lightbox-embed.portrait{
  width: min(420px, 90vw);
  aspect-ratio: 9 / 16;
}

/* ===== 作品集專用播放器 ===== */
#lightbox-img,
#lightbox-video,
#lightbox-embed{
  display:none;
  width:min(1000px, 90vw);
  max-height:80vh;
  border-radius:12px;
}

#lightbox-img{
  object-fit:contain;
  background:#fff;
}

#lightbox-video{
  background:#000;
}

#lightbox-embed{
  aspect-ratio:16 / 9;
  border:0;
  background:#000;
}

/* Shorts / 直式影片 */
#lightbox-embed.portrait,
#lightbox-video.portrait{
  width:min(420px, 90vw);
  aspect-ratio:9 / 16;
  max-height:80vh;
}

.lb-arrow{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  z-index:10000;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  color:var(--accent2);
  font-size:28px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.lb-prev{ left:18px; }
.lb-next{ right:18px; }

.lb-arrow:hover{
  background:#fff;
}

@media (max-width: 700px){
  .lb-arrow{
    width:36px;
    height:36px;
    font-size:22px;
  }
  .lb-prev{ left:10px; }
  .lb-next{ right:10px; }
}

/* ===== Lightbox 修正版 ===== */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox.hidden{
  display: none;
}

.lightbox-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}

.lightbox-content{
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 預設三種都先隱藏，由 JS 決定顯示哪個 */
#lightbox-img,
#lightbox-video,
#lightbox-embed{
  display: none;
  width: min(1000px, 90vw);
  max-height: 80vh;
  border-radius: 12px;
  background: #000;
}

/* 圖片 */
#lightbox-img{
  object-fit: contain;
  background: #fff;
}

/* 本機影片 */
#lightbox-video{
  background: #000;
}

/* YouTube / Vimeo 預設橫式 */
#lightbox-embed{
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Shorts / 直式影片 */
#lightbox-video.portrait,
#lightbox-embed.portrait{
  width: min(420px, 90vw);
  aspect-ratio: 9 / 16;
}

/* 關閉鍵 */
.lightbox-close{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10001;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.95);
  color: var(--accent2);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 左右箭頭 */
.lb-arrow{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  color: var(--accent2);
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-prev{ left: 16px; }
.lb-next{ right: 16px; }

@media (max-width: 700px){
  .lightbox-close{
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .lb-arrow{
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  .lb-prev{ left: 10px; }
  .lb-next{ right: 10px; }
}

/* ===== 全站響應式修正 ===== */
html, body{
  width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

img, video, iframe{
  max-width: 100%;
  height: auto;
  display: block;
}

.wrap{
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: clamp(14px, 3vw, 28px);
}

/* grid 子元素要能縮，不然手機會被撐爆 */
.work-row > *,
.two > *,
.work-section,
.work-scroll,
.card{
  min-width: 0;
}

/* ===== 平板版 ===== */
@media (max-width: 1024px){
  .hero{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .two{
    grid-template-columns: 1fr;
  }

  .work-row{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .nav{
    padding: 12px 16px;
  }

  .navlinks a{
    margin-left: 10px;
    font-size: 14px;
  }
}

/* ===== 手機版 ===== */
@media (max-width: 700px){
 @media (max-width: 700px){
  .wrap{
    width: min(100% - 32px, 100%);
    padding: 20px 0 32px;
  }

  .hero,
  .section,
  .footer{
    padding-left: 6px;
    padding-right: 6px;
  }

  .card{
    padding: 16px;
  }
}

  h1{
    font-size: 28px;
    line-height: 1.3;
  }

  .nav{
    padding: 10px 14px;
    gap: 10px;
  }

  .brand{
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .two{
    grid-template-columns: 1fr;
  }

  .work-row{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 作品橫向滑動卡片尺寸 */
  .work-scroll{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .work-card{
    flex: 0 0 140px;
    width: 140px;
    max-width: 140px;
    padding: 8px;
    scroll-snap-align: start;
  }

  .thumb-wrap{
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .work-card p{
    font-size: 12px;
    line-height: 1.4;
    margin-top: 6px;
  }

  .section{
    padding: 20px 0;
  }

  .card{
    padding: 14px;
  }

  .btns{
    gap: 10px;
  }

  .btn{
    width: 100%;
    text-align: center;
  }
}

/* 主要區塊不要貼邊 */
.hero,
.section,
.footer{
  padding-left: 12px;
  padding-right: 12px;
}

.logo{
  height:28px;
  width:auto;
  object-fit:contain;
}