@charset "UTF-8";
/* 자동견적 (B안) : 메인 AI 견적기 디자인(/static/estimate/wm-estimate.css)에 자동견적 전용 부분만 추가 */
#auto_estimate.wmxm{margin-top:18px;margin-bottom:30px}	/* 메인용 바깥 여백(위 65px, 아래 75px) 대신 공통 제목 바로 아래 */
#auto_estimate .wmxm-top{text-align:left;padding-left:14px}	/* 위 공통 제목 이미지의 막대(▌) 시작 위치(14px)에 맞춤 */
/* 위아래 배치 : 본문 폭(790px)이 좁아 분류 선택(위) → 견적서(아래), 기존 자동견적과 같은 순서 */
#auto_estimate .wmxm-card{grid-template-columns:1fr}
#auto_estimate .wmxm-c2{border-left:0;border-top:1px solid #e3eaf0;background:#f6f9fb}	/* 견적서 구역 : 연한 배경으로 분류 선택과 구분 */
#auto_estimate .wmxm-msg{background:linear-gradient(180deg,rgba(246,249,251,.2),rgba(246,249,251,.94) 45%)}
#auto_estimate .wmx-list{max-height:none;overflow:visible;margin:0;padding:0}
#auto_estimate .wmxm-empty .wmxm-sk:nth-child(3){display:none}

