/* cert-home.css — 종목 홈(ORDER-05 2-2) 전용 배치.
 * 색·글꼴·모서리는 tokens.css(T0) 변수만 쓴다. 새 색·새 글꼴 없음.
 * 인라인 스타일 없음 — 모든 규칙은 이 파일과 layers.css·components.css 에 있다. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 바로가기 두 개 + 개정 안내 */
.ch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 4px;
}
.ch-action {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary-strong);
  color: var(--primary-strong);
  font-weight: 700;
  text-decoration: none;
}
.ch-action--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
/* layers.css 의 `.page a`(선택자 무게 0,1,1)가 위 글자색을 이겨 주조 면 위에
   --primary-strong 글자가 얹혔다(대비 미달). 같은 무게 이상으로 다시 못 박는다. */
.page .ch-action--primary { color: var(--primary-foreground); }

/* 단추 안 이용 조건 표식 — 2026-11-08 캐리 B32(처음 온 사람): 눌러야 가입 조건을 알게 된다는
   지적으로 얹었다. 알약 모양, 글자·테두리는 단추 글자색을 따른다(currentColor — 주조 면·테두리
   면 어디서든 읽힌다). ch-cond--free 는 색 입힐 자리만 남긴 훅(모양은 같게). */
.ch-cond {
  display: inline-block;
  margin-left: 2px;
  padding: 0 .5em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .72em;
  font-weight: 600;
  line-height: 1.6;
  opacity: .9;
}

/* 과목 목록 — 과목마다 「이 과목 10문제 풀기」 */
.ch-subjects { list-style: none; margin: 0; padding: 0; }
.ch-subject { margin: 8px 0; }
.ch-subject a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--foreground);
}
.ch-subject a:hover, .ch-subject a:focus-visible { background: var(--accent); }
.ch-subject-name { font-weight: 700; }
.ch-subject-count { font-size: var(--text-sm); color: var(--muted-foreground); }
.ch-subject-cta {
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary-strong);
}

/* 옛 홈 하위 쪽 계승 링크(전기기능사 홈 교체 · C-58②) — 2열 접힘 목록 */
.ch-legacy-links {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 14px;
}
.ch-legacy-links a {
  color: var(--primary-strong);
  text-decoration: none;
  line-height: 1.6;
}
.ch-legacy-links a:hover, .ch-legacy-links a:focus-visible {
  text-decoration: underline;
}

/* 출제기준 트리 단락 — 과목 이름과 상위 두 층 */
.ch-standard-subject { margin: 14px 0 6px; font-weight: 700; }
.ch-standard-nodes { margin: 4px 0 0; }
.ch-standard-l2 {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

/* 대표 문제 카드 안의 안내줄 */
.ch-sample-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}
.ch-sample-solve {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 700;
  text-decoration: none;
}

/* 대표 문제 카드 — 정답은 찍지 않는다(엔진에서 풀이) */
.question-card { margin: 12px 0; }
.q-stem { margin: 0 0 8px; line-height: 1.6; }
.q-options { margin: 0 0 4px; padding-inline-start: 22px; }
.q-options li { margin: 2px 0; line-height: 1.6; }
/* 전역 머리띠(DD-36)는 정식 조각 CSS /styles/site-header-cert.css 로 옮겼다(인계 H-0233 · 2026-10-14). */

/* 대표 문제 번호(10-15 주인님 「대표문제에 번호가 빠져있어」) — 글자로 찍고 목록 번호는 끈다 */
#ch-samples-title ~ ol .q-options, .question-card .q-options { list-style: none; padding-inline-start: 0; }
.question-card .q-no { font-weight: 800; margin-inline-end: 2px; }
.question-card .q-mark { font-weight: 700; margin-inline-end: 2px; }


/* ═══ D-022 종목 홈 시각 개편(2026-10-15 주인님 채택 · 디자인센터) ═══════════════════════════
 * 「모든 구역이 같은 무게」를 고친다 — 요약을 위로, 상자 모양 둘(누르는 것=테두리 · 읽는 것=옅은 면),
 * 크기 단계 벌림, 구역 사이 56px(폰 40px). 색·글꼴은 tokens.css 변수만. 큰 글씨 모드(data-size=large)에서
 * 함께 커지도록 크기는 --text-* 배수로 적는다. 기획·실측: 디자인센터 의뢰/ecbt/종목대시보드-20261015,
 * ecbt-next docs/design/handoff/종목대시보드-20261015/. */
