/* ============================================================
   components.css
   - 헤더 / 주 메뉴와 드롭다운 / 모바일 메뉴 / 버튼 / 카드
   - 게시판 삽입 영역(board-slot) / 푸터
   - common.css의 변수만 사용하고, 규칙 중복 정의는 피합니다.
   ============================================================ */

/* ============== 헤더 ============== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.site-header__logo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.site-header__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.site-header__url {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.site-header__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy);
}

.site-header__contact {
  margin-left: auto;
  flex-shrink: 0;
}

.site-header__phone {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-accent-red);
  white-space: nowrap;
}

.site-header__phone:hover,
.site-header__phone:focus-visible {
  text-decoration: underline;
}

/* ============== 주 메뉴(PC) ============== */
.site-nav {
  flex: 1 1 auto;
}

.site-nav__list {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: block;
  padding: var(--space-3) var(--space-1);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 3px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__item:hover > .site-nav__link,
.site-nav__item:focus-within > .site-nav__link {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.site-nav__link.is-current {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.site-nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(20, 23, 63, 0.12);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: 50;
}

.site-nav__item:hover > .site-nav__submenu,
.site-nav__item:focus-within > .site-nav__submenu {
  opacity: 1;
  visibility: visible;
}

.site-nav__submenu a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: 0.92rem;
  color: var(--color-text);
  white-space: nowrap;
}

.site-nav__submenu a:hover,
.site-nav__submenu a:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.site-nav__submenu a.is-current {
  color: var(--color-primary);
  font-weight: 700;
}

/* ============== 모바일 메뉴 토글 버튼 ============== */
.site-header__menu-toggle {
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--color-navy);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.hamburger {
  top: 50%;
  transform: translateY(-1px);
}

.hamburger::before {
  content: "";
  top: -8px;
}

.hamburger::after {
  content: "";
  top: 8px;
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ============== 반응형: 태블릿/모바일 헤더 ============== */
@media (max-width: 960px) {
  .site-header__inner {
    /* nowrap이면 .site-nav(flex-basis: 100%)가 줄바꿈되지 못하고
       로고·메뉴 버튼과 같은 줄에서 보이지 않는 채로 가로 폭을
       차지해, 메뉴 버튼이 오른쪽 끝까지 밀리지 못하고 메뉴를 열면
       레이아웃이 깨지는 원인이었습니다. wrap으로 바꿔 메뉴(.site-nav)가
       아래 줄로 완전히 내려가도록 합니다. */
    flex-wrap: wrap;
    min-height: 64px;
    padding-block: var(--space-2);
  }

  .site-header__logo {
    width: 40px;
    height: 40px;
  }

  .site-header__menu-toggle {
    display: block;
    margin-left: auto;
  }

  /* 전화번호가 줄바꿈되며 헤더가 두 줄로 두꺼워지는 것을 막기 위해
     모바일·태블릿 헤더에서는 숨깁니다. 전화번호는 메인 비주얼과
     푸터에 이미 표시되어 있어 정보 손실이 없습니다. */
  .site-header__contact {
    display: none;
  }

  .site-nav {
    order: 10;
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }

  .site-nav.is-open {
    max-height: 1400px;
  }

  .site-nav__list {
    flex-direction: column;
    gap: 0;
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .site-nav__link {
    padding: var(--space-3) var(--space-2);
    border-bottom: none;
  }

  .site-nav__link:hover,
  .site-nav__link:focus-visible,
  .site-nav__item:hover > .site-nav__link,
  .site-nav__item:focus-within > .site-nav__link,
  .site-nav__link.is-current {
    border-bottom: none;
    background: var(--color-primary-light);
  }

  .site-nav__submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 var(--space-2);
    background: transparent;
  }

  .site-nav__submenu a {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .site-header__url {
    display: none;
  }
  .site-header__name {
    font-size: 1rem;
  }
  .site-header__phone {
    font-size: 0.92rem;
  }
}

/* ============== 버튼 ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-dark);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-primary-light);
}

/* 외부 서비스(네이버 폼 등) 연동 전, 링크가 아직 실제 목적지로
   연결되지 않은 버튼에 사용합니다. 실제 URL이 연결되면 이 속성과
   함께 aria-disabled/tabindex="-1"도 제거합니다. */
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* ============== 카드 ============== */
.card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  padding: var(--space-5);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover,
.card:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(20, 23, 63, 0.08);
}

.card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.card__desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* ============== 게시판/목록 삽입 영역(board-slot) ============== */
.board-slot {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

.board-slot__label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

/* ============== 본문 이미지 삽입 영역(content-image-slot) ==============
   원본 문서에 이미지가 있었지만 파일을 전달받지 못한 자리를 방문자 화면에
   표시하기 위한 공용 컴포넌트입니다. 실제 깨진 이미지 아이콘을 재현하지
   않고, 연한 배경 + 점선 테두리 + 안내 문구로 자리만 표시합니다. 실제
   이미지가 도착하면 .content-image-slot__placeholder 자리를
   <img class="content-image-slot__img"> 로 교체하면 됩니다(아래
   --filled 변형 참고). */
.content-image-slot {
  margin: 0;
  max-width: 100%;
}

.content-image-slot__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
}

.content-image-slot__icon {
  width: 36px;
  height: 36px;
  color: var(--color-text-muted);
  opacity: 0.55;
}

.content-image-slot__placeholder span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

@media (max-width: 480px) {
  .content-image-slot__placeholder {
    aspect-ratio: 4 / 3;
    padding: var(--space-4);
  }
}

/* 실제 이미지가 채워진 경우(예: 확정된 인정기관 로고) */
.content-image-slot--filled {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.content-image-slot__img {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
}

/* 본문 하단 등에 들어가는 일반 사진(로고·배지가 아닌 실제 촬영 사진)용
   컴포넌트입니다. content-image-slot__img(로고용, 최대폭 260px)과 달리
   본문 폭을 꽉 채우는 큰 사진에 사용합니다(예: Introduction of AIC
   페이지 하단 이미지). */
.content-photo-figure {
  margin: 0;
  max-width: 100%;
}

.content-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ============== 접수 폼 디자인 시안(inquiry-form, 실제 제출 없음) ============== */
.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-2);
  padding: var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.inquiry-form__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.inquiry-form__label {
  padding-top: var(--space-3);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-navy);
}

.inquiry-form__control {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  transition: border-color var(--transition-fast);
}

.inquiry-form__control:focus-visible {
  outline: none;
  border-color: var(--color-primary);
}

.inquiry-form textarea.inquiry-form__control {
  min-height: 160px;
  resize: vertical;
}

.inquiry-form__phone-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.inquiry-form__phone-group .inquiry-form__control {
  text-align: center;
}

.inquiry-form__phone-sep {
  color: var(--color-text-muted);
}

.inquiry-form__file {
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

.inquiry-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
}

.inquiry-form__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.inquiry-form__actions {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
}

@media (max-width: 640px) {
  .inquiry-form {
    padding: var(--space-5) var(--space-4);
  }

  .inquiry-form__row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .inquiry-form__label {
    padding-top: 0;
  }
}

/* ============== 히어로(대분류 상단 배너) ============== */
.page-hero {
  position: relative;
  color: #fff;
  padding-block: 130px;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 20, 50, 0.82) 0%, rgba(15, 20, 50, 0.45) 60%, rgba(15, 20, 50, 0.2) 100%);
}

