/* --- 代碼範例區塊 --- */
  .code-example-area {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
  }

  .step-breakdown {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.8;
  }

  .step-breakdown code {
    color: #fbb750;
    /* 金色代碼 */
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    margin: 0 3px;
  }

  /* 提示框微調 (沿用上一頁的樣式，這裡再次確認) */
  .alert-box {
    background: rgba(251, 183, 80, 0.1);
    border-left: 4px solid var(--primary-gold, #fbb750);
    padding: 15px;
    color: #fbb750;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
    line-height: 1.6;
  }

  /* 讓圖片有些陰影與圓角 */
  .image-container img {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }



   /* RWD */
   @media (max-width: 768px) {

       /* content-box 內的圖片：依比例縮放（常用：完整顯示、不裁切） */
       .content-box img {
           width: 100%;
           height: 100%;
           object-fit: contain;
           /* ✅ 依比例縮放，完整顯示，可能留白 */
           object-position: center;
           display: block;
       }

       /* 如果你的 content-box 高度不是固定的，用這個版本 */
       .content-box img {
           max-width: 100%;
           height: auto;
           /* ✅ 依比例縮放 */
           display: block;
       }
   }