/* ============================================================
   AI 자가진단 — [mx_ai_diagnosis]
   2026-07-27 브라이언님 피그마 반영: 크림(#F7F5F0) + 딥네이비(#0F1B2D, 버튼/선택상태/
   강조) + 골드(#B8924F, eyebrow/라벨 전용) 팔레트로 교체. 로딩 화면의 teal(#2D7D6B)은
   "완료" 단계 전용 색상. 변수명은 --mx-purple/--mx-purple-soft로 남아있지만 실제 값은
   네이비임(과거 퍼플→인디고바이올렛 시절 이름이 그대로 유지된 것) — --mx-gold가 새로
   추가된 라벨 전용 색상.
   ============================================================ */

/* core/elements.css의 ".entry-content section{padding-bottom:100px}"이
   특정도(클래스1+요소1)로 이미 걸려있어서, 같은 만큼 구체화해서 눌러줌
   (그냥 ".mx-diag-section{padding-bottom:0}"만으론 특정도가 못 미쳐 안 먹음). */
.entry-content section.mx-diag-section {
    padding-bottom: 0;
}

.mx-diag {
    /* 카드가 섹션 배경(#ebebeb)과 똑같은 색+radius:0+그림자 없음이라 "그냥 빈
       회색 구간"처럼 눈에 안 띈다는 피드백 — 흰 surface + radius + 그림자로
       배경 위에 떠 있는 카드로 다시 분리(이 페이지 성공사례 카드 .mwl-case와
       동일한 그림자 값을 써서 톤을 맞춤). 섹션은 계속 #ebebeb로 두고 카드만
       흰색으로 대비를 만드는 의도적 설계 — 예전에 있었던 "카드=섹션과 다른
       회색이라 이중박스로 보임" 문제와는 다름(그땐 색이 어중간하게 달라서
       충돌처럼 보였고, 지금은 흰색+그림자로 명확한 "떠 있는 카드"임을 알림). */
    --mx-cream: #FFFFFF;
    --mx-ink: #000000;
    --mx-purple: #0F1B2D;
    --mx-purple-soft: #E7E9EC;
    --mx-purple-soft-ink: #0F1B2D;
    --mx-gold: #B8924F;
    --mx-teal: #2D7D6B;
    --mx-teal-soft: #ECF3F0;
    --mx-muted: #A8A498;
    --mx-body: #6B6459;
    --mx-line: #D3D1C8;

    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.10);
    padding: 40px 32px;
}

/* 화면(인트로/퀴즈/결과)마다 자기 폭을 스스로 갖는다 — .mx-diag 자체는 항상 부모 폭에 꽉 채움 */
.mx-diag-screen {
    max-width: 640px;
    margin: 0 auto;
}

.mx-hidden {
    display: none !important;
}

