@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* layouts/app.blade.php 用（Vite 有効時は Blade 内のフォールバック style が出ないためここで定義） */
@layer base {
    body {
        font-family: var(--font-sans);
        font-size: 1rem;
        line-height: 1.5;
        color: #1b1b18;
        background-color: #f5f5f4;
        min-height: 100vh;
    }
}

@layer components {
    /* 管理画面コンテンツ幅（ヘッダーと揃える） */
    .l-container {
        max-width: 70rem;
        margin-inline: auto;
        padding-inline: 1rem;
        padding-block: 1.5rem;
    }

    .c-header {
        background-color: #fff;
        border-block-end: 1px solid #e5e5e5;
        padding-block: 1rem;
    }

    .c-header__inner {
        max-width: 70rem;
        margin-inline: auto;
        padding-inline: 1rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .c-header__title {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        flex-shrink: 0;
    }

    .c-header__nav {
        flex-shrink: 0;
    }

    .c-nav {
        display: flex;
        gap: 1rem;
        list-style: none;
    }

    .c-nav a {
        color: #1b1b18;
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        border: 1px solid transparent;
        box-sizing: border-box;
    }

    .c-nav a:hover {
        background-color: #f0f0ef;
    }

    .c-nav a.is-active {
        font-weight: 600;
        background-color: #e5e5e5;
    }

    /* ヘッダー内のプライマリ CTA（.c-nav a の文字色・ホバーを上書き） */
    .c-nav a.c-btn--primary {
        color: #fff;
    }

    .c-nav a.c-btn--primary:hover {
        color: #fff;
        background-color: #374151;
        border-color: #374151;
    }

    .c-nav li {
        display: flex;
        align-items: center;
    }

    /* スマホ: タイトル下は 3 列グリッド（一覧・新規・設定）＋ 全幅のアカウント行 */
    @media (max-width: 47.9375rem) {
        .c-header__inner {
            flex-direction: column;
            align-items: stretch;
            gap: 0.75rem;
        }

        .c-header__title {
            text-align: center;
            inline-size: 100%;
        }

        .c-header__nav {
            inline-size: 100%;
        }

        .c-header__nav .c-nav {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.375rem;
            align-items: stretch;
            margin: 0;
            padding: 0;
        }

        .c-header__nav .c-nav > li:not(.c-nav__user) {
            min-inline-size: 0;
            display: flex;
        }

        .c-header__nav .c-nav > li:not(.c-nav__user) > a {
            display: flex;
            align-items: center;
            justify-content: center;
            inline-size: 100%;
            min-block-size: 2.75rem;
            padding: 0.375rem 0.25rem;
            font-size: 0.75rem;
            line-height: 1.25;
            text-align: center;
            border-radius: 0.375rem;
            border: 1px solid #e5e7eb;
            background-color: #fafafa;
            box-sizing: border-box;
        }

        .c-header__nav .c-nav > li:not(.c-nav__user) > a:hover {
            background-color: #f3f4f6;
        }

        .c-header__nav .c-nav > li:not(.c-nav__user) > a.is-active {
            font-weight: 600;
            background-color: #e5e7eb;
            border-color: #d1d5db;
        }

        .c-header__nav .c-nav > li:not(.c-nav__user) > a.c-btn--primary {
            color: #fff;
            background-color: #1b1b18;
            border-color: #1b1b18;
        }

        .c-header__nav .c-nav > li:not(.c-nav__user) > a.c-btn--primary:hover {
            color: #fff;
            background-color: #374151;
            border-color: #374151;
        }

        .c-header__nav .c-nav .c-nav__user {
            grid-column: 1 / -1;
            margin-inline-start: 0;
            margin-block-start: 0.125rem;
            inline-size: auto;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.5rem 0.625rem;
            background-color: #f9fafb;
            border-radius: 0.375rem;
            border: 1px solid #e5e7eb;
            box-sizing: border-box;
        }

        .c-header__nav .c-nav .c-nav__logout-form {
            flex-shrink: 0;
        }

        .c-header__nav .c-nav a.c-btn--primary.c-nav__cta {
            font-size: 0.75rem;
            line-height: 1.25;
        }
    }

    .c-flash {
        padding: 0.875rem 1rem;
        margin-block-end: 1rem;
        border-radius: 0.375rem;
        font-size: 0.9375rem;
        line-height: 1.5;
        font-weight: 500;
    }

    .c-flash--success {
        background-color: #dcfce7;
        color: #166534;
        border: 1px solid #86efac;
    }

    .c-flash--error {
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid #fca5a5;
    }

    .c-flash--info {
        background-color: #dbeafe;
        color: #1e40af;
        border: 1px solid #93c5fd;
    }

    .c-errors {
        background-color: #fef2f2;
        color: #991b1b;
        padding: 1rem 1.125rem;
        margin-block-end: 1rem;
        border-radius: 0.375rem;
        border: 1px solid #fecaca;
    }

    .c-errors__title {
        margin: 0;
        font-weight: 600;
    }

    .c-errors__list {
        margin-block-start: 0.5rem;
        padding-inline-start: 1.25rem;
    }

    .c-main {
        background-color: #fff;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        padding: 1.25rem;
    }

    @media (min-width: 48rem) {
        .c-main {
            padding: 1.75rem 1.5rem;
        }
    }

    .c-main h2 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-block-end: 1rem;
    }

    .c-main p {
        color: #4b5563;
    }

    .c-main .u-mt {
        margin-block-start: 1rem;
    }

    .c-main .u-text-sm {
        font-size: 0.875rem;
        color: #6b7280;
    }

    /* 応募者 CRUD: ツールバー・テーブル・フォーム */
    .c-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-block-end: 1.25rem;
    }

    .c-toolbar__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .c-toolbar__title {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        line-height: 1.3;
    }

    .c-toolbar__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    /* ページの補足（役割の一文） */
    .c-toolbar__sub {
        margin: 0;
        font-size: 0.8125rem;
        font-weight: 400;
        color: #6b7280;
        line-height: 1.45;
    }

    /* 一覧: 検索と結果のブロック分け */
    .c-applicant-workspace {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .c-applicant-workspace__search {
        margin-block-end: 0;
    }

    .c-applicant-workspace__list {
        margin-block-start: 1.25rem;
        padding-block-start: 1.25rem;
        border-block-start: 2px solid #e5e7eb;
    }

    .c-applicant-workspace__count {
        margin: 0;
        margin-block-end: 0.875rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        color: #4b5563;
        background-color: #f9fafb;
        border-radius: 0.375rem;
        border: 1px solid #e5e7eb;
    }

    .c-applicant-workspace__search .c-applicant-search {
        margin-block-end: 0;
    }

    .c-applicant-workspace__alerts {
        margin-block-start: 1rem;
    }

    /* 面接日+3日: 管理者向けフォローアラート */
    .c-applicant-followup-alerts {
        margin: 0;
        padding: 1rem 1.25rem;
        border-radius: 0.5rem;
        border: 1px solid #fcd34d;
        background-color: #fffbeb;
    }

    .c-applicant-followup-alerts__heading {
        margin: 0;
        margin-block-end: 0.375rem;
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.35;
        color: #92400e;
    }

    .c-applicant-followup-alerts__lead {
        margin: 0;
        margin-block-end: 0.75rem;
        font-size: 0.875rem;
        line-height: 1.5;
        color: #78350f;
    }

    .c-applicant-followup-alerts__list {
        margin: 0;
        padding: 0;
        padding-inline-start: 1.25rem;
        list-style: disc;
    }

    .c-applicant-followup-alerts__item {
        margin-block-start: 0.375rem;
        font-size: 0.9375rem;
        line-height: 1.45;
        color: #451a03;
    }

    .c-applicant-followup-alerts__item:first-child {
        margin-block-start: 0;
    }

    .c-applicant-followup-alerts__link {
        color: #b45309;
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 0.125em;
    }

    .c-applicant-followup-alerts__link:hover {
        color: #92400e;
    }

    .c-applicant-followup-alerts__link:focus-visible {
        outline: 2px solid #1b1b18;
        outline-offset: 2px;
    }

    /* 応募者一覧: 検索フォーム */
    .c-applicant-search {
        margin-block-end: 1rem;
        padding: 1rem 1.25rem;
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    .c-applicant-search__header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-inline-size: 0;
    }

    .c-applicant-search__heading {
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.35;
        margin: 0;
        color: #111827;
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .c-applicant-search__toggle {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        padding: 0;
        margin: 0;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        background-color: #f9fafb;
        color: #111827;
        cursor: pointer;
        font-family: inherit;
        line-height: 1;
    }

    .c-applicant-search__toggle:focus-visible {
        outline: 2px solid #1b1b18;
        outline-offset: 2px;
    }

    .c-applicant-search__toggle-icons {
        display: grid;
        place-items: center;
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }

    .c-applicant-search__icon {
        grid-area: 1 / 1;
        font-size: 1.5rem;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 0;
    }

    .c-applicant-search__toggle[aria-expanded='true'] .c-applicant-search__icon--plus {
        visibility: hidden;
    }

    .c-applicant-search__toggle[aria-expanded='false'] .c-applicant-search__icon--minus {
        visibility: hidden;
    }

    .c-applicant-search__panel {
        margin-block-start: 0.75rem;
    }

    .c-applicant-search__form {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1rem 1.25rem;
    }

    .c-applicant-search__fields {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.75rem 1rem;
        flex: 1 1 12rem;
        min-inline-size: 0;
    }

    .c-applicant-search__field {
        flex: 1 1 10rem;
        min-inline-size: 8rem;
        max-inline-size: 14rem;
    }

    .c-applicant-search__label {
        display: block;
        font-size: 0.8125rem;
        font-weight: 600;
        margin-block-end: 0.375rem;
        color: #374151;
    }

    .c-applicant-search__input {
        inline-size: 100%;
    }

    .c-applicant-search__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    /* スマホ: ベースの flex-end / max-inline-size より後に定義し、左揃え・全幅で統一 */
    @media (max-width: 47.9375rem) {
        .c-applicant-search {
            padding-block: 0.875rem;
            padding-inline: 1rem;
        }

        .js-applicant-search:not(.is-panel-open) .c-applicant-search__panel {
            display: none;
            margin-block-start: 0;
        }

        .c-applicant-search__panel {
            margin-block-start: 0.625rem;
        }

        .c-applicant-search__form {
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0.75rem;
            inline-size: 100%;
        }

        .c-applicant-search__fields {
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: stretch;
            align-content: stretch;
            gap: 0.625rem;
            flex: none;
            inline-size: 100%;
            min-inline-size: 0;
        }

        .c-applicant-search__field {
            flex: 0 0 auto;
            align-self: stretch;
            inline-size: 100%;
            max-inline-size: none;
            min-inline-size: 0;
        }

        .c-applicant-search__label {
            margin-block-end: 0.25rem;
            text-align: start;
        }

        .c-applicant-search__input,
        .c-applicant-search__field .c-input {
            inline-size: 100%;
            max-inline-size: none;
            min-inline-size: 0;
            box-sizing: border-box;
        }

        .c-applicant-search__actions {
            flex-wrap: nowrap;
            gap: 0.5rem;
            inline-size: 100%;
            margin-block-start: 0.125rem;
        }

        .c-applicant-search__actions .c-btn {
            flex: 1 1 50%;
            min-inline-size: 0;
            justify-content: center;
        }
    }

    /* 旧クラス互換（未使用なら削除可） */
    .c-applicant-search__result {
        margin-block: 0 1rem;
        font-size: 0.875rem;
        color: #4b5563;
    }

    @media (min-width: 48rem) {
        .c-applicant-search__header {
            margin-block-end: 0.75rem;
        }

        .c-applicant-search__panel {
            margin-block-start: 0;
        }

        .c-applicant-search__toggle {
            display: none;
        }

        .js-applicant-search .c-applicant-search__panel {
            display: block;
        }

        .c-applicant-search__field {
            max-inline-size: 11rem;
        }
    }

    .c-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0.375rem;
        text-decoration: none;
        border: 1px solid transparent;
        cursor: pointer;
        font-family: inherit;
        line-height: 1.25;
    }

    .c-btn--primary {
        background-color: #1b1b18;
        color: #fff;
        border-color: #1b1b18;
    }

    .c-btn--primary:hover {
        background-color: #374151;
        border-color: #374151;
    }

    /* ヘッダー「新規登録」: 応募者一覧・設定と同じフォントサイズ・パディング・角丸（.c-btn より後で上書き） */
    .c-header__nav .c-nav a.c-btn--primary.c-nav__cta {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        min-block-size: 0;
        box-sizing: border-box;
    }

    /* スマホ: 上記 inherit が .c-btn の 0.875rem より後で効いてしまうため、一覧・設定と同じ 0.8125rem を明示 */
    .c-btn--ghost {
        background-color: #fff;
        color: #1b1b18;
        border-color: #d1d5db;
    }

    .c-btn--ghost:hover {
        background-color: #f9fafb;
    }

    .c-btn--sm {
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }

    .c-btn--outline {
        background-color: #fff;
        color: #1b1b18;
        border-color: #9ca3af;
    }

    .c-btn--outline:hover {
        background-color: #f9fafb;
        border-color: #6b7280;
    }

    /* secondary = 補助アクション（outline と同一見た目・意味だけ区別） */
    .c-btn--secondary {
        background-color: #fff;
        color: #1b1b18;
        border-color: #9ca3af;
    }

    .c-btn--secondary:hover {
        background-color: #f9fafb;
        border-color: #6b7280;
    }

    /* 採用可否バッジ（文字＋色の差で識別、管理画面向けに抑えめ） */
    .c-hiring-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.1875rem 0.5625rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.35;
        border-radius: 9999px;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .c-hiring-badge--undecided {
        color: #4b5563;
        background-color: #f3f4f6;
        border-color: #d1d5db;
    }

    .c-hiring-badge--scheduled {
        color: #1d4ed8;
        background-color: #eff6ff;
        border-color: #93c5fd;
    }

    .c-hiring-badge--interview-done {
        color: #475569;
        background-color: #f1f5f9;
        border-color: #cbd5e1;
    }

    .c-hiring-badge--hired {
        color: #166534;
        background-color: #ecfdf5;
        border-color: #86efac;
    }

    .c-hiring-badge--document-screening-not-hired {
        color: #9a3412;
        background-color: #fff7ed;
        border-color: #fdba74;
    }

    .c-hiring-badge--not-hired {
        color: #991b1b;
        background-color: #fef2f2;
        border-color: #fca5a5;
    }

    .c-hiring-badge--declined {
        color: #5b21b6;
        background-color: #f5f3ff;
        border-color: #c4b5fd;
    }

    .c-hiring-badge--joined {
        color: #0f766e;
        background-color: #f0fdfa;
        border-color: #5eead4;
    }

    .c-hiring-badge--left {
        color: #57534e;
        background-color: #fafaf9;
        border-color: #d6d3d1;
    }

    /* 法人バッジ（一覧テーブル・詳細で統一） */
    .c-corp-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.1875rem 0.5625rem;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.35;
        border-radius: 0.25rem;
        border: 1px solid transparent;
    }

    .c-corp-badge--compact {
        padding: 0.125rem 0.4375rem;
        font-size: 0.6875rem;
    }

    .c-corp-badge--tone-0 {
        color: #1e40af;
        background-color: #eff6ff;
        border-color: #bfdbfe;
    }

    .c-corp-badge--tone-1 {
        color: #6d28d9;
        background-color: #f5f3ff;
        border-color: #ddd6fe;
    }

    .c-corp-badge--tone-2 {
        color: #0f766e;
        background-color: #f0fdfa;
        border-color: #5eead4;
    }

    .c-corp-badge--tone-3 {
        color: #9a3412;
        background-color: #fff7ed;
        border-color: #fdba74;
    }

    .c-corp-badge--empty {
        color: #6b7280;
        background-color: #f9fafb;
        border-color: #e5e7eb;
        font-weight: 600;
    }

    .c-table-wrap {
        overflow-x: auto;
        margin-block-end: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    .c-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
    }

    .c-table th,
    .c-table td {
        padding: 0.625rem 0.75rem;
        text-align: start;
        border-block-end: 1px solid #e5e7eb;
        vertical-align: top;
    }

    .c-table thead th {
        background-color: #f9fafb;
        font-weight: 600;
        white-space: nowrap;
    }

    .c-table tbody tr:hover {
        background-color: #fafafa;
    }

    .c-table__empty {
        text-align: center;
        color: #6b7280;
        padding: 2rem !important;
    }

    .c-table__col-actions {
        white-space: nowrap;
    }

    .c-table--applicants thead th {
        text-align: center;
    }

    /* PC 応募者一覧テーブル：余白・改行・操作ボタン */
    .c-table--applicants th,
    .c-table--applicants td {
        padding-block: 0.875rem;
        padding-inline: 0.875rem;
        vertical-align: middle;
    }

    .c-table--applicants .c-table__cell-id {
        inline-size: 1%;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        color: #6b7280;
    }

    .c-table--applicants .c-table__cell-corp {
        inline-size: 1%;
        white-space: nowrap;
    }

    .c-table--applicants .c-table__cell-name {
        min-inline-size: 6rem;
        max-inline-size: 11rem;
        font-weight: 500;
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    .c-table--applicants .c-table__cell-age {
        inline-size: 1%;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        text-align: center;
        color: #374151;
    }

    .c-table--applicants .c-table__cell-text {
        min-inline-size: 5rem;
        max-inline-size: 10rem;
        word-break: break-word;
        overflow-wrap: anywhere;
        color: #374151;
    }

    .c-table--applicants .c-table__cell-date,
    .c-table--applicants .c-table__cell-datetime {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        font-size: 0.8125rem;
        color: #4b5563;
    }

    .c-table--applicants .c-table__cell-status {
        min-inline-size: 0;
        text-align: center;
        vertical-align: middle;
    }

    .c-table-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .c-table-actions__btn {
        text-decoration: none;
        min-block-size: 2.25rem;
        padding-inline: 0.75rem;
    }

    /* PC 応募者一覧：横スクロールを避け、コンテナ内に収める */
    @media (min-width: 48rem) {
        .c-applicant-list-table.c-table-wrap {
            overflow-x: visible;
        }

        .c-table--applicants {
            table-layout: fixed;
            width: 100%;
            font-size: 0.8125rem;
        }

        .c-table--applicants thead th {
            white-space: normal;
            vertical-align: middle;
            text-align: center;
            line-height: 1.25;
            padding-block: 0.5rem;
            padding-inline: 0.3125rem;
            font-size: 0.75rem;
        }

        .c-table--applicants thead th abbr {
            text-decoration: none;
            cursor: help;
        }

        .c-table--applicants tbody td {
            min-inline-size: 0;
            padding-block: 0.5rem;
            padding-inline: 0.3125rem;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .c-table--applicants .c-table__col-actions {
            white-space: normal;
        }

        .c-table--applicants .c-table__cell-id {
            font-size: 0.75rem;
        }

        .c-table--applicants .c-table__cell-name {
            min-inline-size: 0;
            max-inline-size: none;
        }

        .c-table--applicants .c-table__cell-age {
            font-size: 0.75rem;
        }

        .c-table--applicants .c-table__cell-text {
            min-inline-size: 0;
            max-inline-size: none;
        }

        .c-table--applicants .c-table__cell-corp {
            white-space: normal;
        }

        .c-table--applicants .c-table__cell-date,
        .c-table--applicants .c-table__cell-datetime {
            font-size: 0.75rem;
        }

        .c-table--applicants .c-table__col--applicant-id {
            width: 2.75rem;
        }

        .c-table--applicants .c-table__col--applicant-corp {
            width: 9%;
        }

        .c-table--applicants .c-table__col--applicant-name {
            width: 11%;
        }

        .c-table--applicants .c-table__col--applicant-age {
            width: 4.5%;
        }

        .c-table--applicants .c-table__col--applicant-mid {
            width: 9%;
        }

        .c-table--applicants .c-table__col--applicant-date {
            width: 6.5%;
        }

        .c-table--applicants .c-table__col--applicant-status {
            width: 9%;
        }

        .c-table--applicants .c-table__col--applicant-join-leave {
            width: 9%;
        }

        .c-table--applicants .c-table__col--applicant-actions {
            width: 7.25rem;
        }

        /*
         * 一覧閲覧専用（操作列なし）:
         * fixed レイアウトだと列 % の合計が 100% に届かず余白が先頭（ID）列に乗る。
         * auto に切り替え、ID は col の width:0 + セル 1% シュリンクで内容幅に抑える。
         */
        .c-applicant-list-table--viewer .c-table--applicants {
            table-layout: auto;
        }

        .c-applicant-list-table--viewer .c-table--applicants .c-table__col--applicant-id {
            inline-size: 0;
            width: 0;
            min-inline-size: 0;
            max-inline-size: 2.75rem;
        }

        .c-applicant-list-table--viewer .c-table--applicants .c-table__cell-id {
            inline-size: 1%;
            width: 1%;
            max-inline-size: 2.75rem;
            min-inline-size: 0;
            white-space: nowrap;
            box-sizing: border-box;
            padding-inline: 0.25rem 0.375rem;
        }
    }

    .c-applicant-table-dates {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        line-height: 1.25;
    }

    .c-applicant-table-dates__line {
        display: block;
        font-size: 0.75rem;
        font-variant-numeric: tabular-nums;
        color: #4b5563;
    }

    @media (min-width: 48rem) {
        .c-table-actions--compact {
            flex-direction: column;
            align-items: stretch;
            gap: 0.25rem;
        }

        .c-table-actions--compact .c-table-actions__btn {
            min-block-size: 1.875rem;
            padding-block: 0.25rem;
            padding-inline: 0.5rem;
            font-size: 0.75rem;
            text-align: center;
            justify-content: center;
        }
    }

    /* 一覧テーブル：長いラベル（書類選考不採用など）でもセル内に収める */
    .c-hiring-badge--table {
        display: inline-flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        font-size: 0.6875rem;
        padding: 0.125rem 0.375rem;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .c-table__sep {
        color: #d1d5db;
        margin-inline: 0.25rem;
    }

    .c-link {
        color: #2563eb;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .c-link:hover {
        color: #1d4ed8;
    }

    .c-badge {
        display: inline-block;
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
        font-weight: 500;
        background-color: #f3f4f6;
        border-radius: 0.25rem;
        border: 1px solid #e5e7eb;
    }

    .c-pagination {
        margin-block-start: 1rem;
    }

    .c-pagination nav {
        display: flex;
        justify-content: center;
    }

    .c-pagination a,
    .c-pagination span {
        display: inline-flex;
        padding: 0.375rem 0.625rem;
        margin-inline: 0.125rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
        text-decoration: none;
        color: #1b1b18;
    }

    .c-pagination a:hover {
        background-color: #f3f4f6;
    }

    .c-pagination span[aria-current='page'] {
        background-color: #1b1b18;
        color: #fff;
    }

    /* 応募者一覧：PC はテーブル / SP はカード（48rem = 768px ≒ Tailwind md） */
    .c-applicant-list-table {
        display: none;
        margin-block-end: 1rem;
    }

    @media (min-width: 48rem) {
        .c-applicant-list-table {
            display: block;
        }
    }

    .c-applicant-list-cards {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-block-end: 1rem;
    }

    @media (min-width: 48rem) {
        .c-applicant-list-cards {
            display: none;
        }
    }

    .c-applicant-list-cards__empty {
        margin: 0;
        padding: 2rem 1rem;
        text-align: center;
        color: #6b7280;
        font-size: 0.9375rem;
        background-color: #fafafa;
        border: 1px dashed #d1d5db;
        border-radius: 0.5rem;
    }

    .c-applicant-card {
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .c-applicant-card__header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem 0.75rem;
        margin-block-end: 0.875rem;
        padding-block-end: 0.75rem;
        border-block-end: 1px solid #f3f4f6;
    }

    .c-applicant-card__name {
        margin: 0;
        flex: 1;
        min-inline-size: 0;
        font-size: 1.0625rem;
        font-weight: 700;
        line-height: 1.35;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .c-applicant-card__dl {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .c-applicant-card__row {
        display: grid;
        grid-template-columns: 5.5rem 1fr;
        gap: 0.5rem 0.75rem;
        align-items: baseline;
    }

    .c-applicant-card__row--status {
        align-items: center;
    }

    .c-applicant-card__term {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 600;
        color: #9ca3af;
    }

    .c-applicant-card__value {
        margin: 0;
        font-size: 0.875rem;
        color: #1b1b18;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .c-applicant-card__footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-block-start: 1rem;
        padding-block-start: 0.875rem;
        border-block-start: 1px solid #f3f4f6;
    }

    .c-btn--card-action {
        min-block-size: 2.75rem;
        justify-content: center;
        font-weight: 600;
        text-decoration: none;
    }

    .c-form-intro {
        font-size: 0.875rem;
        color: #6b7280;
        margin-block-end: 1.25rem;
        line-height: 1.55;
        padding: 0.75rem 1rem;
        background-color: #f9fafb;
        border-radius: 0.375rem;
        border: 1px solid #e5e7eb;
    }

    .c-form {
        max-width: 40rem;
    }

    .c-form--sheet {
        max-inline-size: 42rem;
        max-width: 42rem;
        padding: 1.25rem;
        margin-block-start: 0.25rem;
        background-color: #fafafa;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    .c-form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        margin-block-start: 1.5rem;
        padding-block-start: 1.25rem;
        border-block-start: 1px solid #e5e7eb;
    }

    .c-form-actions .c-btn {
        min-block-size: 2.5rem;
    }

    .c-field {
        margin-block-end: 1.125rem;
    }

    .c-field__label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        margin-block-end: 0.375rem;
        color: #374151;
    }

    .c-field__required {
        display: inline-block;
        margin-inline-start: 0.375rem;
        padding: 0.0625rem 0.375rem;
        font-size: 0.6875rem;
        font-weight: 600;
        color: #b91c1c;
        background-color: #fef2f2;
        border-radius: 0.25rem;
        vertical-align: middle;
    }

    .c-field__control {
        max-width: 100%;
    }

    .c-input {
        width: 100%;
        max-width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        background-color: #fff;
        font-family: inherit;
    }

    .c-input:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 1px;
        border-color: #3b82f6;
    }

    .c-input--select {
        cursor: pointer;
    }

    .c-input--textarea {
        resize: vertical;
        min-block-size: 6rem;
    }

    .c-dl {
        margin: 0;
        max-width: 40rem;
    }

    .c-dl__row {
        display: grid;
        grid-template-columns: minmax(7.5rem, 11rem) 1fr;
        gap: 0.5rem 1.25rem;
        padding-block: 0.625rem;
        border-block-end: 1px solid #e5e7eb;
        align-items: baseline;
    }

    @media (max-width: 40rem) {
        .c-dl__row {
            grid-template-columns: 1fr;
            gap: 0.25rem 0;
            padding-block: 0.75rem;
        }
    }

    .c-dl__term {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: #6b7280;
    }

    .c-dl__desc {
        margin: 0;
        font-size: 0.9375rem;
        color: #1b1b18;
        word-break: break-word;
    }

    .c-dl__desc--multiline {
        white-space: pre-wrap;
    }

    /* 応募者詳細（確認）: 1カラムで基本情報 → 添付の順 */
    .c-applicant-detail {
        display: grid;
        gap: 1.25rem;
        grid-template-columns: 1fr;
    }

    .c-applicant-detail__main {
        min-inline-size: 0;
        padding: 1.25rem;
        background-color: #fafafa;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    .c-applicant-view-intro {
        font-size: 0.875rem;
        color: #1e40af;
        margin-block: 0 1.25rem;
        padding: 0.75rem 1rem;
        background-color: #eff6ff;
        border: 1px solid #93c5fd;
        border-radius: 0.375rem;
        line-height: 1.55;
    }

    .c-applicant-detail__section-title {
        font-size: 1.0625rem;
        font-weight: 600;
        margin-block: 0 0.875rem;
        padding-block-end: 0.5rem;
        border-block-end: 1px solid #e5e7eb;
        color: #111827;
    }

    .c-applicant-detail__files {
        min-inline-size: 0;
        padding: 1.25rem;
        background-color: #fafafa;
        border-radius: 0.5rem;
        border: 1px solid #e5e7eb;
    }

    .c-applicant-detail__files-lead {
        font-size: 0.8125rem;
        color: #6b7280;
        margin-block: 0 1.25rem;
        line-height: 1.5;
    }

    /* 応募者編集: 2カラム（左フォーム / 右ファイル）48rem〜、広い画面で右列を拡大 */
    .c-applicant-edit-layout {
        display: grid;
        gap: 1.25rem;
        grid-template-columns: 1fr;
        align-items: start;
    }

    @media (min-width: 48rem) {
        .c-applicant-edit-layout {
            grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
            gap: 1.5rem;
        }
    }

    @media (min-width: 64rem) {
        .c-applicant-edit-layout {
            grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
        }
    }

    .c-applicant-edit-layout__heading {
        font-size: 1.0625rem;
        font-weight: 600;
        margin-block: 0 0.75rem;
        padding-block-end: 0.5rem;
        border-block-end: 1px solid #e5e7eb;
        color: #111827;
    }

    .c-applicant-edit-layout__form {
        min-inline-size: 0;
        padding: 1.25rem;
        background-color: #fafafa;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    .c-applicant-edit-layout__files {
        min-inline-size: 0;
        padding: 1.25rem;
        background-color: #f3f4f6;
        border-radius: 0.5rem;
        border: 1px solid #e5e7eb;
    }

    .c-applicant-edit-layout__files-lead {
        font-size: 0.8125rem;
        color: #6b7280;
        margin-block: 0 1rem;
        line-height: 1.5;
    }

    .c-form--edit-inline {
        max-inline-size: none;
    }

    .c-dl--full {
        max-width: none;
    }

    /* ファイルパネル（カテゴリ単位のカード） */
    .c-file-panel {
        margin-block-end: 1rem;
        padding: 1rem;
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .c-file-panel:last-child {
        margin-block-end: 0;
    }

    .c-applicant-edit-layout__files .c-file-panel:last-child {
        margin-block-end: 0;
    }

    .c-file-panel--readonly .c-file-list--above-upload {
        margin-block-end: 0;
    }

    .c-file-panel__title {
        font-size: 0.9375rem;
        font-weight: 600;
        margin-block: 0 0.75rem;
        padding-block-end: 0.5rem;
        border-block-end: 1px solid #f3f4f6;
        color: #111827;
    }

    .c-file-panel__hint {
        font-size: 0.75rem;
        color: #b45309;
        margin-block: 0.5rem 0;
    }

    .c-file-list--above-upload {
        margin-block-end: 1rem;
    }

    .c-file-drop {
        padding: 0.75rem;
        border: 1px dashed #d1d5db;
        border-radius: 0.375rem;
        background-color: #fff;
    }

    .c-file-drop--below-list {
        margin-block-start: 0;
        margin-block-end: 0;
    }

    .c-file-upload-form {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* ファイル選択：ボタンとして認識しやすい UI */
    .c-file-choose {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        cursor: pointer;
        max-inline-size: 100%;
    }

    .c-file-choose__helper {
        font-size: 0.8125rem;
        color: #6b7280;
        line-height: 1.4;
    }

    .c-file-choose__input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .c-file-choose:focus-within .c-btn--file-select {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .c-btn--file-select {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.25;
        color: #1b1b18;
        background-color: #f3f4f6;
        border: 1px solid #9ca3af;
        border-radius: 0.375rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        cursor: pointer;
        font-family: inherit;
        user-select: none;
    }

    .c-file-choose:hover .c-btn--file-select {
        background-color: #e5e7eb;
        border-color: #6b7280;
    }

    .c-file-choose:active .c-btn--file-select {
        background-color: #d1d5db;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .c-file-upload-form__submit {
        align-self: flex-start;
    }

    .c-file-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .c-file-list__empty {
        font-size: 0.875rem;
        color: #9ca3af;
        padding: 0.5rem 0;
    }

    /* 添付画像モーダル（詳細・編集共通） */
    body.has-file-img-modal {
        overflow: hidden;
    }

    .c-file-img-modal {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        box-sizing: border-box;
    }

    .c-file-img-modal[hidden] {
        display: none !important;
    }

    .c-file-img-modal__backdrop {
        position: fixed;
        inset: 0;
        z-index: 0;
        background-color: rgba(15, 23, 42, 0.58);
        cursor: pointer;
    }

    .c-file-img-modal__panel {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        inline-size: 100%;
        max-inline-size: min(52rem, 100%);
        max-block-size: min(92vh, 100%);
        background-color: #fff;
        border-radius: 0.5rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.28);
        overflow: hidden;
    }

    .c-file-img-modal__head {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-block: 0.5rem;
        padding-inline: 0.75rem;
        border-block-end: 1px solid #e5e7eb;
        flex-shrink: 0;
    }

    .c-file-img-modal__head-title {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
    }

    .c-file-img-modal__close {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        margin: 0;
        padding: 0;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        background-color: #f9fafb;
        color: #1b1b18;
        font-family: inherit;
        cursor: pointer;
        line-height: 1;
    }

    .c-file-img-modal__close:hover {
        background-color: #f3f4f6;
    }

    .c-file-img-modal__close:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .c-file-img-modal__close-x {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1;
    }

    .c-file-img-modal__img-wrap {
        flex: 1;
        min-block-size: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-block: 0.75rem;
        padding-inline: 0.75rem;
        background-color: #f9fafb;
    }

    .c-file-img-modal__img {
        display: block;
        max-inline-size: 100%;
        max-block-size: min(70vh, 36rem);
        inline-size: auto;
        block-size: auto;
        object-fit: contain;
    }

    .c-file-img-modal__footer {
        flex-shrink: 0;
        padding-block: 0.75rem;
        padding-inline: 1rem;
        border-block-start: 1px solid #e5e7eb;
        background-color: #fff;
    }

    .c-file-img-modal__name {
        margin: 0 0 0.25rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #111827;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.4;
    }

    .c-file-img-modal__sub {
        margin: 0 0 0.5rem;
        font-size: 0.8125rem;
        color: #6b7280;
        line-height: 1.45;
    }

    .c-file-img-modal__newtab {
        font-size: 0.875rem;
    }

    .c-file-card {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.875rem;
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    .c-file-card--image {
        align-items: stretch;
    }

    .c-file-card__thumb-btn {
        flex-shrink: 0;
        align-self: flex-start;
        display: block;
        margin: 0;
        padding: 0;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        overflow: hidden;
        background-color: #f9fafb;
        cursor: zoom-in;
        font-family: inherit;
        line-height: 0;
    }

    .c-file-card__thumb-btn:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .c-file-card__thumb {
        display: block;
        inline-size: 120px;
        block-size: 120px;
        object-fit: cover;
    }

    .c-file-card--pdf {
        align-items: stretch;
    }

    .c-file-card__pdf-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.375rem;
        flex-shrink: 0;
    }

    .c-file-card__pdf-icon {
        flex-shrink: 0;
        inline-size: 3rem;
        block-size: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #b91c1c;
        color: #fff;
        font-size: 0.625rem;
        font-weight: 700;
        border-radius: 0.25rem;
    }

    .c-file-card__type-tag {
        display: inline-block;
        padding-block: 0.125rem;
        padding-inline: 0.5rem;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #991b1b;
        background-color: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 0.25rem;
    }

    .c-file-card__type-tag--muted {
        color: #4b5563;
        background-color: #f3f4f6;
        border-color: #e5e7eb;
    }

    .c-file-card__kind {
        margin: 0 0 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7280;
    }

    .c-file-card__name--pdf {
        margin-block-start: 0;
    }

    .c-file-card__body {
        flex: 1;
        min-inline-size: 0;
    }

    .c-file-card__name {
        font-size: 0.875rem;
        font-weight: 500;
        margin: 0 0 0.25rem;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.4;
    }

    .c-file-card__meta {
        font-size: 0.8125rem;
        color: #6b7280;
        margin: 0 0 0.625rem;
    }

    .c-file-card__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .c-file-card__action-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: 2.75rem;
        padding-inline: 0.75rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0.375rem;
        border: 1px solid #e5e7eb;
        background-color: #fff;
        text-decoration: none;
        color: #2563eb;
        box-sizing: border-box;
    }

    .c-file-card__action-link:hover {
        background-color: #f9fafb;
    }

    .c-file-card__action-btn {
        min-block-size: 2.75rem;
        padding-block: 0.375rem;
        padding-inline: 0.75rem;
    }

    .c-file-card__delete-form {
        display: block;
        margin: 0;
    }

    .c-file-card__delete-form .c-btn {
        inline-size: 100%;
    }

    @media (min-width: 48rem) {
        .c-file-card--image,
        .c-file-card--pdf {
            flex-direction: row;
            align-items: flex-start;
        }

        .c-file-card__pdf-col {
            align-items: center;
        }

        .c-file-card__actions {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
        }

        .c-file-card__action-link {
            inline-size: auto;
            min-block-size: 2.25rem;
            justify-content: flex-start;
            border: none;
            padding-inline: 0;
            background: transparent;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .c-file-card__action-link:hover {
            background: transparent;
        }

        .c-file-card__delete-form {
            display: inline;
        }

        .c-file-card__delete-form .c-btn {
            inline-size: auto;
        }

        .c-file-card__action-btn {
            min-block-size: 2.25rem;
        }
    }

    @media (max-width: 47.9375rem) {
        .c-file-card__thumb-btn {
            align-self: center;
            max-inline-size: 100%;
        }

        .c-file-card__thumb {
            inline-size: 100%;
            max-inline-size: 17.5rem;
            block-size: auto;
            aspect-ratio: 1;
            max-block-size: 14rem;
            object-fit: cover;
        }

        .c-file-card__pdf-col {
            align-self: flex-start;
        }
    }

    .c-btn--danger {
        background-color: #fff;
        color: #b91c1c;
        border-color: #fecaca;
    }

    .c-btn--danger:hover {
        background-color: #fef2f2;
        border-color: #f87171;
    }

    .c-btn--small {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    /* 設定（マスタ） */
    .c-settings-form {
        max-inline-size: 48rem;
    }

    .c-settings-section {
        margin-block-end: 1.25rem;
        padding: 1.25rem;
        background-color: #fafafa;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
    }

    .c-settings-section:last-of-type {
        margin-block-end: 0;
    }

    .c-settings-section__title {
        font-size: 1.0625rem;
        font-weight: 600;
        margin: 0 0 0.375rem;
        color: #111827;
    }

    .c-settings-section__help {
        font-size: 0.875rem;
        color: #6b7280;
        margin-block: 0 1rem;
        line-height: 1.5;
    }

    .c-settings-field--checkbox {
        margin-block-end: 1rem;
        padding: 0.75rem 1rem;
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
    }

    .c-settings-checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #111827;
        cursor: pointer;
        line-height: 1.4;
    }

    .c-settings-checkbox-label input {
        margin-block-start: 0.2rem;
        flex-shrink: 0;
    }

    .c-settings-checkbox-hint {
        margin: 0.5rem 0 0;
        padding-inline-start: 1.75rem;
        font-size: 0.8125rem;
        font-weight: 400;
        color: #6b7280;
        line-height: 1.5;
    }

    .c-settings-repeatable {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-block-end: 0.75rem;
    }

    .c-settings-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .c-settings-row__input {
        flex: 1 1 12rem;
        min-inline-size: min(100%, 12rem);
    }

    .c-settings-form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-block-start: 2rem;
        padding-block-start: 1.5rem;
        border-block-start: 1px solid #e5e7eb;
    }

    .c-settings-error {
        font-size: 0.875rem;
        color: #b91c1c;
        margin-block-start: 0.5rem;
    }

    .c-input--error {
        border-color: #b91c1c;
    }

    .c-field__error {
        font-size: 0.8125rem;
        color: #b91c1c;
        margin-block-start: 0.375rem;
    }

    .c-field--checkbox {
        margin-block-end: 1.125rem;
    }

    .c-field__label--inline {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        cursor: pointer;
    }

    .c-form--login {
        max-inline-size: 28rem;
        margin-inline: auto;
    }

    .l-container--narrow {
        max-width: 40rem;
    }

    .l-guest-body {
        min-block-size: 100vh;
    }

    .c-header--guest .c-header__inner {
        justify-content: center;
    }

    .c-header__shared-brand {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .c-header__shared-note {
        margin: 0;
        font-size: 0.8125rem;
        color: #6b7280;
        font-weight: 500;
    }

    .l-shared-body {
        min-block-size: 100vh;
    }

    .c-main--shared {
        padding-block-start: 0.5rem;
    }

    .c-toolbar--shared .c-toolbar__sub {
        color: #6b7280;
    }

    .c-share-panel {
        margin-block-end: 1.5rem;
        padding: 1.25rem;
        background-color: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: 0.5rem;
    }

    .c-share-panel__title {
        font-size: 1.0625rem;
        font-weight: 600;
        margin: 0 0 0.5rem;
        color: #92400e;
    }

    .c-share-panel__lead {
        font-size: 0.875rem;
        color: #78350f;
        margin: 0 0 1rem;
        line-height: 1.55;
    }

    .c-share-panel__url-row {
        margin-block-end: 1rem;
    }

    .c-share-panel__label {
        display: block;
        font-size: 0.8125rem;
        font-weight: 600;
        margin-block-end: 0.375rem;
        color: #78350f;
    }

    .c-share-panel__url-field {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: stretch;
    }

    .c-share-panel__input {
        flex: 1 1 12rem;
        min-inline-size: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        background-color: #fff;
        font-family: inherit;
    }

    .c-share-panel__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        margin-block-start: 0.5rem;
    }

    .c-share-panel__form {
        margin: 0;
    }

    .c-share-panel__empty {
        font-size: 0.875rem;
        color: #92400e;
        margin: 0 0 1rem;
    }

    .c-share-panel__history {
        margin-block-start: 1rem;
        font-size: 0.8125rem;
        color: #6b7280;
    }

    .c-share-panel__history-list {
        margin: 0.5rem 0 0;
        padding-inline-start: 1.25rem;
    }

    .c-share-panel__history-item {
        margin-block: 0.25rem;
    }

    .c-share-panel__history-meta {
        font-variant-numeric: tabular-nums;
    }

    .c-nav__user {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
        margin-inline-start: auto;
    }

    .c-nav__email {
        font-size: 0.75rem;
        color: #6b7280;
        max-inline-size: 12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .c-nav__logout-form {
        margin: 0;
    }

    @media (max-width: 47.9375rem) {
        .c-header__nav .c-nav__user .c-nav__email {
            min-inline-size: 0;
            flex: 1 1 auto;
            max-inline-size: none;
        }
    }

    .c-nav__email--link {
        color: #2563eb;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .c-nav__email--link:hover {
        color: #1d4ed8;
    }

    .c-settings-section--account {
        margin-block-start: 2rem;
    }

    .c-settings-account-link-wrap {
        margin: 0;
    }

    .c-settings-account-form {
        max-inline-size: 40rem;
    }

    .c-account-change-block {
        margin-block-start: 1.5rem;
        padding-block-start: 1.25rem;
        border-block-start: 1px solid #e5e7eb;
    }

    .c-account-change-block__title {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 0.5rem;
        color: #111827;
    }

    .c-account-change-block__help {
        font-size: 0.875rem;
        color: #6b7280;
        margin: 0 0 1rem;
        line-height: 1.5;
    }
}