/* ベース */
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", sans-serif;
}

/* ヘッダー（トップバー） */
header{
  position: sticky;
  top: 0;
  z-index: 30;

  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 0 16px;
  box-sizing: border-box;

  background: var(--topbar-bg);
  border-bottom: 2px solid rgba(0,0,0,0.10); /* 直線を強調 */
}

/* ナビ */
nav#sidebar{
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

nav#sidebar ul{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  gap: 10px;
  align-items: center;
}

nav#sidebar li{
  margin: 0;
  padding: 0;
  position: relative; /* dropdown */
}

nav#sidebar a{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 10px;
  border-radius: 0; /* 直線寄り */
  text-decoration: none;
  color: var(--topbar-text);

  border-bottom: 2px solid transparent; /* モダンな直線アクセント */
}

nav#sidebar a:hover{
  background: var(--nav-hover);
}

nav#sidebar a.active{
  background: var(--nav-active);
  border-bottom-color: rgba(255,255,255,0.9);
  font-weight: 700;
}

/* “リンクなし親” をグループ見た目に（JSで .nav-group を付ける） */
nav#sidebar .nav-group > .nav-label{
  display: inline-flex;
  align-items: center;
  padding: 10px 10px;
  color: var(--topbar-text);
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: default;
  user-select: none;
}
nav#sidebar .nav-group:hover > .nav-label{
  background: var(--nav-hover);
}

/* dropdown（子 ul） */
nav#sidebar li > ul{
  display: none;

  position: absolute;
  top: calc(100% + 6px);
  left: 0;

  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 0;              /* 直線寄り */
  padding: 8px;

  min-width: 240px;
  box-shadow: none;              /* 影より線 */
  z-index: 40;

  flex-direction: column;
  gap: 2px;
}

nav#sidebar li > ul a{
  width: 100%;
  color: var(--text);
  padding: 10px 10px;
  border-bottom: 1px solid transparent;
}

nav#sidebar li > ul a:hover{
  background: rgba(0,0,0,0.04);
  border-bottom-color: var(--line);
}

nav#sidebar li:hover > ul,
nav#sidebar li:focus-within > ul{
  display: flex;
}

/* 右端の現在パス表示 */
#path{
  margin-left: auto;
  font-size: 12px;
  color: var(--topbar-text-muted);
  white-space: nowrap;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 本文 */
main{
  padding: 44px 16px;
}

main .markdown-body{
  box-sizing: border-box;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0;
}

/* GitHub markdown CSS の上から “直線” を足す */
.markdown-body{
  line-height: 1.75;
}

.markdown-body h1,
.markdown-body h2{
  // border-bottom: 2px solid var(--line); /* 直線強調 */
  padding-bottom: 0.25em;
}

.markdown-body hr{
  border: 0;
  border-top: 2px solid var(--line);
}

.markdown-body blockquote{
  border-left: 4px solid var(--line-strong);
  border-radius: 0;
}

.markdown-body table th,
.markdown-body table td{
  border-color: var(--line) !important;
}

.markdown-body pre{
  border: 1px solid var(--line);
  border-radius: 0;
}

/* リンク色（本文） */
.markdown-body a{
  color: var(--link);
}
.markdown-body a:hover{
  text-decoration-thickness: 2px;
}

/* エラー表示 */
.error{
  color: #b00020;
  background: #fff3f3;
  border: 2px solid rgba(176,0,32,0.25);
  padding: 12px;
}


/* モバイル */
@media (max-width: 960px){
  #path{ max-width: 55%; }
  main{ padding: 32px 12px; }
  nav#sidebar a{ padding: 10px 8px; }
}