/* 무료자료 — 머리 단추 + 무료자료 쪽 (2026-10-20 사장님 지시)
   > "시작하기버튼을 화려하고 세련되고 미래지향적인 디자인 이미지와 효과의 무료자료 버튼으로"

   ★왜 따로 둔 파일인가 — landing.css 는 다른 작업이 자주 만진다(§2-6-2 · 겹치면 충돌).
     머리(`_lp_header.html`)가 이 파일을 ★직접 부른다 ⇒ 머리가 나오는 모든 쪽에 단추 모양이 따라간다.

   ★단추 — 참고한 방식(구조만): «회전하는 원뿔 그라데이션 테두리 + 짙은 속 + 부드러운 빛»
     (Framer «Comet Glow Button» · learnwithjason «Animated CSS gradient borders» 의 @property 기법).
     ★08-20 «너무 유치해» 지적을 기억한다 — ★두께·튀는 그림자·맥박은 ★쓰지 않는다.
       움직이는 것은 ★1px 테두리 빛 하나뿐 · 속은 ★우리 네이비 · 글자는 ★흰색 한 가지.
     ★움직임을 싫어하는 분께는 ★멈춘다(prefers-reduced-motion).
     ★@property 를 모르는 브라우저는 ★멈춘 그라데이션 테두리로 보인다(깨지지 않는다). */

@property --fr-ang { syntax:"<angle>"; initial-value:0deg; inherits:false; }

/* ══ 머리 단추 ══════════════════════════════════════════════════════ */
/* ★★2026-10-20 2차 사장님 지시 — «무료자료버튼을 ★더 잘보이는 디자인과 이미지와 색깔로»
     ★1차(짙은 네이비 + 1px 빛 테두리)는 ★우리 네이비 글자·로고와 ★같은 색이라 머리에 ★묻혔다.
     ⇒ ★밝은 «오로라» 채움(시안 → 파랑 → 보라 · 우리 네이비→스카이 축을 ★밝게 민 것)
       + 단추 ★뒤로 번지는 빛(회전 · 흐림) + 선물 그림에 ★반짝이 별 + 흰 «FREE» 표.
     (참고한 방식 — Linear·Vercel·Raycast 의 «aurora glow» 단추: 채움 그라데이션이 천천히 흐르고
      ★뒤 번짐이 ★단추 밖으로 은은히 샌다. 구조만 · 자산은 안 가져왔다 §0-7)
     ★움직이는 것은 셋 — 채움 흐름(8초) · 뒤 번짐 회전(6초) · 별 반짝임 — ★전부 느리다(맥박 없음).
     ★움직임을 싫어하는 분께는 ★멈춘다(prefers-reduced-motion). */
/* ★★2026-10-20 5차 사장님 «족보닷컴과 이그잼포유 느낌이 났으면 좋겠어» — ★지금 모양
     ★두 사이트를 ★직접 열어 봤다(10-20): 족보닷컴 «이용권 구매» = ★납작한 파란 사각 단추
       (모서리 살짝 · 빛·그림자·움직임 ★없음) · 이그잼포유는 ★단추 없이 글자뿐.
     ⇒ ★빛 번짐·스치는 빛·반짝임을 ★전부 뺐다. ★네이비 한 색 납작 단추 + 흰 «FREE» 표.
       (3차의 «네이비→스카이» 그라데이션·옅은 빛은 ★4차 «더 이상해» 뒤 ★두 사이트에 맞춰 걷었다) */
