:root{
    --bg: #0f0f10;
    --bg2:#0b0b0c;
    --txt:#f2f2f2;
    --muted: rgba(242,242,242,.62);
    --line: rgba(242,242,242,.12);
    --max: 1200px;
    --pad: clamp(16px, 3vw, 28px);
    --radius: 16px;
    --heroH: 100svh;
    --mainBg: #f5f3ef;          /* 象牙白 */
    --mainBg2: #efece6;         /* 更深一點的淡灰 */
    --mainTxt: #1a1b1e;         /* 深字 */
    --mainMuted: rgba(26,27,30,.55);
    --mainLine: rgba(26,27,30,.12);
    --card: rgba(255,255,255,.72); /* 霧面卡片底 */
  }

  main{
    background: linear-gradient(to bottom, var(--mainBg), var(--mainBg2));
    color: var(--mainTxt);
  }
  
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
      "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    background: var(--bg);
    color: var(--txt);
    overflow-x:hidden;
  }
  
  /* Topbar */
  .topbar{
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    background: linear-gradient(to bottom, rgba(15,15,16,.75), rgba(15,15,16,.18), rgba(15,15,16,0));
    backdrop-filter: blur(10px);
  }
  .topbar__inner{
    max-width: var(--max);
    margin: 0 auto;
    padding: 14px var(--pad);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .brand{ display:flex; align-items:center; gap:10px; letter-spacing:.06em; font-weight:600; }
  .dot{
    width:10px;height:10px;border-radius:50%;
    background: rgba(242,242,242,.9);
    box-shadow: 0 0 18px rgba(242,242,242,.25);
  }
  .topnav{ display:flex; gap:18px; font-size: 13px; }
  .topnav__link{
    color: rgba(242,242,242,.72);
    text-decoration:none;
    padding: 8px 10px;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
  }
  .topnav__link:hover{ background: rgba(242,242,242,.06); color: rgba(242,242,242,.92); }
  .topnav__link.is-active{ background: rgba(242,242,242,.10); color: rgba(242,242,242,.95); }
  
  /* Hero */
  .hero{
    position: relative;
    height: 100svh;
    overflow: hidden;
  
    /* ✅ hero 自己仍然是深色，像一塊卡片放在淡底上 */
    background: radial-gradient(1200px 420px at 50% 20%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
                linear-gradient(to bottom, var(--bg), var(--bg2));
    color: var(--txt);
  
    /* ✅ 與 navbar 做出區隔（往下壓一點並加圓角） */
    /* margin: 18px var(--pad) 24px; */
    /* border-radius: 22px; */
  
    /* ✅ 讓邊緣有一點卡片感 */
    box-shadow: 0 40px 120px rgba(0,0,0,.35);
  }
  
  
  .hero__bg{
    position:absolute; inset:-20%;
    background:
      radial-gradient(900px 360px at 50% 75%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
      radial-gradient(700px 320px at 65% 55%, rgba(120,170,255,.08), rgba(0,0,0,0) 60%),
      radial-gradient(800px 380px at 35% 60%, rgba(140,255,200,.06), rgba(0,0,0,0) 60%);
  }
    
  .hero__content{
    z-index: 10;
    text-align: center;
    padding: 28px var(--pad) 10px;
    max-width: 980px;
    margin: 0 auto;
    pointer-events: none;
  }
  .hero__title{
    margin:0;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 600;
    letter-spacing: .02em;
  }
  .hero__subtitle{
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  
  /* 3D wall frame */
  .wall{
    position: relative;
    z-index: 6;
    display: grid;
  
    /* ✅ 讓牆在中段置中 */
    place-items: center;
  
    /* ✅ 這個很重要：讓它真的吃到 grid 的 1fr 高度 */
    min-height: 0;
  
    padding: 0 var(--pad);
  }
  
  .wall__frame{
    width: min(1200px, 96vw);
    height: clamp(420px, 52vh, 640px); /* ✅ 牆高度合理 */
    position: relative;
  }
       
  /* viewport provides perspective */
  .viewport{
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 900px;            /* 先不要太強 */
    perspective-origin: 50% 18%;   /* 明顯俯視但不會飛走 */
    touch-action: pan-y;
    user-select: none;
    overflow: visible;
  }
  
  .stage{
    position:absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(34deg) translateY(clamp(-240px, -18vh, -120px))
  }
  
  
  /* floor (subtle reflection / stage) */
  .floor{
    position:absolute;
    left:50%;
    bottom: 0px;
    transform: translateX(-50%) rotateX(90deg);
    transform-origin: center bottom;
    width: min(980px, 90%);
    height: 360px;
    background: radial-gradient(closest-side, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
    filter: blur(1px);
    opacity: .35;
    pointer-events:none;
  }
  
  
  /* card */
  .card{
    position:absolute;
    left:50%;
    top: 50%;
    transform-style: preserve-3d;
    border-radius: 18px;
    overflow:hidden;
  
    background: rgba(255,255,255,.03);
    box-shadow:
        0 45px 140px rgba(0,0,0,.85),
        inset 0 0 0 3px rgba(255,255,255,.78);
  
    backface-visibility: hidden;
    will-change: transform, opacity, filter;

    transform-origin: center center;
  }

    .card img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;             /* ✅ 讓留白有呼吸感 */
    background: transparent;
    }
  
  
  /* two ratios */
  .card.is-v{ width: clamp(160px, 16vw, 260px); aspect-ratio: 4 / 5; }
  .card.is-h{ width: clamp(240px, 24vw, 420px); aspect-ratio: 16 / 10; }
  
  /* nav buttons */
  .navBtn{
    position:absolute;
    top: 50%;                   /* ✅ 牆高度置中 */
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.10);
    color: rgba(242,242,242,.92);
    cursor:pointer;
    z-index: 40;
    display:grid;
    place-items:center;
    font-size: 26px;
  }
  
  .navBtn:hover{ background: rgba(255,255,255,.14); }
  .navBtn--left{ left: 12px; }
  .navBtn--right{ right: 12px; }
  
  /* dots + caption */
  .dots{
    position: absolute;
    left: 50%;
    bottom: 10px;              /* ✅ 在牆底部 */
    transform: translateX(-50%);
    display:flex;
    gap:10px;
    z-index: 30;
  }
  
  .dotBtn{
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background: rgba(255,255,255,.25);
    cursor:pointer;
  }
  .dotBtn.is-active{ background: rgba(255,255,255,.90); }
  
  .caption{
    position:absolute;
    left:50%;
    bottom: 46px;
    transform: translateX(-50%);
    text-align:center;
    z-index: 30;
    pointer-events:none;
  }
  .caption__title{
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(242,242,242,.85);
  }
  .caption__sub{
    margin-top: 6px;
    font-size: 12px;
    color: rgba(242,242,242,.58);
  }
  
  /* mobile */
  @media (max-width: 720px){
    .wall__frame{ height: 360px; }
    .navBtn{ display:none; }
    .hero__title{ font-size: clamp(28px, 7vw, 44px); }
  }
  
  /* Gallery + grid + lightbox (沿用你原本穩定版) */
  .gallery{
    background: transparent;
    padding-top: 0;
  }
  
  .gallery__header{
    max-width: var(--max);
    margin: 0 auto;
    padding: 56px var(--pad) 0;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 18px;
    border-top: 1px solid var(--line);
  }
  .gallery__title{
    margin:0;
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 600;
    letter-spacing: .02em;
  }
  .gallery__meta{
    margin:0;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  
  .grid{
    max-width: var(--max);
    margin: 0 auto;
    padding: 24px var(--pad) 56px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(14px, 2vw, 22px);
  }
  .tile{
    position: relative;
    display:block;
    border-radius: var(--radius);
    overflow:hidden;
    background: rgba(255,255,255,.03);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    cursor: pointer;
  }
  .tile img{
    width:100%; height:100%;
    object-fit: cover;
    display:block;
    transform: scale(1.0001);
    transition: transform .35s ease, opacity .35s ease;
  }
  .tile:hover img{ transform: scale(1.03); opacity: .98; }
  .tile__cap{
    position:absolute; inset:auto 0 0 0;
    padding: 14px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
    color: rgba(242,242,242,.88);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .25s ease;
  }
  .tile:hover .tile__cap{ opacity: 1; }
  .tile--v{ grid-column: span 4; aspect-ratio: 4 / 5; }
  .tile--h{ grid-column: span 6; aspect-ratio: 16 / 10; }
  @media (max-width: 1024px){
    .tile--v{ grid-column: span 6; }
    .tile--h{ grid-column: span 12; }
  }
  @media (max-width: 640px){
    .grid{ grid-template-columns: repeat(6, 1fr); }
    .tile--v{ grid-column: span 6; }
    .tile--h{ grid-column: span 6; }
  }
  
  .lightbox{ position: fixed; inset: 0; z-index: 80; display:none; }
  .lightbox.is-open{ display:block; }
  .lightbox__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.72); }
  .lightbox__panel{
    position:absolute;
    inset: 6vh var(--pad);
    max-width: 1100px;
    margin: 0 auto;
    border-radius: 18px;
    background: rgba(15,15,16,.88);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    box-shadow: 0 40px 120px rgba(0,0,0,.7);
    overflow:hidden;
  }
  .lb__figure{ height:100%; grid-template-rows: 1fr auto; }
  #lbImg{ width:100%; height:100%; object-fit: contain; background: rgba(0,0,0,.25); }
  .lb__caption{ padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.08); }
  .lb__title{ font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
  .lb__sub{ margin-top: 6px; color: var(--muted); font-size: 12px; }
  .lb__btn{
    position:absolute; top: 12px; width: 40px; height: 40px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: rgba(242,242,242,.92);
    cursor:pointer; display:grid; place-items:center;
  }
  .lb__btn:hover{ background: rgba(255,255,255,.12); }
  .lb__close{ right: 12px; }
  .lb__prev{ left: 12px; top: 50%; transform: translateY(-50%); font-size: 22px; }
  .lb__next{ right: 12px; top: 50%; transform: translateY(-50%); font-size: 22px; }
  
  .footer{ border-top: 1px solid rgba(255,255,255,.08); }
  .footer__inner{
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px var(--pad) 26px;
    display:flex;
    justify-content:space-between;
    color: rgba(242,242,242,.62);
    font-size: 12px;
  }
  .footer__toTop{ color: rgba(242,242,242,.72); text-decoration:none; }
  .footer__toTop:hover{ color: rgba(242,242,242,.92); }
  

/* ---------- Gallery Grid (Aligned) ---------- */
.gallery{
    max-width: var(--max);
    margin: 0 auto;
    padding: 44px var(--pad) 80px;
  }
  
  .gallery__header{
    max-width: var(--max);
    margin: 0 auto;
    padding: 28px var(--pad) 0;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: 18px;
  
    border-top: 1px solid var(--mainLine);
  }
  
  .gallery__title{
    color: var(--mainTxt);
  }
  
  .gallery__meta{
    color: var(--mainMuted);
  }
  
  
  /* ✅ grid：RWD、整齊 */
  .grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
  }
  
  /* 卡片 */
  .gItem{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 22px 70px rgba(0,0,0,.45);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease;
  }
  .gItem:hover{
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.18);
  }
  
  /* ✅ 直/橫固定比例（你只有兩種方向最適合） */
  .gItem.is-v{ aspect-ratio: 3 / 4; }
  .gItem.is-h{ aspect-ratio: 4 / 3; }  /* 想更扁可改 16/9 */
  
  /* 圖片：整齊視覺（cover） */
  .gItem img{
    width:100%;
    height:100%;
    display:block;
    object-fit: cover;
    object-position: center;
  }
  
  /* 下方資訊條（可刪） */
  .gCap{
    position:absolute;
    left:0; right:0; bottom:0;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
    color: rgba(255,255,255,.92);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  
  /* 手機更舒服 */
  @media (max-width: 560px){
    .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  
/* =========================
   Masonry + No-Crop Version
   固定卡片比例，但不裁圖
   ========================= */
   :root{
    --masonry-gap: 18px;
  }
  
  #grid{
    display: block !important;
    column-count: 4;
    column-gap: var(--masonry-gap);
  }
  
  @media (max-width: 1200px){ #grid{ column-count: 3; } }
  @media (max-width: 820px){  #grid{ column-count: 2; } }
  @media (max-width: 520px){  #grid{ column-count: 1; } }
  
  #grid .gItem{
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--masonry-gap);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  
    border-radius: 16px;
    overflow: hidden;
  
    background: transparent !important;              /* 或 var(--mainBg) */
    border: 1px solid rgba(0,0,0,.03) !important;   /* 降低存在感 */
    box-shadow: 0 6px 14px rgba(0,0,0,.04) !important;
  }
  
  /* 固定卡片比例：建立整齊節奏 */
  #grid .gItem.is-v{
    aspect-ratio: 3 / 4;
  }
  
  #grid .gItem.is-h{
    aspect-ratio: 16 / 10; /* 或 4/3，依你喜好 */
  }
  
  /* ✅ 不裁圖：完整顯示 */
  #grid .gItem img{
    width: 100%;
    height: 100% !important;
    display: block;
    object-fit: contain !important;
    object-position: center;
    background: transparent !important;  /* 不要再給白底 */
    padding: 0 !important;
  }
  
  /* 你現在沒顯示 caption，可維持 */
  #grid .gCap{
    display: none;
  }



