/**
 * MADO RESPONSIBILITY INDEX / 正本・責任境界
 *
 * STATUS / 状態:
 * - 現役のProvider Q&A管理画面CSS正本。
 *
 * ROLE / 役割:
 * - Q&A管理のform、一覧、検索、pagination、category、CSV、AI監査、回答画像UI、responsive表示を担当する。
 *
 * NON-ROLE / 非担当:
 * - Q&A保存/監査domain、共通modal primitives、公開回答画像、他portal画面のstyleは担当しない。
 *
 * SSOT / 正本:
 * - public/css/site-qa-page.cssが画面固有CSS正本。markupは includes/portal/site-qa-main-page.php、共通modalは mado-base.css。
 *
 * CONNECTIONS / 接続:
 * - mado-portal-shell--action-site-qa と #mado-site-qa markup。Q&A回答画像buttonはこのscopeだけでテーマ干渉を防ぐ。
 *
 * CHANGE RULE / 変更ルール:
 * - inline style、末尾override、同じtoolbar/list経路、!importantによる押し切りを追加しない。
 *
 * COMPATIBILITY / 互換:
 * - AI監査結果は既存Q&A一覧カードへ移動し、新規タブ参照で元画面状態を保持する。
 *
 * DELETION CONDITION / 削除条件:
 * - Q&A管理markupを別CSS正本へ完全移行し、enqueueと全selector参照を同時に更新した場合のみ。
 *
 * AUDIT / 確認記録:
 * - 判断日: 2026-08-06
 * - コメント追加前SHA-256: e534e9cd71b8c99e3be4f6938395b083ce2e36170da7351e10e5fab6b856731f
 * - コメント追加前サイズ: 87852 bytes
 * - 実装本体は変更せず、責任境界コメントだけを追加する。
 * - UTF-8、原則BOMなし。下に既存の詳細契約がある場合は、その契約も維持する。
 */
/* MADO SITE Q&A CSS SSOT CLEAN BUILD 2026-07-22
 * Provider only: public/css/site-qa-page.css
 * Current markup source: includes/portal/site-qa-main-page.php
 * Page-specific layout only. Shared modal primitives remain in public/css/mado-base.css.
 * Do not add priority escalation, inline styles, duplicate toolbar paths, or trailing override patches.
 * The list toolbar, search controls, 20-item pagination, and card layout each have one canonical selector path.
 * 2026-08-03: AI監査と外部qa_id参照は同じQ&A一覧カードへ移動する。
 * 監査結果の対象Q&Aは白背景・緑枠の参照リンクとして新しいタブで開き、元タブの監査結果を保持する。
 * 監査専用カード一覧や別ページネーション、監査完了後の時間ロックを追加しない。
 */

.mado-portal-shell--action-site-qa .mado-portal-shell__content-frame.is-standard {
    width: 100%;
    max-width: none;
}

.mado-portal-shell--action-site-qa .mado-portal-container.mado-site-qa-container {
    width: 100%;
    max-width: none;
    margin: 0;
}

.mado-site-qa {
    display: grid;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 28px;
    padding: 30px;
    background: #ffffff;
    border: 1px solid #d7e3ee;
    border-radius: 22px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.mado-site-qa * {
    box-sizing: border-box;
}

.mado-site-qa *::before {
    box-sizing: border-box;
}

.mado-site-qa *::after {
    box-sizing: border-box;
}

.mado-site-qa [hidden] {
    display: none;
}

.mado-site-qa__intro {
    display: grid;
    gap: 8px;
}

.mado-site-qa__heading {
    margin: 0;
    color: #111827;
}

.mado-site-qa__lead {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.mado-site-qa__message {
    margin: 0 0 16px;
}

.mado-site-qa__message:empty {
    display: none;
}

.mado-site-qa-alert {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.65;
}

.mado-site-qa__top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.mado-site-qa-card {
    background: #ffffff;
    border: 1px solid #dce4ed;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    margin-bottom: 18px;
}

.mado-site-qa__card {
    padding: 18px;
}

.mado-site-qa__card--tools {
    padding: 18px;
}

.mado-site-qa__card--list {
    margin-top: 0;
}

.mado-site-qa__card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.mado-site-qa__card-header-main {
    min-width: 0;
}

.mado-site-qa__card-title {
    margin: 0;
    color: #111827;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
}


.mado-site-qa__label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.mado-site-qa__label--plain {
    font-weight: 400;
}

.mado-site-qa__input {
    width: 100%;
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    background: #ffffff;
}

.mado-site-qa__textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #0f172a;
    background: #ffffff;
    min-height: 92px;
    resize: vertical;
}

.mado-site-qa-category-manager {
    margin-bottom: 16px;
}

.mado-site-qa-category-accordion {
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: #ffffff;
}

.mado-site-qa-csv-accordion {
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: #ffffff;
}

.mado-site-qa-category-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 14px 16px;
}

.mado-site-qa-csv-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 14px 16px;
}

.mado-site-qa-category-accordion__summary-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mado-site-qa-csv-accordion__summary-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mado-site-qa-category-accordion__title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mado-site-qa-category-accordion__icon--stack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    min-width: 25px;
}

.mado-site-qa-csv-accordion__icon--sync {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    min-width: 20px;
}

.mado-site-qa-category-accordion__body {
    padding: 0 16px 16px;
}

.mado-site-qa-csv-accordion__body {
    padding: 0 16px 16px;
}

.mado-site-qa__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mado-site-qa-category-manager__list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.mado-site-qa__form {
    display: grid;
    gap: 14px;
}

.mado-site-qa__field-stack {
    display: grid;
    gap: 14px;
}


.mado-site-qa__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mado-site-qa__field {
    display: grid;
    gap: 6px;
}

.mado-site-qa__response-group {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.mado-site-qa__response-group-title {
    margin: 0;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
}

.mado-site-qa__response-group--answer {
    gap: 10px;
}

.mado-site-qa-answer-image {
    display: grid;
    gap: 10px;
}

/*
 * Q&A ANSWER IMAGE BUTTON SSOT / 回答画像ボタンの見た目（2026-08-05）:
 * - Q&Aの画像添付ボタンだけを対象とする。
 * - GeneratePressの汎用button hover/focus色を受けない。
 * - 通常・hover・focus・activeで背景色と文字色を変えない。
 * - 別画面や共通ボタンへ同じ指定を複製しない。
 */
.mado-site-qa-answer-image__tool-row {
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 0;
    border-radius: 12px;
    background: #f8fbff;
}

.mado-site-qa-answer-image__upload-controls {
    display: grid;
    grid-template-columns: minmax(0, 340px) auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(100%, 380px);
    margin-inline: auto;
}

#mado-site-qa .mado-site-qa-answer-image__attach-button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #eff6ff;
    background-image: none;
    color: #1d4ed8;
    box-shadow: none;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

#mado-site-qa .mado-site-qa-answer-image__attach-button:is(:hover, :focus, :focus-visible, :active) {
    border: 0;
    background: #eff6ff;
    background-image: none;
    color: #1d4ed8;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-answer-image__attach-button:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.34);
    outline-offset: 2px;
}

#mado-site-qa .mado-site-qa-answer-image__attach-button:disabled {
    cursor: wait;
    opacity: 0.62;
}

.mado-site-qa-answer-image__url-controls {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.mado-site-qa-answer-image__url-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.mado-site-qa-answer-image__help,
.mado-site-qa-answer-image__status {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.65;
}

.mado-site-qa-answer-image__status:empty { display: none; }
.mado-site-qa-answer-image__status.is-error { color: #b42318; }
.mado-site-qa-answer-image__status.is-success { color: #047857; }

.mado-site-qa-answer-image__preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid #d8e4ef;
    border-radius: 10px;
    background: #ffffff;
}

.mado-site-qa-answer-image__preview[hidden] { display: none; }

.mado-site-qa-answer-image__preview-img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    object-fit: contain;
}

.mado-site-qa-qa-card__answer-image {
    display: block;
    width: auto;
    max-width: min(100%, 280px);
    max-height: 150px;
    margin-top: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    object-fit: contain;
}

/*
 * COLLAPSED IMAGE PEEK / 閉じたQ&Aカードの画像チラ見せ（2026-08-22）
 * - action-bandの既存左列を使用し、カード高を増やさない。
 * - 画像があることだけ分かる程度に上側を見せ、下へ向かって透明にする。
 * - 開閉ボタン中央列・削除ボタン右列には重ねない。
 */
#mado-site-qa .mado-site-qa-qa-card:not(.is-open) .mado-site-qa-qa-card__answer-image-peek {
    grid-column: 1;
    justify-self: start;
    align-self: center;
    width: min(118px, 72%);
    height: 22px;
    margin: -4px 0 -1px 2px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        rgba(0, 0, 0, 0.92) 35%,
        rgba(0, 0, 0, 0.42) 68%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        rgba(0, 0, 0, 0.92) 35%,
        rgba(0, 0, 0, 0.42) 68%,
        transparent 100%
    );
}

