/* =================================
PAGE HEADER
================================ */
body{
  background:#F5F3F0 ;
}

.page-header{
  padding-top:80px;
  padding-bottom:10px;
  text-align:center;
}

.page-header__zh{
  font-size:28px;
  letter-spacing:.2em;
  margin-bottom:6px;
}

.page-header__en{
  font-size:14px;
  letter-spacing:.18em;
  color:#777;
  margin-bottom:14px;
}

.page-header__tags{
  font-size:12px;
  letter-spacing:.1em;
  color:#9a938d;
}

.page-header__tags .divider{
  margin:0 6px;
}
/* =================================
GALLERY SECTION
================================ */

.gallery-section{
  position: relative;
  padding: 20px 0 40px;
}

/* 🔥 scroll 容器 */
.gallery-track-wrapper{
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: 40px;
  scroll-behavior: smooth;
}

.gallery-track-wrapper::-webkit-scrollbar{
  display: none;
}


.gallery-track{
  display: flex;
  gap: 16px;
  padding-right: 60px;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
  
  /* =================================
  CARD
  ================================ */
  
  .gallery-card{
  position:relative;
  
  flex:0 0 auto;
  width:220px;
  height:420px;
  
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  
  filter:grayscale(1) brightness(.9);
  
  transition:
  filter .5s,
  transform .35s,
  box-shadow .35s;
  }
  
  /* 橫圖 */
  
  .gallery-card--wide{
  width:420px;
  }
  
  /* 直圖 */
  
  .gallery-card--portrait{
  width:220px;
  }
  
  /* 彩色圖 */
  
  .gallery-card.is-colored{
  filter:grayscale(0) brightness(1);
  }
  
  
  /* =================================
  IMAGE
  ================================ */
  
  .gallery-card__img{
  width:100%;
  height:100%;
  }
  
  .gallery-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  display:block;
  }
  
  
  /* =================================
  HOVER VIEW MORE
  ================================ */
  
  .gallery-card::before{
  content:"";
  position:absolute;
  inset:0;
  
  background:rgba(0,0,0,.45);
  opacity:0;
  
  transition:.3s;
  }
  
  .gallery-card::after{
  content:"VIEW MORE";
  position:absolute;
  
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  
  color:white;
  font-size:14px;
  letter-spacing:.12em;
  
  opacity:0;
  transition:.3s;
  }
  
  /* 只有彩色圖 hover 才出現 */
  
  .gallery-card.is-colored:hover::before{
  opacity:1;
  }
  
  .gallery-card.is-colored:hover::after{
  opacity:1;
  }
  
  
  /* =================================
  ARROWS
  ================================ */
  
  .gallery-nav{
  position:absolute;
  top:-36px;
  display:flex;
  align-items:center;
  justify-content:center;
  
  cursor:pointer;
  z-index:5;
  background:transparent;
  border:none;
  }
  
  .gallery-nav img{
  width:24px;
  height:24px;
  pointer-events:none;
  }
  
  .gallery-nav--prev{
  right:100px;
  }
  
  .gallery-nav--next{
  right:40px;
  }
  
  .gallery-nav:hover{
  opacity:.6;
  }
/* =================================
FEATURE BAR
================================ */

.features-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  padding:30px 20px;

  font-size:13px;
  color:#7d7772;
  border-top:1px solid #e5e2de;
  border-bottom:1px solid #e5e2de;
}

.features-bar .sep{
  color:#ccc;
}


/* =================================
PRICING
================================ */

.pricing-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:1100px;
  margin:60px auto;
  padding:0 30px;
}

.pricing-card{
  border:1px solid #e3e0dc;
  border-radius:14px;
  padding:36px 40px;
  background:#F6F4F1;
  text-align:left;
  display:flex;
  flex-direction:column;
  box-shadow:3px 1px 9px rgba(133,133,133,0.19);
}
.pricing-card__title{
  font-size:20px;
  text-align: center;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.pricing-card__price{
  font-size:20px;
  margin-bottom:26px;
  padding-bottom:16px;
  text-align: center;
  border-bottom:1px solid #d9d9d9;
}

.pricing-card__list{
  font-size:16px;
  line-height:1.7;
  margin-bottom:40px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.pricing-card__list .item-bold{
  font-weight:600;
}

.pricing-card__list .item-note{
  font-size:12px;
  color:var(--color-text-lt);
}


/* =================================
LINE BUTTON
================================ */

.btn-line{
  margin-top:auto;
  align-self:flex-start;
  background:#b8a898;
  color:white;
  padding:12px 42px;
  border-radius:50px;
  font-size:14px;
  letter-spacing:.18em;
  transition:.25s;
}

.btn-line:hover{
  background:#a8998a;
  transform:translateY(-1px);
}

/* =================================
LIGHTBOX
================================ */

.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.9);
  z-index:9999;
  }
  
  .lightbox.is-open{
  display:flex;
  }
  
  
  /* =================================
  CLOSE BUTTON
  ================================ */
  
  .lightbox__close{
  position:absolute;
  top:30px;
  right:40px;
  
  display:flex;
  cursor:pointer;
  }
  
  .lightbox__close img{
  width:36px;
  height:36px;
  filter:invert(1);
  }
  
  
  /* =================================
  STAGE
  ================================ */
  
  .lightbox__stage{
  display:flex;
  flex-direction:column; 
  align-items:center;
  gap:18px;
  }
  
  .lightbox__main-img{
    max-width:80vw;
    max-height:80vh;
    
    border-radius:12px;
    overflow:hidden;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    }
    
    .lightbox__main-img img{
    max-width:100%;
    max-height:80vh;
    
    width:auto;
    height:auto;
    
    object-fit:contain;
    }
  
  /* =================================
  CONTROLS
  ================================ */
  
  .lightbox__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-top:10px;
  }
  
  .lightbox__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  
  cursor:pointer;
  transition:.25s;
  }
  
  .lightbox__btn img{
  width:24px;
  height:24px;
  filter:invert(1);
  }
  
  .lightbox__counter{
  color:white;
  font-size:14px;
  letter-spacing:.1em;
  }

  /* =========================
NOTES SECTION
========================= */
.notes-section{
  max-width:1120px;
  margin:60px auto 100px;
  padding:0 40px;
}