/* =========================
   JADEN NAV (modernized)
   ========================= */
   .jHeader{
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 80;
    background: linear-gradient(to bottom, rgba(15,15,16,.78), rgba(15,15,16,.18), rgba(15,15,16,0));
    backdrop-filter: blur(10px);
  }
  
  .jHeader__inner{
    max-width: var(--max);
    margin: 0 auto;
    padding: 12px var(--pad);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
  }
  
  .jLogo img{
    height: 34px;
    width: auto;
    display:block;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  }
  
  /* desktop nav */
  .jNav__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    gap: 14px;
    align-items:center;
  }
  
  .jNav__list a{
    display:inline-block;
    color: rgba(242,242,242,.72);
    text-decoration:none;
    font-size: 13px;
    letter-spacing: .06em;
    padding: 8px 10px;
    border-radius: 999px;
    transition: background .2s ease, color .2s ease;
  }
  .jNav__list a:hover{
    background: rgba(242,242,242,.06);
    color: rgba(242,242,242,.92);
  }
  .jNav__list a.active{
    background: rgba(242,242,242,.10);
    color: rgba(242,242,242,.95);
  }
  
  /* hamburger */
  .jMenuBtn{
    display:none;
    width: 44px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    cursor:pointer;
  }
  .jMenuBtn span{
    display:block;
    width: 18px;
    height: 2px;
    margin: 4px auto;
    background: rgba(255,255,255,.85);
    border-radius: 2px;
  }
  
  /* mobile layout */
  @media (max-width: 920px){
    .jMenuBtn{ display:block; }
    .jNav{
      position: absolute;
      top: 62px;
      right: var(--pad);
      width: min(360px, calc(100vw - var(--pad) * 2));
      background: rgba(15,15,16,.88);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      box-shadow: 0 30px 90px rgba(0,0,0,.55);
      backdrop-filter: blur(10px);
      overflow:hidden;
      display:none;
    }
    .jNav.is-open{ display:block; }
  
    .jNav__list{
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
    .jNav__list li + li{ border-top: 1px solid rgba(255,255,255,.08); }
    .jNav__list a{
      padding: 12px 14px;
      border-radius: 0;
    }
  }
  
  /* =========================
     JADEN FOOTER (modernized)
     ========================= */
  .jFooter{
    margin-top: 52px;
    border-top: 1px solid rgba(242,242,242,.10);
    position: relative;
  }
  
  .jFooter__inner{
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px var(--pad) 40px;
    color: rgba(242,242,242,.62);
    font-size: 13px;
    line-height: 1.8;
  }
  .jFooter__inner p{ margin: 0; }
  
  /* toTop */
  .jToTop{
    position: absolute;
    right: var(--pad);
    top: 14px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display:grid;
    place-items:center;
    text-decoration:none;
    color: rgba(242,242,242,.85);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
  }
  .jToTop:hover{
    background: rgba(255,255,255,.12);
  }

    
  .siteFrame{
    width: 100%;
    border: 0;
    display: block;
    overflow: hidden;
    background: transparent;
  }
  
  .siteFrame--header{ height: 180px; }


  /* ✅ footer iframe full-bleed（突破父容器 max-width） */
#siteFooter{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; /* 置中後往左右拉滿 */
  border: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

/* ✅ footer (no iframe) */
.footer{
	padding: 1.5em 0px;
	background: #000000;
	margin-top: 10%;
}

.footer .small pt {
	color: #FFF;
}
.footer .text-info .text-info {
	font-family: "微軟正黑體";
	font-size: small;
  color: #FFFFFF;
  /* font-size: medium; */
  text-align: center;
  margin-top: 0px;
}

.gallery__right{
  display:flex;
  align-items:center;
  gap: 12px;
}

.yearSelect{
  appearance: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--mainLine);
  background: rgba(255,255,255,.55);
  color: var(--mainTxt);
  font-size: 12px;
  letter-spacing: .08em;
}
.yearSelect:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(26,27,30,.08);
}



