/**
 * =============================================
 * Able Lead Consulting Tool - 위저드 스타일시트
 *
 * 디자인 스크린샷 기반으로 구현된 CSS입니다.
 * BEM 네이밍 방법론을 적용합니다.
 *
 * 구조:
 * .lead-tool                    - 최상위 래퍼
 * .lead-tool__header            - 헤더 (로고 + 타이틀)
 * .lead-tool__progress          - 진행 바
 * .lead-tool__content           - 질문 + 선택지 영역
 * .lead-tool__option            - 선택지 카드
 * .lead-tool__submit            - 결과 확인하기 버튼
 * =============================================
 */
@font-face{font-family:'Suit';font-weight:400;src:local('SUIT Regular'), url('/wp-content/themes/rsupport/assets/fonts/Suit/SUIT-Regular.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Suit';font-weight:600;src:local('SUIT SemiBold'), url('/wp-content/themes/rsupport/assets/fonts/Suit/SUIT-SemiBold.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Suit';font-weight:700;src:local('SUIT Bold'), url('/wp-content/themes/rsupport/assets/fonts/Suit/SUIT-Bold.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Suit';font-weight:800;src:local('SUIT ExtraBold'), url('/wp-content/themes/rsupport/assets/fonts/Suit/SUIT-ExtraBold.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Suit';font-weight:900;src:local('SUIT Heavy'), url('/wp-content/themes/rsupport/assets/fonts/Suit/SUIT-Heavy.woff2') format('woff2');font-display:swap;}


/* =============================================
리셋 & 페이지 기본 스타일
============================================= */
.lead-tool-wrapper{margin:0;padding:0;background-color:#fff;color:#333;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;}
/* 탭 시 웹킷이 씌우는 네이티브 회색 하이라이트를 끈다 - 선택 표시는 .lead-tool__option--selected로
직접 하고 있어서 네이티브 효과가 필요 없고, 빠른 화면 전환과 겹치면 이 하이라이트가 다음 화면의
같은 위치에 잔상처럼 남아 텍스트가 진해 보이는(선택된 것처럼 보이는) 문제가 있었다. */
.lead-tool-page *{-webkit-tap-highlight-color:transparent;font-family:'Suit', 'Apple SD Gothic Neo', '-apple-system', 'BlinkMacSystemFont', 'Malgun Gothic', '맑은 고딕', sans-serif;}
/* 위 전역 font-family 강제 지정이 .dashicons 아이콘 요소의 font-family까지 'Suit'로
덮어써서, ::before로 그려지는 아이콘 글리프(dashicons 폰트 전용 코드)가 안 보이는
문제가 있었다 - 아이콘 요소만 다시 dashicons 폰트로 되돌린다. */
.lead-tool-page .dashicons{font-family:dashicons !important;}

/* =============================================
   최상위 래퍼모바일
   ============================================= */
.lead-tool{display:flex; flex-direction:column; gap:40px; max-width:1120px;margin:0 auto;padding:30px 40px 100px;min-height:100dvh;box-sizing:border-box;background-color:#ffffff;}

/* =============================================
   헤더: 로고 + 타이틀
   ============================================= */
.lead-tool__header{display:flex;align-items:center;gap:8px;margin-bottom:24px;}
.lead-tool__logo{display:flex;align-items:center;justify-content:center;width:21px;height:20px;}
.lead-tool__title{color:#666;font-size: 18px;font-weight: 800;line-height: 130%;cursor:pointer;}

/* =============================================
   진행 바 영역
   ============================================= */
/* 진행 정보 (단계 텍스트 + 내비 버튼) */
.lead-tool__progress-info{display:flex;align-items:center;justify-content:flex-end;gap:12px;}
.lead-tool__progress-text{font-size:16px;color:#666;}
.lead-tool__progress-current{color:#56ACFF;}

/* 진행 바 트랙 (배경) */
.lead-tool__progress-track{width:100%;height:4px;background-color:#E7E7E7;border-radius:8px;overflow:hidden;margin-top:8px;overflow:hidden;}
.lead-tool__progress-bar{height:100%;background-color:#56ACFF;transition:width 0.4s ease;}

/* =============================================
   내비게이션 버튼 (이전/다음)
   ============================================= */
.lead-tool__nav-btns{display:flex;align-items:center;gap:4px;}
.lead-tool__nav-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #999;border-radius:50%;background:#ffffff;cursor:pointer;color:#999;transition:all 0.2s ease;padding:0;touch-action:manipulation;}
@media (hover: hover) and (pointer: fine) {
    .lead-tool__nav-btn:hover:not(:disabled){border-color:#56ACFF;color:#56ACFF;background-color:#fff;}
}
.lead-tool__nav-btn:disabled{opacity:0.3;cursor:not-allowed;}
.lead-tool__nav-btn--prev:disabled,.lead-tool__nav-btn--next:disabled{display:none;}

/* =============================================
   질문 + 선택지 컨텐츠 영역
   ============================================= */
.lead-tool__content{display:flex;flex-direction:column;flex:1;transition:opacity 0.2s ease, transform 0.2s ease;}
.lead-tool__content--fade-out{opacity:0;transform:translateX(-20px);}
.lead-tool__content--fade-in{animation:fadeIn 0.3s ease forwards;}

@keyframes fadeIn{
    from{opacity:0;transform:translateX(20px);}
    to{opacity:1;transform:translateX(0);}
}

/* =============================================
   단계 래퍼
   ============================================= */
.lead-tool__step{display:flex;flex:1;flex-wrap:nowrap;gap:100px;}

/* =============================================
   질문 텍스트
   ============================================= */
.lead-tool__question{flex:1 1 435px;}
.lead-tool__question h2{box-sizing:border-box;color:#333;font-size: 24px;font-weight: 800;line-height: 120%; word-break:keep-all;}
.lead-tool__question h2 span{display:block;padding-top:18px; color:#56ACFF; font-size: 18px;font-weight: 700;line-height: 130%;}
.lead-tool__prev-question{color:#CCC;font-size: 24px;font-weight: 800;line-height: 120%; word-break:keep-all; cursor:pointer; touch-action:manipulation;}
.lead-tool__prev-divider{border:none;border-top:1px solid #E5E5E5;margin:24px 0;width:100%;}

/* =============================================
   선택지 컨테이너
   ============================================= */
.lead-tool__options-wrap{flex:1 1 504px; }
.lead-tool__options{flex:1;min-width:0;}

/* 세로 리스트 레이아웃 */
.lead-tool__options--list{display:flex;flex-direction:column;gap:16px;}

/* 2열 그리드 레이아웃 */
.lead-tool__options--grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;}

/* =============================================
   선택지 카드 (버튼)
   ============================================= */
.lead-tool__option{display:flex;align-items:center;justify-content:center;min-height:78px;padding:10px 40px;border:1px solid #E5E5E5;border-radius:8px;background-color:#ffffff;font-size:18px;font-weight:600;color:#999;cursor:pointer;transition:border-color 0.2s ease, background-color 0.2s ease;text-align:center;line-height:1.3;word-break:keep-all;touch-action:manipulation;}
/* common.css의 button,button:active,button:focus{color:inherit}가 요소+가상클래스 조합이라
.lead-tool__option(클래스 1개)보다 우선순위가 높아, 다음 화면 전환 직후 새 옵션이 지연된
:active/:focus를 받으면 텍스트가 inherit(거의 검정)로 보이는 문제가 있었다 - 명시적으로 재선언. */
.lead-tool__option:active,
.lead-tool__option:focus{color:#999;}
@media (hover: hover) and (min-width:641px){
    .lead-tool__option:hover{border-color:#56ACFF;background-color:#F1F8FF;color:#666;}
}
.lead-tool__option--selected{border-color:#56ACFF;background-color:#F1F8FF;color:#666;}
.lead-tool__option--selected:active,
.lead-tool__option--selected:focus{color:#666;}
.lead-tool__option--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none;}
/* 640px 이하에서는 :hover/:active/:focus로 인한 색 변화를 원천 차단한다 - 위의
개별 재선언(:active/:focus)만으로는 막지 못하는 경우(터치 후 늦게 도착한 상태,
기기별 hover 오판정 등)가 있어, 모바일 폭에서는 !important로 색을 완전히 고정한다. */
@media (max-width:640px){
    .lead-tool__option,
    .lead-tool__option:hover,
    .lead-tool__option:active,
    .lead-tool__option:focus,
    .lead-tool__option *{color:#999 !important;}
    .lead-tool__option--selected,
    .lead-tool__option--selected:hover,
    .lead-tool__option--selected:active,
    .lead-tool__option--selected:focus,
    .lead-tool__option--selected *{color:#666 !important;}
}

/* =============================================
   "결과 확인하기" 버튼
   - lead-tool.js에서 제어
   ============================================= */
.lead-tool__submit-wrap{margin-top:100px;text-align:center;}
.lead-tool__submit{display:block;width:100%; padding:12px 24px;border:none;border-radius:8px;background-color:#56ACFF;color:#ffffff !important;font-size:20px;font-weight:800;line-height: 120%;cursor:pointer;touch-action:manipulation;}


/* 스크롤바 막대 커스텀 적용 */
::-webkit-scrollbar {width: 4px;height:4px;}
::-webkit-scrollbar-thumb {background: #E0E0E0;border-radius: 2px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-button {display: none !important;width: 0 !important;height: 0 !important;background: transparent !important;border: none !important;box-shadow: none !important;}

.br_mobile{display:none;}

@media screen and (max-width:1024px){
    .lead-tool__title{font-size: 14px;}
    .lead-tool__progress-text{font-size:14px;}

    .lead-tool__question h2{font-size: 18px;}
    .lead-tool__question h2 span{font-size: 14px;}

    .lead-tool__prev-question{font-size: 18px;}
    .lead-tool__option{font-size:16px;}

    .lead-tool__submit{font-size:18px;}
}

@media screen and (max-width:640px){
    .br_pc{display:none;}
    .br_mobile{display:inline;}

    .lead-tool{gap:20px;}
    .lead-tool__content{flex:1;}
    .lead-tool{padding:24px 28px 48px;}
    .lead-tool__header{gap:4px;margin-bottom:20px;}
    .lead-tool__logo{width:12px;height:12px;}
    
    .lead-tool__progress-info{justify-content:space-between;gap:4px;}
    .lead-tool__progress-track{margin-top:4px;}
    .lead-tool__nav-btn{width:20px;height:20px;border:1px solid #b2b2b2; color:#b2b2b2} 
    .lead-tool__nav-btn svg{width:14px; height:14px;}

    .lead-tool__step{flex-direction:column;gap:20px;}
    .lead-tool__options-wrap{display:flex;flex-direction:column; justify-content:space-between; gap:12px; flex-basis: auto;}
    .lead-tool__options{flex:none;}
    .lead-tool__options--list{gap:12px;}
    .lead-tool__question{flex:none;padding-right:0;}
    .lead-tool__prev-divider{margin:12px 0 20px;}
    .lead-tool__question h2{font-size:16px;}
    .lead-tool__question h2 span{display:inline-block; padding-top:0;font-size:12px;font-weight:400;}
    .lead-tool__prev-question{font-size: 16px;}
    .lead-tool__options--grid{grid-template-columns:1fr;}
    .lead-tool__options--grid{grid-template-columns:repeat(2, 1fr);gap:12px;}
    .lead-tool__option{min-height:58px;padding:9px 12px;font-size:14px;}
    .lead-tool__submit-wrap{margin-top:0;}
    .lead-tool__submit{width:100%;min-width:unset;}
}