@charset "utf-8";
/*******************************************************************************
 * 자격증 안내 (2026-09-21)
 *
 * 색·모서리·그림자·이징은 wsrf2026.css 의 토큰을 씁니다. 여기서 새로 정의하는
 * 색은 없습니다.
 *
 * 글자 크기의 기준선 — PRODUCT.md 는 "초등·중등 학생과 학부모, 고령 지도자가
 * 함께 쓴다. 본문 16px 이상, 터치 타깃 44px" 를 못박았고, DESIGN.md 는
 * "본문 16px / 행간 1.65 / 자간 -0.015em, 위계는 굵기로" 를 정했습니다.
 * 이 파일은 그 기준을 따릅니다. 보조 정보라도 15px 아래로 내려가지 않습니다.
 ******************************************************************************/

.cert-page {
  --cert-accent: var(--navy);      /* 종목별로 색을 돌리지 않습니다 (2026-09-21) */
  --cert-gap: 16px;
  margin: 0;
  letter-spacing: -.015em;
  word-break: keep-all;
  overflow-wrap: break-word;       /* anywhere 는 keep-all 을 무시합니다 */
}
.cert-page .ic {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* 관리자에게만 보이는 줄. 그누보드의 "내용 수정" 이 옛 HTML 을 연다는 것을 알린다.
   문장은 통째로 한 칸(span)에 넣는다 — flex 아이템이 되는 것은 자식 요소뿐이라,
   맨 텍스트를 섞으면 조각마다 gap 이 끼어들어 낱말 사이가 벌어진다. */
.cert-adminbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin: 0 0 24px; padding: 14px 18px;
  background: var(--lime-soft); border-radius: var(--r);
}
.cert-adminbar__txt {
  flex: 1 1 380px; min-width: 0;
  font-size: .9375rem; line-height: 1.65; color: var(--ink-2);
}
.cert-adminbar__txt b { color: var(--ink); }
.cert-adminbar__txt em {
  font-style: normal; font-weight: 700; color: var(--ink);
  padding: 1px 6px; background: rgba(255,255,255,.75); border-radius: var(--r-sm);
}
.cert-adminbar__go {
  flex: none; display: inline-flex; align-items: center;
  min-height: 42px; padding: 10px 18px;
  font-size: .9375rem; font-weight: 700; color: #fff; background: var(--navy);
  border-radius: var(--r); text-decoration: none;
  transition: background .18s var(--ease);
}
.cert-adminbar__go:hover { background: var(--navy-deep); color: #fff; }

/* ── 안내 카드 ────────────────────────────────────────────────────────────── */
.cert-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--cert-gap); margin: 0 0 48px;
}
.cert-card {
  display: flex; align-items: center; gap: 16px;
  min-height: 92px; padding: 20px 22px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  color: inherit; text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              transform .2s var(--ease);
}
a.cert-card:hover { border-color: var(--navy); box-shadow: var(--shadow-2);
                    transform: translateY(-2px); }
.cert-card__ico {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--tint-2); color: var(--navy); font-size: 26px;
}
.cert-card__txt { display: block; min-width: 0; }
.cert-card__txt strong {
  display: block; font-size: 1.0625rem; font-weight: 700;
  line-height: 1.45; color: var(--ink);
}
.cert-card__txt span {
  display: block; margin-top: 6px;
  font-size: .9375rem; line-height: 1.6; color: var(--ink-2);
}
.cert-card__go {
  flex: none; margin-left: auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--navy); font-size: 17px;
}
a.cert-card:hover .cert-card__go { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── 구획 머리 ────────────────────────────────────────────────────────────── */
.cert-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}
.cert-head h2 {
  margin: 0; font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.035em; color: var(--ink);
}
.cert-head p { margin: 0; font-size: .9375rem; color: var(--ink-3); }

/* ── 종목 목록 ────────────────────────────────────────────────────────────── */
.cert-list { margin: 0; padding: 0; list-style: none;
             display: flex; flex-direction: column; gap: 12px; }
