/* =============================================================================
   見た目の作り直し(2026-09-28)
   style.css の後ろに読み込む「上書きの層」。土台の作り(class名・構造)はそのままに、
   色・書体・余白・線だけを入れ替える。もとに戻したいときは、この1枚を外せばよい。

   ねらい: 雑誌のような、余白の広い落ち着いた見た目。
   - 地色は温かいアイボリー。影を使わず、細い罫で面を仕切る
   - 見出しは明朝(和文 Shippori Mincho / 欧文 Cormorant Garamond)
   - 本文は軽いゴシック(欧文 Jost / 和文は端末の標準。重い和文書体を2つ読ませない)
   - 数式だけは等幅(IBM Plex Mono)。このサイトで唯一の「道具の声」
   - 角はほぼ立てる(2px)。丸い形をやめると、画面が締まる
   ============================================================================= */

:root {
    /* --- 色 --- */
    --primary-color: #9b625b;
    /* くすんだ薔薇。リンクと現在地に使う */
    --primary-hover: #7f4a44;
    --primary-light: #f4e7e2;

    --text-main: #2a2523;
    /* 温かい黒 */
    --text-secondary: #6e645d;
    --text-light: #7a6d65;

    --bg-body: #faf6f2;
    /* 温かいアイボリー */
    --bg-card: #ffffff;
    --bg-secondary: #f3eae3;
    --border-color: #e6dad1;

    /* 影は使わない。面の境目は細い罫で表す */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-focus: 0 0 0 3px rgba(155, 98, 91, 0.22);
    --gradient-1: linear-gradient(135deg, #9b625b 0%, #c9a79a 100%);

    /* --- 書体 --- */
    --font-sans: 'Jost', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
    /* 見出しは和文の明朝を先に置く。欧文の明朝(Cormorant)は数字が極端に小さく作られていて、
       日本語と混ぜると数字だけが沈んでしまう(「2次元」の2が漢字の半分以下だった) */
    --font-serif: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    --font-wordmark: 'Cormorant Garamond', 'Shippori Mincho', serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    /* --- 形 --- */
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    /* 本文の幅は全ページ共通。以前はトップが1180px・関数のページが820pxで、
       行き来すると中身の左右がずれて見えた */
    --container-width: 1000px;
    --rule: 1px solid var(--border-color);
}

:root[data-theme="dark"] {
    --primary-color: #d7a79e;
    --primary-hover: #e8beb6;
    --primary-light: rgba(215, 167, 158, 0.14);

    --text-main: #f4ece6;
    --text-secondary: #bdafa6;
    --text-light: #9a8c83;

    --bg-body: #17130f;
    --bg-card: #201a16;
    --bg-secondary: #2a221d;
    --border-color: #382e28;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
}

/* =========================================================== 土台 */
/* 狭い画面で、中の広いもの(表など)に引っぱられて本文全体が横にはみ出していた。
   はみ出す代わりに、表だけが自分の中で横に動くようにする */
.container {
    /* body が縦並びの flex なので、幅を決めないと中身の最小幅まで広がってしまう */
    width: 100%;
    min-width: 0;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.85;
}

/* 背景のぼかしは、ごく淡い一刷けに */
.bg-gradient-decoration,
[data-theme="dark"] .bg-gradient-decoration {
    height: 520px;
    background: radial-gradient(ellipse at 50% -10%, rgba(201, 167, 154, 0.22) 0%, rgba(250, 246, 242, 0) 70%);
}

[data-theme="dark"] .bg-gradient-decoration {
    background: radial-gradient(ellipse at 50% -10%, rgba(215, 167, 158, 0.10) 0%, rgba(23, 19, 15, 0) 70%);
}

/* =========================================================== 見出し */
h1,
h2,
h3,
.section-title,
.modal-title,
.logo {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* =========================================================== 上の帯 */
.site-header {
    background: rgba(250, 246, 242, 0.92);
    border-bottom: var(--rule);
    height: 76px;
}

[data-theme="dark"] .site-header {
    background: rgba(23, 19, 15, 0.92);
}

.logo {
    /* ロゴは欧文だけなので、数字の問題が起きない。Cormorant のまま残す */
    font-family: var(--font-wordmark);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.logo .highlight {
    font-style: italic;
    color: var(--primary-color);
}

.logo-icon {
    color: var(--primary-color);
    font-size: 1.1rem;
    opacity: 0.8;
}

.main-nav {
    gap: 2.25rem;
}

.nav-link {
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    padding: 0.35rem 0;
    border-radius: 0;
    background: none;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    background: none;
    color: var(--text-main);
}

.nav-link.active::after,
.nav-link:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--primary-color);
}

.theme-toggle-btn {
    background: none;
    border: var(--rule);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    color: var(--text-secondary);
}

.theme-toggle-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-main);
}

