/* ══════════════════════════════════════════════════════════
   LX ANALYZE — 도구 페이지 공통 분석 패널 (2026-09-20 신설)

   왜 만들었나
     블로그 지수 체커 / 플레이스 순위 / 스마트스토어 순위가
     각자 다른 헤더와 다른 입력창, 다른 로딩을 쓰고 있었다.
     블로그 체커는 상단 헤더가 연보라 띠에 흰 글자로 깨져 있기까지 했다.

     그리고 셋 다 로딩이 "돌아가는 원 + 한 줄 문구"뿐이라
     10~20초 걸리는 작업에서 지금 뭘 하는 중인지 알 수 없었다.

   무엇을 하나
     LUMEX 포털의 키워드 진단과 같은 구조로 맞춘다.
       · 잉크 패널 + 라임 액센트
       · 큰 입력칸 하나 + 라임 CTA
       · 추천 입력 칩으로 첫 입력 장벽 제거
       · 대기 시간을 단계 서사로 보여주는 진행 표시
   ══════════════════════════════════════════════════════════ */

.lxa{
  --lxa-ink:#0c0c12;
  --lxa-deep:#0a0a10;
  --lxa-lime:#b9ff66;
  --lxa-line:rgba(255,255,255,.10);
  position:relative;
  background:linear-gradient(135deg,#101017 0%,#0a0a10 62%);
  border:1px solid var(--lxa-line);
  border-radius:22px;
  padding:26px 28px 24px;
  margin-bottom:26px;
  overflow:hidden;
}
/* 오른쪽 위 은은한 라임 광원 — 시안과 같은 처리 */
.lxa::before{
  content:'';position:absolute;top:-40%;right:-12%;width:440px;height:440px;
  background:radial-gradient(circle,rgba(185,255,102,.10) 0%,transparent 66%);
  pointer-events:none;
}
.lxa > *{position:relative}

/* ── 머리 ───────────────────────────────────────────── */
.lxa-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.lxa-eb{
  display:inline-flex;align-items:center;gap:7px;
  font-size:9.5px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lxa-lime);
}
.lxa-eb i{width:6px;height:6px;border-radius:50%;background:var(--lxa-lime);flex:none;
  box-shadow:0 0 8px rgba(185,255,102,.6)}
.lxa h2{
  margin:9px 0 0;font-size:clamp(21px,2.5vw,29px);font-weight:850;
  letter-spacing:-.045em;line-height:1.24;color:#fff;
}
.lxa h2 em{font-style:normal;color:var(--lxa-lime);display:block}
.lxa-lead{margin:10px 0 0;font-size:13px;line-height:1.66;color:rgba(255,255,255,.55);max-width:60ch}

/* 오른쪽 위 포인트/상태 배지 */
.lxa-meta{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.lxa-meta > span{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:6px 12px;border-radius:999px;
  background:rgba(185,255,102,.12);border:1px solid rgba(185,255,102,.22);
  font-size:11px;font-weight:800;color:var(--lxa-lime);white-space:nowrap;
}
.lxa-meta > span small{font-size:9.5px;color:rgba(185,255,102,.65);font-weight:700}

/* ── 입력 줄 ────────────────────────────────────────── */
.lxa-label{
  display:block;margin:20px 0 7px;
  font-size:11.5px;font-weight:800;color:rgba(255,255,255,.62);letter-spacing:-.01em;
}
.lxa-bar{
  display:flex;align-items:stretch;gap:0;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:15px;overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.lxa-bar:focus-within{
  border-color:var(--lxa-lime);
  box-shadow:0 0 0 4px rgba(185,255,102,.13);
}
.lxa-bar input[type="text"],
.lxa-bar input[type="search"]{
  flex:1;min-width:0;
  background:transparent !important;border:0 !important;outline:0 !important;
  padding:16px 18px !important;
  font-size:15px !important;font-weight:700;color:#fff !important;
  font-family:inherit;box-shadow:none !important;
}
.lxa-bar input::placeholder{color:rgba(255,255,255,.34);font-weight:600}
.lxa-bar select{
  flex:none;background:rgba(255,255,255,.06) !important;
  border:0 !important;border-left:1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;font-size:13px;font-weight:700;padding:0 14px !important;
  font-family:inherit;outline:0 !important;border-radius:0 !important;
}
.lxa-go{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  margin:5px;padding:0 22px;border:0;border-radius:11px;cursor:pointer;
  background:var(--lxa-lime);color:#0b1304;
  font-size:14px;font-weight:850;font-family:inherit;letter-spacing:-.02em;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.lxa-go:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 22px rgba(185,255,102,.28)}
.lxa-go:disabled{opacity:.55;cursor:not-allowed}

.lxa-note{
  margin:10px 0 0;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.42);
}
.lxa-note code{
  background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;
  font-size:11px;color:rgba(255,255,255,.72);
}

/* ── 추천 입력 칩 ──────────────────────────────────── */
.lxa-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px}
.lxa-chips b{font-size:10.5px;font-weight:800;color:rgba(255,255,255,.34);margin-right:2px}
.lxa-chip{
  padding:5px 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  font-size:11.5px;font-weight:700;color:rgba(255,255,255,.66);font-family:inherit;
  transition:.16s ease;
}
.lxa-chip:hover{background:rgba(185,255,102,.13);border-color:rgba(185,255,102,.35);color:var(--lxa-lime)}

