/* public/css/reading.css
   読書面（記事一覧・記事・診断プロンプト・プライバシーポリシー）。段階5（2026-10-12）。
   既定（ライト）は冷たい淡灰 sg-paper の地に藍 sg-paper-ink の文字。ダークを選んだ人には藍黒の読書面
   （一段上の面 sg-raise の地に sg-text の文字。2026-10-13 本人「記事ページがダークテーマ対応してないね」）。
   ヘッダー・フッター・読み終えた後の帯（関連する実績・課題・相談）はサイトの面（works.css の部品）でテーマに従う。
   HTML と CSS の既定は最終状態。動き（目次の現在地・右の余白の陣の目盛り）は reading.js。 */

.rd-main {
    --rd-paper: var(--sg-paper);          /* #E9EAEE */
    --rd-ink: var(--sg-paper-ink);        /* #1B2340。地に対し 12.8:1 */
    --rd-head: var(--sg-paper-ink);       /* 見出し（ライトは本文と同じ藍） */
    --rd-mute: #4B536B;                   /* 補足文。地に対し 6.3:1 */
    --rd-brass: #7A5B2E;                  /* 読む面の真鍮（小ラベル・番号・現在地）。地に対し 5.2:1 */
    --rd-ink-rgb: 27, 35, 64;
    --rd-brass-rgb: 122, 91, 46;
    --rd-mute-rgb: 75, 83, 107;
    --rd-line: rgba(var(--rd-ink-rgb), .22);
    --rd-line-faint: rgba(var(--rd-ink-rgb), .12);
    --rd-inset: #DFE1E7;                  /* コード・表の見出しの面。文字 #1B2340 に対し 11.8:1 */
    --rd-tool-bg: #F1F2F5;                /* 診断プロンプトのツール枠の面 */
    --rd-toc-w: 232px;
    --rd-rail-w: 188px;
    --rd-gap: clamp(32px, 3.6vw, 56px);
}

/* ダークの読書面（data-theme="light" が外れているとき）。行間・字送り・寸法はライトと同じで、色だけ入れ替える。
   コントラストは地 sg-raise #151B2E に対する値 */
:root:not([data-theme="light"]) .rd-main {
    --rd-paper: var(--sg-raise);          /* #151B2E */
    --rd-ink: var(--sg-text);             /* #D7D5D0。11.7:1 */
    --rd-head: var(--sg-white);           /* #F4F5F7。15.7:1 */
    --rd-mute: var(--sg-mute);            /* #A3A7B3。7.2:1 */
    --rd-brass: var(--sg-brass);          /* #B08D57。5.5:1 */
    --rd-ink-rgb: 215, 213, 208;
    --rd-brass-rgb: 176, 141, 87;
    --rd-mute-rgb: 163, 167, 179;
    --rd-inset: #0E1220;                  /* コード・表の見出しの面（地より一段沈める＝sg-ground）。文字 #D7D5D0 に対し 12.7:1 */
    --rd-tool-bg: #10162A;                /* ツール枠の面 */
}

/* 読書面（全幅）。上下の端に目盛りの刻まれた罫（フッターの罫と同じ形を藍で） */
.rd-page {
    position: relative;
    background: var(--rd-paper);
    color: var(--rd-ink);
    padding-bottom: clamp(56px, 7vw, 104px);
}

.rd-page::before,
.rd-page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 9px;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(var(--rd-ink-rgb), .34) 0 1px, transparent 1px 80px),
        repeating-linear-gradient(90deg, rgba(var(--rd-ink-rgb), .18) 0 1px, transparent 1px 8px);
    background-size: 100% 9px, 100% 4px;
    background-repeat: no-repeat;
}

.rd-page::before {
    top: 0;
}

.rd-page::after {
    bottom: 0;
    transform: scaleY(-1);
}

.rd-page ::selection {
    background: rgba(var(--rd-brass-rgb), .28);
    color: var(--rd-ink);
}

.rd-page :focus-visible {
    outline: 2px solid var(--rd-ink);
    outline-offset: 3px;
}