/* 狭い画面で開くメニューは、帯と同じ地色に */
@media (max-width: 992px) {
    .site-header {
        height: 64px;
    }

    .main-nav {
        top: 64px;
        gap: 0;
        background: var(--bg-card);
        border-bottom: var(--rule);
    }

    .nav-link {
        letter-spacing: 0.1em;
        padding: 0.95rem 1.5rem;
        border-bottom: var(--rule);
    }

    .nav-link.active::after,
    .nav-link:hover::after {
        display: none;
    }
}

/* =========================================================== 顔 */
.hero-section {
    padding: 7rem 0 4.5rem;
}

.hero-content h1,
.hero-main h1 {
    font-size: clamp(2.3rem, 5.2vw, 3.6rem);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
    /* 文字のグラデーションをやめ、1色の明朝に戻す */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: var(--text-main);
    color: var(--text-main);
    text-wrap: balance;
}

.hero-content h1 .highlight,
.hero-main h1 .highlight {
    color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color);
    font-style: italic;
}

.subtitle {
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    line-height: 2;
    color: var(--text-secondary);
    max-width: 30rem;
    margin-bottom: 3.5rem;
}

/* 探す欄。枠で囲わず、細い下線1本で受ける */
.search-container {
    max-width: 30rem;
}

.search-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--text-light);
    border-radius: 0;
    padding: 0.9rem 1rem 0.9rem 2.1rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.search-input:focus {
    box-shadow: none;
    border-bottom-color: var(--primary-color);
    outline: none;
}

.search-icon {
    /* 枠を外して下線1本にしたので、虫めがねも左端に寄せる
       (もとの位置のままだと、入れた文字と重なっていた) */
    left: 0.15rem;
    font-size: 0.95rem;
    color: var(--text-light);
}

.popular-tags {
    margin-top: 1.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--text-light);
}

.tag-btn,
[data-theme="dark"] .tag-btn {
    background: none;
    border: var(--rule);
    border-radius: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.32rem 0.8rem;
}

.tag-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: none;
}

/* =========================================================== 節の見出し */
.section-title {
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-align: center;
    margin-bottom: 0.6rem;
}

/* 見出しの下に、短い罫を1本 */
.section-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 1px;
    background: var(--primary-color);
    margin: 1rem auto 0;
    opacity: 0.6;
}

.section-lead {
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    margin: 1.25rem 0 2rem;
}

.section-lead a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.categories-section {
    padding-top: 3.5rem;
}

.category-pills {
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.category-pill,
[data-theme="dark"] .category-pill:not(.active) {
    border-radius: 0;
    border: var(--rule);
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    padding: 0.5rem 1.1rem;
}

.category-pill:hover {
    background: none;
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: none;
}

.category-pill.active {
    background: var(--text-main);
    border-color: var(--text-main);
    color: var(--bg-card);
    box-shadow: none;
}

.result-count-container {
    font-family: var(--font-mono);
    font-size: 0.75rem !important;
    letter-spacing: 0.08em;
    color: var(--text-light) !important;
}

/* =========================================================== 一覧のカード */
.functions-grid {
    /* カードどうしは離す(以前は1pxの隙間で密着して見えた) */
    gap: 1.5rem;
    background: none;
    padding-bottom: 0;
}

.function-card {
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-card);
    box-shadow: none;
    padding: 1.6rem 1.5rem;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.function-card:hover {
    border-color: var(--primary-color);
}

.function-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
    background: var(--primary-light);
}

.func-header {
    align-items: baseline;
    margin-bottom: 0.9rem;
}