#mado-site-qa .mado-site-qa-qa-card:not(.is-open) .mado-site-qa-qa-card__answer-image-peek .mado-site-qa-qa-card__answer-image {
    display: block;
    width: 118px;
    max-width: 100%;
    height: 48px;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 6px;
    object-fit: cover;
    object-position: center top;
}

@media (max-width: 700px) {
    .mado-site-qa-answer-image__preview { grid-template-columns: minmax(0, 1fr); }
}

.mado-site-qa-conditions__title {
    margin: 0;
    color: #1e293b;
    font-size: 14px;
    font-weight: 700;
}

.mado-site-qa-loading-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 18px 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.mado-site-qa-qa-card__top-toggle {
    cursor: pointer;
}

.mado-site-qa-qa-card__top-toggle:focus {
    outline: 2px solid rgba(34, 113, 177, 0.28);
    outline-offset: 3px;
    border-radius: 6px;
}

.mado-site-qa__empty {
    padding: 28px;
    text-align: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}

.mado-site-qa-notice {
    background: #fff7ed;
    border: 1px solid #f59e0b;
    color: #7c2d12;
    max-width: 720px;
    padding: 16px;
    border-radius: 6px;
}

.mado-site-qa-notice__actions {
    margin-top: 12px;
}

#mado-site-qa-message {
    margin-bottom: 14px;
}

.mado-site-qa-notice--warning {
    border: 1px solid #f59e0b;
    background: #fff3cd;
}

#mado-site-qa .mado-site-qa-qa-card.is-editing {
    border-color: #89d3bf;
    box-shadow: 0 16px 32px rgba(21, 128, 61, 0.1);
    grid-column: 1 / -1;
    padding-right: 58px;
}

#mado-site-qa .mado-site-qa-qa-card.is-just-saved {
    border-color: #f3c98b;
    box-shadow: 0 16px 30px rgba(245, 158, 11, 0.12);
}

#mado-site-qa .mado-site-qa-qa-card.is-reference-target {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: var(--mado-brand-accent-soft, #e6fbf9);
    box-shadow: 0 0 0 4px var(--mado-brand-accent-ring, rgba(6, 191, 181, 0.20)),
        0 18px 36px rgba(15, 118, 110, 0.14);
    outline: 0;
}

#mado-site-qa .mado-site-qa-qa-card__eyebrow-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    min-width: 0;
    width: 100%;
    margin: 0;
    text-align: left;
}

#mado-site-qa .mado-site-qa-qa-card__id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid #cfe3d9;
    background: #eefcf4;
    color: #16624b;
}

#mado-site-qa .mado-site-qa-qa-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid #dce5ec;
    background: #f7fafc;
    color: #47596d;
}

#mado-site-qa .mado-site-qa-qa-card__badge.is-saved {
    border-color: #f3d29b;
    background: #fff7eb;
    color: #9a5d02;
}

#mado-site-qa .mado-site-qa-qa-card:not(.is-open) .mado-site-qa-qa-card__header {
    cursor: pointer;
    min-height: 28px;
}

#mado-site-qa .mado-site-qa-qa-card:not(.is-open) .mado-site-qa-qa-card__title {
    cursor: pointer;
}

#mado-site-qa .mado-site-qa-qa-card:not(.is-open) .mado-site-qa-qa-card__preview-grid {
    cursor: pointer;
    grid-column: 1 / -1;
    margin-top: 0;
}

#mado-site-qa .mado-site-qa-qa-card.is-open .mado-site-qa-qa-card__section-text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

#mado-site-qa .mado-site-qa-qa-card__editor-host.is-editor-mounted {
    display: block;
}

#mado-site-qa .mado-site-qa__editor-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid #dbe6ee;
    background: #fbfdff;
    padding: 14px;
    border-radius: 14px;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa__editor-shell.is-card-header-mode .mado-site-qa-editor__header {
    display: none;
}

#mado-site-qa .mado-site-qa__editor-shell .mado-site-qa__form {
    min-width: 0;
    max-width: 100%;
}

#mado-site-qa .mado-site-qa__editor-shell .mado-site-qa__field {
    min-width: 0;
    max-width: 100%;
}

#mado-site-qa .mado-site-qa__editor-shell .mado-site-qa__response-group {
    min-width: 0;
    max-width: 100%;
}

#mado-site-qa .mado-site-qa__editor-shell textarea {
    max-width: 100%;
}

#mado-site-qa .mado-site-qa__editor-shell input[type="text"] {
    max-width: 100%;
}

#mado-site-qa .mado-site-qa__editor-shell select {
    max-width: 100%;
}

#mado-site-qa .mado-site-qa__response-group--answer .mce-tinymce {
    max-width: 100%;
    box-sizing: border-box;
}

#mado-site-qa .mado-site-qa__response-group--answer .mce-container {
    max-width: 100%;
    box-sizing: border-box;
}

#mado-site-qa .mado-site-qa__response-group--answer .mce-container-body {
    max-width: 100%;
    box-sizing: border-box;
}

#mado-site-qa .mado-site-qa__response-group--answer iframe {
    max-width: 100%;
    box-sizing: border-box;
}

#mado-site-qa .mado-site-qa-qa-card__accordion-toggle:hover {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #169a81;
}

#mado-site-qa .mado-site-qa-qa-card__accordion-toggle:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #169a81;
}

#mado-site-qa .mado-site-qa-qa-card__accordion-toggle:active {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #169a81;
}

#mado-site-qa .mado-site-qa-qa-card.is-open .mado-site-qa-qa-card__accordion-toggle svg {
    transform: rotate(180deg);
}


.mado-site-qa .mado-site-qa-csv-upload-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.mado-site-qa .mado-site-qa-category-delete {
    position: relative;
    inline-size: 34px;
    block-size: 34px;
    min-inline-size: 34px;
    min-block-size: 34px;
    padding: 0;
    border-radius: 10px;
    font-size: 0;
    color: #ce2c24;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.mado-site-qa .mado-site-qa-category-delete::before {
    content: "";
    inline-size: 20px;
    block-size: 20px;
    display: block;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3E%3Cpath%20d='M232.7%2069.9C237.1%2056.8%20249.3%2048%20263.1%2048H377C390.8%2048%20403%2056.8%20407.4%2069.9L416%2096H512C529.7%2096%20544%20110.3%20544%20128C544%20145.7%20529.7%20160%20512%20160H128C110.3%20160%2096%20145.7%2096%20128C96%20110.3%20110.3%2096%20128%2096H224L232.7%2069.9ZM128%20208H512V512C512%20547.3%20483.3%20576%20448%20576H192C156.7%20576%20128%20547.3%20128%20512V208ZM216%20272C202.7%20272%20192%20282.7%20192%20296V488C192%20501.3%20202.7%20512%20216%20512C229.3%20512%20240%20501.3%20240%20488V296C240%20282.7%20229.3%20272%20216%20272ZM320%20272C306.7%20272%20296%20282.7%20296%20296V488C296%20501.3%20306.7%20512%20320%20512C333.3%20512%20344%20501.3%20344%20488V296C344%20282.7%20333.3%20272%20320%20272ZM424%20272C410.7%20272%20400%20282.7%20400%20296V488C400%20501.3%20410.7%20512%20424%20512C437.3%20512%20448%20501.3%20448%20488V296C448%20282.7%20437.3%20272%20424%20272Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3E%3Cpath%20d='M232.7%2069.9C237.1%2056.8%20249.3%2048%20263.1%2048H377C390.8%2048%20403%2056.8%20407.4%2069.9L416%2096H512C529.7%2096%20544%20110.3%20544%20128C544%20145.7%20529.7%20160%20512%20160H128C110.3%20160%2096%20145.7%2096%20128C96%20110.3%20110.3%2096%20128%2096H224L232.7%2069.9ZM128%20208H512V512C512%20547.3%20483.3%20576%20448%20576H192C156.7%20576%20128%20547.3%20128%20512V208ZM216%20272C202.7%20272%20192%20282.7%20192%20296V488C192%20501.3%20202.7%20512%20216%20512C229.3%20512%20240%20501.3%20240%20488V296C240%20282.7%20229.3%20272%20216%20272ZM320%20272C306.7%20272%20296%20282.7%20296%20296V488C296%20501.3%20306.7%20512%20320%20512C333.3%20512%20344%20501.3%20344%20488V296C344%20282.7%20333.3%20272%20320%20272ZM424%20272C410.7%20272%20400%20282.7%20400%20296V488C400%20501.3%20410.7%20512%20424%20512C437.3%20512%20448%20501.3%20448%20488V296C448%20282.7%20437.3%20272%20424%20272Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mado-site-qa .mado-site-qa-category-delete:hover {
    background: #fff1f1;
    color: #ce2c24;
    outline: none;
    box-shadow: 0 0 0 2px rgba(206, 44, 36, 0.12);
}

.mado-site-qa .mado-site-qa-category-delete:focus-visible {
    background: #fff1f1;
    color: #ce2c24;
    outline: none;
    box-shadow: 0 0 0 2px rgba(206, 44, 36, 0.12);
}

#mado-site-qa {
    gap: 18px;
    --mado-site-qa-action-green: #18c7a0;
    --mado-site-qa-action-green-hover: #10a987;
    --mado-site-qa-action-height: 38px;
    --mado-site-qa-action-radius: 999px;
    --mado-site-qa-download: #18c7a0;
    --mado-site-qa-download-hover: #10a987;
    --mado-site-qa-action: #0798a7;
    --mado-site-qa-action-hover: #087682;
    --mado-site-qa-control-border: #cbd5e1;
    --mado-site-qa-control-radius: 12px;
    --mado-site-qa-control-height: 42px;
}