.page-hero__inner {
  position: relative;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
  animation: heroFadeUp 0.6s ease-out both;
}

.page-hero__title {
  font-size: 2.1rem;
  font-weight: 800;
  margin-bottom: var(--space-3);
}

.page-hero__tagline {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.6;
  opacity: 0.95;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding-block: 84px;
  }
  .page-hero__title {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__inner {
    animation: none;
  }
}

/* ============== 히어로 - 배경 모션(Ken Burns) 옵션 ==============
   일부 히어로(예: ISO 교육)는 배경 사진에 아주 은은한 확대 애니메이션을
   적용합니다. 기존 .page-hero(단일 레이어, style 속성으로 배경 지정)
   페이지에는 영향이 없도록 .page-hero--motion 한정자와 별도의
   .page-hero__bg / .page-hero__overlay 자식 요소를 사용합니다.

   [12차 업데이트 — 풀블리드 cover 방식으로 확정]
   10차 업데이트에서는 박스 비율을 사진 실제 비율에 맞춰(페이지별 인라인
   aspect-ratio/--hero-ratio) 크롭을 아예 없앴지만, 그 대신 화면이 넓을
   때 배너 양옆에 페이지 배경색(남색) 여백이 생기는 트레이드오프가
   있었습니다. 12차 업데이트에서 "양옆 여백은 절대 허용하지 않고, 사진
   일부가 위아래로 잘리는 것은 허용한다"는 방향으로 확정해, 배너를
   화면 폭 전체를 항상 채우는 단순한 방식으로 되돌렸습니다.
   - .page-hero--motion.page-hero: 배너 높이를 PC/태블릿/모바일 구간별
     고정값으로 통일(아래 참고)
   - .page-hero__bg: position:absolute + inset:0으로 부모(.page-hero)
     전체를 항상 꽉 채우는 단일 사진 레이어. background-size: cover,
     background-position: center center 고정 — 화면 비율과 사진 비율이
     다르면 사진 위아래(또는 좌우) 일부가 잘릴 수 있으나 양옆 여백은
     절대 생기지 않습니다. 페이지별 인라인 aspect-ratio/--hero-ratio
     값은 더 이상 레이아웃에 관여하지 않도록 아래에서 무효화합니다.
   - .page-hero__overlay: 어두운 그라디언트(기존 ::before와 동일),
     __bg보다 DOM 순서상 뒤에 와서 항상 사진 위에 그려집니다.
   - .page-hero__inner: 제목 텍스트 — __bg 위에 절대 위치로 겹쳐서
     배너 안에서 수직 중앙 정렬됩니다. */
.page-hero--motion.page-hero {
  background-image: none;
  padding-block: 0;
  display: block;
  /* PC 기준 고정 높이. 태블릿·모바일은 아래 미디어쿼리 참고. */
  height: 360px;
}

/* 6~9차 업데이트에서 쓰였던 블러 확대 채움 레이어는 10차 업데이트에서
   폐기했습니다(27개 페이지의 마크업은 그대로 두되 화면에 영향이 없도록
   숨김 처리). 12차 업데이트(풀블리드 cover)에서도 계속 사용하지
   않습니다. */
