/* 코어연산 학습(learningList) 새 INLINE 디자인 v2 — 데스크톱 전용 리스킨.
   Figma: ImSbwO7Hg4s2GmlBJvkX22, frame 1677:17646 (real final/list). */
:root{
  --c-text:#111;   --c-gray:#505050;  --c-gray2:#767676;  --c-disabled:#999;
  --c-line:#E5E5EC; --c-line2:#F1F1F5; --c-light:#F7F7FB;
}

/* 2차 리디자인 배경 = 거의 균일한 연한 틸. 마스코트 PNG 의 배경색(#DFEFF2)과 정확히 일치시켜
   헤더 일러스트가 이음매 없이 페이지에 녹아들게 한다(일러스트가 투명 PNG 가 아니라 틸 배경 내장). */
body.learninglist-v2{
  margin:0;
  background:#DFEFF2;
  min-height:100vh;
}

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

/* ── 헤더 밴드 (non-sticky: 스크롤 시 함께 밀려 올라감) — Figma node 2148:18600 ── */
.ll-hero{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px;
  padding:8px 12px 0;
  position:relative;
}
.ll-hero__text{ padding-bottom:30px; }
.ll-hero__title{            /* HGAlmond60g, Figma 56px #111 */
  margin:0;
  font-size:56px; line-height:normal; color:#111;
}
.ll-hero__sub{
  margin:8px 0 0;
  font-family:'Pretendard-Regular', sans-serif;
  font-size:18px; line-height:26px; letter-spacing:-0.45px; color:#505050;
}
.ll-hero__mascot{
  flex:none; height:210px; width:auto; display:block;
  /* 마스코트 PNG 는 틸 배경 내장(투명 아님) → 흰 패널을 덮지 않도록 헤더(틸) 영역 안에만 둔다 */
  position:relative; z-index:2;
}

/* ── 흰색 라운드 컨테이너 (좌측 네비 + 우측 리스트를 감쌈) — Figma rounded 40 ── */
.ll-panel{
  background:#fff;
  border-radius:40px;
  box-shadow:0 8px 30px rgba(31,42,68,.06);
  padding:40px 48px 56px;
  box-sizing:border-box;
  position:relative;
}

.ll-layout{
  display:flex;
  align-items:flex-start;
  gap:48px;
}

