:root {
  /* CHEERY --------------------------------*/
  --CHERRY-word: #F5DAA7;  /* 鵝黃 */
  --CHERRY-title-word: #F5DAA7;  /* 鵝黃 */
  --CHERRY-sparkle1:rgba(255, 255, 255, 0.8) ;
  --CHERRY-sparkle2:rgba(255, 255, 255, 0.6) ;
  --CHERRY-sparkle3:rgba(255, 255, 255, 0.5) ;
  --CHERRY-main-card-bg: rgba(86, 21, 48, 0.8);
  --CHERRY-minor-card-bg: rgba(80, 25, 62, 0.8);
  
  --CHERRY-square: rgba(86, 21, 48, 0.8);
  --CHERRY-square-shadow: #A3485A;  /* 淺櫻桃 */
  --CHERRY-square-line:#F5B9A8;
  --CHERRY-square-hover:rgba(108, 41, 63, 0.9); /* 深一點的櫻桃色 */
  --CHERRY-square-active:rgba(122, 51, 68, 0.95);
  --CHERRY-sheet-border:#ccc;
  --CHERRY-nav-bg: rgba(86, 21, 48, 0.9);

  /* NAVY -----------------------------------*/
  --NAVY-word: #F5DAA7;  /* 鵝黃 */
  --NAVY-title-word: rgba(31, 40, 116, 0.8);  /* 深藍 */
  --NAVY-sparkle1:rgba(127, 146, 190, 0.8) ;
  --NAVY-sparkle2:rgba(127, 146, 190, 0.6) ;
  --NAVY-sparkle3:rgba(127, 146, 190, 0.5) ;
  --NAVY-main-card-bg: rgba(31, 40, 116, 0.8);
  --NAVY-minor-card-bg: rgba(82, 83, 158, 0.8);

  --NAVY-square: rgba(8, 13, 59, 0.8);
  --NAVY-square-shadow: #5880b4;
  --NAVY-square-hover:rgba(78, 125, 164, 0.9); 
  --NAVY-square-active:rgba(47, 87, 120, 0.9);
  
  --NAVY-nav-bg: rgba(8, 13, 59, 0.9);
/*------------------------------------------*/
  --word:var(--NAVY-word);
  --title-word: var(--NAVY-title-word);
  --sparkle1: var(--NAVY-sparkle1);
  --sparkle2: var(--NAVY-sparkle2);
  --sparkle3: var(--NAVY-sparkle3);
  --main-card-bg: var(--NAVY-main-card-bg);
  --minor-card-bg: var(--NAVY-minor-card-bg);

  --square: var(--NAVY-square);
  --square-shadow: var(--NAVY-square-shadow);
  --square-line: var(--NAVY-word);
  --square-hover: var(--NAVY-square-hover);
  --square-active: var(--NAVY-square-active);
  /*--sheet-border: var(--CHERRY-sheet-border);*/
  --nav-bg: var(--NAVY-nav-bg);

}

 @font-face {
    font-family: "Huninn";
    src: url("../UoqMunThenKhung-Regular.ttf") format("truetype");
}

