/* 지문분석지 ★홍보 쪽 — ★13 STEP 워크북 쪽과 ★같은 틀 (2026-10-30 회장님 지시)
     > "지문분석지 생성 페이지도 13워크북 소개페이지처럼 만들어줘."

   ★이 파일은 ★작다 — ★틀(조판·크기·효과·폰 대응)은 ★`workbook_lp.css` 하나에 있다.
     ★428줄을 베끼면 ★두 선이 되고 ★한쪽만 고쳐져 ★언제 어긋났는지 모른다(§0-9 ⑥).
     ⇒ ★여기는 ①★제품 색(청록) ②★이 쪽에만 있는 것(세로 포스터) ★둘만 둔다.

   ★색을 ★왜 청록으로 — ★회원이 ★이미 그 색으로 분석지를 안다:
     상단 메뉴·환영 박스·«내신대비 ONE SOLUTION» 의 `.wbl-trio--analysis`(#0F766E)와 ★같은 축.
     ★워크북=보라 · ★변형문제=네이비 · ★지문분석지=청록 — ★세 제품이 ★각자 색을 지킨다.
   ★`#0F766E`·`#115E59` 는 ★지어낸 값이 아니다 — ★`workbook_lp.css` 의
     `.wbl-trio--analysis { --t1: #2E9B91; --t2: #0F766E; }` 에서 ★가져왔다. */

.lp-analysis {
  --lpa:      #0F766E;   /* 진한 제품색 — 글자·단추·띠 */
  --lpa-2:    #115E59;   /* 패널 그라데이션 가운데 */
  --lpa-3:    #134E4A;   /* 패널 그라데이션 끝 */
  --lpa-pale: #E6F4F1;   /* 칸 바탕 */
  --lpa-tint: #E9F6F4;   /* 눈썹 바탕 */
  --lpa-line: #C7E6E1;   /* 눈썹·칸 테두리 */
  --lpa-line2: #AEDCD5;  /* 커서 올렸을 때 알약 테두리 */
  --lpa-edge: #CCE8E3;   /* 한 세트 칸 테두리 */
  --lpa-ink:  #124F49;   /* 한 세트 칸 글자 */
  --lpa-soft: #5EAFA5;   /* ＋ 기호 */
  --lpa-rgb:  15, 118, 110;
  --lpa-deep-rgb: 19, 78, 74;
  --lpa-chip: #99F6E4;   /* 진한 패널 안 아이콘 */
  --lpa-dot:  #A5F3FC;   /* 진한 패널 눈썹 점·글자 — 워크북과 같다(스카이) */
  --lpa-see-mid: #115E59;   /* 샘플 보기 한 장의 가운데 색 */
  /*   ★큰 글자 그라데이션의 ★끝 색 — ★워크북은 ★하늘색(#38BDF8)이다.
       🔴 ★브라우저로 보고 고쳤다 — ★청록 가운데에서 ★하늘색으로 가면 ★마지막 글자가
         ★흰 바탕에 ★묻혀 ★안 읽힌다(«수업준비» · «한 장» · «ONE SOLUTION» 끝). */
  --lpa-grad-end: #0891B2;
}

/*   ★연한 한 세트 칸의 바탕만 ★여기서 바꾼다 — 워크북은 ★연보라 바탕이다.
     🔴 ★2026-10-30 — ★여기서 ★한 번 틀렸다. ★`.lp-analysis .wbl-set` 은 ★클래스가 둘이라
       ★`.wbl-set--big`(하나)보다 ★세다 ⇒ ★진한 패널의 ★청록 바탕을 ★이 연한 바탕이 ★덮었다.
       ★화면에서 ★ONE SHEET 칸이 ★하얀 유령처럼 떴다(★브라우저로 보고 찾았다 · §0-5).
     ⇒ ★`:not(.wbl-set--big)` 으로 ★연한 칸에만 건다. ★시험이 ★이 자리를 지킨다. */