.func-name {
    font-family: var(--font-mono);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.func-category {
    background: none;
    color: var(--text-light);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    padding: 0;
}

.func-desc {
    font-size: 0.88rem;
    line-height: 1.9;
    color: var(--text-secondary);
    margin-bottom: 1.1rem;
}

.func-syntax-preview,
[data-theme="dark"] .func-syntax-preview {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0;
    background: var(--bg-secondary);
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    padding: 0.5rem 0.7rem;
}

/* =========================================================== 下の帯 */
.site-footer {
    background: none;
    border-top: var(--rule);
    padding: 3.5rem 0;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    color: var(--text-light);
}

/* =========================================================== 小窓 */
.modal-content {
    border-radius: 2px;
    border: var(--rule);
    background: var(--bg-card);
}

.modal-backdrop {
    background: rgba(42, 37, 35, 0.45);
}

.modal-header {
    border-bottom: var(--rule);
    padding-bottom: 1.25rem;
}

.modal-title {
    font-family: var(--font-mono);
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.close-modal {
    border-radius: 0;
    border: var(--rule);
    background: none;
    color: var(--text-secondary);
}

.views-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--text-light);
}

/* =========================================================== 印・見出し語 */
.badge {
    border-radius: 0;
    border: 1px solid currentColor;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    padding: 0.22rem 0.7rem;
}

.badge-primary {
    background: none;
    color: var(--primary-color);
}

.version-list {
    gap: 0.35rem;
}

.version-badge {
    border-radius: 0;
    border: var(--rule);
    background: none;
    color: var(--text-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.5rem;
}

.detail-label {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--text-light);
    margin-bottom: 1rem;
}

/* もとは緑の小さな棒。細い罫に変える */
.detail-label::before {
    width: 18px;
    height: 1px;
    background: var(--text-light);
    border-radius: 0;
    opacity: 0.7;
}

/* =========================================================== 数式 */
.syntax-box {
    background: var(--bg-secondary);
    border: none;
    border-radius: 6px;
    padding: 1.15rem 3rem 1.15rem 1.25rem;
}

.syntax-box code,
[data-theme="dark"] .syntax-box code {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-main);
    letter-spacing: 0;
}

.copy-btn {
    border-radius: 0;
    border: var(--rule);
    background: var(--bg-card);
    color: var(--text-light);
}

.copy-btn:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.example-box {
    background: none;
    border: var(--rule);
    border-radius: 0;
    padding: 1.5rem;
}

.example-box code {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--text-main);
}

.example-result,
[data-theme="dark"] .example-result {
    background: var(--primary-light);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.9rem;
    padding: 0.8rem 1.1rem;
}