.rd-page {
    caret-color: var(--rd-brass);
}

.rd-head,
.rd-layout,
.rd-list-wrap {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: var(--sg-gut);
    padding-right: var(--sg-gut);
}

/* ==========================================================================
   見出し部
   ========================================================================== */
.rd-head {
    padding-top: clamp(30px, 3.4vw, 52px);
}

.rd-crumbs ol {
    list-style: none;
    font-size: 12.5px;
    line-height: 1.9;
    letter-spacing: .04em;
    color: var(--rd-mute);
}

.rd-crumbs li {
    display: inline;
}

.rd-crumbs li + li::before {
    content: "/";
    margin: 0 10px;
    color: rgba(var(--rd-ink-rgb), .4);
}

.rd-crumbs a {
    color: var(--rd-mute);
    text-decoration: underline;
    text-decoration-color: rgba(var(--rd-mute-rgb), .4);
    transition: color .25s var(--sg-ease-out);
}

.rd-crumbs a:hover {
    color: var(--rd-ink);
}

.rd-crumbs [aria-current] {
    color: var(--rd-ink);
}

.rd-h1 {
    margin-top: clamp(18px, 2vw, 28px);
    max-width: 24em;
    font-size: clamp(27px, 3.3vw, 46px);
    font-weight: 900;
    line-height: 1.42;
    letter-spacing: .03em;
    color: var(--rd-head);
    word-break: auto-phrase;
    text-wrap: balance;
}

.rd-desc {
    margin-top: clamp(14px, 1.6vw, 20px);
    max-width: 40em;
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.95;
    color: var(--rd-mute);
    word-break: auto-phrase;
}

.rd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--rd-mute);
}

.rd-meta time {
    margin-left: .4em;
    color: var(--rd-ink);
}

/* 見出しの右上の陣の弧（実績一覧の見出しと同じ形を藍で） */
.rd-orn {
    right: -24px;
    top: 0;
    stroke: var(--rd-ink);
}

.rd-orn .wk-orn-l { stroke-opacity: .32; }
.rd-orn .wk-orn-t { stroke: var(--rd-brass); stroke-opacity: .75; }
.rd-orn .wk-orn-f { stroke-opacity: .18; }
.rd-orn .wk-orn-c { fill: var(--rd-ink); opacity: .6; }

/* ==========================================================================
   本文の並び（目次｜本文｜右の余白の陣）
   ========================================================================== */
.rd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: clamp(32px, 4vw, 56px);
}

.rd-col {
    min-width: 0;
}

@media (min-width: 1024px) {
    .rd-layout {
        grid-template-columns: var(--rd-toc-w) minmax(0, 38em);
        column-gap: var(--rd-gap);
        align-items: start;
    }

    .rd-layout-doc {
        grid-template-columns: var(--rd-toc-w) minmax(0, 38em);
    }

    .rd-layout-doc > .rd-body,
    .rd-layout-doc > .rd-col {
        grid-column: 2;
    }

    /* 本文の列の左の縦線 */
    .rd-col,
    .rd-layout-doc > .rd-body {
        position: relative;
    }

    .rd-col::before,
    .rd-layout-doc > .rd-body::before {
        content: "";
        position: absolute;
        top: 6px;
        bottom: 0;
        left: calc(-1 * var(--rd-gap) / 2);
        width: 1px;
        background: linear-gradient(180deg, var(--rd-line), var(--rd-line-faint) 70%, transparent);
    }
}

@media (min-width: 1280px) {
    .rd-layout {
        grid-template-columns: var(--rd-toc-w) minmax(0, 38em) var(--rd-rail-w);
    }
}

/* ==========================================================================
   目次（縦線に丸の印。現在地は reading.js が aria-current="location" を付ける）
   ========================================================================== */
.rd-toc {
    padding: 18px 20px 20px;
    border: 1px solid var(--rd-line);
}

.rd-toc-h {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--rd-brass);
}

.rd-toc-h::after {
    content: "";
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: .7;
}

.rd-toc-list {
    position: relative;
    list-style: none;
    margin-top: 14px;
}

