/*
  과정 상세 전용 보정 — style.css **뒤에** 실립니다.

  왜 별도 파일인가
  ----------------
  style.css 는 퍼블리싱 산출물이라 확정 디자인 원본과 같아야 합니다(AGENTS 규칙).
  건드리지 않고 이후에 정해진 것만 여기 모읍니다. korhrd 쪽 overrides.css 와 같은 방식입니다.

  2026-08-12 — style.css 를 확정본으로 교체하면서 이 파일이 크게 줄었습니다.
  전에는 이 번들이 확정본보다 옛 판이라 헤더 고정·햄버거 위치·--header-h 같은
  것들을 여기서 되살려 놓고 있었는데, 확정본에는 전부 들어 있습니다.
  남은 셋은 전달본에 없는, LMS 에서 정한 것입니다.
*/

/* 헤더에 그림자 없음 (2026-08-10, 디자인 요청)
   다른 화면은 스크롤하면 헤더에 그림자를 넣어 떠 있는 걸 알립니다(.is-stuck).
   이 화면은 헤더 바로 아래에 탭바가 붙어 있어 그 그림자가 둘 사이에 끼어
   경계가 두 겹으로 보입니다. 탭바가 이미 border-bottom 으로 아래를 긋고
   있으므로 헤더 그림자는 넣지 않습니다. */
.header.is-stuck { box-shadow: none }

/* 탭바가 헤더를 따라 움직입니다 (2026-08-10, 디자인 요청)
   전달본은 .dtabs{ top:var(--header-h) } 로 헤더 아래에 세워 두기만 합니다.
   모바일에서 헤더가 오르내리면 그 사이가 벌어지므로, 헤더와 같은 속도로
   따라 움직이게 합니다(헤더 transform 과 같은 .25s). */
.dtabs { transition: top .25s ease }

@media (max-width: 560px) {
  /* 헤더가 숨은 동안에는 탭바가 그 자리를 대신 차지해 화면 맨 위에 붙습니다.
     그러지 않으면 헤더가 빠진 56px 만큼 빈 띠가 남아 탭바가 떠 보입니다.
     헤더가 다시 내려오면 탭바도 그만큼 밀려 내려옵니다.
     헤더가 실제로 숨는 건 이 폭에서뿐이라 여기에만 둡니다. */
  .header.is-hidden ~ #main .dtabs { top: 0 }
}

/* 자격증 카드 로고가 흰 상자에 꽉 차 보이던 것 (2026-08-12, 디자인 요청)

   전달본은 넓은 화면에서 주무부처 로고의 높이를 62px 로 잡습니다
   (.dcert__logo--gov img{ height:62px }). 150px 상자의 41% 라 여백이 넉넉합니다.
   그런데 560px 아래에서는 가로로 긴 보건복지부 로고가 넘치지 않게
   height:auto + max-width:100% 로 바꾸는데, 교육부처럼 2.5:1 로고는
   좌우 끝까지 닿아 버립니다(실측 100% x 80%).

   좁은 화면에서도 넓은 화면과 비슷한 여백이 남도록 가로·세로를 함께 묶습니다.
   비율이 제각각인 부처 로고를 폭 하나로만 재면 세로로 긴 것이 너무 커지고,
   높이 하나로만 재면 가로로 긴 것이 넘칩니다.

   주무부처 칸에만 겁니다. 옆 칸(한국직업능력연구원)은 전달본 값(82%)이
   그대로 맞다고 확인받았습니다. */
@media (max-width: 560px) {
  .dcert__logo--gov img { max-width: 72%; max-height: 66% }
}

/* 교수 약력 목록을 왼쪽 정렬로 (2026-08-12, 디자인 요청)
   전달본은 560px 아래에서 교수 카드를 통째로 가운데 정렬합니다
   (.dprof{ text-align:center } · .dprof__list li{ justify-content:center }).
   사진·이름은 가운데가 맞지만, 약력은 열 줄 넘게 이어지는 목록이라 체크 표시가
   줄마다 다른 자리에서 시작해 읽는 눈이 계속 흔들립니다. 목록만 왼쪽으로 세웁니다.
   (여러 줄로 접히는 항목도 있어 text-align 까지 함께 되돌립니다 — 안 그러면
    두 번째 줄만 가운데로 갑니다) */
@media (max-width: 560px) {
  .dprof__list li { justify-content: flex-start; text-align: left }
}