/* ==========================================================================
   Tailwind utility shim for this content page (2026-09-16)
   The theme's tailwind.css is built in the theme repo from the theme's own
   Blade/JS sources, so utilities that only this raw-HTML page uses never
   make it into the production build (the local Vite dev server generates
   them on the fly, which is why the gap only shows on the live site).
   Values follow Tailwind v4 defaults. Add here whenever a new utility is
   used in philosophy*.html and the built theme CSS does not carry it.
   ========================================================================== */
.p-5 { padding: 1.25rem; }
.self-center { align-self: center; }
.tracking-widest { letter-spacing: 0.1em; }
.underline-offset-2 { text-underline-offset: 2px; }
.border-collapse { border-collapse: collapse; }

/* ==========================================================================
   Dixlase Details Page (/content/dixlase)
   prose 親 (max-w-4xl) の中で動く前提。grid/カードは not-prose で抜けて使用。
   ブランドフロントページから分離した詳細セクション (主な機能、設計思想、価値の柱、
   対象ユーザー、ライセンス、ロードマップ、Laravel、開発者向け、FAQ) のスタイル。
   ========================================================================== */

:root {
    --dx-accent: #4D82EE;
    --dx-accent-soft: rgba(77, 130, 238, 0.10);
    --dx-accent-line: rgba(77, 130, 238, 0.35);
    --dx-fg: #1a1d24;
    --dx-fg-muted: #5b6473;
    --dx-bg-soft: #f7f8fb;
    --dx-border: rgba(15, 17, 23, 0.10);
    --dx-card-bg: #ffffff;
    --dx-card-shadow: 0 1px 2px rgba(15, 17, 23, 0.04), 0 8px 24px rgba(15, 17, 23, 0.04);
    --dx-card-shadow-hover: 0 1px 2px rgba(15, 17, 23, 0.06), 0 16px 40px rgba(15, 17, 23, 0.08);
}

.dark {
    --dx-fg: #e7eaf0;
    --dx-fg-muted: #9aa3b2;
    --dx-bg-soft: rgba(255, 255, 255, 0.03);
    --dx-border: rgba(255, 255, 255, 0.10);
    --dx-card-bg: rgba(255, 255, 255, 0.04);
    --dx-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
    --dx-card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.30);
    --dx-accent: #4D82EE;
    --dx-accent-soft: rgba(77, 130, 238, 0.12);
    --dx-accent-line: rgba(77, 130, 238, 0.40);
}

/* ハッシュリンクや scrollIntoView の着地位置を、固定サイトヘッダー(h-14 = 3.5rem)
   + sticky TOC + バッファぶん下にオフセットする。
   セクション・FAQ 項目に個別の scroll-margin-top を書く必要がなくなる。 */
html {
    scroll-padding-top: 10rem;
}

/* 管理バー (#admin-bar, h-12 = 3rem) 表示時は sticky 要素の合計高が
   admin bar 分 (3rem) 増えるので scroll-padding も加算する。
   セレクタは `html:has(...)` にする必要がある — `scroll-padding-top`
   は scroll container (通常 <html>) にのみ有効で、`body:has(...)` で
   body に設定しても main page scroll では無視される。
   :has() は主要ブラウザ (Chrome 105+ / Safari 15.4+ / Firefox 121+)
   で利用可能で、既存 baseline と一致。

   2026-08-14 v5 経緯 — DevTools 実測で判明したこと:
   - Sticky 要素合計は 49 (admin bar) + 56 (site header .fixed.h-14) +
     56 (sticky TOC) = 161px = ~10rem
   - `scroll-padding-top: 208px (13rem)` を指定しているが、実際の
     `scrollIntoView` は target を viewport Y=-34 に着地させる
     (=200px 余分に scroll 過ぎている)
   - 原因は `.dx-section` の padding-top や scrollIntoView の
     content-box 基準など複合要因と推定 (詳細特定は後回し)
   - 実用値として +150px 相当のオフセットを追加 → 13rem + 9rem
     = 22rem (352px) で heading が sticky nav の下に visible になる
     余白を確保 */
html:has(#admin-bar) {
    scroll-padding-top: 22rem;
}

/* --------------------------------------------------------------------------
   ページ内ナビゲーション (TOC)
   -------------------------------------------------------------------------- */

.dx-toc {
    position: sticky;
    /* 固定サイトヘッダー (h-14 = 3.5rem) の真下にスタックさせる。
       管理者ログイン中で管理バー (h-12 = 3rem) が表示されている場合は、
       下の body:has(#admin-bar) ルールで合計 6.5rem 下に押し下げる。 */
    top: 3.5rem;
    z-index: 10;
    display: flex;
    gap: 0.125rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0.625rem 1rem;
    /* フルブリード: コンテンツコンテナを飛び出してビューポート幅まで広げる。
       margin-left/right の calc(50% - 50vw) で左右をビューポート端まで延伸。 */
    width: 100vw;
    margin: 0 calc(50% - 50vw) 3rem;
    background: color-mix(in srgb, var(--dx-card-bg) 80%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--dx-border);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 管理バーが表示されているとき、TOC を管理バー + ヘッダーぶん下に押し下げる。
   :has() は Chrome 105+ / Safari 15.4+ / Firefox 121+ で利用可能。
   非対応ブラウザでは TOC がヘッダーぶんだけ下がる挙動 (上のルール) になる。 */
body:has(#admin-bar) .dx-toc {
    top: 6.5rem;
}

.dx-toc::-webkit-scrollbar {
    display: none;
}

/* One scrolling row on every viewport (2026-09-16; desktop used to wrap
   to 2–3 lines when the labels did not fit). The auto margins on the
   first / last link centre the row while it fits and collapse to zero
   once it overflows, so the scroll still starts at the first item. */
.dx-toc > a:first-child { margin-left: auto; }
.dx-toc > a:last-child  { margin-right: auto; }

@media (min-width: 768px) {
    .dx-toc {
        gap: 0.25rem;
    }
}

.dx-toc a {
    font-size: 0.8125rem;
    color: var(--dx-fg-muted);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    transition: color 160ms ease, background-color 160ms ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.dx-toc a:hover {
    color: var(--dx-fg);
    background: var(--dx-bg-soft);
}

.dx-toc a.is-active {
    color: var(--dx-accent);
    background: var(--dx-accent-soft);
}

/* --------------------------------------------------------------------------
   Laravel 帯
   -------------------------------------------------------------------------- */

.dx-laravel {
    margin: 0 0 4rem;
    padding: 2rem 1.75rem;
    background:
        linear-gradient(135deg, var(--dx-accent-soft), transparent 60%),
        var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 1.25rem;
    color: var(--dx-fg);
}

@media (min-width: 768px) {
    .dx-laravel {
        padding: 2.5rem 3rem;
    }
}

.dx-laravel__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 768px) {
    .dx-laravel__inner {
        grid-template-columns: auto 1fr;
        gap: 2.5rem;
        align-items: center;
    }
}

.dx-laravel__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-accent-line);
    border-radius: 999px;
    color: var(--dx-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    align-self: start;
    width: max-content;
}

.dx-laravel__badge svg {
    width: 1.125rem;
    height: 1.125rem;
}

.dx-laravel__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--dx-fg);
    margin: 0 0 0.875rem;
    letter-spacing: -0.005em;
}

.dx-laravel__body p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 0.875rem;
}

.dx-laravel__body p:last-of-type {
    margin-bottom: 1.25rem;
}

.dx-laravel__body .dx-cta-row {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   セクション共通
   -------------------------------------------------------------------------- */

.dx-section {
    color: var(--dx-fg);
    padding: 5rem 0;
}

.dx-section + .dx-section {
    border-top: 1px solid var(--dx-border);
}

.dx-section__head {
    text-align: center;
    margin-bottom: 4.5rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .dx-section__head {
        margin-bottom: 5.5rem;
    }
}

.dx-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dx-accent);
    margin: 0 0 0.75rem;
}

.dx-heading {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1rem;
    color: var(--dx-fg);
    letter-spacing: -0.01em;
}

.dx-lede {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--dx-fg-muted);
    max-width: 38rem;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.dx-grid-2,
.dx-grid-3 {
    display: grid;
    gap: 1.25rem;
}

