/* notice 短代码 (最終優化版：標題置頂、內容在下) */
.notice {
    display: flex;
    flex-direction: column; /* 關鍵：將主軸改為垂直方向，讓子元素上下排列 */
    padding: 1em 1em 1em 1.5em; /* 調整內邊距，給左側邊框留出視覺空間 */
    margin-bottom: 1.5em;
    border-radius: 4px;
    position: relative; /* 為了讓 border-left 相對定位 */

    p:last-child {
        margin-bottom: 0;
    }

    /* 移除 p 標籤預設的上邊距，避免與標題距離過遠 */
    p {
        margin-top: 0;
    }

    .notice-title {
        font-weight: bold; /* 讓標題粗體，更突出 */
        margin-bottom: 0.5em; /* 在標題和內容之間增加一點間距 */
        line-height: 1.5; /* 確保行高舒適 */

        .notice-icon {
            width: 1.2em;
            height: 1.2em;
            margin-right: 0.3em; /* 給 icon 和文字留點空隙 */
            vertical-align: middle; /* 讓 icon 和文字垂直對齊 */
        }
    }

    /* 統一處理所有類型的樣式 */
    &.notice-warning,
    &.notice-info,
    &.notice-note,
    &.notice-tip {
        /* 將左側邊框從容器上分離出來，用偽元素實現，避免影響 padding */
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            border-radius: 4px 0 0 4px; /* 讓邊框的圓角和容器一致 */
        }
    }

    /* 各種類型的顏色定義 */
    &.notice-warning {
        background: hsla(0, 65%, 65%, 0.15);
        &::before { background-color: hsl(0, 65%, 65%); }
        .notice-title { color: hsl(0, 65%, 55%); }
    }
    &.notice-info {
        background: hsla(30, 80%, 70%, 0.15);
        &::before { background-color: hsl(30, 80%, 70%); }
        .notice-title { color: hsl(30, 80%, 60%); }
    }
    &.notice-note {
        background: hsla(200, 65%, 65%, 0.15);
        &::before { background-color: hsl(200, 65%, 65%); }
        .notice-title { color: hsl(200, 65%, 55%); }
    }
    &.notice-tip {
        background: hsla(140, 65%, 65%, 0.15);
        &::before { background-color: hsl(140, 65%, 65%); }
        .notice-title { color: hsl(140, 65%, 55%); }
    }
}



/* custom.css ESign卡片式下載按鈕加入： */

.app-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f2f6ff;
  border-radius: 10px;
  padding: 10px 15px;
  margin-bottom: 16px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}

.app-info {
  display: flex;
  align-items: center;
}

.app-icon {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  border-radius: 10px;
}

.app-details {
  font-size: 14px;
  color: #222;
}

/* 讓下載按鈕靠右：將 .app-download 設為 flex 容器 */
.app-download {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
}

/* 短碼本身產生的 .install-button-wrapper 保持默認樣式或補足： */
.install-button-wrapper {
  /* 若需要微調按鈕間距，可加上 padding/margin */
}

/* 強制 app-card 在所有螢幕上都水平不換行 */
.app-card {
  flex-wrap: nowrap !important;
  flex-direction: row !important;
}

/* 手機螢幕水平顯示時，縮小 icon 與文字的尺寸 */
.app-card .app-icon {
  width: 48px !important;
  height: 48px !important;
  margin-right: 12px !important;
}

/* 必要時調整文字大小，避免被截斷 */
.app-card .app-details {
  font-size: 14px !important;
  line-height: 1.3 !important;
}

/* 保持按鈕也不被拉寬換行 */
.app-card .install-button-wrapper {
  white-space: nowrap;
}



/* 文章內圖片居中+邊距
 custom.css 圖片整合居中 + 邊距樣式 image-center：
.image-center {
  text-align: center;
  margin-bottom: 24px;
}
.image-center img {
  display: inline-block;
} 
*/



//縮略圖響應式圖片
/* 对首页所有文章卡片的缩略图生效 */
.card img {
  display: block;
  width: 100%;
  height: auto;
  /* 以下两行可选，按设计需求开启 */
  object-fit: cover;
  max-height: 180px;
}

.card img {
  display: block;
  max-height: 180px;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .card img {
    max-height: 180px;
  }
}


//美化密碼框樣式
.encryption-container {
    border: 1px solid #ccc;
    padding: 2rem;
    border-radius: 8px;
    margin-top: 2rem;
    background-color: #f9f9f9;
    text-align: center;
}
.encryption-container input[type="password"] {
    padding: 10px;
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
}
.encryption-container button {
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
.encryption-container button:hover {
    background-color: #0056b3;
}
.error-message {
    color: red;
    margin-top: 10px;
    min-height: 1.2em;
}