/* ══════════════════════════════════════════════════════════
   진행 표시 — 대기 시간을 단계 서사로
   ══════════════════════════════════════════════════════════ */
.lxa-run{
  display:none;margin-top:20px;padding:30px 24px 24px;
  background:rgba(0,0,0,.34);border:1px solid var(--lxa-line);border-radius:18px;
  text-align:center;
}
.lxa-run.on{display:block}

.lxa-ring{position:relative;width:132px;height:132px;margin:0 auto 18px}
.lxa-ring svg{width:132px;height:132px;transform:rotate(-90deg)}
.lxa-ring circle{fill:none;stroke-linecap:round}
.lxa-ring .trk{stroke:rgba(255,255,255,.09);stroke-width:7}
.lxa-ring .bar{
  stroke:url(#lxaGrad);stroke-width:7;
  transition:stroke-dashoffset .55s cubic-bezier(.22,1,.36,1);
}
.lxa-pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:850;color:var(--lxa-lime);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}

.lxa-run-eb{
  display:block;font-size:9.5px;font-weight:850;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lxa-lime);margin-bottom:9px;
}
.lxa-run h3{
  margin:0 0 7px;font-size:17px;font-weight:850;color:#fff;letter-spacing:-.035em;
}
.lxa-run p{margin:0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.48)}
.lxa-run p b{color:rgba(255,255,255,.78);font-weight:800}

/* 단계 레일 */
.lxa-rail{margin:22px auto 0;max-width:640px}
.lxa-rail-trk{height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.lxa-rail-bar{
  height:100%;width:0;border-radius:2px;background:var(--lxa-lime);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
.lxa-steps{display:flex;margin-top:11px}
.lxa-step{flex:1;text-align:center;min-width:0}
.lxa-step i{
  display:block;width:7px;height:7px;border-radius:50%;margin:0 auto 7px;
  background:rgba(255,255,255,.18);transition:.3s ease;
}
.lxa-step span{
  display:block;font-size:10px;line-height:1.4;font-weight:700;
  color:rgba(255,255,255,.3);transition:.3s ease;
  overflow:hidden;text-overflow:ellipsis;
}
.lxa-step.done i{background:rgba(185,255,102,.5)}
.lxa-step.done span{color:rgba(255,255,255,.5)}
.lxa-step.now i{background:var(--lxa-lime);box-shadow:0 0 0 4px rgba(185,255,102,.16)}
.lxa-step.now span{color:var(--lxa-lime);font-weight:850}

/* ── 시작 전 안내 ──────────────────────────────────── */
.lxa-idle{
  display:flex;align-items:center;gap:14px;margin-top:20px;
  padding:22px 24px;border-radius:18px;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.13);
}
.lxa-idle.off{display:none}
.lxa-idle-n{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(185,255,102,.32);
  font-size:12px;font-weight:850;color:var(--lxa-lime);
}
.lxa-idle-t{min-width:0}
.lxa-idle-t b{display:block;font-size:14px;font-weight:850;color:#fff;letter-spacing:-.03em}
.lxa-idle-t span{display:block;margin-top:3px;font-size:12px;color:rgba(255,255,255,.45);line-height:1.55}

/* ── 오류 ──────────────────────────────────────────── */
.lxa-err{
  display:none;align-items:center;gap:9px;margin-top:16px;
  padding:13px 16px;border-radius:12px;
  background:rgba(255,158,196,.10);border:1px solid rgba(255,158,196,.28);
  font-size:12.5px;font-weight:700;color:#ffb4ac;
}
.lxa-err.on{display:flex}

@media (max-width:640px){
  .lxa{padding:22px 18px 20px;border-radius:18px}
  .lxa-bar{flex-wrap:wrap}
  .lxa-bar input[type="text"],.lxa-bar input[type="search"]{flex:1 1 100%;padding:14px 15px !important}
  .lxa-bar select{flex:1 1 auto;border-left:0 !important;border-top:1px solid rgba(255,255,255,.10) !important;padding:12px 14px !important}
  .lxa-go{flex:1 1 auto;justify-content:center;padding:13px 18px}
  .lxa-ring,.lxa-ring svg{width:108px;height:108px}
  .lxa-step span{font-size:9px}
  .lxa-idle{padding:18px 16px}
}