.page-hero__fill {
  display: none;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 10차 업데이트에서 쓰던 페이지별 인라인 aspect-ratio/--hero-ratio
     (및 폭 계산식 min(100%, calc(480px * var(--hero-ratio…))))는
     12차 업데이트에서 더 이상 쓰지 않습니다. HTML의 인라인 값을 굳이
     모두 지우는 대신, 여기서 !important로 강제 무효화해 레이아웃에
     영향을 주지 않게 합니다(9차 업데이트 때와 같은 방식). */
  aspect-ratio: auto !important;
  margin-inline: 0;
  min-height: 0;
  max-height: none;
  background-size: cover;
  background-position: center center;
  will-change: transform;
  animation: heroKenBurns 20s ease-in-out infinite alternate;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 20, 50, 0.82) 0%, rgba(15, 20, 50, 0.45) 60%, rgba(15, 20, 50, 0.2) 100%);
}

.page-hero--motion .page-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  animation: heroFadeUp 0.6s ease-out both;
}

.page-hero--motion.page-hero::before {
  content: none;
}

@keyframes heroKenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__bg {
    animation: none;
  }
}

/* 12차 업데이트: 히어로 높이를 PC 360px / 태블릿 300px / 모바일 220px로
   통일합니다. 높이는 부모(.page-hero--motion.page-hero)에 지정하고,
   .page-hero__bg는 inset:0으로 그 높이를 그대로 채웁니다. 태블릿 기준은
   사이트 헤더가 이미 쓰는 960px 분기점, 모바일 기준은 히어로가 기존에
   쓰던 640px 분기점을 그대로 재사용했습니다. */
@media (max-width: 960px) {
  .page-hero--motion.page-hero {
    height: 300px;
  }
}

@media (max-width: 640px) {
  .page-hero--motion.page-hero {
    height: 220px;
  }
}

/* ============== 브레드크럼 ============== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

/* ============================================================
   서브페이지 공통 레이아웃 (히어로 하위 페이지: 회사소개 / 인증서비스 등)
   - 좌측 서브메뉴 + 우측 본문 2단 구성 (PC)
   - 서브메뉴는 상단 가로 스크롤 탭으로 전환 (모바일)
   - 회사소개 3개 페이지부터 사용하며, 이후 다른 메뉴 섹션의
     하위 페이지에서도 동일하게 재사용합니다.
   ============================================================ */
.sub-layout {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5) var(--space-8);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* ---- 인증규격별 스킴컬러 ----
   원장 요청사항: 인증규격별 대표색을 좌측메뉴/탭/active/소제목
   포인트에만 적용(옅은 파스텔 배경 + 동일계열 진한 텍스트 + 부드러운
   테두리). 본문 자체는 흰색/중립색을 유지합니다. body 태그에 아래
   클래스를 추가하면 .sub-sidebar__list의 hover·active, .sub-content__title
   하단 포인트선, .sub-content__body h2 소제목에 자동으로 적용됩니다.
   스킴 클래스가 없는 페이지(회사소개 등)는 기존 기본색 그대로입니다. */
.iso-scheme--9001 {
  --scheme-bg: #EAF2FF;
  --scheme-text: #2F5FB3;
  --scheme-border: #BFD3F7;
}

.iso-scheme--14001 {
  --scheme-bg: #EAF7EA;
  --scheme-text: #3F8A3F;
  --scheme-border: #BFE3BF;
}

.iso-scheme--45001 {
  --scheme-bg: #FDECEC;
  --scheme-text: #C64545;
  --scheme-border: #F2B7B7;
}

.iso-scheme--22000 {
  --scheme-bg: #EEF7F1;
  --scheme-text: #2E7D4F;
  --scheme-border: #B8DEC6;
}

.sub-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
}

.sub-sidebar__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-navy);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-navy);
}

.sub-sidebar__list li + li {
  margin-top: var(--space-1);
}

.sub-sidebar__list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.sub-sidebar__list a:hover,
.sub-sidebar__list a:focus-visible {
  color: var(--scheme-text, var(--color-primary));
  background: var(--scheme-bg, var(--color-primary-light));
}

.sub-sidebar__list a.is-current {
  color: var(--scheme-text, var(--color-primary));
  font-weight: 800;
  background: var(--scheme-bg, var(--color-primary-light));
  border-left-color: var(--scheme-text, var(--color-primary));
}

.sub-content {
  min-width: 0;
  animation: contentFadeUp 0.5s ease-out 0.08s both;
}

@keyframes contentFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub-content {
    animation: none;
  }
}

.sub-content__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--scheme-border, var(--color-border));
}

.sub-content__body {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
  /* 본문을 양쪽정렬합니다. word-break: keep-all(공통 적용)과 함께
     사용해 단어가 줄 끝에서 잘리지 않으면서도 좌우 여백이 고르게
     맞춰집니다. */
  text-align: justify;
}

.sub-content__body > * + * {
  margin-top: var(--space-5);
}

.sub-content__body h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--scheme-text, var(--color-navy));
}

/* 규격별 스킴컬러가 지정된 페이지에서만 소제목에 얇은 포인트선을 추가합니다
   (회사소개 등 스킴이 없는 기존 페이지의 여백/레이아웃은 그대로 유지). */
