/*********************************************************
 * FC Jobs – 1カラム固定 / テーマ干渉に強い（CSS Nesting 版）
 *********************************************************/

.fcj-wrap {
    /* 変数 */
    isolation: isolate !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;

    --fcj-radius: .9rem;
    --fcj-radius-sm: .55rem;
    --fcj-radius-lg: .8rem;

    --fcj-primary: #0b64c3;
    --fcj-primary-600: #0a55a5;
    --fcj-primary-700: #093f7a;
    --fcj-accent: #1d4ed8;
    --fcj-accent-600: #1e40af;

    --fcj-bg: #f6f8fb;
    --fcj-surface: #ffffff;
    --fcj-border: #e4e7ee;
    --fcj-text: #0f172a;
    --fcj-muted: #64748b;

    --fcj-shadow: 0 8px 20px rgba(11, 100, 195, .10), 0 1px 3px rgba(0, 0, 0, .05);
    --fcj-focus-color: #60a5fa;

    --fcj-title-size: clamp(1.1rem, 1.6vw, 1.35rem);
    --fcj-meta-size: 1.3rem;
    --fcj-chip-size: 1.1rem;
    --fcj-salary-size: clamp(1.05rem, 2vw, 1.2rem);

    /* リセット（スコープ限定） */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }

    img {
        max-width: 100% !important;
        display: block !important;
    }

    p,
    h1,
    h2,
    h3,
    h4 {
        margin: 0 !important;
    }

    /* コンテナ */
    .fcj-root {
        display: block !important;
        max-width: 980px !important;
        margin: 0 auto !important;
        padding: .25rem !important;
    }

    /* ヘッダ */
    .fcj-header {
        display: flex !important;
        align-items: center !important;
        gap: .6rem !important;
        background: linear-gradient(135deg, var(--fcj-primary) 0%, var(--fcj-accent) 100%) !important;
        color: #fff !important;
        border-radius: var(--fcj-radius-lg) !important;
        padding: .7rem 1rem !important;
        margin: .3rem 0 1rem !important;
        box-shadow: 0 8px 24px rgba(11, 100, 195, .25) !important;

        .ttl {
            font-weight: 800 !important;
            letter-spacing: .3px !important;
            font-size: 1.2em !important;
        }
    }

    /* リスト（1カラム固定） */
    .fcj-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* カード（a全体がリンク） */
    .fcj-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        background: var(--fcj-surface) !important;
        color: var(--fcj-text) !important;
        border: 1px solid var(--fcj-border) !important;
        border-radius: var(--fcj-radius) !important;
        padding: 1.2rem !important;
        box-shadow: var(--fcj-shadow) !important;
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
        font-family: var(--body-font-family);

        &:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 14px 34px rgba(11, 100, 195, .18) !important;
            border-color: rgba(11, 100, 195, .35) !important;
        }

        &:focus-visible {
            outline: 2px solid var(--fcj-focus-color) !important;
            outline-offset: 2px !important;
        }

        .fcj-main {
            min-width: 0 !important;
            flex: 1 !important;
        }

        .fcj-title {
            font-size: 1.75rem !important;
            font-weight: 900 !important;
            line-height: 1.35 !important;
            color: var(--fcj-primary-700) !important;
            letter-spacing: .2px !important;
            border: 0 !important;
            padding: 0 !important;

            &:hover {
                text-decoration: underline !important;
                text-underline-offset: 2px !important;
            }
        }

        .fcj-meta {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: .6rem 1.2rem !important;
            margin-top: .55rem !important;
            color: var(--fcj-muted) !important;
            font-size: var(--fcj-meta-size) !important;

            .dot {
                width: .6rem !important;
                height: .6rem !important;
                border-radius: 50% !important;
                display: inline-block !important;
                background: #9ab6ff !important;
                margin-right: .35rem !important;
            }
        }

        .fcj-tags {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: .5rem !important;
            margin-top: .65rem !important;

            .fcj-tag {
                font-size: var(--fcj-chip-size) !important;
                font-weight: 700 !important;
                background: #eef4ff !important;
                color: #163c8a !important;
                border: 1px solid #cfe0ff !important;
                border-radius: 999px !important;
                padding: .34rem .72rem !important;
                line-height: 1 !important;
                white-space: nowrap !important;
                max-width: 100% !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }
        }

        /* 単価＋ボタン（同一行／折返し可） */
        .fcj-aside {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: .75rem 1rem !important;
            flex-wrap: wrap !important;
            width: 100% !important;
            margin-top: .25rem !important;

            .fcj-salary {
                display: inline-flex !important;
                align-items: center !important;
                min-height: 2.5rem !important;
                padding: .4rem .6rem !important;
                font-size: var(--fcj-salary-size) !important;
                font-weight: 900 !important;
                letter-spacing: .25px !important;
                color: #0b1220 !important;
                background: #f2f7ff !important;
                border: 1px solid #cfe0ff !important;
                border-radius: .5rem !important;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
            }

            .fcj-btn {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                background: linear-gradient(180deg, var(--fcj-accent) 0%, var(--fcj-accent-600) 100%) !important;
                color: #fff !important;
                border-radius: var(--fcj-radius-sm) !important;
                padding: .7rem 1.25rem !important;
                font-size: 0.9em !important;
                font-weight: 900 !important;
                letter-spacing: .2px !important;
                min-width: 9rem !important;
                text-align: center !important;
                line-height: 1 !important;

                &::after {
                    content: "  ›" !important;
                    transform: translateY(-1px) translateX(4px) !important;
                }
            }
        }
    }

    /* フッター */
    .fcj-footer {
        display: flex !important;
        justify-content: center !important;
        margin-top: 1.2rem !important;

        .fcj-more {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: linear-gradient(180deg, var(--fcj-primary) 0%, var(--fcj-primary-600) 100%) !important;
            color: #fff !important;
            font-weight: 900 !important;
            border-radius: .7rem !important;
            padding: .75rem 1.2rem !important;
            min-width: 10rem !important;
            box-shadow: 0 12px 28px rgba(11, 100, 195, .28) !important;

            &:hover {
                filter: brightness(1.05) !important;
                transform: translateY(-1px) !important;
            }

            &:focus-visible {
                outline: 2px solid var(--fcj-focus-color) !important;
                outline-offset: 2px !important;
            }
        }
    }

    /* 空・エラー */
    .fcj-empty,
    .fcj-error {
        padding: 1rem !important;
        background: #fff7ed !important;
        border: 1px solid #fed7aa !important;
        color: #9a3412 !important;
        border-radius: .7rem !important;
        font-size: 1rem !important;
    }

    /* ローディング */
    .fcj-loading {
        opacity: .75 !important;
    }

    /* a装飾の強制オフ */
    .fcj-card,
    .fcj-more,
    .fcj-btn,
    .fcj-title,
    .fcj-tag {
        text-decoration: none !important;
    }

    /* 印刷 */
    @media print {
        .fcj-card {
            box-shadow: none !important;
        }

        .fcj-btn,
        .fcj-more {
            display: none !important;
        }
    }

    /* ===================== サイドバー variant ===================== */
    .fcj-root.fcj--sidebar {
        max-width: 330px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;

        .fcj-header {
            padding: .55rem .75rem !important;
            margin-bottom: .6rem !important;
            border-radius: .6rem !important;
        }

        .fcj-list {
            display: block !important;
        }

        /* 安定の1カラム */

        .fcj-card {
            padding: .9rem !important;
            border-radius: .7rem !important;
            gap: .6rem !important;

            .fcj-title {
                font-size: 1.32rem !important;
                line-height: 1.35 !important;
                border: 0 !important;

                &::before,
                &::after {
                    background-color: transparent !important;
                }
            }

            .fcj-meta {
                font-size: .92rem !important;
                gap: .45rem .6rem !important;
            }

            .fcj-tags {
                gap: .35rem !important;
                margin-top: .45rem !important;

                .fcj-tag {
                    font-size: .78rem !important;
                    padding: .22rem .5rem !important;
                }
            }

            /* サイドバー：金額の下に幅いっぱいボタン */
            .fcj-aside {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: .6rem !important;
                margin-top: .5rem !important;

                .fcj-salary {
                    align-self: flex-start !important;
                    min-height: 2.2rem !important;
                    padding: .36rem .55rem !important;
                    margin-bottom: .2rem !important;
                }

                .fcj-btn {
                    display: block !important;
                    width: 100% !important;
                    /* フル幅 */
                    text-align: center !important;
                    padding: 1.1rem 1rem !important;
                    min-height: 2.4rem !important;
                    font-size: 0.8em !important;
                    border-radius: .6rem !important;
                }
            }
        }

        /* フッター compact */
        .fcj-footer {
            margin-top: .7rem !important;
        }

        .fcj-more {
            padding: .55rem .75rem !important;
            font-size: .95rem !important;
            min-width: 9rem !important;
        }
    }
}

/* ダークモード補助（必要最低限） */
/* @media (prefers-color-scheme: dark) {
    .fcj-wrap {
        --fcj-bg: #0c1220;
        --fcj-surface: #0f172a;
        --fcj-border: #22304b;
        --fcj-text: #e5e7eb;
        --fcj-muted: #9aa7bb;
        --fcj-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    }
} */