/* 진단(dtest) 새 디자인 v2 — 데스크톱 전용 리스킨. Figma: Core_Level-test 탭형. */
:root{
  --c-text:#111;       --c-gray:#505050;   --c-gray2:#767676;
  --c-yellow:#FFBF2C;  --c-yellow2:#FFAA00;
  --c-bg-soft:#F1F1F5; --c-line:#E5E5EC;
}

body.dtest-v2{
  margin:0;
  background:linear-gradient(176deg,#E2D6F5 3%,#E5F0FD 106%);
  background-attachment:fixed;
  min-height:100vh;
}

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

/* ── 헤더 ── */
.dtest-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-bottom:40px;
}
.dtest-hero-text{ width:570px; max-width:60%; }
.dtest-hero-title{
  font-family:'HGAlmond60g', sans-serif;
  font-size:56px; line-height:1.15; color:var(--c-text);
  margin:0 0 8px;
}
.dtest-hero-desc{
  font-family:'Pretendard-Regular', sans-serif;
  font-size:18px; line-height:26px; letter-spacing:-0.45px; color:var(--c-gray);
  margin:0;
}
.dtest-hero-illust{ flex:none; width:420px; height:222px; }
.dtest-hero-illust img{ width:100%; height:100%; object-fit:contain; }

/* ── 탭 ── */
.dtest-tabs{ display:flex; }
.dtest-tab{
  flex:1 0 0; min-width:0; height:72px;
  background:#fff; border:1px solid var(--c-line); color:var(--c-gray2);
  font-family:'Pretendard-Bold', sans-serif; font-size:24px; line-height:34px; letter-spacing:-0.6px;
  border-radius:24px 24px 0 0; cursor:pointer;
  transition:background .15s, color .15s;
}
.dtest-tab.is-active{ background:var(--c-yellow); border-color:var(--c-yellow); color:var(--c-text); }

/* ── 콘텐츠 카드 ── */
.dtest-card{
  display:flex; align-items:center; gap:0;
  background:#fff; border:1px solid var(--c-line);
  border-radius:0 0 48px 48px;
  padding:48px;
  box-sizing:border-box;
}

/* 좌측 카테고리 패널 */
.dtest-left{
  width:410px; flex:none; box-sizing:border-box;
  padding:28px 20px;
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:627px;
}
.dtest-cat-title{
  font-family:'HGAlmond60g', sans-serif; font-size:68px; line-height:1.1; color:var(--c-text);
  margin:0 0 12px;
}
.dtest-cat-desc{
  font-family:'Pretendard-Regular', sans-serif; font-size:20px; line-height:28px; letter-spacing:-0.5px; color:var(--c-gray);
  margin:0;
}
.dtest-left-char{ margin-top:24px; }
.dtest-left-char img{ display:block; width:370px; max-width:100%; height:auto; }  /* 말풍선 포함 합성 일러스트 */

/* 우측 학년 그리드 */
.dtest-right{
  flex:1 0 0; min-width:0; align-self:stretch;
  background:var(--c-bg-soft); border-radius:36px;
  padding:54px 56px; box-sizing:border-box;
}
.dtest-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:32px 20px;
}
/* content-visibility:auto — 진단 페이지는 이미 가벼워(압축해제 ~24KB) 효과는 미미하나,
   학습/레벨테스트와 일관 + 카테고리 그룹이 늘어나도 화면 밖은 건너뛰도록 함께 적용. */
.dtest-grid-group{ display:flex; flex-direction:column; align-items:center; gap:16px; content-visibility:auto; contain-intrinsic-size:auto 120px; }
.dtest-grade{
  font-family:'Pretendard-Bold', sans-serif; font-size:20px; line-height:28px; letter-spacing:-0.5px;
  color:var(--c-text); text-align:center; margin:0; width:100%;
}
.dtest-grade-btns{ display:flex; flex-direction:column; gap:8px; width:100%; }
.dtest-go{
  width:100%; box-sizing:border-box;
  background:#fff; border:1px solid var(--c-line); border-radius:16px;
  padding:12px 8px;
  font-family:'Pretendard-Regular', sans-serif; font-size:18px; line-height:26px; letter-spacing:-0.45px;
  color:var(--c-gray); text-align:center; cursor:pointer;
  transition:border-color .15s, color .15s, transform .05s;
}
.dtest-go:hover{ border-color:var(--c-yellow); color:var(--c-text); }
.dtest-go:active{ transform:scale(0.99); }

/* ── 플로팅 스크롤탑 ── */
.dtest-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:1280px){
  .dtest-card{ flex-direction:column; align-items:stretch; gap:32px; }
  .dtest-left{ width:auto; min-height:auto; }
  .dtest-hero{ flex-direction:column; align-items:flex-start; }
  .dtest-hero-text{ width:auto; max-width:100%; }
}

/* 폰: 카테고리 그리드를 2열로 + 한글 단어단위 줄바꿈(글자 세로쪼개짐 방지) + 패딩 축소 */
@media (max-width:560px){
  .dtest-right{ padding:20px 16px; border-radius:24px; }
  .dtest-grid{ grid-template-columns:1fr 1fr; gap:20px 12px; }
  .dtest-grade{ word-break:keep-all; font-size:17px; }
  .dtest-go{ word-break:keep-all; padding:10px 6px; font-size:15px; line-height:22px; }
  .dtest-left{ padding:20px 12px; }
  .dtest-cat-title{ font-size:44px; }
}