.lp-analysis .wbl-set:not(.wbl-set--big) {
  background: linear-gradient(176deg, #F7FDFC 0%, #EEF8F6 100%);
}

/* ── ★첫 문구와 ★그 아래 간격 (2026-10-31 회장님 지시) ───────────────────────
     > "«로그인하고 만들기/무료회원가입» 버튼 ★아래에 있는 박스가 ★너무 붙어있어서
     >  조금 띄어놔야돼. 그리고 첫 문구를 … ★내신대비와 ★수업준비 등을 ★강조하는 효과"

   ★왜 붙어 있었나 — ★`workbook_lp.css` 의 `.wbl-set--big` 이 ★`margin: 0` 이다.
     ★워크북 쪽은 ★단추와 패널 사이에 ★설명 한 줄(`.wbl-lead`)이 있어 ★안 붙었는데,
     ★분석지 쪽은 ★단추 바로 다음이라 ★그대로 맞붙었다(§0-9 ⑧ — 같은 규칙, 다른 자리).
   ⇒ ★워크북 쪽은 ★건드리지 않는다. ★이 쪽에만 ★위 여백을 준다. */
.lp-analysis .wbl-cta + .wbl-set--big { margin-top: 24px; }

/*   ★첫 문구가 ★길어졌다(두 줄 · «1등급 내신대비 · 수업준비 완료») ⇒ ★조금 줄여
       ★세 줄로 꺾이지 않게 한다. ★워크북 쪽 mega 는 clamp(30px, 5.6vw, 60px) 이다. */
.lp-analysis .anl-h1 { font-size: clamp(27px, 4.9vw, 52px); }

/*   ★강조 — ★형광 밑줄. ★글자 색을 ★안 바꾼다(그라데이션 `b` 와 ★다투지 않게) ·
       ★칠은 ★글자 아래 42% 에만 올려 ★사람이 ★형광펜으로 그은 것처럼 보이게 한다.
     ★색은 ★지어내지 않는다 — ★`--lpa-chip`(#99F6E4)은 ★이 쪽이 ★이미 쓰는 민트다. */
.lp-analysis .anl-mark {
  font-style: normal; font-weight: 900; color: var(--lpa-3, #134E4A);
  background: linear-gradient(transparent 58%, var(--lpa-chip, #99F6E4) 58%);
  padding: 0 .08em; border-radius: 2px;
  /*   ★줄바꿈이 ★낱말 가운데에서 일어나면 ★형광이 ★두 토막으로 끊긴다 */
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ── ★이 쪽에만 있는 것 — ★세로 포스터 ──────────────────────────────────────
     ★워크북 쪽 머리 그림은 ★가로로 길다(974×233) ⇒ ★오른쪽 칸에 ★눕는다.
     ★분석지 포스터는 ★세로다(1122×1402 · 회장님이 2026-10-11 에 주신 그림) ⇒
       ★같은 자리에 두면 ★오른쪽 칸만 ★1.3배 길어져 ★왼쪽이 ★텅 빈다(실측).
     ⇒ ★2열을 ★뒤집는다 — ★왼쪽에 ★ONE SHEET 칸과 단추 · ★오른쪽에 ★포스터.
       ★폭 상한 360px — ★원본의 32%. ★더 크면 ★첫 화면에서 ★단추가 밀려 내려간다. */
/*   ★2026-10-31 — `center` → `start`. ★왼쪽 칸(단추+패널 204px)이 ★포스터(450px)보다
       ★짧아서 ★가운데 정렬이 ★위아래로 123px 씩 벌렸다 ⇒ ★제목과 단추 사이가 ★141px 떠서
       ★첫 화면이 ★휑했다(브라우저로 재서 찾았다).
     ★위 주석의 «더 크면 ★첫 화면에서 단추가 밀려 내려간다»와 ★같은 뜻이다 —
       ★단추는 ★위에 있어야 한다. ★`start` + ★숨 쉴 여백 28px. */
.lp-analysis .wbl-hero-grid { grid-template-columns: 1.05fr .95fr; align-items: start; }
.lp-analysis .wbl-hero-txt { padding-top: 28px; }
.lp-analysis .anl-poster {
  display: block; width: 100%; max-width: 360px; height: auto;
  margin: 0 0 0 auto; border-radius: 16px;
  box-shadow: 0 16px 40px rgba(var(--lpa-deep-rgb, 19, 78, 74), .18);
}

/*   ★칸이 ★14개다(워크북은 13) — ★이름이 ★조금 더 길어 ★최소 폭을 ★조금 넓힌다 */
.lp-analysis .wbl-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
/*   ★번호가 ★색을 가진 ★하나뿐이라 ★칸 이름이 ★주인공이다 — ★이름을 ★조금 크게 */
.lp-analysis .wbl-cell-t { font-size: 15.5px; }

@media (max-width: 900px) {
  /*   ★한 칸이 되면 ★포스터를 ★가운데로 (워크북 쪽과 ★같은 처리) */
  .lp-analysis .wbl-hero-grid { grid-template-columns: 1fr; }
  .lp-analysis .anl-poster { margin: 0 auto; max-width: 320px; }
}
@media (max-width: 640px) {
  .lp-analysis .wbl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}