/* =========================================================== 表 */
.excel-table {
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.excel-table th {
    background: var(--bg-secondary);
    color: var(--text-light);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.excel-table td,
.excel-table th {
    border-color: var(--border-color);
}

.table-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: var(--text-light);
}

.excel-table-container {
    border-radius: 0;
}

/* =========================================================== 選びどころ */
::selection {
    background: var(--primary-light);
    color: var(--text-main);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =========================================================== 例の表の中身
   もとは青灰色の見出し・橙の枠・緑の答えと、3系統の色が混ざっていた。
   「探しに行く元」= 砂色の囲み、「答え」= 薔薇色、と2つに整理する。 */
.excel-table thead th,
.excel-table tbody th,
[data-theme="dark"] .excel-table thead th,
[data-theme="dark"] .excel-table tbody th {
    background-color: var(--bg-secondary);
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    border-color: var(--border-color);
}

[data-theme="dark"] .excel-table {
    background-color: var(--bg-card);
}

[data-theme="dark"] .excel-table td {
    border-color: var(--border-color);
}

/* 探しに行く元の値 */
.excel-table td.highlight-cell {
    background-color: transparent;
    border: 1px solid var(--text-light);
    box-shadow: inset 0 0 0 1px var(--bg-card);
}

/* 求めた答え */
.excel-table td.result-cell,
[data-theme="dark"] .excel-table td.result-cell {
    background-color: var(--primary-light);
    color: var(--primary-color);
    font-weight: 500;
}

/* 1行目(項目名の行) */
.excel-table tbody tr:first-child td,
[data-theme="dark"] .excel-table tbody tr:first-child td {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 500;
    border-color: var(--border-color);
}

.table-wrapper,
[data-theme="dark"] .table-wrapper {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 0;
    padding: 1.1rem;
}

.table-label,
[data-theme="dark"] .table-label {
    display: block;
    background: none;
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    margin-bottom: 0.85rem;
}

/* 元の緑が残っていたところの後始末(style.css 側で暗いとき用に色を直書きしていた箇所) */
[data-theme="dark"] .version-badge {
    background: none;
    color: var(--text-light);
    border-color: var(--border-color);
}

.version-badge.v-new {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: none;
}

.logo-icon {
    filter: none;
}

/* =========================================================== 探し直しの案内
   ユーザーテスト(2026-09-29)の指摘: トップの検索は関数だけが対象なので、
   「商品名」のような目的の言葉だと0件になり、行き止まりになっていた。 */
.recipe-hint {
    margin: -0.5rem 0 1.25rem;
    text-align: right;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.recipe-hint a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.recipe-hint i {
    font-size: 0.7rem;
    margin-left: 0.2rem;
}

.no-results {
    text-align: center;
    padding: 3.5rem 1.5rem;
    border: var(--rule);
    background: var(--bg-card);
}

.no-results-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}

.no-results-lead {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 2;
    margin-bottom: 1.5rem;
}

.no-results-link {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.no-results-link:hover {
    background: var(--primary-hover);
}

.no-results-link i {
    font-size: 0.7rem;
    margin-left: 0.35rem;
}

/* 続きを出すボタン(自動で出る仕組みが働かないときの受け皿) */
.more-row {
    display: flex;
    justify-content: center;
    padding-bottom: 4rem;
}

.more-btn {
    padding: 0.8rem 2.5rem;
    border: var(--rule);
    background: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    cursor: pointer;
}

.more-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* =========================================================== 使用例
   例は2種類ある。表計算の画面(シート)と、項目と値の組。
   以前はどちらも同じ枠線つきの表で出していたので、値の組まで
   表計算の画面のように見えて紛らわしかった。 */

/* --- シート(1枚に畳んだ表計算の画面) --- */
.sheet {
    overflow-x: auto;
    margin: 0.25rem 0 0;
}

.sheet .excel-table {
    width: auto;
    min-width: 100%;
}

/* 左上の角。行番号と列の記号が交わるところ */
.excel-table th.sheet-corner {
    width: 2.4rem;
    min-width: 2.4rem;
}

/* 列の記号に添える注記(「A 単価」の「単価」) */
.col-note {
    display: block;
    margin-top: 2px;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: var(--text-light);
    font-weight: 400;
}

/* 数式を入れたセル。ここが答え */
.excel-table td.is-answer {
    position: relative;
    box-shadow: inset 0 0 0 2px var(--primary-color);
    font-weight: 500;
}

.sheet-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sheet-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: var(--text-light);
}

/* --- 項目と値の組(表計算の画面ではない例) --- */
.pairs dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
}

.pairs .pair {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1rem;
    padding: 0.7rem 0.95rem;
    background: var(--bg-card);
}

.pairs dt {
    flex: 0 0 auto;
    min-width: 9rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--text-light);
}

.pairs dd {
    flex: 1 1 12rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--text-main);
    word-break: break-word;
}

/* 答えの行 */
.pairs .pair.is-answer {
    background: var(--primary-light);
}

.pairs .pair.is-answer dd {
    color: var(--primary-color);
    font-weight: 500;
}

/* --- 「どのセルに入れるか」の案内 --- */
.example-where {
    margin: 0 0 0.9rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.example-where code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-main);
}

.example-where .cell-ref {
    color: var(--primary-color);
    font-weight: 500;
}

@media (max-width: 560px) {
    .pairs dt {
        min-width: 100%;
    }
}

/* =========================================================== 最初の画面(作り直し 2026-09-29)
   直す前は、大きな見出し・説明文・検索欄を中央に積んだだけで、余白ばかりが目立ち、
   何を載せているサイトなのかが絵で伝わっていなかった。
   左に言葉、右に**扱っているもの(表計算の画面)そのもの**を置く。 */
