/* ============================================================
 *  상속 유형 진단 (/diag) 공통 스타일
 *  피그마 PC 프레임 기준 (6097:4711 외)
 *  토큰:
 *    #7c91ad : Pri Grey 550 (서브 텍스트)
 *    #6b7684 : Pri Grey 600 (버튼 비활성/서브)
 *    #333d4b : Pri Grey 700
 *    #1f2d34 : Pri Grey 800 (메인 텍스트/어두운 버튼)
 *    #191f28 : Pri Grey 900 (질문 헤딩)
 *    #dfe4ec : Pri Grey 400 (진행바 배경)
 *    #e3e6ea : Pri Grey 300 (테두리/비활성 버튼 배경)
 *    #f5f7f9 : Pri Grey 250 (페이지 하단 배경)
 *    #4594fd : Pri Blue 800 (강조/활성 버튼)
 *    #eef3ff / #f4f9ff : 선택된 카드 배경
 * ============================================================ */

/* ============================================================
 *  Hero (sub_h2) — 상속세 계산기와 동일한 패턴 (figma 6097:4749)
 *  각 diag 페이지의 subTop.php 대신 사용
 * ============================================================ */
#container.full.diag-main{margin-top:0 !important;padding-bottom:0 !important;}

.diag-hero{
    position:relative;width:100%;height:400px;
    font-family:'Pretendard',-apple-system,sans-serif;color:#FFFFFF;
}
.diag-hero__bg{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.diag-hero__overlay{
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(255,255,255,0.94) 0%,rgba(255,255,255,0.57) 50%,rgba(255,255,255,0.2) 100%);
}
.diag-hero__foreground{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;pointer-events:none;
}
.diag-hero__inner{
    position:relative;width:1400px;max-width:calc(100% - 32px);height:100%;
    margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.diag-hero__sub{
    margin:0;font-size:20px;font-weight:700;letter-spacing:-0.1px;
    line-height:1.4;color:#DFE4EC;
}
.diag-hero__title{
    font-size:56px;font-weight:700;letter-spacing:-1.12px;
    line-height:1.3;color:#FFFFFF;margin:0;
}
.diag-hero__nav{
    position:absolute;left:50%;transform:translateX(-50%);bottom:0;
    width:1400px;max-width:calc(100% - 32px);height:56px;
    display:flex;align-items:center;
}
.diag-hero__nav-home{
    width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;
}
.diag-hero__nav-home img{width:15px;height:15px;}
.diag-hero__nav-sep{width:1px;height:16px;background:rgba(255,255,255,0.2);}
.diag-hero__nav-current{
    display:inline-flex;align-items:center;gap:8px;padding:0 12px;
    font-size:18px;font-weight:700;color:#FFFFFF;letter-spacing:-0.09px;
    background:transparent;border:0;cursor:pointer;font-family:inherit;
}
.diag-hero__nav-down-wrap{
    display:inline-flex;width:24px;height:24px;
    align-items:center;justify-content:center;
    transition:transform .2s ease;
}
.diag-hero__nav-current[aria-expanded="true"] .diag-hero__nav-down-wrap{transform:rotate(180deg);}
.diag-hero__nav-current img{width:12px;height:12px;}
.diag-hero__nav-dropdown-wrap{position:relative;display:inline-flex;}
.diag-hero__nav-menu{
    display:none;position:absolute;top:calc(100% + 4px);left:0;
    min-width:180px;background:#F5F7F9;border-radius:8px;padding:8px;
    box-shadow:0 8px 24px rgba(0,0,0,0.15);z-index:100;flex-direction:column;
}
.diag-hero__nav-menu.is-open{display:flex;}
.diag-hero__nav-menu-item{
    display:flex;align-items:center;height:36px;padding:0 12px;
    font-size:16px;font-weight:500;font-family:'Pretendard',-apple-system,sans-serif;
    color:#333D4B;letter-spacing:-0.08px;line-height:1.5;
    text-decoration:none;white-space:nowrap;border-radius:4px;
}
.diag-hero__nav-menu-item:hover{background:rgba(0,0,0,0.04);}
.diag-hero__nav-menu-subs{
    display:flex;flex-direction:column;padding-left:11px;padding-bottom:6px;
}
.diag-hero__nav-menu-item--sub{color:#68717D;}

@media (max-width:767px){
    .diag-hero{height:240px;}
    .diag-hero__inner{padding-left:16px;padding-right:16px;}
    .diag-hero__sub{font-size:14px;}
    .diag-hero__title{font-size:32px;letter-spacing:-0.64px;}
    .diag-hero__nav{padding-left:16px;padding-right:16px;height:44px;}
    .diag-hero__nav-home{width:44px;height:44px;}
    .diag-hero__nav-current{font-size:15px;}
}

/* ───── 공통 섹션 래퍼 ───── */
.diag-section{
    background:linear-gradient(180deg,#ffffff 0%,#ffffff 50%,#f5f7f9 100%);
    padding:80px 0 120px;
}
.diag-inner{
    width:768px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:56px;
}

/* ───── 시작화면 TypeGuide (index.php) ───── */
.diag-typeguide{
    width:528px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:56px;
}
.diag-typeguide .heading{text-align:center;display:flex;flex-direction:column;gap:12px;}
.diag-typeguide .heading .lead{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;
    line-height:1.4;letter-spacing:-0.5px;color:#7c91ad;margin:0;
}
.diag-typeguide .heading .lead br,
.diag-typeguide .heading .title br{display:none;}
.diag-typeguide .heading .title{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:40px;
    line-height:1.3;letter-spacing:-2px;color:#1f2d34;margin:0;
}
.diag-typeguide .info-block{
    width:424px;display:flex;flex-direction:column;align-items:center;gap:16px;
}
.diag-typeguide .info-block .badge{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;
    line-height:1.4;letter-spacing:-0.5px;color:#4594fd;margin:0;
}
.diag-typeguide .info-cards{display:flex;gap:6px;width:100%;}
.diag-typeguide .info-cards .card{
    flex:1;background:#ffffff;border:1px solid #e3e6ea;border-radius:14px;
    padding:32px 0;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.diag-typeguide .info-cards .card .label{
    font-family:'Pretendard',sans-serif;font-weight:400;font-size:16px;
    line-height:1.5;letter-spacing:-0.5px;color:#7c91ad;margin:0;
}
.diag-typeguide .info-cards .card .value{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;
    line-height:1.4;letter-spacing:-0.5px;color:#1f2d34;margin:0;
}
.diag-typeguide .arrow-down{width:48px;height:48px;display:flex;align-items:center;justify-content:center;}
.diag-typeguide .arrow-down svg{display:block;}

/* ───── 질문 블록 헤더 ───── */
.diag-question-block{width:100%;display:flex;flex-direction:column;align-items:center;gap:32px;}
.diag-question-block .q-title{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:32px;
    line-height:1.3;letter-spacing:-1px;color:#191f28;text-align:center;margin:0;
}

/* ───── 공통 카드 컨테이너 ───── */
.diag-card{
    width:100%;background:#ffffff;border:1px solid #e3e6ea;border-radius:24px;
    box-shadow:0 2px 12px rgba(0,0,0,0.05);padding:32px;
    display:flex;flex-direction:column;align-items:center;gap:32px;box-sizing:border-box;
}

/* ───── 선택 카드 (예/아니오) ───── */
.diag-choices{display:flex;gap:10px;width:100%;}
.diag-choice{
    flex:1;border:1px solid #e3e6ea;border-radius:16px;padding:24px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;background:#ffffff;cursor:pointer;transition:all .15s ease-out;box-sizing:border-box;
}
.diag-choice input[type=radio]{position:absolute;opacity:0;pointer-events:none;}
.diag-choice:hover{border-color:#4594fd;}
.diag-choice.on{border-color:#4594fd;background:#f4f9ff;}
.diag-choice .ico{
    width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    /* 배경/색상은 SVG 자체에 내장 (figma fill-opacity:0.3) */
}
.diag-choice .ico img,
.diag-choice .ico svg{display:block;width:48px;height:48px;}
.diag-choice p{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;
    line-height:1.4;letter-spacing:-1px;color:#1f2d34;text-align:center;margin:0;
}

/* ───── 시작 버튼 row ───── */
.diag-start-row{display:flex;gap:10px;align-items:center;}
.diag-start-row .start-btn{
    background:#e3e6ea;border:0;border-radius:16px;padding:16px 44px;
    font-family:'Pretendard',sans-serif;font-weight:600;font-size:20px;line-height:26px;
    letter-spacing:-0.5px;color:#6b7684;cursor:not-allowed;transition:background .15s;
}
.diag-start-row .arrow-btn{
    width:84px;height:58px;background:#e3e6ea;color:#6b7684;  /* 비활성: 글자색과 동일 */
    border:0;border-radius:16px;
    display:flex;align-items:center;justify-content:center;cursor:not-allowed;transition:all .15s;
}
.diag-start-row.ready .start-btn{background:#4594fd;color:#ffffff;cursor:pointer;}
.diag-start-row.ready .arrow-btn{background:#4594fd;color:#ffffff;cursor:pointer;}
.diag-start-row .arrow-btn svg{display:block;}

/* ───── 스텝 헤더 + 진행바 (figma 6097:4933) ─────
 *  좌측: 타이틀 24px Bold + 진행바 3px
 *  우측: "1 /7" (Bold 20 + Regular 14)
 *  gap 12px, 카드와 간격 32px (.diag-inner gap)
 */
.diag-step-header{
    width:100%;display:flex;gap:12px;align-items:center;
}
.diag-step-header__info{
    flex:1;display:flex;flex-direction:column;gap:16px;
}
.diag-step-header .step-title{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;
    line-height:1.4;letter-spacing:-1px;color:#191f28;margin:0;
}
.diag-step-header .progress-bar{
    width:100%;height:3px;background:#e3e6ea;overflow:hidden;
}
.diag-step-header .progress-bar i{
    display:block;height:100%;background:#4594fd;transition:width .3s;
}
.diag-step-header .progress-num{
    display:inline-flex;align-items:center;gap:8px;padding:0 12px;
    color:#333d4b;white-space:nowrap;
}
.diag-step-header .progress-num strong{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:20px;
    line-height:1.4;letter-spacing:-0.1px;
}
.diag-step-header .progress-num small{
    font-family:'Pretendard',sans-serif;font-weight:400;font-size:14px;
    line-height:1.4;letter-spacing:-0.07px;
}

/* ───── 스텝 폼 카드 (바깥) — figma 6097:4941 ───── */
.diag-form-card{
    width:100%;max-width:none;margin:0;
    background:#ffffff;border:1px solid #e3e6ea;border-radius:24px;
    box-shadow:0 2px 12px rgba(0,0,0,0.05);padding:32px;box-sizing:border-box;
    display:flex;flex-direction:column;gap:32px;
}
.diag-form-card__items{
    width:100%;display:flex;flex-direction:column;gap:10px;
}

/* ───── 카드 안의 문항 카드 (inner) — figma 6097:4943/4944 ───── */
.diag-form-item{
    background:#ffffff;border:1px solid #e3e6ea;border-radius:16px;
    min-height:88px;padding:16px 16px 16px 32px;
    display:flex;align-items:center;gap:16px;box-sizing:border-box;
}
.diag-form-item__q{
    flex:1;font-family:'Pretendard',sans-serif;font-weight:700;font-size:18px;
    line-height:1.4;letter-spacing:-0.09px;color:#1f2d34;margin:0;
    display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.diag-form-item__q .help-mark{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;background:none;border:0;padding:0;margin:0;
    cursor:pointer;color:#191f28;position:relative;
}
.diag-form-item__q .help-mark img,
.diag-form-item__q .help-mark svg{display:block;width:24px;height:24px;}

/* 툴팁 버블 — 상속세 계산기 (calc_v2 .tooltip-bubble) 동일 스펙 + 멀티라인 지원 */
.diag-tooltip-bubble{
    position:absolute;
    bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);
    background:#CBE4FF;color:#191F28;
    font-family:'Pretendard',sans-serif;font-size:14px;font-weight:400;
    line-height:1.4;letter-spacing:-0.07px;
    padding:12px 14px;border-radius:8px;
    box-shadow:0 4px 4px rgba(0,0,0,0.05);
    display:none;z-index:10;
    text-align:left;
    min-width:max-content;
    max-width:320px;white-space:normal;word-break:keep-all;
}
.diag-tooltip-bubble::after{
    content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:6px solid transparent;border-top-color:#CBE4FF;
}
.help-mark.is-active .diag-tooltip-bubble{display:inline-block;}
/* 모바일: 툴팁을 ? 아이콘 아래에 표시 (figma 스펙) */
@media (max-width: 840px){
    .help-mark{position:relative;}
    .diag-tooltip-bubble{
        position:absolute;
        bottom:calc(100% + 8px);left:auto;right:0;transform:none;
        top:auto;
        display:none;
        width:max-content;max-width:calc(100vw - 40px);min-width:200px;
        border-radius:10px;padding:14px 16px;
        font-size:13px;line-height:1.5;
        white-space:normal;word-break:keep-all;
    }
    .diag-tooltip-bubble::after{display:none;}
    .help-mark:focus .diag-tooltip-bubble,
    .help-mark:focus-visible .diag-tooltip-bubble,
    .help-mark.active .diag-tooltip-bubble{
        display:block;
    }
}
.diag-form-item__input{flex:0 0 auto;display:flex;align-items:center;}

/* Select — 232×56 카드형 (figma 282:3725) */
.diag-form-item select.diag-select{
    width:232px;height:56px;padding:0 48px 0 16px;box-sizing:border-box;
    border:1px solid #e3e6ea;border-radius:12px;background:#ffffff;
    font-family:'Pretendard',sans-serif;font-size:16px;font-weight:400;
    line-height:1.5;letter-spacing:-0.08px;color:#191f28;text-align:left;
    appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
    background-image:url('/images/diag/ic_24_down_grey.svg');
    background-repeat:no-repeat;background-position:right 16px center;
    background-size:24px 24px;
}
.diag-form-item select.diag-select:focus{outline:none;border-color:#4594fd;}

/* Radio 그룹 — 상속세 계산기 (calc_v2) .radio-option 과 동일 스펙 */
.diag-form-item__radios{display:inline-flex;align-items:center;}
.diag-form-item__radios label{
    display:inline-flex;align-items:center;gap:8px;padding:0 12px;cursor:pointer;
    font-family:'Pretendard',sans-serif;font-size:16px;font-weight:400;
    line-height:1.5;letter-spacing:-0.08px;color:#333d4b;
}
.diag-form-item__radios input[type=radio]{
    appearance:none;-webkit-appearance:none;
    width:22px;height:22px;border-radius:50%;
    border:2px solid #dfe4ec;background:#ffffff;
    margin:0;padding:0;position:relative;cursor:pointer;flex-shrink:0;
    transition:border-color .15s;
}
.diag-form-item__radios input[type=radio]:checked{
    border-color:#4594fd;
}
.diag-form-item__radios input[type=radio]:checked::after{
    content:'';position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:10px;height:10px;border-radius:50%;background:#4594fd;
}

/* 주의 박스 (스텝3, 5번+6번 모두 예 시 표시) — figma 6097:5074 */
.diag-form-note{
    background:#F5F7F9;border-radius:16px;padding:32px;margin:0;
    font-family:'Pretendard',sans-serif;font-weight:500;font-size:18px;
    line-height:1.4;letter-spacing:-0.18px;color:#1F2D34;
    text-align:center;box-sizing:border-box;
}

/* ───── 스텝 푸터 버튼 (이전/다음) — figma 6097:4945 ─────
 *  이전 : #1f2d34 배경 + 흰 글자/아이콘 + 좌측 ic_12_left
 *  다음(비활성): #e4e4e7 배경 + #6b7684 글자/아이콘 + 우측 ic_12_right
 *  다음(활성)  : #4594fd 배경 + 흰 글자/아이콘
 *  Pretendard SemiBold 20px line-height 26px, padding 16px 44px
 */
.diag-form-actions{
    display:flex;gap:4px;margin:0;justify-content:center;
}
.diag-form-actions button{
    flex:1;padding:16px 28px;border:0;border-radius:12px;
    font-family:'Pretendard',sans-serif;font-weight:600;font-size:20px;
    line-height:26px;letter-spacing:-0.5px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    cursor:pointer;transition:all .15s;
}
.diag-form-actions .btn-prev{background:#1f2d34;color:#ffffff;}
.diag-form-actions .btn-prev:hover{background:#0f1a20;}
.diag-form-actions .btn-next{background:#e4e4e7;color:#6b7684;cursor:not-allowed;}
.diag-form-actions .btn-next.active{background:#4594fd;color:#ffffff;cursor:pointer;}
.diag-form-actions .btn-next.active:hover{background:#2c7bea;}
.diag-form-actions .start-btn{flex:none;}
.diag-form-actions .arrow-btn{width:84px;height:58px;padding:0;flex:0 0 84px;}
.diag-form-actions .arrow-btn svg{display:block;width:20px;height:20px;}
.diag-form-actions button svg{display:block;width:12px;height:12px;}
.diag-form-actions button svg path{stroke:currentColor;}

/* ───── 결과 페이지 (figma 6097:5217 / 5459 / 5696) ─────
 *  768px 너비, header gap 56, 카드 padding 32 gap 32
 */
.diag-result-wrap{
    width:100%;max-width:768px;margin:0 auto;
    display:flex;flex-direction:column;align-items:center;gap:56px;
}

/* 상단 완료 아이콘 + 라벨 + 타이틀 (figma 6097:5220) */
.diag-result-wrap .complete-head{
    display:flex;flex-direction:column;align-items:center;gap:12px;
}
.diag-result-wrap .complete-mark{
    width:80px;height:82px;display:flex;align-items:center;justify-content:center;
    background:none;
}
.diag-result-wrap .complete-mark img{display:block;}
.diag-result-wrap .complete-label{
    font-family:'Pretendard',sans-serif;font-weight:400;font-size:16px;
    line-height:1.5;letter-spacing:-0.08px;color:#4594fd;margin:0;text-align:center;
}
.diag-result-wrap h2.result-title{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:32px;
    line-height:1.3;letter-spacing:-0.32px;color:#1f2d34;text-align:center;margin:0;
    white-space:nowrap;
}
.diag-result-wrap h2.result-title em{color:#4594fd;font-style:normal;font-weight:700;}

/* 메인 카드 */
.diag-result-card{
    width:100%;background:#ffffff;border:1px solid #e3e6ea;border-radius:24px;
    padding:32px;box-sizing:border-box;
    display:flex;flex-direction:column;gap:32px;
    box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
.diag-result-card h3.sec-title{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;
    line-height:1.4;letter-spacing:-0.24px;color:#191f28;margin:0;
}
.diag-result-section{
    display:flex;flex-direction:column;gap:16px;width:100%;
}
.diag-result-divider{
    display:block;height:1px;background:#e3e6ea;width:100%;
    border:0;margin:0;padding:0;
}

/* 진단 결과 3 카드 */
.reason-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;
}
.reason-grid .item{
    border:1px solid #e3e6ea;border-radius:12px;
    padding:24px 8px 32px;overflow:hidden;box-sizing:border-box;
    text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.reason-grid .item .ico{
    width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.reason-grid .item .ico img{display:block;width:48px;height:48px;}
.reason-grid .item p{
    font-family:'Pretendard',sans-serif;font-weight:400;font-size:16px;
    line-height:1.5;letter-spacing:-0.08px;color:#1f2d34;margin:0;
    text-align:center;word-break:keep-all;
}

/* feature list (각 유형별 3 benefit rows) */
.feature-list{display:flex;flex-direction:column;gap:10px;width:100%;}
.feature-list .row{
    background:linear-gradient(90deg, #ffffff 0%, #f5f9ff 50%, #ffffff 100%);
    display:flex;align-items:center;justify-content:center;
    padding:24px 0;overflow:hidden;
}
.feature-list .row-inner{
    display:flex;align-items:center;gap:12px;width:424px;max-width:100%;
}
.feature-list .row .emo{
    width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.feature-list .row .emo img{display:block;width:64px;height:64px;}
.feature-list .row p{
    margin:0;font-family:'Pretendard',sans-serif;font-weight:400;font-size:16px;
    line-height:1.5;letter-spacing:-0.08px;color:#1f2d34;
}

/* 액션 버튼 (figma 6097:5333) */
.diag-result-actions{
    display:flex;flex-direction:column;gap:10px;align-items:center;width:100%;margin:0;
}
.diag-result-actions__primary{
    display:flex;gap:10px;align-items:center;justify-content:center;
}
.diag-result-actions button,
.diag-result-actions a{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:16px 44px;border:0;border-radius:16px;
    font-family:'Pretendard',sans-serif;font-weight:600;font-size:20px;
    line-height:26px;letter-spacing:-0.5px;
    cursor:pointer;text-decoration:none;transition:all .15s;white-space:nowrap;
}
.btn-result-save{background:#1f2d34;color:#ffffff;}
.btn-result-save:hover{background:#0f1a20;}
.btn-result-action{
    background:linear-gradient(90deg, #1eb6ff 0%, #4594fd 100%);color:#ffffff;
}
.btn-result-action:hover{filter:brightness(1.05);}
.btn-result-retry{
    background:#ffffff;color:#1f2d34;border:0;
}
.btn-result-retry img{width:24px;height:24px;display:block;}
.btn-result-retry:hover{background:#f5f7f9;}

/* ───── 모달 공통 ───── */
.diag-modal-dim{
    position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:9998;
    display:none;align-items:center;justify-content:center;padding:20px;
}
.diag-modal-dim.show{display:flex;}
/* 모달 열렸을 때 배경 scroll 방지 (body 에 .diag-modal-open 클래스) */
body.diag-modal-open{overflow:hidden;}
.diag-modal{
    background:#ffffff;border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,0.2);
    max-width:560px;width:100%;max-height:90vh;overflow:auto;position:relative;
    padding:40px 40px 32px;box-sizing:border-box;
}
.diag-modal.wide{max-width:1358px;}
.diag-modal .close{
    position:absolute;top:20px;right:20px;width:24px;height:24px;
    background:none;border:0;cursor:pointer;color:#6b7684;
    display:flex;align-items:center;justify-content:center;
}
.diag-modal .icon-mark{
    width:56px;height:56px;border-radius:50%;background:#4594fd;color:#ffffff;
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.diag-modal h3.modal-title{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:22px;
    line-height:1.45;letter-spacing:-0.5px;color:#191f28;text-align:center;margin:0 0 24px;
}
.diag-modal h3.modal-title em{color:#4594fd;font-style:normal;}
.diag-modal .modal-card{
    background:#f5f7f9;border-radius:16px;padding:24px;margin:0 0 24px;
}
.diag-modal .modal-card h4{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:16px;
    color:#1f2d34;text-align:center;margin:0 0 16px;
}
.diag-modal .modal-actions{display:flex;gap:10px;margin-top:8px;justify-content:center;}
.diag-modal .modal-actions button,
.diag-modal .modal-actions a{
    flex:1;height:52px;display:inline-flex;align-items:center;justify-content:center;
    border:0;border-radius:14px;font-family:'Pretendard',sans-serif;font-weight:700;
    font-size:15px;letter-spacing:-0.3px;cursor:pointer;text-decoration:none;
}
.diag-modal .modal-actions .btn-dark{background:#1f2d34;color:#ffffff;}
.diag-modal .modal-actions .btn-blue{background:#4594fd;color:#ffffff;}

/* 업종 리스트 모달은 yes_step1.php 의 페이지별 <style> 에 기존 diagnosing.php 스타일 그대로 이식 */

/* ============================================================
 *  진단 실패 팝업 (figma 6097:5973) — 가업/피상속인/상속인 요건 미충족
 *  width 768px, rounded 16, shadow 0 4 32, 내부 카드 + feature 3 + 버튼 2
 * ============================================================ */
.diag-fail-popup{
    background:#ffffff;border:1px solid #e3e6ea;border-radius:16px;
    box-shadow:0 4px 32px rgba(0,0,0,0.1);
    width:768px;max-width:calc(100% - 32px);max-height:90vh;overflow:auto;
    display:flex;flex-direction:column;position:relative;padding:0;
    box-sizing:border-box;
}
.diag-fail-popup__close-area{
    height:56px;position:relative;flex-shrink:0;
}
.diag-fail-popup__close{
    position:absolute;right:16px;top:50%;transform:translateY(-50%);
    width:24px;height:24px;background:none;border:0;padding:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:#121619;
}
.diag-fail-popup__close svg{display:block;}
.diag-fail-popup__body{
    display:flex;flex-direction:column;gap:32px;
    padding:0 32px 32px;box-sizing:border-box;align-items:center;
}
.diag-fail-popup__header{
    display:flex;flex-direction:column;gap:12px;align-items:center;
}
.diag-fail-popup__icon{
    width:80px;height:80px;display:flex;align-items:center;justify-content:center;
}
.diag-fail-popup__icon img{display:block;}
.diag-fail-popup__title{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;
    line-height:1.4;letter-spacing:-0.24px;color:#191f28;
    text-align:center;margin:0;
    white-space:nowrap;
}
.diag-fail-popup__title em{color:#4594fd;font-style:normal;font-weight:700;}

.diag-fail-popup__inner-card{
    background:#ffffff;border:1px solid #e3e6ea;border-radius:24px;
    box-shadow:0 2px 12px rgba(0,0,0,0.05);padding:32px;
    display:flex;flex-direction:column;gap:32px;align-items:center;
    width:100%;box-sizing:border-box;
}
.diag-fail-popup__inner-card h4{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:24px;
    line-height:1.4;letter-spacing:-0.24px;color:#191f28;margin:0;
}

.diag-fail-popup__features{
    display:flex;flex-direction:column;gap:10px;width:100%;
}
.diag-fail-popup__feature{
    background:linear-gradient(90deg, #ffffff 0%, #f5f9ff 50%, #ffffff 100%);
    display:flex;align-items:center;justify-content:center;
    padding:24px 0;overflow:hidden;
}
.diag-fail-popup__feature-inner{
    display:flex;gap:12px;align-items:center;
}
.diag-fail-popup__feature-inner img{
    width:64px;height:64px;display:block;flex-shrink:0;
}
.diag-fail-popup__feature-inner p{
    font-family:'Pretendard',sans-serif;font-weight:400;font-size:16px;
    line-height:1.5;letter-spacing:-0.08px;color:#1f2d34;margin:0;
}

.diag-fail-popup__actions{
    display:flex;gap:10px;align-items:center;justify-content:center;
    width:100%;
}
.diag-fail-popup__actions a,
.diag-fail-popup__actions button{
    padding:16px 44px;border:0;border-radius:16px;
    font-family:'Pretendard',sans-serif;font-weight:600;font-size:20px;
    line-height:26px;letter-spacing:-0.5px;
    display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;cursor:pointer;transition:all .15s;white-space:nowrap;
}
.diag-fail-popup__actions .btn-request{
    background:#1f2d34;color:#ffffff;
}
.diag-fail-popup__actions .btn-request:hover{background:#0f1a20;}
.diag-fail-popup__actions .btn-back{
    background:linear-gradient(90deg, #1eb6ff 0%, #4594fd 100%);
    color:#ffffff;
}
.diag-fail-popup__actions .btn-back:hover{filter:brightness(1.05);}

@media (max-width: 840px){
    .diag-fail-popup{width:100%;max-width:343px;border:1px solid #e3e6ea;border-radius:16px;box-shadow:0 4px 32px rgba(0,0,0,0.1);}
    .diag-fail-popup__body{gap:32px;padding:0 24px 32px;}
    .diag-fail-popup__header{gap:8px;}
    .diag-fail-popup__icon{width:56px;height:56px;}
    .diag-fail-popup__icon img{width:56px;height:56px;}
    .diag-fail-popup__title{font-size:18px;white-space:normal;line-height:1.4;letter-spacing:-0.09px;}
    .diag-fail-popup__inner-card{padding:0;border:0;border-radius:0;gap:12px;}
    .diag-fail-popup__inner-card h4{font-size:18px;}
    .diag-fail-popup__feature{padding:16px 0;background:linear-gradient(to right,#fff,#f5f9ff 50%,#fff);border-top:1px solid rgba(222,234,251,0);border-bottom:1px solid rgba(222,234,251,0);}
    .diag-fail-popup__feature-inner{gap:8px;}
    .diag-fail-popup__feature-inner img{width:48px;height:48px;}
    .diag-fail-popup__feature-inner p{font-size:14px;white-space:normal;line-height:1.4;}
    .diag-fail-popup__actions{flex-direction:row;gap:4px;flex-wrap:nowrap;justify-content:center;padding:16px 24px 32px;margin:0 -24px;}
    .diag-fail-popup__body{padding-bottom:0 !important;}
    .diag-fail-popup__actions a,
    .diag-fail-popup__actions button{
        font-size:16px;padding:0 16px;height:48px;border-radius:12px;white-space:nowrap;
        display:flex;align-items:center;justify-content:center;flex:1;
    }
    .diag-fail-popup__actions .btn-request{flex:1;}
    .diag-fail-popup__actions .btn-back{flex:1;width:auto;}
}

/* 승계 전략 신청 폼 모달 (6106:6166) */
/* 승계 전략 신청 폼 모달 내부 — figma 6106:6166 기준 */
.diag-modal .form-title{
    font-family:'Pretendard',sans-serif;font-weight:700;font-size:28px;
    text-align:center;margin:0 0 8px;color:#191f28;letter-spacing:-0.5px;
}
.diag-modal .form-subtitle{
    font-family:'Pretendard',sans-serif;font-size:16px;color:#7c91ad;
    text-align:center;margin:0 0 24px;line-height:1.5;
}
.diag-modal table.form-table{width:100%;border-collapse:collapse;}
.diag-modal table.form-table tr{border-top:1px solid #e3e6ea;}
.diag-modal table.form-table tr:first-child{border-top:2px solid #1f2d34;}
.diag-modal table.form-table td{padding:16px 12px;vertical-align:top;}
.diag-modal table.form-table td.label{
    font-family:'Pretendard',sans-serif;font-size:14px;color:#1f2d34;font-weight:400;line-height:1.5;
    width:60%;letter-spacing:-0.3px;
    background:#f8f9fa;vertical-align:middle;
}
.diag-modal table.form-table td.label .desc{
    display:block;margin-top:8px;margin-left:16px;
    font-size:12px;color:#7c91ad;font-weight:400;line-height:1.6;
    letter-spacing:-0.1px;
}
.diag-modal table.form-table td.input-cell{
    text-align:right;width:40%;vertical-align:middle;white-space:nowrap;
}
.diag-modal table.form-table td.input-cell input{
    width:300px;height:38px;padding:0 10px;border:1px solid #d9dee6;border-radius:6px;
    text-align:right;font-family:'Pretendard',sans-serif;font-size:14px;color:#1f2d34;
    background:#ffffff;box-sizing:border-box;
}
.diag-modal table.form-table td.input-cell input[readonly]{
    background:#f5f7f9;color:#6b7684;border-color:#e3e6ea;
}
.diag-modal table.form-table td.input-cell .unit{
    display:inline-block;margin-left:6px;font-size:14px;color:#6b7684;
}
/* 건너뛰기 + 전략 받아보기 버튼 (figma 6106:6166 — px 44 좌우 패딩, h58) */
.diag-modal .modal-actions .btn-apply-skip,
.diag-modal .modal-actions .btn-apply-submit{
    flex:none !important;
    height:58px;padding:0 44px;border-radius:16px;
    font-family:'Pretendard',sans-serif;font-weight:600;font-size:20px;
    line-height:26px;letter-spacing:-0.5px;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .15s;border:0;white-space:nowrap;
}
.diag-modal .modal-actions .btn-apply-skip{
    background:#1f2d34;color:#ffffff;
}
.diag-modal .modal-actions .btn-apply-submit{
    background:#e4e4e7;color:#6b7684;cursor:not-allowed;
}
.diag-modal .modal-actions .btn-apply-submit.active{
    background:#4594fd;color:#ffffff;cursor:pointer;
}
.diag-modal .modal-actions .btn-apply-submit.active:hover{
    background:#2c7bea;
}

/* ============================================================
 *  모바일 (max-width: 840px) — 피그마 MO 프레임 10종 기준
 *  6145:14443 (선택 전) / 14507 (선택 예) / 14571 (선택 아니오)
 *  16436 (예 스텝1) / 16492 (예 스텝2) / 16541 (예 스텝3)
 *  17734 (아니오 5문항 — figma 라벨 오류)
 *  19605 (결과 간편) / 19721 (결과 전문) / 19830 (결과 가업승계)
 * ============================================================ */
/* PC: 모바일 전용 줄바꿈 숨김 */
.mo-br{display:none;}
@media (max-width: 840px){
    .mo-br{display:inline;}
    .diag-section{padding:32px 16px 60px; background:linear-gradient(180deg,#ffffff 0%,#ffffff 50%,#f5f7f9 100%);}
    .diag-inner{width:100%;gap:16px;}
    .diag-form-item{background:transparent;border:none;}

    /* ── 시작 화면 ── */
    .diag-typeguide{width:100%;gap:24px;}
    .diag-typeguide .heading{gap:8px;}
    .diag-typeguide .heading .lead{font-size:14px;letter-spacing:-0.07px;line-height:1.4;}
    .diag-typeguide .heading .lead br,
    .diag-typeguide .heading .title br{display:block;}
    .diag-typeguide .heading .title{font-size:22px;line-height:1.4;letter-spacing:-0.22px;}
    .diag-typeguide .info-block{width:100%;gap:12px;}
    .diag-typeguide .info-block .badge{font-size:14px;}
    .diag-typeguide .info-cards{gap:6px;}
    .diag-typeguide .info-cards .card{padding:16px 0;border-radius:10px;}
    .diag-typeguide .info-cards .card .label{font-size:12px;}
    .diag-typeguide .info-cards .card .value{font-size:14px;}
    .diag-typeguide .arrow-down{width:40px;height:40px;margin-top:20px;}
    .diag-typeguide .arrow-down svg{width:40px;height:40px;}

    .diag-question-block{gap:24px;}
    .diag-question-block .q-title{font-size:18px;letter-spacing:-0.09px;line-height:1.4;}

    .diag-card{padding:8px;border-radius:16px;gap:8px;background:transparent;border:none;box-shadow:none;}
    .diag-card .diag-choices{margin:0;}
    .diag-card .diag-start-row{margin-top:16px;padding:0 16px;}

    /* 선택 카드 세로 스택 + 가로 내부 정렬 */
    .diag-choices{flex-direction:column;gap:8px;}
    .diag-choice{
        flex-direction:row;justify-content:flex-start;align-items:center;
        gap:12px;padding:16px 20px;border-radius:12px;
    }
    .diag-choice .ico{width:32px;height:32px;flex-shrink:0;}
    .diag-choice .ico img,
    .diag-choice .ico svg{width:32px;height:32px;}
    .diag-choice p{font-size:14px;line-height:1.4;text-align:left;letter-spacing:-0.07px;font-weight:700;}

    /* 시작/결과 버튼 row — 전체 폭 */
    .diag-start-row{width:100%;gap:4px;}
    .diag-start-row .start-btn{
        flex:1;padding:0 28px;height:48px;font-size:16px;line-height:1.5;border-radius:12px;
    }
    .diag-start-row .arrow-btn{
        width:56px;height:48px;flex:0 0 56px;border-radius:12px;
    }
    .diag-start-row .arrow-btn svg{width:20px;height:20px;}

    /* ── 스텝 페이지 (6145:16436 / 16492 / 16541 / 17734) ── */
    .diag-step-header{max-width:none;gap:0;flex-direction:column;align-items:stretch;padding:0;}
    .diag-step-header__info{gap:10px;}
    .diag-step-header .step-title{font-size:20px;letter-spacing:-0.1px;}
    .diag-step-header .progress-num{justify-content:flex-end;padding:4px 0 0;gap:4px;}
    .diag-step-header .progress-num strong{font-size:16px;}
    .diag-step-header .progress-num small{font-size:13px;}

    .diag-form-card{
        max-width:none;padding:0;border:0;border-radius:0;box-shadow:none;gap:0;background:transparent;
    }
    /* yes_step: 카드 형태 유지 (step-header 다음에 오는 form-card) */
    .diag-step-header + .diag-form-card{
        background:#fff;border:1px solid #e3e6ea;border-radius:16px;
        box-shadow:0 2px 12px rgba(0,0,0,0.05);padding:24px 16px 16px 16px;gap:16px;
    }
    .diag-step-header + .diag-form-card .diag-form-card__items{padding:0;}
    .diag-step-header + .diag-form-card .diag-form-item{border-bottom:none;background:transparent;padding:16px 0;}
    .diag-step-header + .diag-form-card .diag-form-item:first-child{padding-top:0;}
    .diag-step-header + .diag-form-card .diag-form-item:last-child{padding-bottom:0;}
    .diag-step-header + .diag-form-card .diag-form-item__input{width:100%;}

    /* 문항 — 모바일: 세로 배치 (질문 위, 예/아니오 아래) */
    .diag-form-card__items{gap:0;padding:0 16px;}
    .diag-form-item{
        border:0;border-radius:0;
        border-bottom:1px solid #e3e6ea;
        padding:20px 0;min-height:0;gap:12px;
        flex-direction:column;align-items:flex-start;
    }
    .diag-form-item:last-child{border-bottom:0;}
    .diag-form-item__q{font-size:16px;font-weight:700;letter-spacing:-0.08px;line-height:1.5;flex:none;width:100%;}
    .diag-form-item__input{flex:none;width:100%;}
    .diag-form-item select.diag-select{width:100%;height:46px;text-align:left;padding-right:44px;}
    .diag-form-item__radios{justify-content:flex-start;gap:32px;}
    .diag-form-item__radios label{padding:0;font-size:16px;font-weight:400;letter-spacing:-0.08px;}

    .diag-form-actions{padding:0 16px;}

    /* yes_step1: 하나의 카드로 묶기 (figma 16456) */
    .diag-form-card__items:has(select){
        gap:0;
        border:1px solid #e3e6ea;border-radius:16px;
        padding:20px;box-sizing:border-box;
    }
    .diag-form-card__items:has(select) .diag-form-item{
        border:0;border-radius:0;
        border-bottom:1px solid #e3e6ea;
        padding:20px 0;
        flex-direction:column;align-items:stretch;gap:12px;
    }
    .diag-form-card__items:has(select) .diag-form-item:last-child{border-bottom:0;}
    .diag-form-card__items:has(select) .diag-form-item select.diag-select{width:100% !important;height:48px;}

    .diag-form-note{font-size:14px;padding:20px 16px;border-radius:12px;line-height:1.5;letter-spacing:-0.14px;}

    .diag-form-actions{gap:4px;margin-top:16px;padding:0;justify-content:center;}
    .diag-form-actions button{font-size:16px;border-radius:12px;}
    .diag-form-actions .btn-prev,
    .diag-form-actions .btn-next:not(.start-btn):not(.arrow-btn){flex:1;padding:14px 16px;}
    .diag-form-actions .start-btn{flex:none;height:48px;padding:0 28px;}
    .diag-form-actions .arrow-btn{width:56px;height:48px;flex:0 0 56px;padding:0;}

    /* ── 결과 페이지 (6145:19605 외) ── */
    .diag-result-wrap{max-width:none;gap:32px;}
    .diag-result-wrap .complete-head{gap:10px;}
    .diag-result-wrap .complete-mark{width:60px;height:62px;}
    .diag-result-wrap .complete-mark img{width:60px;height:62px;}
    .diag-result-wrap .complete-label{font-size:14px;}
    .diag-result-wrap h2.result-title{font-size:22px;line-height:1.45;letter-spacing:-0.5px;white-space:normal;}

    .diag-result-card{padding:20px;border-radius:16px;gap:24px;}
    .diag-result-card h3.sec-title{font-size:18px;}

    /* reason-grid 모바일: 세로 카드, 중앙 정렬 (figma 19605) */
    .reason-grid{grid-template-columns:1fr;gap:4px;}
    .reason-grid .item{
        padding:16px;flex-direction:column;gap:12px;text-align:center;
        border:1px solid #e3e6ea;border-radius:10px;
        align-items:center;overflow:visible;
    }
    .reason-grid .item .ico{width:32px;height:32px;}
    .reason-grid .item .ico img{width:32px;height:32px;}
    .reason-grid .item p{font-size:15px;text-align:center;letter-spacing:-0.075px;}

    .feature-list .row{padding:14px 8px;}
    .feature-list .row-inner{width:100%;gap:10px;}
    .feature-list .row .emo{width:40px;height:40px;}
    .feature-list .row .emo img{width:40px;height:40px;}
    .feature-list .row p{font-size:13px;line-height:1.5;white-space:normal;}

    /* 결과 액션 버튼 — 모바일: 가로 유지 (figma 19605) */
    .diag-result-actions{gap:8px;}
    .diag-result-actions__primary{
        flex-direction:row;gap:8px;width:100%;
    }
    .diag-result-actions button,
    .diag-result-actions a{
        flex:1;padding:0 8px;height:48px;font-size:14px;border-radius:12px;white-space:nowrap;
    }
    /* 진단 다시하기 — 모바일: 작은 텍스트 링크 (figma 19605) */
    .diag-result-actions .btn-result-retry{
        flex:none !important;width:auto;
        padding:0;font-size:13px;background:transparent;height:auto;
    }
    .diag-result-actions .btn-result-retry img{width:18px;height:18px;}

    /* ── 모달 ── */
    .diag-modal-dim{padding:16px;}
    .diag-modal{padding:28px 20px 20px;border-radius:20px;}
    .diag-modal.wide{max-width:100%;}
    .diag-modal h3.modal-title{font-size:17px;line-height:1.5;}
    .diag-modal .icon-mark{width:48px;height:48px;}
    .diag-modal .modal-card{padding:18px;border-radius:12px;}
    .diag-modal .modal-actions{flex-direction:row;gap:8px;}
    .diag-modal .modal-actions button,
    .diag-modal .modal-actions a{height:48px;font-size:14px;border-radius:12px;}

    /* 승계 전략 신청 폼 모달 — 모바일 테이블 → 세로 스택 */
    .diag-modal .form-title{font-size:19px;}
    .diag-modal .form-subtitle{font-size:12px;margin-bottom:16px;}
    .diag-modal table.form-table,
    .diag-modal table.form-table tbody{display:block !important;width:100% !important;}
    .diag-modal table.form-table tr{display:flex !important;flex-wrap:wrap !important;width:100% !important;}
    .diag-modal table.form-table td{display:block !important;width:100% !important;padding:10px 0;box-sizing:border-box;}
    .diag-modal table.form-table td.label{font-size:13px;background:none;}
    .diag-modal table.form-table td.input-cell{padding-top:0;padding-bottom:14px;}
    .diag-modal table.form-table td.input-cell input,
    .diag-modal table.form-table td.input-cell input.apply-input,
    .diag-modal table.form-table td.input-cell input[data-calc]{width:calc(100% - 28px) !important;max-width:none !important;box-sizing:border-box !important;border-color:#e3e6ea !important;}
    .diag-modal table.form-table td.input-cell input[readonly]{width:calc(100% - 28px) !important;max-width:none !important;box-sizing:border-box !important;background:#f5f7f9 !important;border-color:#e3e6ea !important;}
    .diag-modal .modal-actions{display:flex !important;gap:4px !important;padding:0 !important;margin-top:16px !important;width:100% !important;}
    .diag-modal .modal-actions .btn-apply-skip,
    .diag-modal .modal-actions .btn-apply-submit{flex:1 !important;height:48px !important;font-size:14px !important;padding:0 8px !important;border-radius:12px !important;white-space:nowrap !important;width:auto !important;}
}