#mado-site-qa .mado-site-qa-category-manager {
    margin-bottom: 0;
}

#mado-site-qa .mado-site-qa__top-grid {
    gap: 14px;
}

#mado-site-qa .mado-site-qa__card--tools {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-tools-shell {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-category-accordion {
    border: 1px solid #d7e3ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

#mado-site-qa .mado-site-qa-csv-accordion {
    border: 1px solid #d7e3ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

#mado-site-qa .mado-site-qa-category-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
    min-height: 50px;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-csv-accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
    min-height: 50px;
    padding: 10px 18px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    box-shadow: none;
}

#mado-site-qa details.mado-chat-operation-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 11px 18px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: #ffffff;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
    outline: none;
}

#mado-site-qa details.mado-site-qa-csv-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 11px 18px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: #ffffff;
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
    outline: none;
}

#mado-site-qa .mado-site-qa-category-accordion__summary::-webkit-details-marker {
    display: none;
}

#mado-site-qa .mado-site-qa-csv-accordion__summary::-webkit-details-marker {
    display: none;
}

#mado-site-qa .mado-site-qa-category-accordion__summary::marker {
    content: "";
}

#mado-site-qa .mado-site-qa-csv-accordion__summary::marker {
    content: "";
}

#mado-site-qa .mado-site-qa-category-accordion__summary:focus,
#mado-site-qa .mado-site-qa-csv-accordion__summary:focus {
    outline: none;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-category-accordion__summary:focus-visible,
#mado-site-qa .mado-site-qa-csv-accordion__summary:focus-visible {
    outline: 2px solid rgba(7, 152, 167, 0.42);
    outline-offset: -2px;
    box-shadow: none;
}

#mado-site-qa details[open] > .mado-site-qa-category-accordion__summary,
#mado-site-qa details[open] > .mado-site-qa-csv-accordion__summary {
    background: #ffffff;
    border-bottom-color: #d7e3ee;
}

#mado-site-qa .mado-site-qa-category-accordion__summary-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    font: inherit;
}

#mado-site-qa .mado-site-qa-csv-accordion__summary-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    font: inherit;
}

#mado-site-qa .mado-site-qa-category-accordion__title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    font: inherit;
}

#mado-site-qa .mado-site-qa-category-accordion__title {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}

#mado-site-qa .mado-site-qa-csv-accordion__title {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}

#mado-site-qa .mado-design-accordion-title {
    color: #0f172a;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}

#mado-site-qa .mado-site-qa-category-accordion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
}

#mado-site-qa .mado-site-qa-csv-accordion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
}

#mado-site-qa .mado-site-qa-category-accordion__icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

#mado-site-qa .mado-site-qa-csv-accordion__icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

#mado-site-qa .mado-site-qa-category-accordion__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #0f172a;
}

#mado-site-qa .mado-site-qa-csv-accordion__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #0f172a;
}

#mado-site-qa .mado-chat-operation-accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #0f172a;
}

#mado-site-qa .mado-design-accordion-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #0f172a;
}

#mado-site-qa .mado-site-qa-category-accordion__chevron::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}

#mado-site-qa .mado-site-qa-csv-accordion__chevron::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}

#mado-site-qa .mado-chat-operation-accordion-icon::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}

#mado-site-qa .mado-design-accordion-chevron::before {
    content: "+";
    font-size: 20px;
    line-height: 1;
    font-weight: 900;
}

#mado-site-qa details[open] .mado-site-qa-category-accordion__chevron::before {
    content: "−";
}

#mado-site-qa details[open] .mado-site-qa-csv-accordion__chevron::before {
    content: "−";
}

#mado-site-qa details[open] .mado-chat-operation-accordion-icon::before {
    content: "−";
}

#mado-site-qa details[open] .mado-design-accordion-chevron::before {
    content: "−";
}

#mado-site-qa .mado-site-qa-category-accordion__body {
    padding: 16px 18px 18px;
    border: 0;
    background: #ffffff;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-csv-accordion__body {
    padding: 16px 18px 18px;
    border: 0;
    background: #ffffff;
    box-shadow: none;
    display: grid;
    gap: 16px;
}

#mado-site-qa .button.mado-scenario-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #e9e6ed;
    background-image: none;
    color: #0f172a;
    font-family: var(--mado-portal-font-family);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#mado-site-qa button.mado-scenario-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #e9e6ed;
    background-image: none;
    color: #0f172a;
    font-family: var(--mado-portal-font-family);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#mado-site-qa a.button.mado-scenario-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #e9e6ed;
    background-image: none;
    color: #0f172a;
    font-family: var(--mado-portal-font-family);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#mado-site-qa .button.mado-scenario-button:hover {
    outline: none;
    transform: translateY(-1px);
}

#mado-site-qa button.mado-scenario-button:hover {
    outline: none;
    transform: translateY(-1px);
}

#mado-site-qa a.button.mado-scenario-button:hover {
    outline: none;
    transform: translateY(-1px);
}

#mado-site-qa .button.mado-scenario-button:focus-visible {
    outline: none;
    transform: translateY(-1px);
}

#mado-site-qa button.mado-scenario-button:focus-visible {
    outline: none;
    transform: translateY(-1px);
}

#mado-site-qa a.button.mado-scenario-button:focus-visible {
    outline: none;
    transform: translateY(-1px);
}

#mado-site-qa .button.mado-scenario-button--green {
    background: #18c7a0;
    border-color: #18c7a0;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(12, 229, 187, 0.18);
}

#mado-site-qa button.mado-scenario-button--green {
    background: #18c7a0;
    border-color: #18c7a0;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(12, 229, 187, 0.18);
}

#mado-site-qa a.button.mado-scenario-button--green {
    background: #18c7a0;
    border-color: #18c7a0;
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(12, 229, 187, 0.18);
}

#mado-site-qa .button.mado-scenario-button--green:hover {
    background: #10a987;
    border-color: #10a987;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(12, 229, 187, 0.24);
}

#mado-site-qa button.mado-scenario-button--green:hover {
    background: #10a987;
    border-color: #10a987;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(12, 229, 187, 0.24);
}

#mado-site-qa a.button.mado-scenario-button--green:hover {
    background: #10a987;
    border-color: #10a987;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(12, 229, 187, 0.24);
}

#mado-site-qa .button.mado-scenario-button--green:focus-visible {
    background: #10a987;
    border-color: #10a987;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(12, 229, 187, 0.24);
}