.hero-section {
    padding: 4.5rem 0 4rem;
    text-align: left;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 4rem;
    align-items: center;
}

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

/* 小さな見出し。飾りではなく、収録している数そのもの */
.hero-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: var(--text-light);
}

.hero-eyebrow b {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
    letter-spacing: 0.02em;
}

.hero-eyebrow .sep {
    opacity: 0.5;
    margin: 0 0.35rem;
}

.hero-content h1,
.hero-main h1 {
    /* 2026-10-04: 375px 幅で「Excel関数の使い方を」「、」と、読点だけが次の行に残っていた。
       見出しは word-break: keep-all なので語の途中で折らないが、入りきらないと
       overflow-wrap が最後の1文字をこぼす。幅に合わせて字を少し詰め、1行に収める。 */
    font-size: clamp(1.45rem, 7.4vw, 1.75rem);
    line-height: 1.42;
    margin-bottom: 1.25rem;
}

.hero-main .subtitle {
    margin: 0 0 2.5rem;
    max-width: 26rem;
    font-size: 0.92rem;
    line-height: 2.05;
}

.hero-main .search-container {
    max-width: 26rem;
    margin: 0 0 1.5rem;
}

.hero-main .popular-tags {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.hero-main .popular-tags > span {
    margin-right: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
}

/* --- 右側: 表計算の画面 --- */
.hero-sheet {
    display: block;
    min-width: 0;
    padding: 1.1rem 1.1rem 0.9rem;
    border: var(--rule);
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease;
}

.hero-sheet:hover {
    border-color: var(--primary-color);
}

/* 数式バー。Excel の「fx」の欄に見立てる */
.hero-formula {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.9rem;
    border-bottom: var(--rule);
}

.hero-formula .fx {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--text-light);
    flex: 0 0 auto;
}

.hero-formula code {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hero-sheet .sheet {
    display: block;
}

.hero-sheet .excel-table {
    font-size: 0.7rem;
}

.hero-sheet .excel-table th,
.hero-sheet .excel-table td {
    padding: 0.38rem 0.5rem;
    min-width: 0;
    white-space: nowrap;
}

.hero-sheet-caption {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--text-light);
}

.hero-sheet:hover .hero-sheet-caption {
    color: var(--primary-color);
}

.hero-sheet-caption i {
    font-size: 0.62rem;
}

