/* ---------- 設計代幣：以深海為底的固定配色 ---------- */
:root{
  --abyss:#04121f;      /* 最深的海 */
  --deep:#082036;       /* 深海 */
  --mid:#0e3350;        /* 中層水域 */
  --ice:#7cd6ec;        /* 冰藍：主要點綴色 */
  --ice-dim:#6fc4dc;    /* 子項目圓點：對深底維持 3:1 以上 */
  --foam:#e9f5fa;       /* 浪花白：主要文字 */
  --foam-dim:#b6cdda;   /* 次要文字：對最亮的背景仍有 4.5:1 以上 */
  --card:rgba(255,255,255,.055);
  --card-hover:rgba(255,255,255,.11);
  /* 邊框兼具「元件邊界」的辨識功能，依 WCAG 1.4.11 需達 3:1，故不再用極淡的線 */
  --line:rgba(124,214,236,.42);
  --line-strong:rgba(124,214,236,.72);
  --radius:16px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.7);
  --font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  color:var(--foam);
  background:var(--abyss);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 無障礙工具類 ---------- */
/* 視覺上隱藏、但保留給螢幕閱讀器朗讀 */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 背景：深海分層 + 光束 ---------- */
.sea{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, #14476b 0%, transparent 55%),
    linear-gradient(180deg, var(--mid) 0%, var(--deep) 38%, var(--abyss) 100%);
}

/* 水面折射的光暈，緩慢飄移 */
.sea::before,
.sea::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.45;
}
.sea::before{
  width:60vmax;height:60vmax;
  top:-25vmax;left:-15vmax;
  background:radial-gradient(circle, rgba(124,214,236,.30), transparent 65%);
  animation:drift 26s ease-in-out infinite alternate;
}
.sea::after{
  width:45vmax;height:45vmax;
  top:20vmax;right:-18vmax;
  background:radial-gradient(circle, rgba(78,168,196,.24), transparent 65%);
  animation:drift 34s ease-in-out infinite alternate-reverse;
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(6vmax,4vmax,0) scale(1.15)}
}

/* 上升的氣泡 */
.bubbles{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bubbles i{
  position:absolute;
  bottom:-8vh;
  display:block;
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), rgba(124,214,236,.10) 60%, transparent 70%);
  border:1px solid rgba(255,255,255,.12);
  animation:rise linear infinite;
}
@keyframes rise{
  0%  {transform:translateY(0) translateX(0);opacity:0}
  10% {opacity:.7}
  90% {opacity:.5}
  100%{transform:translateY(-112vh) translateX(3vw);opacity:0}
}

/* ---------- 版面 ---------- */
.page{
  width:min(100% - 2.5rem, 30rem);
  margin-inline:auto;
  padding:clamp(2.5rem,8vw,4.5rem) 0 3rem;
}

/* ---------- 頭像 ---------- */
.avatar{
  width:clamp(120px,32vw,150px);
  aspect-ratio:1;
  margin:0 auto 1.25rem;
  display:grid;
  place-items:center;
}
/* 4:3 橫向圖完整顯示（contain 不裁切） */
.avatar picture{width:92%;height:92%;display:block}
.avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));
}
/* ---------- 標題 ---------- */
.identity{text-align:center;margin-bottom:2.25rem}
.identity h1{
  margin:0 0 .3rem;
  font-size:clamp(1.5rem,5.5vw,1.9rem);
  font-weight:700;
  letter-spacing:.02em;
}
.handle{
  margin:0 0 .8rem;
  font-size:.9rem;
  color:var(--ice);
  letter-spacing:.06em;
}
.bio{
  margin:0;
  font-size:.92rem;
  color:var(--foam-dim);
  text-wrap:balance;
}

/* ---------- 連結列表 ---------- */
.links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

/* 連結與展開鈕共用的卡片外觀 */
.tile{
  display:flex;
  align-items:center;
  gap:.9rem;
  width:100%;
  padding:.95rem 1.1rem;
  font:inherit;
  font-weight:500;
  color:var(--foam);
  text-align:left;
  text-decoration:none;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
  transition:background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.tile:hover,
.tile:focus-visible{
  background:var(--card-hover);
  border-color:var(--line-strong);
  transform:translateY(-2px);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.8);
}
.tile:active{transform:translateY(0)}
/* 焦點框：2px 實線 + 3px 偏移，確保在任何底色上都看得見（WCAG 2.4.11／2.4.13） */
.tile:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

