/* ================================
   1. 変数
================================= */

.article-shell {
    /* 色（青みのない、墨に近いグレー） */
    --a-ink: #1a1a1a;          /* タイトル・見出し・強調 */
    --a-text: #333333;         /* 本文 */
    --a-sub: #737373;          /* 日付・補足 */
    --a-faint: #a3a3a3;        /* さらに弱い文字 */
    --a-line: #e7e7e5;         /* 罫線 */
    --a-surface: #f6f6f4;      /* 囲み */
    --a-accent: #2f6bff;       /* リンクのホバー・読了バー */

    /* 幅 */
    --a-sheet: 1200px;         /* 白い面の最大幅 */
    --a-measure: 700px;        /* 本文の幅（1行およそ39字） */
    --a-side: 200px;           /* 目次の幅 */
    --a-gap: 60px;             /* 本文と目次のあいだ */
    --a-wide: calc(var(--a-measure) + var(--a-gap) + var(--a-side));  /* 記事全体の幅（タイトル・画像・本文＋目次の端をそろえる） */
    --a-radius: 6px;

    /* 書体（Noto Sans JP が読めないときは端末のゴシック） */
    --a-font: "Noto Sans JP", var(--fm-font);
}


/* ================================
   2. ページの枠・読了バー
================================= */

.article-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--a-sheet) + 48px);
    margin: 0 auto;
    padding: 24px 24px 120px;

    font-family: var(--a-font);
    font-kerning: normal;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.article-shell *,
.article-shell *::before,
.article-shell *::after {
    box-sizing: border-box;
}

.article {
    padding: 56px 40px 96px;

    background: #ffffff;

    border: 1px solid rgb(26 26 26 / .06);
    border-radius: var(--a-radius);
}

.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;

    width: 100%;
    height: 2px;

    background: #2f6bff;

    transform: scaleX(0);
    transform-origin: 0 50%;

    pointer-events: none;
}


/* ================================
   3. 記事の頭
================================= */

/* 記事の頭は「本文＋目次」と同じ幅で中央に（左右の端をそろえる） */
.article-head {
    max-width: var(--a-wide);
    margin: 0 auto 72px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;

    margin: 0 0 36px;
    padding: 0;

    list-style: none;

    color: var(--a-faint);

    font-size: 12px;
    letter-spacing: 0.04em;
}

.breadcrumb li + li::before {
    content: "/";

    margin: 0 10px;

    color: var(--a-line);
}

.breadcrumb a {
    color: var(--a-sub);
    text-decoration: none;
}

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

.breadcrumb [aria-current] {
    overflow: hidden;

    max-width: 32em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-cat {
    margin: 0 0 20px;

    color: var(--a-sub);

    font-size: 13px;
    letter-spacing: 0.06em;
}

.article-cat a {
    color: inherit;
    text-decoration: none;
}

/* 見出しは「palt」で字詰めして、間延びさせない */
.article-head h1 {
    margin: 0 0 28px;

    color: var(--a-ink);

    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.45;
    letter-spacing: 0.04em;

    /* 幅いっぱいまで使い、日本語は文節の切れ目で改行する（対応ブラウザのみ） */
    text-wrap: pretty;
    word-break: auto-phrase;
}

.article-lead {
    max-width: var(--a-measure);
    margin: 0 0 40px;

    color: var(--a-sub);

    font-size: 17px;
    line-height: 1.95;
    letter-spacing: 0.04em;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;

    margin: 0;
    padding-top: 20px;

    border-top: 1px solid var(--a-line);

    color: var(--a-sub);

    font-size: 12.5px;
    letter-spacing: 0.04em;
}

.article-meta .article-author {
    color: var(--a-ink);

    font-weight: 500;
}

.article-meta time {
    font-variant-numeric: tabular-nums;
}

.article-eyecatch {
    margin: 56px 0 0;
}

.article-eyecatch img,
.article-eyecatch .eyecatch-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;

    object-fit: cover;

    background: var(--a-surface);
    border-radius: var(--a-radius);
}

.eyecatch-placeholder {
    display: grid !important;
    place-items: center;

    color: var(--a-faint);

    font-size: 12.5px;
    letter-spacing: 0.04em;
}


/* ================================
   4. 2カラム（本文＋目次）
================================= */