[class*="iso-scheme--"] .sub-content__body h2 {
  padding-left: var(--space-3);
  border-left: 4px solid var(--scheme-text);
}

.sub-content__body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.sub-content__signature {
  margin-top: var(--space-7);
  text-align: right;
  font-weight: 700;
  color: var(--color-text);
}

@media (max-width: 860px) {
  .sub-layout {
    /* 1fr 단독으로는 grid 트랙의 암묵적 최소 크기가 auto(=자식의
       min-content)가 되어, 아래 .sub-sidebar__list처럼 줄바꿈이
       없는(nowrap) 가로 스크롤 탭이 들어있으면 트랙 자체가 뷰포트보다
       넓게 늘어나며 페이지 전체에 가로 스크롤이 생깁니다(360px 폭에서
       실측 확인). minmax(0, 1fr)로 최소 크기를 0으로 고정해
       자식의 overflow-x:auto가 항상 정상 동작하도록 합니다. */
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-4);
    gap: var(--space-5);
  }

  .sub-sidebar {
    position: static;
    min-width: 0;
  }

  .sub-sidebar__title {
    display: none;
  }

  .sub-sidebar__list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }

  .sub-sidebar__list li + li {
    margin-top: 0;
  }

  .sub-sidebar__list a {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: var(--space-2) var(--space-4);
  }

  .sub-sidebar__list a.is-current {
    border-left-color: transparent;
    border-bottom-color: var(--scheme-text, var(--color-primary));
  }

  .sub-content__title {
    font-size: 1.3rem;
  }
}

/* ============== 번호형 콘텐츠 (예: 공평성 선언문 01·02·03) ============== */
.numbered-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.numbered-list__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.numbered-list__num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}

.numbered-list__text {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--color-text);
}

@media (max-width: 480px) {
  .numbered-list__item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ============== 대시(-) 나열형 텍스트(원본 문구 그대로, 목록 마커 없음) ============== */
.dash-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ============== 조항형 본문(계약조건 등 번호 제목 원문 유지 문서) ============== */
.legal-doc__toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-7);
}

