/* 코어연산 레벨테스트 모아보기 새 디자인 v2 — 데스크톱 전용 리스킨.
   Figma: ImSbwO7Hg4s2GmlBJvkX22, frame 1647:17086 (레벨테스트 모아보기). */
:root{
  --c-text:#111;   --c-gray:#505050;  --c-gray2:#767676;
  --c-line:#E5E5EC;
}

body.leveltest-v2{
  margin:0;
  /* Figma frame 1647:17086 실제 배경 (블루 + 민트 오버레이 2겹) */
  background:
    linear-gradient(155.03deg, rgba(204,229,229,0) 17.06%, rgba(204,229,229,0.7) 78.52%),
    linear-gradient(90deg, #B5CDFF 0%, #CDDDFF 44.92%, #C5D8FF 100%);
  background-attachment:fixed;
  min-height:100vh;
}

.lt-v2-main{
  width:1380px;
  max-width:calc(100% - 40px);
  margin:0 auto;
  padding:48px 0 96px;
  box-sizing:border-box;
}

/* ── 헤더 (제목 + 설명 + 필터탭 + 캐릭터) ── */
.lt-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  min-height:222px;
  margin-bottom:48px;
}
.lt-hero__text{ display:flex; flex-direction:column; gap:24px; flex:1 1 auto; min-width:0; }
.lt-hero__titles{ display:flex; flex-direction:column; gap:8px; }
.lt-hero__title{
  font-family:'HGAlmond60g', sans-serif;
  font-size:56px; line-height:1.1; color:var(--c-text);
  margin:0;
}
.lt-hero__desc{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:18px; line-height:26px; letter-spacing:-0.45px; color:var(--c-gray);
  margin:0;
}
.lt-hero__illust{ flex:none; height:240px; }
.lt-hero__illust img{ height:100%; width:auto; display:block; }

/* ── 필터 탭 (전체 / 6세 / 7세 / 초등 1~4학년) ── */
.lt-tabs{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.lt-tab{
  height:44px; padding:0 16px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.5); border:1px solid #fff; border-radius:100px;
  color:var(--c-gray);
  font-family:'Pretendard-Regular', sans-serif; font-size:18px; line-height:26px; letter-spacing:-0.45px;
  white-space:nowrap; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.lt-tab.is-active{
  background:var(--c-text); border-color:var(--c-text); color:#fff;
  font-family:'Pretendard-Bold', sans-serif;
}

/* ── 단계(연령) 섹션 ── */
/* content-visibility:auto — '전체' 탭에서 모든 단계 섹션을 길게 펼치므로(off-screen 다수)
   화면 밖 섹션의 레이아웃/페인트를 건너뛰어 초기 렌더를 가볍게. (특정 탭 선택 시 비활성 섹션은
   .is-hidden=display:none 이라 어차피 렌더 제외 — 영향 없음.) */
.lt-section{ margin-bottom:48px; content-visibility:auto; contain-intrinsic-size:auto 360px; }
.lt-section.is-hidden{ display:none; }
.lt-section__title{
  font-family:'Pretendard-Bold', sans-serif;
  font-size:20px; line-height:28px; letter-spacing:-0.5px; color:var(--c-text);
  margin:0 0 20px;
}

/* ── 레벨 카드 그리드 (2열) ── */
.lt-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px 20px;
}

/* ── 레벨 카드 (메달 배지 + 레벨명 + 화살표) ── */
.lt-card{
  position:relative;
  display:flex; align-items:center;
  background:#fff; border-radius:16px;
  min-height:100px;
  padding:0 24px 0 128px;
  box-sizing:border-box;
  box-shadow:0 4px 16px rgba(17,17,17,.04);
  cursor:pointer;
  transition:box-shadow .15s, transform .05s;
}
.lt-card:hover{ box-shadow:0 8px 24px rgba(17,17,17,.1); }
.lt-card:active{ transform:scale(.995); }
.lt-card__badge{
  position:absolute; left:20px; top:-6px;
  width:84px; height:106px;
}
.lt-card__badge img{ width:100%; height:100%; object-fit:contain; display:block; }
.lt-card__text{ flex:1 1 auto; min-width:0; }
.lt-card__lv{
  font-family:'Pretendard-Bold', sans-serif;
  font-size:28px; line-height:38px; letter-spacing:-0.7px; color:var(--c-text);
  margin:0;
}
.lt-card__sub{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px; color:var(--c-gray2);
  margin:0;
  /* 레벨 제목(학습 내용) — 길어도 한 줄 말줄임으로 카드 높이 균일 유지 */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lt-card__arrow{ flex:none; width:18px; height:18px; color:var(--c-text); margin-left:16px; }

/* 준비중(데이터 미제공) 레벨테스트 카드 — 38·40·45 */
.lt-card.is-soon{ cursor:default; opacity:.55; background:#f4f5f7; box-shadow:none; }
.lt-card.is-soon:hover{ box-shadow:none; }
.lt-card.is-soon:active{ transform:none; }
.lt-card.is-soon .lt-card__badge{ filter:grayscale(1); }

/* ── 플로팅 스크롤탑 ── */
.lt-fab{
  position:fixed; right:32px; bottom:32px; z-index:50;
  width:48px; height:48px; border-radius:50%;
  background:#fff; border:1px solid var(--c-line);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* 좁은 화면 보호 (데스크톱 우선, 깨짐 방지) */
@media (max-width:1100px){
  .lt-grid{ grid-template-columns:minmax(0,1fr); }
  .lt-hero{ flex-direction:column; align-items:flex-start; }
}