body.cert-home { --cm-max: 992px; }            /* 상단 메뉴 안쪽 폭 = 본문 폭(메뉴 제목과 본문 왼쪽 줄 맞춤) */
.cert-home-main {
  max-width: 992px;                             /* 본문 960 + 좌우 16 */
  --ch-title: calc(var(--text-base) * 2.75);    /* 44px */
  --ch-gap-sec: 56px;
}
@media (max-width: 640px) {
  .cert-home-main { --ch-title: calc(var(--text-base) * 2.125); --ch-gap-sec: 40px; }  /* 34px · 40px */
}

/* 머리 — 종목명·소개·단추 | 지금 할 일 카드 */
.ch-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 12px; }
@media (min-width: 900px) {
  .ch-head--card { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
}
.ch-head-main { min-width: 0; }
.cert-home-main .page-title {
  font-size: var(--ch-title);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 4px 0 0;
  word-break: keep-all;
}
.cert-home-main .page-lead { font-size: var(--text-base); color: var(--muted-foreground); line-height: 1.7; margin: 12px 0 0; }
.cert-home-main .page-meta { font-size: var(--text-sm); margin: 4px 0 0; }
.cert-home-main .ch-actions { margin: 20px 0 0; gap: 8px; }
.cert-home-main .ch-action { justify-content: center; padding: 10px 20px; }
@media (max-width: 640px) {
  .cert-home-main .ch-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cert-home-main .ch-action--primary { grid-column: 1 / -1; }
}

/* 지금 할 일 카드(구역 B) — 위에 이름표, D-숫자는 오른쪽에 크게 */
.cert-home-main .dash-card {
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--pal-surface, var(--card));
  box-shadow: none;
}
.cert-home-main .dash-card::before {
  content: "지금 할 일";
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted-foreground);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.cert-home-main .dash-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: calc(var(--text-base) * 1.125);    /* 18px */
  line-height: 1.45;
  color: var(--foreground);
}
.cert-home-main .dash-what { min-width: 0; }
.cert-home-main .dash-sep { display: none; }
.cert-home-main .dash-dn {
  flex-shrink: 0;
  font-size: calc(var(--text-base) * 2);         /* 32px */
  line-height: 1;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.cert-home-main .dash-card-next {
  font-size: var(--text-sm);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cert-home-main .dash-card-next:empty { display: none; }
/* 다음 필기 접수 안내 줄(cert-dash.js docNoteLine — 2026-11-10 캐리 재검2) — 다음 일정 줄 밑 작은 글 */
.cert-home-main .dash-card-docnote {
  font-size: var(--text-sm);
  margin-top: 4px;
  color: var(--muted-foreground);
}
.cert-home-main .dash-card-docnote:empty { display: none; }

/* 구역 — 제목 한 크기, 사이 넉넉히 */
.cert-home-main > section { margin-top: var(--ch-gap-sec); margin-bottom: 0; }
.cert-home-main .section-title,
.cert-home-main .dash-schedule-title {
  font-size: var(--text-xl);
  line-height: 1.35;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 16px;
}
.cert-home-main .dash-series-group { margin: 0; }
.cert-home-main .dash-series-group + .dash-series-group { margin-top: 20px; }
.cert-home-main .dash-series-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted-foreground);
  margin: 0 0 8px;
}

/* 시험 한눈에 — 큰 숫자 칸 넷 + 나머지 한 줄 */
.ch-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
@media (max-width: 640px) { .ch-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ch-tile { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; min-width: 0; }
.ch-tile dt { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; }
.ch-tile dd { margin: 2px 0 0; color: var(--foreground); font-variant-numeric: tabular-nums; }
.ch-tile-num { font-size: calc(var(--text-base) * 1.625); font-weight: 800; line-height: 1.3; }   /* 26px */
.ch-tile-unit { font-size: var(--text-sm); font-weight: 700; margin-left: 2px; }
.ch-facts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--text-sm); color: var(--muted-foreground); }
.ch-facts b { color: var(--foreground); font-weight: 700; margin-left: 2px; }

/* 일정표 — 글자 한 단계 키움 */
.cert-home-main .dash-table { font-size: calc(var(--text-sm) * 1.07); }   /* 15px */

/* 영역(과목)별 10문제 — 같은 폭 카드 격자 */
.cert-home-main .ch-subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cert-home-main .ch-subject { margin: 0; }
.cert-home-main .ch-subject a {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 2px;
  height: 100%;
  padding: 16px;
  border-radius: var(--radius-md);
}
.cert-home-main .ch-subject-name { font-size: calc(var(--text-base) * 1.0625); }   /* 17px */
.cert-home-main .ch-subject-cta {
  align-self: end;
  margin: 12px 0 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  font-size: var(--text-sm);
}