.legal-doc__toc-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.legal-doc__toc-link:hover,
.legal-doc__toc-link:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* 고정 헤더에 앵커 대상 제목이 가려지지 않도록 스크롤 여백을 둡니다. */
.legal-doc h2 {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.legal-doc h2:not(:first-of-type) {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ============== 방침/목표 구분 블록 (예: 서비스품질 방침) ============== */
.policy-block {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.policy-block + .policy-block {
  margin-top: var(--space-5);
}

.policy-block--muted {
  background: var(--color-bg-alt);
}

.policy-block__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}

.policy-block__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  counter-reset: policy-counter;
}

.policy-block__list li {
  position: relative;
  padding-left: var(--space-7);
  font-size: 0.98rem;
  line-height: 1.8;
  counter-increment: policy-counter;
}

.policy-block__list li::before {
  content: counter(policy-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-6);
  height: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
}

.policy-block--en .policy-block__list li::before {
  background: var(--color-navy);
}

.policy-block__lang-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* ============== 품질방침/품질목표 카드 이미지(quality-policy.html) ============== */
.quality-policy-card {
  display: block;
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
}

/* ============== 인사말: IAS 인정 로고 배치 ============== */
.accreditation-block {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.accreditation-block__logo {
  flex-shrink: 0;
  width: 220px;
  height: auto;
}

@media (max-width: 480px) {
  .accreditation-block__logo {
    width: 168px;
  }
}

.accreditation-block__text {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.accreditation-block__text strong {
  color: var(--color-navy);
}

/* ============== English 소개 페이지: 중앙 정렬 인사말 레이아웃 ============== */
.sub-content__body--centered p {
  text-align: center;
}

.sub-content__lead {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.sub-content__signature--center {
  text-align: center;
}

/* ============== 영문 원문 대기 안내 (placeholder) ============== */
.text-pending {
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.8;
}

/* ============== 표 공통 ============== */
.data-table {
  min-width: 640px;
  font-size: 0.92rem;
}

.data-table caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--color-navy);
}

.data-table th,
.data-table td {
  border: 1px solid var(--color-border);
  padding: var(--space-3);
  text-align: center;
}

.data-table thead th {
  background: var(--color-primary-light);
  color: var(--color-navy);
}

/* ============================================================
   게시판형 하위 페이지 공통(board-page-section, board-list)
   - 03/01.html(ISO 교육 안내), 04/01.html(인증기업 현황),
     05/01.html(공지사항) 등 카페24 게시판 연동 전 레이아웃 확인용
     정적 UI에서 공용으로 사용하는 컨테이너·상단메타(board-meta)·
     페이지네이션(board-pagination)·검색(board-search) 컴포넌트입니다.
     페이지 전용 클래스가 아니므로 새 게시판형 하위 페이지를 추가할
     때도 그대로 재사용합니다.
   - 리스트형(.board-list, 번호/제목/작성자/작성일/조회 표)과
     갤러리형(.cert-gallery, 04/01.html 전용 카드 그리드)이 이
     공용 컴포넌트를 함께 사용합니다.
   - 실제 게시물 데이터는 없으며(스켈레톤 표시), 추후 카페24
     빌더 이식 시 이 영역을 해당 게시판 모듈로 교체합니다.
   ============================================================ */
.board-page-section {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5);
  animation: contentFadeUp 0.5s ease-out 0.08s both;
}

@media (prefers-reduced-motion: reduce) {
  .board-page-section {
    animation: none;
  }
}

.board-page-section .sub-content__title {
  margin-bottom: var(--space-5);
}

.board-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.board-count {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.board-count strong {
  color: var(--color-navy);
  font-weight: 800;
}

.board-control-select {
  font: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.board-list__table {
  min-width: 640px;
  font-size: 0.92rem;
}

.board-list__table th,
.board-list__table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.board-list__table thead th {
  background: var(--color-bg-alt);
  color: var(--color-navy);
  font-weight: 700;
  text-align: center;
  border-top: 1px solid var(--color-navy);
  border-bottom: 1px solid var(--color-border);
}

.board-list__table thead th.board-list__col-title,
.board-list__table tbody td.board-list__col-title {
  text-align: left;
}

/* 목록에서 가장 중요한 정보인 제목을 다른 열보다 눈에 띄게 강조합니다
   (모바일에서 작성자·조회 열이 숨겨진 뒤에도 제목이 가장 먼저 읽힙니다). */
.board-list__table tbody td.board-list__col-title {
  font-weight: 600;
  color: var(--color-navy);
}

.board-list__table tbody td {
  text-align: center;
  color: var(--color-text);
}

.board-list__table tbody tr:hover {
  background: var(--color-bg-alt);
}

.board-list__skeleton-row td {
  padding-block: var(--space-4);
}

.board-list__skeleton-row:hover {
  background: none;
}

/* 게시판/갤러리 공통 스켈레톤 바(로딩 전 자리표시자).
   linear-gradient가 좌우로 흐르는 은은한 shimmer이며,
   prefers-reduced-motion 환경에서는 공통 규칙(common.css)이
   모든 animation-duration을 강제로 0에 가깝게 만들어 자동으로
   정지합니다. */
.skeleton-bar {
  display: inline-block;
  height: 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg-alt) 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-bar--no { width: 20px; }
.skeleton-bar--title-lg { width: 78%; max-width: 360px; }
.skeleton-bar--title-md { width: 60%; max-width: 280px; }
.skeleton-bar--title-sm { width: 45%; max-width: 200px; }
.skeleton-bar--author { width: 48px; }
.skeleton-bar--date { width: 72px; }
.skeleton-bar--views { width: 32px; }

.board-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.board-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.board-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.board-page-link:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.board-page-link.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.board-page-link[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.board-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.board-search-select,
.board-search-input {
  font: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.board-search-select {
  cursor: pointer;
}

.board-search-input {
  min-width: 200px;
}

.board-search-btn {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.board-search-btn:hover {
  background: var(--color-primary-dark);
}

@media (max-width: 640px) {
  .board-page-section {
    padding-inline: var(--space-4);
  }

  .board-list__table {
    min-width: 0;
  }

  .board-list__table thead th.board-list__col-author,
  .board-list__table tbody td.board-list__col-author,
  .board-list__table thead th.board-list__col-views,
  .board-list__table tbody td.board-list__col-views {
    display: none;
  }

  .board-search {
    width: 100%;
  }

  .board-search-input {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ============================================================
   인증기업 - 갤러리형 게시판 시안(cert-gallery)
   - 04/01.html 전용. 카페24 갤러리형 게시판(ID 2, 기존 게시물
     약 432개)을 이식하기 전, 카드 그리드 레이아웃만 확인하기
     위한 정적 UI입니다. 상단 메타·하단 페이지네이션/검색은
     위의 공용 .board-meta / .board-pagination / .board-search
     컴포넌트를 그대로 재사용합니다.
   - 카드 8개는 모두 스켈레톤(aria-hidden="true")이며, 실제
     인증기업명·인증번호·이미지는 넣지 않았습니다.
   ============================================================ */
.cert-company-intro {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-6);
}

.cert-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  list-style: none;
}

.cert-gallery__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.cert-gallery__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(20, 23, 63, 0.10);
  border-color: var(--color-primary);
}

.cert-gallery__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  overflow: hidden;
}

/* 실제 인증마크 이미지가 연결되면 이 규칙이 적용됩니다.
   로고·마크마다 비율이 달라 자르지 않도록 object-fit: contain을
   사용하고, 카드 호버 시 부드럽게 확대됩니다. */
.cert-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
  transition: transform var(--transition-base);
}

.cert-gallery__card:hover .cert-gallery__thumb img {
  transform: scale(1.05);
}

.cert-gallery__thumb--skeleton {
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg-alt) 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.8s ease-in-out infinite;
}

.cert-gallery__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  text-align: center;
}

.cert-gallery__body .skeleton-bar {
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .cert-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 820px) {
  .cert-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 360px) {
  .cert-gallery__grid {
    grid-template-columns: 1fr;
  }
}

/* ============== 푸터 ============== */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding-block: var(--space-6);
}

.site-footer__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-footer-border);
}

.site-footer__nav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-footer-text);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.site-footer__info {
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.9;
  color: #b9b9b9;
}

.site-footer__info a {
  color: #b9b9b9;
}