#mado-site-qa button.mado-scenario-button--green:focus-visible {
    background: #10a987;
    border-color: #10a987;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(12, 229, 187, 0.24);
}

#mado-site-qa a.button.mado-scenario-button--green:focus-visible {
    background: #10a987;
    border-color: #10a987;
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(12, 229, 187, 0.24);
}

#mado-site-qa .mado-site-qa-category-manager__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-top: 12px;
}

#mado-site-qa .mado-site-qa-category-manager__item {
    min-height: 58px;
    border: 1px solid #d7e3ee;
    border-radius: 10px;
    background: #ffffff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 12px;
}

#mado-site-qa .mado-site-qa-category-delete {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 34px;
    block-size: 34px;
    min-inline-size: 34px;
    min-block-size: 34px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #ce2c24;
    box-shadow: none;
    font-size: 0;
}

#mado-site-qa .mado-site-qa-category-delete::before {
    content: "";
    display: block;
    inline-size: 20px;
    block-size: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3E%3Cpath%20d='M232.7%2069.9C237.1%2056.8%20249.3%2048%20263.1%2048H377C390.8%2048%20403%2056.8%20407.4%2069.9L416%2096H512C529.7%2096%20544%20110.3%20544%20128C544%20145.7%20529.7%20160%20512%20160H128C110.3%20160%2096%20145.7%2096%20128C96%20110.3%20110.3%2096%20128%2096H224L232.7%2069.9ZM128%20208H512V512C512%20547.3%20483.3%20576%20448%20576H192C156.7%20576%20128%20547.3%20128%20512V208ZM216%20272C202.7%20272%20192%20282.7%20192%20296V488C192%20501.3%20202.7%20512%20216%20512C229.3%20512%20240%20501.3%20240%20488V296C240%20282.7%20229.3%20272%20216%20272ZM320%20272C306.7%20272%20296%20282.7%20296%20296V488C296%20501.3%20306.7%20512%20320%20512C333.3%20512%20344%20501.3%20344%20488V296C344%20282.7%20333.3%20272%20320%20272ZM424%20272C410.7%20272%20400%20282.7%20400%20296V488C400%20501.3%20410.7%20512%20424%20512C437.3%20512%20448%20501.3%20448%20488V296C448%20282.7%20437.3%20272%20424%20272Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20640%20640'%3E%3Cpath%20d='M232.7%2069.9C237.1%2056.8%20249.3%2048%20263.1%2048H377C390.8%2048%20403%2056.8%20407.4%2069.9L416%2096H512C529.7%2096%20544%20110.3%20544%20128C544%20145.7%20529.7%20160%20512%20160H128C110.3%20160%2096%20145.7%2096%20128C96%20110.3%20110.3%2096%20128%2096H224L232.7%2069.9ZM128%20208H512V512C512%20547.3%20483.3%20576%20448%20576H192C156.7%20576%20128%20547.3%20128%20512V208ZM216%20272C202.7%20272%20192%20282.7%20192%20296V488C192%20501.3%20202.7%20512%20216%20512C229.3%20512%20240%20501.3%20240%20488V296C240%20282.7%20229.3%20272%20216%20272ZM320%20272C306.7%20272%20296%20282.7%20296%20296V488C296%20501.3%20306.7%20512%20320%20512C333.3%20512%20344%20501.3%20344%20488V296C344%20282.7%20333.3%20272%20320%20272ZM424%20272C410.7%20272%20400%20282.7%20400%20296V488C400%20501.3%20410.7%20512%20424%20512C437.3%20512%20448%20501.3%20448%20488V296C448%20282.7%20437.3%20272%20424%20272Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#mado-site-qa .mado-site-qa-category-delete:hover {
    background: #fff1f1;
    outline: none;
}

#mado-site-qa .mado-site-qa-category-delete:focus-visible {
    background: #fff1f1;
    outline: none;
}

#mado-site-qa .mado-site-qa-category-delete:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


#mado-site-qa .mado-site-qa__card-header--list {
    flex-wrap: nowrap;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

#mado-site-qa .mado-site-qa__card-header--list .mado-site-qa__card-header-main {
    flex: 0 0 auto;
    min-width: 0;
}

#mado-site-qa .mado-site-qa__card-header--list .mado-site-qa__card-title {
    white-space: nowrap;
}


#mado-site-qa .mado-site-qa-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: currentColor;
}

#mado-site-qa .mado-site-qa-button-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: currentColor;
}

#mado-site-qa .mado-site-qa__editor-action-buttons {
    flex-wrap: wrap;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
}

#mado-site-qa .mado-site-qa__actions--conditions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

#mado-site-qa #mado-site-qa-reset {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mado-site-qa-action-height);
    padding: 8px 18px;
    border: 1px solid #cbd5e1;
    border-radius: var(--mado-site-qa-action-radius);
    background: #ffffff;
    background-image: none;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: none;
    box-shadow: none;
}

#mado-site-qa #mado-site-qa-reset:hover,
#mado-site-qa #mado-site-qa-reset:focus-visible {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #0f172a;
}

#mado-site-qa #mado-site-qa-save {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #18c7a0;
    background-image: none;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-shadow: none;
    min-height: var(--mado-site-qa-action-height);
    padding: 8px 18px;
    border-radius: var(--mado-site-qa-action-radius);
    background: var(--mado-site-qa-action-green);
    border-color: var(--mado-site-qa-action-green);
    color: #ffffff;
    box-shadow: none;
}

#mado-site-qa #mado-site-faq-condition-save {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid #18c7a0;
    border-radius: 999px;
    background: #18c7a0;
    background-image: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-shadow: none;
    box-shadow: 0 14px 28px rgba(12, 229, 187, 0.18);
}

#mado-site-qa #mado-site-qa-save:hover {
    outline: none;
    background: var(--mado-site-qa-action-green-hover);
    border-color: var(--mado-site-qa-action-green-hover);
    color: #ffffff;
    box-shadow: none;
}

#mado-site-qa #mado-site-qa-save:focus-visible {
    outline: none;
    background: var(--mado-site-qa-action-green-hover);
    border-color: var(--mado-site-qa-action-green-hover);
    color: #ffffff;
    box-shadow: none;
}

#mado-site-qa #mado-site-faq-condition-save:hover {
    background: #10a987;
    border-color: #10a987;
    color: #ffffff;
    outline: none;
    box-shadow: 0 16px 30px rgba(12, 229, 187, 0.24);
}

#mado-site-qa #mado-site-faq-condition-save:focus-visible {
    background: #10a987;
    border-color: #10a987;
    color: #ffffff;
    outline: none;
    box-shadow: 0 16px 30px rgba(12, 229, 187, 0.24);
}

#mado-site-qa #mado-site-faq-condition-reset {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid #d7e3ee;
    border-radius: 999px;
    background: #ffffff;
    background-image: none;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-shadow: none;
    box-shadow: none;
}

#mado-site-qa #mado-site-faq-condition-reset:hover {
    border-color: #b8c9db;
    background: #f8fafc;
    color: #0f172a;
    outline: none;
}

#mado-site-qa #mado-site-faq-condition-reset:focus-visible {
    border-color: #b8c9db;
    background: #f8fafc;
    color: #0f172a;
    outline: none;
}

#mado-site-qa .mado-ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--mado-site-qa-action-height);
    padding: 8px 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--mado-site-qa-action-radius);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    transform: none;
    white-space: nowrap;
}

#mado-site-qa .mado-scenario-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--mado-site-qa-action-height);
    padding: 8px 16px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--mado-site-qa-action-radius);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    transform: none;
    white-space: nowrap;
}

#mado-site-qa .mado-ui-button:hover {
    box-shadow: none;
    transform: none;
    outline: none;
}

#mado-site-qa .mado-ui-button:focus-visible {
    box-shadow: none;
    transform: none;
    outline: none;
}

#mado-site-qa .mado-scenario-button:hover {
    box-shadow: none;
    transform: none;
    outline: none;
}

#mado-site-qa .mado-scenario-button:focus-visible {
    box-shadow: none;
    transform: none;
    outline: none;
}

#mado-site-qa .mado-ui-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: currentColor;
}

#mado-site-qa .mado-scenario-button svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: currentColor;
}

#mado-site-qa .mado-site-qa__actions--main {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

#mado-site-qa .mado-site-qa__action-category {
    display: grid;
    gap: 6px;
    flex: 0 1 320px;
    max-width: none;
}