.dx-grid-2 { grid-template-columns: 1fr; }
.dx-grid-3 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .dx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .dx-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .dx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   カード (機能・開発者向け)
   -------------------------------------------------------------------------- */

.dx-card {
    position: relative;
    padding: 1.75rem;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 1.25rem;
    box-shadow: var(--dx-card-shadow);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.dx-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dx-card-shadow-hover);
    border-color: var(--dx-accent-line);
}

.dx-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: var(--dx-accent-soft);
    color: var(--dx-accent);
    margin-bottom: 1.25rem;
}

.dx-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.dx-card__num {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--dx-fg-muted);
    margin: 0 0 0.375rem;
}

.dx-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--dx-fg);
    margin: 0 0 0.625rem;
}

.dx-card__body {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--dx-fg-muted);
    margin: 0;
}

.dx-card--quiet {
    background: var(--dx-bg-soft);
    box-shadow: none;
}

.dx-card--quiet:hover {
    background: var(--dx-card-bg);
}

/* --------------------------------------------------------------------------
   対象ユーザー (audience)
   -------------------------------------------------------------------------- */

/* Audience cards: intentionally NO hover reaction (2026-08-07).
   These cards are informational (who Dixlase is for), not CTAs, so a
   hover state would suggest interactivity that isn't there. The
   previous ::before accent bar and translateY/border transitions were
   removed for the same reason. `position: relative` and
   `overflow: hidden` are kept for future decorative additions. */
.dx-audience {
    position: relative;
    padding: 1.75rem;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 1.25rem;
    overflow: hidden;
}

.dx-audience__tag {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--dx-accent);
    margin: 0 0 0.625rem;
}

.dx-audience h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--dx-fg);
    margin: 0 0 0.625rem;
    letter-spacing: -0.005em;
}

.dx-audience p {
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--dx-fg-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   ライセンス
   -------------------------------------------------------------------------- */

.dx-license__intro {
    max-width: 42rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.dx-license__intro p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 1rem;
}

.dx-license__intro p:last-child {
    margin-bottom: 0;
}

.dx-license__notice {
    margin: 2rem 0 2.5rem;
    padding: 1.5rem 1.75rem;
    background:
        linear-gradient(135deg, var(--dx-accent-soft), transparent 70%),
        var(--dx-card-bg);
    border: 1px solid var(--dx-accent-line);
    border-radius: 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 768px) {
    .dx-license__notice {
        padding: 1.75rem 2.25rem;
        gap: 1.75rem;
    }
}

.dx-license__notice-mark {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--dx-accent);
    flex-shrink: 0;
}

.dx-license__notice-mark svg {
    width: 100%;
    height: 100%;
}

.dx-license__notice-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dx-accent);
    margin: 0 0 0.5rem;
}

.dx-license__notice-body h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--dx-fg);
    margin: 0 0 0.875rem;
    letter-spacing: -0.005em;
}

.dx-license__notice-body p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 0.75rem;
}

.dx-license__notice-body p:last-child {
    margin-bottom: 0;
}

.dx-license__plugin {
    margin: 2.5rem 0;
    padding: 1.75rem;
    background: var(--dx-bg-soft);
    border: 1px solid var(--dx-border);
    border-radius: 1.25rem;
}

@media (min-width: 768px) {
    .dx-license__plugin {
        padding: 2rem 2.25rem;
    }
}

.dx-license__plugin-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dx-accent);
    margin: 0 0 0.5rem;
}

.dx-license__plugin-head h3 {
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--dx-fg);
    margin: 0 0 0.875rem;
    letter-spacing: -0.005em;
}

.dx-license__plugin-head > p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 1.5rem;
}

.dx-license__plugin-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .dx-license__plugin-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dx-license__plugin-points article {
    padding: 1.25rem 1.375rem;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 1rem;
}

.dx-license__plugin-points h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--dx-fg);
    margin: 0 0 0.625rem;
    letter-spacing: -0.005em;
}

.dx-license__plugin-points p {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--dx-fg-muted);
    margin: 0;
}

/* Consecutive paragraphs inside a plugin-points article need visual breathing
   room; the base `margin: 0` above lets the p tag alone create no vertical
   gap, so a paragraph split doesn't feel like one. Replaces the earlier
   pattern of bare <br> between two <p>s with a proper block-level gap. */
.dx-license__plugin-points article > p + p {
    margin-top: 1rem;
}

.dx-license__plugin-points code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    padding: 0.0625rem 0.375rem;
    background: var(--dx-bg-soft);
    border: 1px solid var(--dx-border);
    border-radius: 0.25rem;
    color: var(--dx-fg);
}

.dx-license__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .dx-license__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dx-license__card {
    padding: 1.75rem;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 1.25rem;
}

.dx-license__card--accent {
    background:
        linear-gradient(135deg, var(--dx-accent-soft), transparent 70%),
        var(--dx-card-bg);
    border-color: var(--dx-accent-line);
}

.dx-license__tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    border-radius: 999px;
    margin: 0 0 0.875rem;
}

.dx-license__tag--free {
    color: var(--dx-fg-muted);
    background: var(--dx-bg-soft);
    border: 1px solid var(--dx-border);
}

.dx-license__tag--paid {
    color: var(--dx-accent);
    background: var(--dx-accent-soft);
    border: 1px solid var(--dx-accent-line);
}

.dx-license__tag--soon {
    color: #b45309;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.45);
}

.dark .dx-license__tag--soon {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.35);
}

.dx-license__card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.875rem;
}

.dx-license__card-tags .dx-license__tag {
    margin: 0;
}

.dx-license__card-note {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--dx-border);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--dx-fg-muted);
}

.dx-license__card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--dx-fg);
    margin: 0 0 1rem;
    letter-spacing: -0.005em;
}

.dx-license__card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dx-license__card li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--dx-fg-muted);
}

.dx-license__card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6875rem;
    width: 0.5rem;
    height: 1px;
    background: var(--dx-accent-line);
}

.dx-license__cta-label {
    margin: 2.5rem 0 0.875rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dx-fg-muted);
}

.dx-license__cta-label + .dx-cta-row--center {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   設計思想 (philosophy)
   -------------------------------------------------------------------------- */

.dx-philosophy {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.dx-philosophy__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    padding: 1.75rem;
    background: var(--dx-bg-soft);
    border: 1px solid var(--dx-border);
    border-radius: 0.875rem;
}

@media (min-width: 768px) {
    .dx-philosophy__item {
        grid-template-columns: 4.5rem 1fr;
        gap: 2rem;
        padding: 2.25rem 2.5rem;
    }
}

.dx-philosophy__num {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dx-accent);
    letter-spacing: 0.05em;
    line-height: 1;
}

.dx-philosophy__body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--dx-fg);
    margin: 0 0 1rem;
    letter-spacing: -0.005em;
}

.dx-philosophy__body p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 1rem;
}

.dx-philosophy__body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   価値の柱 (pillars)
   5つの土台 + 1つの帰結(自由)
   -------------------------------------------------------------------------- */

.dx-pillars-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* SM: 4列キャンバス × span 2 = 実質2列。最後の5枚目を中央に置く */
@media (min-width: 640px) {
    .dx-pillars-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dx-pillar {
        grid-column: span 2;
    }

    .dx-pillar:nth-child(5) {
        grid-column: 2 / span 2;
    }
}

/* MD+: 6列キャンバス × span 2 = 実質3列。下段は2枚を中央に寄せる */
@media (min-width: 768px) {
    .dx-pillars-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .dx-pillar:nth-child(5) {
        grid-column: span 2;
    }

    .dx-pillar:nth-child(4) {
        grid-column: 2 / span 2;
    }
}

.dx-pillar {
    padding: 1.75rem;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 1.25rem;
    transition: border-color 200ms ease, transform 200ms ease;
    display: flex;
    flex-direction: column;
}

.dx-pillar:hover {
    border-color: var(--dx-accent-line);
    transform: translateY(-1px);
}

.dx-pillar__mark {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--dx-accent);
    margin-bottom: 1.25rem;
}

.dx-pillar__mark svg {
    width: 100%;
    height: 100%;
}

.dx-pillar h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--dx-fg);
    margin: 0 0 0.625rem;
    letter-spacing: -0.005em;
}

.dx-pillar p {
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--dx-fg-muted);
    margin: 0;
}

.dx-pillar p sup {
    color: var(--dx-accent);
    font-weight: 600;
    margin: 0 0.05em;
}