.tile .icon{flex:none;width:22px;height:22px;color:var(--ice)}
.tile .label{flex:1;min-width:0}
.tile .label small{
  display:block;
  font-size:.8rem;
  font-weight:400;
  color:var(--foam-dim);
  letter-spacing:.02em;
}
/* 右側指示箭頭：滑過時往前游一點 */
.tile .go{flex:none;width:16px;height:16px;color:var(--foam-dim);transition:transform .22s ease,color .22s ease}
.tile:hover .go,
.tile:focus-visible .go{transform:translateX(3px);color:var(--ice)}

/* ---------- 下層選單 ---------- */
.tile[aria-expanded="true"]{border-color:var(--line-strong);background:var(--card-hover)}
.tile[aria-expanded="true"] .go{transform:rotate(90deg);color:var(--ice)}

/* 收合時一併設 visibility:hidden，子連結才會同時退出 Tab 序與螢幕閱讀器，
   不必用 tabindex="-1" 這種只擋鍵盤、擋不住朗讀的做法 */
.submenu{
  overflow:hidden;
  display:grid;
  grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows .3s ease, visibility 0s linear .3s;
}
.submenu[data-open="true"]{
  grid-template-rows:1fr;
  visibility:visible;
  transition:grid-template-rows .3s ease, visibility 0s;
}
/* JS 初始收合的瞬間停用過渡，避免載入時閃一下 */
.submenu.no-transition{transition:none}
.submenu > div{min-height:0}

.sublist{
  list-style:none;
  margin:.5rem 0 0 1.6rem;
  padding:0 0 0 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  /* 一條垂直的水線，把子項目串起來 */
  border-left:1px solid var(--line);
}
.sublist a{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .9rem;
  font-size:.9rem;
  color:var(--foam);
  text-decoration:none;
  background:rgba(255,255,255,.03);
  border:1px solid transparent;
  border-radius:12px;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.sublist a::before{
  content:"";
  position:absolute;
  left:-1.6rem;
  width:1.1rem;
  height:1px;
  background:var(--line);
}
.sublist a:hover,
.sublist a:focus-visible{
  background:rgba(124,214,236,.10);
  border-color:var(--line);
  color:#fff;
}
.sublist a:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.sublist .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--ice-dim)}
.sublist .name{flex:1}
.sublist .host{font-size:.78rem;color:var(--foam-dim)}

/* ---------- 頁尾 ---------- */
footer{
  margin-top:2.5rem;
  text-align:center;
  font-size:.8rem;
  color:var(--foam-dim);
  letter-spacing:.05em;
}
footer .wave{display:block;margin:0 auto .7rem;width:56px;color:var(--line-strong)}

/* ---------- 無障礙：尊重減少動態的偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .bubbles{display:none}
}

/* ---------- 無障礙：使用者要求更高對比 ---------- */
@media (prefers-contrast: more){
  :root{
    --foam-dim:#dcebf3;
    --line:rgba(124,214,236,.75);
    --line-strong:#7cd6ec;
    --card:rgba(255,255,255,.12);
    --card-hover:rgba(255,255,255,.2);
  }
  .sublist a{background:rgba(255,255,255,.1);border-color:var(--line)}
}

/* ---------- 無障礙：Windows 高對比／強制色彩模式 ---------- */
@media (forced-colors: active){
  .sea,.bubbles{display:none}
  .tile,.sublist a{
    border:1px solid ButtonBorder;
    background:ButtonFace;
    color:ButtonText;
  }
  .tile:hover,.sublist a:hover{background:Highlight;color:HighlightText}
  .tile:focus-visible,.sublist a:focus-visible{outline:2px solid Highlight;outline-offset:2px}
  .sublist .dot{background:CanvasText}
  /* 展開狀態在強制色彩下沒有底色差異，改用外框粗細表示 */
  .tile[aria-expanded="true"]{border-width:2px}
}