#mado-site-qa .mado-site-qa__action-category-select {
    appearance: none;
    padding-right: 48px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px 16px;
}

#mado-site-qa .mado-site-qa-qa-card.is-open .mado-site-qa-qa-card__secondary-actions {
    position: absolute;
    top: 14px;
    right: 14px;
}

#mado-site-qa .mado-site-qa-qa-card.is-editing .mado-site-qa-qa-card__secondary-actions {
    position: absolute;
    top: 14px;
    right: 14px;
}

#mado-site-qa .mado-site-qa__help-chip {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    margin: 0 0 0 2px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0f7a5a;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    pointer-events: auto;
}

#mado-site-qa .mado-site-qa__help-chip::before {
    content: none;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa__help-chip::after {
    content: none;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa__help-chip .mado-site-qa__help-chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    border: 1px solid #72c79c;
    border-radius: 999px;
    background: #e8fbf1;
    color: #15803d;
    box-shadow: 0 6px 14px rgba(21, 128, 61, 0.12);
    font-family: var(--mado-portal-font-family, "Noto Sans JP", "Noto Sans", sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#mado-site-qa .mado-site-qa__help-chip:hover .mado-site-qa__help-chip-mark {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(21, 128, 61, 0.22);
    transform: translateY(-1px);
}

#mado-site-qa .mado-site-qa__help-chip:focus-visible .mado-site-qa__help-chip-mark {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(21, 128, 61, 0.22);
    transform: translateY(-1px);
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

#mado-site-qa .mado-site-qa__help-chip.is-open .mado-site-qa__help-chip-mark {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(21, 128, 61, 0.22);
    transform: translateY(-1px);
}

#mado-site-qa .mado-site-qa__help-chip:focus-visible {
    outline: none;
}

body .mado-help-chip-popover__title {
    margin-bottom: 8px;
    color: #111827;
    font-weight: 700;
}

body .mado-help-chip-popover__line + .mado-help-chip-popover__line {
    margin-top: 4px;
}

body .mado-help-chip-popover__line strong {
    color: #0f172a;
    font-weight: 800;
}

#mado-site-qa #mado-site-qa-question {
    font-size: 15px;
    line-height: 1.65;
}

#mado-site-qa #mado-site-qa-patterns {
    font-size: 15px;
    line-height: 1.65;
}

#mado-site-qa #mado-site-qa-answer {
    font-family: var(--mado-portal-font-family, "Noto Sans JP", "Noto Sans", system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.7;
}

#mado-site-qa #mado-site-qa-category {
    font-size: 15px;
}

#mado-site-qa #mado-site-qa-category option {
    font-size: 15px;
}

#mado-site-qa .mado-site-qa-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin-top: 14px;
}

#mado-site-qa .mado-site-qa-qa-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 16px;
    border: 1px solid #d7e4ed;
    border-radius: 16px;
    background: #ffffff;
    text-align: left;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#mado-site-qa .mado-site-qa-qa-card:not(.is-open) {
    gap: 5px;
    padding: 11px 14px 7px;
}

#mado-site-qa .mado-site-qa-qa-card.is-open {
    grid-column: 1 / -1;
    grid-template-rows: auto auto auto;
    height: auto;
    padding-right: 58px;
}

#mado-site-qa .mado-site-qa-qa-card__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    min-height: 30px;
    margin: 0;
    cursor: pointer;
}

#mado-site-qa .mado-site-qa-qa-card__title {
    min-width: 0;
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: anywhere;
}

#mado-site-qa .mado-site-qa-qa-card__preview-grid {
    grid-column: 1 / -1;
    min-height: 64px;
    margin-top: 0;
}

#mado-site-qa .mado-site-qa-qa-card__preview {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fbfd;
}

#mado-site-qa .mado-site-qa-qa-card:not(.is-open) .mado-site-qa-qa-card__preview {
    gap: 5px;
    padding: 7px 10px;
    border-radius: 11px;
}

#mado-site-qa .mado-site-qa-qa-card__section-text {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 500;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

#mado-site-qa .mado-site-qa-qa-card:not(.is-open) .mado-site-qa-qa-card__section-text {
    line-height: 1.45;
    -webkit-line-clamp: 2;
}

#mado-site-qa .mado-site-qa-qa-card__editor-host {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin-top: 8px;
    overflow: visible;
}

#mado-site-qa .mado-site-qa-qa-card__action-band {
    grid-column: 1 / -1;
    align-self: end;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 26px;
    margin-top: 5px;
    padding-top: 6px;
    border-top: 1px solid #e4ebf2;
}

#mado-site-qa .mado-site-qa-qa-card:not(.is-open) .mado-site-qa-qa-card__action-band {
    min-height: 23px;
    height: 27px;
    margin-top: 1px;
    padding-top: 4px;
    overflow: hidden;
}

#mado-site-qa .mado-site-qa-qa-card__accordion-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    justify-self: center;
    width: 28px;
    min-width: 28px;
    height: 24px;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #0f172a;
    cursor: pointer;
}

#mado-site-qa .mado-site-qa-qa-card__accordion-toggle svg {
    width: 14px;
    height: 14px;
}

#mado-site-qa .mado-site-qa-qa-card__secondary-actions {
    display: flex;
    grid-column: 3;
    justify-self: end;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: 0;
}

#mado-site-qa .mado-site-qa-csv-accordion--scenario-like .mado-site-qa-csv-accordion__body {
    display: grid;
    gap: 16px;
    padding: 20px;
    background: #f2f3f4;
}

#mado-site-qa .mado-site-qa-csv-accordion--scenario-like .mado-site-qa-csv-accordion__description {
    margin: 0;
    margin-bottom: 16px;
    color: #334155;
    font-size: 13px;
    line-height: 1.65;
}

#mado-site-qa .mado-site-qa-csv-accordion--scenario-like .mado-scenario-card__description {
    margin: 0;
    margin-bottom: 16px;
    color: #334155;
    font-size: 13px;
    line-height: 1.65;
}

#mado-site-qa .mado-site-qa-csv-accordion--scenario-like .mado-site-qa-csv-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

#mado-site-qa .mado-site-qa-csv-accordion--scenario-like .mado-scenario-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* Q&A AI AUDIT ACCORDION / Q&A AI監査アコーディオン（2026-07-23）
 * - 閉じた状態を初期表示にし、summary内のAI実行ボタンは常に操作可能にする。
 * - AI色・薄い面グラデーション・10秒の動きはmado-base.cssの共通SSOTだけが所有する。
 * - このファイルはQ&A画面固有の寸法、開閉、結果一覧、レスポンシブだけを担当する。
 * - 監査結果は確認用で、自動保存・削除・上書き操作を持たない。
 */
#mado-site-qa details.mado-site-qa-audit {
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
}

#mado-site-qa details.mado-site-qa-audit > .mado-site-qa-audit__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    padding: 8px 16px 8px 18px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: #0f172a;
    list-style: none;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-audit__summary-row::-webkit-details-marker {
    display: none;
}

#mado-site-qa .mado-site-qa-audit__summary-row::marker {
    content: "";
}

#mado-site-qa .mado-site-qa-audit__summary-row:focus {
    outline: none;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-audit__summary-row:focus-visible {
    outline: 2px solid rgba(104, 118, 201, 0.34);
    outline-offset: -2px;
}

#mado-site-qa details.mado-site-qa-audit[open] > .mado-site-qa-audit__summary-row {
    border-bottom-color: rgba(105, 132, 201, 0.16);
}

#mado-site-qa .mado-site-qa-audit__heading-group {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

#mado-site-qa .mado-site-qa-audit__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(104, 118, 201, 0.16);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.72);
    color: #6f66b5;
}

#mado-site-qa .mado-site-qa-audit__icon svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: currentColor;
}

#mado-site-qa .mado-site-qa-audit__title {
    min-width: 0;
    color: #182238;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}

#mado-site-qa .mado-site-qa-audit__summary-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

#mado-site-qa .mado-site-qa-audit__start {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 17px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(102, 105, 190, 0.16);
}

#mado-site-qa .mado-site-qa-audit__chevron {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #0f172a;
}

#mado-site-qa .mado-site-qa-audit__chevron::before {
    content: "+";
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

#mado-site-qa details.mado-site-qa-audit[open] .mado-site-qa-audit__chevron::before {
    content: "−";
}