.dx-pillar p.dx-pillar__note {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--dx-border);
    font-size: 0.75rem;
    line-height: 1.65;
    color: var(--dx-fg-muted);
    opacity: 0.85;
}

/* 自由カード ── 5つの柱の上に咲く帰結 */

.dx-pillar-freedom {
    position: relative;
    margin-top: 2rem;
    padding: 2.25rem 1.75rem;
    background:
        radial-gradient(ellipse at top, var(--dx-accent-soft), transparent 60%),
        var(--dx-card-bg);
    border: 1px solid var(--dx-accent-line);
    border-radius: 1.25rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    justify-items: center;
    text-align: center;
    /* セル幅を狭めて中央に配置 */
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 639px) {
    .dx-pillar-freedom {
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    .dx-pillar-freedom {
        padding: 2.75rem 3rem;
        gap: 2.25rem;
    }
}

.dx-pillar-freedom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--dx-accent), transparent);
}

.dx-pillar-freedom__mark {
    width: 3rem;
    height: 3rem;
    color: var(--dx-accent);
    flex-shrink: 0;
}

.dx-pillar-freedom__mark svg {
    width: 100%;
    height: 100%;
}

.dx-pillar-freedom__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dx-accent);
    margin: 0 0 0.5rem;
}

.dx-pillar-freedom__body h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--dx-fg);
    margin: 0 0 1rem;
    letter-spacing: -0.005em;
}

.dx-pillar-freedom__body p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 1rem;
}

/* Override the .dx-pillar-freedom { text-align: center } for reading paragraphs
   only: the eyebrow (<p class="dx-pillar-freedom__eyebrow">) and the h3 stay
   centered as the identity block, but multi-paragraph body copy is easier to
   scan left-aligned. `:not()` excludes the eyebrow so the earlier over-broad
   rule doesn't sweep it up. */
.dx-pillar-freedom__body p:not(.dx-pillar-freedom__eyebrow) {
    text-align: left;
}

.dx-pillar-freedom__body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ロードマップ (timeline)
   -------------------------------------------------------------------------- */

.dx-roadmap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 1.5rem;
}

.dx-roadmap::before {
    content: "";
    position: absolute;
    left: 0.4375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: linear-gradient(
        to bottom,
        var(--dx-accent-line),
        var(--dx-border) 30%,
        var(--dx-border)
    );
}

.dx-roadmap__phase {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 0;
}

.dx-roadmap__marker {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.875rem;
    margin-left: -1.5rem;
}

.dx-roadmap__dot {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 999px;
    background: var(--dx-card-bg);
    border: 2px solid var(--dx-border);
    flex-shrink: 0;
}

.dx-roadmap__phase--current .dx-roadmap__dot {
    background: var(--dx-accent);
    border-color: var(--dx-accent);
    box-shadow: 0 0 0 4px var(--dx-accent-soft);
}

.dx-roadmap__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dx-fg-muted);
}

.dx-roadmap__phase--current .dx-roadmap__label {
    color: var(--dx-accent);
}

.dx-roadmap__phase h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--dx-fg);
    margin: 0 0 0.75rem;
}

.dx-roadmap__phase p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--dx-fg-muted);
    margin: 0 0 0.75rem;
}

.dx-roadmap__phase p:last-child {
    margin-bottom: 0;
}

.dx-roadmap__phase ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dx-roadmap__phase li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--dx-fg-muted);
}

.dx-roadmap__phase li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6875rem;
    width: 0.5rem;
    height: 1px;
    background: var(--dx-accent-line);
}

/* --------------------------------------------------------------------------
   ノート (developers の補足)
   -------------------------------------------------------------------------- */

.dx-note {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    background:
        linear-gradient(135deg, var(--dx-accent-soft), transparent 70%),
        var(--dx-card-bg);
    border: 1px solid var(--dx-accent-line);
    border-radius: 1.25rem;
}

.dx-note h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dx-fg);
    margin: 0 0 0.75rem;
}

.dx-note p {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--dx-fg);
    margin: 0 0 0.75rem;
}

.dx-note p:last-child {
    margin-bottom: 0;
}

/* Lists inherit the browser default size, which reads a step larger than
   the surrounding paragraphs, and the `mt-2` on the following paragraph
   loses to `.dx-note p`. Match the paragraph type and carry the gap on
   the list itself. */
.dx-note ul {
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--dx-fg);
    list-style: disc;
}

.dx-note ul li {
    margin: 0;
}

.dx-note a {
    color: var(--dx-accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   CTA Buttons
   -------------------------------------------------------------------------- */

.dx-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.dx-cta-row--center {
    justify-content: center;
    margin-top: 2.5rem;
}

.dx-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dx-fg);
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 0.625rem;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.dx-btn:hover {
    transform: translateY(-1px);
    border-color: var(--dx-accent-line);
    background: var(--dx-bg-soft);
}

.dx-btn--primary {
    color: #ffffff;
    background: var(--dx-accent);
    border-color: var(--dx-accent);
}

.dx-btn--primary:hover {
    background: color-mix(in srgb, var(--dx-accent) 88%, #000);
    border-color: color-mix(in srgb, var(--dx-accent) 88%, #000);
}

.dx-btn--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.dx-btn__badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.0625rem 0.5rem;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #b45309;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 999px;
}

.dark .dx-btn__badge {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.35);
}

/* --------------------------------------------------------------------------
   FAQ
   button + grid 0fr↔1fr による滑らかな開閉アニメーション
   -------------------------------------------------------------------------- */

.dx-faq {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dx-faq__item {
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: border-color 220ms ease, box-shadow 220ms ease;
}

.dx-faq__item:has(.dx-faq__summary[aria-expanded="true"]) {
    border-color: var(--dx-accent-line);
    box-shadow: 0 4px 16px rgba(77, 130, 238, 0.06);
}

/* サマリ ── ボタン化(details/summary 由来のスタイルをリセット) */

.dx-faq__summary {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    margin: 0;
    padding: 1.125rem 1.5rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: background-color 160ms ease;
}

.dx-faq__summary:hover {
    background: var(--dx-bg-soft);
}

.dx-faq__summary:focus-visible {
    outline: 2px solid var(--dx-accent);
    outline-offset: -2px;
}

.dx-faq__q-num {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dx-accent);
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.dx-faq__q-text {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--dx-fg);
    letter-spacing: -0.005em;
}

/* トグルアイコン ── plus と minus を重ねてフェード+回転で切り替え */

.dx-faq__toggle {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dx-accent);
    background: var(--dx-accent-soft);
    border-radius: 999px;
    transition: background-color 200ms ease;
}

.dx-faq__summary:hover .dx-faq__toggle {
    background: color-mix(in srgb, var(--dx-accent-soft) 70%, var(--dx-accent) 15%);
}

.dx-faq__icon {
    position: absolute;
    width: 1rem;
    height: 1rem;
    transition: opacity 220ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dx-faq__icon--minus {
    opacity: 0;
    transform: rotate(-90deg);
}

.dx-faq__summary[aria-expanded="true"] .dx-faq__icon--plus {
    opacity: 0;
    transform: rotate(90deg);
}

.dx-faq__summary[aria-expanded="true"] .dx-faq__icon--minus {
    opacity: 1;
    transform: rotate(0deg);
}

/* ボディ ── grid 0fr ↔ 1fr で height:auto を滑らかに遷移 */

.dx-faq__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dx-faq__summary[aria-expanded="true"] + .dx-faq__body {
    grid-template-rows: 1fr;
}

.dx-faq__body-inner {
    overflow: hidden;
    min-height: 0;
}

.dx-faq__body-inner > p:first-child {
    margin-top: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dx-border);
}

.dx-faq__body-inner p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.dx-faq__body-inner > p:last-child {
    margin-bottom: 0;
    padding-bottom: 1.5rem;
}

.dx-faq__body-inner strong {
    color: var(--dx-fg);
    font-weight: 700;
}

.dx-faq__body-inner ul {
    list-style: disc;
    margin: 0 0 1rem;
    padding-left: 3rem;
    padding-right: 1.5rem;
}

.dx-faq__body-inner > ul:last-child {
    margin-bottom: 0;
    padding-bottom: 1.5rem;
}

.dx-faq__body-inner li {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin-bottom: 0.25rem;
}

