/* 13 STEP 워크북 ★홍보 쪽 (2026-10-24 회장님 지시)
     > "13step워크북 페이지 비로그인 페이지도 이쁘게 다른 페이지들처럼 꾸미자.
     >  불필요한 문구나 설명은 없애고 최대한 간결한 설명과 멋있고 화려한 이미지들과 표와 도형들"

   ★색은 ★여기서 짓지 않는다 — 13칸의 색은 `workbook_hwpx.STEPS`(제품)가 준다.
     템플릿이 `--d`(진한 색)·`--p`(연한 색)로 꽂아 준다. ⇒ 실제 워크북과 ★같은 색이다.
   ★인라인 스타일을 쓰지 않는다(§2-5) — ★변수만 꽂고 ★규칙은 전부 여기 있다.
   ★그림 파일을 안 쓴다 — ★기출 지문 본문을 ★웹에 올릴 수 없기 때문이다(§0-7).
     ⇒ ★양식을 ★도형·표로 ★그대로 옮기고 ★예문은 ★우리가 쓴 문장을 넣는다. */

/* ══ ★★2026-10-30 회장님 지시 — ★지문분석지 홍보 쪽도 ★이 틀로 ════════════════════
     > "지문분석지 생성 페이지도 13워크북 소개페이지처럼 만들어줘."
   ★베끼지 ★않는다 — ★428줄을 복사하면 ★두 선이 되고 ★언제 어긋났는지 아무도 모른다
     (§0-9 ⑥). ⇒ ★제품 색만 ★변수로 빼고 ★규칙은 ★이 파일 하나에 둔다.
   ★워크북 쪽은 ★한 픽셀도 달라지지 않는다 — ★기본값이 ★전에 박혀 있던 보라 그대로다.
   ★분석지 쪽은 `static/css/analysis_lp.css` 가 ★이 변수만 ★청록으로 바꿔 꽂는다
     (`.lp-analysis` — 상단 메뉴·환영 박스·`.wbl-trio--analysis` 와 ★같은 축의 색). */
.lp-feature {
  --lpa:      #6D28D9;   /* 진한 제품색 — 글자·단추·띠 */
  --lpa-2:    #4C1D95;   /* 패널 그라데이션 가운데 */
  --lpa-3:    #312E81;   /* 패널 그라데이션 끝 */
  --lpa-pale: #EEE7FB;   /* 칸 바탕 */
  --lpa-tint: #F1ECFD;   /* 눈썹 바탕 */
  --lpa-line: #E0D6FA;   /* 눈썹·칸 테두리 */
  --lpa-edge: #E2D8FB;   /* 한 세트 칸 테두리 */
  --lpa-ink:  #3B2E6E;   /* 한 세트 칸 글자 */
  --lpa-soft: #A78BFA;   /* ＋ 기호 */
  --lpa-line2: #D8CCF5;  /* 커서 올렸을 때 알약 테두리 */
  --lpa-rgb:  109, 40, 217;   /* 그림자·빛에 쓰는 같은 색(투명도가 붙는다) */
  --lpa-deep-rgb: 76, 29, 149;   /* 진한 패널이 바닥에 드리우는 그림자 */
  --lpa-chip: #C4B5FD;   /* 진한 패널 안 아이콘 */
  --lpa-dot:  #A5F3FC;   /* 진한 패널 눈썹 점·글자 */
}

