/* 맞춤훈련 페이지 전용. 패널·빈 상태·태그는 shared/css/panel.css, 종목 카드는 games-grid.css. */

/* .is-hidden은 shared/css/base.css, .proto-switch(검수용 상태 전환기)는 shared/css/panel.css 공용 */

/* 빈 상태 아래의 "그동안" 안내 — 진단을 강요하지 않는다는 기획 원칙(비강제)을 화면에서도 지킨다 */
.ct-meanwhile { text-align: center; margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--line); }
.ct-meanwhile h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.ct-meanwhile p { font-size: 13.5px; color: var(--text-mute); margin-bottom: 18px; }

/* 영역별 진단 요약 — 막대는 점수를 그대로 길이로 옮긴 것뿐, 등수·백분위 표현은 쓰지 않는다
   (기획서: 백분위·등수·IQ 프레이밍 금지) */
.ct-areas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .ct-areas { grid-template-columns: 1fr; } }

.ct-area { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px; display: flex; flex-direction: column; }
.ct-area--weak { border-color: var(--game); box-shadow: 0 10px 24px rgba(255,106,61,.12); }
.ct-area__tag { display: inline-flex; align-self: flex-start; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; margin-bottom: 14px; color: var(--text-mute); background: var(--bg); }
.ct-area--weak .ct-area__tag { color: #fff; background: var(--game); }
.ct-area h3 { font-size: 19px; font-weight: 700; margin-bottom: 16px; }
.ct-area__bar { height: 8px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: auto; }
.ct-area__bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.ct-area--weak .ct-area__bar span { background: var(--game); }
.ct-area__num { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.ct-area-note { padding: 22px; }
.ct-recheck { margin-top: 16px; }

.ct-sect-gap { margin-top: 72px; }

/* 추천은 2개만 노출하므로 4열 기본 그리드를 2열로 좁힌다 */
.games-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .games-grid--2 { grid-template-columns: 1fr; } }

.ct-class__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ct-class__head h4 { margin-bottom: 0; }
.ct-class.is-soon { opacity: .72; }
.ct-class > p { margin-bottom: 12px; }