.dx-faq__body-inner li:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dx-faq__body,
    .dx-faq__icon,
    .dx-faq__toggle {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   セクション説明用プレースホルダー画像
   実画像が用意できたら img の src を差し替え/外部ファイル化する想定
   -------------------------------------------------------------------------- */

.dx-placeholder {
    margin: 2.5rem auto;
    border-radius: 0.875rem;
    overflow: hidden;
    background: var(--dx-bg-soft);
    border: 1px solid var(--dx-border);
    line-height: 0;
}

.dx-placeholder img {
    display: block;
    width: 100%;
    height: auto;
}

.dx-placeholder--full { max-width: 100%; }
.dx-placeholder--lg   { max-width: 720px; }
.dx-placeholder--md   { max-width: 560px; }
.dx-placeholder--sm   { max-width: 420px; }
.dx-placeholder--xs   { max-width: 340px; }

/* --------------------------------------------------------------------------
   Reveal アニメーション
   -------------------------------------------------------------------------- */

[data-dx-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms ease, transform 600ms ease;
}

[data-dx-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-dx-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .dx-card,
    .dx-pillar,
    .dx-btn {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   ページプラグインのテンプレートオーバーライド
   ブランドフロントページと同じ背景に揃えるため、テンプレートの白カード
   ラッパーを取り払い、上下と内側のパディングを縮める。
   -------------------------------------------------------------------------- */

/* Container 周りのパディング (テンプレ既定: pt-40 pb-24 px-6 sm:px-8 lg:px-12)
   pt は固定ヘッダー (h-14 = 56px) と重ならない値を確保する。 */
.dixlase-page > .container {
    padding-top: 5rem;
    padding-bottom: 2.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* 管理バー (#admin-bar, h-12 = 48px) 表示時はその分さらに下げる */
body:has(#admin-bar) .dixlase-page > .container {
    padding-top: 5rem;
}

@media (min-width: 768px) {
    .dixlase-page > .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Article ラッパーの白背景・影・角丸を取り払う */
.dixlase-page article.bg-white,
/* CMS が出力する外側のラッパー <article>(クラス無し)のみ無効化する。
   :not([class]) を付けないと、入れ子のカード .dx-card / .dx-pillar /
   .dx-audience / .dx-phil-row / .dx-pillar-freedom / .dx-license__card など
   (すべて <article>)にも !important が効いて、背景・影・角丸が消えてしまう。 */
/* CMS が出力する外側のラッパー <article> だけを無効化する。
   ラッパーは .dixlase-page > div(.container) > article の直下経路にあり、クラスを
   持たない。子孫セレクタ + :not([class]) だけだと、ライセンスの
   .dx-license__plugin-points 内のクラス無し <article> まで巻き込んで背景・角丸を
   消してしまうため、直下経路に限定してラッパーのみを対象にする。 */
.dixlase-page > div > article:not([class]) {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* ヘッダー (ページタイトル) の余白を縮める */
.dixlase-page article > header {
    padding: 0 0 1.25rem !important;
    border-bottom: none !important;
}

.dixlase-page article > header h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-align: center;
}

/* コンテンツ本体の左右パディングを除去 (中身の dx-section が独自に余白を持つため) */
.dixlase-page article > div {
    padding: 0 !important;
}

/* prose ラッパーが幅を絞らないようにする */
.dixlase-page article > div > .prose {
    max-width: none;
}

/* ==========================================================================
   思想ページ — 新レイアウト追加スタイル(主な機能 / 設計思想 / 価値の柱 /
   対象ユーザー / ライセンス)。既存トークン(--dx-*)を流用。
   ========================================================================== */

:root { --dx-page-bg: #ffffff; }
.dark  { --dx-page-bg: #08080c; }

/* 汎用: スクリーンショット / 図解の枠 ------------------------------------- */
.dx-shot {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--dx-border);
    background: var(--dx-card-bg);
    box-shadow: var(--dx-card-shadow);
}

.dx-shot__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--dx-border);
    background: var(--dx-bg-soft);
    flex-shrink: 0;
}

.dx-shot__bar i {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--dx-border);
}

.dx-shot__url {
    margin-left: 0.45rem;
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
    font-size: 0.7rem;
    color: var(--dx-fg-muted);
}

.dx-shot__body {
    position: relative;
    flex: 1;
    min-height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: repeating-linear-gradient(45deg, var(--dx-accent-soft) 0 14px, transparent 14px 28px);
}

.dx-shot__body img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dx-shot--plain {
    border: 1.5px dashed var(--dx-accent-line);
    background: transparent;
    box-shadow: none;
}

/* 01 主な機能 — 3×3グリッド(中央=画像、周囲8カード) ---------------------- */
.dx-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .dx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .dx-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dx-feature-grid__media {
        grid-column: 2;
        grid-row: 2;
    }
}

.dx-feature-grid__media { display: flex; }
.dx-feature-grid__media .dx-shot__body { min-height: 200px; }

/* カードのアイコンを中央揃え、番号は省略、見出しは中央揃え */
.dx-feature-grid .dx-card__icon {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.dx-feature-grid .dx-card__num { display: none; }
.dx-feature-grid .dx-card__title { text-align: center; }

/* 02 設計思想 — 左右交互(zigzag) ----------------------------------------- */
.dx-philosophy--zigzag {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dx-phil-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.75rem;
    background: var(--dx-bg-soft);
    border: 1px solid var(--dx-border);
    border-radius: 1.25rem;
}

@media (min-width: 768px) {
    .dx-phil-row {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        padding: 2.25rem 2.5rem;
    }
    .dx-phil-row:nth-child(even) .dx-phil-row__media { order: 2; }
}

.dx-phil-row__media { display: flex; }

/* Pin the shot frame to the illustration's own 900×620 aspect
   (1.452:1) so both mobile and PC render the image at its native
   proportions with no letterbox. All four philosophy row images
   ship at exactly 900×620 (see storage/app/public/media/*.png),
   so a single aspect-ratio value covers the whole section.

   `min-height: 0` explicitly overrides the generic
   `.dx-shot__body { min-height: 170px }` further up — without it,
   narrow viewports would fall back to the 170px minimum and
   reintroduce the vertical letterbox we're trying to remove.

   Side benefit on PC: the previous `min-height: 200px` capped the
   frame at 200px tall regardless of column width (~400px on a
   2-col row → aspect 2.0, well wider than the image's 1.452 →
   visible vertical letterbox). Removing that cap and using
   aspect-ratio lets the frame grow to ~275px tall on a typical
   PC column, making the illustration comfortably readable. */
.dx-phil-row__media .dx-shot__body {
    aspect-ratio: 900 / 620;
    min-height: 0;
}

/* Kept from the previous pass: even though the aspect now matches
   the image exactly, `contain` is the safer object-fit — if any
   future row swaps in an image with a slightly different aspect,
   contain avoids cropping. Cover would still work identically
   for the current 900×620 set. */
.dx-phil-row__media .dx-shot__body img { object-fit: contain; }

.dx-phil-row__num {
    display: none;
}

.dx-phil-row__body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--dx-fg);
    margin: 0 0 0.85rem;
    letter-spacing: -0.005em;
}

.dx-phil-row__body p {
    font-size: 0.9375rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 0.85rem;
}

.dx-phil-row__body p:last-child { margin-bottom: 0; }

.dx-phil-row__body strong { color: var(--dx-fg); font-weight: 700; }

/* 03 価値の柱 — 五角形配置 + 中央画像 → 自由 ------------------------------ */
.dx-pentagon {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "p1" "p2" "p3" "p4" "p5" "im";
    gap: 1.25rem;
}

/* Phones: centre the icon and heading of each pillar (body copy stays
   left-aligned for reading). Desktop already centres the icon via the
   .dx-pentagon rule below. */
@media (max-width: 767px) {
    .dx-pentagon .dx-pillar__mark { margin-left: auto; margin-right: auto; }
    .dx-pentagon .dx-pillar h3 { text-align: center; }
}

@media (min-width: 768px) {
    .dx-pentagon {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            ".  .  p1 p1 .  ."
            "p2 p2 im im p3 p3"
            ".  p4 p4 p5 p5 .";
        align-items: stretch;
    }
    .dx-pentagon .dx-pillar__mark { margin-left: auto; margin-right: auto; }
    /* 見出しを中央揃え(アイコン中央化に合わせる) */
    .dx-pentagon .dx-pillar h3 { text-align: center; }
}

.dx-pentagon .dx-pillar { width: auto; }
.dx-pentagon .dx-pillar:nth-child(1) { grid-area: p1; }
.dx-pentagon .dx-pillar:nth-child(2) { grid-area: p2; }
.dx-pentagon .dx-pillar:nth-child(3) { grid-area: p3; }
.dx-pentagon .dx-pillar:nth-child(4) { grid-area: p4; }
.dx-pentagon .dx-pillar:nth-child(5) { grid-area: p5; }

.dx-pentagon__media {
    grid-area: im;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.dx-pentagon__media .dx-shot {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
}
.dx-pentagon__media .dx-shot__body { min-height: 0; height: 100%; }

.dx-pentagon-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.5rem 0 0;
}

.dx-pentagon-arrow__line {
    width: 2px;
    height: 2.25rem;
    background: var(--dx-accent);
    opacity: 0.55;
}

.dx-pentagon-arrow__head {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--dx-accent);
    opacity: 0.7;
}

.dx-pentagon + .dx-pentagon-arrow + .dx-pillar-freedom { margin-top: 0.5rem; }

/* 04 対象ユーザー — 背景の帯 + カード ------------------------------------- */
.dx-audience-band {
    position: relative;
    margin-top: 0;
    padding: 2rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid var(--dx-border);
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--dx-accent-soft), transparent 55%),
        repeating-linear-gradient(45deg, var(--dx-bg-soft) 0 18px, transparent 18px 36px),
        var(--dx-card-bg);
}