.wbl-hero {
  padding: 56px 0 44px;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(var(--lpa-rgb, 109, 40, 217), .13), transparent 62%),
    radial-gradient(760px 380px at 92% 8%, rgba(29, 78, 216, .11), transparent 60%);
}
.wbl-hero .in { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.wbl-kick {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--lpa, #6D28D9); background: var(--lpa-tint, #F1ECFD);
  border: 1px solid var(--lpa-line, #E0D6FA);
  border-radius: 999px; padding: 6px 13px; margin: 0 0 16px;
}
.wbl-kick i { width: 7px; height: 7px; border-radius: 50%; background: var(--lpa, #6D28D9); }
.wbl-h1 {
  margin: 0 0 14px; font-size: clamp(28px, 4.4vw, 44px); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.22; color: var(--ink, #0F172A);
}
.wbl-h1 b { color: var(--lpa, #6D28D9); }
.wbl-lead {
  margin: 0 0 26px; font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.65;
  color: var(--ink-2, #475569); max-width: 42em;
}
/* ★★단추 셋을 ★정렬한다 (2026-10-25 회장님 지시 ① «일관성있고 정렬되게»)
     ★전에는 `flex-wrap` — ★글자 길이가 ★폭을 정해 셋이 ★149·93·273px 로 ★다 달랐고
     ★꺾인 줄의 ★오른쪽 끝이 ★안 맞았다. ⇒ ★격자로 ★자리를 ★고정한다.
     ★폭 상한 420px — ★머리 글자(최대 60px)와 ★균형이 맞는 길이다(실측으로 골랐다). */
.wbl-cta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; max-width: 420px;
}
.wbl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; box-sizing: border-box;
  font-size: 15px; font-weight: 800; border-radius: 12px;
  height: 48px; padding: 0 18px;            /* ★높이를 ★같게 — 패딩으로 두면 ★글자 수가 높이를 바꾼다 */
  background: var(--lpa, #6D28D9); color: #fff; border: 1px solid var(--lpa, #6D28D9);
  transition: transform .12s ease, box-shadow .12s ease;
}
.wbl-btn:hover { transform: translateY(-1px);
                 box-shadow: 0 8px 22px rgba(var(--lpa-rgb, 109, 40, 217), .26); }
.wbl-btn--ghost { background: #fff; color: #334155; border-color: #D7DEE8; }
.wbl-btn--ghost:hover { box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
/*   ★두 칸을 가로지르는 단추 — ★끝이 ★위 두 단추와 ★한 줄로 떨어진다 */
.wbl-cta-wide { grid-column: 1 / -1; }
/*   ★단추가 ★하나뿐일 때 (2026-10-25 밤 — «무료로 시작하기»·«로그인» 을 뺐다)
       ★격자가 필요 없다. ★하나니까 ★더 크게 두어 ★눌러야 할 곳이 ★분명해진다. */
.wbl-cta--one { display: block; max-width: none; }
.wbl-cta--one .wbl-btn { height: 54px; font-size: 16px; padding: 0 24px; }
/*   ★«무료» 는 ★표로 앞에 — ★글자를 줄이지 않고 ★무엇이 공짜인지 ★먼저 보인다 */
.wbl-btn--free { font-size: 14.5px; letter-spacing: -.02em; }
.wbl-btn-tag {
  font-style: normal; font-size: 11.5px; font-weight: 900; letter-spacing: .02em;
  color: #fff; background: linear-gradient(96deg, #1E3A5F, var(--lpa, #6D28D9));
  border-radius: 6px; padding: 3px 7px;
}

/* ── 숫자 띠 ── */
/* ★넷이 ★한 줄에 — flex 로 두니 ★3+1 로 깨져 ★마지막 하나가 외톨이가 됐다(2026-10-24 화면 확인) */
/* ★★숫자 상자 넷 → ★«그래서 뭐가 좋은데» 셋 (2026-10-24 회장님 «더 임팩트있고 간결한 다른걸»)
     ★큰 숫자는 ★눈에는 띄지만 ★뜻을 ★한 번 더 생각하게 했다(«0 지문 손대는 글자 수»).
     ⇒ ★짧은 말 ★한 줄 + ★설명 ★한 줄. ★왼쪽에 ★보라 점 하나로 ★차례를 만든다. */
.wbl-pills {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.wbl-pills li {
  position: relative; background: #fff; border: 1px solid #E6EAF0;
  border-radius: 14px; padding: 14px 15px 14px 30px;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.wbl-pills li::before {
  content: ""; position: absolute; left: 14px; top: 19px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--lpa, #6D28D9);
}
.wbl-pills li:hover {
  transform: translateY(-2px);
  border-color: var(--lpa-line2, #D8CCF5);
  box-shadow: 0 8px 20px rgba(var(--lpa-rgb, 109, 40, 217), .14);
}
.wbl-pills b {
  display: block; font-size: 15.5px; font-weight: 900; letter-spacing: -.01em; color: #0F172A;
}
.wbl-pills span { display: block; margin-top: 3px; font-size: 12.5px; color: #64748B; line-height: 1.5; }

/* ── 13칸 도형 격자 ── */
.wbl-sec { padding: 52px 0; }
.wbl-sec .in { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.wbl-sec-h {
  margin: 0 0 6px; font-size: clamp(20px, 2.4vw, 27px); font-weight: 900;
  letter-spacing: -.025em; color: var(--ink, #0F172A);
}
.wbl-sec-s { margin: 0 0 22px; font-size: 14.5px; color: var(--ink-2, #64748B); }

.wbl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.wbl-cell {
  /*   ★칸 색은 ★템플릿이 꽂는다(워크북 13칸) — ★안 꽂으면 ★쪽 색을 쓴다(분석지) */
  --d: var(--lpa, #6D28D9); --p: var(--lpa-pale, #EEE7FB);
  background: var(--p); border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 13px; padding: 13px 14px 14px; position: relative; overflow: hidden;
  /*   ★★커서가 가면 ★그 단계가 ★살아난다 (2026-10-24 회장님 지시)
         > "13단계 박스별로 ★커서가 가면 ★효과가 나오게 효과를 넣자"
       ★어떻게 — ★살짝 떠오르고 · ★그 단계 색의 그림자가 깔리고 ·
         ★왼쪽 색 띠가 ★두꺼워지고 · ★번호가 ★커진다.
       ★색은 ★그 칸이 이미 가진 `--d` 를 쓴다 — ★단계마다 ★다른 색으로 빛난다
         (`workbook_hwpx.STEPS` 가 단일 출처 · ★여기 숫자를 적지 않는다).
       ★움직임을 싫어하는 분께는 ★멈춘다(맨 아래 규칙). */
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.wbl-cell::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--d);
  transition: width .16s ease;
}
.wbl-cell:hover, .wbl-cell:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--d) 38%, rgba(15, 23, 42, .07));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--d) 22%, transparent);
}
.wbl-cell:hover::before, .wbl-cell:focus-within::before { width: 7px; }
.wbl-cell:hover .wbl-cell-no, .wbl-cell:focus-within .wbl-cell-no { font-size: 12.5px; }
.wbl-cell-no { transition: font-size .16s ease; }
.wbl-cell-no {
  font-size: 11.5px; font-weight: 900; letter-spacing: .08em; color: var(--d);
  font-variant-numeric: tabular-nums;
}
.wbl-cell-t { margin: 3px 0 2px; font-size: 15px; font-weight: 800; color: #0F172A; }
.wbl-cell-e { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--d); opacity: .72; }
.wbl-cell-n { margin-top: 7px; font-size: 11.5px; line-height: 1.45; color: #475569; }

/* ── 히어로 그림 · 흐름 띠 · 쪽 그림 (2026-10-24 회장님이 주신 그림 + 진짜 산출물) ── */
/*   ★★2026-10-25 회장님 지시 — ★머리 그림을 ★바꾸고 ★줄였다
       ★새 그림(`steps-flow.webp`)은 ★974×233 — ★가로로 길다(옛 그림은 771×449 세로형).
       ⇒ ①오른쪽 칸을 ★조금 넓히고(.95fr → 1.15fr) ②★폭에 상한을 둔다(★«크기도 줄이고»).
       ★상한 460px — ★원본 974px 의 ★47% 다. ★더 줄이면 ★단계 글자가 ★뭉개진다(실측으로 골랐다). */
/*   ★★2026-10-25 밤 — ★제목을 ★2열 ★위로 뺐다(회장님 «한줄로 쓰는게 나을거같아»).
       ★왼쪽 칸(480px)에 두면 ★60px 글자로 ★한 줄이 ★물리적으로 안 된다 ⇒ ★전체 폭을 준다.
     ★아래 2열은 ★왼쪽 단추 하나 · ★오른쪽 [ONE SET + 그림] 이다. */
.wbl-hero-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px;
                 align-items: start; margin-top: 10px; }
.wbl-hero-img img, .wbl-flow, .wbl-dl { display: block; width: 100%; height: auto; }
.wbl-hero-img { max-width: 460px; margin: 14px 0 0 auto; }
/*   ★오른쪽 칸 — ★ONE SET 가 ★위, ★그림이 ★아래(회장님 «오른쪽 이미지 위에») */
.wbl-hero-right { display: block; }
/*   ★한 줄 제목 — ★꺾이지 않게 ★글자 사이를 ★조금 더 조인다. ★폰에서는 ★저절로 꺾인다. */
.wbl-h1--one { letter-spacing: -.042em; text-wrap: nowrap; }
@media (max-width: 1100px) { .wbl-h1--one { text-wrap: balance; } }
/*   ★`.wbl-band`(옛 흐름 그림 띠)는 ★그림이 ★머리로 올라가며 ★쪽에서 사라졌다.
       ★규칙은 ★남겨 둔다 — ★아래 13칸이 ★같은 이름(`.wbl-band-*`)을 ★쓴다(160행). */
.wbl-flow { max-width: 1100px; margin: 0 auto 18px; }
.wbl-shot {
  margin: 0; background: #fff; border: 1px solid #E6EAF0; border-radius: 14px;
  overflow: hidden; box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}
.wbl-shot img { display: block; width: 100%; height: auto; }
.wbl-shot figcaption {
  padding: 11px 14px; font-size: 13px; color: #475569; border-top: 1px solid #EEF2F7;
  background: #FBFCFE;
}
.wbl-shot figcaption b { color: var(--lpa, #6D28D9); margin-right: 7px; font-weight: 800; }
.wbl-last-grid { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center; }

/* ── 양식 모형 (도형으로 그린 실제 양식) ── */
/* ★두 칸으로 — 넷을 ★auto-fit 으로 두니 ★3+1 이 되고 ★글씨가 너무 작아졌다 */
.wbl-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.wbl-paper {
  --d: var(--lpa, #6D28D9); --p: var(--lpa-pale, #EEE7FB);
  background: #fff; border: 1px solid #E6EAF0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}
.wbl-band { display: flex; align-items: stretch; border-bottom: 2px solid var(--d); }
.wbl-band-no {
  background: var(--d); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  padding: 11px 13px; display: flex; align-items: center;
}
.wbl-band-t {
  font-size: 15.5px; font-weight: 900; color: var(--d); padding: 11px 13px; flex: 1;
}
.wbl-band-e {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: #94A3B8;
  padding: 11px 13px; display: flex; align-items: center;
}
.wbl-how { background: var(--p); font-size: 12.5px; color: #334155; padding: 9px 13px; }
.wbl-how b { color: var(--d); margin-right: 10px; }
.wbl-tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wbl-tb th {
  background: var(--d); color: #fff; font-weight: 700; padding: 8px 10px; text-align: left;
  font-size: 11.5px; letter-spacing: .03em;
}
.wbl-tb td { border-bottom: 1px solid #EEF2F7; padding: 9px 10px; color: #1F2937; vertical-align: top; }
.wbl-tb td.no { color: var(--d); font-weight: 800; width: 34px; text-align: center; }
.wbl-tb td.blank { width: 34%; }
.wbl-ul { border-bottom: 1.5px solid #CBD5E1; display: inline-block; min-width: 76px; }
.wbl-hole { color: #94A3B8; letter-spacing: .12em; }
.wbl-ans { background: var(--p); font-size: 12px; color: #334155; padding: 9px 13px; }
.wbl-ans b { color: var(--d); margin-right: 10px; }
.wbl-cap { margin: 9px 2px 0; font-size: 12px; color: #94A3B8; }

/* ══ ★★2026-10-25 회장님 지시 — ★«크고 화려하게» ════════════════════════════
     > "★더 세련되게 ★간결하게 ★크고 ★화려하게 넣자"
   ★무엇을 ★화려함으로 삼았나 (외부 참고: Vercel · Linear · Framer 의 머리 글자)
     ①★그라데이션 글자 — 네이비→보라→스카이. 우리 아이콘 그라디언트와 ★같은 축이다.
     ②★글자를 ★한 치수 더 — 44px 상한을 ★60px 까지(폰에서는 ★줄어든다 · clamp).
     ③★뒤에 ★은은한 빛 한 겹 — ★글자 뒤에서 ★느리게 숨 쉰다(14초 · 거의 안 보일 만큼).
   ★«촌스러움»은 ★움직임이 ★많을 때 온다 ⇒ ★숨쉬기 ★하나만 둔다. 반짝임·회전은 없다.
   ★움직임을 싫어하는 분께는 ★멈춘다(파일 끝 `prefers-reduced-motion`). */
.wbl-h1--mega,
.wbl-sec-h--mega {
  position: relative;
  font-size: clamp(30px, 5.6vw, 60px);
  font-weight: 900; letter-spacing: -.035em; line-height: 1.14;
  text-wrap: balance;
  margin: 0 0 18px;
}
.wbl-h1--mega b,
.wbl-sec-h--mega b {
  background: linear-gradient(96deg, #1E3A5F 0%, var(--lpa, #6D28D9) 48%,
                              var(--lpa-grad-end, #38BDF8) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--lpa, #6D28D9);   /* ★못 그리는 브라우저용 */
}
/*   ★글자 뒤의 빛 — ★글자를 가리지 않게 ★아래 겹에 둔다 */
.wbl-h1--mega::before,
.wbl-sec-h--mega::before {
  content: ""; position: absolute; z-index: -1;
  left: -6%; top: -36%; width: 62%; height: 170%;
  background: radial-gradient(closest-side, rgba(var(--lpa-rgb, 109, 40, 217), .17), transparent 72%);
  animation: wbl-breathe 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wbl-breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.wbl-sec-h--mega { text-align: center; }
.wbl-sec-h--mega::before { left: 19%; }
.wbl-sec-s--big {
  margin: -6px 0 26px; text-align: center;
  font-size: clamp(15px, 1.9vw, 20px); font-weight: 700; color: #475569;
}
.wbl-sec-s--big b { color: var(--lpa, #6D28D9); font-weight: 900; }

/* ── ★★한 세트로 드리는 것 (워크북 파일 ＋ 정답지 ＋ 정답 QR코드) ──
     ★2026-10-25 회장님 지시 ① — ★«한 세트로 제공한다는 느낌» · ★«위아래가 너무 붙어있어»
     ★전(알약 넷)이 왜 약했나: ①단추 바로 아래 ★8px — ★숨 쉴 틈이 없었다
       ②★«제공» 이 ★네 번째 알약이라 ★셋과 ★같은 무게로 읽혔다(★셋을 ★묶는 말인데).
     ⇒ ①★테두리 한 칸에 ★담는다(담는 것이 ★«한 세트»를 ★눈으로 말한다)
       ②★위 틈 ★28px — ★단추와 ★떨어진다  ③★셋 사이는 ★＋ (★더하면 ★한 벌이다) */
.wbl-set {
  margin: 28px 0 26px; max-width: 460px;
  border: 1px solid var(--lpa-edge, #E2D8FB); border-radius: 16px;
  padding: 14px 16px 15px;
  background: linear-gradient(176deg, #FBF9FF 0%, #F4F0FE 100%);
  box-shadow: inset 0 1px 0 #fff;
}
.wbl-set-h {
  display: flex; align-items: center; gap: 7px; margin: 0 0 11px;
  font-size: 10.5px; font-weight: 900; letter-spacing: .16em; color: var(--lpa, #6D28D9);
}
.wbl-set-h i { width: 6px; height: 6px; border-radius: 50%;
               background: var(--lpa, #6D28D9); flex: 0 0 auto; }
.wbl-set-h b {
  margin-left: 2px; font-size: 12.5px; font-weight: 800;
  letter-spacing: -.01em; color: var(--lpa-ink, #3B2E6E);
}
.wbl-set-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.wbl-set-list li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: var(--lpa-ink, #3B2E6E);
  background: #fff; border: 1px solid var(--lpa-edge, #E2D8FB);
  border-radius: 10px; padding: 8px 12px;
}
.wbl-set-list li svg { width: 15px; height: 15px; color: var(--lpa, #6D28D9); flex: 0 0 auto; }
/*   ★＋ 는 ★표시가 아니라 ★낱말 사이의 ★부품이다 — ★마크업에 두어 ★줄이 꺾일 때
       ★앞머리에 남지 않게 한다(옛 알약에서 ★가운뎃점이 ★그렇게 남았다). */
.wbl-set-plus { font-size: 12px; font-weight: 800; color: var(--lpa-soft, #A78BFA); }

/* ── ★★ONE SET ★크게 (2026-10-25 밤 회장님 «one set가 커야 될거같아 · 임팩트있게») ──
     ★연한 칸은 ★바로 아래 그림에 ★묻힌다 ⇒ ★진한 보라 패널 + ★흰 글자로 간다.
     ★이 쪽이 ★파는 것이 ★«한 세트»다 — ★가장 큰 자리에 ★가장 진하게 둔다.
     ★움직임은 ★안 넣는다(10-25 «촌스러워»가 기준 · 빛 한 겹으로 ★떠 보이게만 한다). */
.wbl-set--big {
  max-width: none; margin: 0;
  padding: 20px 22px 22px;
  border: 0; border-radius: 20px;
  background:
    radial-gradient(520px 220px at 110% -30%, rgba(56, 189, 248, .30), transparent 62%),
    linear-gradient(142deg, var(--lpa, #6D28D9) 0%, var(--lpa-2, #4C1D95) 56%,
                    var(--lpa-3, #312E81) 100%);
  box-shadow: 0 18px 44px rgba(var(--lpa-deep-rgb, 76, 29, 149), .30),
              inset 0 1px 0 rgba(255, 255, 255, .16);
}
.wbl-set--big .wbl-set-h { margin: 0 0 14px; gap: 9px; }
.wbl-set--big .wbl-set-h i { width: 7px; height: 7px; background: var(--lpa-dot, #A5F3FC); }
.wbl-set--big .wbl-set-h { font-size: 12px; letter-spacing: .2em; color: var(--lpa-dot, #A5F3FC); }
.wbl-set--big .wbl-set-h b {
  margin-left: 4px; font-size: 17px; letter-spacing: -.02em; color: #fff;
}
.wbl-set--big .wbl-set-list { gap: 9px; }
.wbl-set--big .wbl-set-list li {
  flex: 1 1 0; min-width: 0; justify-content: center;
  font-size: 15px; color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px; padding: 13px 10px;
}
.wbl-set--big .wbl-set-list li svg { width: 17px; height: 17px; color: var(--lpa-chip, #C4B5FD); }
.wbl-set--big .wbl-set-plus { font-size: 15px; color: rgba(255, 255, 255, .55); }

/* ── ★★한 번에 드리는 셋 — ONE SOLUTION 그림 ★밑 (2026-10-25 회장님 지시) ──────
     > "★내신대비 one soulution 그림 밑에 ★해당 이미지에
     >  ★지문분석지. 변형문제. 13STEP 워크북 문구를 ★효과와 함께 넣자."
   ★«효과»를 ★움직임으로 풀지 않는다 — ★10-25 아침 «촌스러워»가 ★그 기준이다.
     ①★제품 색(상단 메뉴·환영 박스와 ★같은 축) ②★글자 그라데이션(머리 글자와 같은 수법)
     ③★칩 뒤에 ★그 색 빛 한 겹 — ★위 그림에서 ★이어지는 느낌
   ★크다 — ★이 셋이 ★이 구역의 ★결론이다(clamp 20~30px). */
.wbl-trio {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1100px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px;
}
.wbl-trio-i {
  position: relative;
  font-size: clamp(20px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.03em;
  background: linear-gradient(96deg, var(--t1), var(--t2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--t2);   /* ★못 그리는 브라우저용 */
}
/*   ★글자 뒤의 빛 — ★글자를 가리지 않게 ★아래 겹에 둔다(머리 글자와 ★같은 방식) */
.wbl-trio-i::before {
  content: ""; position: absolute; z-index: -1;
  left: -12%; top: -34%; width: 124%; height: 168%;
  background: radial-gradient(closest-side, var(--t3), transparent 72%);
  pointer-events: none;
}
.wbl-trio--analysis { --t1: #2E9B91; --t2: #0F766E; --t3: rgba(15, 118, 110, .16); }
.wbl-trio--quiz     { --t1: #4A6A95; --t2: #1E3A5F; --t3: rgba(30, 58, 95, .16); }
.wbl-trio--workbook { --t1: #8B5CF6; --t2: #6D28D9; --t3: rgba(109, 40, 217, .16); }
/*   ★점은 ★마크업에 둔다 — ★폰에서 줄이 꺾여도 ★앞머리에 안 남는다(옛 알약에서 당했다) */
.wbl-trio-dot { font-size: clamp(18px, 2.2vw, 26px); font-weight: 900; color: #C7CFDA; }

/* ── ★샘플 보기로 가는 ★한 장 (예시 그림 넷을 대신한다) ── */
.wbl-sec--see { padding-top: 10px; }
.wbl-see {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  text-decoration: none; color: #fff;
  border-radius: 20px; padding: 26px 30px;
  background:
    radial-gradient(620px 240px at 88% -30%, rgba(56, 189, 248, .38), transparent 62%),
    linear-gradient(104deg, #16213C 0%, var(--lpa-see-mid, #3B1E6E) 54%, #1E3A5F 100%);
  box-shadow: 0 18px 44px rgba(23, 23, 61, .26);
  transition: transform .14s ease, box-shadow .14s ease;
}
.wbl-see:hover { transform: translateY(-2px); box-shadow: 0 24px 56px rgba(23, 23, 61, .34); }
.wbl-see-k {
  font-size: 11.5px; font-weight: 900; letter-spacing: .18em;
  color: #BFE6FD; border: 1px solid rgba(191, 230, 253, .42);
  border-radius: 999px; padding: 7px 13px; white-space: nowrap;
}
.wbl-see-t { font-size: clamp(17px, 2.3vw, 25px); font-weight: 800; line-height: 1.34; }
.wbl-see-t b { color: #7DD3FC; font-weight: 900; }
.wbl-see-go {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 15.5px; font-weight: 900; color: #16213C;
  background: #fff; border-radius: 999px; padding: 14px 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.wbl-see-go svg { width: 18px; height: 18px; }
.wbl-see:hover .wbl-see-go { background: #F0F9FF; }

/* ── 비교 표 ── */
.wbl-table-wrap { overflow-x: auto; }
.wbl-cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.wbl-cmp th, .wbl-cmp td { padding: 13px 14px; border-bottom: 1px solid #EEF2F7; text-align: left; }
.wbl-cmp thead th { background: #F8FAFC; font-size: 12.5px; color: #64748B; font-weight: 700; }
.wbl-cmp tbody th { font-weight: 700; color: #0F172A; width: 34%; }
.wbl-cmp .yes { color: #047857; font-weight: 800; }
.wbl-cmp .no { color: #94A3B8; }

@media (max-width: 640px) {
  .wbl-hero { padding: 40px 0 32px; }
  .wbl-sec { padding: 38px 0; }
  .wbl-grid { grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
  /* ★폰에서는 표를 ★줄바꿈시킨다 — `min-width` 를 두면 ★오른쪽 글이 잘려 보인다
     (2026-10-24 폰 390px 화면에서 «한글(HWPX) · PDF — 한글…» 이 잘렸다) */
  .wbl-cmp { min-width: 0; font-size: 13px; }
  .wbl-cmp th, .wbl-cmp td { padding: 10px 8px; }
  .wbl-cmp tbody th { width: 40%; }
  /* ★폰에서는 그림과 글을 ★위아래로 — 옆으로 두면 둘 다 작아진다 */
  .wbl-hero-grid, .wbl-last-grid { grid-template-columns: 1fr; }
  .wbl-last-grid .wbl-dl { max-width: 220px; margin: 0 auto; }
  .wbl-pills { grid-template-columns: 1fr; }   /* ★폰에서는 ★한 줄에 하나 */
  .wbl-shots { grid-template-columns: 1fr; }
  /* ★폰에서는 ★샘플 한 장을 ★위아래로 쌓는다 — 옆으로 세 칸이면 ★다 좁아진다 */
  .wbl-see { grid-template-columns: 1fr; gap: 15px; padding: 22px 20px; text-align: center; }
  .wbl-see-k { justify-self: center; }
  .wbl-see-go { justify-self: center; }
  /* ★폰에서는 ★뒤 빛을 ★가운데로 — 글자가 좁아 ★왼쪽에만 두면 치우쳐 보인다 */
  .wbl-h1--mega::before, .wbl-sec-h--mega::before { left: 6%; width: 88%; }
  /* ★폰에서는 ★단추를 ★한 줄에 하나 — 390px 에 ★둘을 넣으면 ★글자가 잘린다(실측) */
  .wbl-cta { grid-template-columns: 1fr; max-width: none; }
  /* ★한 세트 칸 — ★셋을 ★위아래로 쌓고 ★＋ 는 ★가운데에 둔다 */
  .wbl-set { max-width: none; }
  .wbl-set-list { flex-direction: column; align-items: stretch; gap: 5px; }
  .wbl-set-list li { justify-content: flex-start; }
  .wbl-set-plus { align-self: center; }
}
@media (max-width: 900px) {
  /*   ★한 칸이 되면 ★그림이 ★글 아래로 간다 — ★가운데에 두고 ★조금 더 크게 보인다 */
  .wbl-hero-grid { grid-template-columns: 1fr; }
  .wbl-hero-img { max-width: 520px; margin: 0 auto; }
}

/* ★움직임을 싫어하는 분께는 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  .wbl-btn, .wbl-btn:hover,
  .wbl-cell, .wbl-cell:hover, .wbl-cell:focus-within,
  .wbl-pills li, .wbl-pills li:hover,
  .wbl-see, .wbl-see:hover { transform: none; transition: none; }
  /*   ★커서 효과는 ★멈추되 ★색·굵기는 ★그대로 둔다 — ★어디에 커서가 있는지는 ★보여야 한다 */
  /*   ★숨 쉬는 빛도 ★멈춘다 — ★켜진 채 ★가만히 있게 둔다(없애면 ★머리가 허전하다) */
  .wbl-h1--mega::before, .wbl-sec-h--mega::before { animation: none; opacity: .72; }
}