:root{--primary:#c94f86;--accent:#b53a84;--bg:#f5f7fa;--card:#fff;--text:#243447;--muted:#6b7280;--border:#dbe2ea;--subtitle:#fff;--mycolor:#f8fadc;}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;line-height:1.0;}
header{background:linear-gradient(135deg,#c94f86,#e8acc7);color:#fff;padding:12px 10px;}/*上方横列 */
.header-inner{max-width:1180px;margin:auto;}
.brand{font-size:14px;hover;font-weight:400;letter-spacing:.04em;color:#fff;}
.subtitle{opacity:.9);}
.container{max-width:1180px;margin:16px auto;padding:0 18px;}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.search{flex:1;min-width:100px;padding:13px 15px;border:1px solid var(--border);border-radius:10px;font-size:14px;background:#fff;}
.btn{display:inline-block;padding:11px 14px;border-radius:9px;background:var(--accent);color:#fff;text-decoration:none;border:0;cursor:pointer;}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border);}/*超連結按鈕 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:0 3px 12px rgba(0,0,0,.04);}
.card h2{margin:0 0 14px;color:var(--primary);font-size:20px;}
.card h2 span{color:var(--text);display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;background:#edf4fb;margin-right:8px;font-size:14px;}
.breadcrumb{margin-bottom:18px;color:var(--muted);font-size:14px;}
.breadcrumb a{color:var(--primary);text-decoration:none}
.notice{padding:14px;border-left:4px solid var(--accent);background:#f7e9f5;border-radius:8px;margin:18px 0;}
.footer{margin-top:45px;padding:25px 18px;text-align:center;color:var(--muted);font-size:14px;}
.hidden{display:none!important;}
.meta{color:var(--muted);font-size:14px;}
.back-top {
    color: #6a4c93;
    text-decoration: underline;
    transition: 0.2s;
}

.back-top:hover {
    color: #d14a8c;
    font-weight: bold;
}
.note {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: #f5f5f5;
    border-radius: 8px;
    margin: 16px 0;
    line-height: 1.6;

    transition: all 0.3s ease;
}

.note:hover {
    background: #e8d0e5;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.hidden{display:none!important}
.meta{color:var(--muted);font-size:14px}
.youtube-pro {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;}
.topjpg {
    display: block;
    width: 100%;
    max-width: 1028px;
    height: auto;
    margin: 0 auto;}
    
/* 原本的設定：讓區域內所有連結失效 */
.no-link a {
    pointer-events: none;
    cursor: default;
    color: #555; /* 建議可將失效連結改為灰色以利識別 */
    text-decoration: none;
}

/* 新增的設定：讓帶有 .allow-link 的連結恢復功能 */
.no-link a.allow-link {
    pointer-events: auto; /* 恢復可點擊狀態 */
    cursor: pointer;      /* 恢復手指游標 */
    color: #0000ee;       /* 恢復一般超連結顏色（可依您網站配色調整） */
    text-decoration: underline;
}
    
.justlink {
    color: #6a4c93;
    text-decoration: underline;
    transition: 0.2s;
}

.justlink:hover {
    color: #d14a8c;
    font-weight: bold;
}
/* =========================================
   站內搜尋區塊樣式
========================================= */
.search-container {
    display: flex;
    align-items: center;          /* 垂直置中對齊 */
    justify-content: flex-start;  /* 靠左對齊，可依需求改為 center */
    background-color: var(--primary-color); /* 使用深色背景，襯托白色字體 */
    padding: 15px 40px;
    border-radius: 8px;
    margin-bottom: 25px;
    gap: 15px;                    /* 標題與搜尋框的間距 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.search-label {
    display: flex;
    align-items: center;
    font-weight: bold;
    white-space: nowrap;          /* 防止標題文字斷行 */
    cursor: default;              /* 標題不需點擊，設定預設游標 */
}

.search-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.search-box {
    flex-grow: 1;                 /* 讓搜尋框自動填滿剩餘空間 */
    max-width: 900px;             /* 限制最大寬度，保持版面美觀 */
}

/* =========================================
   手機版響應式設計 (小於 768px 時自動調整)
========================================= */
@media (max-width: 768px) {
    .search-container {
        flex-direction: column;   /* 改為上下排列 */
        align-items: stretch;     /* 寬度拉伸至滿版 */
        gap: 10px;
    }
    .search-box {
        max-width: 100%;
    }
}
/* =========================================
   2. 針對全站 <a> 標籤套用變數
========================================= */
/* 預設狀態 */
a {
    color: var(--link-color);
    text-decoration: none; /* 預設不顯示底線，保持法條版面乾淨 */
    transition: var(--link-transition); /* 載入 :root 設定的動畫速度 */
    padding: 0 2px; /* 預留一點內邊距，讓背景色出現時更好看 */
    border-radius: 3px;
}

/* 滑鼠經過狀態 (:hover) */
a:hover {
    color: var(--link-hover-color);          /* 文字變色 */
    background-color: var(--link-hover-bg);  /* 浮現護眼背景色，方便讀者對焦該法條 */
    text-decoration: underline;              /* 浮現底線 */
}