.mx-diag-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mx-diag-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* 단색 --mx-gold 대신 히어로 타이틀과 같은 그라디언트 골드 텍스트로 톤 통일
       (아이콘은 빼는 게 낫다는 피드백에 제거, 대신 텍스트 자체를 그라디언트로). */
    background-image: linear-gradient(90deg, rgba(243, 217, 184, 1) 0%, rgba(190, 139, 105, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* 타이틀의 핵심 셀링포인트("5문항" = 낮은 진입장벽)만 골드로 강조 —
   단색이 아니라 히어로 타이틀 마지막 줄(transplant-ai.php .mwl-hero__line--last,
   desktop-hero .tp_brand)과 완전히 같은 그라디언트 골드 텍스트로 톤을 맞춤. */
.mx-diag-title-accent {
    background-image: linear-gradient(90deg, rgba(243, 217, 184, 1) 0%, rgba(190, 139, 105, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* .simple-container p{margin-bottom:0 !important} (element-v2.css)이 클래스+엘리먼트
   조합이라 단일 클래스 선택자보다 우선순위가 높아, 같은 !important끼리도 그쪽이 이김 —
   .mx-diag-title처럼 .mx-diag로 한 번 더 감싸 특정도를 올려서 이겨야 함. */
.mx-diag .mx-diag-eyebrow {
    margin: 0 0 20px !important;
}

/* ── 인트로 ─────────────────────────────────────────── */
.mx-diag-intro {
    text-align: center;
    padding: 12px 0;
}
.mx-diag-intro .mx-diag-btn {
    width: 100%;
    box-sizing: border-box;
}
/* A/B variant b — 인트로가 안 숨겨지고 퀴즈 카드가 바로 밑에 이어붙으므로
   구분선으로 분리. a버전은 인트로가 항상 mx-hidden으로 전환돼 이 규칙이
   적용돼도(display:none이라) 무해함. */
.mx-diag[data-ai-variant="b"] #mxDiagIntro {
    padding-bottom: 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--mx-line, #D3D1C8);
}
/* "도구이며," 다음 줄바꿈은 모바일에서만 — 데스크톱에선 이 <br>을 숨겨서
   문장이 이어지게 함(공백 문자는 그대로 남아있어 br이 숨겨져도 띄어쓰기 유지). */
.mx-diag-disclaimer-break {
    display: none;
}
@media (max-width: 767px) {
    .mx-diag-disclaimer-break {
        display: block;
    }
}

/* ── 재개 화면(모달에서 결과 확인 중 닫았을 때, 다음 방문/재진입 시 인트로 대신 노출) ── */
.mx-diag-resume {
    text-align: center;
    padding: 12px 0;
}
.mx-diag-resume .mx-diag-desc {
    margin-bottom: 28px !important;
}
.mx-diag-resume .mx-diag-btn {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.mx-diag-resume .mx-diag-btn-ghost {
    width: 100%;
}
.mx-diag .mx-diag-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--mx-ink);
    line-height: 1.3;
    margin: 0 0 12px !important;
    word-break: keep-all;
}
.mx-diag .mx-diag-desc {
    font-size: 14px;
    color: var(--mx-body);
    line-height: 1.6;
    margin: 0 0 28px !important;
    word-break: keep-all;
}
.mx-diag .mx-diag-privacy-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mx-purple-soft-ink);
    background: var(--mx-purple-soft);
    border-radius: 999px;
    padding: 8px 16px;
    margin: 12px 0 28px !important;
    word-break: keep-all;
}

/* ── 인트로 시술 디자인 영상(모발이식 type 전용, Figma 표지 시안) ── */
.mx-diag-intro-video {
    display: block;
    width: 72%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 28px;
    border-radius: 24px;
    object-fit: cover;
}

/* ── 인트로 정보 카드(소요시간/문항수/개인정보) ─────── */
.mx-diag-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
}
.mx-diag-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    border: 1px solid var(--mx-line);
    border-radius: 10px;
    background: #fff;
}
.mx-diag-info-label {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    color: var(--mx-ink);
}
.mx-diag-info-label .material-icons {
    font-size: 20px;
    color: var(--mx-ink);
}
.mx-diag-info-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--mx-ink);
}

.mx-diag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 32px;
    border: none;
    border-radius: 999px;
    background: var(--mx-purple);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mx-diag-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 27, 45, 0.35);
}
/* 인트로 화면의 시작 버튼(#mxDiagStart)에만 은은한 pulse — 퀴즈/결과 화면의
   다른 .mx-diag-btn(다음/재시작 등)까지 같이 흔들리면 산만해지므로 고유 id로
   범위를 좁힘. hover에서는 살짝 튀는 느낌과 충돌하지 않게 잠시 멈춤.
   골드 배경으로 바뀌면서 펄스 링 색도 네이비(rgba(15,27,45,...))에서
   골드 톤으로 맞춤. */
