h1{
  margin: 0;
}
h2{
  text-align: left;
  margin-left:3%;
}
#concept {
  display: block;
  height: fit-content;
  resize: vertical;
  width: 100%;
  font-size: 15px;
  font-family: 'LXGW WenKai Light', sans-serif;
  white-space: pre-wrap;
}

/* 設定按鈕 */
.dropdown-btn2 {
    padding: 5px 20px;
    background: transparent;
    border: none;
    text-decoration: none;
    font-family: 'LXGW WenKai Regular', sans-serif;
    text-align: justify;
    font-size: 18px;
    font-weight: 300;
    color: black;
    display: block;
    transition: 0.1s;
    text-align: left;
}
.dropdown-btn2:hover{
    cursor: pointer;
    color: linear-gradient(90deg, #005bea, #00c6fb);
    transform: scale(0.95);
}
.dropdown-btn-inside {
    padding: 5px 20px;
    background: transparent;
    border: none;
    text-decoration: none;
    font-family: 'LXGW WenKai Regular', sans-serif;
    text-align: justify;
    font-size: 18px;
    font-weight: 300;
    color: black;
    display: block;
    transition: 0.1s;
    text-align: left;
}
.dropdown-btn-inside:hover{
    cursor: pointer;
    color: linear-gradient(90deg, #005bea, #00c6fb);
    transform: scale(0.95);
}

/* 設定選單初始狀態（隱藏） */
.dropdown-content2 {
    font-family: 'LXGW WenKai Regular', sans-serif;
    text-align: justify;
    font-size: 16px;
    font-weight: 300;
    margin: auto 40px auto 30px;
    display: none;
    position: static;
    background-color: transparent;
    overflow: hidden;
    transition: height 0.3s ease-out;
    max-width: 100%;
}

/* ① 每個選單連結獨佔一行 ↓↓↓ */
.dropdown-content2 a{
  display:block;            /* 關鍵：改成 block 就會自動換行 */
  line-height:1.4;          /* 想調行距可加這行 */
}
#nextBtn{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size: 30px;     /* 放大箭頭 */
  font-weight: bold;   /* 加粗字體 */
  background: none;    /* 去除背景 */
  border: none;        /* 去除邊框 */
  cursor: pointer;     /* 滑鼠變手指 */
  padding: 10px;       /* 增加可點擊範圍 */
  color: #333;         /* 設定箭頭顏色，可自行調整 */
}
#prevBtn{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  font-size: 30px;     /* 放大箭頭 */
  font-weight: bold;   /* 加粗字體 */
  background: none;    /* 去除背景 */
  border: none;        /* 去除邊框 */
  cursor: pointer;     /* 滑鼠變手指 */
  padding: 10px;       /* 增加可點擊範圍 */
  color: #333;         /* 設定箭頭顏色，可自行調整 */
}
/* 方式 2：把父層改成 column flex，也能讓子元素直排 */
#series-menu{
  flex-direction:column;   /* 垂直排列子元素 */
  gap:4px;                 /* 每列間距（CSS flex gap）*/
}
.menu-items {
  display: none;
  padding: 10px 0;
}
.menu-items.open {
  display: block;
}
.menu-items a {
  display: block;

  padding: 10px 12px;
  color: black;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}

/* 通用樣式：所有 dropdown content 區塊 */
.dropdown-content2,
.dropdown-content3,
.dropdown-content4 {
  display: none;
  position: static;
  background-color: transparent;
  overflow: hidden;
  transition: height 0.3s ease-out;
  max-width: 100%;
  margin: auto 40px auto 30px;
  font-family: 'LXGW WenKai Regular', sans-serif;
  text-align: justify;
  font-size: 16px;
  font-weight: 300;
}

/* 展開時顯示 */
.dropdown-content2.open,
.dropdown-content3.open,
.dropdown-content4.open {
  display: block;
  height: auto;
}

/* 共用選項樣式 */
.dropdown-content2 a,
.dropdown-content3 a,
.dropdown-content4 a {
  display: inline-block;
  padding: 10px 0px;
  color: black;
  text-decoration: none;
}

/* hover 效果（有錯誤 color 寫法已修正） */
.dropdown-content2 a:hover,
.dropdown-content3 a:hover,
.dropdown-content4 a:hover {
  white-space: nowrap;
  margin-left: 5px;
  cursor: pointer;
  color: #005bea; /* 原本的 linear-gradient 是無效的，改為主色 */
  transform: scale(0.95);
}

.container{
  width:100%;
  background-color: transparent;
  justify-content: center;
  margin: 0 auto;
}
.container2 {
    min-height: 1px;
    width: 100%;
    height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-top: 0px;
    background-color: black;
}
.allWorks{
  display: flex;
}
.aside{
  flex-shrink: 0;
  display: flex;
  width: 200px;
  min-width: 10%;
  vertical-align: top;
  max-width: 230px;
  position: relative;
  background-color: #F8F8F8;
}

.asidedrop{
    padding: 10px ;
}
@media (max-width: 640px) {
  .allWorks {
    flex-direction: column;
  }

  .aside {
    width: 100%;
    max-width: 100%;
    background-color: #F8F8F8; /* 保證灰色延伸滿版 */
  }

  .insdide {
    width: 100%;
  }
}

.dropdown2 {
    position: relative;
    display: block;
}
.inside{
  flex: 1;
  display: flex;
  padding: 20px; /* 可視需求調整 */
  max-width:100%;
  border-width: 0;
  margin: 0 auto;
}

/* 作品展示區：改用 grid 自動對齊 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px; /* 項目間距 */
  justify-items: center; /* 每個 item 水平置中（可選） */
  align-items: start;
  padding: 20px 0;
}

/* 作品卡片 */
.item {
  width: 100%;
  max-width: 220px;
  height: 320px;
  overflow: hidden;
  background: white;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

/* 上方圖片容器 */
.item_pic {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
}

/* 圖片填滿區塊（但仍限制在容器中） */
.item_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
}

/* 文字容器 */
.item_p {
  margin: 0;
  padding: 0;
  font-size: 15px;
  text-align: left;
}

/* 名稱文字 */
.item_name {
  font-size: 16px;
  margin-bottom: 5px;
}

/* 標籤文字（換行 + #） */
.item_tag {
  margin: 4px 0;
  color: gray;
  font-size: 14px;
  text-align: left;
  white-space: pre-line; /* 保留 \n 換行 */
}

/* 🔵 懸浮視窗背景 */
.popup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-h2 {
  text-align: left;

}

/* 🔵 內部內容區塊 */
.popup-content {
  background: #fff;
  padding: 20px;
  width: 90%;
  max-width: 1000px;
  border-radius: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  position: relative;
  overflow-y: auto;
  max-height: 90vh;
}

/* 🔵 關閉按鈕 */
.popup-content .close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  color: #888;
}

/* 🔵 編輯表單欄位 */
.popup-content input,
.popup-content textarea {
  width: 100%;
  margin: 8px 0;
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.popup-content img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 6px;
}