/* =========================
   Global Watermark Overlay
   ========================= */
   .wmOverlay{
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;   /* ✅ 不擋操作 */
    overflow: hidden;
    }
    
    .wmPattern{
    position: absolute;
    inset: -10%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 120px 80px;
    align-content: center;
    justify-items: center;
    transform: rotate(-24deg) scale(1.05);
    }
    
    .wmPattern span{
    /* font-size: clamp(24px, 2.6vw, 42px); */
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255,255,255,.09);   /* 深色區會清楚 */
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    }
    
    /* 主內容淺底區域時，稍微再補一點深色陰影感 */
    .wmPattern span{
    text-shadow:
      0 1px 0 rgba(0,0,0,.03),
      0 0 1px rgba(0,0,0,.04);
    }
    
    @media (max-width: 768px){
    .wmPattern{
      grid-template-columns: repeat(2, 1fr);
      gap: 90px 40px;
      transform: rotate(-22deg) scale(1.08);
    }
    
    .wmPattern span{
      font-size: clamp(18px, 4vw, 28px);
      letter-spacing: .12em;
    }
    }

    /* =========================
   Hero center preview (sharp)
   ========================= */
.heroPreview{
  position: absolute;
  left: 50%;
  top: -5%;
  z-index: 26;
  transform: translate(-50%, -50%) translateY(200px);
  width: clamp(480px, 26vw, 440px);
  aspect-ratio: 16 / 10;
  pointer-events: auto;
}

.heroPreview.is-v{
  width: clamp(180px, 18vw, 280px);
  aspect-ratio: 4 / 5;
}

.heroPreview img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: 18px;
  box-shadow:
    0 45px 140px rgba(0,0,0,.65),
    inset 0 0 0 3px rgba(255,255,255,.78);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  padding: 10px;
}

@media (max-width: 720px){
  .heroPreview{
    transform: translate(-50%, -50%) translateY(100px);
    width: clamp(220px, 56vw, 320px);
  }

  .heroPreview.is-v{
    width: clamp(160px, 40vw, 220px);
  }
}