@charset "utf-8";
/* CSS Document */
    .table-wrapper {
        background-color: #fff;
        border: 1px solid #ddd;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .header {
        background-color: #43484D;
        color: white;
        padding: 15px;
        text-align: center;
        font-size: 1.2em;
        font-weight: bold;
    }

    .grid-container {
        display: grid;
        grid-template-columns:repeat(5, 1fr); /* 電腦版佈局 */
        overflow: visible;
    }

    .cell {
        padding: 10px;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        background-color: #f9f9f9;
        display: flex;
        align-items: center;
        justify-content:center;
    }

	.cell img {
		width: 100%;
		height: auto;
		max-height: 85vh;
		object-fit: contain;
	}	
	
	
	.img_type{
		padding: 0 0 10px 0;
		align-content:flex-start;
	}
	
    .fixed-header, .fixed-col-item {
		grid-column: 1 / 2;
		justify-content:left;
		text-align:left;
    }

    
    .level-item {
        display: flex; /* 電腦版預設都顯示 */
		flex-wrap:wrap;
		text-align: center;
    }

    .level-title[data-level="A"], .level-item[data-level="A"] { grid-column: 2; }
    .level-title[data-level="B"], .level-item[data-level="B"] { grid-column: 3; }
    .level-title[data-level="C"], .level-item[data-level="C"] { grid-column: 4; }
    .level-title[data-level="D"], .level-item[data-level="D"] { grid-column: 5; }
    
    /* 箭頭樣式 */
    .nav-arrows {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 600px;
        display: none;
        justify-content: space-between;
        padding: 0 5px;
        z-index: 50;
        pointer-events: none;
    }

    #prevBtn, #nextBtn {
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 1.5em;
        border-radius: 5px;
        pointer-events: auto;
    }

	.grid-container .cell:nth-child(10n+1),
	.grid-container .cell:nth-child(10n+2),
	.grid-container .cell:nth-child(10n+3),
	.grid-container .cell:nth-child(10n+4),
	.grid-container .cell:nth-child(10n+5) {
		background-color: #E8E8EA;

		}
	

	.grid-container .cell:nth-child(10n+6),
	.grid-container .cell:nth-child(10n+7),
	.grid-container .cell:nth-child(10n+8),
	.grid-container .cell:nth-child(10n+9),
	.grid-container .cell:nth-child(10n+10){
		background-color: #F3F5F6;

		}
		
	
	.grid-container .cell.fixed-header,
    .grid-container .cell.level-title {
		background-color: #7A7A7A;
		color: white;
       	font-weight: bold;
    }	
	

	
    /* 手機版樣式 (使用媒體查詢) */
    @media (max-width: 767px) {

        .grid-container {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: minmax(40px, auto);
			overflow: hidden;
        }


        .level-title, .level-item {
            display: none; /* 手機版預設都隱藏 */
            grid-column: 2; /* 強制放在第二欄 */
        }
		.level-title[data-level="A"], .level-item[data-level="A"],
		.level-title[data-level="B"], .level-item[data-level="B"],
		.level-title[data-level="C"], .level-item[data-level="C"], 
		.level-title[data-level="D"], .level-item[data-level="D"] { grid-column: 2; }	
		

		
    }