@keyframes mxDiagPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(252, 217, 17, 0.45); }
    50% { box-shadow: 0 0 0 10px rgba(252, 217, 17, 0); }
}
#mxDiagStart {
    animation: mxDiagPulse 2.4s ease-in-out infinite;
    /* "크다"는 지적이 반복돼서 패딩만 줄이는 대신 근본 원인(너비 100% 풀블록)을
       손봄 — width:100%를 콘텐츠 크기로 바꿔서 확실히 작아 보이게 함. 색도
       네이비 단색 대신 이 페이지의 다른 버튼들과 같은 .mwl-btn-sharp--gold
       (골드 #FCD911 + 검정 텍스트 + 각진 모서리)로 통일 — "색이 안 맞는다"는
       지적 해결. id 선택자라 .mx-diag-btn/.mx-diag-intro .mx-diag-btn
       클래스 규칙보다 항상 이김. */
    width: auto;
    padding: 14px 32px;
    font-size: 15px;
    min-height: 44px;
    box-sizing: border-box;
    background: var(--color-main, #FCD911);
    color: #000;
    border-radius: 0;
}
#mxDiagStart:hover {
    animation-play-state: paused;
    /* 기본 .mx-diag-btn:hover의 네이비 그림자(rgba(15,27,45,...))가 골드
       배경과 안 어울려서 이 버튼만 골드 톤 그림자로 오버라이드. */
    box-shadow: 0 6px 16px rgba(252, 217, 17, 0.45);
}
@media (prefers-reduced-motion: reduce) {
    #mxDiagStart {
        animation: none;
    }
}
.mx-diag-btn:disabled {
    background: #E4E2E8;
    color: #A6A3AE;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.mx-diag-btn-ghost {
    padding: 16px 20px;
    border: none;
    background: transparent;
    color: var(--mx-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.mx-diag-btn-ghost:hover {
    color: var(--mx-ink);
}

/* ── 풀스크린 모달(모바일 전용 — 집중을 위해 문항응답→로딩→결과 구간 전체를 전체화면으로
   띄움, 데스크탑은 기존 인라인 2단 레이아웃 그대로 유지) ─────────────────────── */
.mx-diag-fullscreen-close {
    display: none;
}
@media (max-width: 767px) {
    #mxDiagModalBody.mx-diag-fullscreen {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: var(--mx-cream);
        padding: 20px 24px 24px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #mxDiagModalBody.mx-diag-fullscreen .mx-diag-screen {
        max-width: none;
        margin: 0;
    }
    #mxDiagModalBody.mx-diag-fullscreen .mx-diag-fullscreen-close {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 8px;
    }
}
.mx-diag-fullscreen-close-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: rgba(10, 10, 10, 0.06);
    color: var(--mx-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mx-diag-fullscreen-close-btn .material-icons {
    font-size: 20px;
}
/* 모달 열려있는 동안 배경 스크롤 잠금(body에 JS로 붙임) */
body.mx-diag-modal-lock {
    overflow: hidden;
}

/* ── 퀴즈 ───────────────────────────────────────────── */
.mx-diag-progress {
    background: var(--mx-purple-soft);
    border-radius: 8px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 14px;
}
.mx-diag-progress-bar {
    background: var(--mx-purple);
    height: 100%;
    border-radius: 8px;
    transition: width .3s ease;
}

.mx-diag .mx-diag-step {
    font-size: 12px;
    font-weight: 700;
    color: var(--mx-body);
    margin: 0 0 16px !important;
}
.mx-diag-question {
    font-size: 20px;
    font-weight: 800;
    color: var(--mx-ink);
    line-height: 1.4;
    margin: 0 0 8px;
    word-break: keep-all;
}
.mx-diag .mx-diag-hint {
    font-size: 12px;
    color: var(--mx-body);
    line-height: 1.5;
    margin: 0 0 20px !important;
    word-break: keep-all;
}
.mx-diag-hint:empty {
    display: none;
}

.mx-diag-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.mx-diag-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 16px 20px;
    border: 1.5px solid var(--mx-line);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    font-size: 14px;
    line-height: 1.5;
    color: #3A342B;
    word-break: keep-all;
}
.mx-diag-option:hover {
    border-color: #B9BCC0;
    background: #FAFAFA;
}
.mx-diag-option.is-selected {
    border-color: var(--mx-purple);
    background: var(--mx-purple-soft);
    font-weight: 700;
    color: var(--mx-purple);
}
.mx-diag-option-check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--mx-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: transparent;
    background: #fff;
}
.mx-diag-option-check .material-icons {
    font-size: 13px;
    line-height: 1;
}
.mx-diag-option.is-selected .mx-diag-option-check {
    border-color: var(--mx-purple);
    background: var(--mx-purple);
    color: #fff;
}

.mx-diag-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mx-diag-nav .mx-diag-btn {
    flex: 1;
}

/* ── 로딩(결과 분석 중 4단계 순차 체크리스트) ───────── */
.mx-diag-loading {
    text-align: center;
    padding: 12px 0;
}
.mx-diag-loading-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    text-align: left;
}
.mx-diag-loading-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    border: 1px solid var(--mx-line);
    border-radius: 10px;
    background: #fff;
    transition: background-color .2s ease, border-color .2s ease;
}
.mx-diag-loading-step-icon {
    flex: none;
    font-size: 20px;
    color: var(--mx-line);
}
.mx-diag-loading-step-text {
    font-size: 15px;
    color: var(--mx-muted);
}
.mx-diag-loading-step[data-state="active"] {
    border-color: var(--mx-line);
}
.mx-diag-loading-step[data-state="active"] .mx-diag-loading-step-icon {
    color: var(--mx-ink);
    animation: mx-diag-spin 1s linear infinite;
}
.mx-diag-loading-step[data-state="active"] .mx-diag-loading-step-text {
    color: var(--mx-ink);
}
.mx-diag-loading-step[data-state="done"] {
    background: var(--mx-teal-soft);
    border-color: var(--mx-teal);
}
.mx-diag-loading-step[data-state="done"] .mx-diag-loading-step-icon,
.mx-diag-loading-step[data-state="done"] .mx-diag-loading-step-text {
    color: var(--mx-teal);
    font-weight: 700;
}
@keyframes mx-diag-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .mx-diag-loading-step[data-state="active"] .mx-diag-loading-step-icon {
        animation: none;
    }
}