.site-footer__info a:hover,
.site-footer__info a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================
   교육 계획서 팝업 (2026년 에뿔인증원 교육 계획서)
   - 내용(과정명/일정/교육비)과 배색은 data/education-2026.js에서
     불러와 js/common.js가 렌더링합니다. 여기서는 레이아웃/모양만
     담당합니다.
   - 원본 이미지의 굵은 검정 격자선만 얇은 회색 선으로 정리하고,
     과정별로 지정된 글자색과 날짜색은 그대로 유지합니다.
   ============================================================ */
html.edu-plan-no-scroll,
body.edu-plan-no-scroll {
  overflow: hidden;
}

.edu-plan-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(10, 14, 30, 0.6);
  /* 팝업이 화면보다 커질 때(특히 모바일 주소창 때문에 실제 보이는
     높이가 줄어들 때) 위쪽이 화면 밖으로 밀려도 스크롤해서 볼 수
     있도록 오버레이 자체를 스크롤 가능하게 합니다. */
  overflow-y: auto;
}

.edu-plan-overlay[hidden] {
  display: none;
}

.edu-plan-modal {
  position: relative;
  width: 100%;
  /* 원래 크기(1400px)의 약 70% 폭으로 축소해 팝업 뒤 메인페이지가
     더 많이 보이도록 합니다. */
  max-width: 980px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--color-navy);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(10, 14, 30, 0.35);
  overflow: hidden;
}

.edu-plan-modal__scroll {
  overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
}

/* ---- 상단: 로고/제목/할인안내 ----
   원본 이미지와 동일하게 로고 두 개는 왼쪽에 나란히, 할인 안내는
   전체 헤더의 오른쪽 위에 고정합니다(임의로 좌우에 나눠 배치하지
   않음). */
.edu-plan-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-3) var(--space-3);
  margin-bottom: var(--space-3);
  background: #d9e9fa;
  border-radius: var(--radius-md);
}

