/* 3분 적성검사 — 문항 화면·결과 카드 전용 스타일 */
.cf-step[hidden] { display: none; }
.cf-prog { display: flex; align-items: center; gap: 14px; }
.cf-prog span { font-size: 15px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.cf-track { flex: 1; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.cf-track i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.cf-q { display: grid; align-content: center; min-height: 120px; margin: 24px 0 18px; font-size: 22px; line-height: 1.5; font-weight: 700; word-break: keep-all; }
.cf-scale { display: grid; gap: 8px; }
.cf-scale button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 16px; color: var(--ink); text-align: left; cursor: pointer; }
.cf-scale button b { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--fill); font-size: 13px; color: var(--ink-2); }
.cf-scale button:hover { border-color: var(--blue); }
.cf-scale button.on { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); font-weight: 700; }
.cf-scale button.on b { background: var(--blue); color: #fff; }
.cf-job { margin-bottom: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cf-job.top { border-top: 3px solid var(--blue); }
.cf-job .rk { font-size: 13px; color: var(--ink-3); }
.cf-job h3 { margin: 2px 0 0; font-size: 22px; font-weight: 700; }
.cf-job .fld { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.cf-job .fit { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.cf-job .fit b { font-size: 44px; line-height: 1; font-weight: 700; color: var(--blue); }
.cf-job .fit span { font-size: 15px; color: var(--ink-2); }
.cf-job .why { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cf-job .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cf-job .tags i { padding: 3px 10px; border-radius: 12px; background: var(--fill); font-style: normal; font-size: 13px; color: var(--ink-2); }
.cf-job.sm h3 { font-size: 18px; }
.cf-job.sm .fit b { font-size: 28px; }
.cf-more { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cf-more summary { padding: 14px 20px; font-size: 15px; font-weight: 600; cursor: pointer; }
.cf-more ol { margin: 0; padding: 0 20px 8px; list-style: none; }
.cf-more li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.cf-more li small { display: block; font-size: 13px; color: var(--ink-3); }
.cf-more li b { color: var(--blue); }
.result .cf-type { margin-top: 4px; font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--blue); word-break: keep-all; }
.result .cf-radar { display: block; width: 100%; max-width: 340px; height: auto; margin: 14px auto 0; }
.result .cf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.result .cf-btns .btn { margin: 0; }
.result .cf-flat { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
@media (max-width: 720px) { .cf-q { font-size: 19px; min-height: 100px; } .result .cf-type { font-size: 22px; } .cf-job .fit b { font-size: 38px; } }