/* ── 결과 화면 ──────────────────────────────────────── */
.mx-diag-result-head {
    text-align: center;
    margin-bottom: 24px;
}
.mx-diag .mx-diag-result-head .mx-diag-eyebrow {
    margin-bottom: 8px !important;
}
.mx-diag-result-head h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--mx-ink);
    margin: 0;
    word-break: keep-all;
}

.mx-diag-result-card {
    background: #fff;
    border-radius: 20px;
    padding: 4px 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(15, 27, 45, 0.06);
}
.mx-diag-result-item {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--mx-line);
}
.mx-diag-result-item:last-child {
    border-bottom: none;
}
.mx-diag-result-num-badge {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mx-purple-soft);
    color: var(--mx-purple);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mx-diag-result-item-body {
    min-width: 0;
    flex: 1;
}
.mx-diag .mx-diag-result-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mx-gold);
    margin: 0 0 8px !important;
}
.mx-diag .mx-diag-result-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--mx-purple);
    margin: 0 0 8px !important;
}
.mx-diag-result-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--mx-body);
    margin: 0;
    word-break: keep-all;
}
.mx-diag-result-photos {
    display: flex;
    gap: 6px;
    margin: 10px 0 0;
}
.mx-diag-result-photos img {
    flex: 1;
    width: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}
.mx-diag-result-photos-caption {
    font-size: 11px;
    color: var(--mx-body);
    opacity: 0.7;
    margin: 6px 0 0 !important;
    text-align: right;
}
.mx-diag-result-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--mx-purple-soft-ink);
    background: var(--mx-purple-soft);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 10px 0 0;
    word-break: keep-all;
}
.mx-diag-result-note .material-icons {
    font-size: 15px;
    line-height: 1.4;
    flex: none;
}

.mx-diag .mx-diag-disclaimer {
    font-size: 11px;
    color: var(--mx-body);
    text-align: center;
    margin: 4px 0 24px !important;
    word-break: keep-all;
}

/* ── 다시 진단하기(Regenerate) ─────────────────────── */
.mx-diag-restart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    margin: -8px 0 20px;
    border: 1.5px solid var(--mx-line);
    border-radius: 999px;
    background: #fff;
    color: var(--mx-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.mx-diag-restart .material-icons {
    font-size: 16px;
}
.mx-diag-restart:hover {
    border-color: var(--mx-purple);
    color: var(--mx-purple);
}

/* ── 리드캡처 폼 ────────────────────────────────────── */
.mx-diag-voucher {
    background: #fff;
    border-radius: 24px;
    padding: 24px 20px;
    box-shadow: 0 2px 10px rgba(15, 27, 45, 0.08);
}
.mx-diag .mx-diag-voucher-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--mx-ink);
    margin: 0 0 4px !important;
}
.mx-diag .mx-diag-voucher-desc {
    font-size: 13px;
    color: var(--mx-body);
    margin: 0 0 16px !important;
    word-break: keep-all;
}

/* ── 입력 캡슐 (Figma 레퍼런스의 "Ask me anything" 컴포저 — 이름/연락처를
   하나의 둥근 캡슐 안에 묶고, 필드 사이만 얇은 구분선으로 나눔) ──── */
.mx-diag-composer {
    background: #fff;
    border: 1.5px solid var(--mx-line);
    border-radius: 24px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color .15s ease;
}
.mx-diag-composer:focus-within {
    border-color: var(--mx-purple);
}
.mx-diag .mx-diag-composer-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent;
    font-size: 14px;
    color: #3A342B;
    -webkit-appearance: none;
    appearance: none;
}
.mx-diag-composer-input:focus {
    outline: none;
}
.mx-diag-composer-divider {
    height: 1px;
    margin: 0 18px;
    background: var(--mx-line);
}

