/* Windows 技！ 右側タスクバー 0.1.7 — PC 投稿・固定・カテゴリー・検索結果対応 */
.wwrt-bar,
.wwrt-panel,
.wwrt-backdrop,
.wwrt-header-links { display: none !important; }

@media (min-width: 1100px) {
  /* JS が正常に初期化された場合だけ表示・既存ナビを非表示にする */
  html.wwrt-ready #header .l-header__gnav,
  html.wwrt-ready #fix_header .l-fixHeader__gnav {
    display: none !important;
  }
  html.wwrt-ready #pagetop { display: none !important; }
  html.wwrt-ready .post_content h2,
  html.wwrt-ready .post_content h3,
  html.wwrt-ready .post_content h4,
  html.wwrt-ready .post_content h5 { scroll-margin-top: 110px; }

  html.wwrt-ready .wwrt-bar {
    --wwrt-bg: #ffffff;
    --wwrt-line: #dce4ec;
    --wwrt-fg: #35465b;
    --wwrt-hover: #ebf4fc;
    --wwrt-accent: #1e73be;
    display: flex !important;
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10030;
    flex-direction: column;
    width: 54px;
    padding: 5px;
    gap: 2px;
    border: 1px solid var(--wwrt-line);
    border-radius: 13px;
    background: var(--wwrt-bg);
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    box-sizing: border-box;
  }

  .wwrt-action {
    width: 42px;
    min-height: 48px;
    padding: 5px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    text-decoration: none !important;
    color: var(--wwrt-fg) !important;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
  }
  /* 利用できない目次・分類は、場所を保持したまま薄く表示する。 */
  .wwrt-action.wwrt-action--disabled,
  .wwrt-action:disabled {
    opacity: .38;
    cursor: default;
    pointer-events: none;
  }
  .wwrt-action svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  .wwrt-action:hover,
  .wwrt-action:focus-visible,
  .wwrt-action[aria-expanded="true"] {
    background: var(--wwrt-hover);
    color: var(--wwrt-accent) !important;
  }
  .wwrt-action:focus-visible,
  .wwrt-panel a:focus-visible,
  .wwrt-panel button:focus-visible,
  .wwrt-panel input:focus-visible {
    outline: 2px solid #1e73be;
    outline-offset: 2px;
  }

  html.wwrt-ready .wwrt-backdrop:not([hidden]) {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0,0,0,.22);
  }
  html.wwrt-ready .wwrt-panel:not([hidden]) {
    --wwrt-bg: #ffffff;
    --wwrt-fg: #243346;
    --wwrt-line: #dce4ec;
    --wwrt-hover: #eef5fc;
    --wwrt-accent: #1e73be;
    display: flex !important;
    position: fixed;
    right: 76px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10020;
    width: min(360px, calc(100vw - 112px));
    max-height: min(76vh, 680px);
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--wwrt-bg);
    color: var(--wwrt-fg);
    border: 1px solid var(--wwrt-line);
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0,0,0,.22);
  }
  .wwrt-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--wwrt-line);
    font-size: 15px;
  }
  .wwrt-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    padding: 0;
    color: var(--wwrt-fg);
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  .wwrt-panel__close:hover { background: var(--wwrt-hover); }
  .wwrt-panel__section:not([hidden]) {
    display: block;
    overflow-y: auto;
    padding: 12px;
    min-height: 0;
    overscroll-behavior: contain;
  }

  .wwrt-toc { display: flex; flex-direction: column; gap: 3px; }
  .wwrt-toc button {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--wwrt-fg);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    overflow-wrap: anywhere;
  }
  /* 罫線と見出しを別要素にして、折り返し後も文章の左端をそろえる。 */
  .wwrt-toc__branch {
    flex: 0 0 auto;
    color: #7a91a6;
    font-family: Consolas, 'Courier New', monospace;
    white-space: pre;
    line-height: inherit;
    user-select: none;
  }
  .wwrt-toc__label {
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
  }
  .wwrt-toc button.wwrt-toc--h3,
  .wwrt-toc button.wwrt-toc--h4 { font-size: 12px; }
  .wwrt-toc button.wwrt-toc--h5 { font-size: 11px; }
  .wwrt-toc button:hover { background: var(--wwrt-hover); }
  .wwrt-toc button[aria-current="location"] {
    background: var(--wwrt-hover);
    color: var(--wwrt-accent);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--wwrt-accent);
  }

  .wwrt-search { display: flex; flex-wrap: wrap; gap: 8px; }
  .wwrt-search label { flex: 0 0 100%; font-size: 13px; }
  .wwrt-search input {
    flex: 1 1 170px;
    min-width: 0;
    width: auto;
    height: 40px;
    border: 1px solid var(--wwrt-line);
    border-radius: 6px;
    padding: 0 10px;
    background: var(--wwrt-bg);
    color: var(--wwrt-fg);
    font-size: 14px;
  }
  .wwrt-search button {
    height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 6px;
    background: #4f6f8f;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .wwrt-cat-tree,
  .wwrt-cat-tree ul.children { list-style: none !important; margin: 0; padding: 0; }
  .wwrt-cat-tree li { position: relative; margin: 1px 0; padding: 0; list-style: none !important; }
  .wwrt-cat-tree ul.children { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--wwrt-line); }
  .wwrt-cat-tree li > a {
    display: block;
    margin-left: 23px;
    padding: 7px 6px;
    border-radius: 5px;
    text-decoration: none !important;
    color: var(--wwrt-fg);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .wwrt-cat-tree li > a:hover,
  .wwrt-cat-tree li.wwrt-cat-active > a {
    background: var(--wwrt-hover);
    color: var(--wwrt-accent);
  }
  .wwrt-cat-tree li.wwrt-cat-active > a { font-weight: 700; }
  .wwrt-cat-toggle {
    position: absolute;
    left: 0;
    top: 3px;
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--wwrt-fg);
    font-size: 14px;
    cursor: pointer;
  }
  .wwrt-cat-toggle:hover { background: var(--wwrt-hover); }
  .wwrt-cat-toggle[aria-expanded="true"] { transform: none; }
  .wwrt-cat-toggle[aria-expanded="true"] span { display: inline-block; transform: rotate(90deg); }

  /* 新着記事一覧は表示順（公開日の新しい順）を維持する。 */
  .wwrt-recent-list {
    list-style: none !important;
    margin: 0;
    padding: 0;
  }
  .wwrt-recent-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .wwrt-recent-item + .wwrt-recent-item {
    border-top: 1px solid var(--wwrt-line);
  }
  .wwrt-recent-item a {
    display: block;
    padding: 10px 9px;
    border-radius: 6px;
    color: var(--wwrt-fg);
    text-decoration: none !important;
    overflow-wrap: anywhere;
  }
  .wwrt-recent-item a:hover,
  .wwrt-recent-item a:focus-visible,
  .wwrt-recent-item a[aria-current="page"] {
    background: var(--wwrt-hover);
    color: var(--wwrt-accent);
  }
  .wwrt-recent-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
  }
  .wwrt-recent-date {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--wwrt-fg);
    opacity: .7;
  }
  .wwrt-recent-empty {
    padding: 10px 8px;
    font-size: 13px;
    color: var(--wwrt-fg);
  }

  /* 既存ヘッダー右側の「自作ツール」「サイトマップ」。2リンクを横並びにする。 */
  #wwrt-header-links-template { display: none !important; }
  html.wwrt-ready .wwrt-header-links {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    margin-left: auto;
    min-width: 0;
  }
  html.wwrt-ready .wwrt-header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid #d5e0e8;
    border-radius: 7px;
    color: #285d87;
    background: #f4f8fb;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    white-space: nowrap;
  }
  .wwrt-header-link:hover { background: #e8f2fa; }
  .wwrt-header-link:focus-visible {
    outline: 2px solid #1e73be;
    outline-offset: 2px;
  }
  .wwrt-header-link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Windows 技！のカスタムダークモード */
  body.dark-mode .wwrt-bar,
  html.dark-mode .wwrt-bar {
    --wwrt-bg: #262b31;
    --wwrt-line: #4a535e;
    --wwrt-fg: #e2e8f0;
    --wwrt-hover: #354858;
    --wwrt-accent: #8bc7ff;
  }
  body.dark-mode .wwrt-panel,
  html.dark-mode .wwrt-panel {
    --wwrt-bg: #262b31;
    --wwrt-fg: #e2e8f0;
    --wwrt-line: #4a535e;
    --wwrt-hover: #354858;
    --wwrt-accent: #8bc7ff;
  }
  body.dark-mode .wwrt-toc__branch,
  html.dark-mode .wwrt-toc__branch { color: #9eb3c5; }
  body.dark-mode .wwrt-header-link,
  html.dark-mode .wwrt-header-link {
    background: #292f36;
    border-color: #4a535e;
    color: #a6d8ff;
  }
  body.dark-mode .wwrt-header-link:hover,
  html.dark-mode .wwrt-header-link:hover { background: #354858; }
}

@media (prefers-reduced-motion: reduce) {
  .wwrt-bar *, .wwrt-panel * { scroll-behavior: auto !important; transition: none !important; }
}