/* 本文＋目次をひとかたまりにして中央に置く（左端＝タイトルの左端、右端＝タイトルの右端） */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--a-measure)) var(--a-side);
    justify-content: space-between;
    gap: var(--a-gap);

    max-width: var(--a-wide);
    margin: 0 auto;
}

.article-main {
    min-width: 0;
}


/* ================================
   5. 目次（中身は article.js が見出しから作る）
================================= */

.toc {
    position: sticky;
    top: 40px;

    max-height: calc(100vh - 80px);
    overflow-y: auto;

    scrollbar-width: none;
}

.toc[hidden],
.toc-mobile[hidden] {
    display: none;
}

.toc-title {
    margin: 0 0 16px;

    color: var(--a-ink);

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.toc ol,
.toc-mobile ol {
    margin: 0;
    padding: 0;

    list-style: none;
}

.toc li a {
    display: block;

    padding: 5px 0 5px 14px;

    border-left: 1px solid var(--a-line);

    color: var(--a-sub);

    font-size: 12.5px;
    font-feature-settings: "palt";
    line-height: 1.65;
    letter-spacing: 0.03em;
    text-decoration: none;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.toc li li a {
    padding-left: 26px;

    font-size: 12px;
}

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

.toc li a.is-current {
    border-left-color: var(--a-ink);

    color: var(--a-ink);
}

/* スマホ：本文の上に折りたたみ */
.toc-mobile {
    display: none;

    margin: 0 0 56px;

    border-top: 1px solid var(--a-line);
    border-bottom: 1px solid var(--a-line);
}

.toc-mobile summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 0;

    color: var(--a-ink);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;

    list-style: none;
    cursor: pointer;
}

.toc-mobile summary::-webkit-details-marker {
    display: none;
}

.toc-mobile summary::after {
    content: "+";

    color: var(--a-sub);

    font-size: 18px;
    font-weight: 300;
    line-height: 1;
}

.toc-mobile[open] summary::after {
    content: "−";
}

.toc-mobile ol {
    padding: 0 0 18px;
}

.toc-mobile li a {
    display: block;

    padding: 7px 0;

    color: var(--a-text);

    font-size: 14px;
    font-feature-settings: "palt";
    line-height: 1.65;
    letter-spacing: 0.03em;
    text-decoration: none;
}

.toc-mobile li li a {
    padding-left: 16px;

    color: var(--a-sub);

    font-size: 13px;
}


/* ================================
   6. 本文
================================= */

.article-body {
    color: var(--a-text);

    font-size: 17px;
    line-height: 1.95;
    letter-spacing: 0.05em;

    overflow-wrap: anywhere;
}

.article-body > :first-child {
    margin-top: 0;
}

.article-body p {
    margin: 0 0 1.8em;
}

/* 本文は左右の端をそろえる（両端揃え） */
.article-body p,
.article-body li,
.article-lead {
    text-align: justify;
    text-justify: inter-character;
}

/* 大見出し：上に淡いパステルレインボーの線を1本 */
.article-body h2 {
    position: relative;

    margin: 104px 0 32px;
    padding-top: 30px;

    color: var(--a-ink);

    font-size: 26px;
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.55;
    letter-spacing: 0.05em;

    scroll-margin-top: 32px;
}

/* 中見出し：頭に黒い短い線（大見出しの太い線と同じ太さ） */
.article-body h3 {
    position: relative;

    margin: 60px 0 16px;
    padding-left: 24px;

    color: var(--a-ink);

    font-size: 19.5px;
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.6;
    letter-spacing: 0.05em;

    scroll-margin-top: 32px;
}

/* 見出しも文節の切れ目で改行する（対応ブラウザのみ） */
.article-body h2,
.article-body h3 {
    text-wrap: pretty;
    word-break: auto-phrase;
}

.article-body h2::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(90deg, #ff9ec4, #ffc28a, #ffe17a, #8fdcb0, #8ec5ff, #b9a3ff);
    opacity: 0.6;   /* 濃さはここで調整（1に近いほど濃い） */
}

.article-body h3::before {
    content: "";

    position: absolute;
    top: 0.8em;
    left: 0;

    width: 14px;
    height: 3px;

    background: var(--a-ink);

    transform: translateY(-50%);
}

.article-body h4 {
    margin: 40px 0 8px;

    color: var(--a-ink);

    font-size: 17px;
    font-weight: 600;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
}

.article-body a {
    color: var(--a-ink);
    text-decoration: underline;
    text-decoration-color: #c9c9c6;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;

    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

.article-body a:hover {
    color: var(--a-accent);
    text-decoration-color: currentColor;
}

.article-body strong {
    color: var(--a-ink);

    font-weight: 600;
}

.article-body .marker {
    background: linear-gradient(transparent 62%, #ededea 62%);
}


/* ================================
   7. リスト
================================= */

.article-body ul,
.article-body ol {
    margin: 0 0 1.9em;
    padding-left: 1.3em;
}

.article-body li {
    margin: 0.45em 0;
    padding-left: 0.3em;
}

.article-body li > ul,
.article-body li > ol {
    margin: 0.45em 0 0;
}

.article-body ul > li::marker {
    color: var(--a-faint);

    font-size: 0.8em;
}

.article-body ol > li::marker {
    color: var(--a-sub);

    font-size: 0.92em;
    font-variant-numeric: tabular-nums;
}

/* チェックリスト：<ul class="check-list"> */
.article-body ul.check-list {
    padding-left: 0;

    list-style: none;
}

.article-body ul.check-list > li {
    position: relative;

    padding-left: 1.9em;
}

.article-body ul.check-list > li::before {
    content: "";

    position: absolute;
    top: 0.68em;
    left: 0.3em;

    width: 0.32em;
    height: 0.62em;

    border-right: 1.5px solid var(--a-ink);
    border-bottom: 1.5px solid var(--a-ink);

    transform: rotate(45deg);
}

/* 手順リスト：<ol class="step-list"> */
.article-body ol.step-list {
    padding-left: 0;

    list-style: none;

    counter-reset: step;
}

.article-body ol.step-list > li {
    position: relative;

    margin: 0;
    padding: 22px 0 22px 3em;

    border-top: 1px solid var(--a-line);

    counter-increment: step;
}

.article-body ol.step-list > li:last-child {
    border-bottom: 1px solid var(--a-line);
}

.article-body ol.step-list > li::before {
    content: counter(step, decimal-leading-zero);

    position: absolute;
    top: 22px;
    left: 0;

    color: var(--a-faint);

    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: calc(17px * 1.95);
}


/* ================================
   8. 表
   （article.js が .table-wrap で包み、スマホで横スクロールできるようにする）
================================= */

.article-body .table-wrap {
    margin: 8px 0 2.4em;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}

.article-body table {
    width: 100%;

    border-collapse: collapse;

    font-size: 14.5px;
    line-height: 1.8;
    letter-spacing: 0.03em;
}

.article-body caption {
    padding: 0 0 14px;

    color: var(--a-sub);

    font-size: 12.5px;
    text-align: left;
}

.article-body th,
.article-body td {
    padding: 16px 24px 16px 0;

    border-bottom: 1px solid var(--a-line);

    text-align: left;
    vertical-align: top;
}

.article-body th:last-child,
.article-body td:last-child {
    padding-right: 0;
}

.article-body thead th {
    padding-top: 0;
    padding-bottom: 12px;

    border-bottom-color: var(--a-ink);

    color: var(--a-sub);

    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.article-body tbody th {
    color: var(--a-ink);

    font-weight: 500;
    white-space: nowrap;
}

.article-body td {
    font-variant-numeric: tabular-nums;
}


/* ================================
   9. 囲み
   <div class="box box--point"> / box--note / box--warn
================================= */

.article-body .box {
    margin: 8px 0 2.4em;
    padding: 30px 32px;

    background: var(--a-surface);
    border-radius: var(--a-radius);

    font-size: 15.5px;
    line-height: 1.95;
}

.article-body .box > :last-child {
    margin-bottom: 0;
}

.article-body .box ul,
.article-body .box ol {
    margin-bottom: 0;
}

.article-body .box-title {
    margin: 0 0 12px;

    color: var(--a-ink);

    font-size: 12.5px;
    font-weight: 600;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
}

/* 要点：地を付けず、上下の罫線だけ */
.article-body .box--point {
    padding: 28px 0;

    background: none;
    border-top: 1px solid var(--a-ink);
    border-bottom: 1px solid var(--a-line);
    border-radius: 0;
}

.article-body .box--warn {
    background: #faf6f1;
}

.article-body .box--warn .box-title {
    color: #9a4a12;
}


/* ================================
   10. 引用・画像・コード・区切り線
================================= */

.article-body blockquote {
    margin: 8px 0 2.4em;
    padding: 0 0 0 24px;

    border-left: 1px solid var(--a-ink);

    color: var(--a-ink);

    font-size: 17px;
    line-height: 1.95;
}

.article-body blockquote p {
    margin-bottom: 0.5em;
}

.article-body blockquote cite {
    display: block;

    color: var(--a-sub);

    font-size: 12.5px;
    font-style: normal;
}

.article-body figure {
    margin: 8px 0 2.4em;
}

.article-body figure img {
    display: block;
    max-width: 100%;
    height: auto;

    border-radius: var(--a-radius);
}

.article-body figcaption {
    margin-top: 12px;

    color: var(--a-sub);

    font-size: 12.5px;
    line-height: 1.8;
}

.article-body code {
    padding: 2px 6px;

    background: var(--a-surface);
    border-radius: 4px;

    color: var(--a-ink);

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    letter-spacing: 0;
}

.article-body pre {
    margin: 8px 0 2.4em;
    padding: 22px 24px;

    overflow-x: auto;

    background: var(--a-ink);
    border-radius: var(--a-radius);

    color: #e7e7e5;

    font-size: 13px;
    line-height: 1.8;
}

.article-body pre code {
    padding: 0;

    background: none;

    color: inherit;
}

.article-body hr {
    margin: 64px 0;

    border: 0;
    border-top: 1px solid var(--a-line);
}


/* ================================
   11. アプリ紹介・記事の最後
   <a class="app-card" href="/narwhal-tusk/">…</a>
================================= */

.app-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;

    margin: 8px 0 2.4em;
    padding: 20px 24px 20px 20px;

    background: #ffffff;

    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);

    color: var(--a-text);
    text-decoration: none !important;

    transition: border-color 0.2s ease;
}

.app-card:hover {
    border-color: var(--a-ink);
}

/* 画像があれば <img class="app-card-icon"> 、なければ頭文字 */
.app-card-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    background: var(--a-ink);
    border-radius: 10px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 600;

    object-fit: cover;
}

/* 画像のアイコンは白地に細い線（黒いアイコンが地に沈まないように） */
img.app-card-icon {
    padding: 6px;

    background: #ffffff;
    border: 1px solid var(--a-line);

    object-fit: contain;
}

.app-card-text {
    min-width: 0;
}

.app-card-name {
    display: block;

    color: var(--a-ink);

    font-size: 15px;
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.6;
    letter-spacing: 0.04em;
}

.app-card-desc {
    display: block;

    color: var(--a-sub);

    font-size: 12.5px;
    line-height: 1.7;
    letter-spacing: 0.03em;
}

.app-card-go {
    color: var(--a-ink);

    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.article-foot {
    margin-top: 96px;
}

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;

    margin: 0 0 64px;
    padding: 20px 0;

    border-top: 1px solid var(--a-line);
    border-bottom: 1px solid var(--a-line);
}

.share-label {
    margin-right: auto;

    color: var(--a-sub);

    font-size: 12.5px;
    letter-spacing: 0.04em;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 0;

    background: none;
    border: 0;

    color: var(--a-ink);

    font: inherit;
    font-size: 13px;
    text-decoration: none;

    cursor: pointer;

    transition: color 0.2s ease;
}

.share-btn:hover {
    color: var(--a-accent);
}

.share-btn svg {
    width: 14px;
    height: 14px;
}

.article-foot-title {
    margin: 0 0 16px;

    color: var(--a-ink);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.article-shell a:focus-visible,
.article-shell button:focus-visible,
.article-shell summary:focus-visible {
    outline: 2px solid var(--a-accent);
    outline-offset: 4px;
    border-radius: 2px;
}


/* ================================
   12. タブレット・スマホ
================================= */

@media (max-width: 1100px) {
    .article {
        padding: 48px 56px 80px;
    }

    .article-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .article-head,
    .article-main {
        width: 100%;
        max-width: var(--a-measure);
        margin-left: auto;
        margin-right: auto;
    }

    .article-main {
        grid-column: auto;
    }

    .article-eyecatch {
        margin: 56px 0 0;
    }

    .article-side {
        display: none;
    }

    .toc-mobile {
        display: block;
    }
}

@media (max-width: 760px) {
    .article-shell {
        padding: 0 0 64px;
    }

    .article {
        padding: 32px 22px 56px;

        border: 0;
        border-radius: 0;
    }

    .breadcrumb ol {
        margin-bottom: 32px;
    }

    .breadcrumb [aria-current] {
        max-width: 14em;
    }

    .article-head {
        margin-bottom: 48px;
    }

    .article-head h1 {
        margin-bottom: 20px;

        font-size: 25px;
        line-height: 1.5;
    }

    .article-lead {
        margin-bottom: 28px;

        font-size: 16px;
    }

    .article-eyecatch {
        margin: 36px -22px 0;
    }

    .article-eyecatch img,
    .article-eyecatch .eyecatch-placeholder {
        border-radius: 0;
    }

    .article-body {
        font-size: 16px;
        line-height: 1.95;
        letter-spacing: 0.04em;
    }

    .article-body h2 {
        margin-top: 76px;
        padding-top: 24px;

        font-size: 22px;
    }

    .article-body h3 {
        margin-top: 48px;

        font-size: 18px;
    }

    .article-body h4 {
        font-size: 16px;
    }

    .article-body ol.step-list > li::before {
        line-height: calc(16px * 1.95);
    }

    .article-body table {
        min-width: 520px;
    }

    .article-body .box {
        padding: 24px 22px;

        font-size: 15px;
    }

    .article-body .box--point {
        padding: 24px 0;
    }

    .app-card {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 16px;
    }

    .app-card-icon {
        width: 44px;
        height: 44px;
    }

    .app-card-go {
        display: none;
    }

    .share-label {
        width: 100%;
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .read-progress {
        display: none;
    }
}

/* ================================
   13. 記事一覧ページ（/media/）
   サムネイル＋タイトルのカードを並べる。PCは3列、タブレットは2列、スマホは1列
================================= */

/* 一覧ページは白い面の上の余白を詰める */
.article.media-sheet {
    padding-top: 28px;
}

.media-index {
    max-width: var(--a-wide);
    margin: 0 auto;
}

.media-index .breadcrumb ol {
    margin-bottom: 24px;
}

.media-head {
    margin: 0 0 48px;
}

.media-head h1 {
    margin: 0 0 16px;

    color: var(--a-ink);

    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.4;
    letter-spacing: 0.06em;
}

.media-head p {
    max-width: var(--a-measure);
    margin: 0;

    color: var(--a-sub);

    font-size: 15px;
    line-height: 1.95;
    letter-spacing: 0.04em;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 28px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.media-card a {
    display: block;

    color: inherit;
    text-decoration: none;
}

.media-card-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    margin: 0 0 16px;

    object-fit: cover;

    background: var(--a-surface);
    border-radius: var(--a-radius);

    transition: opacity 0.25s ease;
}

.media-card a:hover .media-card-thumb {
    opacity: 0.86;
}

.media-card-cat {
    display: block;

    margin: 0 0 8px;

    color: var(--a-sub);

    font-size: 12px;
    letter-spacing: 0.06em;
}

.media-card-title {
    display: block;

    margin: 0 0 10px;

    color: var(--a-ink);

    font-size: 15.5px;
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.65;
    letter-spacing: 0.04em;

    text-wrap: pretty;
    word-break: auto-phrase;

    transition: color 0.2s ease;
}

.media-card a:hover .media-card-title {
    color: var(--a-accent);
}

.media-card-date {
    display: block;

    color: var(--a-faint);

    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

@media (max-width: 1100px) {
    .article.media-sheet {
        padding-top: 24px;
    }

    .media-index {
        max-width: var(--a-measure);
    }

    .media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 44px 24px;
    }
}

@media (max-width: 760px) {
    .article.media-sheet {
        padding-top: 20px;
    }

    .media-head {
        margin-bottom: 36px;
    }

    .media-head h1 {
        font-size: 26px;
    }

    .media-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .media-card-title {
        font-size: 16px;
    }
}