#mado-site-qa .mado-site-qa-audit__body {
    display: grid;
    gap: 0;
    padding: 16px 20px 18px;
    background: rgba(255, 255, 255, 0.46);
}

#mado-site-qa .mado-site-qa-audit__description {
    margin: 0 0 12px;
    color: #59677b;
    font-size: 13px;
    line-height: 1.7;
}

#mado-site-qa .mado-site-qa-audit__status {
    min-height: 0;
    margin: 0;
    color: #526173;
    font-size: 13px;
    line-height: 1.65;
}

#mado-site-qa .mado-site-qa-audit__status:not(:empty) {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid rgba(104, 118, 201, 0.12);
}

#mado-site-qa .mado-site-qa-audit__status.is-running {
    color: #5564a2;
}

#mado-site-qa .mado-site-qa-audit__status.is-success {
    color: #13795b;
}

#mado-site-qa .mado-site-qa-audit__status.is-error {
    color: #b42318;
}

#mado-site-qa .mado-site-qa-audit__results {
    display: grid;
    gap: 16px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(104, 118, 201, 0.14);
}

#mado-site-qa .mado-site-qa-audit__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

#mado-site-qa .mado-site-qa-audit__summary-item {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
}

#mado-site-qa .mado-site-qa-audit__summary-item span {
    color: #68758a;
    font-size: 12px;
    line-height: 1.35;
}

#mado-site-qa .mado-site-qa-audit__summary-item strong {
    color: #172033;
    font-size: 18px;
    font-weight: 780;
    line-height: 1.2;
}

#mado-site-qa .mado-site-qa-audit__notice {
    padding: 11px 13px;
    border: 1px solid #f0d9a5;
    border-radius: 10px;
    background: #fffaf0;
    color: #785b17;
    font-size: 13px;
    line-height: 1.65;
}

#mado-site-qa .mado-site-qa-audit__groups {
    display: grid;
    gap: 14px;
}

#mado-site-qa .mado-site-qa-audit__group {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.78);
}

#mado-site-qa .mado-site-qa-audit__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.72);
}

#mado-site-qa .mado-site-qa-audit__group-title {
    margin: 0;
    color: #263246;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.4;
}

#mado-site-qa .mado-site-qa-audit__group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(103, 106, 188, 0.09);
    color: #5a5e9c;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
}

#mado-site-qa .mado-site-qa-audit__issue-list {
    display: grid;
    gap: 10px;
    padding: 12px;
}

#mado-site-qa .mado-site-qa-audit__issue {
    display: grid;
    gap: 8px;
    padding: 13px 14px;
    border: 1px solid #e4eaf1;
    border-left-width: 3px;
    border-radius: 10px;
    background: #ffffff;
}

#mado-site-qa .mado-site-qa-audit__issue.is-high {
    border-left-color: #d65a55;
}

#mado-site-qa .mado-site-qa-audit__issue.is-medium {
    border-left-color: #d49b35;
}

#mado-site-qa .mado-site-qa-audit__issue.is-low {
    border-left-color: #55a6b8;
}

#mado-site-qa .mado-site-qa-audit__issue-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
}

#mado-site-qa .mado-site-qa-audit__issue-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

#mado-site-qa .mado-site-qa-audit__severity,
#mado-site-qa .mado-site-qa-audit__similarity {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

#mado-site-qa .mado-site-qa-audit__severity.is-high {
    background: #fff0ef;
    color: #a63e39;
}

#mado-site-qa .mado-site-qa-audit__severity.is-medium {
    background: #fff7e8;
    color: #8c6219;
}

#mado-site-qa .mado-site-qa-audit__severity.is-low,
#mado-site-qa .mado-site-qa-audit__similarity {
    background: #edf8fa;
    color: #347183;
}

#mado-site-qa .mado-site-qa-audit__issue-title {
    margin: 0;
    color: #1d2939;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
}

#mado-site-qa .mado-site-qa-audit__targets {
    display: grid;
    gap: 8px;
    margin-top: 3px;
}

#mado-site-qa .mado-site-qa-audit__targets-label {
    color: #334155;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
}

#mado-site-qa .mado-site-qa-audit__qa-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
}

#mado-site-qa a.mado-site-qa-audit__qa-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "id title action";
    align-items: center;
    gap: 10px 14px;
    width: 100%;
    min-width: 0;
    min-height: 60px;
    padding: 11px 13px;
    border: 1px solid var(--mado-brand-accent-border, #b9eeea);
    border-radius: 12px;
    background: #ffffff;
    background-image: none;
    color: #0f172a;
    font: inherit;
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#mado-site-qa a.mado-site-qa-audit__qa-link:hover,
#mado-site-qa a.mado-site-qa-audit__qa-link:focus-visible {
    border-color: var(--mado-brand-accent, #06bfb5);
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: #0f172a;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.12);
    transform: translateY(-1px);
    outline: 0;
}

#mado-site-qa .mado-site-qa-audit__qa-link-id {
    grid-area: id;
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--mado-brand-accent-soft, #e6fbf9);
    color: var(--mado-brand-accent-text, #129f9e);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

#mado-site-qa .mado-site-qa-audit__qa-link-title {
    grid-area: title;
    min-width: 0;
    color: #172033;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

#mado-site-qa .mado-site-qa-audit__qa-link-action {
    grid-area: action;
    justify-self: end;
    color: var(--mado-brand-accent-text, #129f9e);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 720px) {
    #mado-site-qa a.mado-site-qa-audit__qa-link {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "id action"
            "title title";
    }
}

#mado-site-qa .mado-site-qa-audit__issue-summary,
#mado-site-qa .mado-site-qa-audit__matched,
#mado-site-qa .mado-site-qa-audit__comparison p {
    margin: 0;
    color: #4f5f72;
    font-size: 13px;
    line-height: 1.7;
}

#mado-site-qa .mado-site-qa-audit__matched,
#mado-site-qa .mado-site-qa-audit__comparison {
    padding: 9px 11px;
    border-radius: 8px;
    background: #f8fafc;
}

#mado-site-qa .mado-site-qa-audit__comparison {
    display: grid;
    gap: 5px;
}

#mado-site-qa .mado-site-qa-audit__sources {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    color: #59677b;
    font-size: 12px;
    line-height: 1.6;
}

#mado-site-qa .mado-site-qa-audit__sources a {
    color: #246b9a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#mado-site-qa .mado-site-qa-audit__empty {
    margin: 0;
    padding: 6px 2px;
    color: #7a8798;
    font-size: 13px;
    line-height: 1.6;
}


#mado-site-qa .mado-site-qa-list-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#mado-site-qa .mado-site-qa-list-title__icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

#mado-site-qa .mado-site-qa-list-title__icon svg {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

#mado-site-qa .mado-site-qa-category-manager__form {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 250px;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
}

#mado-site-qa .mado-site-qa-category-manager__form .mado-site-qa__input {
    width: 100%;
    max-width: none;
    min-height: var(--mado-site-qa-control-height);
    padding: 8px 12px;
    border: 1px solid var(--mado-site-qa-control-border);
    border-radius: var(--mado-site-qa-control-radius);
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}

#mado-site-qa button#mado-site-qa-category-add {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 250px;
    min-width: 250px;
    min-height: var(--mado-site-qa-control-height);
    margin: 0;
    padding: 9px 18px;
    border: 1.5px solid var(--mado-site-qa-action);
    border-radius: 999px;
    background: #ffffff;
    background-image: none;
    color: var(--mado-site-qa-action);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}

#mado-site-qa button#mado-site-qa-csv-import-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 250px;
    min-width: 250px;
    min-height: var(--mado-site-qa-control-height);
    margin: 0;
    padding: 9px 18px;
    border: 1.5px solid var(--mado-site-qa-action);
    border-radius: 999px;
    background: #ffffff;
    background-image: none;
    color: var(--mado-site-qa-action);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}

#mado-site-qa button.mado-site-qa-csv-import-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 250px;
    min-width: 250px;
    min-height: var(--mado-site-qa-control-height);
    margin: 0;
    padding: 9px 18px;
    border: 1.5px solid var(--mado-site-qa-action);
    border-radius: 999px;
    background: #ffffff;
    background-image: none;
    color: var(--mado-site-qa-action);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}