/* 丸の印をつなぐ縦線 */
.rd-toc-list::before {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--rd-line);
}

.rd-toc-a {
    position: relative;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 6px 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--rd-mute);
    transition: color .25s var(--sg-ease-out);
}

.rd-toc-a:hover {
    color: var(--rd-ink);
}

.rd-toc-dot {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-top: .42em;
    border: 1.5px solid rgba(var(--rd-ink-rgb), .55);
    border-radius: 50%;
    background: var(--rd-paper);
    transition: border-color .3s var(--sg-ease-out), background-color .3s var(--sg-ease-out);
}

.rd-toc-a[aria-current] {
    color: var(--rd-ink);
    font-weight: 700;
}

.rd-toc-a[aria-current] .rd-toc-dot,
.rd-toc-a.is-read .rd-toc-dot {
    border-color: var(--rd-brass);
}

.rd-toc-a.is-read .rd-toc-dot {
    background: rgba(var(--rd-brass-rgb), .18);
}

.rd-toc-a[aria-current] .rd-toc-dot {
    background: var(--rd-brass);
}

/* 現在地の印（reading.js が足す。目次の丸の上を滑る輪） */
.rd-toc-mark {
    position: absolute;
    left: -4px;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--rd-brass);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: transform .55s var(--sg-ease-out), opacity .3s var(--sg-ease-out);
}

.rd-toc-mark.is-on {
    opacity: 1;
}

.rd-toc-mark::before,
.rd-toc-mark::after {
    content: "";
    position: absolute;
    background: var(--rd-brass);
}

/* 輪の左右の小さな目盛り */
.rd-toc-mark::before {
    left: -5px;
    top: 8px;
    width: 4px;
    height: 1px;
}

.rd-toc-mark::after {
    right: -5px;
    top: 8px;
    width: 4px;
    height: 1px;
}

@media (min-width: 1024px) {
    .rd-toc {
        position: sticky;
        top: 104px;
        max-height: calc(100vh - 128px);
        overflow-y: auto;
        padding: 4px 0 8px;
        border: 0;
        scrollbar-width: thin;
    }
}

@media (max-width: 1023px) {
    .rd-toc-mark {
        display: none;
    }
}

/* ==========================================================================
   右の余白の陣（読み進み具合の目盛り。1280px〜）
   ========================================================================== */
.rd-rail {
    display: none;
}

@media (min-width: 1280px) {
    .rd-rail {
        display: block;
        align-self: stretch;
    }

    .rd-rail-in {
        position: sticky;
        top: 132px;
    }
}

.rd-dial {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: var(--rd-ink);
}

.rd-dial .rd-dial-ring { stroke-opacity: .3; stroke-width: 1.4; }
.rd-dial .rd-dial-o { stroke-opacity: .55; stroke-width: 1.8; }
.rd-dial .rd-dial-f { stroke-opacity: .18; }
.rd-dial .rd-dial-dash { stroke-opacity: .25; stroke-dasharray: 3 7; }
.rd-dial .rd-dial-tk { stroke: var(--rd-brass); stroke-opacity: .75; stroke-width: 1.4; }
.rd-dial .rd-dial-cross { stroke-opacity: .2; stroke-width: 1.2; }
.rd-dial .rd-dial-core { fill: var(--rd-ink); stroke: none; }

.rd-dial text {
    stroke: none;
    fill: var(--rd-mute);
    font-family: var(--sg-en);
    font-size: 17px;
    letter-spacing: .12em;
    text-anchor: middle;
    dominant-baseline: central;
}

/* 進みの弧と針は、動きのある環境で reading.js が出す（既定は枠だけ） */
.rd-dial .rd-dial-prog {
    stroke: var(--rd-brass);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    opacity: 0;
}

.rd-dial .rd-dial-needle {
    stroke: var(--rd-ink);
    stroke-width: 1.6;
    opacity: 0;
}

.rd-dial .rd-dial-tip {
    fill: var(--rd-ink);
    stroke: none;
}

.rd-dial.is-live .rd-dial-prog,
.rd-dial.is-live .rd-dial-needle {
    opacity: 1;
}