/* 출제기준 — 과목 이름 한 줄 + 번호 칸 */
.ch-std + .ch-std { margin-top: 24px; }
.cert-home-main .ch-standard-subject { font-size: var(--text-base); font-weight: 700; color: var(--foreground); margin: 0 0 10px; word-break: keep-all; }
.cert-home-main .ch-standard-nodes {
  list-style: none;
  counter-reset: chstd;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 640px) { .cert-home-main .ch-standard-nodes { grid-template-columns: 1fr; } }
.cert-home-main .ch-standard-l2 {
  counter-increment: chstd;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--pal-surface, var(--muted));
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--foreground);
  min-width: 0;
}
.cert-home-main .ch-standard-l2::before {
  content: counter(chstd);
  flex-shrink: 0;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--pal-primary-tint, var(--primary-soft));
  color: var(--primary-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* 대표 문제 — 1번만 펼침, 2번부터 문제 줄로 접음(details · 누르면 펼침) */
.cert-home-main .question-list { list-style: none; margin: 0; padding: 0; }
.cert-home-main .question-card { margin: 0 0 12px; padding: 20px; border-radius: var(--radius-md); }
.cert-home-main .question-card .q-stem { font-size: calc(var(--text-base) * 1.0625); font-weight: 700; color: var(--foreground); }
.cert-home-main .question-card .ch-sample-solve { background: var(--primary); color: var(--primary-foreground); }
.page .cert-home-main .question-card .ch-sample-solve { color: var(--primary-foreground); }
/* 접힌 줄들은 한 묶음 상자로 이어 붙인다 */
.cert-home-main .question-card.q-fold { margin: 0; padding: 0; border-top-width: 0; border-radius: 0; }
.cert-home-main .question-card:not(.q-fold) + .q-fold { border-top-width: 1px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cert-home-main .q-fold:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.cert-home-main .question-card:not(.q-fold) + .q-fold:last-child { border-radius: var(--radius-md); }
.cert-home-main .q-fold details { border: 0; border-radius: 0; background: none; }
.cert-home-main .q-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--touch-min);
  padding: 12px 16px;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
}
.cert-home-main .q-fold summary::-webkit-details-marker { display: none; }
.cert-home-main .q-fold summary::after {
  content: "펼치기";
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary-strong);
}
.cert-home-main .q-fold details[open] summary::after { content: "접기"; }
.cert-home-main .q-fold summary .q-stem { font-size: var(--text-base); font-weight: 500; margin: 0; }
.cert-home-main .q-fold .q-no { color: var(--muted-foreground); }
.cert-home-main .q-fold summary:hover, .cert-home-main .q-fold summary:focus-visible { background: var(--accent); }
.cert-home-main .q-fold details > :not(summary) { margin-left: 16px; margin-right: 16px; }
.cert-home-main .q-fold details[open] { padding-bottom: 16px; }
.cert-home-main .questions-more { text-align: center; margin: 16px 0 0; font-size: var(--text-base); }
.cert-home-main .questions-more a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--primary-strong);
  border-radius: var(--radius-md);
  color: var(--primary-strong);
  font-weight: 700;
  text-decoration: none;
}
/* D-022 꼬리말 — 본문과 같은 폭(992)으로 왼쪽 줄을 맞춘다(layers.css 기본 768) */
body.cert-home .site-foot { max-width: 992px; }


/* 학습 단추 이용 조건 표식 — 2026-11-08 캐리 재검2: 가입 조건을 눌러야 알 수 있다는 지적.
   회원용=앱 로그인 게이트 뒤(바로 풀기·실전 모의고사·영역 10문제), 가입 없이=오늘의 10문제.
   색은 토큰만(배지 바탕 주석이 있는 pal-secondary-soft·pal-primary-tint) — 새 수치를 만들지 않는다. */
.cert-home-main .ch-cond,
.cert-home-main .ch-actions .ch-cond {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  background: var(--pal-secondary-soft, var(--surface, #E6ECF5));
  color: var(--secondary, var(--pal-secondary, #0F3460));
  vertical-align: 1px;
  white-space: nowrap;
}
.cert-home-main .ch-cond--free {
  background: var(--pal-primary-tint, var(--primary-soft, #D5E5F7));
  color: var(--primary-strong, var(--pal-primary-strong, #004E8C));
}
/* 주 단추(파랑 바탕 흰 글자) 안에서는 바탕색을 끄고 현재 글자색 테두리만 — 대비 유지 */
.cert-home-main .ch-action--primary .ch-cond,
.cert-home-main a.ch-action--primary .ch-cond {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: .92;
}