/* PCの左ペイン。SPA(style.css)・法務ページ(page.css)・女優ページ(actress.css)で共有する */
.side-nav {
  display: none;
}

@media (min-width: 1024px) {
  /* 340px = 左ペイン320px + bodyの左右パディング20px。index.htmlは.app-shell側で寄せるのでこのクラスを付けない */
  body.has-side-nav {
    padding-left: 340px;
  }

  .side-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 320px;
    padding: 22px 22px;
    overflow-y: auto;
    border-right: 1px solid #1a1a1c;
    background: #121214;
  }

  /* 10px = サイドリンクの内側パディングと左端を揃える。page.css等の.brand-logoに勝たせるため.side-navで絞る */
  .side-nav .side-brand {
    display: block;
    width: 108px;
    height: auto;
    margin: 0 0 22px 10px;
  }

  /* 左ペインにロゴがあるので、本文側のロゴは畳む（.home-linkは女優ページのロゴ包み） */
  body.has-side-nav .page-header .brand-logo,
  body.has-side-nav .page-header .home-link {
    display: none;
  }

  .side-links {
    display: grid;
    gap: 2px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .side-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 10px;
    border-radius: 10px;
    color: #d8d8dc;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
  }

  .side-links a:hover {
    background: #131315;
  }

  .side-links a.active {
    color: var(--accent);
  }

  /* 選択は文字色(spec.md §6.2)で示すためクリックの枠は不要。:focus-visibleの枠は残す */
  .side-links a:focus:not(:focus-visible) {
    outline: none;
  }

  .side-links svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .side-footer {
    display: grid;
    gap: 7px;
    padding: 18px 10px 0;
    margin-top: auto;
    border-top: 1px solid #1a1a1c;
  }

  .side-footer a {
    color: #6f6f75;
    text-decoration: none;
    font-size: 0.74rem;
  }

  .side-footer a:hover {
    color: var(--accent);
  }

  .side-footer p {
    margin: 6px 0 0;
    color: #55555a;
    font-size: 0.72rem;
  }
}