@media (min-width: 768px) {
    .dx-audience-band { padding: 2.5rem 2.25rem; }
}

.dx-audience-band > .dx-grid-2 {
    position: relative;
    z-index: 1;
}

.dx-audience-band__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    z-index: 0;
}

/* 05 ライセンス — ウィンドウ枠の判断フロー図 ------------------------------ */
.dx-flow__canvas {
    position: relative;
    overflow: hidden;
    background: repeating-linear-gradient(45deg, var(--dx-accent-soft) 0 14px, transparent 14px 28px);
    min-height: 240px;
}

.dx-flow__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dx-flow__canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--dx-page-bg) 52%, transparent);
    pointer-events: none;
}

.dx-flow__bg-label {
    position: absolute;
    right: 0.75rem;
    bottom: 0.6rem;
    z-index: 2;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dx-fg-muted);
    opacity: 0.7;
}

.dx-flow__inner {
    position: relative;
    z-index: 1;
    padding: 2.25rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 1.75rem;
}

@media (max-width: 639px) {
    .dx-flow__inner { flex-direction: column; }
    .dx-flow__arrow { transform: rotate(90deg); }
}

.dx-flow__q {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem 1.25rem;
    max-width: 12rem;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-accent-line);
    border-radius: 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--dx-fg);
}

.dx-flow__arrow {
    color: var(--dx-accent);
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.dx-flow__out {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dx-flow__opt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.dx-flow__cond {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--dx-fg-muted);
    /* 幅を固定して、後続の矢印・ノード(AGPL/商用)の左ツラを揃える */
    width: 9rem;
}

.dx-flow__node {
    padding: 0.7rem 1.1rem;
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    border: 1px solid var(--dx-border);
    background: var(--dx-card-bg);
    color: var(--dx-fg);
    white-space: nowrap;
}

.dx-flow__node--commercial {
    border: 1px dashed var(--dx-accent-line);
    color: var(--dx-accent);
    background: var(--dx-accent-soft);
}

.dx-flow__node small {
    display: block;
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--dx-fg-muted);
    margin-top: 0.15rem;
}

/* 汎用ボックス(商標・謝辞・注記)の角丸を 1.25rem に統一(Tailwind の rounded-* を上書き) */
#trademark .rounded-xl,
#acknowledgments .rounded-xl,
#acknowledgments .rounded-lg,
.dx-roadmap__note {
    border-radius: 1.25rem;
}

/* アクセントのテキストリンク(Tailwind の text-blue-600 / dark:text-blue-400)を
   テーマアクセント色(--dx-accent)に統一し、ライト/ダークで同色にする。 */
.dixlase-page a.text-blue-600,
.dixlase-page a.text-blue-400 {
    color: var(--dx-accent);
}

/* セクションごとの最大幅(ラージ画面)。
   主な機能(#features)・価値の柱(#values)は全幅(約1488px)のまま据え置き。
   それ以外は内容だけを中央寄せで狭める。<section> 自体は全幅のままなので、
   セクション間の区切り線(.dx-section + .dx-section)は全幅を維持する。 */
#philosophy > *,
#audience > * {
    max-width: 75rem;   /* 約1200px: 2カラム/帯向け */
    margin-left: auto;
    margin-right: auto;
}

#license > *,
#developers > *,
#roadmap > *,
#faq > * {
    max-width: 60rem;   /* 約960px: 行長を抑えた読み物/フロー向け */
    margin-left: auto;
    margin-right: auto;
}

/* Laravel 帯は自己完結したボックスなので、帯ごと中央寄せで 960px に。 */
#laravel {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

/* ライト/ダークでモック画像を出し分ける。テーマは Tailwind と同じく <html> の
   .dark クラス有無で判定する(ダーク時のみ .dark が付く。.light は Alpine の
   初期化タイミング次第で付かないことがあるため基準にしない)。
   既定(ライト)はライト画像、html.dark のときダーク画像に切り替える。 */
img.is-dark { display: none; }
html.dark img.is-light { display: none; }
html.dark img.is-dark  { display: block; }

/* 謝辞(acknowledgments)の各ボックスの角丸。Tailwind の .rounded-xl/.rounded-lg は
   border-radius: var(--radius-xl) を使うが、この変数がページ文脈で未定義のため角丸が
   効かない(四角になる)。リテラル値で明示的に上書きして角丸にする。背景・枠線は
   Tailwind のクラス指定をそのまま活かす。 */
#acknowledgments article,
#trademark article {
    border-radius: 1.25rem !important;
}

/* 商標セクションの説明ボックスを、開発者向けカード(.dx-card--quiet)と同じ配色に
   揃える。Tailwind の bg-white / dark:bg-gray-800 と枠線色を、デザイントークンで
   上書きする(角丸は上のルールで !important 指定済み)。 */
#trademark article {
    background: var(--dx-bg-soft);
    border-color: var(--dx-border);
    box-shadow: none;
}

/* 対象ユーザーのカードは帯の背景画像の上に乗る。ダークはトークンが半透明
   (rgba(255,255,255,0.04))なので画像が透けるが、ライトは不透明な白(#fff)で
   画像を隠してしまう。ライト時のみ半透明の白に上書きし、ダーク同様に背景画像を
   透けさせる(.dark は付くが .light は付かない場合があるため :not(.dark) で判定)。 */
html:not(.dark) .dx-audience {
    background: rgba(255, 255, 255, 0.6);
}

/* ロードマップ・謝辞の注記ボックス。Tailwind の bg-gray-100 / dark:bg-gray-800
   (不透明なグレー)はフラットで重いため、他セクション(カード/ライセンス等)と同じ
   半透明トークン背景に上書きし、透明感のあるダークな見た目に揃える。注記なので
   控えめな --dx-bg-soft を使う(ダークでは rgba(255,255,255,0.03) の半透明)。 */
.dx-roadmap__note,
#acknowledgments p.rounded-xl {
    background: var(--dx-bg-soft) !important;
    border-color: var(--dx-border) !important;
}

/* 商標セクションのブランドマーク。
   ★サイズ調整はこの height だけでOK(下限=スマホ / 上限=デスクトップ)。
   SVG は fill="currentColor" なので、color(--dx-fg)でライト/ダークに追従する
   (黒1点のアセットのまま。白版は不要)。 */
.dx-trademark-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(4.5rem, 12rem, 16rem);   /* 72px → 112px */
    margin: 0 auto 2rem;
    color: var(--dx-fg);
}

.dx-trademark-logo svg {
    height: 100%;
    width: auto;
    max-width: 100%;
}

/* ™ next to the mark (2026-09-23). The application is filed and under
   examination, so ™ is the correct symbol — ® may only be used once the
   registration is granted. Kept as its own element (never baked into the
   SVG) so the swap to ® is a one-character edit here. */
