:root {
  --accent:#2b8cff;
  --accent-2:#ff8b3d;
  --bg:#2e3141;
  --card-bg:#bafbbd;
}

body {
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial;
  margin:0;
  background:var(--bg);
  color:#351e7c;
}

/* 三欄排版 */
.wrap {
  display:grid;
  grid-template-columns:140px 160px 1fr;
  gap:24px;
  padding:24px;
  max-width:1400px;
  margin:0 auto;
}

/* 左側年份選單 */
.yearlist-wrap {
  position:relative; 
}

.year-list {
  position:relative; /* 讓 .year-item 的 top 可以被控制 */
  width:120px;
}

/* 年份 item（由 JS 控制 top） */
.year-item {
  position:absolute;
  left:0;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  cursor:pointer;
  color:#fff;
  transition:transform .18s;
}

.year-item .dot {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ccc;
  transition:all .25s;
}
.year-item .label {
  font-weight:600;
  transition:all .25s;
}
.year-item .count {
  color:#eee;
  font-size:13px;
}

/* hover 效果 */
.year-item:hover .dot { transform:scale(1.5); background:var(--accent); }
.year-item:hover .label { color:var(--accent); }

/* 點擊效果 */
.year-item.active .label { color:var(--accent-2); font-size:18px; }
.year-item.active .dot { background:var(--accent-2); transform:scale(1.8); }

/* 中間 timeline svg */
.timeline-wrap {
  position:relative;
}
.timeline-svg {
  height:100vh;
  overflow:visible;
}

/* 右側內容 */
.content-wrap { min-height:100vh; flex:1; }

.card-area {
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}
.year-card {
  width:80%;
  max-width:800px;
  background:var(--card-bg);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  padding:18px;
}

/* 論文清單 */
.list-area {
  padding:0 18px;
  display:grid;
  gap:12px;
}

.paper {
  background:#f9dfed;
  padding:12px;
  border-radius:8px;
  box-shadow:0 6px 14px rgba(20,30,50,0.04);
  display:flex;
  gap:12px;
}
.paper .meta { flex:1; }
.paper h4 { margin:0 0 6px; color:#006400; }
.paper .meta p { margin:2px 0; color:#555; font-size:14px; }
.paper .meta i { margin:2px 0; color:#7b3dcc; font-size:14px; }
.paper .authors { font-weight:600; color:#333; }

.fade-in {
  animation:fadeIn .6s ease forwards;
}
@keyframes fadeIn {
  from {opacity:0; transform:translateY(10px);}
  to {opacity:1; transform:translateY(0);}
}

/* 手機版 */
@media(max-width:800px){
  .wrap{
    display:flex;
    flex-direction:column;
  }
  
  /* 手機版不顯示 timeline */
  .timeline-svg{ display:none; }
  
  /* 🔥 外層年份區也要固定，避免被內容推走 */
  .yearlist-wrap{
    position:fixed;
    top:0;                      /* 黏在螢幕最上方 */
    left:0;
    width:100vw;                /* 寬度 = 螢幕寬度 */
    backdrop-filter:blur(6px);  /* 模糊效果更像 APP tab */
    z-index:999;                /* 蓋在最上面 */
  }

  /* 🔥 年份選單 (真正的 tab bar）*/
  .year-list{
    /*  position:static;*/         
    display:flex;
    gap:12px;
    overflow-x:auto;        /* 可左右滑動 */
    /*  padding:6px;*/
    padding:10px 12px;
    width:100vw;
  }

  /* 手機版不再使用絕對定位 top，由 flex 水平排列 */
  .year-item{
    position:static;
    flex:0 0 auto;        /* 讓每個 tab 有自己的寬度 */
    white-space:nowrap;   /* 不換行 */
  }

    /* 🔥 避免內容被 tab 挡住：push content downward */
  .content-wrap{
    margin-top:60px;       /* 根據 tab 高度調整 */
  }

  /* 卡片也跟著往下推 */
  .card-area{
    margin-top:60px;
  }
}