.edu-plan-logos {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.edu-plan-logo {
  width: 55.2px;
  height: 55.2px;
  flex-shrink: 0;
  border-radius: 50%;
}

.edu-plan-titleblock {
  flex: 1 1 auto;
  min-width: 200px;
}

.edu-plan-discount {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  margin: 0;
  font-weight: 700;
  font-size: 0.78rem;
  color: #ff00ff;
}

.edu-plan-titleblock h2 {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: var(--space-1);
}

.edu-plan-year {
  color: #ff0000;
}

.edu-plan-brand {
  color: var(--color-navy);
}

.edu-plan-sub {
  color: #595959;
}

.edu-plan-contact {
  text-align: center;
  font-size: 0.78rem;
}

.edu-plan-url {
  color: #1010ff;
  font-weight: 600;
}

.edu-plan-phone {
  color: var(--color-text);
  font-weight: 600;
  margin-left: var(--space-2);
}

/* ---- 표 ---- */
.edu-plan-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  /* 모바일에서 가로 스크롤이 가능하다는 것을 시각적으로 알 수 있게 */
  background:
    linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 4%),
    linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 4%) right,
    radial-gradient(farthest-side at left, rgba(20,23,63,0.18), rgba(20,23,63,0)) left,
    radial-gradient(farthest-side at right, rgba(20,23,63,0.18), rgba(20,23,63,0)) right;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.edu-plan-table {
  width: 100%;
  /* 팝업 전체 폭을 70%로 줄인 만큼 표도 함께 좁혀, 좌우 스크롤이
     과하게 생기지 않으면서도 각 칸의 글자는 그대로 읽히도록 합니다. */
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.edu-plan-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.edu-plan-table th,
.edu-plan-table td {
  border: 1px solid #d7dbe3;
  padding: var(--space-1) var(--space-2);
  text-align: center;
  white-space: nowrap;
}

.edu-plan-table td.edu-plan-col-name {
  text-align: left;
  white-space: normal;
  /* 과정명 열의 폭을 줄이는 대신, 과정명이 길면 2줄로 표시되도록
     합니다(모바일에서 다른 열들이 스크롤 없이 더 많이 보이도록). */
  min-width: 130px;
}

.edu-plan-table thead th.edu-plan-col-name {
  white-space: normal;
}

.edu-plan-table thead th {
  background: #47b1e0;
  color: #fff;
  font-weight: 700;
  position: sticky;
  top: 0;
}

/* 과정명 열: 좌우 스크롤을 해도 어떤 과정인지 알 수 있도록 고정.
   본문 칸(td)은 배경을 흰색으로 깔고 행 색상 규칙이 덮어쓰지만,
   머리글(th)은 위의 파란 헤더 배경(#47b1e0)과 흰 글자를 그대로
   유지해야 글자가 보입니다(배경을 다시 흰색으로 바꾸면 안 됨). */
.edu-plan-table th.edu-plan-col-name,
.edu-plan-table td.edu-plan-col-name {
  position: sticky;
  left: 0;
  z-index: 1;
}

.edu-plan-table td.edu-plan-col-name {
  background: #fff;
}

.edu-plan-table thead th.edu-plan-col-name {
  background: #47b1e0;
  color: #fff;
  z-index: 3;
}

.edu-plan-row-white td.edu-plan-col-name { background: #fff; }
.edu-plan-row-gray td.edu-plan-col-name { background: #f4f5f7; }
.edu-plan-row-blue td.edu-plan-col-name { background: #d9e9fa; }
.edu-plan-row-charcoal td.edu-plan-col-name { background: #e0e0e0; }

.edu-plan-table tbody tr.edu-plan-row-white { background: #fff; }
.edu-plan-table tbody tr.edu-plan-row-gray { background: #f4f5f7; }
.edu-plan-table tbody tr.edu-plan-row-blue { background: #d9e9fa; }
.edu-plan-table tbody tr.edu-plan-row-charcoal { background: #e0e0e0; }

.edu-plan-table tbody tr:hover td {
  background: #eaf3ff;
}

.edu-plan-table tbody tr:hover td.edu-plan-col-name {
  background: #eaf3ff;
}

.edu-plan-no {
  font-weight: 700;
  color: var(--color-navy);
}

/* ---- 하단 안내문 ---- */
.edu-plan-notice {
  background: #b5e6a2;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--color-text);
}

.edu-plan-notice p {
  margin: 0;
}

/* ---- 하단 조작부(체크박스/닫기) ---- */
.edu-plan-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: #fafafa;
}

.edu-plan-hide-today {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  cursor: pointer;
}

.edu-plan-hide-today input {
  width: 20px;
  height: 20px;
}

.edu-plan-close-btn {
  padding: var(--space-2) var(--space-6);
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: #fff;
  min-height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
}

.edu-plan-close-btn:hover,
.edu-plan-close-btn:focus-visible {
  background: #23285c;
}

/* 팝업이 열릴 때 닫기 버튼에 자동으로 포커스가 가는데, 사이트
   공통 포커스 표시(주황/노랑 계열 outline, common.css 참고)가 그대로
   나타나면 팝업을 열자마자 노란 테두리가 보입니다. 버튼 자체에
   이미 hover/focus 시 배경색 변화가 있으므로, 이 버튼에서는 기본
   outline 대신 남색 계열의 은은한 box-shadow로 대체해 키보드
   포커스 표시는 유지하면서 노란 테두리만 없앱니다. */
.edu-plan-close-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 23, 63, 0.35);
}

@media (max-width: 640px) {
  .edu-plan-overlay {
    padding: var(--space-2);
    /* 세로 중앙 정렬(align-items: center)은 팝업이 화면보다 커지면
       위쪽부터 화면 밖으로 밀려나고, 오버레이를 스크롤해도 그
       잘린 위쪽 부분은 끝까지 올라가 볼 수 없는 문제가 있습니다
       (flex 중앙 정렬의 대표적인 함정). 모바일에서는 위에서부터
       배치해 팝업의 맨 위(닫기 버튼 포함)가 항상 스크롤로 닿을 수
       있게 합니다. */
    align-items: flex-start;
  }
  .edu-plan-modal {
    max-height: 96vh;
    margin-block: 0;
  }
  .edu-plan-modal__scroll {
    padding: var(--space-4) var(--space-3) var(--space-3);
  }
  .edu-plan-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: var(--space-7);
  }
  .edu-plan-discount {
    left: var(--space-3);
    text-align: center;
    font-size: 0.8rem;
  }
  .edu-plan-logos {
    justify-content: center;
  }
  .edu-plan-logo {
    width: 57.6px;
    height: 57.6px;
  }
  .edu-plan-titleblock h2 {
    font-size: 1.2rem;
  }
  .edu-plan-footer {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-3);
  }
  .edu-plan-hide-today {
    font-size: 0.85rem;
  }
  .edu-plan-hide-today,
  .edu-plan-close-btn {
    min-height: 44px;
  }
  .edu-plan-close-btn {
    width: 100%;
  }
}

/* ============================================================
   인증서비스(02/*.html) 공통 컴포넌트
   - 인증효과 2열 체크리스트 / 인증절차(상세 5단계, 간이 10단계)
   - 기존 이미지 미교체 안내용 placeholder는 .text-pending(기존) 재사용
   ============================================================ */

/* ---- 인증효과 2열 체크리스트 ---- */
.effect-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
}

.effect-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.98rem;
  line-height: 1.6;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.effect-checklist li::before {
  content: "\2713";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 0.1em;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
  background: var(--scheme-text, var(--color-primary));
}

.effect-checklist li:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(20, 23, 63, 0.10);
  background: var(--color-bg);
  border-color: var(--scheme-border, var(--color-border));
}

@media (max-width: 640px) {
  .effect-checklist {
    grid-template-columns: 1fr;
  }
}

/* ---- 인증절차: 상세 단계형(설명 포함, 02/01~02/03) ---- */
.cert-process {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cert-process__step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: var(--color-bg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.cert-process__step:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(20, 23, 63, 0.10);
  border-color: var(--scheme-border, var(--color-border));
}

.cert-process__step-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cert-process__step-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.92rem;
  background: var(--scheme-bg, var(--color-primary-light));
  color: var(--scheme-text, var(--color-primary));
  border: 1px solid var(--scheme-border, var(--color-border));
}

.cert-process__step-title {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--scheme-text, var(--color-navy));
}

.cert-process__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cert-process__list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--color-text);
}

.cert-process__list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