.rd-dial .rd-dial-mark {
    fill: var(--rd-paper);
    stroke: var(--rd-ink);
    stroke-opacity: .6;
    stroke-width: 1.6;
    transition: fill .4s var(--sg-ease-out);
}

.rd-dial .rd-dial-mark.is-read {
    fill: var(--rd-brass);
    stroke: var(--rd-brass);
    stroke-opacity: 1;
}

/* ==========================================================================
   本文の組版（Markdown から生成した HTML）
   ========================================================================== */
.rd-prose {
    max-width: 38em;
    font-size: 16px;
    line-height: 1.95;
    letter-spacing: .02em;
    color: var(--rd-ink);
    /* 本文は文節で折らない（右端がぎざぎざになる）。.wk-main から受け継ぐ auto-phrase をここで戻す。
       文節の折り返しは見出しと要約だけ */
    word-break: normal;
    line-break: strict;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .rd-prose {
        font-size: 17px;
        line-height: 1.9;
    }
}

.rd-prose > * + * {
    margin-top: 1.3em;
}

.rd-prose > :first-child {
    margin-top: 0;
}

.rd-prose h2,
.rd-prose h3 {
    word-break: auto-phrase;
}

.rd-prose h2 {
    position: relative;
    margin-top: 2.9em;
    padding-top: 1.1em;
    font-size: clamp(21px, 1.8vw, 25px);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .04em;
    color: var(--rd-head);
    scroll-margin-top: 104px;
    text-wrap: balance;
}

/* 見出しの上の細線と、左端の丸の印（目次の印と同じ形） */
.rd-prose h2::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--rd-line), var(--rd-line-faint));
}

.rd-prose h2::after {
    content: "";
    position: absolute;
    left: 0;
    top: -4.5px;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--rd-brass);
    border-radius: 50%;
}

.rd-prose > h2:first-child {
    margin-top: 0;
}

.rd-prose h3 {
    margin-top: 2.2em;
    font-size: clamp(18px, 1.4vw, 20px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--rd-head);
    text-wrap: balance;
}

.rd-prose h4,
.rd-prose h5,
.rd-prose h6 {
    margin-top: 1.9em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.7;
    color: var(--rd-head);
}

.rd-prose h2 + *,
.rd-prose h3 + *,
.rd-prose h4 + * {
    margin-top: .8em;
}

.rd-prose strong {
    font-weight: 700;
    background: linear-gradient(transparent 62%, rgba(var(--rd-brass-rgb), .16) 62%);
}

.rd-prose a {
    color: var(--rd-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--rd-brass);
    text-decoration-thickness: 1px;
    text-underline-offset: .3em;
    transition: color .25s var(--sg-ease-out), text-decoration-color .25s var(--sg-ease-out);
}

.rd-prose a:hover {
    color: var(--rd-brass);
}

.rd-ext {
    display: inline-block;
    width: .7em;
    height: .7em;
    margin-left: .2em;
    vertical-align: .05em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
}

/* 箇条書き: 小さな菱形の印。番号つき: 欧文の数字（真鍮） */
.rd-prose ul,
.rd-prose ol {
    list-style: none;
    padding-left: 1.6em;
}

.rd-prose li {
    position: relative;
}

.rd-prose li + li {
    margin-top: .55em;
}

.rd-prose li > ul,
.rd-prose li > ol {
    margin-top: .55em;
}

.rd-prose ul > li::before {
    content: "";
    position: absolute;
    left: -1.25em;
    top: .82em;
    width: 6px;
    height: 6px;
    border: 1.2px solid var(--rd-brass);
    transform: rotate(45deg);
}

.rd-prose ol {
    counter-reset: rd-ol;
    padding-left: 2.2em;
}

.rd-prose ol > li {
    counter-increment: rd-ol;
}

.rd-prose ol > li::before {
    content: counter(rd-ol, decimal-leading-zero);
    position: absolute;
    left: -2.2em;
    top: .3em;
    font-family: var(--sg-en);
    font-size: .72em;
    line-height: 1.9;
    letter-spacing: .06em;
    color: var(--rd-brass);
}