/* 整個卡片 */

.notes-box{
  background:var(--color-beige-lt);
  border-radius:14px;
  padding:36px 40px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:30px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* 左右欄 */

.notes-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 中間線 */

.notes-divider{
  width:1px;
  background:var(--color-line);
}

/* 標題 */

.notes-title{
  font-family:var(--font-serif);
  font-size:18px;
  margin-bottom:8px;
  color:var(--color-text);
}

/* 內容 */

.notes-list{
  list-style:none;
  padding:0;
  margin:0;

  font-size:14px;
  line-height:1.8;
  color:var(--color-text-md);
}

.notes-list li{
  position:relative;
  padding-left:14px;
}

.notes-list li::before{
  content:"｜";
  position:absolute;
  left:0;
  color:var(--color-line);
}

.page-end {
  text-align: center;
  font-size: 12px;
  color: #b5aca4;
}
/* ══════════════════════════════
   RWD — 平板 (≤ 1024px)
══════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Header ── */
  .page-header {
    padding-top: 72px;
  }

  .page-header__zh {
    font-size: 24px;
  }

  /* ── Gallery ── */
  .gallery-track-wrapper {
    padding-left: 32px;
  }

  .gallery-card {
    height: 360px;
  }

  .gallery-card--wide {
    width: 340px;
  }

  .gallery-card--portrait {
    width: 190px;
  }

  /* ── Features ── */
  .features-bar {
    gap: 10px;
    font-size: 12px;
    flex-wrap: wrap;
    padding: 24px 32px;
  }

  /* ── Pricing ── */
  .pricing-section {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 24px;
    margin: 48px auto;
  }

  .pricing-card {
    padding: 28px 28px;
  }

  /* ── Notes ── */
  .notes-section {
    padding: 0 24px;
    margin: 48px auto 72px;
  }
}


/* ══════════════════════════════
   RWD — 手機 (≤ 640px)
══════════════════════════════ */
@media (max-width: 640px) {

  /* ── Header ── */
  .page-header {
    padding-top: 64px;
    padding-bottom: 6px;
  }

  .page-header__zh {
    font-size: 20px;
    letter-spacing: 0.12em;
  }

  .page-header__en {
    font-size: 12px;
  }

  .page-header__tags {
    font-size: 11px;
  }

  /* ── Gallery ── */
  .gallery-track-wrapper {
    padding-left: 16px;
  }

  .gallery-track {
    padding-right: 16px;
    gap: 10px;
  }

  .gallery-card {
    height: 260px;
    border-radius: 10px;
  }

  .gallery-card--wide {
    width: 220px;
  }

  .gallery-card--portrait {
    width: 140px;
  }

  .gallery-nav--prev {
    right: 80px;
  }

  .gallery-nav--next {
    right: 28px;
  }

  /* ── Features ── */
  .features-bar {
    gap: 6px 10px;
    font-size: 11px;
    padding: 18px 16px;
    justify-content: flex-start;
  }

  /* ── Pricing ── */
  .pricing-section {
    grid-template-columns: 1fr;
    padding: 0 16px;
    margin: 36px auto;
    gap: 14px;
  }

  .pricing-card {
    padding: 24px 20px;
    border-radius: 10px;
  }

  .pricing-card__title {
    font-size: 17px;
  }

  .pricing-card__price {
    font-size: 17px;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }

  .pricing-card__list {
    font-size: 14px;
    margin-bottom: 28px;
    gap: 8px;
  }

  .btn-line {
    width: 100%;
    text-align: center;
    padding: 12px 24px;
  }

  /* ── Notes ── */
  .notes-section {
    padding: 0 16px;
    margin: 36px auto 56px;
  }

  .notes-box {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 20px;
    border-radius: 10px;
  }

  .notes-divider {
    width: 100%;
    height: 1px;
  }

  .notes-title {
    font-size: 16px;
  }

  .notes-list {
    font-size: 13px;
  }

  /* ── Lightbox ── */
  .lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
  }

  .lightbox__main-img {
    max-width: 95vw;
    max-height: 70vh;
  }

  .lightbox__stage {
    width: 100%;
    padding: 0 16px;
  }

  .lightbox__close {
    top: 16px;
    right: 16px;
  }

  .lightbox__close img {
    width: 28px;
    height: 28px;
  }
}