.cert-item {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cert-item.is-open { border-color: var(--cert-accent); box-shadow: var(--shadow-1); }

.cert-item__bar { display: flex; align-items: center; gap: 12px; padding-right: 14px; }
.cert-item__head {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; min-height: 44px;
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.cert-item__ico {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--tint-2); color: var(--cert-accent); font-size: 24px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cert-item.is-open .cert-item__ico { background: var(--cert-accent); color: #fff; }
.cert-item__name { min-width: 0; }
.cert-item__name strong {
  display: block; font-size: 1.25rem; font-weight: 700;
  line-height: 1.4; letter-spacing: -.025em; color: var(--ink);
}
.cert-item__name em {
  display: block; margin-top: 4px;
  font-size: .9375rem; font-style: normal; line-height: 1.5; color: var(--ink-3);
}

/* 급수 탭 — 터치 타깃 44px */
.cert-item__tabs { flex: none; display: flex; gap: 6px; }
.cert-lv {
  min-width: 68px; min-height: 44px; padding: 10px 14px;
  font: inherit; font-size: .9375rem; font-weight: 600;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  cursor: pointer; transition: all .18s var(--ease);
}
.cert-lv:hover { border-color: var(--cert-accent); color: var(--cert-accent); }
.cert-lv.is-on {
  background: var(--cert-accent); border-color: var(--cert-accent);
  color: #fff; font-weight: 700;
}
.cert-item__caret {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; font-size: 20px;
  background: none; border: 0; color: var(--ink-3);
  cursor: pointer; transition: transform .25s var(--ease), color .2s var(--ease);
}
.cert-item__caret:hover { color: var(--cert-accent); }
.cert-item:not(.is-open) .cert-item__caret { transform: rotate(180deg); }

/* ── 펼친 내용 ────────────────────────────────────────────────────────────── */
.cert-item__panel { padding: 0 20px 24px; border-top: 1px solid var(--line); }
.cert-grade { display: none; padding-top: 24px; }
.cert-grade.is-on { display: block; }
.cert-grade__title {
  margin: 0; font-size: 1.375rem; font-weight: 800;
  line-height: 1.4; letter-spacing: -.03em; color: var(--navy-deep);
}
.cert-grade__intro { margin: 8px 0 0; font-size: 1rem; line-height: 1.65; color: var(--ink-2); }

/* 세 칸을 같은 폭으로 두고 아래끝까지 나란히 맞춘다.
   [2026-09-21 바꿈] 전에는 검정 종목만 1.35배로 넓히고 align-items:start 로
   두었다. 항목이 긴 칸에 자리를 더 주려던 것인데, 칸마다 폭과 아래끝이 다 달라
   줄이 하나도 맞지 않았다. 내용 길이보다 줄맞춤이 먼저다. */
.cert-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--cert-gap); margin-top: 20px; align-items: stretch;
}
.cert-box { padding: 22px; background: var(--tint); border-radius: var(--r-lg); }
.cert-box h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--cert-accent);
}
.cert-box h4 .ic { font-size: 19px; }
.cert-box ul { margin: 0; padding: 0; list-style: none;
               display: flex; flex-direction: column; gap: 10px; }
.cert-box li {
  position: relative; padding-left: 14px;
  font-size: 1rem; line-height: 1.65; color: var(--ink-2);
}
.cert-box li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong);
}
.cert-box li b { font-weight: 700; color: var(--ink); }
.cert-empty { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-2); }

/* 검정 종목 — 머리말 한 줄 + 딸린 동작 목록 */
.cert-exam { gap: 14px !important; }
.cert-exam__t { display: block; font-weight: 700; color: var(--ink); }
.cert-exam__b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cert-exam__b i {
  font-style: normal; font-size: .9375rem; line-height: 1.45;
  padding: 5px 11px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink-2);
}

/* 심판 계열 — 등급별 검정 내용 */
.cert-spec { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; }
.cert-spec dt {
  font-size: .9375rem; font-weight: 700; color: var(--cert-accent);
  white-space: nowrap; padding-top: 2px;
}
.cert-spec dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.cert-spec dd span { display: block; }

.cert-foot {
  margin: 18px 0 0; padding: 14px 18px;
  font-size: .9375rem; line-height: 1.65; color: var(--ink-2);
  background: var(--tint-2); border-radius: var(--r);
}

