/* =============================================
   滋賀医科大学麻酔学講座 カラーパレット
   ============================================= */

:root {
  /* ---- メインカラー ---- */
  --color-navy: #1a2e5a;
  --color-royal-blue: #1b5bae;
  --color-mid-blue: #2e7ec4;
  --color-cornflower: #4a97cc;
  --color-steel-blue: #85a9d5;
  --color-light-blue: #7abde8;
  --color-pale-blue: #b8dcf5;

  /* ---- アクセントカラー ---- */
  --color-link: #0074b8;
  --color-blog-green: #6abf5e;
  --color-button: #164a96;
  --color-bg-blue: #e8f5fc;
  --color-green-dark: #1b4332;
  --color-green-mid: #40916c;

  /* ---- サイドバー幅 ---- */
  --sidebar-width: 260px;
}

/* =============================================
   グローバルリセット
   ============================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  font-family:
    'IBM Plex Sans JP',
    'Noto Sans JP',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #1a1a1a;
  background: #fff;
  font-feature-settings:
    'palt' 1,
    'chws' 1;
  hanging-punctuation: first last;
  text-spacing-trim: trim-start allow-end trim-adjacent;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

/* =============================================
   サイトレイアウト（サイドバー + メインコンテンツ）
   ============================================= */

.site-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

.site-content {
  min-width: 0;
  background: #fff;
}

/* =============================================
   メインコンテンツ共通
   ============================================= */

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 4rem 8rem;
}

/* ページ見出し */
h1 {
  font-size: clamp(2.4rem, 3.5vw, 4rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-royal-blue);
  letter-spacing: 0.04em;
}

h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-royal-blue);
  margin-top: 4.8rem;
  margin-bottom: 2rem;
}

h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-royal-blue);
  margin-top: 3.2rem;
  margin-bottom: 1.2rem;
}

p {
  font-size: 1.6rem;
  line-height: 1.9;
  color: #2d2d2d;
  margin-bottom: 1.2rem;
}

/* =============================================
   フッター
   ============================================= */

footer {
  margin-top: 0;
}

/* =============================================
   モバイルトップバー（サイドバー非表示時）
   ============================================= */

.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: 56px;
  background: var(--color-royal-blue);
  position: sticky;
  top: 0;
  z-index: 200;
}

.mobile-topbar-title {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .site-layout {
    grid-template-columns: 1fr;
  }
  .mobile-topbar {
    display: flex;
  }
  main {
    padding: 3.2rem 2rem 5.6rem;
  }
}

/* =============================================
   topics カスタムスクロールバー
   ネイティブを非表示にしてJSで常時表示のカスタム実装
   ============================================= */

/* ネイティブスクロールバーを隠す */
.topics__list {
  scrollbar-width: none;
}
.topics__list::-webkit-scrollbar {
  width: 0;
  display: none;
}

/* カスタムスクロールバートラック */
.topics__scrollbar-track {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: rgba(26, 46, 90, 0.12);
  border-radius: 4px;
  z-index: 2;
}

/* カスタムスクロールバーサム（つまみ） */
.topics__scrollbar-thumb {
  position: absolute;
  right: 0;
  width: 8px;
  min-height: 40px;
  background: rgba(27, 91, 174, 0.65);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.topics__scrollbar-thumb:hover {
  background: rgba(27, 91, 174, 0.9);
}