.dx-trademark-logo__tm {
    align-self: flex-start;
    margin-top: 0.75rem;
    margin-left: 0.4rem;
    font-size: clamp(0.95rem, 2vw, 1.35rem);
    font-weight: 500;
    line-height: 1;
    color: var(--dx-fg-muted);
}

/* ============================================================
   新規セクション: 3層防御・比較表・入口一覧・audience 2段構成
   Added 2026-08-04 — brand-site improvement pass
   ============================================================ */

/* audience-band: z-index positioning for both legacy dx-grid-2 and new
   Tailwind grid + also-fits pill. Keep the legacy selector working. */
.dx-audience-band > .dx-grid-2,
.dx-audience-band > .grid,
.dx-audience-band > .dx-audience__also {
    position: relative;
    z-index: 1;
}

/* 3-layer defense diagram + comparison table */
.dx-defense {
    max-width: 60rem;
    margin: 0 auto;
}

.dx-defense table {
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.dx-defense__compare {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

.dx-defense__compare table {
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Give both tables breathing room from the rounded border on the edges.
   Cells default to padding-inline that pins text to the border; add left
   padding on the first column, right padding on the last column, and
   extra top/bottom padding on the outermost rows. */
.dx-defense table th:first-child,
.dx-defense table td:first-child,
.dx-defense__compare table th:first-child,
.dx-defense__compare table td:first-child {
    padding-left: 1.25rem;
}

.dx-defense table th:last-child,
.dx-defense table td:last-child,
.dx-defense__compare table th:last-child,
.dx-defense__compare table td:last-child {
    padding-right: 1.25rem;
}

.dx-defense table thead th,
.dx-defense__compare table thead th {
    padding-top: 1rem;
}

.dx-defense table tbody tr:last-child td,
.dx-defense__compare table tbody tr:last-child td {
    padding-bottom: 1rem;
}

/* Contribution entry table */
.dx-contrib-entries {
    margin-bottom: 1.25rem;
}

.dx-contrib-entries table {
    background: var(--dx-card-bg);
    border-radius: 0.5rem;
    overflow: hidden;
}

/* The cells only carry `py-2 pr-4`, which pins the first column to the
   table's left edge. Pad every cell and give the outer columns the same
   1.25rem inset the defence tables use. */
.dx-contrib-entries th,
.dx-contrib-entries td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.dx-contrib-entries th:first-child,
.dx-contrib-entries td:first-child {
    padding-left: 1.25rem;
}

.dx-contrib-entries th:last-child,
.dx-contrib-entries td:last-child {
    padding-right: 1.25rem;
}

/* Status pills for contribution table */
.dx-status-open {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-family: var(--dx-font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #047857;
    background: color-mix(in srgb, #10b981 12%, transparent);
    border: 1px solid color-mix(in srgb, #10b981 32%, transparent);
    border-radius: 999px;
    white-space: nowrap;
}
.dark .dx-status-open {
    color: #6ee7b7;
    background: color-mix(in srgb, #10b981 18%, transparent);
    border-color: color-mix(in srgb, #10b981 38%, transparent);
}

.dx-status-soon {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-family: var(--dx-font-mono, ui-monospace, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 14%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 34%, transparent);
    border-radius: 999px;
    white-space: nowrap;
}
.dark .dx-status-soon {
    color: #fcd34d;
    background: color-mix(in srgb, #f59e0b 20%, transparent);
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
}

/* ==========================================================================
   3層で守る — 入口 / 中身 / 実行 のゲート通過フロー図
   Added 2026-08-05 — brand-site delivery (dx-new-layouts.css より)
   表の「直前」に置く。3ゲートの色は表の3行と対応させる。
   文字はテキストのままなので多言語化・選択が可能。
   ========================================================================== */
.dx-layers {
    --dx-l1: #4D82EE;
    --dx-l2: #3FB8A6;
    --dx-l3: #8B6FE8;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 2rem;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--dx-border);
    border-radius: 1rem;
    background: var(--dx-bg-soft);
}

@media (min-width: 768px) {
    .dx-layers {
        flex-wrap: nowrap;
        gap: 0.35rem;
        padding: 2rem 1.75rem;
    }
}

.dx-layers__gate {
    flex: 1 1 15rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1.35rem 1rem 1.25rem;
    border-radius: 0.875rem;
    border: 1.5px solid color-mix(in srgb, var(--dx-gate) 45%, transparent);
    background: color-mix(in srgb, var(--dx-gate) 8%, transparent);
}

.dx-layers__gate:nth-child(1) { --dx-gate: var(--dx-l1); }
.dx-layers__gate:nth-child(3) { --dx-gate: var(--dx-l2); }
.dx-layers__gate:nth-child(5) { --dx-gate: var(--dx-l3); }

.dx-layers__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--dx-gate) 70%, transparent);
    background: color-mix(in srgb, var(--dx-gate) 14%, transparent);
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dx-gate);
}

.dx-layers__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--dx-gate);
}

.dx-layers__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dx-fg);
    margin: 0;
    line-height: 1.3;
}

.dx-layers__what {
    font-size: 0.82rem;
    color: var(--dx-fg-muted);
    margin: 0;
    line-height: 1.6;
}

/* Per-gate implementation list — the items that used to live in the
   defense table (2026-08-07). Moved into each card so "layer + what
   it protects + how it's implemented" reads in a single glance,
   instead of forcing the reader to cross-reference a table below.
   The first <li> is emphasised with <strong> to preserve the "flagship
   feature per layer" signal the table conveyed with bold text. */
.dx-layers__impl {
    list-style: none;
    padding: 0.85rem 0 0;
    margin: 0.25rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--dx-gate) 25%, transparent);
    font-size: 0.82rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    width: 100%;
}

.dx-layers__impl li {
    margin: 0;
}

/* <strong> keeps its bold weight (default browser style) as the sole
   flagship-item cue; color intentionally inherits from the muted list
   text so the flagship reads as "same voice, slightly emphasised"
   rather than painted in the gate accent color. */

.dx-layers__arrow {
    align-self: center;
    flex: 0 0 auto;
    color: var(--dx-fg-muted);
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.6;
}

/* Phones: one gate per row, full width, with the arrow on its own
   row between them. Left in the flex flow the arrow shared a row
   with the gate before it, so that gate came out narrower than its
   neighbours (2026-09-16). */
@media (max-width: 767px) {
    .dx-layers {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .dx-layers__gate {
        flex: 0 0 auto;
        width: 100%;
    }
    .dx-layers__arrow {
        align-self: center;
        transform: rotate(90deg);
    }
}

/* ==========================================================================
   こんな方に — 3ボックスのアイコン
   Added 2026-08-05 — brand-site delivery
   各カードの <h3> の直前に <svg class="dx-audience__icon"> を挿入
   ========================================================================== */
.dx-audience__icon {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 auto 0.75rem;
    color: var(--dx-accent);
}

/* Center-align the tag + icon + h3 identity area; keep body paragraph left */
.dx-audience__tag,
.dx-audience > h3 {
    text-align: center;
}

/* ==========================================================================
   Evidence bar — pitch と receipts を並置する小型ピル群
   Added 2026-08-07 — brand-site delivery (C-2)
   Placement:
     - front hero 直下(core/front/script.js が JS で inject。CSS は
       core/front/style.css に同型を配置。theme は一切 fork していない)
     - philosophy Manifest 直下(このファイル)
   Pill 内容(7 個 / 順序固定):
     Row 1(ライセンス系): v0.1.0 / AGPL-3.0 / 商用ライセンス(準備中)
     Row 2(技術・受け皿系): PHP 8.2+ / Built on Laravel / Packagist / SECURITY.md
   flex-wrap 任せだと JA / EN でラベル長が違って崩れやすいので、
   意味的に分けて 2 行に固定している。商用ピルは --soon 変種
   (dim + 非リンク。初期リリースでは商用ライセンスは未提供のため)。
   モノスペースかつ小さめ、色は --dx-accent の低彩度版に揃え、
   受け皿(receipts)として一段引いた見え方にしている。
   ========================================================================== */
.dx-evidence-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.dx-evidence-bar__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.dx-evidence-bar__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.75rem;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--dx-accent);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--dx-accent) 32%, transparent);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

