/* 貼於CSS檔案最上方 */
@font-face {
  font-family: 'jfOpenHuninn';
  src: url('https://cdn.jsdelivr.net/gh/fed118216/miaoni@main/jf-openhuninn-21.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;}

body {                 
  font-family: 'jfOpenHuninn';}

body {
    font-size: 9pt;
    color: #666666;
}

td {
    font-size: 9pt;
    letter-spacing: 1.5pt;
}

select,
input,
textarea {
    font-size: 9pt;
}

select {
    background-color: #666666;
}

a:link,
a:visited {
    color: #666666;
    text-decoration: none;
}

a:hover {
    color: #333333;
    text-decoration: none;
}



/* 按鈕圖效果 */
.popup-trigger {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.popup-trigger:hover {
  animation: cute-bounce 0.6s ease;
  transform: scale(1.2) rotate(10deg);
}

 /* 彈窗外框 */
.popup {
  position: fixed;
  top: 200px;
  left: 200px;
  width: 280px;
  display: none;
  border: 3px solid #FFCAD3;
  border-radius: 20px;
  overflow: hidden;
  z-index: 9999;
  font-family: "Microsoft JhengHei", "Arial Rounded MT Bold", sans-serif;
  animation: popupBounce 0.4s ease;
}

/* 彈出動畫 */
@keyframes popupBounce {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

/* 標題列 */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffe4e9;
  border-radius: 17px 17px 0 0;
  cursor: move;
}

/* 標題文字 */
.popup-title {
  letter-spacing: 3px;
  font-size: 13px;
  color: #999;
  font-weight: bold;
}

/* 關閉按鈕 */
.popup-close {
  background: #ffb6c1;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  color: white;
  transition: background 0.2s;
}

.popup-close:hover {
  background: #FFCCD3;
  transform: scale(1.2) rotate(10deg);
}

/* 內容 */
.popup-inner {
  padding: 15px;
  text-align: center;
  font-size: 13px;
}
     

/* 線性漸層背景 */
.title-bar {
   background: linear-gradient(
   to right,
   #e8e8e800,
   #e8e8e8aa,
   #e8e8e800
  );
  padding: 2px 0;
  text-align: center;
  letter-spacing: 2px;
}
      

/* 留言表格 */
table[width="ˋ420"][cellspacing="1"] {
  border-collapse: separate;
  border-radius: 15px;                      /* 圓角度 */
  overflow: hidden;
  background: #ffffff;                     /* 邊框色 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* 陰影 */
  margin-bottom: 35px;                  /* 留言框外間距 */
  opacity: 0.7;                        /* 透明效果0.1~0.9 */
  transition: opacity 0.6s ease;      /* 過渡延遲效果 */
}

/* 游標移入不透明 */
table[width="420"][cellspacing="1"]:hover {
   opacity: 1;
}

   /* 頁數邊框色 */
table[bgcolor="000000"] {
  background-color: #fff !important;
  border-radius: 25px;    /* 圓角度 */
}

/* 頁數字型大小 */
table[bgcolor="000000"] th {
  background-color: #333333;  /* 頁數背景色 */
  border-radius: 25px;
  font-size: 7pt;
  font-family: Calibri;
}

/* 游標移入頁數背景色 */
table[bgcolor="000000"] th[bgcolor="e2e8f3"]:hover {
  background-color: #fff !important;
}
   

.d2 {
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAABAElEQVR4AaTOC2rDMBAE0NT3v3PLM0wYKZIVqGHY3fnJ1+vw/S6+Q+T1WKrvZ/Hhn4q3pYL6VmE8faXhPkqZQZAhwGU36ThwN4ZSBmZoU3izeT6Y+aG0A70naDa/29+lXuuQu0Ot4Vun9X2XIgjMwXyHz5x1tx76ZUE4/gs9+u4/7TJk36d95R9KGfLaqYy+8w+lKTSFTuBLcXuHUgKj+S1W/gvptW9Lnnx69N1/akF0YL5bs8+6Ww/tLrUgCHZwm0FruNZpfb9LGXdIyNx5mh9KvSYIbQpvNs8HMz+UCjAAszvAZTfpOHA3PkojMgvm7omnN9f7tpRJUMEMPH2HPwAAAP//hyDrAAAAAAZJREFUAwAllPAXTPtANAAAAABJRU5ErkJggg==") 7 /  7px / 0 round;
  border-width: 7px;
  border-style: solid;
  width: 200px;
  height: 100px;
}

/* 日期時間  */
td[colspan="3"][align="right"],
div[align="right"] {
  padding-top:15px;       /* 與上方留言距離 */
  padding-right: 15px;    /* 與右邊框距 */
  padding-bottom:10px;    /* 與下方距離 */
  font-family: Calibri;   /* 字型 */
  font-size: 7.6pt;       /* 數字大小 */
  color: #e5e5e5;         /* 淺色字 */
  transition: color 0.5s ease; /* 過渡延遲效果 */
}