/* ---------- STEP 1 : 분류 선택 ---------- */
/* 제품 종류 탭 : 아래 대/중/소분류 버튼과 구분되도록 회색 바 안의 전환 스위치 모양 */
.ae-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:14px;padding:5px;border-radius:16px;background:#e8eef3}
.ae-tab{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 4px;border:0;border-radius:12px;background:transparent;color:#64748b;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:.15s;letter-spacing:-.4px;white-space:nowrap}
.ae-tab:hover{background:rgba(255,255,255,.65);color:var(--ink)}
.ae-tab.on{background:#fff;color:var(--pt-d);box-shadow:0 2px 8px rgba(15,23,42,.14)}
/* 모바일 자동견적 아이콘 (스프라이트 회색 칸: 애플·PC·부품·모니터) */
.ae-ico{flex:none;width:28px;height:28px;background:url(/static/mobile/img/purchase/mobile_auto_estimate_top_icons.png) no-repeat;background-size:224px 28px;opacity:.7}
.ae-tab.on .ae-ico{opacity:1}
.ae-tab[data-tab=apple] .ae-ico{background-position:-112px 0}
.ae-tab[data-tab=all] .ae-ico{background-position:-140px 0}
.ae-tab[data-tab=part] .ae-ico{background-position:-168px 0}
.ae-tab[data-tab=monitor] .ae-ico{background-position:-196px 0}
.ae-tab[data-tab=notebook] .ae-ico{background:url(/static/mobile/img/purchase/notebook_top_icon.svg) center/28px 28px no-repeat}

.ae-box{border:2px dashed #cfe3ee;border-radius:16px;background:#fbfdfe;padding:14px}
.ae-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #e3eef4}
.ae-head img{height:40px}
.ae-head b{font-size:18px;font-weight:800;letter-spacing:-.4px}
.ae-head span{margin-left:auto;font-size:13px;color:var(--mu)}
.ae-head span em{font-style:normal;font-size:17px;font-weight:800;color:var(--pt)}
/* PC 전체 단계 */
.ae-wz{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:10px}
.ae-wz button{min-width:0;border:1.5px solid var(--ln);border-radius:10px;background:#fff;padding:5px 0 6px;font-size:12px;font-weight:700;font-family:inherit;color:var(--mu);cursor:pointer;white-space:nowrap}
.ae-wz button em{display:block;font-style:normal;font-size:10px;font-weight:500}
.ae-wz button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.ae-wz button.done{border-color:var(--pt-l);background:var(--pt-l);color:var(--pt-d)}
.ae-wz button.done em:after{content:' ✓'}
/* 대/중/소분류 */
.ae-step{margin-bottom:10px}
.ae-step_t{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:13px;font-weight:700;color:var(--tx)}
.ae-step_t i{font-style:normal;font-size:11px;font-weight:900;color:var(--pt);background:var(--pt-l);border-radius:99px;padding:1px 8px}
.ae-step_t .chosen{margin-left:auto;color:var(--pt-d);font-size:12px}
/* 지금 골라야 하는 단계 강조 */
.ae-step.current{margin:0 -6px 12px;padding:10px 10px 12px;border:2px solid var(--pt);border-radius:14px;background:#f2fbff;box-shadow:0 6px 16px -6px rgba(1,163,222,.35)}
.ae-step.current .ae-step_t{color:var(--pt-d);font-size:14px}
.ae-step.current .ae-step_t i{background:var(--pt);color:#fff}
/* 선택하세요 : 파란 테두리와 대비되는 주황 + 퍼지는 레이더 */
.ae-pick{margin-left:auto;padding:3px 10px;border-radius:99px;background:#f97316;color:#fff;font-size:11.5px;font-weight:800;animation:aePick 1.6s ease-out infinite}
@keyframes aePick{0%{box-shadow:0 0 0 0 rgba(249,115,22,.6)}70%{box-shadow:0 0 0 9px rgba(249,115,22,0)}100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}}
/* 분류 버튼 (크게, 칸 맞춤) */
.ae-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:7px}
.ae-chips.tiles{grid-template-columns:repeat(3,1fr)}
.ae-chip{min-height:42px;border:1.5px solid #d5dee6;background:#fff;border-radius:11px;padding:8px 8px;font-size:15px;font-weight:700;font-family:inherit;color:var(--ink);line-height:1.3;word-break:keep-all;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.06);transition:border-color .12s,background-color .12s,color .12s,box-shadow .12s,transform .12s}
.ae-chip:hover{border-color:var(--pt);color:var(--pt-d);transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(1,163,222,.45)}
.ae-chip.on{border-color:var(--pt);background:var(--pt);color:#fff;box-shadow:0 4px 12px -4px rgba(1,163,222,.6)}
/* PC 부품 대분류 : 아이콘 왼쪽 가로형 버튼 (위 제품 종류 탭과 다른 모양) */
.ae-chip.has-ico{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:15px;text-align:left}
.ae-chip.has-ico img{height:30px}
.ae-chip.has-ico.on img{filter:brightness(0) invert(1)}
.ae-step.locked .ae-step_t{color:#94a3b8}
.ae-step.locked .ae-step_t i{background:#eef2f6;color:#94a3b8}
.ae-lock{border:1.5px dashed #dbe4ea;border-radius:10px;padding:8px 12px;font-size:13px;color:#94a3b8}
.ae-lock a{color:var(--pt-d);font-weight:700;text-decoration:underline}

/* 검색 / 상품 목록 */
.ae-search{display:flex;gap:6px;margin:4px 0 10px}
#auto_estimate .ae-search input{flex:1;min-width:0;height:auto;border:1.5px solid var(--ln);border-radius:10px;padding:8px 11px;font-size:14px;font-family:inherit;color:var(--ink);outline:none}
#auto_estimate .ae-search input::placeholder{color:#c8ced5;opacity:1}
#auto_estimate .ae-search input::-webkit-input-placeholder{color:#c8ced5}
#auto_estimate .ae-search input:-ms-input-placeholder{color:#c8ced5}
#auto_estimate .ae-search input:focus{border-color:var(--pt);box-shadow:0 0 0 3px rgba(1,163,222,.1)}
.ae-search button{border:0;border-radius:10px;background:var(--ink);color:#fff;padding:0 14px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer}
.ae-plist{background:#fff;border:1px solid var(--ln);border-radius:12px;overflow:hidden}
.ae-plist_h{display:flex;align-items:center;padding:9px 12px;border-bottom:1px solid #eef2f6;font-size:13px;font-weight:700}
.ae-plist_h span{margin-left:6px;color:var(--mu);font-weight:500}
.ae-notice{margin:8px 10px 0;padding:8px 10px;border-radius:9px;background:#fffbeb;color:#92400e;font-size:12.5px;line-height:1.55}
.ae-rows{max-height:380px;overflow:auto;padding:4px 0}
.ae-row{display:flex;align-items:center;gap:8px;padding:8px 12px}
.ae-row + .ae-row{border-top:1px solid #f1f5f9}
.ae-row .nm{flex:1;min-width:0;font-size:14px;line-height:1.35}
.ae-row .nm small{display:block;color:#94a3b8;font-size:11.5px}
.ae-row .pr{font-size:14px;font-weight:800;white-space:nowrap}
.ae-add{border:1.5px solid var(--pt);background:#fff;color:var(--pt-d);border-radius:9px;padding:5px 10px;font-size:12.5px;font-weight:800;font-family:inherit;white-space:nowrap;cursor:pointer}
.ae-add:hover{background:var(--pt);color:#fff}
.ae-add.added{border-color:var(--pt-l);background:var(--pt-l)}
.ae-empty{padding:26px 10px;text-align:center;color:#94a3b8;font-size:13px;line-height:1.7}

/* ---------- STEP 2 : 견적서 (wmx-item 사용) ---------- */
.wmxm .wmx-list.on{display:block}
.ae-irow2{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.ae-ipr{font-size:16px;font-weight:800;white-space:nowrap}
.ae-cat{display:inline-block;font-size:11px;font-weight:800;color:var(--pt-d);background:var(--pt-l);border-radius:6px;padding:1px 6px;margin-right:6px;vertical-align:2px}
.ae-toast{position:fixed;left:50%;bottom:30px;z-index:9999;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 18px;border-radius:30px;font-size:13px;font-family:Pretendard,'Malgun Gothic',sans-serif;opacity:0;transition:.25s;pointer-events:none}
.ae-toast.show{opacity:.95}

/* ---------- 1200px 개편 (2026-11-04) : 자동견적 페이지만 적용 ---------- */
/* 본문 790 → 990 */
#content_section:has(#auto_estimate), #content_section:has(#auto_estimate) #content_head_wrapper, #content_section:has(#auto_estimate) #content_head_wrapper h3 {width:990px;}
#auto_estimate .wmxm-top h2, #auto_estimate .wmxm-top p {width:auto;}