/* 引用: 細い線と淡い面（太い色線は使わない） */
.rd-prose blockquote {
    position: relative;
    padding: .9em 1.2em .9em 1.4em;
    border-left: 1px solid rgba(var(--rd-ink-rgb), .45);
    background: rgba(var(--rd-ink-rgb), .04);
    color: var(--rd-mute);
}

.rd-prose blockquote > * + * {
    margin-top: .8em;
}

/* コード（ui-monospace、明るい面に合う配色。375px でもはみ出さないよう横スクロール） */
.rd-prose code,
.rd-tool-pre code {
    font-family: var(--sg-code);
}

.rd-prose :not(pre) > code {
    padding: .08em .4em;
    border: 1px solid var(--rd-line-faint);
    background: rgba(var(--rd-ink-rgb), .05);
    font-size: .86em;
    overflow-wrap: anywhere;
}

.rd-prose pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 1em 1.2em;
    border: 1px solid var(--rd-line);
    background: var(--rd-inset);
    font-size: 14px;
    line-height: 1.75;
    color: var(--rd-ink);
    tab-size: 2;
}

.rd-prose pre code {
    white-space: pre;
    overflow-wrap: normal;
}

/* 表（外側の .rd-scroll が横スクロールする。数字は等幅） */
.rd-prose .rd-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rd-prose .rd-scroll:focus-visible,
.rd-prose pre:focus-visible,
.rd-tool-pre:focus-visible {
    outline: 2px solid var(--rd-ink);
    outline-offset: 2px;
}

.rd-prose table {
    border-collapse: collapse;
    font-size: 14.5px;
    line-height: 1.75;
    border-top: 1px solid rgba(var(--rd-ink-rgb), .5);
    border-bottom: 1px solid rgba(var(--rd-ink-rgb), .5);
    -webkit-overflow-scrolling: touch;
}

.rd-prose th,
.rd-prose td {
    min-width: 7em;
    padding: .6em .9em;
    border-bottom: 1px solid var(--rd-line-faint);
    text-align: left;
    vertical-align: top;
}

.rd-prose th {
    background: var(--rd-inset);
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.rd-prose tr:last-child td {
    border-bottom: 0;
}

.rd-prose img {
    max-width: 100%;
    height: auto;
}

.rd-prose hr {
    height: 9px;
    border: 0;
    margin: 2.4em 0;
    background:
        linear-gradient(var(--rd-line), var(--rd-line)) center / 100% 1px no-repeat,
        radial-gradient(circle, var(--rd-brass) 0 2px, transparent 2.5px) center / 9px 9px no-repeat;
}

.rd-enacted {
    margin-top: 2.4em !important;
    font-size: 13px;
    color: var(--rd-mute);
}

/* ==========================================================================
   よくある質問（本文の列に続ける）
   ========================================================================== */
.rd-faq {
    max-width: 38em;
    margin-top: clamp(56px, 6vw, 88px);
}

.rd-faq-h {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: clamp(21px, 1.8vw, 25px);
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--rd-head);
}

.rd-faq-h::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--rd-line), var(--rd-line-faint));
}

.rd-faq-list {
    margin-top: 18px;
    border-top: 1px solid rgba(var(--rd-ink-rgb), .4);
}

.rd-faq-item {
    padding: 20px 0 22px;
    border-bottom: 1px solid var(--rd-line-faint);
}

.rd-faq-q,
.rd-faq-a {
    position: relative;
    padding-left: 2.2em;
}

.rd-faq-q {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.75;
    color: var(--rd-ink);
}

.rd-faq-a {
    margin-top: 8px;
    font-size: 15.5px;
    line-height: 1.95;
    color: var(--rd-ink);
}

.rd-faq-q::before,
.rd-faq-a::before {
    position: absolute;
    left: 0;
    top: .2em;
    font-family: var(--sg-en);
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: .08em;
}

.rd-faq-q::before {
    content: "Q";
    color: var(--rd-brass);
}

.rd-faq-a::before {
    content: "A";
    color: var(--rd-mute);
}