.mx-diag-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.mx-diag-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--mx-body);
    line-height: 1.5;
    margin-bottom: 8px;
    cursor: pointer;
}
.mx-diag-consent input[type="checkbox"] {
    margin-top: 2px;
    flex: 0 0 auto;
    accent-color: var(--mx-purple);
}
.mx-diag-consent-view {
    border: none;
    background: none;
    padding: 10px 6px;
    margin: -10px -6px;
    color: var(--mx-purple);
    text-decoration: underline;
    font-size: 11px;
    cursor: pointer;
}
.mx-diag .mx-diag-privacy-text {
    font-size: 11px;
    color: var(--mx-body);
    line-height: 1.7;
    background: var(--mx-cream);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 4px 0 12px !important;
}

.mx-diag .mx-diag-error {
    font-size: 12px;
    color: #B3261E;
    margin: 0 0 10px !important;
}

/* ── 예약 버튼 그룹(체험권 발급 화면은 보류 상태 — 나중에 다시 요청 시 부활) ── */
.mx-diag-booking-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.mx-diag-booking-btn {
    display: flex;
    text-decoration: none;
}
.mx-diag-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border: 1.5px solid var(--mx-purple);
    border-radius: 999px;
    background: transparent;
    color: var(--mx-purple);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease;
}
.mx-diag-btn-outline:hover {
    background: var(--mx-purple-soft);
}
.mx-diag-btn-outline:disabled {
    border-color: #D9D7DE;
    color: #A6A3AE;
    background: transparent;
    cursor: not-allowed;
}
/* 사이트 전역 a:visited{color:inherit}(style.css)가 specificity상 .mx-diag-btn의
   흰 글자색을 이겨서, 예약 링크를 한 번 방문한 뒤에는 버튼 글자색이 어두운 색으로
   바뀌어버리는 문제가 있었음 — 방문 여부와 무관하게 흰색 고정 */
.mx-diag .mx-diag-btn:visited,
.mx-diag .mx-diag-btn:link {
    color: #fff;
}

/* ── 모바일 (~767px, 사이트 .simple-container 브레이크포인트와 통일) ─── */
@media (max-width: 767px) {
    /* 이전엔 .mx-diag-section 자체에 커스텀 padding(50px 30px)을 줘서 카드
       여백을 맞췄는데, 그러려면 안쪽 .simple-container(inc/ai-diagnosis.php)를
       "no-gap"으로 padding:0 시켜야 했음 — 그 결과 이 섹션만 다른 모든 섹션
       (성공사례 등, 전부 표준 .simple-container padding:40px 30px를 그대로 씀)과
       다른 별도의 여백 체계를 쓰게 돼서 좌우 인셋이 서로 안 맞아 보이던 게
       진짜 원인이었음. 근본 해결: .simple-container에서 "no-gap" 제거해서 이
       페이지의 다른 모든 섹션과 완전히 동일한 표준 padding(40px 30px)을 그대로
       쓰게 함 — 커스텀 값 자체가 필요 없어짐. */
    .mx-diag {
        padding: 40px 30px;
        border-radius: 0;
    }
    .mx-diag-title {
        font-size: 22px;
    }
    .mx-diag-question {
        font-size: 17px;
    }
    .mx-diag-option {
        padding: 14px 18px;
        font-size: 13px;
    }
}

/* ── 데스크탑 (768px~) ───────────────────────────────── */
@media (min-width: 768px) {
    /* 예전엔 이 섹션만 max-width:960px+가운데정렬로 좁혀서 "떠 있는 카드"
       느낌을 만들었는데, 그러면서 다른 모든 섹션(성공사례 등, .v3 section의
       padding-left/right:calc(50vw-720px)로 전부 동일하게 ~1440px 컨텐츠
       폭을 씀)과 폭이 달라져 좌우 인셋이 안 맞아 보이는 원인이 됐음. 제거해서
       이 섹션도 다른 섹션과 완전히 같은 폭 체계를 쓰게 함 — "떠 있는" 느낌은
       카드 자체의 흰색+그림자+radius로 충분히 나옴(섹션 폭을 좁힐 필요 없음). */
    .mx-diag {
        padding: 56px 64px;
    }
    .mx-diag-quiz {
        max-width: 880px;
    }
    .mx-diag-current {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "question options"
            "hint     options";
        column-gap: 48px;
        row-gap: 0;
        align-items: start;
    }
    .mx-diag-question { grid-area: question; margin-bottom: 12px; }
    .mx-diag-hint { grid-area: hint; margin-bottom: 0; }
    .mx-diag-options { grid-area: options; margin-bottom: 0; }
    .mx-diag-nav { margin-top: 32px; }
}

/* ── 모션 접근성 ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mx-diag-btn,
    .mx-diag-btn-outline,
    .mx-diag-progress-bar,
    .mx-diag-option {
        transition: none;
    }
}