a.dx-evidence-bar__pill:hover {
    border-color: color-mix(in srgb, var(--dx-accent) 60%, transparent);
    background: color-mix(in srgb, var(--dx-accent) 6%, transparent);
}

/* Non-clickable variant: used for the commercial-license pill until the
   commercial license is actually available. Deliberately reads as "info,
   not link" — no hover reaction, muted color, softer border. */
.dx-evidence-bar__pill--soon {
    color: var(--dx-fg-muted);
    border-color: var(--dx-border);
    cursor: default;
}

/* ==========================================================================
   Security Manifest — 標準装備しているセキュリティ機能
   Added 2026-08-07 — brand-site delivery (Claude-designed chip+accordion)
   チップで 16 項目の機能名を一望させ、カテゴリ見出しをクリックすると
   その群の「標準装備にした理由」パネルが開閉する。JS 無効時は理由が
   開いた状態で全文読める(philosophy.js が閉じ状態に初期化する)。
   ========================================================================== */

/* Wrapper — 60rem に絞って本文と揃える(旧 .dx-defense__compare の
   max-width を引き継ぐ)。中央寄せは margin auto。
   text-align: center を base に置き、theme block(chips / toggle / count
   の内容 / 上下の title・lede・note)がすべて中央揃えになるようにする。
   理由パネル本文だけは .dx-manifest__why 側で text-align: left に戻す。
   外枠は 3層防御セクション(.dx-layers)と同じトリートメント
   (--dx-bg-soft 背景 + border + border-radius)を採用し、
   両セクションで視覚的なリズムを揃える。 */
.dx-manifest {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px solid var(--dx-border);
    border-radius: 1rem;
    background: var(--dx-bg-soft);
}

@media (min-width: 768px) {
    .dx-manifest {
        padding: 2.5rem 2.25rem;
    }
}

.dx-manifest__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dx-fg);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.dx-manifest__lede {
    font-size: 0.875rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0 0 1.25rem;
}

.dx-manifest__lede strong { color: var(--dx-fg); font-weight: 700; }

/* 「16 項目が、追加設定なしで有効」— 量のインパクトを先に伝える。
   justify-content: center でバナー内の 16 + 説明を横方向 center に。 */
.dx-manifest__count {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--dx-accent-line);
    border-radius: 0.625rem;
    background: var(--dx-accent-soft);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--dx-fg);
}

.dx-manifest__count-num {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    color: var(--dx-accent);
}

.dx-manifest__groups {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* Group container: centers the category label and chips list.
   text-align: center handles the block .dx-manifest__cat p (which is
   100% wide, so this centers the text inside); .dx-manifest__chips
   sets its own justify-content: center; .dx-manifest__why resets to
   left so the rationale text reads left. */
.dx-manifest__group {
    text-align: center;
}

/* カテゴリ見出し = 小さなラベル。2026-08-09 に開閉ボタンを撤廃し、
   純粋なラベル(<p>)に降格。開閉はチップ側のクリックで駆動する
   (各チップが同カテゴリ共有の理由パネルの表示内容を切り替える)。 */
.dx-manifest__cat {
    display: block;
    margin: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dx-accent);
}

/* 機能名チップ — ここが主役。常時表示。
   justify-content: center で親グループの中央揃えに合わせる。
   2026-08-09: 小さすぎたため font-size / padding / gap / dot を
   一段大きくして、外枠ボックス内の余白とバランスを取る。 */
.dx-manifest__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin: 0.75rem 0 0;
    padding: 0;
}

.dx-manifest__chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--dx-accent-line);
    border-radius: 999px;
    background: var(--dx-accent-soft);
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--dx-fg);
}

.dx-manifest__chips li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: var(--dx-accent);
    flex-shrink: 0;
}

/* Chip interactivity — click / keyboard-toggle a chip to show or
   hide its rationale in the shared per-category panel below.
   Cursor + hover cue the chip as clickable; .is-active reads as
   "currently opened in the panel" via a stronger fill and border. */
.dx-manifest__chips li {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dx-manifest__chips li:hover {
    border-color: color-mix(in srgb, var(--dx-accent) 60%, transparent);
    background: color-mix(in srgb, var(--dx-accent) 14%, transparent);
}

.dx-manifest__chips li.is-active {
    border-color: var(--dx-accent);
    background: color-mix(in srgb, var(--dx-accent) 24%, transparent);
    color: var(--dx-fg);
}

.dx-manifest__chips li:focus-visible {
    outline: 2px solid var(--dx-accent);
    outline-offset: 2px;
}

/* Per-item visibility inside the shared panel. The chip-driven JS
   sets `hidden` on all but the selected item, so only one item's
   rationale shows at a time. Needed as an explicit override because
   the panel is `display: flex` — the browser's [hidden] rule would
   otherwise lose to `.dx-manifest__why { display: flex }` on
   specificity. */
.dx-manifest__item[hidden] {
    display: none;
}

/* 理由パネル(開閉対象)。
   デフォルト = 開いた状態(JS 無効時のフォールバック)。
   JS が有効な環境では philosophy.js が init 時に .is-closed を付けて
   閉じる状態から始める。クリックで .is-closed のトグル。
   アニメーションは max-height + opacity + margin-top + padding + border-width
   の複合遷移。max-height は「実コンテンツより十分大きい」値(60rem)を
   採用しているので、開閉のイージングがコンテンツ量にほぼ依存しない。
   text-align を left に戻して、親 .dx-manifest__group の
   text-align: center が理由本文まで及ばないようにする。 */
.dx-manifest__why {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--dx-border);
    border-radius: 0.625rem;
    /* 外枠 .dx-manifest が --dx-bg-soft のため、panel は --dx-card-bg で
       コントラストを取り「開いたとき一段浮かび上がる」見え方にする */
    background: var(--dx-card-bg);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    text-align: left;
    max-height: 60rem;
    opacity: 1;
    overflow: hidden;
    transition:
        max-height 380ms ease,
        opacity 220ms ease,
        margin-top 280ms ease,
        padding-top 280ms ease,
        padding-bottom 280ms ease,
        border-top-width 280ms ease,
        border-bottom-width 280ms ease;
}

.dx-manifest__why.is-closed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

/* reduced-motion 対応: 遷移を無効化して瞬間的な開閉に */
@media (prefers-reduced-motion: reduce) {
    .dx-manifest__why { transition: none; }
}

.dx-manifest__item {
    display: flex;
    gap: 0.7rem;
}

.dx-manifest__item::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--dx-accent) 50%, transparent);
}

.dx-manifest__item-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--dx-fg);
    margin: 0 0 0.25rem;
    line-height: 1.4;
}

.dx-manifest__item-why {
    font-size: 0.78125rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
    margin: 0;
}

.dx-manifest__note {
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--dx-fg-muted);
    margin: 1.25rem 0 0;
}

/* ==========================================================================
   Standards Alignment — 主要ガイドラインとの整合
   Added 2026-08-09 — Manifest 直後の新セクション。IPA / NIST / OWASP
   の推奨事項と Dixlase の標準実装を対応させる表を掲載。
   外枠は .dx-manifest / .dx-layers と同じトリートメント(--dx-bg-soft
   背景 + border + border-radius)で、3層防御 → Manifest → Standards
   の 3 連ボックスとして視覚を揃える。
   ========================================================================== */
.dx-standards {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1.5rem;
    border: 1px solid var(--dx-border);
    border-radius: 1rem;
    background: var(--dx-bg-soft);
}

@media (min-width: 768px) {
    .dx-standards {
        padding: 2.5rem 2.25rem;
    }
}

.dx-standards__table-wrap {
    /* overflow-x-auto (Tailwind) が横スクロールを担うので、Wrapper 側は
       角丸を継承しない。角丸は table 自身にかける。 */
    margin: 0;
}

.dx-standards__table {
    width: 100%;
    /* 2026-08-09: モバイル対策。table が容器幅に強制フィットすると
       日本語セルの内容(4 列 × 15 行)が文字単位で縦折り返しになって
       読めなくなるため、table 全体の最小幅を確保する。狭幅時は親側
       (.dx-standards__table-wrap の overflow-x: auto)が水平スクロール
       を提供する。52rem = およそ 832px、4 列各 13rem 相当で JP 折返しが
       単語単位に収まる目安。 */
    min-width: 52rem;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 0.75rem;
    border-collapse: separate;   /* border-radius を効かせるため */
    border-spacing: 0;
    overflow: hidden;            /* 角丸内側のはみ出しを抑える */
    font-size: 0.85rem;
    text-align: left;
}