/* ==========================================================================
   記事一覧
   ========================================================================== */
.rd-index .rd-head {
    padding-bottom: 8px;
}

.rd-index .rd-h1 {
    font-size: clamp(36px, 4.2vw, 60px);
    letter-spacing: .08em;
}

.rd-empty {
    margin-top: 28px;
    font-size: 16px;
    color: var(--rd-ink);
}

.rd-list-wrap {
    margin-top: clamp(28px, 3.4vw, 48px);
}

.rd-list {
    list-style: none;
    border-top: 1px solid rgba(var(--rd-ink-rgb), .45);
}

.rd-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 6px 28px;
    align-items: center;
    padding: 22px 6px 24px 28px;
    border-bottom: 1px solid var(--rd-line-faint);
    transition: background-color .3s var(--sg-ease-out);
}

/* 行の左の丸の印（目次の印と同じ形） */
.rd-row::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 33px;
    width: 9px;
    height: 9px;
    border: 1.5px solid rgba(var(--rd-ink-rgb), .5);
    border-radius: 50%;
    transition: border-color .3s var(--sg-ease-out), background-color .3s var(--sg-ease-out);
}

.rd-row:hover {
    background-color: rgba(var(--rd-ink-rgb), .035);
}

.rd-row:hover::before {
    border-color: var(--rd-brass);
    background: var(--rd-brass);
}

.rd-row-t {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .03em;
    color: var(--rd-head);
    word-break: auto-phrase;
}

.rd-row-d {
    grid-column: 1;
    max-width: 52em;
    font-size: 14.5px;
    line-height: 1.9;
    color: var(--rd-mute);
}

.rd-row-go {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    justify-content: flex-end;
    color: var(--rd-brass);
}

.rd-arr {
    width: 20px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s var(--sg-ease-out);
}

.rd-row:hover .rd-arr {
    transform: translateX(5px);
}

@media (min-width: 1024px) {
    .rd-list {
        max-width: calc(var(--rd-toc-w) + var(--rd-gap) + 52em);
    }
}

@media (max-width: 639px) {
    .rd-row {
        grid-template-columns: minmax(0, 1fr) 20px;
        gap: 6px 14px;
        padding: 18px 2px 20px 22px;
    }

    .rd-row::before {
        left: 1px;
        top: 28px;
    }
}

/* ==========================================================================
   診断プロンプト（ツールの枠）
   ========================================================================== */
.rd-tool {
    margin-top: 1.4em;
    margin-bottom: 2.4em;
    border: 1px solid rgba(var(--rd-ink-rgb), .4);
    background: var(--rd-tool-bg);
}

.rd-tool-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--rd-line);
    background: var(--rd-inset);
}

.rd-tool-name {
    font-family: var(--sg-code);
    font-size: 13px;
    color: var(--rd-mute);
    overflow-wrap: anywhere;
}

.rd-tool-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.rd-tool-copy {
    padding: 10px 22px;
    font-size: 14px;
    cursor: pointer;
}

.rd-tool-dl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(var(--rd-ink-rgb), .55);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--rd-ink);
    transition: background-color .25s var(--sg-ease-out), border-color .25s var(--sg-ease-out);
}

.rd-tool-dl:hover {
    border-color: var(--rd-ink);
    background-color: rgba(var(--rd-ink-rgb), .06);
}

.rd-dl-ic {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rd-tool-status {
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--rd-ink);
}

.rd-tool-status:not(:empty) {
    padding-top: 10px;
}

.rd-tool-pre {
    max-width: 100%;
    overflow: auto;
    padding: 16px 18px 18px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--rd-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .rd-tool-pre {
        max-height: 34em;
    }
}

/* ==========================================================================
   読み終えた後（藍黒に戻る）
   ========================================================================== */
.rd-after .wk-sec:first-child {
    margin-top: clamp(56px, 6vw, 88px);
}

.rd-sol-panel {
    grid-template-columns: minmax(0, 1fr) !important;
}

.rd-sol-panel .wk-sol-lead {
    max-width: 44em;
}