body {
  padding: 24px;
  color: var(--word);  /*鵝黃*/
  /*background-color: #A3485A;   /*淺櫻桃*/
  /*font-family: "Noto Sans TC", sans-serif;*/
  font-family: "Huninn", sans-serif;
  /*background-image: url('../Image/BG.png'); */
  /*background-size: cover;    /* 讓圖片覆蓋整個頁面 */
  background-repeat: repeat; /* 重複圖片 */
  position: relative; /* 給 after 定位用 */


  
  background-image:
    /* 1. 左側打洞效果 (使用徑向漸層模擬圓孔) */
    radial-gradient(circle, #e0e0e0 10px, transparent 12px),
    /* 3. 網格垂直線 */
    linear-gradient(90deg, rgba(163, 212, 222, 0.8),0.5px, transparent 1px),
    /* 4. 網格水平線 */
    linear-gradient(rgba(163, 212, 222, 0.8),0.5px, transparent 1px);

  background-size: 
    100% 50px,    /* 洞孔每 50px 重複一次 */
    30px 30px,    /* 網格寬度 30px */
    30px 30px;    /* 網格高度 30px */

  background-position: 
    -45vw 15px,    /* 洞孔位置：離左邊 25px，向下偏移 15px 對齊網格 */
    0 0, 
    0 0;

  background-repeat: 
    repeat-y,     /* 洞孔只在垂直方向重複 */
    repeat, 
    repeat;

}
/* 閃亮星塵層 ===================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    radial-gradient(circle, var(--sparkle1) 1px, transparent 1px),
    radial-gradient(circle, var(--sparkle2) 1px, transparent 1px),
    radial-gradient(circle, var(--sparkle3) 1px, transparent 1px);

  background-size: 50px 50px, 80px 80px, 120px 120px;
  animation: sparkle 6s linear infinite;
  opacity: 0.7;
}
@keyframes sparkle {
  0% { background-position: 0 0, 0 0, 0 0;}
  50% { background-position: 25px 25px, 40px 40px, 60px 60px;}
  100% {background-position: 50px 50px, 80px 80px, 120px 120px;}
}

/*設置居中 & icon 間隔*/
i {
  margin-left: 6px;
  margin-right: 6px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* POPUP ======================================== */
 /* .popupTable{
    border-collapse: collapse;
    padding: 10px;
    border: none;
    border: 1px solid #F5DAA7;  
    border-radius: 12px;
    background-color: rgba(245, 218, 168, 0.5);
    table-layout: fixed;
    width: 80vw;               
}

.popupTable td, .popupTable th {
    border:  0.5px solid #977C00;      
    padding: 10px;
    border-left: none;            
    border-right: none;            
} */

/* POPUP ======================================== */
.popupTable {
    border-collapse: separate;      /* 改為 separate 才能顯示圓角 */
    border-spacing: 0;             /* 讓單元格緊貼，模擬 collapse 效果 */
    padding: 0;                    /* 表格本身不建議設 padding，改設在 td/th */
    border: 1px solid #F5DAA7;  
    border-radius: 12px;
    background-color: rgba(245, 218, 168, 0.5);
    table-layout: fixed;
    
    /* 置中關鍵設定 */
    width: 95%;                    /* 寬度改為 95% */
    margin: 2px auto;             /* 上下留 10px，左右 auto 自動置中 */
    overflow: hidden;              /* 確保內容不會超出圓角邊框 */
}

.popupTable td, .popupTable th {
    border-bottom: 0.5px solid #977C00; /* 只留底部線條，視覺更簡潔 */
    text-align: center;                /* 確保文字置中 */
}

/* 移除最後一列的底線，避免與圓角邊框重疊 */
.popupTable tr:last-child td {
    border-bottom: none;
}

/* 針對範例圖片的自適應優化 */
.popupTable img {
    width: 100%;                   /* 讓圖片寬度填滿單元格 */
    max-width: 150px;              /* 限制最大寬度防止在寬螢幕過大 */
    height: auto;
    border-radius: 4px;            /* 圖片也加一點微圓角增加精緻度 */
    display: block;
    margin: 0 auto;
}
.popupTable td {
    padding: 2px 4px;      /* 稍微縮減內距，配合小字體 */
    /* 文字大小設定 */
    font-size: 0.75rem;    /* 或是使用 13px / 14px */
    line-height: 1.2;      /* 讓多行文字（如說明欄）更有呼吸感 */
}

/* 如果你希望「標題列 (th)」維持原樣，但「內容列 (td)」變小，這樣分開寫是對的 */
.popupTable th {
    font-size: 0.85rem;    /* 標題可以稍微大一點點點 */
    font-weight: bold;
}

/* 表格 ======================================== */

table {
  table-layout: auto;
}
table tr {
  border-bottom: 0.5px solid ; 
}
table th {
  width: 30%; 
}
table td {
  font-size: 14px;  /* 內文縮小 */
  width: 70%; 
}
td, th {
  padding: 8px;
  vertical-align: middle;
  max-height: none;
}



/*小視窗介面 ----------------------------------------*/


.card {
  padding: 20px;
  min-width: 75%;
  height: auto;
  color: var(--word);  
  margin-bottom: 32px;
  border-radius: 12px;
  background-color: var(--main-card-bg);
  box-shadow: 1 4px 8px var(--square-shadow);   /*淺櫻桃*/
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.SNS{
  width: 75%;     /* 預設桌面 / 平板 */
  margin: 0 auto;  /* 置中 */
  margin-bottom: 32px;
}

.WaterFlow{
  width: 75%;     /* 預設桌面 / 平板 */
  margin: 0 auto;  /* 置中 */
  margin-bottom: 32px;
}
.WaterFlow img {
  width: 100%;
  height:auto;
  margin-bottom:15px;
  border-radius: 12px;
}

 .DetailBtn {
  border: none;
  border-radius: 12px;
  background-color: var(--square);   /*淺櫻桃*/
  color: var(--word);  /*鵝黃*/
  padding:10px;
  cursor: pointer;

  transition: transform 0.15s ease, background-color 0.15s ease;
} 

/* 滑過效果 */
.DetailBtn:hover {
  background-color: var(--square-hover);   /* 深一點的櫻桃色 */
  transform: scale(1.05);      /* 微微放大 */
}

/* 點擊效果 */
.DetailBtn:active {
  transform: scale(0.95);      /* 按下去的感覺 */
  background-color: var(--square-active);   /* 再深一點 */
}

.sns-img {
  height:95%;
  max-width: auto;
  border-radius: 20px;
}

/*小方塊*/
.info-hover {
  
  display: flex;
  flex-direction: column; /* 上下排列 */
  align-items: center;    /* 水平置中 */  
  justify-content: center; /* 垂直置中 */
  
  font-size: 14px;  /* 內文縮小 */
  color: var(--word);  /*鵝黃*/
  
  padding: 20px;
  min-width: 10%;
  height: 120px;
  
  margin-bottom: 32px;
  border-radius: 12px;
  background-color: var(--square);
  box-shadow: 1 4px 8px var(--square-shadow);   /*淺櫻桃*/
  border: none;
}

.info-hover i {
    font-size: 25px; /* 保持 icon 的 fa-2x 不被覆蓋 */
}

.info-hover .hr-line{
  display: block; 
  width: 100%; 
  height: 1px; 
  background-color: var(--square-line);  /*駝色*/ 
  margin:5px;
}


.info-hover:hover {
  background-color: var(--square-hover);   
  transform: scale(1.05);      /* 微微放大 */
}

/* 點擊效果 */
.info-hover:active {
  transform: scale(0.95);      /* 按下去的感覺 */
  background-color: var(--square-active);   /* 再深一點 */
}

.notice-div {
  margin-bottom:5px;
  height:200px;
  font-size: 14px; 
}

.notice-div i{
  font-size: 40px; /* 保持 icon 的 fa-2x 不被覆蓋 */
  transform: translateY(-10px);
  
}

.notice-div span{
  left:-6px;
}



        

  



  
/*試算表 --------------------------------------------*/
.sheet {
  position: relative;
  min-width: 100%;
  width: 100%;
  /*max-width: 900px;*/
  box-shadow: 0 4px 10px ;
  border: 1px solid var(--sheet-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;  /* 水平置中 */
  align-items: center;      /* 垂直置中 */
  height: 50vh;            /* 滿版高度 */
}

.sheet iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 輪播------------------------------------------------*/
.slideshow {
    min-width: 50%;
    width: 400px;
    height: 400px;
    margin: auto;
    overflow: hidden;
    position: relative;
    /*Gemini*/
    display: flex;
    justify-content: center; /* 讓圖片在容器中水平置中 */
    align-items: center; /* 讓圖片在容器中垂直置中 */
}

.slideshow img {
    width: auto;
    height: 90%;
    position: absolute;
    left: 200%;          /* 初始在右邊畫面外 */
    top: 50%;
    transform: translate(-50%, -50%);

    object-fit: cover;
    transition: left 0.5s ease-in-out; /* 滑動動畫 */
}

.slideshow .active {
    /*left: 0;             /* 當前圖片滑入畫面 */
    left: 50%;
}

/******************************************************/

.minor-bg{
  background-color: var(--minor-card-bg);
}
.title-word{
  color: var(--title-word);
}

.ban{
  color:rgba(238, 105, 131, 0.8);
  position: relative; /* 必須有 relative 才能偏移 */
  margin-top: 10px; /* 增加上邊距，將圖標向下擠 */
  /*bottom: 5px;*/
}


.icon {
  width: auto;
  height: 150px;   /**/
}

.titleIcon {
  width: auto;
  height: 20px;   /**/
  vertical-align: middle;
}

.NOmrg {
  margin: 0;
  line-height: 1.5;  /* 調整成你要的緊密程度 */
}

/* 手機端導欄行 --------------------------------------*/
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  
  font-size: 20px;
  color: var(--word);   /*淺粉桃*/
  margin: 0;
  /* 核心：文字描邊 */
  text-shadow: 
    -1px -1px 0 rgb(24, 21, 80),  
     1px -1px 0 rgb(24, 21, 80),
    -1px  1px 0 rgb(24, 21, 80),
     1px  1px 0 rgb(24, 21, 80);
  -webkit-text-stroke: 0.5px ; /* 寬度 顏色 */

}

.menu-toggle div {
  width: 25px;
  height: 3px;
  /*background-color: #EE6983;   /*淺粉桃*/
  border-radius: 2px;
}

.nav-links a{
        /* 核心：文字描邊 */
        text-shadow: 
          -1px -1px 0 rgb(24, 21, 80),  
          1px -1px 0 rgb(24, 21, 80),
          -1px  1px 0 rgb(24, 21, 80),
          1px  1px 0 rgb(24, 21, 80);
    }
/* 手機小螢幕優化 */
@media (max-width: 576px) {
    .nav-links {
        /* 保持 position, top, left, width, background-color, flex-direction 等不變 */
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--nav-bg);
        flex-direction: column;
        align-items: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        padding: 0; /* 移除 padding-top/bottom，改用 max-height 控制高度 */

        /* ✨ 動畫關鍵：初始狀態 */
        display: flex; /* 保持 flex 以允許內部元素佈局 */
        overflow: hidden; /* 隱藏超出 max-height 的內容 */
        max-height: 0; /* 隱藏菜單 */
        opacity: 0; /* 初始透明度為 0 (淡入效果) */
        transition: max-height 0.5s ease-out, opacity 0.3s ease-in; /* 分開設置過渡效果 */

        

    }

    

    .nav-links.show {
        max-height: 500px; 
        opacity: 1; 
    }
    
    /* 你的其他樣式保持不變 */
    .menu-toggle {
      display: flex;
    }
    
    .sheet {
      padding-bottom: 75%; 
    }
    /*小視窗介面 ----------------------------------------*/

    .card {
    padding: 20px;
    min-width: 90%;
    height: auto;
    color: var(--word);  /*鵝黃*/
    margin-bottom: 32px;
    border-radius: 12px;
    
    background-color: var(--main-card-bg);
    box-shadow: 0 4px 8px var(--square-shadow);   /*淺櫻桃*/
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    
    overflow: hidden;
  }
  
  .WaterFlow {
    width: 95%;   /* 手機寬度改成 90vw */
  }
  .SNS{
    width: 95%;   /* 手機寬度改成 90vw */
  }
  

  /*商品PARTIAL VIEW*/
  
  .partial-view {
    margin-top: 24px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    /*pointer-events: none;*/
  }

  .partial-view.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .partial-content {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .partial-content.show {
    opacity: 1;
  }

}


.image-card {
  display: flex;
  width: 90%;           /* 1. 寬度佔螢幕 90% */
  max-width: 800px;     /* 保持最大寬度限制，避免在超大螢幕上過大 */
  margin: 20px auto 40px; 
  background-color: var(--main-card-bg);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  position: relative;
  
  /* --- 2. 核心比例設定 --- */
  aspect-ratio: 12 / 9; /* 設定寬高比為 12:9 */
  height: auto;         /* 移除原本的 250px，讓高度隨比例自動計算 */
}

/* 為了讓圓角依然有效，我們要把 overflow: hidden 改到內層 */
.main-img-box, .side-column {
  overflow: hidden;
}
/* 左側大圖 */
.main-img-box {
  width: 70%; /* 大圖佔 70% */
  height: 100%;
  /* --- 核心置中設定 --- */
  display: flex;
  justify-content: center; /* 水平置中 */
  align-items: center;     /* 垂直置中 */
  
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

/* 讓右側小圖右邊有圓角 */
.side-column {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* --- 對話泡泡尖角 --- */
.image-card::after {
  content: "";
  position: absolute;
  bottom: -20px;    /* 尖角的高度 */
  /*left:42vw;       /* 尖角距離左邊的位置 */
  /* --- 修正位置：使用百分比 --- */
  left: 50%;           /* 先移動到卡片寬度的正中間 */
  transform: translateX(-50%); /* 往回推一半寬度，確保尖角尖端絕對置中 */
  /* 繪製三角形 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px; /* 上、右、下、左 */
  border-color: var(--main-card-bg) transparent transparent transparent; /* 顏色要跟背景色一樣 */
  
  /* 如果想要尖角也有陰影 (選配) */
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1));
}
  .main-img {
    width: auto;
    height: 90%;
    /*object-fit: cover; /* 確保圖片填滿不變形 */
    display: block;
    /* --- 核心設定：水平置中 --- */
    
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
  }

  /* 右側小圖群組容器 */
.side-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 100%;
  gap: 10px; /* 建議加一點間距，圓角才會更明顯，不會黏在一起 */
  padding: 10px 0; /* 上下留一點呼吸空間 */
}

/* 右側小圖 */
.sub-img {
  width: 85%;
  flex: 1;
  display: block;
  min-height: 0;
  border-radius: 20px;
  
  /* --- 關鍵修正 --- */
  object-fit: cover;    /* 改成 cover，圖片會填滿並裁切，圓角才會貼齊邊緣 */
  /* 如果堅持要用 contain (不裁切)，請務必加上背景色，否則圓角會因透明而看不見 */
  /* object-fit: contain; */
  /* background-color: #f0f0f0; */ 

  border-radius: 20px;  /* 現在圓角會非常明顯 */
  
  /* 為了置中 */
  margin-left: auto;
  margin-right: auto;
}
.main-img:hover, .sub-img:hover {
  filter: brightness(0.9); /* 滑鼠移上去稍微變暗 */
  transition: 0.3s;
}


/* 燈箱背景 */
.img-modal {
  display: none; 
  position: fixed;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 9999;
  width: 90vw;
  height: 90vw;

  background-color: var(--square); /* 黑色半透明 */
  cursor: zoom-out;
  
  border-radius: 20px;
}

/* 放大後的圖片 */
.img-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  border-radius: 20px;
}

/* 關閉按鈕 - 移到方塊外面 */
.img-close {
  position: absolute;
  /* 往上與往右推出去 */
  top: -20px; 
  right: -10px; 
  
  /* 特殊形狀：圓形背景 */
  width: 50px;
  height: 50px;
  background-color: var(--square); /* 跟燈箱同色，或是用 Tomato 紅色 */
  border: 2px solid #fff;          /* 白色邊框增加質感 */
  border-radius: 50%;              /* 變成正圓形 */
  
  /* 文字置中 */
  display: flex;
  justify-content: center;
  align-items: center;
  
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  z-index: 10001; /* 確保比燈箱本體高 */
  
  /* 陰影感 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.img-close:hover {
  transform: scale(1.1) rotate(90deg); /* 懸停時放大並旋轉，增加趣味感 */
  color: #eee;
}