/* ================================
   Base Variables
=================================== */
/* ================================
   Base Variables
=================================== */
:root{
  --bg: #000000;         /* ページ基調（RINGSは黒） */
  --text: #ffffff;       /* 文字色 */
  --thumb: #3a3f44;      /* スクロールつまみ */
  --thumb-hover: #5b636b;/* つまみホバー */
}

/* ================================
   Vanta Layer / Body
=================================== */
#vanta-bg{
  position: fixed;
  inset: 0;
  width:100%;
  height:100%;
  z-index:-1;
  background: var(--bg);
}

body{
  margin:0;
  color: var(--text);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  background: var(--bg);
}

/* ================================
   Header (Title + Right-aligned Link)
   - 親要素内で右揃え（Flex + margin-left:auto）
=================================== */
.site-header{
  position: fixed;
  top: 12px;
  left: 16px;
  right: 16px;              /* 横一杯（左右に余白） */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-title{
  position: static;         /* ヘッダー内の通常フロー */
  color: var(--text);
  font-size: clamp(28px,4vw,48px);
  font-weight: 800;
  letter-spacing:.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  user-select:none;

  /* 右リンクと干渉しにくい最大幅（必要に応じ調整） */
  max-width: min(70vw, 820px);
}

.site-link{
  position: static;         /* ヘッダー内の通常フロー */
  margin-left: auto;        /* ← 親要素内で右揃え */
  font-size: clamp(18px,3vw,32px);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: .95;
}
.site-link:hover,
.site-link:focus{
  text-decoration: underline;
  opacity: 1;
}

/* ================================
   Accordion Panel (auto-growing)
   - タイトル/リンクの少し下から開始
   - 開いた量に応じて背面パネルが自動伸長
   - 画面下に届いたら内側スクロール
=================================== */
.accordion-wrap{
  position: fixed;
  left: 24px;
  top: 160px;                      /* ヘッダーの下（好みで調整可） */
  width: min(92vw, 560px);

  height: auto;                    /* 自動伸縮 */
  max-height: calc(100vh - 180px); /* はみ出す時だけ内側スクロール */
  overflow: auto;

  padding: 12px 12px 24px 12px;
  z-index: 1;

  /* 半透明の黒背景 + 読みやすさ向上 */
  background: rgba(0,0,0,.48);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  backdrop-filter: saturate(140%) blur(2px);
  border-radius: 12px;
  outline: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);

  /* スクロールバー（既定は非表示、操作時のみ表示） */
  scrollbar-gutter: stable;
  scrollbar-width: none;           /* Firefox 既定非表示 */
  transition: background-color .18s ease, box-shadow .18s ease;
}

/* パネル全体のホバーで少し濃くする */
.accordion-wrap:hover{
  background: rgba(0,0,0,.58);
  box-shadow: 0 10px 28px rgba(0,0,0,.34);
}

/* Firefox：操作/ホバー時のみスリムに表示（JSで .scroll-active を付与） */
.accordion-wrap.scroll-active,
.accordion-wrap:hover{
  scrollbar-width: thin;
}

/* WebKit：操作/ホバー時のみスクロールバーを表示 */
.accordion-wrap::-webkit-scrollbar{
  width: 0; height: 0;             /* 既定は非表示 */
  transition: width .18s ease, height .18s ease;
}
.accordion-wrap.scroll-active::-webkit-scrollbar,
.accordion-wrap:hover::-webkit-scrollbar{
  width: 10px; height: 10px;       /* 表示 */
}
.accordion-wrap::-webkit-scrollbar-track{
  background: transparent;         /* パネルに馴染ませる */
}
.accordion-wrap::-webkit-scrollbar-thumb{
  background: var(--thumb);
  border-radius: 8px;
  border: 2px solid transparent;   /* エッジを細く見せてフラットに */
}
.accordion-wrap::-webkit-scrollbar-thumb:hover{
  background: var(--thumb-hover);
}

/* ================================
   Accordion Content
=================================== */
.acc{ list-style:none; padding:0; margin:0; }
.acc-item{ border-bottom:1px solid rgba(255,255,255,.22); }

/* 行（ボタン） */
.acc-btn{
  width:100%;
  text-align:left;
  background: transparent;
  color: var(--text);
  border:0;
  padding: 14px 8px 14px 0;
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 8px;              /* クリック領域を少し角丸に */
  transition: background-color .12s ease, color .12s ease;
}

.acc-btn.leaf{
  text-decoration: none;
}
.acc-btn.leaf[aria-disabled="true"]{
  opacity: .65;
  cursor: default;
}

/* ボタンのホバーで薄く反転（onMouse時の色変化） */
.acc-btn:hover,
.acc-btn:focus-visible{
  background: rgba(255,255,255,.2);
}
.acc-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

/* 開閉アイコン（▶/▼風） */
.caret{
  display:inline-block;
  transition: transform .2s ease;
  width:0;height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:8px solid var(--text); /* ▶ */
}
.acc-btn[aria-expanded="true"] .caret{
  transform: rotate(90deg);
}

/* 子パネル */
.acc-panel{
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 18px;
  font-size: clamp(14px, 2vw, 16px);
  line-height:1.7;
  color:#f4f6ff;
  opacity: 0;
  transition: max-height .24s ease, opacity .22s ease, padding .2s ease;
}
.acc-panel.open{
  max-height: 9999px;
  opacity: 1;
  padding: 8px 0 12px 18px;
}

.acc-btn.leaf.has-url{
  text-decoration: underline;
}

/* 階層の軽い差別化 */
.acc2 .acc-btn{ font-weight:600; opacity:.95; }
.acc3 .acc-btn{ font-weight:500; opacity:.9; }

.accordion-status{
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  padding: 14px 8px;
}
.accordion-status.error{
  color: #ff9ea8;
}

/* ================================
   Responsive
=================================== */

/* タブレット程度でタイトルの最大幅を緩めて干渉回避 */
@media (max-width: 840px){
  .site-title{
    max-width: calc(100vw - 260px);
  }
}

/* スマホ縦（幅 <= 600px）：
   - ヘッダーは縦積み（リンクはタイトル下へ）
   - アコーディオン開始位置も下げる
*/
@media (max-width: 600px){
  .site-header{
    left: 12px;
    right: 12px;
    top: 10px;
    flex-direction: column;
    align-items: flex-start;        /* 左寄せで縦並び */
    gap: 8px;
  }

  .site-title{
    max-width: 100%;
    font-size: clamp(24px, 6vw, 34px);
    line-height: 1.2;
  }

  .site-link{
    margin-left: 0;                 /* 右寄せ解除（縦並び） */
    font-size: clamp(16px, 4.6vw, 22px);
  }

  .accordion-wrap{
    left: 16px;
    width: calc(100vw - 32px);
    top: 120px;                     /* ヘッダーの下から開始 */
    height: auto;                   /* 自動伸縮維持 */
    max-height: calc(100vh - 140px);
    padding: 10px 10px 20px 10px;
  }
}