/* ── 좌측 스티키: 단계별 바로가기 네비(상단) + 신호등 범례(하단) ── */
.ll-side{
  flex:none;
  width:242px;
  position:sticky;
  top:24px;
  align-self:flex-start;
}
.ll-nav__title{                    /* Pretendard SemiBold 20/28, #111 — Figma 2438:18808 */
  margin:0 0 12px;
  font-family:'Pretendard-Bold', sans-serif;
  font-size:20px; line-height:28px; letter-spacing:-0.5px; color:#111;
}
.ll-nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
/* 한 단계 행: [색 점 + 단계 라벨(50px)] + [레벨 번호 버튼들] */
.ll-nav__row{ display:flex; align-items:center; gap:8px; }
.ll-nav__stage{ flex:none; width:50px; display:flex; align-items:center; gap:4px; }
.ll-nav__dot{ flex:none; width:8px; height:8px; border-radius:3px; }
.ll-nav__stagelabel{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:14px; line-height:20px; letter-spacing:-0.35px; color:#767676; white-space:nowrap;
}
.ll-nav__levels{ flex:1 1 0; min-width:0; display:flex; align-items:center; gap:2px; }
.ll-nav__link{          /* 레벨 번호 버튼 — Figma TabBtn28Level (28px, rounded 14) */
  flex:none; width:28px;
  display:flex; align-items:center; justify-content:center;
  padding:2px 0; border-radius:14px;
  font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px;
  color:#505050; text-decoration:none; cursor:pointer;
  transition:background .12s, color .12s;
}
.ll-nav__link:hover{ background:#f1f1f5; }
.ll-nav__link.is-active{ background:#f1f1f5; color:#111; }

/* 신호등 범례 (좌측, 네비 아래 — Figma 2170:1899 좌측 하단 배치) */
.ll-legend{ margin-top:40px; }
.ll-legend__tab{ display:flex; gap:12px; align-items:flex-end; }
.ll-legend__tabtxt{
  background:var(--c-light); color:var(--c-gray);
  font-size:16px; line-height:1; white-space:nowrap;
  padding:12px 24px 2px 20px;
  border-radius:16px 16px 0 0;
}
.ll-legend__char{ width:52px; height:37px; display:block; }
.ll-legend__box{
  background:var(--c-light);
  border-radius:0 20px 20px 20px;
  padding:16px 20px;
  display:flex; flex-direction:column; gap:2px;
}
.ll-legend__row{
  display:flex; align-items:center; gap:12px;
  font-family:'Pretendard-Regular', sans-serif; font-size:14px; line-height:20px; letter-spacing:-0.35px;
  color:var(--c-gray2);
}
.ll-legend__dot{ width:12px; height:12px; border-radius:50%; flex:none; }
.ll-legend__dot.is-g{ background:#0BD688; }
.ll-legend__dot.is-y{ background:#FFBF2C; }
.ll-legend__dot.is-r{ background:#FF5760; }

/* ── 우측 콘텐츠 (레벨 리스트) — 옅은 회색(#F7F7FB) 바탕으로 흰 카드가 도드라지게 ── */
.ll-content{
  flex:1 1 auto;
  min-width:0;
  background:var(--c-light);
  border-radius:24px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:40px;
}

/* 레벨 섹션 */
/* content-visibility:auto — 레벨 60개를 한 페이지에 전부 렌더(압축해제 DOM ~391KB)라 화면 밖
   레벨의 레이아웃/페인트를 건너뛰어 초기 렌더를 가볍게. contain-intrinsic-size 로 미렌더 추정 높이.
   ⚠ 추정 높이(386px)는 실제 카드 렌더 높이와 일치시켜야 한다. 과소 추정(예: 200px)이면 스크롤로
   카드가 뷰포트에 들어와 실제 높이로 펼쳐질 때마다 문서가 늘어나(카드당 +186px, 60개면 ~11000px)
   좌측 '레벨별 바로가기'의 원거리(1→60) 스크롤 목표가 계속 아래로 밀려 끝까지 도달하지 못한다.
   margin-left:-16 + padding-left:16 — .ll-q-row:hover 가 카드 밖 좌측 12px 돌출하는데 paint
   컨테인먼트가 이를 클립하므로, 클립 박스를 좌측 16px 확장하고 같은 양을 padding 으로 되밀어
   카드 위치는 그대로 두면서(.ll-content 가 align-items:stretch flex 라 폭 불변) 돌출을 클립
   영역 안에 넣는다. 앵커(#ll-level-N)·Ctrl+F 는 content-visibility:auto 에서 정상(hidden 과 달리). */
.ll-level{ display:flex; flex-direction:column; gap:12px; content-visibility:auto; contain-intrinsic-size:auto 386px; margin-left:-16px; padding-left:16px; }
.ll-level__head{
  display:flex; align-items:center; gap:12px;
  padding:0 32px;
}
.ll-level__num{
  font-size:36px; line-height:normal; color:var(--accent, #4188de);
  white-space:nowrap;
}
.ll-level__name{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:16px; line-height:24px; letter-spacing:-0.4px; color:var(--c-gray2);
}
/* 추천 레벨 배지 (#258): 레벨테스트 통과·진단 추천의 max 레벨 강조.
   Figma: 핑크(#FF5760) pill + 흰 글자 "○○님께 적합한 문제"(이름은 JS 주입). */
.ll-rec-badge{
  flex:none;
  padding:6px 16px;
  font-family:'Pretendard-Bold', sans-serif;
  font-size:14px; line-height:20px; letter-spacing:-0.35px;
  color:#fff; background:#FF5760;
  border-radius:999px; white-space:nowrap;
}

/* 레벨 카드 (Q행 + 레벨테스트) */
.ll-level__card{
  background:#fff;
  border:1px solid var(--c-line2);
  border-radius:36px;
  /* 흰 패널 위 흰 카드 분리용 소프트 섀도 */
  box-shadow:0 6px 20px rgba(31,42,68,.06);
  padding:16px 0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.ll-level__rows{ width:100%; }
/* 현재 단계(myL) 레벨 박스 강조 — 해당 단계 고유 색(--accent/--accent-soft)으로 박스 tint + 테두리 */
.ll-level.is-current-level .ll-level__card{ background:var(--accent-soft); border-color:var(--accent); }
/* 현재 박스는 카드 배경이 soft 틴트라 같은 soft를 쓰는 Q배지가 묻힘 → 흰 배경으로 분리(hover 배지와 동일) */
.ll-level.is-current-level .ll-q-badge{ background:#fff; }

/* Q 행 */
.ll-q-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  cursor:pointer;
  transition:background .12s;
  border-radius:12px;
}
.ll-q-row__left{ display:flex; align-items:center; gap:14px; min-width:0; }
.ll-q-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ll-q-titleline{ display:flex; align-items:center; gap:4px; min-width:0; }
.ll-q-arrow{ display:none; flex:none; width:18px; height:18px; color:#fff; }
.ll-q-desc{ display:none; margin:0; font-family:'Pretendard-Bold', sans-serif; font-size:14px; line-height:20px; letter-spacing:-0.35px; color:#fff; }
.ll-q-badge{
  flex:none; width:48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft, #e6f2fc); color:var(--accent, #4188de);
  font-size:16px; line-height:normal;
  padding:8px 10px 4px; border-radius:20px;
}
.ll-q-title{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:20px; line-height:28px; letter-spacing:-0.5px; color:var(--c-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 마우스오버(hover) + 현재 진행 퀘스트(is-current) 강조 — Figma 1684:17347
   좌측은 카드를 뚫고 나온 둥근 타원(좌 라운드 + 음수마진 돌출), 우측은 라운드 없는 사각. */
.ll-q-row:hover, .ll-q-row.is-current{
  background:var(--accent, #4188de);
  border-radius:36px 0 0 36px;          /* Figma: 좌 36 라운드 / 우 사각(카드 가장자리 flush) */
  margin-left:-12px; margin-right:0;    /* 좌측만 카드 밖으로 12px 돌출 */
  padding:12px 24px 12px 36px;          /* 좌 36(24+12)으로 내용 x위치 유지 */
  position:relative; z-index:1;
}
.ll-q-row:hover .ll-q-title, .ll-q-row.is-current .ll-q-title{ color:#fff; font-family:'Pretendard-Bold', sans-serif; white-space:normal; }
.ll-q-row:hover .ll-q-badge, .ll-q-row.is-current .ll-q-badge{ background:#fff; color:var(--accent, #4188de); }
.ll-q-row:hover .ll-q-arrow, .ll-q-row.is-current .ll-q-arrow{ display:inline-block; }
.ll-q-row:hover .ll-q-desc, .ll-q-row.is-current .ll-q-desc{ display:block; }
/* 첫/마지막 Q행 강조 시 우측이 카드 라운드 코너 밖으로 튀어나오지 않게 tuck (가운데 행은 직선이라 사각 유지) */
.ll-q-row:first-child:hover, .ll-q-row:first-child.is-current{ border-top-right-radius:20px; }
.ll-q-row:last-child:hover, .ll-q-row:last-child.is-current{ border-bottom-right-radius:20px; }

/* 신호등 상태 배지 */
.ll-status{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 10px; border-radius:16px;
}
.ll-status__dot{ width:16px; height:16px; border-radius:50%; flex:none; }
.ll-status__label{
  font-family:'Pretendard-Bold', sans-serif; font-size:14px; line-height:20px; letter-spacing:-0.35px;
  color:#fff; white-space:nowrap;
}
.ll-status.is-n{ background:rgba(0,0,0,.2); }
.ll-status.is-n .ll-status__dot{ background:#cdcdcd; }
.ll-status.is-g,.ll-status.is-y,.ll-status.is-r,.ll-status.is-i{ background:rgba(0,0,0,.6); }
.ll-status.is-g .ll-status__dot{ background:#0BD688; }
.ll-status.is-y .ll-status__dot{ background:#FFBF2C; }
.ll-status.is-r .ll-status__dot{ background:#FF5760; }
.ll-status.is-i .ll-status__dot{ background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); }

/* 레벨테스트 행 — 상태별 디자인 (Figma 1772:19484, BtnEntranceLeveltest)
   ① 테스트 가능(기본): 흰 배경 + 하늘색(#24b4ef) 테두리 + 그림자
   ② 테스트 완료(is-pass): 하늘색 톤 배경(#e5f5fd), 테두리·그림자 제거
   ③ 테스트 불가/접근권한없음(is-locked): 회색 배경(#f1f1f5), 비활성(클릭 불가) */
.ll-lt{
  width:calc(100% - 48px);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  background:#fff;
  border:1px solid #24b4ef;
  box-shadow:0 4px 4px rgba(0,0,0,.12);
  border-radius:24px;
  padding:12px 20px;
  min-height:74px; box-sizing:border-box;
  cursor:pointer;
  transition:background .12s, box-shadow .12s;
}
.ll-lt:hover{ background:#f5fbff; }
.ll-lt.is-pass{ background:#e5f5fd; border-color:transparent; box-shadow:none; }
.ll-lt.is-locked{ background:#f1f1f5; border-color:transparent; box-shadow:none; cursor:default; pointer-events:none; }
.ll-lt__left{ display:flex; align-items:center; gap:12px; min-width:0; }
.ll-lt__medal{ flex:none; width:43px; height:50px; object-fit:contain; }
.ll-lt__text{ min-width:0; }
.ll-lt__title{ margin:0; font-size:16px; line-height:normal; color:var(--c-text); }
.ll-lt__desc{
  margin:0;
  font-family:'Pretendard-Regular', sans-serif; font-size:13px; line-height:18px; letter-spacing:-0.325px;
  color:var(--c-gray2);
}
.ll-lt__arrow{ flex:none; width:18px; height:18px; color:var(--c-gray2); }

/* 레벨테스트 준비중(데이터 미제공) — 37~46 중 테스트 없는 레벨. 잠금과 동일 회색 팔레트 */
.ll-lt.is-disabled{ cursor:default; background:#f1f1f5; border-color:transparent; box-shadow:none; opacity:.65; }
.ll-lt.is-disabled:hover{ background:#f1f1f5; }
.ll-lt.is-disabled .ll-lt__medal{ filter:grayscale(1); }
.ll-lt__soon{
  font-family:'Pretendard-Bold', sans-serif; font-size:12px; line-height:18px;
  color:var(--c-gray2); margin-left:6px;
  background:rgba(0,0,0,.05); padding:2px 8px; border-radius:10px; vertical-align:middle;
}

/* ── 플로팅 스크롤탑 ── */
.ll-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){
  .ll-panel{ padding:32px 24px 48px; }
  .ll-layout{ flex-direction:column; gap:24px; }
  .ll-side{ position:static; width:100%; min-height:0; }
  .ll-legend{ margin-top:24px; }
  .ll-content{ width:100%; padding:20px; }
  .ll-hero{ padding-left:4px; padding-right:4px; }
  .ll-hero__title{ font-size:34px; }
  .ll-hero__sub{ font-size:16px; }
  .ll-hero__mascot{ height:140px; }
  .ll-q-title{ font-size:17px; }
}

/* 폰: 퀘스트 행 — 배지·신호등·패딩 축소 + 제목 최대 2줄 표시(잘림 완화) */
@media (max-width:480px){
  .ll-content{ padding:14px; }
  .ll-q-row{ padding:12px 12px; gap:10px; }
  .ll-q-row__left{ gap:10px; }
  .ll-q-badge{ width:38px; padding:6px 6px 3px; font-size:14px; }
  .ll-q-title{
    font-size:15px; white-space:normal; word-break:keep-all;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .ll-status{ padding:0 8px; gap:4px; height:24px; }
  .ll-status__dot{ width:12px; height:12px; }
  .ll-status__label{ font-size:12px; }
}