/* 전체 시험 목록 — design_handoff_all_exams */
.exam-cat{
  --ec-indigo:#4d5bf0;
  --ec-text:#1B1F2E;
  --ec-sub:#9196a3;
  --ec-muted:#8990a3;
  --ec-border:#e6e8ef;
  --ec-bg:#f6f7fc;
  --ec-green:#22c58b;
  --ec-danger:#d64545;
  --ec-g9:#3b48d8; --ec-g9-bg:#eef0fe;
  --ec-g7:#118049; --ec-g7-bg:#e7f5ee;
  --ec-hae:#0369a1; --ec-hae-bg:#e6f2fb;
  --ec-gisa:#7c3aed; --ec-gisa-bg:#f3ebfe;
  --ec-energy:#c85a1c; --ec-energy-bg:#fdefe4;
  --ec-gongjo:#0369a1; --ec-gongjo-bg:#e0f2fe;
  --ec-labsafety:#047857; --ec-labsafety-bg:#ecfdf5;
  --ec-electricity:#b45309; --ec-electricity-bg:#fef3c7;
  --ec-gas:#0f766e; --ec-gas-bg:#ccfbf1;
  --ec-saneop:#be123c; --ec-saneop-bg:#ffe4e6;
  --ec-jeongbo:#334155; --ec-jeongbo-bg:#e2e8f0;
  --ec-chemanal:#15803d; --ec-chemanal-bg:#dcfce7;
  /* 1000 → 1200: 상단 바(site-shell.css --site-nav-max)·랜딩·허브와 같은 폭.
     좁을 땐 로고가 64px, 카탈로그 카드가 165px 에서 시작해 왼쪽 선이 어긋났다. */
  --ec-max:1200px;
  font-family:var(--font-sans);
  color:var(--ec-text);
  -webkit-font-smoothing:antialiased;
}
.exam-cat a{color:var(--ec-indigo);text-decoration:none}
.exam-cat a:hover{color:#3b48d8}

/* 프로모 배너 */
.exam-cat .ec-promo{
  background:linear-gradient(120deg,#161b2e,#1f2440);
  padding:20px 0;
}
@media(min-width:900px){.exam-cat .ec-promo{padding:22px 0}}
/* 좌우 여백은 **안쪽**에 — .ec-body 처럼 max-width 와 padding 이 같은 요소여야
   배너 글이 로고·카드와 같은 x 에 선다 (2026-08-21 실측: 40 vs 64 로 어긋났다). */
.exam-cat .ec-promo-inner{
  max-width:var(--ec-max);margin:0 auto;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
@media(min-width:900px){.exam-cat .ec-promo-inner{padding:0 24px}}
.exam-cat .ec-promo .lab{
  font-size:11px;font-weight:800;color:var(--ec-green);letter-spacing:1.5px;
}
.exam-cat .ec-promo .ttl{
  font-size:clamp(16px,2.4vw,19px);font-weight:900;color:#fff;margin-top:4px;
  letter-spacing:-.3px;line-height:1.35;
}
.exam-cat .ec-promo-cta{
  flex-shrink:0;border:0;background:var(--ec-green);color:#0d2b1e;
  font-weight:800;font-size:13px;padding:11px 18px;border-radius:11px;
  cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;
  align-items:center;
}
.exam-cat .ec-promo-cta:hover{filter:brightness(1.05);color:#0d2b1e;text-decoration:none}
@media(max-width:520px){
  .exam-cat .ec-promo-inner{flex-direction:column;align-items:flex-start}
  .exam-cat .ec-promo-cta{align-self:stretch;justify-content:center}
}

/* 본문 */
.exam-cat .ec-body{
  max-width:var(--ec-max);margin:0 auto;padding:20px 16px 48px;
}
@media(min-width:900px){.exam-cat .ec-body{padding:24px 24px 56px}}

/* 현재 학습 중 — 로그인 전용 (비로그인 CSS 이중 차단) */
.exam-cat .ec-learning{
  background:#fff;border:1px solid var(--ec-border);border-radius:16px;padding:18px 18px 16px;
}
.exam-cat .ec-learning[hidden]{display:none !important}
/* 홈 게스트: 로그인 허브 안 학습 중 숨김 (/exams 는 JS loggedIn 으로 제어) */
body:not(.land-logged-in) #landExamCatalog .ec-learning,
body:not(.land-logged-in) .hub-authed .ec-learning{display:none !important}
.exam-cat .ec-learning h2{
  margin:0;font-size:13px;font-weight:800;color:var(--ec-text);
}
.exam-cat .ec-learn-grid{
  display:block;margin-top:12px;
}

/* A안(2026-08-22) — 맨 위 1건은 가로로 꽉 찬 배너.
   3열 격자에 카드가 하나뿐이면 오른쪽 2/3 이 비었다. 홈에서 할 일은
   「무엇을 이어서 풀지 하나 고르기」라 그 하나를 크게 세운다. */
.exam-cat .ec-learn-hero{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid #ccd4fb;border-left:4px solid var(--ec-indigo);border-radius:12px;
  padding:15px 17px;text-decoration:none;color:inherit;background:#fff;
  transition:border-color .12s,box-shadow .12s;
}
.exam-cat .ec-learn-hero:hover{
  text-decoration:none;color:inherit;box-shadow:0 8px 20px -14px rgba(27,31,46,.35);
}
.exam-cat .ec-learn-hero .lh-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.exam-cat .ec-learn-hero .lh-k{
  font-size:11px;font-weight:800;color:var(--ec-indigo);letter-spacing:.04em;
}
.exam-cat .ec-learn-hero .lh-t{
  font-size:16px;font-weight:800;color:var(--ec-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.exam-cat .ec-learn-hero .lh-go{
  flex:none;font-size:13px;font-weight:800;
  background:var(--ec-indigo);color:#fff;border-radius:9px;padding:9px 15px;
}

/* 2·3번째 + 「+N개 더」 */
.exam-cat .ec-learn-rest{
  display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px;
}
@media(min-width:720px){.exam-cat .ec-learn-rest{grid-template-columns:repeat(3,1fr)}}
.exam-cat .ec-learn-more{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed #ccd4fb;border-radius:12px;padding:13px 15px;
  font-size:13px;font-weight:800;color:var(--ec-indigo);text-decoration:none;background:#fff;
  font-family:inherit;cursor:pointer;width:100%;
}
.exam-cat .ec-learn-more:hover{text-decoration:none;color:var(--ec-indigo);border-color:var(--ec-indigo)}
.exam-cat .ec-learn-card{
  border:1px solid #eceef2;border-radius:12px;padding:13px 15px;
  text-decoration:none;color:inherit;display:block;background:#fff;
  transition:border-color .12s,box-shadow .12s;
}
.exam-cat .ec-learn-card:hover{
  text-decoration:none;color:inherit;border-color:#dfe2fb;
  box-shadow:0 8px 20px -14px rgba(27,31,46,.25);
}
.exam-cat .ec-learn-card .top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.exam-cat .ec-learn-card .pill{
  font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;
}
.exam-cat .ec-learn-card .pill.g9{color:var(--ec-g9);background:var(--ec-g9-bg)}
.exam-cat .ec-learn-card .pill.g7{color:var(--ec-g7);background:var(--ec-g7-bg)}
.exam-cat .ec-learn-card .pill.hae{color:var(--ec-hae);background:var(--ec-hae-bg)}
.exam-cat .ec-learn-card .pill.gisa{color:var(--ec-gisa);background:var(--ec-gisa-bg)}
.exam-cat .ec-learn-card .pill.energy{color:var(--ec-energy);background:var(--ec-energy-bg)}
.exam-cat .ec-learn-card .pill.gongjo{color:var(--ec-gongjo);background:var(--ec-gongjo-bg)}
.exam-cat .ec-learn-card .pill.labsafety{color:var(--ec-labsafety);background:var(--ec-labsafety-bg)}
.exam-cat .ec-learn-card .pill.electricity{color:var(--ec-electricity);background:var(--ec-electricity-bg)}
.exam-cat .ec-learn-card .pill.gas{color:var(--ec-gas);background:var(--ec-gas-bg)}
.exam-cat .ec-learn-card .pill.saneop{color:var(--ec-saneop);background:var(--ec-saneop-bg)}
.exam-cat .ec-learn-card .pill.jeongbo{color:var(--ec-jeongbo);background:var(--ec-jeongbo-bg)}
.exam-cat .ec-learn-card .pill.chemanal{color:var(--ec-chemanal);background:var(--ec-chemanal-bg)}
.exam-cat .ec-learn-card .due{
  font-size:11px;font-weight:800;color:var(--ec-danger);white-space:nowrap;
}
.exam-cat .ec-learn-card .due.review{color:#c85a1c}
/* 주 표기: 트랙(9급 화공직·화공기사) — 과목보다 한 단계 위 */
.exam-cat .ec-learn-card .title{
  font-size:14.5px;font-weight:800;color:var(--ec-text);margin-top:8px;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exam-cat .ec-learn-card .sub{
  font-size:12px;font-weight:600;color:var(--ec-muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exam-cat .ec-learn-card .go{
  display:inline-block;font-size:11.5px;font-weight:700;margin-top:7px;color:var(--ec-indigo);
}
.exam-cat .ec-learn-empty{
  grid-column:1/-1;padding:18px 14px;text-align:center;
  border:1px dashed #d3d7e2;border-radius:12px;background:#fafbfe;
}
.exam-cat .ec-learn-empty .ee-t{
  font-size:13.5px;font-weight:800;color:var(--ec-text);
}
.exam-cat .ec-learn-empty .ee-s{
  font-size:12px;color:var(--ec-muted);margin-top:6px;line-height:1.45;
}
.exam-cat .ec-learn-empty .ee-a{
  display:inline-block;margin-top:10px;font-size:12.5px;font-weight:800;color:var(--ec-indigo);
}

/* 탭 */
.exam-cat .ec-tabs{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:22px;
}
.exam-cat .ec-tabs button{
  padding:9px 20px;border-radius:999px;font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;border:1px solid #e2e4ee;background:#fff;color:#6b7180;
}
.exam-cat .ec-tabs button.on{
  background:#1B1F2E;color:#fff;border-color:#1B1F2E;font-weight:800;
}
.exam-cat .ec-tabs button:focus-visible{outline:2px solid var(--ec-indigo);outline-offset:2px}

/* 그룹 카드 */
.exam-cat .ec-group{
  background:#fff;border:1px solid var(--ec-border);border-radius:16px;
  padding:20px 18px;margin-top:18px;
}
@media(min-width:720px){.exam-cat .ec-group{padding:22px}}
.exam-cat .ec-group[hidden]{display:none !important}
.exam-cat .ec-group .gh-title{font-size:15px;font-weight:900;color:var(--ec-text)}
.exam-cat .ec-group .gh-sub{font-size:12px;color:var(--ec-sub);margin-top:3px}
.exam-cat .ec-rows{display:flex;flex-direction:column;margin-top:10px}

.exam-cat .ec-row{
  display:flex;align-items:center;gap:14px;padding:15px 4px;
  border-bottom:1px solid #f0f1f5;text-decoration:none;color:inherit;
  transition:background .1s;
}
.exam-cat .ec-row:last-child{border-bottom:0}
.exam-cat .ec-row:hover{text-decoration:none;color:inherit;background:#fafbfe}
.exam-cat .ec-row.is-hidden{display:none !important}
.exam-cat .ec-ico{
  flex:none;width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;
}
.exam-cat .ec-ico.g9{background:var(--ec-g9-bg);color:var(--ec-g9)}
.exam-cat .ec-ico.g9env{background:#ecfdf5;color:#047857}
.exam-cat .ec-ico.g9mech{background:#fff7ed;color:#c2410c}
.exam-cat .ec-ico.g9elec{background:#eff6ff;color:#1d4ed8}
.exam-cat .ec-ico.g9agri{background:#f0fdf4;color:#15803d}
.exam-cat .ec-ico.g9forest{background:#ecfdf5;color:#047857}
.exam-cat .ec-ico.g9tomok{background:#f1f5f9;color:#334155}
.exam-cat .ec-ico.g9arch{background:#fef3c7;color:#b45309}
.exam-cat .ec-ico.g9land{background:#ecfdf5;color:#047857}
.exam-cat .ec-ico.g9bang{background:#fff1f2;color:#be123c}
.exam-cat .ec-ico.g9comm{background:#eff6ff;color:#1d4ed8}
.exam-cat .ec-ico.g9haeng{background:#eef2ff;color:#3730a3}
.ec-ico.g9edu{background:#eff6ff;color:#1d4ed8}
.ec-ico.g9tax{background:#fffbeb;color:#b45309}
.ec-ico.g9customs{background:#fff7ed;color:#c2410c}
.ec-ico.g9labor{background:#fff1f2;color:#be123c}
.ec-ico.g9welfare{background:#fdf2f8;color:#be185d}
.ec-ico.g9prosec{background:#fef2f2;color:#991b1b}
.ec-ico.g9drug{background:#fff1f2;color:#9f1239}
.ec-ico.g9corr{background:#f1f5f9;color:#334155}
.ec-ico.g9prot{background:#f0fdfa;color:#0f766e}
.ec-ico.g9immig{background:#ecfeff;color:#0e7490}
.ec-ico.g9stat{background:#f5f3ff;color:#6d28d9}
.ec-ico.g9audit{background:#fafaf9;color:#44403c}
.ec-ico.g9it{background:#f5f3ff;color:#6d28d9}
.exam-cat .ec-ico.g9health{background:#fdf2f8;color:#be185d}
.exam-cat .ec-ico.g7{background:var(--ec-g7-bg);color:var(--ec-g7)}
.ec-ico.gm5{background:#eef2ff;color:#3730a3}
.ec-ico.gm7{background:#eff6ff;color:#1d4ed8}
.ec-ico.gm9{background:#ecfdf5;color:#0f766e}
.ec-ico.g7dig{background:#f5f3ff;color:#6d28d9}
.ec-ico.g7agri{background:#f0fdf4;color:#15803d}
.ec-ico.g7forest{background:#ecfdf5;color:#047857}
.ec-ico.g7comm{background:#eff6ff;color:#1d4ed8}
.exam-cat .ec-ico.hae{background:var(--ec-hae-bg);color:var(--ec-hae)}
.exam-cat .ec-ico.gisa{background:var(--ec-gisa-bg);color:var(--ec-gisa)}
.exam-cat .ec-ico.energy{background:var(--ec-energy-bg);color:var(--ec-energy)}
.exam-cat .ec-ico.gongjo{background:var(--ec-gongjo-bg);color:var(--ec-gongjo)}
.exam-cat .ec-ico.labsafety{background:var(--ec-labsafety-bg);color:var(--ec-labsafety)}
.exam-cat .ec-ico.electricity{background:var(--ec-electricity-bg);color:var(--ec-electricity)}
.exam-cat .ec-ico.gas{background:var(--ec-gas-bg);color:var(--ec-gas)}
.exam-cat .ec-ico.saneop{background:var(--ec-saneop-bg);color:var(--ec-saneop)}
.exam-cat .ec-ico.jeongbo{background:var(--ec-jeongbo-bg);color:var(--ec-jeongbo)}
.exam-cat .ec-ico.chemanal{background:var(--ec-chemanal-bg);color:var(--ec-chemanal)}
.exam-cat .ec-row .mid{flex:1;min-width:0}
.exam-cat .ec-row .name-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px;
}
.exam-cat .ec-row .name{
  font-size:14.5px;font-weight:800;color:var(--ec-text);white-space:nowrap;
}
.exam-cat .ec-row .tag-new{
  font-size:10px;font-weight:800;color:var(--ec-danger);white-space:nowrap;
}
.exam-cat .ec-row .tag-cycle{
  font-size:9.5px;font-weight:700;color:var(--ec-muted);background:#f1f2f6;
  padding:2px 7px;border-radius:999px;white-space:nowrap;
}
.exam-cat .ec-row .sub{
  font-size:11.5px;color:var(--ec-sub);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exam-cat .ec-row .cta{
  flex-shrink:0;font-size:12.5px;font-weight:700;color:var(--ec-indigo);white-space:nowrap;
}

.exam-cat .ec-request{
  margin-top:14px;background:var(--ec-bg);border:1px dashed #d3d7e2;border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.exam-cat .ec-request .msg{font-size:12px;color:var(--ec-muted);line-height:1.45}
.exam-cat .ec-request a{flex-shrink:0;font-size:12px;font-weight:700;white-space:nowrap}

.exam-cat .ec-empty{
  margin-top:24px;text-align:center;font-size:13.5px;font-weight:600;color:var(--ec-muted);
  padding:28px 16px;
}
.exam-cat .ec-empty[hidden]{display:none !important}

/* 홈 임베드: 상단 여백 */
.hub-authed .exam-cat .ec-promo{border-radius:0}
@media(min-width:720px){
  body.land-logged-in .hub-shell{max-width:none;padding:0}
  body.land-logged-in .hub-authed{margin:0}
}

.ec-ico.gconsafety{background:#fff7ed;color:#c2410c}

.ec-ico.garchitect{background:#eef2ff;color:#3730a3}

.ec-ico.gairpe{background:#eef2ff;color:#3730a3}

.ec-ico.gforest{background:#eef2ff;color:#3730a3}

.ec-ico.gmlmt{background:#eef2ff;color:#3730a3}

.ec-ico.gfpm{background:#eef2ff;color:#3730a3}

.ec-ico.gfpe{background:#eef2ff;color:#3730a3}

.ec-ico.gnrenergy{background:#eef2ff;color:#3730a3}

.ec-ico.gmotor{background:#eef2ff;color:#3730a3}

.ec-ico.gelectricw{background:#eef2ff;color:#3730a3}

.ec-ico.ecsa{background:#eef2ff;color:#3730a3}

.ec-ico.gcolorist{background:#eef2ff;color:#3730a3}

/* ── 자격증 등급 고르기 ─────────────────────────────────────────────────
   81종을 한 목록에 쏟지 않는다. 「자격증」에 들어오면 등급 카드부터 보인다.
   ⛔ 빈 등급도 띄운다 — 앞으로 뭐가 들어올지 보이는 게 낫다 (운영자 결정). */
.exam-cat .ec-certgate{
  background:#fff;border:1px solid var(--ec-border);border-radius:16px;
  padding:20px 18px;margin-top:18px;
}
@media(min-width:720px){.exam-cat .ec-certgate{padding:22px}}
.exam-cat .ec-certgate[hidden]{display:none !important}
.exam-cat .ec-certgate .cg-title{font-size:15px;font-weight:900;color:var(--ec-text)}
.exam-cat .ec-certgate .cg-sub{font-size:12px;color:var(--ec-sub);margin-top:3px}
.exam-cat .cg-grid{
  display:grid;gap:10px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.exam-cat .cg-card{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:15px 14px;border:1px solid var(--ec-border);border-radius:13px;
  background:#fff;text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .12s, background .12s, transform .06s;
}
.exam-cat .cg-card:hover{border-color:#c9cee0;background:#fafbff}
.exam-cat .cg-card:active{transform:translateY(1px)}
.exam-cat .cg-card:focus-visible{outline:2px solid var(--ec-indigo);outline-offset:2px}
.exam-cat .cg-card .cg-nm{font-size:14px;font-weight:800;color:var(--ec-text)}
.exam-cat .cg-card .cg-n{font-size:12px;font-weight:700;color:var(--ec-sub);margin-left:auto}
.exam-cat .cg-card .cg-arr{color:#c5c9d4;font-weight:800}
.exam-cat .cg-card.is-soon{
  cursor:default;background:#fafbfc;border-style:dashed;
}
.exam-cat .cg-card.is-soon:hover{border-color:var(--ec-border);background:#fafbfc}
.exam-cat .cg-card.is-soon .cg-nm{color:#a4a9b8}
.exam-cat .cg-card.is-soon .cg-n{color:#b8bdc9}

.exam-cat .ec-certback{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  padding:9px 14px;border:1px solid var(--ec-border);border-radius:999px;
  background:#fff;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:800;color:#5b6070;
}
.exam-cat .ec-certback:hover{border-color:#c9cee0;color:var(--ec-text)}
.exam-cat .ec-certback[hidden]{display:none !important}

.exam-cat .ec-soon{
  padding:18px 4px;font-size:13px;color:var(--ec-sub);
}