/* CSS Document */

        :root {
            --primary-color: #0056b3;
            --secondary-color: #f8f9fa;
            --accent-color: #dc3545;
            --text-dark: #333333;
            --text-muted: #6c757d;
            --border-color: #dee2e6;
            --container-width: 900px;
        }

   
        section { margin-bottom: 40px; }
        h2 { font-size: 1.4rem; color: var(--primary-color); padding-left: 10px; margin-bottom: 15px; }
        h2.breast_case{ border-left: 5px solid var(--primary-color);
	
	      
	
          }
        p { margin-bottom: 15px; text-align: justify; }

        /* 六張圖片排版網格（修正破版關鍵：使用等寬自動填滿網格） */
        .image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 20px 0; }
        .image-card { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; background-color: var(--secondary-color); display: flex; flex-direction: column; width: 100%; }
        
        /* 圖片容器與佈局 */
        .img-wrapper { position: relative; width: 100%; height: 220px; background-color: #e9ecef; overflow: hidden; }
        .case-img { width: 100%; height: 100%; object-fit: cover; display: block; }

        /* 半透明隱約可見的遮罩層 (預設顯示) */
        .blurred-overlay { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(50, 50, 50, 0.55); 
            backdrop-filter: blur(5px);         
            -webkit-backdrop-filter: blur(5px); 
            color: white; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            padding: 20px; 
            text-align: center; 
            font-size: 0.95rem; 
            font-weight: bold; 
            z-index: 10; 
            cursor: pointer;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); 
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
     
        .blurred-overlay span { background: var(--accent-color); padding: 5px 12px; border-radius: 4px; margin-top: 10px; font-size: 0.8rem; font-weight: normal; text-shadow: none; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

        /* 當被解鎖隱藏遮罩層 */
        .img-wrapper.unlocked .blurred-overlay { opacity: 0; visibility: hidden; pointer-events: none; }

        /* 解鎖後的獨立按鈕控制列 */
        .img-controls {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            gap: 8px;
            z-index: 5;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
        /* 解鎖後才現形控制按鈕 */
        .img-wrapper.unlocked .img-controls { opacity: 1; visibility: visible; }


        .control-btn {
            padding: 6px 12px;
            font-size: 0.8rem;
            font-weight: bold;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            transition: background 0.2s ease;
        }
        .btn-zoom { background-color: var(--primary-color); }
        .btn-zoom:hover { background-color: #004085; }
        .btn-lock { background-color: #6c757d; }
        .btn-lock:hover { background-color: #545b62; }

        .image-caption { padding: 12px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border-color); background-color: #ffffff; flex-grow: 1; }

        /* 彈出燈箱放大 */
        .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; }
        .lightbox-content { max-width: 85%; max-height: 80vh; border-radius: 4px; object-fit: contain; }
        .lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; cursor: pointer; user-select: none; }
        
        @media (max-width: 768px) { h1 { font-size: 1.6rem; } .image-grid { grid-template-columns: 1fr; }