#mado-site-qa button.mado-scenario-csv-import-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 250px;
    min-width: 250px;
    min-height: var(--mado-site-qa-control-height);
    margin: 0;
    padding: 9px 18px;
    border: 1.5px solid var(--mado-site-qa-action);
    border-radius: 999px;
    background: #ffffff;
    background-image: none;
    color: var(--mado-site-qa-action);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}

#mado-site-qa button#mado-site-qa-category-add:hover {
    border-color: var(--mado-site-qa-action-hover);
    background: #eefbfd;
    color: var(--mado-site-qa-action-hover);
    box-shadow: none;
    transform: none;
}

#mado-site-qa button#mado-site-qa-category-add:focus-visible {
    border-color: var(--mado-site-qa-action-hover);
    background: #eefbfd;
    color: var(--mado-site-qa-action-hover);
    box-shadow: none;
    transform: none;
}

#mado-site-qa button#mado-site-qa-csv-import-btn:hover {
    border-color: var(--mado-site-qa-action-hover);
    background: #eefbfd;
    color: var(--mado-site-qa-action-hover);
    box-shadow: none;
    transform: none;
}

#mado-site-qa button#mado-site-qa-csv-import-btn:focus-visible {
    border-color: var(--mado-site-qa-action-hover);
    background: #eefbfd;
    color: var(--mado-site-qa-action-hover);
    box-shadow: none;
    transform: none;
}

#mado-site-qa button.mado-site-qa-csv-import-button:hover {
    border-color: var(--mado-site-qa-action-hover);
    background: #eefbfd;
    color: var(--mado-site-qa-action-hover);
    box-shadow: none;
    transform: none;
}

#mado-site-qa button.mado-site-qa-csv-import-button:focus-visible {
    border-color: var(--mado-site-qa-action-hover);
    background: #eefbfd;
    color: var(--mado-site-qa-action-hover);
    box-shadow: none;
    transform: none;
}

#mado-site-qa button.mado-scenario-csv-import-button:hover {
    border-color: var(--mado-site-qa-action-hover);
    background: #eefbfd;
    color: var(--mado-site-qa-action-hover);
    box-shadow: none;
    transform: none;
}

#mado-site-qa button.mado-scenario-csv-import-button:focus-visible {
    border-color: var(--mado-site-qa-action-hover);
    background: #eefbfd;
    color: var(--mado-site-qa-action-hover);
    box-shadow: none;
    transform: none;
}

#mado-site-qa .mado-site-qa-category-manager__item-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.65em;
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
}

#mado-site-qa .mado-site-qa-category-manager__item-main strong {
    font-size: 15px;
    line-height: 1.5;
}

#mado-site-qa .mado-site-qa-category-manager__item-main span {
    font-size: 15px;
    line-height: 1.5;
}

/*
 * CSV PANEL LAYOUT / 2026-09-17:
 * - 上段は「現在CSV」「アップロード」の2導線。Google SheetsはOAuth/API未実装中は表示しない。
 * - 下段は選択ファイル名と取込ボタンを中央にまとめ、左右へ離しすぎない。
 * - 雛形CSV導線は廃止。0件サイトのヘッダーだけCSVもPHP側で生成しない。
 */
#mado-site-qa .mado-site-qa-csv-layout,
#mado-site-qa .mado-scenario-csv-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "current upload";
    align-items: center;
    width: 100%;
    min-width: 0;
}

#mado-site-qa .mado-site-qa-csv-import-row {
    display: grid;
    grid-template-columns: minmax(360px, 520px) 250px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-width: 0;
    margin-top: 18px;
}

#mado-site-qa .mado-site-qa-csv-action {
    position: relative;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}

#mado-site-qa .mado-scenario-csv-action {
    position: relative;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}

#mado-site-qa .mado-site-qa-csv-action::before {
    content: none;
}

#mado-site-qa .mado-scenario-csv-action::before {
    content: none;
}

#mado-site-qa .mado-site-qa-csv-action--upload::before,
#mado-site-qa .mado-scenario-csv-action--upload::before {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 0;
    width: 2px;
    background: var(--mado-site-qa-action);
    opacity: 0.72;
}

#mado-site-qa .mado-site-qa-csv-action--current,
#mado-site-qa .mado-scenario-csv-action--current {
    grid-area: current;
    color: var(--mado-site-qa-download);
}

#mado-site-qa .mado-site-qa-csv-action--upload,
#mado-site-qa .mado-scenario-csv-action--upload {
    grid-area: upload;
    color: var(--mado-site-qa-action);
}

#mado-site-qa .mado-site-qa-csv-action:hover {
    background: rgba(7, 152, 167, 0.07);
    box-shadow: none;
    transform: none;
}

#mado-site-qa .mado-site-qa-csv-action:focus-visible {
    background: rgba(7, 152, 167, 0.07);
    box-shadow: none;
    transform: none;
}

#mado-site-qa .mado-scenario-csv-action:hover {
    background: rgba(7, 152, 167, 0.07);
    box-shadow: none;
    transform: none;
}

#mado-site-qa .mado-scenario-csv-action:focus-visible {
    background: rgba(7, 152, 167, 0.07);
    box-shadow: none;
    transform: none;
}


#mado-site-qa .mado-site-qa-csv-action--current:hover {
    color: var(--mado-site-qa-download-hover);
}

#mado-site-qa .mado-site-qa-csv-action--current:focus-visible {
    color: var(--mado-site-qa-download-hover);
}


#mado-site-qa .mado-scenario-csv-action--current:hover {
    color: var(--mado-site-qa-download-hover);
}

#mado-site-qa .mado-scenario-csv-action--current:focus-visible {
    color: var(--mado-site-qa-download-hover);
}

#mado-site-qa .mado-site-qa-csv-action--upload:hover,
#mado-site-qa .mado-scenario-csv-action--upload:hover {
    color: var(--mado-site-qa-action-hover);
}

#mado-site-qa .mado-site-qa-csv-action--upload:focus-visible,
#mado-site-qa .mado-scenario-csv-action--upload:focus-visible {
    color: var(--mado-site-qa-action-hover);
}

#mado-site-qa .mado-site-qa-csv-action__icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

#mado-site-qa .mado-scenario-csv-action__icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

#mado-site-qa .mado-site-qa-csv-file-control {
    display: flex;
    justify-content: stretch;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0;
}

#mado-site-qa .mado-scenario-csv-file-control {
    display: flex;
    justify-content: stretch;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0;
}

#mado-site-qa .mado-site-qa-csv-upload-name {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: var(--mado-site-qa-control-height);
    padding: 8px 12px;
    border: 1px solid var(--mado-site-qa-control-border);
    border-radius: var(--mado-site-qa-control-radius);
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-site-qa .mado-scenario-upload-name {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: var(--mado-site-qa-control-height);
    padding: 8px 12px;
    border: 1px solid var(--mado-site-qa-control-border);
    border-radius: var(--mado-site-qa-control-radius);
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mado-site-qa .mado-site-qa-csv-upload-name.is-empty {
    color: #64748b;
}

#mado-site-qa .mado-scenario-upload-name.is-empty {
    color: #64748b;
}

#mado-site-qa .mado-site-qa-csv-upload-name.is-invalid {
    border-color: #dc2626;
    background: #fff7f7;
    color: #b91c1c;
}

#mado-site-qa .mado-site-qa-csv-import-button:disabled,
#mado-site-qa .mado-scenario-csv-import-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

#mado-site-qa .mado-site-qa-list-toolbar {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

#mado-site-qa .mado-site-qa-list-toolbar__filters {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.2fr);
    gap: 12px;
    min-width: 0;
}

#mado-site-qa .mado-site-qa-list-toolbar__field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#mado-site-qa .mado-site-qa-list-toolbar__label {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

#mado-site-qa .mado-site-qa-list-toolbar__control {
    width: 100%;
    min-width: 0;
    min-height: var(--mado-site-qa-control-height);
    padding: 8px 14px;
    border: 1px solid var(--mado-site-qa-control-border);
    border-radius: var(--mado-site-qa-control-radius);
    background-color: #ffffff;
    color: #0f172a;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    box-shadow: none;
}

#mado-site-qa .mado-site-qa-list-toolbar__control:focus {
    border-color: #0798a7;
    outline: 3px solid rgba(7, 152, 167, 0.16);
    outline-offset: 0;
}

#mado-site-qa .mado-site-qa-list-toolbar__select {
    appearance: none;
    padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px 16px;
}