.lp-free{
  position:relative;
  display:inline-flex; align-items:center; gap:7px;
  height:40px; padding:0 16px 0 13px; border-radius:8px;
  color:#fff !important; font-size:14.5px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap;
  border:0; background:var(--brand, #1E3A5F);
  transition:background-color .15s ease;
}
.lp-free:hover{ background:var(--brand-d, #16294A); }
.lp-free:focus-visible{ outline:2px solid var(--brand-l, #38BDF8); outline-offset:3px; }
.lp-free-ico{ width:18px; height:18px; flex:none; }
.lp-free-ico path, .lp-free-ico rect{ stroke:#fff; }
.lp-free-ico .lp-free-spark{ display:none; }
.lp-free-chip{
  font-size:10px; font-weight:800; letter-spacing:.06em; line-height:1;
  padding:3px 6px; border-radius:4px; color:var(--brand, #1E3A5F); background:#fff;
}

/* ══ 구매 묶음 — «모의고사 구매» · «이용권 구매» ══════════════════════ */
/* ★★2026-10-20 사장님 지시 — «모의고사구매와 이용권구매는 ★묶어서 다르게 효과를 줘서 구분하자»
   ★★3차 «좀더 세련되고 멋있고 자연스럽게» — 2차 회색 캡슐은 ★입력 칸처럼 딱딱했다
     ⇒ 흰 바탕 + ★네이비→스카이 머리카락 테두리(무료자료 단추·NEW 뱃지와 ★같은 축)
       · 칸마다 작은 스카이 그림(시험지 · 이용권) · 마우스 올림은 ★옅은 하늘빛이 차오른다.
   ★★4차(메뉴 전체를 연한 트랙에 담고 흰 알약)는 사장님 «더 이상해» 로 ★걷어 냈다(10-20) —
     ★다른 메뉴는 ★원래 밑줄 효과 그대로 둔다. 다시 하자고 하시기 전엔 ★트랙을 넣지 않는다. */
/* ★★5차 «족보닷컴과 이그잼포유 느낌» — ★두 사이트를 직접 열어 봤다(10-20):
     · 메뉴는 ★상자 없이 굵은 글자뿐(두 곳 다) — 캡슐·테두리를 ★뺐다.
     · 족보닷컴은 특별한 칸을 ★오른쪽에 모으고 ★작은 그림(«문제은행» 옆 아이콘)으로 가른다
       ⇒ 구매 둘 앞에 ★가는 세로 칸막이 + 칸마다 작은 그림(시험지·이용권) · 글자는 ★네이비.
     · 마우스 효과는 ★다른 메뉴와 같은 밑줄(landing.css) — 하나로 맞춘다. */
.lp-gnb-shop{ display:inline-flex; align-items:center; gap:inherit; flex:none; }
.lp-gnb-shop::before{ content:""; width:1px; height:16px; flex:none; background:#D5DEE9; }
.lp-gnb-shop-sep{ display:none; }
.lp-gnb-shop-ico{ width:16px; height:16px; flex:none; margin-right:4px; vertical-align:-2px;
  fill:none; stroke:var(--brand-l, #38BDF8); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lp-gnb .lp-gnb-shop a{ display:inline-flex; align-items:center; font-weight:700; color:var(--brand, #1E3A5F); }

/* ★족보닷컴 꼬리표 — «NEW»·«준비중» 을 글자 ★옆이 아니라 ★위에 띄운다(가로 자리도 아낀다)
     메뉴 줄은 넓은 화면에서 ★옆 넘김(overflow) 이라 위로 뜬 꼬리표가 잘린다 ⇒ 줄 위아래에 ★자리를 준다 */
.lp-hdr .lp-gnb{ padding:12px 0 6px; }
.lp-hdr .lp-gnb a{ position:relative; }
.lp-hdr .lp-gnb .lp-gnb-new, .lp-hdr .lp-gnb .lp-gnb-soon{
  position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  margin:0; white-space:nowrap; pointer-events:none;
  font-size:10px; line-height:1.25; padding:1px 6px; vertical-align:baseline;
}
/* 노트북 폭 이하 — 그림을 접어 자리를 아낀다(칸막이는 그대로) */
@media (max-width:1439px){
  .lp-gnb-shop-ico{ display:none; }
}
/* ★★넓은 화면(≥1440) — 단추가 «이용권 구매» 를 ★덮었다 (2026-10-20 실측으로 잡았다)
     ★왜: 이 폭의 머리는 «로고 | 메뉴(제 폭 1,014px) | 단추» 격자다. 메뉴는 ★줄지 않는다.
       옛 «시작하기»(96px) 때도 이미 상자를 ★넘쳤지만 화면 안이었고, 단추가 ★155px 로
       넓어지자 ★마지막 메뉴 위에 올라앉았다(실측 1440: 메뉴 끝 1301 · 단추 시작 1210).
     ★고침(이 파일 안에서만 — landing.css 는 안 건드린다):
       ① 머리 상자를 1,340 → ★1,420 (★1,600 까지 넓혔더니 «로그인 상자가 머리 오른쪽 끝과
          같은 세로선» 규칙(허용 48px)이 ★100px 어긋났다 — `test_landing_login_position` 이 잡았다)
       ② 세 칸 사이 24 → ★16 · 메뉴 사이 28 → ★20px
       ③ 가운데 칸을 ★minmax(0,1fr) — 그래도 모자라면 ★겹치지 않고 스스로 민다(641~1439 와 같은 규칙) */
@media (min-width:1440px){
  .lp-hdr .in{ max-width:1420px; gap:16px; grid-template-columns:auto minmax(0,1fr) auto; }
  /* ★safe center — 넘칠 때 ★왼쪽이 잘리지 않게(그냥 center 는 넘치면 앞머리가 칸 밖으로 나간다) */
  /* ★사이 22 — 5차: 꼬리표가 ★위로 올라가 가로 자리가 났다 ⇒ 이그잼포유처럼 ★넓게(재고 넣은 값) */
  .lp-gnb{ gap:22px; justify-content:safe center; min-width:0;
           overflow-x:auto; scrollbar-width:none; }
  .lp-gnb::-webkit-scrollbar{ display:none; }
  /* ★로그인 뒤 — 오른쪽에 ★크레딧 칩(209px)까지 있어 메뉴가 모자랐다(실측 오른쪽 칸 322px).
       ★«FREE» 표·단추 그림을 접고 ★메뉴 글자 16→15 · 사이 6 · 구매 묶음 그림 접음(★재고 넣은 값 §0-9 ⑯) */
  /*   ★이 값은 ★아래 `@media (min-width:1440px)` 블록(파일 끝 쪽)이 ★덮어쓴다 — 6px.
       ★거기에 ★실측과 함께 적어 두었다. ★여기를 고쳐도 ★아무 일도 안 일어난다. */
  .lp-hdr .in:has(.lp-hdr-right) .lp-gnb{ gap:12px; }
  .lp-hdr .in:has(.lp-hdr-right) .lp-gnb a{ font-size:15px; }
  .lp-hdr .in:has(.lp-hdr-right) .lp-gnb-shop-ico{ display:none; }
  .lp-hdr-right .lp-free-chip, .lp-hdr-right .lp-free-ico{ display:none; }
  .lp-hdr-right .lp-free{ padding:0 12px; }
}
/* 노트북 폭 — 메뉴 자리가 빠듯하다 ⇒ 작은 «FREE» 표만 접는다(단추 글자는 그대로) */
@media (max-width:1439px){
  .lp-free-chip{ display:none; }
  .lp-free{ padding:0 16px 0 13px; }
}
/* ★로그인한 회원의 폰(≤480) — 로고·크레딧·충전·무료자료가 한 줄에 안 들어가 ★문서가 460px 로
     넘쳤다(390px 실측). 옛 «문제 생성» 단추도 ★같은 까닭으로 폰에서 접었다(landing.css).
     ⇒ 단추는 접고 ★바로 위 작은 줄(lp-util)의 «무료자료» 로 간다(길은 남긴다). */
@media (max-width:480px){
  .lp-hdr-right .lp-free{ display:none; }
}
.lp-util-free{ font-weight:700; color:var(--brand, #1E3A5F) !important; }
/* 폰 — 머리 2줄 배치에서 ★오른쪽 칸에 온다(옛 «시작하기» 자리와 같은 칸 이름) */
@media (max-width:640px){
  .lp-hdr .in > .lp-free{ grid-area:right; justify-self:end; }
  .lp-free{ height:38px; padding:0 14px 0 12px; font-size:14px; }
  .lp-free-chip{ display:none; }
}

/* ══ 무료자료 쪽 ════════════════════════════════════════════════════ */
/* ★★2026-10-20 2차 사장님 지시 — «이 무료 자료 페이지를 ★더 화려하게 만들고»
     ★«화려하게» 를 ★어떻게 냈나 (고른 이유를 남긴다)
       · ★머리를 ★네이비 띠로 — ★모의고사 구매 쪽(`.rd-hero`)과 ★같은 집안이다(금색 포인트까지).
         흰 바탕에 옅은 하늘색이던 전 모양은 ★«무료 나눔» 치고 ★조용했다.
       · ★금색(--gold-l #F0C94B)은 ★이미 있는 토큰이다 — ★새 색을 만들지 않았다(§2-5 브랜드 고정).
       · ★오로라·메뉴 트랙·빛 번짐은 ★안 쓴다 — ★사장님이 10-20 에 ★싫다고 하셨다(핸드오프 0-113).
         ⇒ 화려함은 ★큰 글자 · ★금색 한 점 · ★도장 · ★카드 들림으로 낸다(★빛으로 내지 않는다).
       · 움직임은 ★누를 때만(카드 들림·단추) · ★`prefers-reduced-motion` 에서 멈춘다. */
.frp{ --fr-navy:#0F1E38; --fr-sky:#38BDF8; --fr-gold:#F0C94B; background:#fff; }
.frp-hero{
  position:relative; overflow:hidden; padding:72px 0 60px; text-align:center; color:#fff;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(201,162,39,.18), transparent 60%),
    linear-gradient(160deg, #0A1527 0%, #14294A 62%, #0F1E38 100%);
}
/* 옅은 점 격자 — «기술 회사» 느낌을 ★색 없이 낸다 */
.frp-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 20%, #000 15%, transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 20%, #000 15%, transparent 72%);
}
/* 아래쪽 가는 금색 선 — 띠를 끊어 준다(구매 쪽과 같은 마감) */
.frp-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--fr-gold), transparent);
}
.frp-hero .in{ position:relative; z-index:1; }
.frp-eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 16px;
  padding:6px 14px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(240,201,75,.45);
  font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--fr-gold);
}
.frp-dot{ width:7px; height:7px; border-radius:50%; background:var(--fr-gold); }
.frp-h1{ margin:0; font-size:clamp(32px, 5vw, 52px); font-weight:900; letter-spacing:-.035em;
  line-height:1.15; color:#fff; }
.frp-h1 em{ font-style:normal; color:var(--fr-gold); }
.frp-sub{ margin:16px auto 0; max-width:620px; color:#CBD8EC; font-size:16.5px; line-height:1.7; }
.frp-sub b{ color:#fff; font-weight:700; border-bottom:2px solid rgba(240,201,75,.55); }
.frp-facts{ list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:10px;
  margin:28px 0 0; padding:0; }
.frp-facts li{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:142px;
  padding:14px 20px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); }
.frp-facts b{ font-size:24px; font-weight:900; color:#fff; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.frp-facts li:nth-child(2) b{ color:var(--fr-gold); }
.frp-facts span{ font-size:12.5px; color:#A9BBD6; }

.frp-body{ padding:32px 0 80px; }
/* ★잠금 띠 — ★«0원 / 인데, 안 써볼 이유가 있나요?»(사장님 지시 · 공용 조각과 같은 말) */
.frp-gate{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin:0 0 24px; padding:18px 22px; border-radius:18px;
  background:linear-gradient(135deg, #FFFDF4, #FFF8E3);
  border:1px solid #F0DFA6; box-shadow:0 10px 26px -18px rgba(15,30,56,.35);
}
.frp-gate-txt{ margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.frp-gate-z{
  font-size:clamp(34px, 5vw, 46px); font-weight:900; line-height:1; letter-spacing:-.04em;
  background:linear-gradient(120deg, #1E3A5F 0%, #2C6397 45%, #38BDF8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.frp-gate-h{ font-size:clamp(17px, 2.2vw, 22px); font-weight:800; letter-spacing:-.02em; color:#13243D; }
.frp-gate-act{ display:flex; gap:8px; flex-wrap:wrap; }
.frp-gbtn{ display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 22px; border-radius:999px;
  background:var(--fr-navy); color:#fff; font-weight:800; text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease, background-color .15s ease; }
.frp-gbtn:hover{ background:#1E3A5F; transform:translateY(-2px);
  box-shadow:0 14px 28px -14px rgba(15,30,56,.55); }
.frp-gbtn:focus-visible{ outline:3px solid var(--fr-sky); outline-offset:3px; }
.frp-garrow{ width:18px; height:18px; flex:none; transition:transform .15s ease; }
.frp-gbtn:hover .frp-garrow{ transform:translateX(3px); }
.frp-gbtn--ghost{ background:#fff; color:#0F1E38; border:1px solid #D9C27C; }
.frp-gbtn--ghost:hover{ background:#FFF8E3; }

.frp-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; }
.frp-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.frp-chip{ display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:999px;
  border:1px solid #E1E7EF; color:#334155; font-weight:600; text-decoration:none; background:#fff; }
.frp-chip:hover{ border-color:#94A3B8; }
.frp-chip.is-on{ background:#0F1E38; border-color:#0F1E38; color:#fff; }
.frp-count{ margin:0; color:var(--ink-2, #6B7280); font-size:14px; white-space:nowrap; }

.frp-grid{ list-style:none; margin:0; padding:0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.frp-card{
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid #E5EBF3; box-shadow:0 1px 2px rgba(15,30,56,.04);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.frp-card:hover{ transform:translateY(-3px); border-color:#C9D7EA;
  box-shadow:0 14px 32px -16px rgba(15,30,56,.28); }
/*   ★카드 위 그림 영역(PDF 상자)은 ★뺐다 (2026-10-21 · 1차 버건디 «올드» → 2차 코랄 «촌스럽다»
       → 3차 종이 미리보기 «이상해» → ★«PDF와 이모지 있는 파트는 없애고») — 꼬리표가 카드의 얼굴이다 */
.frp-cbody{ display:flex; flex-direction:column; gap:8px; padding:16px 16px 16px; flex:1; }
.frp-tags{ display:flex; gap:6px; flex-wrap:wrap; }
/*   ★꼬리표 — 해외 대기업 사이트(Linear·Vercel·Stripe)풍 «얇은 알약» (2026-10-21 사장님 3차 · TT-20261021-9)
       ★공통: 24px 알약 · 1px 테두리 · ★안쪽 위 빛 한 줄(inset) · 글자는 살짝 좁게 — ★사이트 네이비·금·하늘에 맞춤 */
.frp-tag{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:-.005em; line-height:1; white-space:nowrap;
  border:1px solid #DCE4EF; background:linear-gradient(180deg, #FFFFFF, #F4F7FB); color:#1E3A5F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15,30,56,.06); }
/* 학년 — 네이비 알약 + 하늘색 점 */
.frp-tag--grade{ color:#fff; border-color:#0F1E38;
  background:linear-gradient(180deg, #24466F 0%, #0F1E38 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(15,30,56,.25); }
.frp-tag--grade::before{ content:""; width:6px; height:6px; border-radius:50%; background:#38BDF8;
  box-shadow:0 0 0 2px rgba(56,189,248,.25); }
/* 추천 — 연한 금 바탕 · 금 테두리 · 작은 별 */
.frp-tag--pick{ color:#7A5300; border-color:#EED48A;
  background:linear-gradient(180deg, #FFFBEB 0%, #FDEFC3 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(201,162,39,.18); }
.frp-tag--pick svg{ width:11px; height:11px; color:#D4A017; }
/* NEW — ★그라데이션 테두리(하늘 → 남보라) · 글자도 같은 결 · 앞 점이 ★은은하게 숨 쉰다 */
.frp-tag--new{ border:1px solid transparent; color:#4F46E5;
  background:linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #38BDF8, #6366F1) border-box;
  box-shadow:0 1px 6px -1px rgba(99,102,241,.25); }
.frp-tag--new i{ width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg, #38BDF8, #6366F1);
  animation:frp-breathe 2.4s ease-in-out infinite; }
@keyframes frp-breathe{ 0%,100%{ box-shadow:0 0 0 0 rgba(99,102,241,.45); } 50%{ box-shadow:0 0 0 4px rgba(99,102,241,0); } }
.frp-title{ margin:2px 0 0; font-size:18px; line-height:1.4; font-weight:800; letter-spacing:-.02em;
  color:#0F1E38; word-break:keep-all; overflow-wrap:anywhere; }
.frp-desc{ margin:0; color:#5B6575; font-size:14px; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.frp-meta{ margin:auto 0 0; padding-top:6px; display:flex; flex-wrap:wrap; gap:4px 10px;
  font-size:12.5px; color:#8A94A6; }
.frp-meta span + span::before{ content:"·"; margin-right:10px; color:#C4CBD6; }
.frp-dl{
  display:flex; align-items:center; justify-content:center; gap:8px; height:44px; margin-top:6px;
  border-radius:12px; background:#0F1E38; color:#fff; font-weight:700; text-decoration:none;
  transition:background-color .15s ease;
}
.frp-dl svg{ width:18px; height:18px; }
.frp-dl:hover{ background:#1E3A5F; }
.frp-dl:focus-visible{ outline:2px solid #38BDF8; outline-offset:2px; }
/* ★비로그인 — 보이되 ★못 누른다(사장님 지시) */
.frp-dl.is-locked{ background:#F1F4F8; color:#8A94A6; cursor:not-allowed; user-select:none; }
.frp-card.is-locked:hover{ transform:none; }
/* ★이미 받으신 자료 — 회원 한 분당 ★한 번 (2026-10-28 회장님 지시)
   ★잠근 것(is-locked)과 ★다른 색으로 둔다 — 저쪽은 «로그인하세요»고
   ★이쪽은 «다 받으셨습니다»라 ★뜻이 다르다(회색 하나로 쓰면 회원이 로그인 문제로 읽는다) */
.frp-dl.is-got{ background:#E9F7EF; color:#1B7F4C; border:1px solid #BFE6CF;
                cursor:default; user-select:none; }
.frp-mini-dl.is-got{ background:#E9F7EF; color:#1B7F4C; cursor:default; }
.frp-empty{ padding:56px 16px; text-align:center; border:1px dashed #D5DEEA; border-radius:16px; color:#5B6575; }

/* ★추천 자료 — ★금색 띠 한 줄로만 돋운다(카드를 ★다 바꾸면 격자가 어수선해진다) */
.frp-card.is-pick{ border-color:#E8D49A; position:relative; }
/*   ★그림 영역을 뺐으므로(10-21 3차) 금색 띠는 ★카드 맨 위에 */
.frp-card.is-pick::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  background:linear-gradient(90deg, #C9A227, var(--fr-gold), #C9A227);
}

@media (max-width:640px){
  .frp-hero{ padding:44px 0 38px; }
  .frp-br{ display:none; }
  .frp-facts li{ min-width:0; flex:1 1 30%; padding:11px 8px; }
  .frp-facts b{ font-size:17px; }
  .frp-gate{ padding:16px 16px; }
  .frp-gate-txt{ gap:8px; }
  .frp-gate-act{ width:100%; }
  .frp-gate-act .frp-gbtn{ flex:1; justify-content:center; padding:0 14px; }
  .frp-grid{ grid-template-columns:1fr; }
}

/* ══ 그림 단추 — «무료자료» · «크레딧 충전» (2026-10-21 사장님이 주신 그림) ══
   ★그림에 글자·테두리·빛이 다 들어 있다 ⇒ ★단추 겉모양(바탕·여백·모서리)을 ★걷어 낸다.
   ★높이는 머리 단추 규격(40px)에 맞추고 폭은 그림 비율(148:50)을 따른다. */
.lp-free.lp-free--img,
.lp-hdr-right .credit-chip-top.credit-chip-top--img{
  height:auto; padding:0 !important; border:0; border-radius:14px;
  background:none !important; box-shadow:none;
  transition:filter .15s ease, transform .15s ease;
}
.lp-free.lp-free--img:hover,
.lp-hdr-right .credit-chip-top.credit-chip-top--img:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.lp-free.lp-free--img:focus-visible,
.lp-hdr-right .credit-chip-top.credit-chip-top--img:focus-visible{ outline:2px solid var(--brand-l, #38BDF8); outline-offset:3px; }
.lp-btn-img{ display:block; height:42px; width:auto; }
/* ★로그인 뒤(≥1440) — 오른쪽에 그림 단추가 ★둘이라 메뉴를 ★52px 가렸다(`test_free_button_header_261020` 실측)
     ⇒ 그림 36px + 메뉴 사이 ★8px (재고 넣은 값)
   ★9 → 8 (2026-10-23) — 9 로는 ★4px 이 여전히 잘렸다(«이용권 구매» 끝). 실측:
     메뉴 속 762 / 보이는 칸 758 · 링크 8개(합 678) · 사이 ★7군데
     ⇒ 1px 줄이면 ★7px 가 남는다(762−7=755 ≤ 758 · ★3px 여유).
     ★오른쪽 칸(392px)은 안 건드렸다 — 크레딧 칩·충전·무료자료 그림이 들어 있다.
   ★★8 → 6 (2026-10-25) — ★오른쪽 칸이 ★392 → 405px 로 커져 메뉴 칸이 ★그만큼 줄었다
     ⇒ 회원 ★1440·1536·1920·2560 전부 ★6px 가림(`test_free_button_header_261020`).
     ★범인은 ★크레딧 칩이다 — ★209 → ★289px(충전이 ★그림 단추로 바뀌었다 · 2026-10-21 지시).
     ★후보를 ★하나씩 재고 골랐다(§0-9 ⑯ — 짐작으로 조이지 않는다 · 1440px 실측):
         사이 7 → ★+2px 남음(모자람)   · 구매 묶음만 4 → ★+2px   · 칸막이 접기 → ★+1px
         ★사이 6 → ★0px (칸 746 = 속 746 · 칸합 693.7 + 사이 6×6)   · 글자 14px → 0px
     ⇒ ★사이 6 을 골랐다. ★왜 이것인가 — ★회장님이 정하신 것을 ★하나도 안 건드린다:
         ★충전·무료자료 ★그림 단추(10-21) · ★구매 캡슐과 칸막이(10-20) · ★메뉴 이름 7개 · ★글자 크기.
       ★글자 14px 도 들어가지만 ★메뉴가 작아져 ★읽기가 나빠진다 ⇒ 안 골랐다. */
/*   ★★2026-10-25 — ★메뉴 이름이 ★길어졌다 (회장님 지시)
       «13 STEP 워크북» → «13 STEP 워크북 ★생성» · «지문분석지 생성» 오른쪽으로.
       ★«생성» 두 글자가 붙어 ★그 칸이 ★151 → ★179px 이 됐다 ⇒ ★위 «여유 0px» 이 ★사라졌다.
       실측(1440 · 로그인): 메뉴 보이는 칸 ★737 · 속 ★765 → ★28px 모자람.
       `test_free_button_header_261020` 이 ★배포 전에 잡았다.
     ★후보를 ★하나씩 재고 골랐다 (§0-9 ⑯ — 짐작으로 조이지 않는다)
         사이 6 → 4px    : ★+12px  (6군데 × 2)  — ★모자람
         머리 칸 사이 16 → 10px : ★+12px (2군데 × 6) — ★모자람
         ★글자 15 → 14px : ★+37px — ★이것만으로 넘는다
         ★위 셋을 ★함께  : ★+61px — ★여유 33px
     ⇒ ★글자 14px 을 ★고른다. ★2026-10-23 에는 ★읽기 때문에 ★안 골랐지만,
       ★이번엔 ★다른 수단으로는 ★28px 을 못 만든다(사이·여백은 합쳐도 24px).
       ★회장님이 정하신 것은 ★하나도 안 건드린다 — 그림 단추(10-21) · 구매 캡슐(10-20) ·
       ★메뉴 이름 7개(10-25). ★14px 은 ★이 폭에서만이다(1439 이하는 그대로 15px 축).
     ★여유를 ★남겨 둔다 — 이름이 ★또 길어질 수 있다. ★사이는 ★6 그대로 둔다. */
@media (min-width:1440px){
  .lp-hdr-right .lp-btn-img{ height:36px; }
  .lp-hdr .in:has(.lp-hdr-right) .lp-gnb{ gap:6px; }
  .lp-hdr .in:has(.lp-hdr-right) .lp-gnb a{ font-size:14px; }
}
@media (max-width:1439px){
  .lp-hdr-right .lp-btn-img{ height:36px; }
}
@media (max-width:640px){
  .lp-btn-img, .lp-hdr-right .lp-btn-img{ height:32px; }
}

/* ═══ ★종류 × 학년 격자 (2026-10-24 회장님 지시 ④) ═══════════════════════
     ★경쟁사(너른터 자료실 · 실물 확인)는 ★표다 — 번호·제목·작성자·등록일·조회수.
       ★종류·학년·무료여부·파일형식이 ★전부 ★제목 글자 안에만 있어 ★읽어야 안다.
     ⇒ ★우리는 ★칸 자리로 말한다. ★가로 = 학년 · ★세로 = 종류.
     ★색은 ★이 쪽이 쓰던 네이비 하나로 간다 — ★종류마다 색을 주면 ★시끄럽다(§2-5).
     ★폰에서는 ★격자를 ★접는다 — 가로 3칸은 ★390px 에서 못 읽는다.
       ⇒ ★한 줄에 한 칸 · ★학년은 ★카드 안 꼬리표(`frp-mx-only`)로 보인다. */
.frp-matrix{ margin-top:20px; display:grid; gap:10px; }
/*   ★칸 수는 ★자료가 정한다 (`data-n`) — CSS 에 ★3 을 박았다가 ★«공통»까지 4칸이면 ★넘쳤다.
       ★학년이 ★하나만 있는 날도 있고 ★넷이 되는 날도 있다. */
.frp-mx-head, .frp-mx-row{
  display:grid; grid-template-columns:132px repeat(3, minmax(0, 1fr)); gap:10px;
  align-items:stretch;
}
.frp-matrix[data-n="1"] .frp-mx-head, .frp-matrix[data-n="1"] .frp-mx-row{
  grid-template-columns:132px minmax(0, 1fr); }
.frp-matrix[data-n="2"] .frp-mx-head, .frp-matrix[data-n="2"] .frp-mx-row{
  grid-template-columns:132px repeat(2, minmax(0, 1fr)); }
.frp-matrix[data-n="4"] .frp-mx-head, .frp-matrix[data-n="4"] .frp-mx-row{
  grid-template-columns:116px repeat(4, minmax(0, 1fr)); gap:8px; }
.frp-matrix[data-n="4"] .frp-mini{ padding:12px; }
.frp-mx-head{ align-items:end; padding-bottom:2px; }
.frp-mx-corner{ color:var(--ink-2,#6B7280); font-size:12px; font-weight:700;
  letter-spacing:.04em; align-self:end; padding-bottom:6px; }
.frp-mx-cat{ font-weight:800; color:#0F1E38; font-size:14px; padding:0 0 6px 4px;
  border-bottom:2px solid #0F1E38; }
/* ★★2026-10-31 회장님 «우리사이트는 ★너무 파란색 계통의 남색이 너무 많은데 ★ai가 만든 티가…»
     ★이 쪽을 ★화면 픽셀로 재니 ★색 있는 픽셀의 ★94.8% 가 파랑·남색이었다(기준 60%).
   ★그런데 ★이 목록에는 ★세 가지 자료가 섞여 있다 ⇒ ★종류마다 ★제품 색을 준다.
     ★색이 ★뜻을 갖는다 — 이름을 안 읽어도 ★무슨 자료인지 안다.
   ★새 색이 아니다 — 분석지 #0F766E · 워크북 #6D28D9 는 ★상단 메뉴·환영 박스가 쓰는 값이다. */
.frp-mx-kind[data-kind="지문분석지"]      { --fk:#0F766E; }
.frp-mx-kind[data-kind="13 STEP 워크북"]   { --fk:#6D28D9; }
.frp-mx-kind[data-kind="변형문제"]        { --fk:#1E3A5F; }
.frp-mx-kind{
  margin:0; display:flex; flex-direction:column; justify-content:center; gap:4px;
  font-size:15px; font-weight:800; color:var(--fk,#0F1E38); line-height:1.25;
  padding:12px 12px 12px 14px; border-radius:12px; background:#F7F9FC;
  border:1px solid #E5EBF3; border-left:4px solid var(--fk,#0F1E38);
}
.frp-mx-kind small{ font-size:11px; font-weight:700; color:var(--ink-2,#6B7280); }
.frp-mx-cell{ display:flex; }
.frp-mini{
  flex:1; display:flex; flex-direction:column; gap:7px; padding:14px;
  border-radius:12px; background:#fff; border:1px solid #E5EBF3;
  box-shadow:0 1px 2px rgba(15,30,56,.04);
  transition:transform .18s ease, border-color .2s ease;
}
.frp-mini:hover{ transform:translateY(-2px); border-color:#C9D7EA; }
.frp-mini-t{ margin:0; font-size:14px; font-weight:700; line-height:1.4; }
.frp-mini-t a{ color:#0F1E38; text-decoration:none; }
.frp-mini-t a:hover{ text-decoration:underline; }
.frp-mini-m{ margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  color:var(--ink-2,#6B7280); font-size:12px; }
.frp-mini-m span{ white-space:nowrap; }
.frp-mini-new{ font-weight:800; color:#B91C1C; }
.frp-mini-dl{
  margin-top:auto; display:inline-flex; align-items:center; justify-content:center;
  height:36px; border-radius:9px; background:#0F1E38; color:#fff;
  font-size:13px; font-weight:700; text-decoration:none;
}
.frp-mini-dl:hover{ background:#1B3159; }
.frp-mini-dl.is-locked{ background:#EEF2F7; color:#64748B; cursor:not-allowed; }
.frp-mini-more{ margin:0; font-size:11px; color:var(--ink-2,#6B7280); }
.frp-mx-soon{
  flex:1; margin:0; display:flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px dashed #D8E1EC; background:#FAFCFE;
  color:#94A3B8; font-size:13px; font-weight:600; min-height:92px;
}
/*   ★학년 꼬리표는 ★폰에서만 — 큰 화면에서는 ★머리줄이 말해 준다(두 번 적지 않는다) */
.frp-mx-only{ display:none; }
@media (max-width:820px){
  .frp-mx-head{ display:none; }
  .frp-mx-row{ grid-template-columns:1fr; gap:8px; }
  .frp-mx-kind{ padding:10px 12px; flex-direction:row; align-items:baseline; gap:8px; }
  .frp-mx-soon{ min-height:52px; }
  .frp-mx-only{
    display:inline-flex; align-self:flex-start; padding:2px 8px; border-radius:999px;
    background:#EEF2F7; color:#334155; font-size:11px; font-weight:800;
  }
  .frp-mx-soon .frp-mx-only{ margin-right:8px; }
}

/* ═══ ★대표 자료 띠 (2026-10-28 회장님 지시 «10월 모의고사 문제 최종본 … ★멋있게 올리자») ═══
     ★머리 띠(`.frp-hero`)와 ★같은 집안 — 네이비 바탕 · 금색 한 점 · 점 격자. ★새 색을 만들지 않는다.
     ★빛 번짐·오로라는 안 쓴다(핸드오프 0-113) — 화려함은 ★큰 숫자와 ★금색 단추로 낸다.
     ★왼쪽 = 무엇인가(제목·합계·세 줄) · ★오른쪽 = 학년별 받기. 폰(≤820)에서는 ★위아래로 접는다. */
.frp-spot{
  position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr);
  gap:28px; align-items:center; margin:0 0 28px; padding:30px 30px; border-radius:22px; color:#fff;
  background:
    radial-gradient(700px 320px at 0% 0%, rgba(201,162,39,.20), transparent 60%),
    linear-gradient(150deg, #0A1527 0%, #16305A 58%, #0F1E38 100%);
  box-shadow:0 22px 48px -28px rgba(15,30,56,.65);
}
.frp-spot::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg, #000, transparent 55%);
          mask-image:linear-gradient(90deg, #000, transparent 55%);
}
.frp-spot::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, #C9A227, var(--fr-gold), #C9A227);
}
.frp-spot-lead, .frp-spot-tiles{ position:relative; z-index:1; }
.frp-spot-eye{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(240,201,75,.45);
  font-size:11.5px; font-weight:800; letter-spacing:.12em; color:var(--fr-gold);
}
.frp-spot-h{ margin:0; font-size:clamp(22px, 2.8vw, 30px); font-weight:900; letter-spacing:-.03em;
  line-height:1.25; word-break:keep-all; color:#fff; }
.frp-spot-total{ margin:14px 0 0; display:flex; align-items:baseline; gap:8px; }
.frp-spot-total b{ font-size:clamp(40px, 5.4vw, 58px); font-weight:900; line-height:1; letter-spacing:-.04em;
  color:var(--fr-gold); font-variant-numeric:tabular-nums; }
.frp-spot-total span{ font-size:15px; font-weight:700; color:#CBD8EC; }
.frp-spot-pts{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:7px; }
.frp-spot-pts li{ position:relative; padding-left:22px; font-size:14.5px; color:#CBD8EC; line-height:1.5; }
.frp-spot-pts li::before{
  content:""; position:absolute; left:2px; top:.42em; width:12px; height:7px;
  border-left:2.5px solid var(--fr-gold); border-bottom:2.5px solid var(--fr-gold); transform:rotate(-45deg);
}
.frp-spot-pts b{ color:#fff; font-weight:700; }
.frp-spot-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.frp-spot-tiles[data-n="1"]{ grid-template-columns:minmax(0, 1fr); }
.frp-spot-tiles[data-n="3"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.frp-spot-tile{
  display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:16px;
  background:#fff; color:#0F1E38; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.55);
  transition:transform .18s ease, box-shadow .2s ease;
}
.frp-spot-tile:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -18px rgba(0,0,0,.6); }
.frp-spot-tile.is-locked:hover{ transform:none; }
.frp-spot-grade{ margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.frp-spot-n{ margin:4px 0 0; display:flex; align-items:baseline; gap:4px; font-size:15px; font-weight:800; color:#334155; }
.frp-spot-n b{ font-size:40px; font-weight:900; line-height:1; letter-spacing:-.04em; color:#0F1E38;
  font-variant-numeric:tabular-nums; }
.frp-spot-split{ margin:0; display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12.5px; font-weight:700; color:#5B6575; }
.frp-spot-split span + span::before{ content:"·"; margin-right:8px; color:#C4CBD6; }
.frp-spot-t{ margin:2px 0 0; font-size:13.5px; font-weight:700; line-height:1.45; word-break:keep-all; }
.frp-spot-t a{ color:#334155; text-decoration:none; }
.frp-spot-t a:hover{ text-decoration:underline; }
.frp-spot-tile .frp-dl{ margin-top:auto; }
/* ★금색 받기 단추 — 띠 안에서 ★눈이 먼저 가는 곳(금색 토큰 그대로) */
.frp-dl--gold{ background:linear-gradient(180deg, #F6D669, var(--fr-gold)); color:#0F1E38; font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -10px rgba(201,162,39,.8); }
.frp-dl--gold:hover{ background:linear-gradient(180deg, #F0C94B, #E2B935); }
@media (max-width:820px){
  .frp-spot{ grid-template-columns:1fr; gap:20px; padding:22px 16px; border-radius:18px; }
  .frp-spot-tiles, .frp-spot-tiles[data-n="3"]{ grid-template-columns:1fr; }
  .frp-spot-n b{ font-size:34px; }
}

/* ★움직임을 싫어하는 분께는 ★멈춘다 */
@media (prefers-reduced-motion:reduce){
  .lp-free.lp-free--img, .credit-chip-top--img,
  .lp-free.lp-free--img:hover, .credit-chip-top--img:hover{ transform:none; transition:none; }
  .frp-card, .frp-card:hover, .frp-gbtn, .frp-gbtn:hover,
  .frp-garrow, .frp-gbtn:hover .frp-garrow,
  .frp-mini, .frp-mini:hover{ transform:none; transition:none; }
  .frp-spot-tile, .frp-spot-tile:hover{ transform:none; transition:none; }
  .frp-tag--new i{ animation:none; }
}