.dx-standards__table thead th {
    padding: 0.85rem 1rem;
    background: var(--dx-bg-soft);
    color: var(--dx-fg);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--dx-border);
    white-space: nowrap;
}

.dx-standards__table tbody td {
    padding: 0.75rem 1rem;
    color: var(--dx-fg-muted);
    line-height: 1.6;
    border-bottom: 1px solid var(--dx-border);
    vertical-align: top;
}

.dx-standards__table tbody tr:last-child td {
    border-bottom: none;
}

/* 1 列目 = 対策内容 は主役なので太字 + 本文色 + 折り返し防止気味 */
.dx-standards__table tbody td:first-child {
    font-weight: 700;
    color: var(--dx-fg);
    min-width: 11rem;
}

/* Table footnote — 表内のセルに ※ マーカーを打った項目の補足説明。
   Callout ではなく地味な脚注として見せる (2026-08-09: 従来の
   border-left + accent 塗りの .dx-standards__caveat から降格)。
   複数個並ぶ場合、連続する脚注間は adjacent-sibling で spacing を
   詰めて 1 つの「注記ブロック」として読めるようにする。 */
.dx-standards__note {
    margin: 0.85rem 0 0;
    font-size: 0.75rem;
    line-height: 1.75;
    color: var(--dx-fg-muted);
    text-align: left;
}

.dx-standards__note + .dx-standards__note {
    margin-top: 0.35rem;
}

/* Notes accordion — 全 9 脚注をまとめて開閉できる 1 個の toggle。
   2026-08-10: 脚注が 5→9 に増えて縦に伸びすぎたため、デフォルト
   閉状態のアコーディオンに格納。ボタン「注釈 (9)」で開閉する。
   Progressive enhancement: HTML には .is-closed が付いていないため
   JS 無効時はパネルが開いた状態で全 9 脚注が読める。JS 有効時のみ
   init が .is-closed を付けて閉じ状態から始める。 */
.dx-standards__notes {
    margin: 0.85rem 0 0;
    text-align: left;
}

.dx-standards__notes-toggle {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.35rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--dx-fg-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: left;
    max-width: 100%;
}

.dx-standards__notes-label {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--dx-fg-muted) 45%, transparent);
    transition: text-decoration-color 0.15s ease;
}

.dx-standards__notes-toggle:hover .dx-standards__notes-label {
    text-decoration-color: var(--dx-fg-muted);
    color: var(--dx-fg);
}

.dx-standards__notes-count {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--dx-fg-muted);
    opacity: 0.7;
    margin-left: 0.15em;
    text-decoration: none;
}

/* Subtitle appended to the accordion button label — visible even when
   the accordion is closed. Purpose: signal that the panel contains
   scope-of-coverage and Dixlase-limits disclosures (i.e. "we're honest
   about what we don't do"), so a reader who never opens the accordion
   still comes away with that fact. 2026-08-11 addition. */
.dx-standards__notes-subtitle {
    font-size: 0.7rem;
    color: var(--dx-fg-muted);
    opacity: 0.75;
    line-height: 1.5;
    font-weight: 400;
}

.dx-standards__notes-subtitle::before {
    content: "— ";
    margin-right: 0.1em;
    opacity: 0.55;
}

.dx-standards__notes-toggle:hover .dx-standards__notes-subtitle {
    opacity: 0.95;
}

.dx-standards__notes-chev {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--dx-fg-muted);
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.dx-standards__notes-toggle[aria-expanded="true"] .dx-standards__notes-chev {
    transform: rotate(180deg);
}

.dx-standards__notes-body {
    max-height: 80rem;
    opacity: 1;
    overflow: hidden;
    margin-top: 0.6rem;
    transition:
        max-height 380ms ease,
        opacity 220ms ease,
        margin-top 220ms ease;
}

.dx-standards__notes-body.is-closed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

/* Reduced motion 対応 */
@media (prefers-reduced-motion: reduce) {
    .dx-standards__notes-body,
    .dx-standards__notes-chev {
        transition: none;
    }
}

/* accordion 内 note の 1 個目は margin-top 0 に (accordion body 側の
   margin-top で親から離す) */
.dx-standards__notes-body > .dx-standards__note:first-child {
    margin-top: 0;
}

/* 表内のセル末尾に付けるマーカー (※ / *) の見え方調整。sup で少し
   持ち上がるが、既定 sup の font-size 縮小に任せる。色は accent で
   気配だけ出す。 */
.dx-standards__mark {
    color: var(--dx-accent);
    font-weight: 700;
    margin-left: 0.15em;
}

/* Claim callout — Manifest の count バナーと同じ accent 塗り。
   「Dixlase はこれら 15 項目を標準実装しています」の一文。 */
.dx-standards__claim {
    margin: 1.5rem 0 0;
    padding: 0.9rem 1.1rem;
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--dx-fg);
    background: var(--dx-accent-soft);
    border: 1px solid var(--dx-accent-line);
    border-radius: 0.625rem;
}

.dx-standards__claim strong {
    color: var(--dx-accent);
    font-weight: 700;
}

/* 機関ごとに固めたブロック群 — 略称を知らない読者に「これは何の
   団体か・何を出しているか」を 1 目で伝えるため、機関名 + 概要 +
   その機関の参考ドキュメント を機関ごとにブロック化する。
   2026-08-09: 3 個の mini-card を単一の外枠にまとめ、機関間は
   仕切り線で区切る形に変更。従来はカードごとに border/bg が付いていた
   ため「入れ子の入れ子」感が出ていたが、1 box + 仕切り線構成にする
   ことでリストとしての一体感が出る。
   2026-08-10: notes と同じアコーディオンパターンで開閉可能に。
   .dx-standards__orgs 自体に既に overflow: hidden があるため、
   max-height + opacity + margin-top + border-width の複合遷移を
   直接適用する。トグルボタン (.dx-standards__orgs-toggle) が別に
   置かれ、aria-controls="dx-standards-orgs" で紐づく。 */
.dx-standards__orgs {
    margin: 0.6rem 0 0;
    background: var(--dx-card-bg);
    border: 1px solid var(--dx-border);
    border-radius: 0.5rem;
    overflow: hidden;
    text-align: left;
    max-height: 80rem;
    opacity: 1;
    transition:
        max-height 380ms ease,
        opacity 220ms ease,
        margin-top 220ms ease,
        border-top-width 220ms ease,
        border-bottom-width 220ms ease;
}

.dx-standards__orgs.is-closed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}

/* Orgs accordion toggle — notes accordion と同じ視覚パターン。
   共通スタイルは selector を組み合わせて DRY 化。 */
.dx-standards__orgs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.5rem;
    padding: 0.35rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--dx-fg-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.dx-standards__orgs-label {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--dx-fg-muted) 45%, transparent);
    transition: text-decoration-color 0.15s ease;
}

.dx-standards__orgs-toggle:hover .dx-standards__orgs-label {
    text-decoration-color: var(--dx-fg-muted);
    color: var(--dx-fg);
}

.dx-standards__orgs-count {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--dx-fg-muted);
    opacity: 0.7;
    margin-left: 0.15em;
    text-decoration: none;
}

.dx-standards__orgs-chev {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--dx-fg-muted);
    opacity: 0.75;
    transition: transform 0.2s ease;
}

.dx-standards__orgs-toggle[aria-expanded="true"] .dx-standards__orgs-chev {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .dx-standards__orgs,
    .dx-standards__orgs-chev {
        transition: none;
    }
}

.dx-standards__org {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--dx-border);
}

.dx-standards__org:last-child {
    border-bottom: none;
}

.dx-standards__org-name {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dx-fg);
    line-height: 1.4;
}

.dx-standards__org-name .dx-standards__org-full {
    display: inline;
    margin-left: 0.35rem;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--dx-fg-muted);
}

.dx-standards__org-desc {
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--dx-fg-muted);
}

.dx-standards__org-refs {
    margin: 0;
    font-size: 0.78125rem;
    line-height: 1.85;
    color: var(--dx-fg-muted);
}

.dx-standards__org-refs a {
    color: var(--dx-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.dx-standards__org-refs a:hover {
    text-decoration: none;
}