/* ----------------------------------------------------
   0. 全局設定
---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root{
  --bar-h:44px;          /* 統一搜尋列高度 (桌機 & 手機) */
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Roboto',sans-serif;
  scroll-behavior:smooth;
}

/* 捲軸 (僅 sidebar 顯示實色) */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:none;}
::-webkit-scrollbar-thumb{
  background:transparent;border-radius:5px;
}
.sidebar:hover::-webkit-scrollbar-thumb{background:#717171;}
::-webkit-scrollbar-thumb:hover{background:#888;}

h1,i{font-size:1.5rem;color:#fff;}

/* ----------------------------------------------------
   1. Header（Logo + 搜尋列）
---------------------------------------------------- */
.header{
  width:100%;
  background:#202020;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 16px;
  flex-wrap:wrap;               /* 手機自動換行 */
}

.logo-container{
  display:flex;align-items:center;
}
#logoimg{height:5vw;cursor:pointer;}
#logoimg1{height:3vw;}
.logo-img img{transition:.3s;}
.logo-img:hover img{transform:scale(1.5);}
#logo-txt{
  padding-left:.1px;
  padding-right:5vw;
  letter-spacing:-.15vw;
  cursor:pointer;
}
#logo-txt:hover{color:#ffff99;}

/* --- 搜尋列 --- */
.search-form{
  display:flex;
  flex:1 1 500px;          /* 最大 500px，可收窄 */
  max-width:685px;
}

.search-form input{
  flex:1;
  height:var(--bar-h);
  background:#121212;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px 0 0 10px;
  padding:0 12px;
  color:#fff;
  font-size:1rem;
}

.search-form .search-btn{
  width:var(--bar-h);height:var(--bar-h);
  background:#313131;
  border:none;border-radius:0 10px 10px 0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.search-form i{transition:.2s;}
.search-form i:hover{transform:scale(1.25);color:#c3d2ea;}

/* ----------------------------------------------------
   2. 主版面 (Sidebar + Content)
---------------------------------------------------- */
.body-container{display:flex;background:#212121;}

/* --- Sidebar --- */
.sidebar{
  width:15%;padding-top:10px;
  background:#212121;color:#fff;
  overflow-y:scroll;
}
.sidebar-items{display:flex;flex-direction:column;}
.sidebar-item{
  display:flex;align-items:center;
  height:40px;padding:0 24px;cursor:pointer;
}
.sidebar-item i{margin-right:24px;}
.sidebar-item:hover{background:#4c4c4c;}

/* --- Content --- */
.content{width:85%;padding:10px;}

/* ----------------------------------------------------
   3. 分類 Chips
---------------------------------------------------- */
.chips-wrapper{
  display:flex;overflow-x:scroll;
  background:#181818;padding-left:14px;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.chips-wrapper::-webkit-scrollbar{height:0;}

.chip{
  margin:12px 6px;padding:6px 12px;
  background:#373737;color:#fff;
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;white-space:nowrap;
  cursor:pointer;transition:.5s;
}
.chip:hover{background:#818080;}

/* ----------------------------------------------------
   4. 影片表格 (桌機 5欄) + 縮圖統一 5:6
---------------------------------------------------- */
.video-container{
  padding:20px 25px;background:#fff;
  overflow-y:scroll;
  height:calc(100vh - 116px);   /* 桌機固定高 */
}

/* 固定欄寬不被圖片撐開 */
.video-container table{width:100%;table-layout:fixed;}
table,th,td{
  border:0;border-collapse:collapse;
  width:20%;padding:10px;text-align:center;
}

/* 先佔 5:6 外框，再用 object-fit:cover 等比裁切 */
.image-container{position:relative;width:100%;padding-top:120%;overflow:hidden;}
.image-container img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* ----------------------------------------------------
   5. 響應式 (≥992px 已含) 
---------------------------------------------------- */
@media (max-width:1200px){
  .sidebar{width:70px;overflow-x:hidden;}
  .content{width:calc(100vw - 70px);}
}

@media (max-width:992px){
  .header{flex-direction:column;align-items:flex-start;padding:10px;}
  .logo-container{justify-content:center;width:100%;margin-bottom:10px;}

  /* 搜尋列全寬 */
  .search-form{flex:1 1 100%;max-width:none;margin-top:8px;}

  /* Sidebar 換成橫向捲動 */
  .sidebar{
    width:100%;height:auto;position:relative;
    display:flex;flex-direction:row;overflow-x:scroll;
  }
  .sidebar-items{flex-direction:row;white-space:nowrap;}
  .sidebar-item{padding:10px;font-size:.9rem;height:auto;}

  .content{width:100%;padding:10px 0;}

  .chips-wrapper{flex-wrap:nowrap;padding:10px;}
  .chip{font-size:.9rem;margin:8px;}

  .video-container{height:auto;padding:10px;}
  table,td{width:50%;}           /* 2 欄 */
}

@media (max-width:600px){
  table,td{width:100%;}          /* 1 欄 */
  .chip{font-size:.8rem;padding:5px 10px;}

  #logoimg,#logoimg1{height:10vw;}
  .search-form i{transform:scale(1.5);}
}