/* ── 자격 취득 절차 ──────────────────────────────────────────────────────── */
.cert-steps { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.cert-steps h4 {
  margin: 0 0 14px; font-size: 1rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink);
}
.cert-steps ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.cert-steps li {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--tint);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.cert-steps li + li::before {
  content: ""; position: absolute; left: -9px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 1.6px solid var(--line-strong);
  border-right: 1.6px solid var(--line-strong);
  transform: rotate(45deg);
}
.cert-steps__no {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cert-accent); color: #fff;
  font-size: .9375rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cert-steps__t { min-width: 0; }
.cert-steps__t strong { display: block; font-size: 1rem; font-weight: 700;
                        line-height: 1.45; color: var(--ink); }
/* 틴트 면 위에서 --ink-3 는 4.31:1 로 AA 에 못 미친다. 한 단계 진하게 쓴다. */
.cert-steps__t em { display: block; margin-top: 3px; font-size: .9375rem;
                    font-style: normal; line-height: 1.5; color: var(--ink-2); }

/* ── 문의 배너 ────────────────────────────────────────────────────────────── */
.cert-contact {
  display: flex; align-items: center; gap: 16px; margin-top: 36px;
  padding: 24px 26px; background: var(--tint);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.cert-contact__ico {
  display: grid; place-items: center; flex: none;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--paper); color: var(--navy); font-size: 25px;
}
.cert-contact__txt { min-width: 0; }
.cert-contact__txt strong { display: block; font-size: 1.0625rem; font-weight: 700;
                            line-height: 1.45; color: var(--ink); }
.cert-contact__txt span { display: block; margin-top: 5px; font-size: .9375rem;
                          line-height: 1.6; color: var(--ink-2); }
.cert-contact__btns { margin-left: auto; display: flex; gap: 10px; flex: none; }
/* default.css 의 a.btn{height:35px} 을 이기려면 영역 이름을 앞에 붙여야 한다 */
.cert-page .cert-contact__btns .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: auto; min-height: 46px; padding: 12px 20px;
  font-size: 1rem; font-weight: 700; border-radius: var(--r);
  text-decoration: none; transition: all .18s var(--ease);
}
.cert-page .cert-contact__btns .btn--quiet {
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong);
}
.cert-page .cert-contact__btns .btn--quiet:hover { border-color: var(--navy); color: var(--navy); }
.cert-page .cert-contact__btns .btn--solid {
  background: var(--navy); color: #fff; border: 1px solid var(--navy);
}
.cert-page .cert-contact__btns .btn--solid:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

/* ── 좁은 화면 ────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* 세 칸을 그대로 두면 칸이 280px 밑으로 내려가 항목이 두 줄씩 접힌다 */
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .cert-grid > .cert-box:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .cert-cards { grid-template-columns: 1fr; }
  .cert-card { min-height: 0; }
  .cert-steps ol { grid-template-columns: repeat(2, 1fr); }
  .cert-steps li + li::before { display: none; }
}
@media (max-width: 860px) {
  .cert-grid { grid-template-columns: 1fr; }
  .cert-item__bar { flex-wrap: wrap; padding: 0 12px 14px 0; }
  .cert-item__head { flex: 1 1 100%; padding: 16px 14px 10px; }
  .cert-item__tabs { flex: 1 1 auto; padding-left: 14px; }
  .cert-lv { flex: 1 1 0; min-width: 0; padding: 10px 6px; }
  .cert-item__caret { margin-left: auto; }
  .cert-item__panel { padding: 0 14px 20px; }
  .cert-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cert-head h2 { font-size: 1.375rem; }
  .cert-grade__title { font-size: 1.25rem; }
  .cert-box { padding: 18px; }
  .cert-contact { flex-wrap: wrap; padding: 20px; }
  .cert-contact__btns { margin-left: 0; flex: 1 1 100%; }
  .cert-page .cert-contact__btns .btn { flex: 1 1 0; }
  .cert-steps ol { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .cert-item__name strong { font-size: 1.125rem; }
  .cert-lv { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cert-page *, .cert-page *::before { transition: none !important; }
}