/* ---- 인증절차: 전체 단계형(라벨+설명, 02/06)
   - 원본 홈페이지 절차 다이어그램(세로 플로우)을 이미지가 아닌
     실제 텍스트/HTML로 재현합니다(반응형·접근성·검색엔진 노출
     확보). 마지막 단계(사후관리)만 원본과 동일하게 강조 색상
     (--color-accent-orange)을 사용합니다. ---- */
.cert-flow {
  display: flex;
  flex-direction: column;
}

.cert-flow__step {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: var(--space-5);
  align-items: center;
  position: relative;
  padding-block: var(--space-2);
}

.cert-flow__step:not(:last-child) {
  margin-bottom: var(--space-5);
}

.cert-flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100px;
  bottom: calc(var(--space-5) * -1 + 4px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 11px solid var(--color-border);
}

.cert-flow__label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--scheme-text, var(--color-primary)), var(--color-primary-dark));
  color: #fff;
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.3;
  min-height: 56px;
  box-shadow: 0 8px 18px rgba(20, 23, 63, 0.12);
}

.cert-flow__step--start .cert-flow__label {
  background: linear-gradient(135deg, var(--color-accent-sky), #1f8fc0);
  box-shadow: 0 8px 18px rgba(41, 171, 226, 0.28);
}

.cert-flow__step--final .cert-flow__label {
  background: linear-gradient(135deg, var(--color-accent-orange), #d98a12);
  box-shadow: 0 8px 18px rgba(245, 166, 35, 0.28);
}

.cert-flow__desc p {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.75;
  color: var(--color-text);
}

.cert-flow__desc p + p {
  margin-top: var(--space-1);
}

.cert-flow__desc p.cert-flow__note {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .cert-flow__step {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }

  .cert-flow__step:not(:last-child)::after {
    left: 50%;
  }

  .cert-flow__label {
    min-height: 0;
  }
}

/* ---- 인증절차: 간이 단계형(라벨만, 02/06) ---- */
.mini-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.mini-flow__step {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.mini-flow__step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(20, 23, 63, 0.10);
  background: var(--scheme-bg, var(--color-primary-light));
  border-color: var(--scheme-text, var(--color-primary));
}

.mini-flow__arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .mini-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .mini-flow__step {
    justify-content: center;
    text-align: center;
  }

  .mini-flow__arrow {
    align-self: center;
    transform: rotate(90deg);
  }
}

/* ---- 기존 이미지 자리표시(다이어그램 등, 반응형) ---- */
.diagram-figure {
  margin: 0;
}

.diagram-figure img {
  display: block;
  width: 100%;
  max-width: 860px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 26px rgba(20, 23, 63, 0.10);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.diagram-figure img:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(20, 23, 63, 0.16);
}

.diagram-figure figcaption {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ---- 표 가로 스크롤 래퍼(02/05 인증비용 표 등, 모바일 대응) ---- */
.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table td:first-child {
  background: var(--color-bg-alt);
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
}

/* ---- 안내/고지 박스(출처 명시, 확인 필요 안내, 자료 공백 안내 등) ---- */
.info-note {
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.info-note strong {
  color: var(--color-navy);
}

.info-note--gap {
  border-left-color: var(--color-border);
}

/* ============================================================
   인증서비스 스킴 탭(ISO 9001·14001·45001·22000 전환 탭)
   - 02/01~06.html 본문 상단에 배치. body의 iso-scheme--XXXX
     클래스가 지정한 --scheme-text/--scheme-bg 변수를 그대로
     재사용하므로, 기존 스킴별 색상 체계와 항상 일치합니다.
   - 스킴이 추가될 때는 .scheme-tabs 안에 <a> 한 줄만 추가하면
     grid가 자동으로 배치를 재계산합니다(수동 줄 수 계산 불필요).
   ============================================================ */
.scheme-tabs-wrap {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  margin-bottom: var(--space-5);
}

.scheme-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.scheme-tabs__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.92rem;
  text-align: center;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.scheme-tabs__link:hover,
.scheme-tabs__link:focus-visible {
  color: var(--color-navy);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(20, 23, 63, 0.10);
}

.scheme-tabs__link.is-current {
  color: #fff;
  background: var(--scheme-text, var(--color-primary));
  border-color: var(--scheme-text, var(--color-primary));
  box-shadow: 0 8px 18px rgba(20, 23, 63, 0.18);
}

.scheme-tabs__link.is-current:hover,
.scheme-tabs__link.is-current:focus-visible {
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .scheme-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .scheme-tabs__link {
    flex: 0 0 auto;
  }
}

/* ============================================================
   TOP 바로가기 버튼(공통 컴포넌트, 전 페이지 동일 사용)
   - 기본 hidden 속성으로 숨겨져 있다가 js/common.js가 일정
     스크롤 이후 hidden을 해제합니다. JS가 없으면 계속 숨김
     상태이지만 페이지 이용 자체에는 영향이 없습니다.
   ============================================================ */
.top-button {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(20, 23, 63, 0.28);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.top-button:hover {
  background: var(--color-primary);
}

.top-button:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

.top-button[hidden] {
  display: none;
}

.top-button__arrow {
  font-size: 1.05rem;
  line-height: 1;
}

.top-button__label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

@media (max-width: 480px) {
  .top-button {
    right: var(--space-4);
    bottom: var(--space-4);
    width: 46px;
    height: 46px;
  }
}