/* 狭い画面では縦に積む。表は言葉の下へ */
@media (max-width: 900px) {
    .hero-section {
        padding: 3rem 0 2.5rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero-main .subtitle,
    .hero-main .search-container {
        max-width: none;
    }
}

/* =========================================================== 表の「枠」と「中身」を分ける
   指摘: 列の記号(A〜E)・行番号(1〜4)と、データの見出し行(ID・商品…)が同じ色で、
   どこまでが Excel の画面の枠で、どこからが自分のデータなのか分からなかった。

   枠  = 灰色がかった地・小さく薄い字(操作の器であって、中身ではない)
   中身 = 差し色の地・濃い字(利用者が入れたデータの見出し) */
:root {
    --sheet-frame: #eceae8;        /* 枠。色みを抜いた灰色寄り */
    --sheet-frame-line: #d8d3ce;
    --sheet-head: #f0dcd5;         /* データの見出し行。差し色を少し濃く */
}

:root[data-theme="dark"] {
    --sheet-frame: #201c1a;
    --sheet-frame-line: #38322e;
    --sheet-head: rgba(215, 167, 158, 0.18);
}

/* --- 枠: 列の記号と行番号 --- */
.excel-table thead th,
.excel-table tbody th,
[data-theme="dark"] .excel-table thead th,
[data-theme="dark"] .excel-table tbody th {
    background-color: var(--sheet-frame);
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-align: center;
    border-color: var(--sheet-frame-line);
}

/* 枠と中身の境目は、ほかの罫より少しはっきりさせる */
.excel-table thead th {
    border-bottom: 1px solid var(--sheet-frame-line);
}

.excel-table tbody th {
    border-right: 1px solid var(--sheet-frame-line);
}

/* --- 中身: 1行目(データの見出し) --- */
.excel-table tbody tr:first-child td,
[data-theme="dark"] .excel-table tbody tr:first-child td {
    background-color: var(--sheet-head);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-weight: 500;
    border-color: var(--border-color);
}

/* =========================================================== 表の中の印
   指摘: 枠の一部だけ少し濃く、意味がありそうだが中途半端で分からない。
   原因は、セルごとに線を引いていたこと。隣の罫と混ざって線の一部だけが濃く見えていた。
   線はやめて**地色だけ**にし、意味は下に文字で出す。 */
:root {
    --sheet-source: #ece6da;       /* 数式が見に行った値。答えの薔薇色とは別系統の砂色 */
}

:root[data-theme="dark"] {
    --sheet-source: #2e2823;
}

.excel-table td.highlight-cell {
    background-color: var(--sheet-source);
    border: none;
    box-shadow: none;
}

/* 答えのセルだけは、はっきり囲む */
.excel-table td.is-answer {
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.sheet-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin: 0.85rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.mark {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.mark-answer {
    background: var(--primary-light);
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.mark-source {
    background: var(--sheet-source);
    box-shadow: inset 0 0 0 1px var(--sheet-frame-line);
}

/* =========================================================== 読み上げ・キーボード
   目で見る人には出さないが、音声で読む人には要る文字 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* キーボードだけで使う人が、毎回ナビを通らずに本文へ行けるようにする */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 200;
    padding: 0.6rem 1.2rem;
    background: var(--text-main);
    color: var(--bg-card);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 1rem;
}

/* レシピ一覧の右側。表計算の画面のかわりに、レシピ1件を見本として置く */
.hero-recipe {
    display: flex;
    flex-direction: column;
    padding: 1.3rem 1.3rem 1.1rem;
}

.hero-recipe-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0 0 0.6rem;
}

.hero-recipe-goal {
    font-size: 0.85rem;
    line-height: 1.9;
    color: var(--text-secondary);
    margin: 0 0 0.3rem;
}

.hero-recipe .hero-sheet-caption {
    margin-top: auto;
    padding-top: 1rem;
}

/* 検索欄の下の案内。左に「Enter で開く」、右にレシピへの逃げ道 */
.recipe-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 1.2rem;
    text-align: left;
}

.hint-enter {
    color: var(--text-light);
}

.hint-enter kbd {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.12rem 0.38rem;
    margin-right: 0.15rem;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    color: var(--text-secondary);
}

/* =========================================================== ランキングのタブ
   狭い画面で「関数閲覧数」が1文字ずつ縦に割れていた。
   ボタンの中では折り返さず、ボタンどうしで折り返す。 */
.ranking-tabs,
.ranking-filter-container {
    flex-wrap: wrap;
    justify-content: center;
}

.tab-btn,
.filter-btn {
    white-space: nowrap;
}

.ranking-tabs .tab-btn {
    border-radius: 0;
}

/* =========================================================== 引数の並び
   何番目に何を渡すか、どれを省略できるか。
   これまでは構文の角括弧を読み取らせるしかなかった。 */
.args {
    list-style: none;
    counter-reset: arg;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
}

.args li {
    counter-increment: arg;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--bg-card);
}

/* 何番目か。順番が大事なので、番号を出す */
.args li::before {
    content: counter(arg);
    flex: 0 0 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-light);
    text-align: right;
}

.arg-name {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    color: var(--text-main);
    word-break: break-word;
}

.arg-need {
    flex: 0 0 auto;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--primary-color);
}

.arg-need.is-optional {
    color: var(--text-light);
}

.args-note {
    margin: 0.7rem 0 0;
    font-size: 0.78rem;
    color: var(--text-light);
}

/* 古いExcelでは使えない、という断り */
.version-note {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    background: var(--primary-light);
    font-size: 0.82rem;
    line-height: 1.8;
    color: var(--text-main);
}

/* レシピのページで、使っている関数の構文を添える */
.link-card-syntax {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    word-break: break-word;
}

/* =========================================================== つまずきやすいところ・よくあるエラー
   手で書いたものがある関数にだけ出す(tools/function-notes.js)。 */
.notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.notes li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.9rem;
    line-height: 2;
    color: var(--text-secondary);
}

.notes li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 5px;
    height: 5px;
    background: var(--primary-color);
    opacity: 0.6;
}

.notes strong {
    color: var(--text-main);
    font-weight: 500;
}

.notes code,
.err code,
.err-fix code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--bg-secondary);
    padding: 0.1em 0.35em;
}

.notes kbd {
    font-family: var(--font-mono);
    font-size: 0.8em;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 0.1em 0.35em;
}

/* --- エラーの一覧 --- */
.err-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-color);
    border: 1px solid var(--border-color);
}

.err {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.2rem;
    padding: 0.9rem 1rem;
    background: var(--bg-card);
}

.err dt {
    flex: 0 0 6.5rem;
}

.err dt code {
    background: none;
    padding: 0;
    color: var(--primary-color);
    font-size: 0.88rem;
}

.err dd {
    flex: 1 1 14rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.err-why {
    font-size: 0.88rem;
    line-height: 1.9;
    color: var(--text-main);
}

.err-fix {
    font-size: 0.84rem;
    line-height: 1.9;
    color: var(--text-secondary);
    padding-left: 1.1rem;
    position: relative;
}

.err-fix::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

@media (max-width: 560px) {
    .err dt {
        flex: 0 0 100%;
    }
}

/* 一覧のカードに出す閲覧数(誰も見ていないときは出さない) */
.card-views {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-light);
}

/* 関数のページの見出しの下に出す閲覧数 */
.doc-header .views-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* 全部入りのデータを読んでいるあいだの一言(ふつうは先読みが済んでいるので出ない) */
.modal-pending {
  margin: 1.5rem 0 0.5rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.modal-pending a { color: var(--primary-color); }

/* 検索したときの手ごたえ。検索欄のすぐ下に出す */
.search-status {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  min-height: 1.4em;
}
.search-status kbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding: 0.1em 0.4em;
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-main);
}
.search-status a { color: var(--primary-color); font-weight: 500; }

/* =========================================================== 使用例の表(2026-09-30)
   スマホの幅では、表が 362px 要るのに 285px しか見えず、
   肝心の「答えのセル」が画面の外にあった。しかも、そこに続きがあることが分からなかった。 */

/* 横に続きがあるときだけ、端に影が出る(中身が無い側には出ない)。
   background-attachment の local と scroll の差を使うので、JavaScript は要らない */
.sheet {
    background:
        linear-gradient(to right, var(--bg-card), rgba(0, 0, 0, 0)) left / 20px 100% no-repeat local,
        linear-gradient(to left, var(--bg-card), rgba(0, 0, 0, 0)) right / 20px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) left / 10px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) right / 10px 100% no-repeat scroll;
    /* 暗いときに、横の送り帯だけが白く光っていた */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.sheet::-webkit-scrollbar { height: 8px; }
.sheet::-webkit-scrollbar-track { background: transparent; }
.sheet::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
.sheet::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

@media (max-width: 560px) {
    /* 表に回せる幅を増やす。枠の内側の余白が左右で48pxを取っていた */
    .example-box { padding: 0.85rem; }
    .excel-table th,
    .excel-table td { padding: 0.4rem 0.45rem; }
    .excel-table th.sheet-corner { width: 1.7rem; min-width: 1.7rem; }
    /* style.css が 50px の下限を引いていた。
       ただし詰めすぎると「検 索 I D」のように1文字ずつ折れるので、折り返しは止める。
       入りきらないぶんは横に送る(答えの位置までは js/sheet.js が送っておく) */
    .excel-table th,
    .excel-table td { min-width: 2.6rem; white-space: nowrap; }
}

/* =========================================================== 見出しの改行(2026-09-30)
   スマホの幅で「人気ランキング」が「人/気」の間で折り返していた。
   日本語は文字の途中でも折り返せてしまうので、語の切れ目(空白)を優先する。
   それでも入りきらないときだけ、文字の途中で折り返す。 */
h1, h2, h3,
.hero-eyebrow,
.card-name {
    word-break: keep-all;
    overflow-wrap: break-word;
}