/**
 * 最小侵入式響應式樣式
 * 土庫商工網站 - 保持原始版面，只在小螢幕調整
 *
 * 策略：
 * - 1024px+：完全保持原樣（不做任何修改）
 * - 768-1023px：稍微縮小但保持結構
 * - <768px：改為響應式單欄佈局
 */

/* ========================================
   基礎響應式設定
   ======================================== */
/* 添加 viewport meta tag 支援 */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* 圖片響應式 */
img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   平板版 (768px - 1023px)
   稍微縮小但保持原始版面結構
   ======================================== */
@media (max-width: 1023px) and (min-width: 768px) {
    /* 主容器縮小為 100%，但加上 padding */
    .main {
        width: 100% !important;
        max-width: 1006px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* 頁首背景區域 */
    .news, .about, .admin, .tech, .partner,
    .student, .info, .plan, .sitemap, .calendar,
    .intro, .adms, .education, .infoservice, .program {
        width: 100% !important;
    }



    /* 選單寬度調整 */
    .navbar-custom {
        width: 100% !important;
    }

    /* 側邊欄 */

}

/* ========================================
   手機版 (<768px)
   改為單欄響應式佈局
   ======================================== */
@media (max-width: 767px) {
    /* 主容器 */
    .main {
        width: 100% !important;
        padding: 0;
    }

    /* 頁首背景 - 隱藏背景圖 */
    .news, .about, .admin, .tech, .partner,
    .student, .info, .plan, .sitemap, .calendar,
    .intro, .adms, .education, .infoservice, .program {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0;
        background: #fff !important;
    }

    /* 覆蓋 Logo 父容器的 inline style (width:0, height:0) */
    .news > div[style],
    .about > div[style],
    .admin > div[style],
    .tech > div[style],
    .partner > div[style],
    .student > div[style],
    .info > div[style],
    .plan > div[style],
    .sitemap > div[style],
    .calendar > div[style],
    .intro > div[style],
    .adms > div[style],
    .education > div[style],
    .infoservice > div[style],
    .program > div[style] {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Logo - 改為相對定位，置中顯示 */
    .main h1 {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
        text-align: center;
        padding: 5px 0 12px;
        background: #fff;
        border-bottom: 1px solid #ddd;
    }

    .main h1 a {
        width: 240px !important;
        height: 60px !important;
        margin: 0 auto;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* 搜尋框和導航 - 改為相對定位 */
    .topbox1 {
        position: relative !important;
        width: calc(100% - 30px) !important;
        left: 0 !important;
        top: 0 !important;
        height: auto !important;
        background: #f9f9f9;
        padding: 15px;
		margin: 0 !important;
        visibility: visible !important;
    }

    /* 確保 accesskey 不影響佈局 */
    .topbox1 .accesskey {
        display: none;
    }

    /* 導航按鈕 */
    .lan {
        width: 100% !important;
        margin-bottom: 12px;
		display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .lan ul {
        float: inherit !important;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .lan li {
        float: none;
        padding: 0;
        background: none;
    }

    .lan li a {
        display: inline-block;
        padding: 8px 16px 5px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 0.95em;
        color: #333;
        text-decoration: none;
    }

    .lan li a:hover,
    .lan li a:focus {
        background: var(--primary-color, #c30e27);
        color: #fff;
        border-color: var(--primary-color, #c30e27);
    }

    /* 搜尋框 */
    .isearch {
        float: none !important;
        width: 100% !important;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    .isearch form {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 350px;
        border: 2px solid var(--primary-color, #c30e27);
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
    }

    .isearch_l {
        flex: 1;
        min-width: 0;
    }

    .inputtxt {
        width: 100% !important;
        border: none !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
    }

    .isearch_r {
        flex: 0 0 auto;
        width: auto !important;
    }

    .isearch_r button {
        padding: 1px 7px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 內容區域 */
    #content {
        width: 100%;
	margin: 0;
	padding: 1px 0 35px;
	border-radius: 0;
    }

    .content1,
    .content2 {
        width: calc(100% - 10px) !important;
        padding: 5px;
        background: none;
    }

    /* 選單 - 隱藏原始選單，改用漢堡選單 */
    #navi {
        width: 100% !important;
        height: auto !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .navbar-custom {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 原始選單改為漢堡選單（稍後用 JS 控制） */
    .menu-bt {
        display: none !important; /* 預設隱藏，等待 JS 控制 */
    }

    .menu-bt.mobile-open {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        padding-top: 60px !important;
        padding-bottom: 20px !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .menu-bt.mobile-open > li {
        float: none !important;
        width: calc(100% - 10px) !important;
        display: block !important;
        position: static !important;
        border-bottom: 1px solid #eee !important;
        background: none !important;
        padding: 0 5px !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .menu-bt.mobile-open > li > a {
        display: block !important;
        width: calc(100% - 40px) !important;
        padding: 15px 20px !important;
        color: #333 !important;
        border: none !important;
        background: none !important;
        text-align: left !important;
        font-size: 1.1em !important;
        line-height: 1.5 !important;
		border-radius: 0 !important;
    }

    .menu-bt.mobile-open ul {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        background: #f9f9f9 !important;
        display: none !important; /* 預設收合 */
        left: 0 !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    .menu-bt.mobile-open ul.submenu-open {
        display: block !important;
    }

    .menu-bt.mobile-open ul li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        position: static !important;
        border-bottom: 1px solid #ddd !important;
    }

    .menu-bt.mobile-open ul li a {
        display: block !important;
        width: calc(100% -60px) !important;
        padding: 12px 20px 12px 40px !important;
        color: #666 !important;
        background: none !important;
        text-align: left !important;
    }

    .menu-bt.mobile-open ul ul li a {
        padding-left: 60px !important;
    }

    /* 側邊欄 */
    .content4 {
        width: calc(100% - 30px) !important;
        float: none;
        padding: 30px 15px 15px;
    }

    /* 榮譽榜、活動花絮 */
    .inews {
        width: 100% !important;
        margin-bottom: 25px;
    }
    .advertise_b2 {
        width: 100% !important;
		margin-left: 0;
    }

	.advertise_b1 {
	width: calc(100% - 2px);
	margin-right: 0;
	margin-left: 0;
}


    /* 內容區 */
    .content3 {
        width: calc(100% - 40px);
	padding: 13px 20px 28px;
    }


    /* 表格響應式 - 公告詳細內容 */
    table.fancytable2 {
        width: 100% !important;
        display: block;
        border: none !important;
        overflow-x: auto;
    }
	table.fancytable4 {
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }

    .fancytable2 tbody, .fancytable4 tbody {
        display: block;
        width: 100%;
    }

    .fancytable2 tr, .fancytable4 tr {
        display: block;
        width: 100% !important;
        border-bottom: 1px solid #ddd;
        margin-bottom: 3px;
    }

    .fancytable2 th, .fancytable4 th {
        display: block;
        width: calc(100% - 24px) !important;
        text-align: left !important;
        padding: 8px 12px !important;
        font-weight: bold;
        background: #f5f5f5 !important;
        border: none !important;
    }

    .fancytable2 td, .fancytable4 td {
        display: block;
        width: calc(100% - 24px) !important;
        padding: 12px !important;
        border: none !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .fancytable2 td.news_w4,
    .fancytable2 td.news_w5 {
        white-space: normal !important;
        word-break: break-word;
    }

    /* 表格響應式 - 公告列表頁（卡片式） */
    table.fancytable {
        width: 100% !important;
        display: block !important;
        border: none !important;
    }

    .fancytable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .fancytable tbody {
        display: block;
        width: 100%;
    }

    .fancytable tr  {
        display: block;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.07);
    }
	.fancytable th {
        display: none;
    }
    .fancytable td {
        display: flex !important;
        align-items: flex-start;
        padding: 8px 10px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        border-right: none !important;
        border-left: none !important;
        white-space: normal !important;
        word-break: break-word;
        font-size: 0.95em !important;
		line-height: 1.5 !important;
        width: auto !important;
    }

    .fancytable td:last-child {
        border-bottom: none !important;
    }

    /* 欄位標籤（::before） */
    .fancytable td::before {
        flex-shrink: 0;
        width: 42px;
        font-weight: bold;
        color: #777;
        font-size: 0.9em;
        margin-right: 10px;
        padding-top: 2px;
		text-align: center;
    }

    .fancytable td.news_w1::before { content: "單位"; }
    .fancytable td.news_w2::before { content: "主旨"; }
    .fancytable td.news_w3::before { content: "日期"; }

    /* 主旨欄連結 */
    .fancytable td.news_w2 {
        background-image: none !important;
        
    }

    .fancytable td.news_w2 a {
        display: block !important;
        word-break: break-word !important;
        line-height: 1.5 !important;
        color: #333;
    }
	
	table.contacttable {
        width: 100% !important;
        display: block;
        border: none !important;
    }

    .contacttable tbody {
        display: block;
        width: 100%;
    }

    .contacttable tr {
        display: block;
        width: 100% !important;
        border-bottom: 1px solid #ddd;
        margin-bottom: 3px;
    }

    .contacttable th {
        display: block;
        width: calc(100% - 20px) !important;
        text-align: left !important;
        padding: 8px 10px !important;
        font-weight: bold;
        background: #f5f5f5 !important;
        border: none !important;
    }

    .contacttable td {
		display: block;
        width: calc(100% - 20px) !important;
        text-align: left !important;
        padding: 8px 10px !important;
        border: none !important;
    }


    /* 行政/教學單位卡片外層容器 */
    .admin_b1_r {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }
	.admin_p1 {
	width: 70%;
	padding-top: 90%;
		margin: 0 auto 20px;
}

    /* 頁碼區塊響應式 */
	.pagenum {padding: 20px 0 0;}
    .pagenum a,
    .pagenum span,
    .pagenum2 a,
    .pagenum3 a,
    .pagenum3 span {
        padding: 3px 5px !important;
    }

    /* 子選單導航 */
    .nav {
        width: 100% !important;
        padding-left: 0;
    }

    .nav ul {
		width: 100%;
        display: flex;
        flex-direction: column;
    }

    .nav li {
        float: none;
        width: calc(100% - 20px);
        margin: 0;
		padding: 5px 10px;
        border-right: none;
        background: none;
        border-bottom: 1px solid rgba(255,255,255,0.9);
    }


    /* 頁面內容 */
    .page_b1 {
		width: calc(100% - 20px);
        padding: 15px 10px;
    }



    /* 頁尾 */
    #footer .footer_b1 {
		width: calc(100% - 30px);
        padding: 5px 15px 0;
        text-align: center;
    }

    .footer_w1,
    .footer_w2 {
        float: none;
        width: calc(100% - 10px);
        text-align: center;
		padding: 0 5px;
        margin-bottom: 15px;
		
    }

    .footer_aplus {
		width: 100%;
        float: none;
        text-align: center;
        margin: 15px 0 0;
    }
	.accpic {
	text-align: center;
}
}

/* ========================================
   漢堡選單按鈕（手機版專用）
   ======================================== */
@media (max-width: 767px) {
    /* 漢堡按鈕容器 */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        z-index: 100;
        background: var(--primary-color, #c30e27);
        padding: 16px 20px;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* 選單開啟時，漢堡按鈕固定在頂部 */
    .mobile-menu-toggle.active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
    }

    /* 漢堡圖示 */
    .mobile-menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        margin-right: 12px;
    }

    .mobile-menu-icon span {
        display: block;
        width: 100%;
        height: 3px;
        background: #fff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* 開啟時的動畫 */
    .mobile-menu-toggle.active .mobile-menu-icon span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.active .mobile-menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .mobile-menu-icon span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* 選單文字 */
    .mobile-menu-text {
        color: #fff;
        font-size: 1.2em;
        font-weight: bold;
        line-height: 1;
    }
}

/* 桌面版隱藏漢堡按鈕 */
@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* ========================================
   無障礙功能
   ======================================== */
/* Skip Links */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: 10px 15px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #bb262d;
    outline-offset: 2px;
}

/* 螢幕閱讀器專用文字 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus 樣式增強 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #c30e27;
    outline-offset: 2px;
}

/* ========================================
   打印樣式
   ======================================== */
@media print {
    .mobile-menu-toggle,
    #navi,
    .lan,
    .isearch,
    #advertise {
        display: none !important;
    }

    .main {
        width: 100% !important;
    }
}

/* ========================================
   活動花絮輪播控制列
   WCAG 2.2.2 - Pause, Stop, Hide
   ======================================== */
.fader-header {
    display: flex;
	width: calc(100% - 8px);
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px 10px 3px;
    /*border-bottom: 2px solid #ffb24c;*/
}

.fader-title-text {
    font-size: 1.1em;
	font-weight: 600;
	color: #c44601;
    flex: 1;
}

/* flex 子項目中 float 無效，補充間距覆蓋 */
.fader-header .marquee-toggle-btn {
    float: none;
    margin: 0;
    flex-shrink: 0;
}

/* 數字導覽按鈕焦點樣式 */
.fader-nav:focus,
.fader-cur-nav:focus {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(195, 14, 39, 0.25);
}