#mado-site-qa .mado-site-qa-list-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    border-top: 1px solid var(--mado-site-qa-control-border);
    border-bottom: 1px solid var(--mado-site-qa-control-border);
}

#mado-site-qa .mado-site-qa-list-toolbar__summary {
    min-height: 20px;
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
}

#mado-site-qa .mado-site-qa-list-action {
    position: relative;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 8px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}

#mado-site-qa .mado-site-qa-list-action + .mado-site-qa-list-action::before {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 0;
    width: 2px;
    background: var(--mado-site-qa-action);
}

#mado-site-qa .mado-site-qa-list-action--template {
    width: 100%;
    height: 100%;
    align-self: stretch;
    background: #eefaff;
    background-clip: border-box;
    color: var(--mado-site-qa-action);
}

#mado-site-qa .mado-site-qa-list-action--create {
    background: #eefaff;
    color: var(--mado-site-qa-action);
}

#mado-site-qa .mado-site-qa-list-action--download {
    background: #eefbf7;
    color: var(--mado-site-qa-download);
}

#mado-site-qa .mado-site-qa-list-action:hover {
    box-shadow: none;
    transform: none;
}

#mado-site-qa .mado-site-qa-list-action:focus-visible {
    box-shadow: none;
    transform: none;
    outline: 3px solid rgba(7, 152, 167, 0.30);
    outline-offset: -3px;
}

#mado-site-qa .mado-site-qa-list-action--template:hover {
    background: #d7f2f9;
    color: var(--mado-site-qa-action-hover);
    outline: none;
}

#mado-site-qa .mado-site-qa-list-action--template:focus-visible {
    background: #d7f2f9;
    color: var(--mado-site-qa-action-hover);
}

#mado-site-qa .mado-site-qa-list-action--create:hover,
#mado-site-qa .mado-site-qa-list-action--create:focus-visible {
    background: #dff5fb;
    color: var(--mado-site-qa-action-hover);
}

#mado-site-qa .mado-site-qa-list-action--download:hover,
#mado-site-qa .mado-site-qa-list-action--download:focus-visible {
    background: #ddf7ef;
    color: var(--mado-site-qa-download-hover);
}

#mado-site-qa .mado-site-qa-list-action__icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

#mado-site-qa .mado-site-qa-list-action__icon svg {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    fill: currentColor;
}

#mado-site-qa .mado-site-qa-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #dbe5ef;
}

#mado-site-qa .mado-site-qa-pagination__numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

#mado-site-qa .mado-site-qa-pagination__button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    margin: 0;
    padding: 7px 12px;
    border: 1px solid #cbd8e4;
    border-radius: 10px;
    background: #f8fbfd;
    color: #0f5268;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

#mado-site-qa .mado-site-qa-pagination__button--direction {
    min-width: 72px;
    background: #eefaff;
}

#mado-site-qa .mado-site-qa-pagination__button:hover,
#mado-site-qa .mado-site-qa-pagination__button:focus-visible {
    border-color: #0798a7;
    background: #dff5fb;
    color: #087682;
    outline: 3px solid rgba(7, 152, 167, 0.22);
    outline-offset: 1px;
}

#mado-site-qa .mado-site-qa-pagination__button.is-current,
#mado-site-qa .mado-site-qa-pagination__button.is-current:hover,
#mado-site-qa .mado-site-qa-pagination__button.is-current:focus-visible {
    border-color: #0798a7;
    background: #0798a7;
    color: #ffffff;
    outline: none;
}

#mado-site-qa .mado-site-qa-pagination__button:disabled {
    cursor: default;
    opacity: 0.45;
}

#mado-site-qa .mado-site-qa-pagination__button.is-current:disabled {
    opacity: 1;
}

#mado-site-qa .mado-site-qa-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
}

@media (max-width: 782px) {
    .mado-site-qa {
        padding: 20px;
        margin-bottom: 18px;
        border-radius: 16px;
    }

    .mado-site-qa__card-header {
        display: grid;
    }


    .mado-site-qa__grid {
        grid-template-columns: 1fr;
    }

    .mado-ui-confirm-modal {
        padding: 16px;
    }


    #mado-site-qa .mado-site-qa-category-manager__list {
        grid-template-columns: minmax(0, 1fr);
    }

    #mado-site-qa .mado-site-qa-qa-card {
        padding-left: 12px;
        padding-right: 12px;
    }

    #mado-site-qa .mado-site-qa-qa-card:not(.is-open) {
        padding-left: 12px;
        padding-right: 12px;
    }
}


@media (max-width: 1180px) {
    #mado-site-qa .mado-site-qa-card-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    #mado-site-qa .mado-site-qa-list-toolbar__filters {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 760px) {
    #mado-site-qa .mado-site-qa-category-manager__form {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    #mado-site-qa .mado-site-qa-csv-layout,
    #mado-site-qa .mado-scenario-csv-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "current" "upload" "sheets";
        row-gap: 0;
    }

    #mado-site-qa .mado-site-qa-csv-import-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin-top: 14px;
    }

    #mado-site-qa button#mado-site-qa-category-add {
        width: 100%;
        min-width: 0;
    }

    #mado-site-qa button#mado-site-qa-csv-import-btn {
        width: 100%;
        min-width: 0;
    }

    #mado-site-qa button.mado-site-qa-csv-import-button {
        width: 100%;
        min-width: 0;
    }

    #mado-site-qa button.mado-scenario-csv-import-button {
        width: 100%;
        min-width: 0;
    }

    #mado-site-qa .mado-site-qa-csv-action--upload::before {
        top: 0;
        bottom: auto;
        left: 25%;
        width: 50%;
        height: 1px;
    }

    #mado-site-qa .mado-scenario-csv-action--upload::before {
        top: 0;
        bottom: auto;
        left: 25%;
        width: 50%;
        height: 1px;
    }

    #mado-site-qa .mado-site-qa-csv-file-control {
        padding: 0;
    }

    #mado-site-qa .mado-scenario-csv-file-control {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 0;
    }

    #mado-site-qa .mado-site-qa-csv-upload-name {
        max-width: none;
    }

    #mado-site-qa .mado-scenario-upload-name {
        max-width: none;
    }
}

@media (max-width: 900px) {
    #mado-site-qa details.mado-site-qa-audit > .mado-site-qa-audit__summary-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #mado-site-qa .mado-site-qa-audit__summary-actions {
        margin-left: auto;
    }

    #mado-site-qa .mado-site-qa-audit__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #mado-site-qa details.mado-site-qa-audit > .mado-site-qa-audit__summary-row {
        padding: 10px 12px;
    }

    #mado-site-qa .mado-site-qa-audit__heading-group {
        align-items: center;
    }

    #mado-site-qa .mado-site-qa-audit__summary-actions {
        width: 100%;
        margin-left: 0;
    }

    #mado-site-qa .mado-site-qa-audit__start {
        flex: 1 1 auto;
        width: auto;
        white-space: normal;
    }

    #mado-site-qa .mado-site-qa-audit__body {
        padding: 14px;
    }

    #mado-site-qa .mado-site-qa-audit__summary {
        grid-template-columns: minmax(0, 1fr);
    }

    #mado-site-qa .mado-site-qa-audit__issue-head {
        flex-direction: column;
    }

    #mado-site-qa .mado-site-qa-pagination {
        align-items: stretch;
        gap: 8px;
    }

    #mado-site-qa .mado-site-qa-pagination__numbers {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    #mado-site-qa .mado-site-qa-pagination__button--direction {
        min-width: 64px;
        padding-right: 9px;
        padding-left: 9px;
    }

    #mado-site-qa .mado-site-qa-list-toolbar__field {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    #mado-site-qa .mado-site-qa-list-toolbar__actions {
        grid-template-columns: minmax(0, 1fr);
    }

    #mado-site-qa .mado-site-qa-list-action {
        justify-content: flex-start;
        min-height: 48px;
        padding-right: 12px;
        padding-left: 12px;
    }

    #mado-site-qa .mado-site-qa-list-action + .mado-site-qa-list-action::before {
        top: 0;
        bottom: auto;
        left: 25%;
        width: 50%;
        height: 1px;
    }

    #mado-site-qa .mado-site-qa-qa-card__eyebrow-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #mado-site-qa .mado-site-qa-qa-card__eyebrow-row .mado-site-qa-qa-card__badge {
        grid-column: 1 / -1;
        justify-self: start;
    }
}