/* Discord 風格防雷塊 */
.spoiler {
  background-color: #333;
  color: rgba(0, 0, 0, 0) !important;
  border-radius: 4px;
  padding: 0 4px;
  transition: background-color 0.3s;
  cursor: pointer;
  user-select: none;
  transition: 
    background-color 0.3s ease, 
    color 0.2s ease, 
    filter 0.3s ease;
  filter: blur(0px);
  display: inline;
}
/* 懸停時稍微亮一點 */
.spoiler:not(.open):hover {
  background-color: #444; 
}
/* 點開後的狀態 */
.spoiler.open {
  background-color: rgba(128, 128, 128, 0.15) !important;
  color: inherit !important;
  cursor: default;
  user-select: text;
  filter: blur(0px);
}

/* PDF 與 試算表外框 */
.embed-container {
  width: 100%;
  height: 800px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
}
.embed-link {
  text-align: center;
  margin-bottom: 20px;
  display: block;
}
/* 手機版自動縮短 PDF 高度 */
@media (max-width: 768px) {
  .embed-container {
    height: 500px;
  }
}

/* 讓友站頭像變成圓形並加入陰影 */
.links .card-avatar img {
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* 滑鼠移上去時頭像輕微放大 */
.links .card-avatar:hover img {
  transform: scale(1.1);
}

/* 設定文章內連結的顏色與樣式 */
#board .markdown-body a:not(.btn) {
  color: #31a5d9 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s ease-in-out;
}
/* 當滑鼠移到連結上時的效果 */
#board .markdown-body a:not(.btn):hover {
  color: #1a7fa6 !important;
  text-decoration: underline !important;
}

/* 試算表 */
.embed-container.sheet-box {
  position: relative;
  background: #fff;
  height: 600px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
/* 右下角縮放控制面板 */
.sheet-control-panel {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 10;

  display: flex;
  align-items: center;
  gap: 10px;

  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s;
  opacity: 0.6;
}
/* 滑鼠移入時才變清楚 */
.sheet-control-panel:hover {
  opacity: 1;
}
.sheet-slider {
  cursor: pointer;
  accent-color: #31a5d9;
  width: 100px;
}
.sheet-zoom-text {
  font-size: 12px;
  font-weight: bold;
  color: #31a5d9;
  min-width: 35px;
}

/* 亮色模式 <kbd> 樣式 */
kbd {
  background-color: #f7f7f7;
  color: #333;
  border: 1px solid #ccc;
  border-bottom-width: 3px;
  border-radius: 3px;
  padding: 0.1em 0.4em;
  font-family: inherit;
  transition: all 0.3s;
}
/* 暗色模式 <kbd> 自動適配 */
[data-user-color-scheme='dark'] kbd {
  background-color: #333;
  color: #ddd;
  border-color: #555;
  border-bottom-color: #111;
}