@charset "UTF-8";
/*! 모두세이프티 style.css — scss/ 에서 컴파일된 산출물입니다.
    ⚠ 이 파일을 직접 수정하지 마세요. scss/ 를 고치고 재컴파일하세요.
    빌드: npx sass scss/style.scss:css/style.css --style=expanded --no-source-map */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css");
/* ---------- 0. reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 스크롤바 자리 항상 예약 — 내용 길이가 바뀌어 스크롤바가 나타나도 가로폭이 안 흔들린다
   (아코디언 펼침/접힘 등). 미지원 브라우저는 기존 동작으로 폴백. */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1c1f2b;
  background: #fff;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* sticky footer — 내용 짧아도 푸터를 뷰포트 하단에 */
}

#content {
  flex: 1 0 auto;
} /* 본문이 남는 공간을 밀어내 푸터를 바닥에 붙인다 */
img {
  max-width: 100%;
  border: 0;
  vertical-align: middle;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input, select, textarea {
  font: inherit;
  color: inherit;
}

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

th, td {
  text-align: left;
}

:root {
  --navy: #0b1140;
  --navy-2: #151d5c;
  --navy-3: #23306f;
  --orange: #ff9553;
  --orange-2: #ffb072;
  --orange-ink: #c85a1e;
  --ink: #1f1e1c;
  --text: #4a4844;
  --gray: #636363;
  --muted: #a8a4a0;
  --bg: #f9f9f8;
  --surface: #fff;
  --surface-2: #f7f6f4;
  --surface-3: #f2f1ef;
  --line: #e8e6e3;
  --line-2: #f0efec;
  --success: #2a8f52;
  --success-bg: #e6f4ea;
  --danger: #d1433b;
  --danger-bg: #fbe7e5;
  --warn: #b4700c;
  --warn-bg: #fdf3e3;
  --accent-bg: #ffead8;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 99px;
  --shadow: 0 4px 20px rgba(31, 24, 12, .07);
  --shadow-lg: 0 14px 40px rgba(31, 24, 12, .12);
}

.inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 40px);
} /* 콘텐츠 폭 (헤더·본문 공용) · gnb__sub 와 값 일치 */
/* ── 콘텐츠 폭 스케일 (축1 = 내용의 양) ────────────────────────────────
   폭은 '페이지/메뉴'가 아니라 '안에 든 내용의 양'으로 고른다.
   제목(sec__head/page-head)과 본문은 반드시 같은 --x 에 담아 왼쪽선을 맞춘다(규칙0).
     기본 .inner   1400  꽉  — 여러 열 카드·대시보드 (메인·수강신청·내 강의실)
     --content     1080  넓게 — 목록·문서·상세글·비중 큰 폼 (지원센터·약관·견적·단체)
     --form         640  중간 — 표준 폼·결제/결과·수료증 (회원가입·약관동의·문의작성)
     --narrow       480  좁게 — 필드 1~2개 (아이디/비번 찾기 전용)
   ※ 룩(정체성)은 별도 축 — 계정(로그인·가입·찾기)/결제·결과 그룹은 폭과 무관하게 룩으로 통일.
     로그인 스플릿 등 독자 레이아웃은 이 스케일 밖. 자세한 규칙은 컴포넌트.md 참고. */
.inner--content {
  max-width: 1080px;
}

.inner--form {
  max-width: 640px;
}

.inner--narrow {
  max-width: 480px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 0;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.16s ease;
  text-decoration: none;
}

.btn--lg {
  height: 54px;
  padding: 0 32px;
  font-size: 16px;
}

.btn--sm {
  height: 40px;
  padding: 0 16px;
  font-size: 13.5px;
}

.btn--xs {
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 8px;
}

.btn--full {
  width: 100%;
}

.btn__flag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.16);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.6;
}

.btn--field {
  border-radius: 8px;
}

.btn--primary {
  background-color: #ff9553;
  color: #fff;
}

.btn--primary:hover {
  background-color: #f57f38;
  transform: translateY(-1px);
}

.btn--navy {
  background-color: #0b1140;
  color: #fff;
}

.btn--navy:hover {
  background-color: #151d5c;
  transform: translateY(-1px);
}

.btn--line {
  background-color: #fff;
  color: #0b1140;
  border-color: #d8d5d1;
}

.btn--line:hover {
  border-color: #0b1140;
}

.btn--white {
  background-color: #fff;
  color: #0b1140;
}

.btn--white:hover {
  background-color: #f7f6f4;
}

.btn--gray {
  background-color: #f2f1ef;
  color: #636363;
  border-color: #e8e6e3;
}

.btn--gray:hover {
  background-color: #e8e6e3;
  color: #4a4844;
}

.btn--outline {
  background-color: transparent;
  color: #0b1140;
  border-color: #0b1140;
}

.btn--outline:hover {
  background-color: #0b1140;
  color: #fff;
}

.btn--ghost {
  background-color: rgba(255, 255, 255, 0.13);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.22);
}

.btn:disabled,
.btn.is-disabled {
  background-color: #e8e6e3;
  color: #a8a4a0;
  box-shadow: none;
  border-color: transparent;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 149, 83, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}
/* ---------- 2. 상단 유틸 ---------- */
.utilbar {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}

.utilbar .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
}

.utilbar b {
  color: #fff;
  font-weight: 700;
}

.utilbar__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.utilbar__nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.utilbar__nav a:hover {
  color: #fff;
  text-decoration: underline;
}

/* 고객센터 = 아웃라인 알약(navy 위에서 잘 보이게) */
.utilbar__nav .utilbar__cs {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  line-height: 1;
}

.utilbar__nav .utilbar__cs:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.utilbar__me {
  margin-right: 4px;
}

.utilbar__brand img {
  height: 17px;
  display: block;
} /* 모두세이프티(작게·화이트) */
.utilbar__sep {
  width: 1px;
  height: 11px;
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- 3. 헤더 / GNB ---------- */
/* 통헤더 래퍼 — 띠+메인 함께 sticky, 스크롤 시 살짝 축소(스왑 없음·띠 유지) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(31, 24, 12, 0.07);
}

.header {
  position: relative;
  background: #fff;
} /* 홈=최상단 보더 없음(히어로 위·스크롤 시 그림자) */
body.is-sub .header {
  border-bottom: 1px solid var(--line);
} /* 서브=밝은 콘텐츠 위라 항상 보더로 구분 */
.header__inner {
  display: flex;
  align-items: center;
  height: 78px;
  transition: height 0.25s ease;
}

/* 로고는 절대 줄어들면 안 된다. flex 기본값이 shrink:1 이라 메뉴가 자리를 다 먹으면
   로고 박스가 4px 까지 눌리고, 그 안의 이미지가 박스를 넘쳐 메뉴와 겹쳐 보였다.
   (태블릿 폭 861~1080px 에서만 나던 증상 — 데스크톱에서는 자리가 남아 안 보인다) */
.header__logo {
  flex: none;
}

.header__logo img {
  height: 24px;
  display: block;
  transition: height 0.25s ease;
} /* 모두교육그룹 */
/* 스크롤 축소 — 메인 높이·로고 축소(띠는 그대로).
   **데스크톱 전용이다.** 모바일(≤860)에서는 메뉴가 가로줄이 아니라 세로 드로어라
   축소할 헤더 여백도, 세로 중앙을 맞출 line-height 도 의미가 없다.

   미디어쿼리 없이 두었을 때 실제로 난 사고:
   드로어 항목은 _responsive.scss 가 `line-height:1; padding:18px 20px` 로 잡는데,
   여기 규칙이 `.site-header.is-scrolled .gnb__item > a` 라 셀렉터가 더 구체적이다
   (클래스 3 + 요소 1 vs 클래스 1 + 요소 1). 그래서 **모바일에서 조금이라도 스크롤한 뒤
   햄버거를 열면** 항목마다 line-height 59px 이 얹혀 줄 간격이 벌어졌다.
   뒤에 오는 파일이라고 이기는 게 아니다 — 구체성이 먼저다.

   그래서 폭으로 잘라 데스크톱에만 건다. 모바일 헤더는 62px 로 고정이고,
   스크롤해도 높이가 흔들리지 않는다(예전에는 62→60px 로 2px 씩 튀었다). */
@media (min-width: 861px) {
  .site-header.is-scrolled .header__inner {
    height: 60px;
  }
  .site-header.is-scrolled .header__logo img {
    height: 20px;
  }
  .site-header.is-scrolled .gnb__item > a {
    line-height: 59px;
  } /* 메뉴 텍스트도 축소 헤더에 세로 중앙 */
}
.gnb {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
} /* 메인 메뉴 가운데 정렬 */
.gnb__list {
  display: flex;
}

.gnb__item > a {
  display: block;
  padding: 0 26px;
  line-height: 77px;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: line-height 0.25s ease, color 0.15s ease;
}

.gnb__item:hover > a, .gnb__item.on > a {
  color: var(--orange);
} /* 활성=폰트만 주황(밑줄 없음) */
.gnb__sub {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: none;
  padding: 22px 0;
}

.gnb__item:hover .gnb__sub {
  display: block;
}

.gnb__sub ul {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 40px) 0 240px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
} /* .inner 와 폭 일치 */
.gnb__sub a {
  font-size: 15px;
  color: #444a5e;
  padding: 6px 0;
  display: block;
}

.gnb__sub a:hover {
  color: var(--orange);
  font-weight: 700;
}

.header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  position: relative;
}

.header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 5px auto;
  transition: 0.2s;
}

/* 내 강의실 = 메뉴와 분리된 우측 영역 (로고 | 메뉴 | 내강의실) */
.header__account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 22px;
}

.btn-classroom {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--orange);
  border: 1.5px solid transparent; /* 아웃라인 변형과 크기 정렬 */
  border-radius: 10px;
  padding: 9px 34px;
  text-decoration: none;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-classroom svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-classroom:hover {
  filter: brightness(0.96);
}

/* 로그인(비로그인 상태) = 오렌지 보더 + 검정계열 텍스트·아이콘(가독) → 호버 시 채움 */
.btn-classroom--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--orange);
}

.btn-classroom--outline:hover {
  background: var(--orange);
  color: #fff;
  filter: none;
}

@media (max-width: 860px) {
  .header__account {
    display: none;
  }
} /* 모바일은 유틸바·햄버거가 담당 */
/* ---------- 4. 메인 히어로 ---------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(120deg, #0b1140 0%, #151d5c 55%, #23306f 100%);
}

.hero::after {
  content: "";
  position: absolute;
  right: -180px;
  top: -120px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle at 50% 50%, rgba(242, 101, 34, 0.38), rgba(242, 101, 34, 0) 62%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding: 84px 20px 76px;
}

.hero__badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin-bottom: 20px;
}

.hero__tit {
  font-size: 46px;
  line-height: 1.28;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.hero__tit em {
  font-style: normal;
  color: var(--orange-2);
}

.hero__desc {
  margin-top: 18px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.hero__btns {
  margin-top: 34px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero__stat {
  margin-top: 52px;
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}

.hero__stat div b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--orange-2);
}

.hero__stat div span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- 5. 섹션 공통 ---------- */
.sec {
  padding: clamp(48px, 6vw, 72px) 0;
}

.sec--bg {
  background: var(--bg);
}

.sec--closing {
  background: #f9f9f8;
}

.sec__head {
  text-align: left;
  margin-bottom: 40px;
}

.sec__head--center {
  text-align: center;
}

.sec__eyebrow {
  display: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #ff9553;
}

.is-home .sec__eyebrow {
  display: block;
}

.is-home .sec__tit {
  margin-top: 12px;
}

.sec__tit {
  margin-top: 8px;
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}

.is-home .sec {
  padding: clamp(48px, 7vw, 104px) 0;
}

.is-home .sec__head {
  margin-bottom: clamp(32px, 4.5vw, 60px);
}

.is-home .sec__tit,
.is-home .edu-methods__tit {
  font-size: clamp(24px, 3.6vw, 34px);
}

.is-home .sec__head--sub {
  margin-bottom: clamp(22px, 3vw, 40px);
}

.is-home .sec__head--sub .sec__tit {
  font-size: 22px;
}

.sec__head--center {
  text-align: center;
}

.is-home .sec__head--center .sec__tit {
  margin-top: 0;
}

.is-home .sec--closing {
  padding-top: clamp(36px, 5vw, 68px);
  padding-bottom: clamp(36px, 5vw, 68px);
}

.is-home .sec--apply {
  padding-top: clamp(24px, 3vw, 44px);
}

.is-home .sec--closing-start {
  padding-top: clamp(52px, 7vw, 92px);
}

.sec__tit--line {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e8e6e3;
}

.sec__desc {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: #636363;
}

.is-home .sec__desc {
  font-size: 18px;
}

.sec__more {
  display: block;
  text-align: center;
  margin-top: 48px;
}

.sec__more .btn {
  min-width: min(320px, 100%);
}

/* 본문 시작 제목 (히어로 없는 단순 페이지 — 공지·자료·FAQ 등)
   서브헤더 h1(학습지원센터) 아래 "페이지 타이틀" = h2 위계.
   보더 없이 크기·굵기·여백만으로 위계 부여(guide-spec__title h3 과 분리). */
.page-head {
  margin-bottom: clamp(40px, 6vw, 68px);
  text-align: left;
}
.page-head__eyebrow {
  display: none;
}
.page-head__tit {
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  max-width: 26em;
  margin: 0;
}
.page-head__desc {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

/* ---------- 6. 교육대상 카드 → pages/_home-targets.scss (이미지 아코디언, C) 로 이관 ---------- */
/* ---------- 7. 교육방식 → pages/_home-types.scss (가로 세그먼트 바, C) 로 이관 ---------- */
/* ---------- 8. 과정 카드 → components/_course-card.scss (C 토큰) 로 이관 ---------- */
/* ---------- 그리드 ---------- */
.courses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}

/* ---------- 카드 (보더리스) ---------- */
.course-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.course-card:hover .course-card__thumb-img {
  transform: scale(1.07);
}

.course-card:hover .course-card__thumb {
  box-shadow: 0 4px 20px rgba(31, 24, 12, 0.07);
}

.course-card:hover .course-card__tit {
  color: #0b1140;
}

/* ---------- 썸네일 (라운드 프레임 · 은은한 그림자 · 내부 이미지 줌) ---------- */
.course-card__thumb {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 2px rgba(31, 24, 12, 0.05);
  transition: box-shadow 0.25s ease;
}

.course-card__thumb-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumb-navy {
  background: linear-gradient(135deg, #0b1140, #23306f);
}

.thumb-orange {
  background: linear-gradient(135deg, #c85a1e, #ff9553);
}

.thumb-blue {
  background: linear-gradient(135deg, #1e3a8a, #3b62d4);
}

.thumb-teal {
  background: linear-gradient(135deg, #0f5e63, #17a2a8);
}

.thumb-purple {
  background: linear-gradient(135deg, #4c1d95, #7c4ddb);
}

.course-card__best {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background-color: #ff9553;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

/* ---------- 본문 (한화 Tech Explained식: 메타 한줄 · 제목 · 가격 · 해시태그) ---------- */
.course-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 4px 0;
}

.course-card__meta {
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.course-card__cat {
  color: #ff9553;
  font-weight: 700;
}

.course-card__sep {
  margin: 0 4px;
  color: #a8a4a0;
}

.course-card__method {
  color: #636363;
}

.course-card__tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.45;
  color: #1f1e1c;
  margin-top: 4px;
  min-height: 50px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.course-card__foot {
  display: contents;
}

.course-card__price {
  margin-top: 8px;
}

.course-card__price b {
  font-size: 22px;
  font-weight: 700;
  color: #0b1140;
}

.course-card__price span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
  margin-left: 2px;
}

.course-card__tags {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-card__tags .tag {
  display: inline-flex;
  align-items: center;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  padding: 4px 12px;
  border-radius: 99px;
  border: 0;
  background: rgba(31, 30, 28, 0.07);
  color: #636363;
}

/* 시간 태그 = 이수시간별 구분 — 뮤트한 4색 온도 램프(짧음=쿨/가벼움 → 긺=웜/무거움).
   40대+ 가독성 위해 명도 대신 색상(hue)으로 구분하되, 배경은 옅은 소프트틴트로 눌러 어지러움 최소화.
   course-card·mix-card 공통. `.tag.tag--hN`(0,3,0) 로 기본 태그(0,2,0)를 로드순서 무관하게 이김. */
.course-card__tags .tag.tag--h1, .mix-card__tags .tag.tag--h1 {
  background-color: #e6f4ea;
  color: #2a8f52;
}

.course-card__tags .tag.tag--h2, .mix-card__tags .tag.tag--h2 {
  background-color: #ecedf3;
  color: #23306f;
}

.course-card__tags .tag.tag--h3, .mix-card__tags .tag.tag--h3 {
  background-color: #fdf3e3;
  color: #b4700c;
}

.course-card__tags .tag.tag--h4, .mix-card__tags .tag.tag--h4 {
  background-color: #ffead8;
  color: #c85a1e;
}

/* (구) .sec--bg 안 '테두리 박스' 변형 → 제거(2026-08-25).
   옅은 회색 밴드(#f9f9f8)에선 보더리스 카드도 안 묻힘(수강신청 추천 밴드에서 검증).
   → course.php 관련과정 등 밴드 안 과정카드도 목록과 동일한 보더리스로 통일. */
/* ==========================================================================
   대표과정 가로 캐러셀 — 제목 좌 + 화살표 우, 카드 한 줄로 옆으로 흐름
   ========================================================================== */
.sec__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.carousel-nav {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.carousel-arrow {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e8e6e3;
  background: transparent;
  color: #636363;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.carousel-arrow:hover {
  border-color: #1f1e1c;
  color: #1f1e1c;
}
.carousel-arrow:disabled {
  opacity: 0.28;
  cursor: default;
  border-color: #e8e6e3;
  color: #636363;
}

.course-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.course-carousel::-webkit-scrollbar {
  height: 0;
}
.course-carousel {
  margin-right: calc(-1 * (50vw - 50%));
  padding: 0 calc(50vw - 50%) 8px 0;
}
.course-carousel > * {
  flex: 0 0 340px;
  scroll-snap-align: start;
}

.is-home .course-carousel {
  gap: 32px;
}

@media (min-width: 861px) {
  .sec--reco .course-carousel {
    margin-right: 0;
    padding-right: 0;
  }
  .sec--reco .course-carousel > * {
    flex: 0 0 calc((100% - 24px * 3) / 4);
  }
}
@media (max-width: 860px) {
  .sec__head--row {
    align-items: flex-start;
  }
  .carousel-arrow {
    width: 40px;
    height: 40px;
  }
  .course-carousel > * {
    flex-basis: 80vw;
  }
}
/* 모바일(≤860) = 유튜브식 가로 리스트 카드(썸네일 좌 · 텍스트 우).
   세로 스크롤 길이↓ · 한 화면에 여러 과정. (그리드는 _responsive 에서 1열) */
@media (max-width: 860px) {
  .courses {
    gap: 0;
  }
  .course-card {
    padding: 20px 0;
    border-bottom: 1px solid #e8e6e3;
  }
  .course-card:last-child {
    border-bottom: 0;
  }
  .course-card {
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
  }
  .course-card__thumb {
    flex: 0 0 36%;
    max-width: 150px;
    height: auto;
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 104px;
    font-size: 13px;
  }
  .course-card__body {
    padding: 0;
    min-width: 0;
  }
  .course-card__meta {
    font-size: 13px;
  }
  .course-card__tit {
    min-height: 0;
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .course-card__foot {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
  }
  .course-card__tags {
    order: 1;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  .course-card__price {
    order: 2;
    flex: none;
    margin: 0;
    text-align: right;
    white-space: nowrap;
  }
  .course-card__price b {
    font-size: 18px;
  }
  .course-card__price span {
    font-size: 13px;
  }
  .course-card__best {
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    font-size: 10px;
  }
  .course-card:hover .course-card__thumb-img {
    transform: none;
  }
}
.subhead {
  background-color: #fff;
  padding: clamp(44px, 5.5vw, 64px) 0 48px;
  text-align: center;
  border-bottom: 1px solid #e8e6e3;
}
.subhead .inner {
  max-width: 900px;
}

.subtabs {
  background-color: #fff;
  border-bottom: 1px solid #e8e6e3;
}

.subtabs .tabs {
  border-bottom: 0;
  margin-bottom: 0;
}

.subhead:has(+ .subtabs) {
  border-bottom: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 15px;
  color: #a8a4a0;
  margin-bottom: 28px;
}
.breadcrumb span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.breadcrumb span:first-child::before {
  content: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='15'%20height='15'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a8a4a0'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2012%203l9%207.5'/%3E%3Cpath%20d='M5%209.5V20a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1V9.5'/%3E%3C/svg%3E");
  display: inline-flex;
  line-height: 0;
}
.breadcrumb span::after {
  content: "›";
  margin: 0 8px;
  color: #d8d5d1;
}
.breadcrumb span:last-child {
  color: #636363;
}
.breadcrumb span:last-child::after {
  content: "";
  margin: 0;
}
.breadcrumb svg {
  color: #a8a4a0;
}

.subhead__tit {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.subhead__desc {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: #636363;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.subhead__desc a {
  color: #0b1140;
  text-decoration: underline;
}

/* ---------- 10. 스위처 — 활성색은 주황으로 통일. 룩은 둘: 알약(탭·칩) / 연결 트랙(세그) ---------- */
/* 스위처 룩 토글 — 이 값만 바꾸면 전체 탭이 라인↔알약으로 전환됨(마크업 그대로) */
.tabs, .chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tabs a, .chips a {
  display: inline-flex;
  align-items: center;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* 하단 라인형 — 밑줄 탭 · 활성=주황 밑줄 · 하단 베이스라인 */
.tabs, .chips {
  gap: 32px;
  margin-bottom: 26px;
  border-bottom: 1px solid #e8e6e3;
}

.tabs a, .chips a {
  position: relative;
  height: 56px;
  padding: 0 12px;
  min-width: 108px;
  justify-content: center;
  color: #a8a4a0;
  font-size: 20px;
  font-weight: 600;
  transition: color 0.15s;
}

.tabs a::after, .chips a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: transparent;
  transition: background-color 0.15s;
}

.tabs a:hover, .chips a:hover {
  color: #4a4844;
}

.tabs a.on, .chips a.on {
  color: #ff9553;
  font-weight: 700;
}

.tabs a.on::after, .chips a.on::after {
  background: #ff9553;
}

@media (max-width: 860px) {
  .tabs, .chips {
    gap: 24px;
  }
  .tabs a, .chips a {
    height: 48px;
    font-size: 17px;
    min-width: 88px;
  }
}
/* subtabs(서브페이지 상단 내비) = hover 시 동그란 점(슬근하게 떠오름) → 활성 시 선으로 퍼짐 */
.subtabs .tabs a::after {
  left: 50%;
  right: auto;
  bottom: -6px;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #d8d5d1;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(5px) scale(0.4);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.35, 1);
}

.subtabs .tabs a:not(.on):hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.subtabs .tabs a.on::after {
  opacity: 1;
  bottom: -1px;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: #ff9553;
  transform: translateX(-50%);
  animation: subtab-dot-to-line 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes subtab-dot-to-line {
  from {
    width: 6px;
    height: 6px;
    border-radius: 99px;
  }
  to {
    width: 100%;
    height: 3px;
    border-radius: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .subtabs .tabs a::after {
    transition: none;
  }
  .subtabs .tabs a.on::after {
    animation: none;
  }
}
/* 세그먼트 (.seg) — 연결 트랙 · 활성=네이비(세컨더리, 오렌지 CTA와 구분). 2~3개 배타 토글(find 등)
   알약(탭·칩)보다 한 톤 작게 = 컴팩트한 토글 느낌 */
.seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 99px;
  background-color: #f2f1ef;
  border: 1px solid #e8e6e3;
}

.seg a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border-radius: 99px;
  color: #a8a4a0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.seg a:hover {
  color: #4a4844;
}

.seg a.on {
  background-color: #0b1140;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(31, 24, 12, 0.05);
}

.tabs--sub a.on {
  background: var(--orange);
  border-color: var(--orange);
}

/* 섹션 내부 콘텐츠 전환 = 밑줄 + 네이비, 전체탭(.tabs 20·오렌지)보다 작게(섹션 위계 18). find·이수기준 등. */
.tabs--navy a {
  height: 48px;
  min-width: 0;
  font-size: 18px;
}

.tabs--navy a.on {
  color: #0b1140;
}

.tabs--navy a.on::after {
  background: #0b1140;
}

@media (max-width: 860px) {
  .tabs--navy a {
    height: 44px;
    font-size: 16px;
  }
}
/* 과정 분류 필터 — 흰 박스, 라벨 컬럼만 회색. 항목=텍스트형·활성만 주황. 참고 디자인(2026-08-21) */
.filter-title {
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  margin-bottom: 40px;
}

/* 필터 패널 = 네이비(세컨더리) 아웃라인으로 "필터 구역"임을 표시. 배경색 없음(흰 바탕). */
/* 교육대상 = 폴더 탭. 활성 탭이 네이비 보더로 아래 패널과 이어짐(연결된 인덱스).
   비활성 = 텍스트만. 탭을 살짝 인셋해 패널 라운드 넘겨 평평한 윗변에 연결. */
.target-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: flex-end;
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
}

.target-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  padding: 0 32px;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  background: transparent;
  color: #636363;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.target-tabs__tab::before {
  content: "";
  position: absolute;
  inset: 8px 4px;
  border-radius: 8px;
  background: transparent;
  transition: background-color 0.15s;
  z-index: -1;
}
.target-tabs__tab:hover::before {
  background-color: #f2f1ef;
}
.target-tabs__tab:hover {
  color: #1f1e1c;
}
.target-tabs__tab.on {
  background-color: #fff;
  border-color: #d8d5d1;
  color: #ff9553;
  font-weight: 700;
}

@media (max-width: 860px) {
  .target-tabs__tab {
    height: 48px;
    padding: 0 20px;
    font-size: 16px;
  }
}
/* refine 패널 = 브랜드 보더 박스. 방식·업종은 [라벨 왼쪽 + 칩] 한 줄씩 세로 스택. */
.filter-bar {
  background-color: #fff;
  border: 2px solid #d8d5d1;
  border-radius: 14px;
  padding: 20px 0;
  overflow: hidden;
}

.filter-bar--tl-flush {
  border-top-left-radius: 0;
}

.filter-group {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 28px;
}

.filter-group--search {
  align-items: stretch;
}

.filter-group__label {
  flex: 0 0 4.5em;
  color: #1f1e1c;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #d8d5d1;
  border-radius: 8px;
  background-color: #fff;
  color: #4a4844;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.filter-chip:hover {
  background-color: #ffead8;
  border-color: #ff9553;
  color: #c85a1e;
}

.filter-group--industry .filter-chip:hover {
  background-color: #ecedf3;
  border-color: #0b1140;
  color: #0b1140;
}

/* 축별 활성색 구분(서로 다른 필터군임을 색으로) — 방식=주황 채움 / 업종=네이비 채움.
   기본(방식·폴백)=주황, 업종만 네이비로 오버라이드. */
.filter-chip.on {
  background-color: #ff9553;
  color: #fff;
  border-color: #ff9553;
}
.filter-chip.on:hover {
  background-color: #f57f38;
  border-color: #f57f38;
}

.filter-group--industry .filter-chip.on {
  background-color: #0b1140;
  color: #fff;
  border-color: #0b1140;
}
.filter-group--industry .filter-chip.on:hover {
  background-color: #151d5c;
  border-color: #151d5c;
}

.filter-chip.off {
  border-style: dashed;
  border-color: #e8e6e3;
  background-color: #f7f6f4;
  color: #a8a4a0;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* 과정명 검색 = 박스 하단, 꽉 차게 크게 · 돋보기는 입력창 우측 안쪽 클릭버튼 */
.filter-group--search .searchbox {
  flex: 1;
  margin: 0;
  gap: 8px;
  flex-wrap: nowrap;
  position: relative;
}

.filter-group--search .searchbox__input {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 50px;
  padding: 0 52px 0 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1.5px solid #d8d5d1;
}

.filter-group--search .searchbox__btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #0b1140;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s;
}
.filter-group--search .searchbox__btn:hover {
  background-color: #f2f1ef;
}
.filter-group--search .searchbox__btn svg {
  width: 20px;
  height: 20px;
}

.filter-group--search .searchbox__clear {
  flex: none;
}

/* (레거시) 옛 필터바 가로 행 — courses 는 .filter-group 로 이관. 타 참조 대비 잔존. */
.filter-bar__row {
  display: flex;
  align-items: stretch;
}

.filter-bar__row + .filter-bar__row {
  border-top: 1px solid #e8e6e3;
}

.filter-bar__label {
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f6f4;
  border-right: 1px solid #e8e6e3;
  font-size: 14px;
  font-weight: 700;
  color: #0b1140;
  text-align: center;
  padding: 12px;
}

.filter-bar__row > .tabs, .filter-bar__row > .searchbox {
  flex: 1;
  min-width: 0;
  padding: 16px 20px;
  margin: 0;
}

.filter-bar__search {
  align-items: stretch;
}

/* 필터 항목 = 텍스트형, 활성만 주황 알약 */
.filter-bar .tabs {
  justify-content: flex-start;
  gap: 4px;
}

.filter-bar .tabs a {
  height: 36px;
  padding: 0 16px;
  background: transparent;
  color: #636363;
  font-weight: 600;
  font-size: 14px;
}

.filter-bar .tabs a:hover {
  background: transparent;
  color: #0b1140;
}

.filter-bar .tabs a.on {
  background-color: #ff9553;
  color: #fff;
}

.result-count {
  margin-bottom: 16px;
  font-size: 15px;
  color: #636363;
}

.result-count b {
  color: #ff9553;
  font-weight: 700;
}

/* 결과 섹션 헤더 = 제목(왼쪽) + 건수(오른쪽) 한 줄 */
.sec__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 40px;
}

.sec__head--row .result-count {
  margin: 0;
}

.sec__head--row .sec__more {
  margin-top: 0;
}

.sec__head-meta {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

/* 혼합 추천 = 풀폭 회색 밴드(별개 섹션). 회색은 사이트 공통 .sec--bg 가 담당(통일).
   .sec--reco 는 캐러셀 동작만: 데스크탑=뷰포트 끝까지 흐름 / 모바일=세로 리스트+화살표 숨김. */
@media (max-width: 860px) {
  .sec--reco .carousel-nav {
    display: none;
  }
  .sec--reco .course-carousel {
    flex-direction: column;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .sec--reco .course-carousel > * {
    flex: 1 1 auto;
    width: auto;
  }
}
/* 섹션 간격 규칙 = "아래 섹션의 padding-top"이 소유(위 섹션 padding-bottom 0).
   간격이 한 군데서만 정해져 예측 가능 + 이중 패딩 방지. 값=블록 간격 토큰(반응형). */
.sec--filter {
  padding-bottom: 0;
}

.sec--after-filter {
  padding-top: clamp(40px, 6vw, 68px);
}

.sec--tail {
  padding-top: 40px;
}

.sec--last, .sec--reco {
  padding-bottom: clamp(64px, 9vw, 104px);
}

@media (max-width: 860px) {
  .seg a {
    padding: 0 20px;
    font-size: 15px;
  }
}
/* ---------- 11. 상세 (과정상세 course.php) ---------- */
.detail {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
}

.detail__hero {
  position: relative;
  height: 340px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  padding: 0 32px;
  margin-bottom: 32px;
}

.detail__hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.detail__hero-cap {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.detail h3 {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  margin: 40px 0 16px;
}

.detail h3:first-of-type {
  margin-top: 0;
}

.detail p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: #4a4844;
}

.detail ul.dots {
  margin-top: 12px;
}

.detail ul.dots li {
  position: relative;
  padding-left: 16px;
  color: #4a4844;
  margin-bottom: 8px;
}

.detail ul.dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff9553;
}

/* 표 (법정기준·수강안내·개설회차) = 교육안내 표준 표(.tbl--sch.tbl--card) 룩에 맞춘 라운드 카드 */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  border: 1px solid #e8e6e3;
  box-shadow: 0 1px 2px rgba(31, 24, 12, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.tbl th, .tbl td {
  padding: 16px;
  border-bottom: 1px solid #e8e6e3;
  text-align: left;
  vertical-align: top;
}

.tbl tr:last-child > * {
  border-bottom: 0;
}

.tbl th {
  background-color: #f7f6f4;
  font-weight: 700;
  color: #0b1140;
  width: 160px;
}

.tbl--sch thead th {
  background-color: #0b1140;
  color: #fff;
  font-weight: 700;
  border-bottom: 0;
  text-align: center;
  width: auto;
}

.tbl--sch td {
  text-align: center;
}

.tbl--sch td.left {
  text-align: left;
}

/* 지브라(짝수행 회색) 제거 — 노-지브라 전역 통일(2026-08-27, 제목행 thead만 색). */
.badge-left {
  color: #ff9553;
  font-weight: 700;
}

.badge-full {
  color: #a8a4a0;
  font-weight: 700;
}

/* 우측 구매 박스 (sticky) */
.buybox {
  position: sticky;
  top: 124px;
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(31, 24, 12, 0.07);
}

.buybox__price {
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e6e3;
}

.buybox__price b {
  font-size: 32px;
  font-weight: 700;
  color: #0b1140;
}

.buybox__price s {
  color: #a8a4a0;
  font-size: 15px;
  margin-right: 8px;
}

.buybox__price-lbl {
  display: block;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
  margin-bottom: 4px;
}

.buybox__price-won {
  font-size: 18px;
  font-weight: 700;
}

.buybox__discount {
  color: #d1433b;
}

/* 인라인 정리용 소품 */
.detail .notice-box {
  margin-bottom: 20px;
}

.detail__step {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  font-weight: 700;
  color: #ff9553;
}

.detail__sched-note {
  margin-top: 12px;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
}

.buybox dl {
  display: flex;
  padding: 8px 0;
  font-size: 15px;
}

.buybox dt {
  flex: 0 0 92px;
  color: #636363;
}

.buybox dd {
  font-weight: 600;
}

.buybox__btns {
  margin-top: 20px;
  display: grid;
  gap: 8px;
}

.buybox__note {
  margin-top: 16px;
  font-size: 13px;
  color: #636363;
  line-height: 1.55;
}

/* ---------- 12. 폼 ---------- */
.form {
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  padding: 32px;
}

/* 박스 없는 폼 — 카드(테두리·배경·패딩)·행 구분선 제거, 라벨 옆+입력만 깔끔하게(문의작성 등 풀폭 폼). */
.form--bare {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.form--bare .form__row {
  border-bottom: 0;
}

/* 회원정보(profile) — 카드 보더·배경만 제거(플랫), 행 구분선은 유지. 폭은 스케일(inner--x)에서 지정. */
.profile-sec .form {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.profile-sec .notice-box {
  margin-bottom: 24px;
}

/* 하단 저장(주)/로그아웃(보조·작게) = 가로 나열, 모바일에서도 세로로 안 접힘. */
.profile-sec .form__foot--row {
  flex-wrap: nowrap;
}

.profile-sec .form__foot--row .btn--primary {
  min-width: 200px;
}

@media (max-width: 860px) {
  .profile-sec .form__foot--row {
    flex-direction: row;
  }
  .profile-sec .form__foot--row .btn {
    width: auto;
  }
  .profile-sec .form__foot--row .btn--primary {
    flex: 1;
    min-width: 0;
  }
  .profile-sec .form__foot--row .btn--gray {
    flex: none;
  }
}
.form__row {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #f0efec;
}

.form__row:last-of-type {
  border-bottom: 0;
}

.form__label {
  flex: 0 0 150px;
  padding-top: 11px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  font-size: 15px;
  color: #0b1140;
}

.form__label .req {
  color: #ff9553;
}

.form__field {
  flex: 1;
  min-width: 0;
}

/* ── 세로/가로 토글 ──────────────────────────────────────────────
   .form__row 기본 = 가로(라벨 옆 150px + 행 구분선) — 긴 폼(회원가입·신청·결제)용.
   폼에 .form--stack 을 붙이면 그 안 전체가 세로(라벨 위, 구분선 없이 간격만) — 짧은 폼(로그인·찾기)용.
   모바일에선 가로도 자동 세로로 접힌다(base/_responsive.scss @860). */
.form--stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form--stack .form__row {
  display: block;
  padding: 0;
  border-bottom: 0;
}

.form--stack .form__label {
  display: block;
  flex: none;
  padding: 0 0 8px;
}

.inp, .sel, .txa {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #1f1e1c;
  background-color: #fff;
  border: 1px solid #d8d5d1;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.txa {
  height: auto;
  padding: 12px 16px;
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.inp::placeholder, .sel::placeholder, .txa::placeholder {
  color: #a8a4a0;
}

.inp:focus, .sel:focus, .txa:focus {
  outline: 0;
  border-color: #0b1140;
  box-shadow: 0 0 0 3px rgba(11, 17, 64, 0.12);
}

/* 브라우저 자동완성 하이라이트(크롬 파란/노란 배경) 제거 — 흰 면 유지.
   inset 흰 그림자로 autofill 배경을 덮고, 포커스 시엔 포커스 링과 함께 유지한다. */
.inp:-webkit-autofill, .sel:-webkit-autofill, .txa:-webkit-autofill {
  -webkit-text-fill-color: #1f1e1c;
  box-shadow: 0 0 0 1000px #fff inset;
  caret-color: #1f1e1c;
}

.inp:-webkit-autofill:focus, .sel:-webkit-autofill:focus, .txa:-webkit-autofill:focus {
  box-shadow: 0 0 0 3px rgba(11, 17, 64, 0.12), 0 0 0 1000px #fff inset;
}

/* 개별 칸 힌트/검증 메시지 — 섹션 안내(signup-sec__desc 16 gray)보다 작고 흐리게(14 muted).
   상태(is-ok/is-err)일 때만 색이 뜬다. */
.form__help {
  margin-top: 8px;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
}

.form__help.is-ok {
  color: #2a8f52;
  font-weight: 600;
}

.form__help.is-err {
  color: #d1433b;
  font-weight: 600;
}

/* 폼 안 텍스트 링크(안내·바로가기) — 흐리지 않게 네이비, hover 밑줄. .form__help 안 링크도 동일 */
.tlink, .form__help a {
  color: #0b1140;
  font-weight: 600;
  text-decoration: none;
}

.tlink:hover, .form__help a:hover {
  text-decoration: underline;
}

/* OR 구분선 (파일업로드 ↔ 직접입력) */
.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
  font-weight: 600;
}

.or-divider::before, .or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #e8e6e3;
}

/* 파일 업로드 헤더 (좌: 라벨 / 우: 양식받기 링크) */
.upload-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.upload-head b {
  color: #0b1140;
  font-weight: 700;
}

/* 빈 상태 / 유도 프롬프트 (로그인 필요·과정 미선택 등) — 흰 배경 위 가운데 정렬 */
.prompt {
  max-width: 480px;
  margin: 24px auto;
  text-align: center;
  padding: 48px 24px;
}

.prompt__tit {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}

.prompt__msg {
  margin: 12px 0 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
  line-height: 1.7;
}

.prompt__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 유도 CTA는 폭이 좀 있어야 눌러 보인다(가운데 정렬 프롬프트) */
.prompt__actions .btn {
  min-width: 140px;
}

.form__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 폼 하단 액션 바 — 기본: 주 버튼 가운데 + 아래 보조/안내 세로. 2버튼 좌우는 --row(profile). */
.form__foot {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.form__foot--row {
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 860px) {
  .form__foot--row {
    flex-direction: column;
  }
  .form__foot--row .btn {
    width: 100%;
  }
}

.chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #4a4844;
}

/* 커스텀 체크박스 — 20px 박스·네이비 채움. 체크마크(✓)는 작고 얇게 직접 그린다(네이티브 accent-color 로는 조절 불가) */
.chk input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1.5px solid #d8d5d1;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s, border-color 0.15s;
}

.chk input:checked {
  background-color: #0b1140;
  border-color: #0b1140;
}

.chk input:checked::after {
  content: "";
  position: absolute;
  top: 3.5px;
  left: 7px;
  width: 4.5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.4px 1.4px 0;
  transform: rotate(45deg);
}

.chk input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 17, 64, 0.18);
}

/* 본인인증 결과로 채워지는 읽기전용 값(이름·생년·휴대폰) — 수정 불가라 담백하게(약한 강조) */
.form__fixed {
  padding-top: 10px;
  font-size: 17px;
  font-weight: 500;
  color: #1f1e1c;
}

/* 파일 업로드 인풋 — 브라우저 기본 버튼을 우리 톤으로(::file-selector-button). 파일명은 옆에 표시됨 */
.file-input {
  max-width: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

.file-input::file-selector-button {
  margin-right: 12px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #d8d5d1;
  background-color: #fff;
  color: #0b1140;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.file-input:hover::file-selector-button {
  border-color: #0b1140;
  background-color: #f7f6f4;
}

/* 폼 안내 메시지(.login-msg) 본체는 _field.scss. 여기선 .form 안에서만 위 요소와 벌린다
   (로그인 .auth__form 은 flex-gap 이라 대상 아님 — .form 스코프로 한정) */
.form .login-msg {
  margin-top: 16px;
}

/* 계정 폼 하단 링크 (find.php · signup.php) */
.login-links {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e8e6e3;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

.login-links a {
  color: #636363;
}

.login-links a:hover {
  color: #0b1140;
  text-decoration: underline;
}

.login-links .strong {
  color: #c85a1e;
  font-weight: 700;
}

/* 회원가입 단계 (signup-steps — JS가 .on/.done 토글) */
.signup-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  padding: 16px;
}

.signup-steps li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  font-weight: 700;
  color: #a8a4a0;
}

.signup-steps li span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #f2f1ef;
  color: #a8a4a0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.signup-steps li.on {
  color: #0b1140;
}

.signup-steps li.on span {
  background-color: #0b1140;
  color: #fff;
}

.signup-steps li.done {
  color: #c85a1e;
}

.signup-steps li.done span {
  background-color: #ff9553;
  color: #fff;
}

/* 약관 동의 */
.agree-all {
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e6e3;
  margin-bottom: 16px;
}

.agree-all .chk {
  font-size: 16px;
  font-weight: 700;
}

.agree-list {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.agree-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agree-list a {
  font-size: 13px;
  color: #636363;
  text-decoration: underline;
  flex-shrink: 0;
}

.agree-list a:hover {
  color: #0b1140;
}

/* 본인인증 박스 (nice-box — JS가 idle/done 토글) */
.nice-box {
  background-color: #f7f6f4;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  padding: 40px 28px;
  text-align: center;
  margin-bottom: 20px;
}

.nice-box__lead {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #0b1140;
}

.nice-box__sub {
  margin: 8px 0 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

.nice-box__ok {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #2a8f52;
}

.nice-box__who {
  margin: 12px 0 20px;
  font-size: 16px;
  color: #1f1e1c;
}

.nice-box__who b {
  font-weight: 700;
}

.nice-box__who span {
  color: #636363;
  margin-left: 8px;
}

/* 약관 본문 (member/terms·privacy — 회원 계열 밖. 원본 유지) */
.doc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 40px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text);
}

.doc__notice {
  margin-bottom: 22px;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
}

.doc h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 26px 0 10px;
}

.doc h3:first-child {
  margin-top: 0;
}

.doc h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 18px 0 8px;
}

.doc p {
  margin-bottom: 10px;
}

.doc ul, .doc ol {
  margin: 8px 0 14px 18px;
}

.doc li {
  margin-bottom: 5px;
  list-style: inherit;
}

.doc ul.dots {
  margin-left: 0;
}

.doc ul.dots li {
  position: relative;
  padding-left: 14px;
  list-style: none;
}

.doc ul.dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

.doc table {
  margin: 12px 0;
}

.doc th, .doc td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 14px;
}

.doc th {
  background: #f7f6f4;
  font-weight: 700;
  color: var(--navy);
}

/* 아이디·비밀번호 찾기 결과 (find-result__* — JS가 innerHTML 생성) */
.find-result {
  margin-top: 20px;
  padding: 24px;
  border-radius: 14px;
  background-color: #f7f6f4;
  border: 1px solid #e8e6e3;
}

.find-result__lead {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #0b1140;
}

.find-result__sub {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

.find-result__list {
  margin: 16px 0 20px;
  display: grid;
  gap: 8px;
}

.find-result__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 8px;
}

.find-result__list b {
  font-size: 17px;
  font-weight: 700;
  color: #c85a1e;
  letter-spacing: 0.01em;
}

.find-result__list span {
  font-size: 13px;
  color: #636363;
}

.login-msg {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #d1433b;
  background-color: #fbe7e5;
  border-radius: 8px;
  padding: 12px 16px;
}

.login-msg.is-ok {
  color: #2a8f52;
  background-color: #e6f4ea;
}

.login-msg[hidden] {
  display: none;
}

.logo {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
}

.logo--safety {
  background-image: url("../img/common/modu-safety.png");
  width: 160px;
  height: 29px;
}

.logo--safety-white {
  background-image: url("../img/common/modu-safety-white.png");
  width: 160px;
  height: 29px;
}

.logo--safety-gradient {
  background-image: url("../img/common/modu-safety-gradient.png");
  width: 160px;
  height: 29px;
}

.logo--group {
  background-image: url("../img/common/modu-group.png");
  width: 168px;
  height: 22px;
}

.logo--group-white {
  background-image: url("../img/common/modu-group-white.png");
  width: 168px;
  height: 22px;
}

.logo--sm {
  transform: scale(0.82);
  transform-origin: center;
}

.logo--lg {
  transform: scale(1.25);
  transform-origin: center;
}

/* 견적문의 = 단체 교육 혜택 카드 3장(정적). 옛 오렌지 그라디언트 밴드 → 카드형(edu-aud 톤 통일). */
.quote-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.quote-banner__item {
  padding: clamp(22px, 3vw, 30px);
  border-radius: 20px;
  background: transparent;
  border: 1px solid #e8e6e3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quote-banner__item:hover {
  border-color: #d8d5d1;
  box-shadow: 0 1px 2px rgba(31, 24, 12, 0.05);
}

.quote-banner__icon {
  display: block;
  margin-bottom: 12px;
  color: #ff9553;
}
.quote-banner__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.quote-banner__tit {
  display: block;
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  font-weight: 700;
}

.quote-banner__desc {
  margin-top: 8px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: #636363;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .quote-banner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
/* ---------- 13. 프로세스 ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  counter-reset: step;
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 18px;
  text-align: center;
  position: relative;
}

.step__no {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step__tit {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.step__desc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--gray);
}

/* ---------- 14. 안내 박스 / 배너 ---------- */
/* 안내 박스 — 경고 아닌 상시 안내(회원 정보 안내·수료 안내 등). 웜그레이(2026-08-21). */
.notice-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
}

.notice-box b {
  color: var(--navy);
  font-weight: 700;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
}

.panel__tit {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.03em;
}

.panel__desc {
  margin-top: 10px;
  color: var(--gray);
}

.panel ul.dots {
  margin: 16px 0 22px;
}

.panel ul.dots li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  color: #4a4844;
  font-size: 15px;
}

.panel ul.dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

/* ---------- 15. 게시판 ---------- */
.board {
  border-top: 2px solid var(--navy);
}

.board li {
  border-bottom: 1px solid var(--line);
}

.board a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 8px;
}

.board a:hover .board__tit {
  color: var(--orange);
}

.board__tit {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
}

.board__date {
  font-size: 14px;
  color: #a8a4a0;
  font-variant-numeric: tabular-nums;
}

.board__cat {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  padding: 3px 9px;
  border-radius: 4px;
}

/* 번호와 [공지] 배지가 같은 칸을 나눠 쓴다 — 폭을 고정해야 제목 시작점이 줄마다 흔들리지 않는다 */
.board__no, .board__cat {
  flex: none;
  min-width: 44px;
  text-align: center;
}

.board__no {
  font-size: 14px;
  color: #a8a4a0;
  font-variant-numeric: tabular-nums;
}

.board li.is-top {
  background: #f7f6f4;
}

.board li.is-top .board__tit {
  font-weight: 700;
  color: var(--navy);
}

/* 게시글 상세 */
.post {
  max-width: 1080px;
  margin: 0 auto;
} /* 상세글 = 콘텐츠 폭(1080). 목록(1080)에서 눌렀을 때 폭 안 튀게 */
.post__head {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.post__tit {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.035em;
  line-height: 1.4;
}

.post__meta {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 13.5px;
  color: #a8a4a0;
}

.post__files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.post__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #f7f6f4;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: #636363;
}

.post__file::before {
  content: "↓";
  font-weight: 700;
  color: var(--orange);
}

.post__file:hover {
  border-color: #d8d5d1;
  color: var(--navy);
}

/* 본문은 관리자 에디터가 만든 HTML 이다. 워드·네이버블로그에서 붙여넣은 글이 그대로 저장돼
   있어서 태그마다 인라인 style 이 박혀 온다 (font-size:11pt, color:rgb(..), width:900px …).
   인라인 style 은 여기 클래스 규칙을 이기므로, **화면이 깨지는 것만** 골라 막는다 —
   글자 크기·색은 작성자가 의도한 서식이라 건드리지 않는다.

   position:relative + overflow-x:auto → 본문 안에서 position:absolute 나 float 가
   튀어나와도 이 상자 밖(헤더·푸터)까지 나가지 않는다. */
.post__body {
  padding: 30px 0 40px;
  font-size: 16px;
  line-height: 1.85;
  color: #4a4844;
  min-height: clamp(260px, 35vh, 520px); /* 내용 짧아도 본문 안 허전하게 · 화면 높이 따라 유연(바닥260·천장520) */
  position: relative;
  overflow-x: auto;
  word-wrap: break-word;
  overflow-wrap: break-word; /* 띄어쓰기 없는 긴 URL */
}

/* 고정 폭(width:900px 등)이 박혀 와도 칸을 넘지 않는다.
   max-width 는 width 와 다른 속성이라 특이도 싸움이 아니다 — 인라인 width 가 있어도
   최종 폭은 min(width, max-width) 로 계산돼 이쪽이 이긴다. */
.post__body * {
  max-width: 100%;
}

/* 이미지는 !important 로 눌러야 한다. 폭만 줄이고 인라인 height 를 그대로 두면
   세로 길이가 남아 그림이 찌그러진다. */
.post__body img {
  max-width: 100% !important;
  height: auto !important;
}

.post__body table {
  width: auto;
}

.post__body a {
  color: var(--orange);
  text-decoration: underline;
}

.post__body ul, .post__body ol {
  padding-left: 22px;
}

.post__body ul li {
  list-style: disc;
}

.post__body ol li {
  list-style: decimal;
}

.post__nav {
  border-top: 1px solid var(--line);
}

.post__nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 8px;
  border-bottom: 1px solid var(--line);
}

.post__nav-item span {
  flex: none;
  min-width: 56px;
  font-size: 13px;
  font-weight: 700;
  color: #a8a4a0;
}

.post__nav-item b {
  font-size: 15px;
  font-weight: 600;
  color: #636363;
}

.post__nav-item:hover b {
  color: var(--orange);
}

.post__act {
  margin-top: 28px;
  text-align: center;
}

/* FAQ 아코디언 (Norma 스타일 — 라인 아이콘 + 질문 + 플러스, 얇은 구분선) */
/* 폭 = 콘텐츠 풀폭(.inner=1400)으로 통일(공지 리스트와 맞춤). 답변 본문만 아래에서 읽기 좋게 캡. */
.faq {
  max-width: none;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq__item {
  border-bottom: 1px solid var(--line);
  transition: background-color 0.15s;
}

.faq__item:last-child {
  border-bottom: 0;
}

.faq__item:hover {
  background: var(--surface-2);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em; /* 리스트 제목 = title(18/700), 과정·혼합 카드와 동일 표준 */
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s;
}

.faq__ico {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: color 0.2s;
}

.faq__item.on .faq__ico {
  color: var(--orange);
}

.faq__q em {
  flex: 1;
  font-style: normal;
}

.faq__q::after {
  content: "+";
  flex: none;
  color: var(--muted);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: color 0.2s;
}

.faq__item.on .faq__q {
  color: var(--orange);
}

.faq__item.on .faq__q::after {
  content: "−";
  color: var(--orange);
}

/* 부드러운 펼침 — 열릴 때 JS가 실제 내용 높이(scrollHeight)를 max-height 에 넣음 → 접힘 확실 + 두둑 없음 */
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq__a-inner {
  padding: 2px 70px 24px 58px; /* PC — 우측 여백 넉넉히(70) */
  max-width: 940px; /* 풀폭(1400)에서 답변 한 줄이 너무 길지 않게 읽기폭 캡(왼정렬) */
  color: #636363;
  font-size: 16px;
  line-height: 1.75;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.faq__a-inner * {
  max-width: 100%;
}

.faq__a-inner img {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 860px) {
  .faq__a-inner {
    padding: 2px 24px 20px 48px;
  }
} /* 모바일 여백 축소 */
.proc {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.proc__step {
  position: relative;
  padding-right: 20px;
}

.proc__num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding-right: 12px;
  background-color: #f9f9f8;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #1f1e1c;
  font-variant-numeric: tabular-nums;
  transition: color 0.18s;
}

.proc__step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 15px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e8e6e3;
}

@media (min-width: 861px) {
  .proc__step:last-child::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 15px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e8e6e3;
  }
}
.proc__titrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.proc__titrow svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #ff9553;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.proc__tit {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f1e1c;
}

.proc__desc {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

.proc__step:hover .proc__num {
  color: #ff9553;
}

@media (max-width: 860px) {
  .proc {
    grid-template-columns: 1fr;
  }
  .proc__step {
    padding: 0 0 20px 50px;
    min-height: 60px;
  }
  .proc__num {
    position: absolute;
    left: 0;
    top: 0;
    padding-right: 0;
  }
  .proc__step:not(:last-child)::after {
    top: 30px;
    left: 13px;
    width: 1px;
    height: 100%;
  }
  .proc__titrow {
    margin-top: 4px;
  }
}
.pagelinks {
  border-top: 1px solid #e8e6e3;
  background: #fff;
}

.pagelink {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pagelink__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: clamp(28px, 4vw, 48px) 20px;
  text-decoration: none;
  transition: background-color 0.15s;
}
.pagelink__cell + .pagelink__cell {
  border-left: 1px solid #e8e6e3;
}
.pagelink__cell:hover .pagelink__ico {
  background-color: #ff9553;
  color: #fff;
  border-color: #ff9553;
}
.pagelink__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  text-align: center;
}
.pagelink__label {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #0b1140;
  font-weight: 700;
}
.pagelink__desc {
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
  font-weight: 400;
}
.pagelink__ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  border: 1px solid #e8e6e3;
  color: #0b1140;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.pagelink__ico svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 860px) {
  .pagelink__cell {
    padding: 24px 16px;
    gap: 12px;
  }
  .pagelink__label {
    font-size: 17px;
  }
  .pagelink__ico {
    width: 38px;
    height: 38px;
  }
  .pagelink__ico svg {
    width: 18px;
    height: 18px;
  }
}

.board-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 1080px) {
  .board-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .board-cards {
    grid-template-columns: 1fr;
  }
}

.board-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid #d8d5d1;
  border-radius: 14px;
  background-color: #fff;
  text-decoration: none;
  transition: background-color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.board-card__tags {
  display: flex;
  gap: 8px;
  min-height: 26px;
  margin-bottom: 16px;
}
.board-card__badge {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid #0b1140;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #0b1140;
}
.board-card__badge--new {
  border-color: #ff9553;
  background-color: #ff9553;
  color: #fff;
}
.board-card__tit {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.board-card__foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.board-card__date {
  font-size: 15px;
  color: #636363;
  font-variant-numeric: tabular-nums;
}
.board-card__arrow {
  display: inline-flex;
  color: #a8a4a0;
  transition: transform 0.18s, color 0.18s;
}
.board-card__arrow svg {
  width: 22px;
  height: 22px;
}
.board-card.is-pin {
  background: #fff6ef;
  border-color: #ffd9bf;
}
.board-card:hover {
  background-color: #0b1140;
  border-color: #0b1140;
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(31, 24, 12, 0.12);
}
.board-card:hover .board-card__tit {
  color: #fff;
}
.board-card:hover .board-card__badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: transparent;
}
.board-card:hover .board-card__badge--new {
  background-color: #ff9553;
  border-color: #ff9553;
}
.board-card:hover .board-card__date {
  color: rgba(255, 255, 255, 0.72);
}
.board-card:hover .board-card__arrow {
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
}
@media (max-width: 860px) {
  .board-card {
    min-height: 0;
    padding: 20px;
  }
  .board-card__tags {
    min-height: 0;
    margin-bottom: 12px;
  }
  .board-card__foot {
    padding-top: 16px;
  }
}

.board-list {
  border: 1px solid #d8d5d1;
  border-radius: 14px;
  overflow: hidden;
  background-color: #fff;
}

.board-list__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 24px;
  border-bottom: 1px solid #e8e6e3;
  text-decoration: none;
  transition: background-color 0.15s;
}
.board-list__row:last-child {
  border-bottom: 0;
}
.board-list__row:hover {
  background-color: #f7f6f4;
}

.board-list__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background-color: #ecedf3;
  color: #0b1140;
}

.board-list__badge--pin {
  background-color: #0b1140;
  color: #fff;
}

.board-list__tit {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-list__new {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  background-color: #ff9553;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}

.board-list__date {
  flex: none;
  font-size: 14px;
  color: #636363;
  font-variant-numeric: tabular-nums;
}

.board-list__arrow {
  flex: none;
  display: inline-flex;
  color: #a8a4a0;
  transition: transform 0.15s, color 0.15s;
}
.board-list__arrow svg {
  width: 18px;
  height: 18px;
}

.board-list__row:hover .board-list__tit {
  color: #ff9553;
}
.board-list__row:hover .board-list__arrow {
  color: #0b1140;
  transform: translateX(3px);
}

.board-list__row.is-pin {
  background: #fff6ef;
}

.board-list__row.is-pin .board-list__tit {
  font-weight: 700;
}

@media (max-width: 860px) {
  .board-list__row {
    padding: 20px 16px;
    gap: 12px;
  }
  .board-list__tit {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .board-list__arrow {
    display: none;
  }
}
.cc {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
  align-items: stretch;
}

.cc-tel {
  border-radius: 20px;
  padding: 28px;
  background-color: #f2f1ef;
  color: #1f1e1c;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cc-tel__k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #ff9553;
}
.cc-tel__k svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cc-tel__num {
  margin-top: 8px;
  font-size: clamp(26px, 2.5vw, 33px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.cc-tel__hours {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #d8d5d1;
  font-size: 14px;
  line-height: 1.65;
  color: #636363;
}
.cc-tel__hours b {
  color: #1f1e1c;
  font-weight: 700;
}

.cc-online {
  border: 1px solid #d8d5d1;
  border-radius: 20px;
  padding: 12px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  background-color: #fff;
  overflow: hidden;
}

.cc-oitem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
}
.cc-oitem + .cc-oitem {
  border-left: 1px solid #e8e6e3;
}

.cc-oitem__k {
  font-size: 17px;
  font-weight: 800;
  color: #ff9553;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.cc-oitem__go {
  margin-top: auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #0b1140;
  transition: transform 0.15s;
}

.cc-oitem:hover .cc-oitem__go {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .cc {
    grid-template-columns: 1fr;
  }
  .cc-online {
    grid-template-columns: 1fr;
  }
  .cc-oitem + .cc-oitem {
    border-left: 0;
    border-top: 1px solid #e8e6e3;
  }
}
.doc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
@media (max-width: 860px) {
  .doc-cards {
    grid-template-columns: 1fr;
  }
}

.doc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2vw, 26px);
  border: 1px solid #d8d5d1;
  border-radius: 14px;
  background-color: #fff;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.doc-card__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background-color: #f7f6f4;
  color: #0b1140;
  transition: background-color 0.18s, color 0.18s;
}
.doc-card__ico svg {
  width: 22px;
  height: 22px;
}
.doc-card__ico--file {
  background-color: #fff6ef;
  color: #ff9553;
}
.doc-card__body {
  flex: 1;
  min-width: 0;
}
.doc-card__tit {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.doc-card__date {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: #636363;
  font-variant-numeric: tabular-nums;
}
.doc-card__arrow {
  flex: none;
  color: #a8a4a0;
  transition: transform 0.18s, color 0.18s;
}
.doc-card__arrow svg {
  width: 20px;
  height: 20px;
}
.doc-card:hover {
  border-color: #0b1140;
  box-shadow: 0 4px 20px rgba(31, 24, 12, 0.07);
}
.doc-card:hover .doc-card__ico {
  background-color: #0b1140;
  color: #fff;
}
.doc-card:hover .doc-card__arrow {
  color: #0b1140;
  transform: translateX(3px);
}

/* ---------- 15-1. 내 강의실 ----------
   설계 원칙 하나: **색은 아껴 쓴다.**
   상태색은 상태 태그 하나, 오렌지는 주 버튼과 진도바에만. 나머지는 흑백과 선으로 만든다.
   숫자·라벨의 크기 차이로 위계를 주면 색을 더 안 써도 읽힌다.
   (2026-08-25 토큰화 — 색은 DS 토큰으로, 세밀 튜닝된 px 크기는 유지. 굵기 최대 700.) */
/* ── 내 강의실 셸 = 가벼운 대시보드 ──────────────────────────────────────────
   페이지 전환은 상단 탭(subtabs)이 맡고, 요약(KPI)만 왼쪽에 **스티키 레일**로 세운다.
   레일은 '옅게' — 카드보다 한 단계 조용하게(그림자 없이 얇은 선 2×2)해서 본문 카드가 주인공이 되게.
   ≤lg 에서는 레일을 본문 위로 눕히고 KPI 를 가로 막대로 되돌린다(좁은 폭에서 2단은 답답). */
/* 상단 학습 유의사항 — 접이식. 펼침=네이비 보더 카드 / 접힘=네이비 fill 바(+필독 딱지). */
.lnotice {
  margin-bottom: 30px;
  background-color: #fff;
  border: 2px solid #ecedf3;
  border-radius: 8px;
  padding: 24px 28px;
  transition: background-color 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}

/* 접힘 = 컨테이너 패딩 0. 바(head)가 높이·패딩을 갖고 채워서 '죽은 패딩 영역' 없이 전체 클릭. */
.lnotice.is-collapsed {
  background-color: #0b1140;
  border-color: #0b1140;
  padding: 0;
}

/* 헤더 = 왼쪽 정렬(타이틀 fill 없이 담백) + 우측 토글 */
.lnotice__head {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}

/* 접힘일 때만 바 전체가 '펼치기' 클릭영역(펼침일 땐 '접기' 버튼만 눌림 — 본문 읽기 방해 X).
   head 가 고정높이·자체패딩으로 바를 채워 세로중앙 정렬 + 패딩 영역까지 클릭됨. */
.lnotice.is-collapsed .lnotice__head {
  cursor: pointer;
  min-height: 46px;
  padding: 0 20px;
}

/* 필독 딱지 — 접힘 때만(네이비 위 밝은 오렌지) */
.lnotice__badge {
  display: none;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #ffb072;
  letter-spacing: -0.01em;
}

.lnotice.is-collapsed .lnotice__badge {
  display: inline;
}

.lnotice__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0b1140;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lnotice__title svg {
  width: 16px;
  height: 16px;
}

/* 접힘 = 흰 글자, 아이콘 생략 */
.lnotice.is-collapsed .lnotice__title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
@media (max-width: 860px) {
  .lnotice.is-collapsed .lnotice__title {
    font-size: 14px;
  }
}

.lnotice.is-collapsed .lnotice__title svg {
  display: none;
}

.lnotice__toggle {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #a8a4a0;
  cursor: pointer;
}

.lnotice__toggle:hover {
  color: #0b1140;
}

.lnotice.is-collapsed .lnotice__toggle {
  color: rgba(255, 255, 255, 0.72);
  right: 20px;
}

.lnotice.is-collapsed .lnotice__head:hover .lnotice__toggle {
  color: #fff;
}

.lnotice__toggle-label::before {
  content: "접기";
}

.lnotice.is-collapsed .lnotice__toggle-label::before {
  content: "펼치기";
}

.lnotice__toggle-arw {
  display: inline-block;
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}

.lnotice.is-collapsed .lnotice__toggle-arw {
  transform: rotate(0);
}

/* 본문 = grid-rows 1fr↔0fr 로 부드럽게 열림/닫힘 */
.lnotice__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease;
}

.lnotice.is-collapsed .lnotice__body {
  grid-template-rows: 0fr;
}

.lnotice__body-inner {
  overflow: hidden;
  min-height: 0;
}

/* 2단 그리드 — 6개를 3행×2열(열 우선=위→아래 읽기). 세로 짧아져 스크롤 부담↓. */
.lnotice__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 11px 34px;
  padding-top: 20px;
  align-items: start;
}

.lnotice__list li {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  line-height: 1.6;
  color: #4a4844;
}

.lnotice__list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  top: -1px;
  color: #0b1140;
  font-weight: 700;
}

.lnotice__list b {
  color: #0b1140;
  font-weight: 700;
}

@media (max-width: 860px) {
  .lnotice__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 9px;
  }
}
.myroom {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* 레일 = 요약 패널 + 고객센터 배너를 함께 스티키로 세운다. */
.myroom__rail {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 요약 패널 박스. 안의 KPI 는 자기 테두리를 버리고 이 패널이 프레임이 된다. */
.myroom__side {
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(11, 17, 64, 0.05);
}

/* 레일 하단 고객센터 배너 — 옅은 카드. */
.myroom-cs {
  background-color: #f7f6f4;
  border-radius: 14px;
  padding: 16px 18px;
}

.myroom-cs__tit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #ff9553;
}

.myroom-cs__tit svg {
  width: 15px;
  height: 15px;
}

.myroom-cs__tel {
  margin-top: 7px;
  font-size: 21px;
  font-weight: 700;
  color: #1f1e1c;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.myroom-cs__hours {
  margin-top: 4px;
  font-size: 12.5px;
  color: #a8a4a0;
  line-height: 1.5;
}

.myroom-cs__link {
  display: block;
  text-align: right;
  margin-top: 11px;
  font-size: 13px;
  font-weight: 600;
  color: #0b1140;
}

.myroom-cs__link:hover {
  text-decoration: underline;
}

.myroom__main {
  min-width: 0;
}

/* 본문 카드 위 섹션 헤더 — 타이틀(섹션 크기, 좌) + 개수(우). */
.myroom__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.myroom__tit {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}

.myroom__count {
  font-size: 14px;
  color: #636363;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.myroom__count b {
  color: #ff9553;
  font-weight: 700;
  font-size: 16px;
  margin: 0 1px;
}

/* 요약 — 패널 안에서 2×2. 칸 사이 1px 만 gap 바탕(line)으로 드러내 내부 구분선만 그린다.
   바깥 테두리는 패널(.myroom__side)이 대신하므로 여기엔 border/radius 를 두지 않는다. */
.kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: #e8e6e3;
}

/* 아이콘은 좌상단, 숫자·라벨은 아래 가운데 — 가로로 붙이면 좁아 보여서 세로로 여백을 준다. */
.kpi {
  display: flex;
  flex-direction: column;
  padding: 15px 12px 16px;
  background-color: #fff;
}

.kpi__ico {
  align-self: flex-start;
  margin-bottom: 14px;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi__ico svg {
  width: 19px;
  height: 19px;
}

.kpi__ico--go {
  background-color: #ffead8;
  color: #c85a1e;
}

.kpi__ico--ok {
  background-color: #e6f4ea;
  color: #2a8f52;
}

.kpi__ico--bad {
  background-color: #fbe7e5;
  color: #d1433b;
}

.kpi__ico--hl {
  background-color: #ecedf3;
  color: #23306f;
}

.kpi__txt {
  min-width: 0;
  margin-top: auto;
  text-align: center;
}

.kpi__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #a8a4a0;
  margin-bottom: 4px;
}

.kpi__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.kpi__value b {
  font-size: 26px;
  font-weight: 700;
  color: #0b1140;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.kpi__value i {
  font-style: normal;
  font-size: 13.5px;
  font-weight: 600;
  color: #a8a4a0;
}

.kpi__value.is-ok b {
  color: #2a8f52;
}

.kpi__value.is-bad b {
  color: #d1433b;
}

.kpi__value.is-hl b {
  color: #ff9553;
}

/* 0 은 회색으로 죽인다 — 숫자가 있는 칸만 눈에 들어오게 */
.kpi__value.is-zero b, .kpi__value.is-zero i {
  color: #d8d5d1;
}

/* ── 레일 대시보드 구성: 프로필 → 수료율 도넛 → 지표 리스트 ────────────────── */
.myroom-div {
  height: 1px;
  background-color: #e8e6e3;
  margin: 16px 0;
}

/* 프로필 — 이니셜 아바타 + 이름 */
.myroom-prof {
  display: flex;
  align-items: center;
  gap: 12px;
}

.myroom-prof__av {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #0b1140;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 회원 구분별 아바타 색 */
.myroom-prof__av--manager {
  background-color: #0b1140;
  color: #fff;
}

.myroom-prof__av--group {
  background-color: #ecedf3;
  color: #0b1140;
}

.myroom-prof__av--personal {
  background-color: #ff9553;
  color: #0b1140;
}

.myroom-prof__txt {
  min-width: 0;
}

.myroom-prof__nm {
  font-size: 16px;
  font-weight: 700;
  color: #1f1e1c;
  line-height: 1.3;
}

.myroom-prof__sub {
  margin-top: 3px;
  font-size: 13px;
  color: #a8a4a0;
}

/* 수료율 도넛 — 진행 호는 오렌지 그라데이션(myroom-side.php 의 linearGradient) */
.myroom-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 도넛만 감싸는 회색 하이라이트 카드(수료/전체·배지는 카드 밖 아래로) */
.myroom-ring__card {
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding: 18px 0;
  border-radius: 14px;
  background-color: #f7f6f4;
}

.myroom-ring__wrap {
  position: relative;
  width: 112px;
  height: 112px;
}

.myroom-ring__wrap svg {
  display: block;
  width: 112px;
  height: 112px;
}

.myroom-ring__ctr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.myroom-ring__ctr b {
  font-size: 28px;
  font-weight: 700;
  color: #0b1140;
  letter-spacing: -0.04em;
  line-height: 1;
}

.myroom-ring__ctr span {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: #a8a4a0;
}

/* 수료/전체(텍스트) + 누적이수(배지)를 한 줄에 나란히 */
.myroom-ring__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.myroom-ring__sub {
  font-size: 14px;
  color: #4a4844;
  font-variant-numeric: tabular-nums;
}

.myroom-ring__sub b {
  color: #1f1e1c;
  font-weight: 700;
}

.myroom-ring__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 99px;
  background-color: #f7f6f4;
  color: #636363;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.myroom-ring__badge svg {
  width: 13px;
  height: 13px;
}

.myroom-ring__badge b {
  color: #1f1e1c;
  font-weight: 700;
  margin-right: 1px;
}

/* 지표 리스트 — '지금 할 일'(수강중·미수료). 아이콘+라벨(좌) / 값(우). */
.myroom-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.myroom-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
}

.myroom-stat__ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myroom-stat__ic svg {
  width: 16px;
  height: 16px;
}

.myroom-stat__ic--go {
  background-color: #ecedf3;
  color: #0b1140;
}

.myroom-stat__ic--bad {
  background-color: #fbe7e5;
  color: #d1433b;
}

.myroom-stat__lb {
  font-size: 14px;
  font-weight: 600;
  color: #4a4844;
}

.myroom-stat__v {
  margin-left: auto;
  font-size: 17px;
  font-weight: 700;
  color: #0b1140;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.myroom-stat__v i {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: #a8a4a0;
  margin-left: 1px;
}

.myroom-stat--warn .myroom-stat__v {
  color: #d1433b;
}

/* 안내문 — 카드 목록 '아래'에 두는 옅은 참고 노트(교육방식별 수료기준). 액션(카드)이 먼저다. */
.guide {
  margin-top: 22px;
  background-color: #f7f6f4;
  border: 1px solid #e8e6e3;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.75;
  color: #636363;
}

.guide b {
  color: #1f1e1c;
  font-weight: 700;
}

/* 상태 태그 — 한 벌로 통일. 색은 왼쪽 점에만 얹고 글자는 늘 차분하게. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 10px;
  border-radius: 7px;
  background-color: #f2f1ef;
  color: #636363;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tag i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #a8a4a0;
}

/* 상태 = 색 배지(신호등). 수강중=파란(navy) / 수료=초록 / 미수료=빨강 / 예정=회색+네이비점 */
.tag--ing {
  background-color: #0b1140;
  color: #fff;
}

.tag--ing i {
  background-color: #ffb072;
}

.tag--done {
  background-color: #e6f4ea;
  color: #2a8f52;
}

/* 수료 배지 = 점 대신 체크(✓) — 썸네일 도장(.scard__seal)을 대체 */
.tag--done i {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: #2a8f52;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.tag--done i::before {
  content: "✓";
}

.tag--fail {
  background-color: #fbe7e5;
  color: #d1433b;
}

.tag--fail i {
  background-color: #d1433b;
}

.tag--wait i {
  background-color: #0b1140;
}

.tag--warn {
  background-color: #fdf3e3;
  color: #b4700c;
}

.tag--warn i {
  background-color: #b4700c;
}

/* 교육방식 = 배지 아닌 플레인 라벨(조용한 회색) — 상태 배지와 확실히 구분 */
.scard__method {
  font-size: 12.5px;
  font-weight: 600;
  color: #636363;
  letter-spacing: -0.01em;
}

/* 결제 상태 배지 (orders.php) — .tag 와 같은 톤 */
.pill {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border-radius: 7px;
  background-color: #f2f1ef;
  color: #636363;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pill.is-ok {
  background-color: #e6f4ea;
  color: #2a8f52;
}

.pill.is-bad {
  background-color: #fbe7e5;
  color: #d1433b;
}

.pill.is-go {
  background-color: #fdf3e3;
  color: #b4700c;
}

.pill.is-wait {
  background-color: #f2f1ef;
  color: #636363;
}

/* 수강 카드 — 윗단(과정·행동)과 아랫단(사실관계 줄) 두 층뿐이다. */
.studies {
  display: grid;
  gap: 16px;
}

.scard {
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(11, 17, 64, 0.05);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

/* 호버 = 떠오름(translate)·큰 그림자 없이 카드 전체 보더만 네이비로(+제목 네이비). 통째 클릭영역 오해 방지. */
.scard:hover {
  border-color: #0b1140;
}

.scard:hover .scard__tit {
  color: #0b1140;
}

.scard__main {
  display: grid;
  grid-template-columns: 164px 1fr 176px;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
}

/* 바탕색은 .thumb-* (교육방식별 그라데이션)이 넣는다 — 여기서 background 재선언 금지. */
.scard__thumb {
  position: relative;
  align-self: start;
  aspect-ratio: 16/10;
  border-radius: 12px;
  overflow: hidden;
}

.scard__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 17, 64, 0) 45%, rgba(11, 17, 64, 0.42));
}

.scard__thumb-txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.scard__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scard__seal {
  position: absolute;
  z-index: 2;
  left: 9px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px;
  border-radius: 8px;
  background: rgba(42, 143, 82, 0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.scard__seal::before {
  content: "✓";
  font-weight: 700;
}

/* 카드 헤더 띠 = 제일 상단: 상태(좌) / 인증·종료 D-day(우) */
/* 헤더 = 옅은 회색 띠(수동 정보: 상태·기한). 차시 접기(인터랙션)엔 네이비소프트로 역할 구분 예정. */
.scard__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid #e8e6e3;
  background-color: #f7f6f4;
}

.scard__hend {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.scard__dday {
  font-size: 12.5px;
  font-weight: 700;
  color: #636363;
  font-variant-numeric: tabular-nums;
}

/* 대상(오렌지)·방식·시간 = 제목과 수강기간 사이(메인 과정카드 메타식) */
.scard__cat {
  margin-top: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #636363;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.scard__cat-key {
  color: #ff9553;
  font-weight: 700;
}

.scard__cat i {
  font-style: normal;
  margin: 0 8px;
  color: #d8d5d1;
}

.scard__tit {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #1f1e1c;
  letter-spacing: -0.038em;
  line-height: 1.35;
  transition: color 0.18s;
}

.scard__meta {
  margin-top: 7px;
  font-size: 13.5px;
  color: #636363;
  font-variant-numeric: tabular-nums;
}

.scard__meta i {
  font-style: normal;
  margin: 0 7px;
  color: #d8d5d1;
}

.scard__hint {
  margin-top: 12px;
  font-size: 13px;
  color: #636363;
}

.scard__hint b {
  color: #0b1140;
  font-weight: 700;
}

.scard__act {
  display: grid;
  gap: 8px;
  align-content: center;
  justify-items: stretch;
}

/* 카드 안 액션 버튼 = 알약(랜딩용)이 아니라 둥근 사각(앱·조밀 UI). scard__link·btn--field(8)와 통일. */
.scard__act .btn {
  border-radius: 8px;
}

/* 카드 안에서만 주 버튼에 그림자 — 눌러야 할 것 하나가 확실히 떠 보이게 */
.scard__act .btn--primary {
  box-shadow: 0 5px 16px rgba(255, 149, 83, 0.3);
}

.scard__act .btn--navy {
  box-shadow: 0 5px 16px rgba(11, 17, 64, 0.24);
}

/* 보조 액션(과정 상세·교육 일정 변경) = 작은 아웃라인 버튼. 주 버튼(48·채움/네이비)보다 한 톤 아래. */
.scard__link {
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #e8e6e3;
  background-color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: #636363;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.scard__link:hover {
  border-color: #0b1140;
  color: #0b1140;
  background-color: #f7f6f4;
}

.btn--file::before {
  content: "↓";
  font-weight: 700;
}

/* 교육예정 = 네이비소프트 박스(예정일) 안에 '교육 일정 변경' 버튼이 padding 두고 들어앉은 형태. */
.scard__upcoming {
  background-color: #ecedf3;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.scard__upcoming-date {
  font-size: 13.5px;
  font-weight: 700;
  color: #0b1140;
}

.scard__upcoming-change {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 8px;
  background-color: #fff;
  color: #0b1140;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(11, 17, 64, 0.14);
  transition: background-color 0.15s, border-color 0.15s;
}

.scard__upcoming-change:hover {
  background-color: #f7f6f4;
  border-color: #0b1140;
}

.prog {
  margin-top: 12px;
  max-width: 520px;
}

.prog__top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.prog__label {
  margin-right: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: #a8a4a0;
}

.prog__num {
  font-size: 22px;
  font-weight: 700;
  color: #ff9553;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.prog__num em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  margin-left: 1px;
}

/* 평가 응시 문턱을 진도바 위에 같이 적는다 */
.prog__gate {
  font-size: 11.5px;
  font-weight: 700;
  color: #a8a4a0;
}

.prog__rule {
  margin-top: 9px;
  font-size: 12px;
  color: #a8a4a0;
}

.prog .bar {
  margin-top: 0;
  height: 8px;
  background-color: #e8e6e3;
}

/* 사실관계 줄 — 표가 아니다. 라벨은 작게 위에, 값은 아래에, 사이는 얇은 선 하나. */
/* 정보영역 = 4칸 그리드(정원 3 : 평가 4 : 기준 4 : 리소스 auto). 칸 사이 세로 구분선으로 영역을 나눈다. */
.scard__foot {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 4fr 4fr auto;
  align-items: stretch;
  padding: 13px 20px;
}

/* 상단 구분선은 카드 끝까지 닿지 않게 좌우 인셋. 배경색 없음. */
.scard__foot::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 1px;
  background-color: #e8e6e3;
}

/* 오른쪽 = 과정 리소스/네비(학습자료 · 과정 상세). 액션 컬럼의 버튼(재수강 등 아웃라인)과 겹치지 않게
   '버튼'이 아니라 아이콘+텍스트 링크로. 여백으로 정보영역과 분리. */
.scard__res {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 28px;
}

.scard__reslink, .scard__detail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #0b1140;
  white-space: nowrap;
  transition: color 0.15s;
}

.scard__reslink:hover, .scard__detail:hover {
  color: #ff9553;
}

/* 아이콘 = 텍스트 오른쪽, 라운드 네모 칩(버튼 느낌). 학습자료=⤓(다운로드·화살표+밑줄) / 과정상세=→ */
.scard__reslink::after, .scard__detail::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background-color: #ecedf3;
  color: #0b1140;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s;
}

.scard__reslink::after {
  content: "⤓";
}

.scard__detail::after {
  content: "→";
}

.scard__reslink:hover::after, .scard__detail:hover::after {
  background-color: #0b1140;
  color: #fff;
}

/* 재응시 = 이 칸에서 유일한 '하는 액션'이라 링크가 아니라 버튼 모양으로 구분한다.
   다만 액션 컬럼의 주 버튼(.btn--primary)보다 작고 조용하게 — 카드에서 먼저 눌러야 할
   것은 여전히 '이어서 학습하기'이고, 재응시는 점수를 확인한 뒤의 다음 행동이다. */
.scard__retake {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  background-color: #fff;
  color: #ff9553;
  border: 1px solid rgba(255, 149, 83, 0.38);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.scard__retake:hover {
  background-color: #ff9553;
  color: #fff;
  border-color: #ff9553;
}

/* 횟수를 다 쓴 경우 — 감추지 않고 죽인 모양으로 남긴다. 눌러서 이유를 확인하는 자리다. */
.scard__retake.is-off,
.scard__retake.is-off:hover {
  background-color: #f7f6f4;
  color: #d8d5d1;
  border-color: #e8e6e3;
}

/* 전송 중(스크립트가 disabled 를 건다) — 두 번 눌러 두 번 초기화되는 것을 막는다 */
.scard__retake[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* fact = 2줄: [라벨 · 결과(em)] / [값(b)]. em(미응시/응시·현재점수)은 '결과'라 라벨 옆으로. */
.fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  padding: 0 18px;
  border-right: 1px solid #e8e6e3;
}

.fact:first-child {
  padding-left: 0;
}

.fact:nth-child(3) {
  border-right: 0;
  padding-right: 4px;
}

.fact > span {
  order: 1;
  font-size: 11.5px;
  font-weight: 600;
  color: #a8a4a0;
}

.fact > em {
  order: 2;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
}

.fact > b {
  order: 3;
  flex-basis: 100%;
  margin-top: 4px;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 700;
  color: #1f1e1c;
  letter-spacing: -0.02em;
}

.fact > b.is-none {
  color: #d8d5d1;
  font-weight: 600;
}

.fact > b i {
  font-style: normal;
  margin: 0 6px;
  color: #d8d5d1;
}

.fact > em.is-ok {
  color: #2a8f52;
}

.fact > em.is-bad {
  color: #d1433b;
}

.fact > em.is-wait {
  color: #636363;
}

/* 좁은 폭(≤md)에서 미응시/응시·현재점수를 값 아래 줄로 → fact 열이 좁아져 카드가 더 늦게까지 안 깨짐(패드 안정) */
@media (max-width: 860px) {
  .fact > em {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
}
/* ── 카드 세로스택(≤sm=600) ── 썸네일 크게(풀폭) → 정보 → 진도바 → 액션 → 정보 3박스 ──
   전환을 600으로 늦춤 = 패드(600~860)는 데스크톱 가로 카드 유지(위 ≤md 에서 값만 2줄로 축소). 데스크톱 grid 그대로. */
@media (max-width: 600px) {
  .scard__main {
    display: block;
    padding: 16px;
  }
  .scard__thumb {
    width: 100%;
    aspect-ratio: 16/9;
    margin-bottom: 14px;
  }
  .prog {
    max-width: none;
    margin-top: 12px;
  }
  /* 액션: 버튼 1개면 풀폭 / 2개 이상만 가로(안 맞으면 줄바꿈). 텍스트·박스는 풀폭. */
  .scard__act {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .scard__act > .btn {
    flex: 1 1 140px;
    width: auto;
  }
  .scard__act > .study__wait,
  .scard__act > .scard__link,
  .scard__act > .scard__upcoming {
    flex: 1 1 100%;
  }
  /* 정보영역: 3칸 박스 [][][] (라벨 위·값 아래) + 과정상세 버튼은 아래 풀폭 한 줄. */
  .scard__foot {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding: 4px 16px 12px;
    align-items: stretch;
  }
  .fact {
    display: block;
    padding: 9px 10px;
    border: 1px solid #e8e6e3;
    border-radius: 8px;
  }
  .fact:first-child {
    padding-left: 10px;
  }
  .fact:nth-child(3) {
    padding-right: 10px;
  }
  .fact > span {
    display: block;
    width: auto;
    margin-bottom: 4px;
  }
  .scard__res {
    grid-column: 1/-1;
    padding-left: 0;
    padding-top: 12px;
  }
}
.bar {
  margin-top: 14px;
  height: 8px;
  border-radius: 99px;
  background-color: #e8e6e3;
  overflow: hidden;
}

.bar__fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff9553, #ffb072);
}

.empty {
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  min-height: 340px;
  padding: 60px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty p {
  color: #636363;
  font-size: 16px;
  margin-bottom: 20px;
}

/* 비회원 수료증 조회 — 게이트가 아닌 실제 폼(로그인 유도와 목적이 다름). 타이포는 DS 프리셋. */
.cert-guest {
  max-width: 560px;
  margin: 0 auto;
}

.cert-guest__tit {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  text-align: center;
}

.cert-guest__desc {
  margin: 12px 0 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
  text-align: center;
}

.cert-guest .form__foot .btn {
  min-width: 200px;
}

.cert-guest__note {
  margin-top: 24px;
}

/* 수료증 목록 아래 안내(출력 방법·미결제 발급불가) — 카드/표 공통. 인라인 정리. */
.cert-note {
  margin-top: 16px;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
  line-height: 1.6;
}

/* 목록 표(수강신청 내역·수료증) 공통 — 인라인 스타일 정리(하드코딩/유틸 → 클래스) */
.tbl-scroll {
  overflow-x: auto;
}

.tbl-dash {
  color: #636363;
  font-size: 14px;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.orders-tbl {
  min-width: 760px;
}

.orders-tbl__no {
  font-size: 13px;
}

.orders-tbl__course {
  font-weight: 600;
}

.orders-tbl__notice {
  margin-top: 24px;
}

.cert-tbl {
  min-width: 820px;
}

/* 표 안 버튼(영수증·출력·확인서) = 알약 대신 둥근사각(§3-3 조밀 UI 규칙, 카드 버튼과 통일) */
.orders-tbl .btn, .cert-tbl .btn {
  border-radius: 8px;
}

/* 셀 세로 가운데(짧은 셀·버튼 정렬). 지브라는 base(.tbl--sch)에서 전역 제거됨. */
.orders-tbl td, .cert-tbl td {
  vertical-align: middle;
}

/* ── 모바일 레코드 카드(주문내역·수료증) — 데스크톱=표 / ≤md=카드. 가로 요약형(세로 스택 X). ── */
.rec-cards {
  display: none;
}

.rec-card {
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 12px;
  overflow: hidden;
}

.rec-card + .rec-card {
  margin-top: 12px;
}

.rec-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #e8e6e3;
}

.rec-card__headend {
  margin-left: auto;
}

.rec-card__date {
  font-size: 12px;
  font-weight: 600;
  color: #636363;
  font-variant-numeric: tabular-nums;
}

.rec-card__body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.rec-card__thumb {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 8px;
}

.rec-card__info {
  flex: 1;
  min-width: 0;
}

.rec-card__tit {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  color: #1f1e1c;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.rec-card__meta {
  margin-top: 5px;
  font-size: 12.5px;
  color: #636363;
  font-variant-numeric: tabular-nums;
}

.rec-card__meta i {
  font-style: normal;
  margin: 0 5px;
  color: #d8d5d1;
}

.rec-card__no {
  margin-top: 2px;
  font-size: 11.5px;
  color: #a8a4a0;
  font-variant-numeric: tabular-nums;
}

.rec-card__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #e8e6e3;
  background-color: #fff;
  color: #0b1140;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.rec-card__btn--navy {
  background-color: #0b1140;
  color: #fff;
  border-color: #0b1140;
}

.rec-card__btn.is-off {
  color: #a8a4a0;
  background-color: #f7f6f4;
  border-color: #e8e6e3;
}

.rec-card__extra {
  padding: 0 14px 12px;
}

.rec-card__extra .rec-card__btn {
  display: flex;
  width: 100%;
  height: 38px;
}

.rec-card__bank {
  margin: 0 14px 12px;
  padding: 9px 11px;
  background-color: #fdf3e3;
  border-radius: 8px;
  font-size: 12px;
  color: #b4700c;
  font-weight: 600;
  line-height: 1.5;
}

.rec-card__bank b {
  font-weight: 700;
}

@media (max-width: 860px) {
  .tbl-scroll {
    display: none;
  }
  .rec-cards {
    display: block;
  }
}
/* ── 수료증 카드형(표 tbl--sch 의 대안) ─────────────────────────────────────
   '발급'이 목적인 화면이라, 출력 버튼을 큼직하게 세우고 왼쪽 수료 도장으로 완료를
   한눈에 알린다. 모바일에서 표가 가로스크롤되던 문제(min-width:820)도 자연히 풀린다.
   결제 미완료 건은 도장을 죽이고(is-locked) 버튼을 잠근다. */
.cert-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.cert-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 2px 12px rgba(11, 17, 64, 0.05);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.cert-card:hover {
  border-color: #d8d5d1;
  box-shadow: 0 12px 32px rgba(11, 17, 64, 0.11);
  transform: translateY(-2px);
}

.cert-card__seal {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6f4ea;
  color: #2a8f52;
}

.cert-card__seal svg {
  width: 26px;
  height: 26px;
}

.cert-card.is-locked .cert-card__seal {
  background-color: #f2f1ef;
  color: #a8a4a0;
}

.cert-card__body {
  min-width: 0;
}

.cert-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.cert-card__tit {
  font-size: 18px;
  font-weight: 700;
  color: #1f1e1c;
  letter-spacing: -0.035em;
  line-height: 1.4;
}

.cert-card__meta {
  font-size: 13.5px;
  color: #636363;
  font-variant-numeric: tabular-nums;
}

.cert-card__meta i {
  font-style: normal;
  margin: 0 7px;
  color: #d8d5d1;
}

.cert-card__note {
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #b4700c;
}

.cert-card__act {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cert-card__act .btn {
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(11, 17, 64, 0.18);
}

.cert-card__act .btn--line {
  box-shadow: none;
}

@media (max-width: 860px) {
  .cert-cards {
    grid-template-columns: 1fr;
  }
  .cert-card {
    grid-template-columns: auto 1fr;
    gap: 12px 16px;
    padding: 18px 18px;
  }
  .cert-card__seal {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }
  .cert-card__seal svg {
    width: 22px;
    height: 22px;
  }
  .cert-card__act {
    grid-column: 1/-1;
  }
  .cert-card__act .btn {
    flex: 1;
  }
}
/* ── 내 강의실 셸 반응형 ──
   ≤lg(1080): 스티키 레일을 본문 위로 눕히고, 좁은 폭에서 답답한 2×2 대신 KPI 를 가로 막대로.
   ≤md(860): 다시 2×2(모바일은 4열이 너무 촘촘). 칸 구분선은 gap 모델이라 열 수와 무관하게 유지. */
@media (max-width: 1080px) {
  .myroom {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .myroom__rail {
    position: static;
  }
  .kpis {
    grid-template-columns: repeat(4, 1fr);
  }
  /* 요약 패널 = '내 현황'일 뿐이라 모바일에선 세로로 길게 쌓지 않고 가로로 압축한다
     (그래야 '수강 중인 과정' 카드가 위로 올라온다).
     프로필(상단 전체폭) → [도넛 | 수강중·미수료]. 가로배치라 구분선은 숨긴다. */
  .myroom__side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;
  }
  .myroom-prof {
    grid-column: 1/-1;
  }
  .myroom-div {
    display: none;
  }
  /* ring 박스를 걷어(도넛·메타를 패널 그리드에 직접 배치):
     [ 도넛(좌, 두 줄 span) | 수료·누적(우 상) / 수강중·미수료(우 하) ]
     도넛 카드는 오른쪽 열과 1:1 동폭·동높이로 채운다. */
  .myroom-ring {
    display: contents;
  }
  .myroom-ring__card {
    grid-column: 1;
    grid-row: 2/4;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
  }
  .myroom-ring__wrap, .myroom-ring__wrap svg {
    width: 96px;
    height: 96px;
  }
  .myroom-ring__ctr b {
    font-size: 24px;
  }
  /* 수료/전체·누적 = 수강중 위(오른쪽 열 상단), 왼쪽정렬 */
  .myroom-ring__meta {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
  }
  /* 수강중·미수료 = 메타 아래, 테두리 없는 간결한 리스트 */
  .myroom-stats {
    grid-column: 2;
    grid-row: 3;
    gap: 4px;
  }
  .myroom-stat {
    padding: 7px 2px;
  }
  /* 고객센터 배너는 모바일에선 숨긴다(데스크톱 레일에만 노출) — 현황만 간결하게. */
  .myroom-cs {
    display: none;
  }
}
@media (max-width: 860px) {
  .kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ---------- 15-2. 강의 플레이어 ---------- */
.player {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.player__stage {
  background: #0b1140;
  border-radius: var(--radius);
  overflow: hidden;
}

.player__video {
  position: relative;
  aspect-ratio: 16/9;
  background: radial-gradient(circle at 50% 40%, #1b2456, #0b1140);
}

.player__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 24px;
}

.player__ph-ch {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-2);
  letter-spacing: 0.04em;
}

.player__ph-name {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 80%;
}

.player__play {
  margin: 22px 0 16px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 22px;
  line-height: 66px;
  box-shadow: 0 8px 24px rgba(242, 101, 34, 0.5);
  transition: 0.15s;
}

.player__play:hover {
  transform: scale(1.06);
}

.player__ph.playing .player__play {
  opacity: 0.35;
}

.player__ph-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 340px;
  line-height: 1.5;
}

.player__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #0b1140;
}

.player__time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}

.player__track {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.player__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
  transition: width 0.3s linear;
}

.player__toggle {
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.player__toggle:hover {
  background: rgba(255, 255, 255, 0.26);
}

.player__meta {
  margin-top: 20px;
}

.player__tit {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
}

.player__sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--gray);
}

.player__nav {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.player__nav .btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.player__side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.player__total-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.player__total-head span {
  font-size: 14px;
  color: var(--gray);
  font-weight: 600;
}

.player__total-head b {
  font-size: 20px;
  font-weight: 800;
  color: var(--orange);
}

.player__total {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.player__list-tit {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
}

.chlist {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
}

.chitem {
  position: relative;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: 0.15s;
  background: #fff;
}

.chitem:hover {
  border-color: var(--navy);
}

.chitem.on {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(242, 101, 34, 0.16);
}

.chitem.locked {
  cursor: not-allowed;
  background: #f7f6f4;
  opacity: 0.72;
}

.chitem.locked:hover {
  border-color: var(--line);
}

.chitem__head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-right: 56px;
}

.chitem__no {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef1f9;
  color: #4a5480;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chitem.done .chitem__no {
  background: #1d8f4e;
  color: #fff;
}

.chitem.ing .chitem__no {
  background: var(--orange);
  color: #fff;
}

.chitem.on .chitem__no {
  background: var(--navy);
  color: #fff;
}

.chitem__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.chitem__meta {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 7px;
  font-size: 12px;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}

.chitem__pct {
  font-weight: 700;
  color: var(--navy);
}

.chitem.done .chitem__pct {
  color: #1d8f4e;
}

.chitem__bar {
  height: 5px;
  border-radius: 99px;
  background: #edeff6;
  overflow: hidden;
}

.chitem__bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), var(--orange-2));
  transition: width 0.3s;
}

.chitem.done .chitem__bar span {
  background: #1d8f4e;
}

.chitem__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: #eef1f9;
  color: #4a5480;
}

.chitem.ready .chitem__badge {
  background: #fdece3;
  color: #c2410c;
}

.chitem.ing .chitem__badge {
  background: #fff4e6;
  color: #b45309;
}

.chitem.done .chitem__badge {
  background: #e4f5ea;
  color: #1d8f4e;
}

.chitem.locked .chitem__badge {
  background: #e8e6e3;
  color: #a8a4a0;
}

/* ---------- 16. 하단 CTA / 푸터 ---------- */
.cta {
  background: #f9f9f8;
  padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 5vw, 72px);
}

.cta__card {
  position: relative;
  overflow: hidden;
  width: calc(100% - 2 * clamp(8px, 1.6vw, 18px));
  max-width: 1920px;
  margin: 0 auto;
  border-radius: 20px;
  min-height: clamp(400px, 47vh + 5vw, 600px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: #161616;
}

.cta__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -24%;
  height: 148%;
  z-index: 0;
  background-color: #161616;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.cta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 100%);
}

.cta__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cta__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(32px, 4.5vw, 60px) clamp(24px, 3vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cta__txt {
  min-width: 0;
}

.cta__tit {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.cta__sub {
  margin-top: 16px;
  max-width: 44ch;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
}

.cta__contact {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cta__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: 16px 20px;
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.cta__item:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.cta__item-k {
  grid-column: 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cta__item-s {
  grid-column: 1;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.cta__item-arr {
  grid-column: 2;
  grid-row: 1/span 2;
  display: inline-flex;
  color: rgba(255, 255, 255, 0.6);
}
.cta__item-arr svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta__item--tel {
  background: #fff;
  border-color: #fff;
  color: #0b1140;
}

.cta__item--tel:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(31, 24, 12, 0.12);
}

.cta__item--tel .cta__item-s {
  color: #636363;
}

.cta__item--tel .cta__item-arr {
  color: #0b1140;
}

@media (max-width: 860px) {
  .cta__card {
    min-height: 0;
  }
  .cta__contact {
    grid-template-columns: 1fr;
  }
}
.footer {
  background: var(--bg);
  color: #636363;
  font-size: 14px;
  padding: 48px 0 52px;
  border-top: 1px solid #e8e6e3;
} /* 배경=하단 회색존 = 배경 토큰(#f9f9f8) */
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid #d8d5d1;
  flex-wrap: wrap;
}

.footer__logo img {
  height: 26px;
  opacity: 0.85;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-weight: 600;
}

.footer__nav a:hover {
  color: var(--navy);
}

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

.footer__info {
  padding: 22px 0;
}

.footer__info p {
  margin-bottom: 5px;
}

.footer__info span {
  display: inline-block;
  margin-right: 8px;
  padding-right: 9px;
  border-right: 1px solid #cdd0dc;
}

.footer__info span:last-child {
  border-right: 0;
}

.footer__copy {
  margin-top: 12px;
  color: #8f95a8;
  font-size: 13px;
}

/* 인증마크 = 투명 PNG 가로 나열(회색 푸터 위 그대로) */
.footer__auth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.footer__auth img {
  display: block;
  height: 36px;
  width: auto;
}

/* 모바일(≤860) — 하단 플로팅 퀵바가 겹치니 여백 확보 + 인증마크 한 줄로 축소 */
@media (max-width: 860px) {
  .footer {
    padding-bottom: 110px;
  }
  .footer__auth {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .footer__auth li {
    flex: 1 1 0;
    min-width: 0;
  }
  .footer__auth img {
    width: 100%;
    height: 26px;
    object-fit: contain;
  }
}
/* ---------- 17. 퀵메뉴 (플로팅) ---------- */
.quick {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(11, 17, 64, 0.15);
  padding: 8px;
}

.quick__toggle {
  align-self: center;
  width: 100%;
  height: 30px;
  border: 0;
  border-radius: 12px;
  background-color: #ecedf3;
  color: #0b1140;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.quick__toggle::after {
  content: "−";
}
.quick__toggle:hover {
  filter: brightness(0.95);
}

body.quick-collapsed .quick__toggle::after {
  content: "+";
}

body.quick-collapsed .quick__toggle {
  height: 46px;
  font-size: 24px;
}

.quick__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.2s ease;
}

body.quick-collapsed .quick__list {
  max-height: 0;
  opacity: 0;
}

.quick__item {
  width: 62px;
  height: 60px;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #0b1140;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.quick__ico {
  display: inline-flex;
}

.quick__ico svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick__label {
  white-space: nowrap;
}

.quick__item:hover {
  background-color: #f7f6f4;
}

.quick__top {
  margin-top: 4px;
  width: 62px;
  height: 52px;
  font-size: 12px;
  background-color: #0b1140;
  color: #fff;
}
.quick__top:hover {
  background-color: #151d5c;
}

@media (max-width: 860px) {
  .quick {
    left: 8px;
    right: 8px;
    bottom: 14px;
    top: auto;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    border-radius: 99px;
    box-shadow: 0 12px 30px rgba(11, 17, 64, 0.18);
    padding: 8px 6px;
    overflow: visible;
  }
  .quick__list {
    align-items: flex-end;
  }
  .quick__toggle {
    display: none;
  }
  .quick__list {
    flex: 1;
    flex-direction: row;
    justify-content: space-between;
    gap: 2px;
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
  body.quick-collapsed .quick__list {
    max-height: none;
    opacity: 1;
  }
  .quick__item {
    flex: 1 1 0;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 6px 2px;
    gap: 4px;
    border-radius: 16px;
  }
  .quick__item:hover {
    background: none;
  }
  .quick__item:active {
    background-color: #f7f6f4;
  }
  .quick__ico svg {
    width: 21px;
    height: 21px;
  }
  .quick__label {
    font-size: 11px;
  }
  .quick__item--home .quick__ico {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(140deg, #151d5c 0%, #0b1140 70%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -32px;
    box-shadow: 0 6px 14px rgba(11, 17, 64, 0.26);
  }
  .quick__item--home .quick__ico svg {
    width: 25px;
    height: 25px;
  }
  .quick__item--home .quick__label {
    font-weight: 800;
  }
  .quick__top {
    position: fixed;
    right: 14px;
    bottom: 88px;
    left: auto;
    top: auto;
    width: 42px;
    height: 42px;
    flex: none;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(11, 17, 64, 0.22);
  }
}
/* ---------- 18. 메인 배너 + 로그인 영역 (기능정의서 §10) — 풀박스 사진 히어로 ---------- */
.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;
}

.mainvisual {
  position: relative;
  z-index: 1;
  color: #fff;
  overflow: hidden;
  width: calc(100% - 2 * clamp(8px, 1.6vw, 18px));
  max-width: 1920px;
  margin: 10px auto 0;
  border-radius: 20px;
  min-height: clamp(540px, 56vh + 8vw, 760px);
  background: linear-gradient(118deg, #1b1c1f 0%, #313338 62%, #3b3e43 100%);
}

.mainvisual__inner {
  position: static;
  display: block;
  max-width: none;
  padding: 0;
}

.mainvisual__stat {
  display: none;
}

/* 슬라이드 배너 — 풀박스, 슬라이드별 사진 꽉차게 */
.mbanner {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.mbanner__track {
  position: static;
  height: 100%;
}

.mbanner__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 44px max(22px, (100% - 1160px) / 2) 44px calc((100% - min(100%, 1400px)) / 2 + clamp(20px, 3vw, 40px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.mbanner__slide.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mbanner__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: center;
  will-change: transform;
}

.mbanner__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.46) 46%, rgba(0, 0, 0, 0.24) 74%, rgba(0, 0, 0, 0.12) 100%);
}

.mbanner__slide > * {
  position: relative;
  z-index: 2;
}

.mbanner__slide.is-navy::before {
  background-image: url("../img/main/main-hero-1.png");
}

.mbanner__slide.is-orange::before {
  background-image: url("../img/main/main-hero-2.png");
}

.mbanner__slide.is-teal::before {
  background-image: url("../img/main/main-hero-3.png");
}

@keyframes kb-pan-left {
  from {
    transform: scale(1.12) translateX(3.5%);
  }
  to {
    transform: scale(1.12) translateX(-3.5%);
  }
}
@keyframes kb-zoom-in {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.2);
  }
}
@keyframes kb-pan-up {
  from {
    transform: scale(1.18) translateY(3%);
  }
  to {
    transform: scale(1.18) translateY(-5%);
  }
}
.mbanner__slide.is-navy.on::before {
  animation: kb-pan-left 10s ease-out both;
}

.mbanner__slide.is-orange.on::before {
  animation: kb-zoom-in 10s ease-out both;
}

.mbanner__slide.is-teal.on::before {
  animation: kb-pan-up 10s ease-out both;
}

@keyframes mb-text-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mbanner__slide.on .mbanner__eyebrow {
  animation: mb-text-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}

.mbanner__slide.on .mbanner__tit {
  animation: mb-text-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}

.mbanner__slide.on .mbanner__desc {
  animation: mb-text-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.68s both;
}

@media (prefers-reduced-motion: reduce) {
  .mbanner__slide.on::before {
    animation: none;
    transform: scale(1.06);
  }
  .mbanner__slide.on .mbanner__eyebrow,
  .mbanner__slide.on .mbanner__tit,
  .mbanner__slide.on .mbanner__desc {
    animation: none;
  }
}
.mbanner__eyebrow {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: #ffb072;
  min-height: 22px;
  margin-bottom: 12px;
}

.mbanner__tit {
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.04em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  max-width: 600px;
  text-wrap: balance;
  min-height: 2.4em;
}

.mbanner__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.84);
  max-width: 42ch;
  min-height: 3.3em;
}

.mbanner__slide .btn {
  display: none;
}

/* 화살표 + dots — 하단 중앙에 함께 */
.mbanner__arrow {
  position: absolute;
  top: auto;
  bottom: 16px;
  z-index: 3;
  transform: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.32);
  transition: 0.15s;
}

.mbanner__arrow:hover {
  background: rgba(0, 0, 0, 0.55);
}

.mbanner__arrow--prev {
  left: auto;
  right: calc(50% + 46px);
}

.mbanner__arrow--next {
  right: auto;
  left: calc(50% + 46px);
}

.mbanner__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 23px;
  z-index: 3;
  display: flex;
  gap: 7px;
}

.mbanner__dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 0;
  transition: 0.15s;
}

.mbanner__dots button.on {
  width: 24px;
  border-radius: 99px;
  background: #ff9553;
}

/* 로그인 — 앱솔루트 플로팅(영역 차지 X), 콘텐츠 컬럼 우측·수직중앙 */
.mlogin {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  right: max(22px, (100% - 1160px) / 2);
  width: 300px;
  background: #fff;
  color: #1f1e1c;
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  min-height: 358px;
}

.mlogin__tit {
  font-size: 19px;
  font-weight: 800;
  color: #1f1e1c;
  letter-spacing: -0.03em;
  text-align: center;
}

.mlogin__hello {
  font-size: 25px;
  font-weight: 800;
  color: #0b1140;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.mlogin__hello b {
  color: #ff9553;
}

.mlogin__sub {
  margin-top: 6px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #636363;
  text-align: center;
}

.mlogin__form {
  display: grid;
  gap: 8px;
}

.mlogin__form .inp {
  font-size: 15px;
}

.mlogin__form .login-msg {
  margin-top: 4px;
}

.mlogin__form .btn {
  margin-top: 5px;
}

.mlogin__links {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #e8e6e3;
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 13.5px;
  color: #636363;
}

.mlogin__links a:hover {
  color: #0b1140;
  text-decoration: underline;
}

.mlogin__links .strong {
  color: #ff9553;
  font-weight: 800;
}

.mlogin__note {
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.6;
  color: #8f95a8;
  text-align: center;
}

.mlogin__note b {
  color: #636363;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mlogin__welcome {
  background-color: #f7f6f4;
  border-radius: 14px;
  padding: 32px 18px 28px;
  text-align: center;
  margin-bottom: 14px;
}

.mlogin__welcome .mlogin__sub {
  font-size: 15.5px;
  margin-bottom: 4px;
}

.mlogin__cta {
  margin-top: 14px;
}

.mlogin__quick {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mlogin__quick li {
  display: flex;
  padding: 5px;
}

.mlogin__quick li:nth-child(1) {
  border-right: 1px solid #e8e6e3;
}

.mlogin__quick a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 54px;
  border-radius: 8px;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0b1140;
  transition: background-color 0.15s, color 0.15s;
}
.mlogin__quick a svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mlogin__quick a:hover {
  background-color: #0b1140;
  color: #fff;
}

@media (max-width: 860px) {
  .mainvisual {
    min-height: 0;
    margin-top: 8px;
  }
  .mbanner {
    position: relative;
    inset: auto;
    height: 330px;
  }
  .mbanner__slide {
    padding-left: 20px;
    padding-right: 20px;
  }
  .mlogin {
    position: static;
    transform: none;
    width: auto;
    margin: 14px;
  }
}
.quick-access {
  position: relative;
  z-index: 0;
  width: calc(100% - 2 * clamp(8px, 1.6vw, 18px));
  max-width: 1920px;
  margin: -40px auto 0;
  background-color: #f9f9f8;
  border-radius: 0 0 20px 20px;
  padding: clamp(64px, 7vw, 92px) 0 clamp(30px, 3.2vw, 46px);
}

.quick-access .inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  text-align: center;
  text-decoration: none;
}

.qa__ic {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: transparent;
  color: #0b1140;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease;
}
.qa__ic img {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: contain;
}

.qa:hover .qa__ic {
  background-color: #fff;
}

.qa__k {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1f1e1c;
  transition: color 0.18s ease;
}

.qa:hover .qa__k {
  color: #0b1140;
}

@media (max-width: 860px) {
  .quick-access .inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 8px;
  }
  .qa__ic {
    width: 60px;
    height: 60px;
  }
  .qa__ic svg {
    width: 26px;
    height: 26px;
  }
  .qa__k {
    font-size: 13.5px;
  }
}
/* ---------- 19. 수강 정책 표기 (수강 화면) ---------- */
.study__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 12px;
}

.study__facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
}

.study__facts li span {
  font-size: 13px;
  color: var(--gray);
}

.study__facts li b {
  font-weight: 800;
  color: var(--navy);
}

.study__facts li b.is-ok {
  color: #1a7a44;
}

.study__facts li b.is-bad {
  color: #b02b2b;
}

.study__facts--wide {
  gap: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.study__facts--wide li {
  display: block;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.study__facts--wide li:nth-child(-n+2) {
  border-top: 0;
}

.study__facts--wide li:nth-child(odd) {
  border-left: 0;
}

.study__facts--wide li span {
  display: block;
  margin-bottom: 6px;
}

.study__facts--wide li b {
  font-size: 18px;
}

.study__wait {
  display: block;
  padding: 12px 0;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #8b91a6;
  background: #f4f6fa;
  border-radius: 8px;
}

.btn.is-off {
  color: #a8a4a0;
  border-color: #d8d5d1;
  cursor: pointer;
}

/* 본인인증 게이트 */
.cert-head {
  margin-bottom: 28px;
  text-align: center;
}

.cert-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 16px;
}

.cert-box--warn {
  border-color: #f3c9b4;
  background: #fff8f4;
}

.cert-box__tit {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}

.cert-box__txt {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray);
}

.cert-box__list {
  margin-top: 14px;
}

.cert-act {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.cert-note {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: #8f95a8;
}

.auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding: clamp(48px, 6vw, 72px) 20px;
  background-color: #fff;
}

.auth__operator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #a8a4a0;
}

.auth__operator .logo--group {
  transform: scale(0.7);
  transform-origin: center;
  opacity: 0.85;
}

.auth__split {
  display: grid;
  grid-template-columns: 340px 1fr;
  width: 100%;
  max-width: 880px;
  min-height: 520px;
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(31, 24, 12, 0.07);
  overflow: hidden;
}

.auth__brand-panel {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 28px;
  background-color: #f2f1ef;
  border-right: 1px solid #e8e6e3;
  text-align: center;
}

.auth__brand-center {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth__brand-center .logo--safety {
  margin-bottom: 16px;
}

.auth__brand-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

.auth__cred {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e8e6e3;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #a8a4a0;
  line-height: 1.7;
}

.auth__cred b {
  color: #636363;
  font-weight: 600;
}

.auth__form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
}

.auth__title {
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  text-align: center;
}

.auth__sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #a8a4a0;
  text-align: center;
  margin: 8px 0 28px;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth__form .btn {
  margin-top: 8px;
}

.auth__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

.auth__links a {
  color: #636363;
  text-decoration: none;
}

.auth__links a:hover {
  color: #0b1140;
  text-decoration: underline;
}

.auth__links .auth__signup {
  color: #c85a1e;
  font-weight: 700;
}

.auth__note {
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #a8a4a0;
  text-align: center;
  line-height: 1.6;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f0efec;
}

@media (max-width: 860px) {
  .auth {
    min-height: 0;
    padding: 32px 16px;
  }
  .auth__split {
    grid-template-columns: 1fr;
    max-width: 440px;
    min-height: 0;
  }
  .auth__form-panel {
    order: 1;
    padding: 32px 24px;
  }
  .auth__brand-panel {
    order: 2;
    padding: 28px 24px;
    border-right: 0;
    border-top: 1px solid #e8e6e3;
  }
  .auth__brand-center {
    margin: 0;
  }
  .auth__brand-center .logo--safety {
    transform: scale(0.85);
  }
  .auth__cred {
    margin-top: 16px;
  }
  .auth__operator {
    margin-top: 24px;
  }
}
@keyframes guideHeroZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.03);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .guide-hero__img {
    animation: guideHeroZoom 3s ease-out both;
  }
}
.guide-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 18/5;
  margin-bottom: clamp(40px, 6vw, 74px);
  background-color: #e8e6e3;
}
.guide-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guide-hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
}
.guide-hero__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
@media (max-width: 860px) {
  .guide-hero {
    aspect-ratio: 16/9;
  }
}

.guide-ov {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  margin-bottom: clamp(44px, 9vw, 112px);
}
.guide-ov__left, .guide-ov__body {
  min-width: 0;
}
.guide-ov__head {
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}
.guide-ov__law {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #636363;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  font-weight: 400;
}
.guide-ov__law svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: #a8a4a0;
}
@media (max-width: 860px) {
  .guide-ov__law {
    font-size: 13px;
  }
  .guide-ov__law svg {
    width: 13px;
    height: 13px;
  }
}
.guide-ov__body {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.005em;
  font-size: clamp(16px, 2.2vw, 19px);
  color: #4a4844;
  overflow-wrap: break-word;
}
.guide-ov__body b {
  color: #1f1e1c;
  font-weight: 700;
}
.guide-ov__body p + p {
  margin-top: 16px;
}
@media (max-width: 860px) {
  .guide-ov {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.guide-spec {
  margin-bottom: clamp(44px, 9vw, 112px);
}
.guide-spec__box {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: 20px;
  background: var(--bg);
}
@media (max-width: 860px) {
  .guide-spec__box {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: clamp(18px, 4vw, 24px);
  }
}
.guide-spec__main {
  min-width: 0;
  order: 2;
}
@media (max-width: 860px) {
  .guide-spec__main {
    order: 1;
    border-top: 1px solid #e8e6e3;
    padding-top: 20px;
  }
}
.guide-spec__list {
  margin: 0;
  border-top: 2px solid #a8a4a0;
  border-bottom: 2px solid #a8a4a0;
}
.guide-spec__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #e8e6e3;
}
.guide-spec__row:last-child {
  border-bottom: 0;
}
.guide-spec__row dt {
  color: #1f1e1c;
  font-weight: 700;
  font-size: 16px;
}
.guide-spec__row dd {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: #4a4844;
  overflow-wrap: break-word;
}
.guide-spec__row dd b {
  color: #1f1e1c;
  font-weight: 700;
}
@media (max-width: 860px) {
  .guide-spec__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
}
.guide-spec__muted {
  color: #a8a4a0;
  font-size: 16px;
}
.guide-spec__crit {
  display: grid;
  gap: 12px;
}
.guide-spec__crit li {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.5;
  color: #1f1e1c;
}
.guide-spec__crit li b {
  color: #a8a4a0;
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 860px) {
  .guide-spec__crit li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.guide-spec__aside {
  min-width: 0;
  order: 1;
  display: flex;
}
@media (max-width: 860px) {
  .guide-spec__aside {
    order: 0;
  }
}
.guide-spec__topics {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.guide-spec__aside-tit {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #ff9553;
  font-weight: 700;
  margin-bottom: 20px;
}
.guide-spec__ph-note {
  margin-top: 20px;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #a8a4a0;
}
.guide-spec__media {
  aspect-ratio: 4/3;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8d5d1;
  border-radius: 14px;
  background-color: #fff;
}
.guide-spec__media span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #a8a4a0;
}
.guide-spec__benefits {
  margin-top: auto;
  display: grid;
  gap: 16px;
}
.guide-spec__benefits li {
  position: relative;
  padding-left: 20px;
}
.guide-spec__benefits li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #636363;
}
.guide-spec__benefits li b {
  display: block;
  color: #1f1e1c;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
.guide-spec__benefits li span {
  display: block;
  margin-top: 4px;
  color: #636363;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
}
@media (max-width: 860px) {
  .guide-spec__benefits {
    gap: 12px;
  }
}
.guide-spec__notes {
  margin-top: 24px;
  display: grid;
  gap: 8px;
}
.guide-spec__notes li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}
.guide-spec__notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  color: #a8a4a0;
}
.guide-spec__ask {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}
.guide-spec__ask a {
  color: #0b1140;
  font-weight: 700;
  text-decoration: underline;
}
.guide-spec__ask b {
  color: #0b1140;
  font-weight: 700;
}
.guide-spec__ask-ico {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.12em;
  color: #c85a1e;
}

.guide-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.guide-points__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 99px;
  background-color: #ffead8;
  color: #c85a1e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: 700;
}
.guide-points__item svg {
  width: 15px;
  height: 15px;
}

.guide-courses__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.guide-courses__tit {
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}

.guide-courses__all-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d8d5d1;
  background-color: #fff;
  color: #1f1e1c;
  transition: 0.15s;
}
.guide-courses__all-btn svg {
  width: 20px;
  height: 20px;
}
.guide-courses__all-btn:hover {
  background-color: #0b1140;
  color: #fff;
  border-color: #0b1140;
}

.guide-ctabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guide-ctab {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background-color: #f2f1ef;
  color: #a8a4a0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.guide-ctab:hover {
  background-color: #e8e6e3;
  color: #1f1e1c;
}
.guide-ctab.is-on {
  background-color: #ff9553;
  color: #fff;
  font-weight: 700;
}
.guide-ctab.is-on:hover {
  background-color: #f57f38;
}

.guide-cpanel {
  display: none;
}
.guide-cpanel.is-on {
  display: block;
}
.guide-cpanel .courses {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) {
  .guide-cpanel .courses {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .guide-cpanel .courses {
    grid-template-columns: 1fr;
  }
}
.guide-cpanel__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
  margin-bottom: 20px;
}
.guide-cpanel__more {
  margin-top: 24px;
  text-align: right;
}
.guide-cpanel__more a {
  color: #c85a1e;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.guide-cpanel__more a:hover {
  text-decoration: underline;
}

.guide-courses__more {
  margin-top: clamp(40px, 6vw, 68px);
  text-align: center;
}

.crit__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.crit__head .sec__head {
  margin-bottom: 0;
}
.crit__head .crit__tabs {
  margin-bottom: 0;
}
.crit__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 24px;
}
.crit__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-bottom: 2px solid #e8e6e3;
  background: transparent;
  cursor: pointer;
  color: #a8a4a0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.crit__tab:hover {
  color: #0b1140;
}
.crit__tab.is-on {
  color: #0b1140;
  font-weight: 700;
  border-bottom-color: #0b1140;
}
.crit__panel {
  display: none;
}
.crit__panel.is-on {
  display: block;
}
.crit__panel-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
  margin-bottom: 20px;
}
.crit__panel-desc b {
  color: #4a4844;
  font-weight: 700;
}
.crit__panel-desc a {
  color: #0b1140;
  font-weight: 700;
  text-decoration: underline;
}
.crit__cta {
  margin-top: clamp(40px, 6vw, 68px);
  text-align: center;
}

@media print {
  .crit__tabs {
    display: none;
  }
  .crit__panel {
    display: block !important;
  }
  .crit__panel + .crit__panel {
    margin-top: 32px;
  }
}
.edu-intro__ov {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.edu-intro__ov .guide-ov__body {
  margin-top: 20px;
}
.edu-intro__ov .guide-ov__body p {
  word-break: keep-all;
}
.edu-intro__lawnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 15px;
  color: #636363;
  font-weight: 400;
}
.edu-intro__lawnote svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #a8a4a0;
}
.edu-intro__ov .guide-ov__body .edu-intro__lawnote + p {
  margin-top: 8px;
}
.edu-intro__title {
  font-size: clamp(34px, 5.4vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.045em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.04em;
}
.edu-intro__lead {
  margin-top: 0;
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}
.edu-intro__text {
  margin-top: 28px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: #4a4844;
}
.edu-intro__text b {
  font-weight: 700;
}
.edu-intro__law {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: #636363;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  font-weight: 400;
}
.edu-intro__law svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: #a8a4a0;
}
.edu-intro__actions {
  margin-top: clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
@media (max-width: 860px) {
  .edu-intro__body {
    max-width: none;
  }
}

.edu-legal {
  max-width: none;
}

.law-box {
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  overflow: hidden;
}

.law-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.law-grid > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e6e3;
  border-right: 1px solid #e8e6e3;
}
.law-grid > div:nth-child(2n) {
  border-right: 0;
}
.law-grid > div:nth-last-child(-n+2) {
  border-bottom: 0;
}
.law-grid dt {
  color: #0b1140;
  font-weight: 700;
  font-size: 15px;
}
.law-grid dd {
  margin: 0;
  color: #4a4844;
  font-size: 16px;
  overflow-wrap: break-word;
}

.law-penalty {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 20px;
  border-top: 1px solid #e8e6e3;
  background-color: #ffead8;
}
.law-penalty__k {
  color: #c85a1e;
  font-weight: 700;
  font-size: 15px;
}
.law-penalty__v {
  color: #1f1e1c;
  font-weight: 700;
  font-size: 16px;
}
.law-penalty__v em {
  font-style: normal;
  color: #636363;
  font-weight: 400;
}

@media (max-width: 860px) {
  .law-grid {
    grid-template-columns: 1fr;
  }
  .law-grid > div {
    grid-template-columns: 1fr;
    gap: 4px;
    border-right: 0;
    border-bottom: 1px solid #e8e6e3;
  }
  .law-grid > div:nth-last-child(-n+2) {
    border-bottom: 1px solid #e8e6e3;
  }
  .law-grid > div:last-child {
    border-bottom: 0;
  }
  .law-penalty {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.tbl--card {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-top: 1px solid #e8e6e3;
  border-radius: 14px;
  overflow: hidden;
}
.tbl--card th, .tbl--card td {
  padding: 16px 20px;
  border-bottom: 1px solid #e8e6e3;
  font-size: 16px;
  text-align: left;
  color: #4a4844;
}
.tbl--card thead th {
  background: #f2f1ef;
  color: #1f1e1c;
  font-weight: 700;
  width: auto;
  text-align: left;
  border-bottom: 1px solid #e8e6e3;
}
.tbl--card tbody tr:last-child > td {
  border-bottom: 0;
}
.tbl--card tbody tr:nth-child(even) td {
  background: transparent;
}
.tbl--card thead th.col-key {
  background-color: #ecedf3;
}
.tbl--card tbody tr td.col-key {
  background-color: #ecedf3;
  font-weight: 600;
}
.tbl--card .col-key {
  padding-left: 28px;
  padding-right: 28px;
  white-space: nowrap;
}

.tbl--sch.tbl--card .row-top > td {
  border-top: 1px solid #d8d5d1;
}

.edu-who-notes {
  margin: 0 0 32px;
}
.edu-who-notes ul {
  margin: 0;
}
.edu-who-notes li {
  list-style: none;
  color: #4a4844;
  font-size: 16px;
  line-height: 1.7;
}
.edu-who-notes li + li {
  margin-top: 8px;
}
.edu-who-notes b {
  font-weight: 700;
}

.edu-aud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1080px) {
  .edu-aud {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 860px) {
  .edu-aud {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.edu-aud__card {
  padding: 24px;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  background: transparent;
  transition: background-color 0.18s, border-color 0.18s;
}
.edu-aud__card:hover {
  background-color: #f7f6f4;
  border-color: #d8d5d1;
}
@media (max-width: 860px) {
  .edu-aud__card {
    padding: 16px;
  }
}

.edu-aud__icon {
  display: block;
  margin-bottom: 12px;
  color: #ff9553;
}
.edu-aud__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.edu-aud__name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.edu-aud__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
  line-height: 1.6;
}

.gi__lead {
  max-width: 760px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: #4a4844;
  margin-bottom: 32px;
}
.gi__lead strong {
  color: #0b1140;
  font-weight: 700;
}
.gi__lead a {
  color: #0b1140;
  font-weight: 700;
  text-decoration: underline;
}
.gi__eyebrow {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.12em;
  color: #ff9553;
  text-transform: uppercase;
  display: none;
  margin-bottom: 8px;
}
.gi__h {
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  margin-bottom: 16px;
}
.gi__block {
  margin-top: 48px;
}
.gi__block-h {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  margin-bottom: 20px;
}

.guide-info .sub {
  display: block;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #a8a4a0;
  margin-top: 4px;
  font-weight: 400;
}

.gi-matrix th:not(:first-child), .gi-matrix td:not(:first-child) {
  text-align: center;
}
.gi-matrix td:not(:first-child) {
  font-weight: 700;
}
.gi-matrix .o {
  color: #ff9553;
}
.gi-matrix .o--strong {
  color: #ff9553;
  position: relative;
}
.gi-matrix .x {
  color: #a8a4a0;
  font-weight: 400;
}

.gi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.gi-card {
  background-color: #fff;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(31, 24, 12, 0.05);
}
.gi-card__no {
  display: block;
  color: #ff9553;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.gi-card__t {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  margin-bottom: 8px;
}
.gi-card__d {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #4a4844;
}

.gi-note {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 8px;
  background-color: #fdf3e3;
  border: 1px solid #b4700c;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #4a4844;
}
.gi-note strong {
  color: #b4700c;
  font-weight: 700;
}

.gi-refund {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.gi-refund__case {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
}
.gi-refund__case-t {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
  font-weight: 700;
  margin-bottom: 20px;
}
.gi-refund .tbl--sch {
  width: 100%;
  margin-top: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  border-collapse: collapse;
  border-top: 2px solid #a8a4a0;
  border-bottom: 2px solid #a8a4a0;
}
.gi-refund .tbl--sch tbody tr:nth-child(even) td {
  background: transparent;
}
.gi-refund .tbl--sch thead th {
  background: transparent;
  border-bottom: 1px solid #e8e6e3;
  padding: 12px 0;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #a8a4a0;
  font-weight: 600;
  text-align: left;
}
.gi-refund .tbl--sch thead th:last-child {
  text-align: right;
}
.gi-refund .tbl--sch tbody td {
  padding: 16px 0;
  border-bottom: 1px solid #e8e6e3;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #1f1e1c;
  font-weight: 700;
  text-align: left;
}
.gi-refund .tbl--sch tbody td:last-child {
  text-align: right;
  color: #ff9553;
  white-space: nowrap;
}
.gi-refund .tbl--sch tbody td.is-none {
  color: #a8a4a0;
  font-weight: 600;
}
.gi-refund .tbl--sch tbody tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 860px) {
  .gi-refund {
    grid-template-columns: 1fr;
  }
}

/* ---------- 20. 반응형 ---------- */
/* ⚠ 퀵메뉴 반응형은 layout/_quick.scss 가 전담. 옛 .quick 반응형 규칙 제거(2026-08-25) — 세로 독을 가로로 뒤집어 깨지던 문제. */
@media (max-width: 1080px) {
  /* 메뉴 6개가 원래 크기로는 안 들어간다(로고 167 + 여백 56 + 메뉴 772 ≈ 995px 필요).
     햄버거로 접기(≤860) 전에 한 단계 줄여 태블릿에서도 메뉴를 그대로 쓴다. */
  .gnb {
    margin-left: 22px;
  }
  .gnb__item > a {
    padding: 0 13px;
    font-size: 16px;
  }
  .gnb__sub ul {
    padding-left: 195px;
  } /* 줄어든 로고 여백에 드롭다운 시작점을 맞춘다 */
  .targets {
    grid-template-columns: repeat(2, 1fr);
  }
  .courses {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .detail {
    grid-template-columns: 1fr;
  }
  .buybox {
    position: static;
  }
  /* .kpis / .myroom 반응형은 pages/_mypage(내 강의실 셸)이 소유 — gap 모델이라 여기 보더 오버라이드 불필요 */
  .scard__main {
    grid-template-columns: 150px 1fr;
  }
  .scard__act {
    grid-column: 1/-1;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
  }
  .player {
    grid-template-columns: 1fr 300px;
  }
  .mainvisual__inner {
    grid-template-columns: 1fr 300px;
  }
  .mbanner__slide {
    padding: 38px 40px;
  }
  .mbanner__tit {
    font-size: 32px;
  }
  .mbanner__dots {
    left: 40px;
  }
}
@media (max-width: 860px) {
  .utilbar__tel {
    display: none;
  }
  .header__inner {
    height: 62px;
  }
  .header__logo img {
    height: 24px;
  }
  .header__toggle {
    display: block;
  }
  /* 모바일 드로어 — 통헤더 아래에 붙고 **실제로 보이는 화면 바닥까지만** 쓴다.
     예전에는 top:62px · max-height:calc(100vh - 62px) 였고 둘 다 틀렸다.
       (1) 62px 은 헤더 높이일 뿐, 그 위에 있는 띠(.utilbar 38px)를 빼지 않았다.
       (2) 모바일 브라우저의 100vh 는 주소창이 접힌 '큰 뷰포트' 기준이라 실제 보이는
           높이보다 크다(기기에 따라 50~100px).
     둘이 겹쳐 드로어가 화면 밖까지 내려갔고, 스크롤은 그 밖으로 나간 컨테이너 안에서만
     돌아서 '자주 묻는 질문' 아래 항목에 아예 닿지 못했다.
     모바일에서는 .gnb__sub 가 전부 펼쳐진 상태(아래 규칙)라 목록이 길고, 담당자 계정은
     '기업 관리' 5개가 더 붙어 특히 심했다.

     top 은 100% 로 둔다 — 스크롤 축소로 헤더가 62→60px 이 되어도 따라 붙는다.
     높이는 dvh(주소창을 반영하는 동적 뷰포트)로 잡고, 못 읽는 브라우저를 위해
     바로 앞줄에 vh 폴백을 남긴다. 값 100px = 띠 38 + 헤더 62. */
  .gnb {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS 관성 스크롤 */
    overscroll-behavior: contain; /* 끝까지 내렸을 때 뒤 페이지가 딸려 움직이지 않게 */
    /* 마지막 줄이 홈 인디케이터에 가리지 않게 — env() 를 모르면 12px 로 떨어진다 */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .gnb.open {
    display: block;
  }
  .gnb__list {
    display: block;
  }
  .gnb__item > a {
    line-height: 1;
    padding: 18px 20px;
    border-bottom: 1px solid #f0efec;
  }
  .gnb__item.on > a {
    box-shadow: none;
  }
  .gnb__sub {
    position: static;
    display: block;
    box-shadow: none;
    padding: 10px 0 14px;
    background: #fafbfe;
  }
  .gnb__sub ul {
    padding: 0 20px;
    display: block;
  }
  .hero__inner {
    padding: 56px 20px 52px;
  }
  .hero__tit {
    font-size: 30px;
  }
  .hero__desc {
    font-size: 16px;
  }
  .hero__stat {
    gap: 26px;
    margin-top: 36px;
  }
  /* 메인 배너: 배너 위 / 로그인 아래로 스택 */
  .mainvisual {
    padding: 26px 0 32px;
  }
  .mainvisual__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mainvisual__stat {
    gap: 26px;
    margin-top: 22px;
  }
  .mainvisual__stat div b {
    font-size: 24px;
  }
  .mbanner {
    min-height: 300px;
  }
  .mbanner__slide {
    padding: 32px 24px;
  }
  .mbanner__tit {
    font-size: 26px;
  }
  .mbanner__desc {
    font-size: 15px;
  }
  .mbanner__arrow {
    width: 34px;
    height: 34px;
    font-size: 20px;
  }
  .mbanner__arrow--prev {
    left: 8px;
  }
  .mbanner__arrow--next {
    right: 8px;
  }
  .mbanner__dots {
    left: 24px;
    bottom: 18px;
  }
  .study__facts--wide {
    grid-template-columns: 1fr;
  }
  .study__facts--wide li {
    border-left: 0;
  }
  .study__facts--wide li:nth-child(2) {
    border-top: 1px solid var(--line);
  }
  .cert-box {
    padding: 20px;
  }
  .cert-act .btn {
    width: 100%;
  }
  .sec {
    padding: 54px 0;
  }
  .sec__tit {
    font-size: 26px;
  }
  /* .subhead 는 clamp 로 반응형 처리 (layout/_subhead) — 여기 오버라이드 제거 */
  .courses, .targets, .split {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .form {
    padding: 24px 20px;
  }
  .form__row {
    display: block;
    padding: 12px 0;
  }
  .form__label {
    padding: 0 0 8px;
  }
  .cta__inner {
    display: block;
    padding: 36px 20px;
  }
  .cta__btns {
    margin-top: 22px;
  }
  .cta__tit {
    font-size: 22px;
  }
  .scard__main {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }
  .scard__thumb {
    aspect-ratio: 16/7;
  }
  .scard__act {
    grid-column: auto;
    grid-auto-flow: row;
  }
  .scard__foot {
    padding: 0 18px;
  }
  /* 좁은 폭에서는 세로선 대신 가로선으로 나눈다 — 값이 줄바꿈돼도 칸이 어긋나지 않는다 */
  .fact {
    width: 100%;
    padding: 13px 0;
    margin-right: 0;
    border-right: 0;
    border-top: 1px solid #e9ecf4;
  }
  .fact:first-child {
    border-top: 0;
  }
  /* 플레이어: 영상 위 / 차시목록 아래로 스택 */
  .player {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .player__side {
    position: static;
  }
  .chlist {
    max-height: none;
  } /* 모바일: 내부 스크롤 대신 페이지와 함께 흐르게 */
  .player__ph-name {
    font-size: 18px;
    max-width: 90%;
  }
  .player__play {
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    margin: 16px 0 12px;
  }
  .player__nav {
    flex-direction: column;
    gap: 8px;
  }
  .player__nav .btn {
    width: 100%;
  }
  .footer__info span {
    display: block;
    margin: 0 0 3px;
    padding: 0;
    border: 0;
  }
}
/* 혼합과정 — 카드 + 할인 안내를 한 칸으로 묶는다 (.courses 는 3열 그리드)
   과정 카드는 전역 보더리스지만, 여기선 아래 .mix-note 와 한 테두리 박스로 붙여야 해
   이 문맥에서만 테두리 박스를 복원한다(썸네일 라운드·그림자도 끈다). */
.mix-item {
  display: flex;
  flex-direction: column;
}

.mix-item .course-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.mix-item .course-card .course-card__thumb {
  border-radius: 0;
  box-shadow: none;
}

.mix-item .course-card .course-card__body {
  padding: 20px 22px 22px;
}

/* 카드만 떠오르면 아래 안내와 어긋나 보인다 */
.mix-item .course-card:hover {
  transform: none;
}

.mix-item .course-card:hover .course-card__thumb {
  box-shadow: none;
}

.mix-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fff;
  font-size: 14px;
}

.mix-note__sum {
  color: #9aa1ad;
  text-decoration: line-through;
}

.mix-note__arrow {
  color: #9aa1ad;
}

.mix-note__total {
  color: var(--navy);
  font-size: 18px;
  font-weight: 800;
}

.mix-note__off {
  padding: 2px 8px;
  border-radius: 4px;
  background: #fbeceb;
  color: #c0392b;
  font-size: 12px;
  font-weight: 700;
}

.mix-note .btn {
  margin-left: auto;
}

/* 혼합 쌍 카드 (수강신청 리스트) — .courses 3열 그리드 안에 들어간다.
   상세 하단의 .mix-item/.mix-note 와는 별개다. 그쪽은 카드+안내를 위아래로 붙인 것이고
   이건 쌍 하나가 카드 한 장이다. */
.mix-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  overflow: hidden;
  transition: 0.2s;
}

.mix-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.mix-card__thumb {
  position: relative;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  padding: 0 20px;
}

.mix-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.mix-card__plus {
  font-size: 14px;
  opacity: 0.8;
}

.mix-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mix-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mix-card__tit {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--ink);
  flex: 1;
}

.mix-card__tit span {
  display: block;
  margin-top: 4px;
  color: var(--gray);
  font-weight: 600;
}

.mix-card__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mix-card__sum {
  color: #9aa1ad;
  text-decoration: line-through;
  font-size: 14px;
}

.mix-card__total {
  color: var(--navy);
  font-size: 14px;
}

.mix-card__total b {
  font-size: 22px;
  font-weight: 800;
}

.mix-card__off {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fbeceb;
  color: #c0392b;
  font-size: 12px;
  font-weight: 700;
}

/* 페이저 = components/_pager.scss 로 단일화(여기 중복 제거) */
/* 섹션 제목 옆 '전체 보기' 링크 */
.sec__more {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
}

.sec__more:hover {
  text-decoration: underline;
}

/* 과정명 검색 (courses.php 필터바 마지막 줄) */
.filter-bar__search {
  align-items: center;
}

.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.searchbox__input {
  width: 260px;
  max-width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}

.searchbox__input:focus {
  outline: none;
  border-color: var(--navy);
}

.searchbox__btn {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.searchbox__btn:hover {
  opacity: 0.9;
}

.searchbox__clear {
  font-size: 13px;
  color: var(--gray);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .searchbox__input {
    width: 100%;
  }
}
/* 혼합과정 — 카드 + 할인 안내를 한 칸으로 묶는다 (.courses 는 3열 그리드) */
.mix-item {
  display: flex;
  flex-direction: column;
}

.mix-item .course-card {
  flex: 1;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 카드만 떠오르면 아래 안내와 어긋나 보인다 */
.mix-item .course-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

.mix-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fff;
  font-size: 14px;
}

.mix-note__sum {
  color: #9aa1ad;
  text-decoration: line-through;
}

.mix-note__arrow {
  color: #9aa1ad;
}

.mix-note__total {
  color: var(--navy);
  font-size: 18px;
  font-weight: 800;
}

.mix-note__off {
  padding: 2px 8px;
  border-radius: 4px;
  background: #fbeceb;
  color: #c0392b;
  font-size: 12px;
  font-weight: 700;
}

.mix-note .btn {
  margin-left: auto;
}

/* 혼합 쌍 카드 (수강신청 리스트) — course-card 와 통일: 보더리스(썸네일 라운드+그림자, 본문은 바탕 위).
   할인 딱지는 썸네일 안(우상단). 상세 하단의 .mix-item/.mix-note 와는 별개.
   ⚠ base/_responsive.scss 에 같은 셀렉터 잔재가 있으나 이 파일이 뒤에 로드돼 이 정의가 이김
      → 보더/배경 등 옛 값은 여기서 명시적으로 무력화. */
.mix-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.mix-card:hover {
  transform: none;
  box-shadow: none;
}

.mix-card:hover .mix-card__thumb {
  box-shadow: 0 4px 20px rgba(31, 24, 12, 0.07);
}

.mix-card:hover .mix-card__tit {
  color: #0b1140;
}

.mix-card__thumb {
  position: relative;
  aspect-ratio: 16/10;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  padding: 0 20px;
  box-shadow: 0 1px 2px rgba(31, 24, 12, 0.05);
  transition: box-shadow 0.25s ease;
}

.mix-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #0b1140;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.mix-card__off {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  margin: 0;
  background-color: #ff9553;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  padding: 4px 8px;
  border-radius: 6px;
}

.mix-card__plus {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.8;
}

.mix-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 4px 0;
}

.mix-card__meta {
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mix-card__cat {
  color: #ff9553;
  font-weight: 700;
}

.mix-card__tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  line-height: 1.45;
  color: #1f1e1c;
  margin-top: 4px;
  flex: none;
  transition: color 0.2s ease;
}

.mix-card__tit span {
  display: block;
  margin-top: 4px;
  color: #636363;
  font-weight: 600;
  font-size: 15px;
}

.mix-card__bottom {
  display: contents;
}

.mix-card__foot {
  margin-top: 8px;
  border-top: 0;
  padding-top: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.mix-card__tags {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mix-card__tags .tag {
  display: inline-flex;
  align-items: center;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  padding: 4px 12px;
  border-radius: 99px;
  border: 0;
  background: rgba(31, 30, 28, 0.07);
  color: #636363;
}

.mix-card__sum {
  color: #a8a4a0;
  text-decoration: line-through;
  font-size: 14px;
}

.mix-card__total {
  color: #0b1140;
  font-size: 14px;
}

.mix-card__total b {
  font-size: 22px;
  font-weight: 700;
}

/* 모바일(≤860) = 유튜브식 가로 리스트(썸네일 좌 · 텍스트 우) — course-card 와 동일 */
@media (max-width: 860px) {
  .mix-card {
    flex-direction: row;
    gap: 16px;
    align-items: stretch;
    padding: 20px 0;
    border-bottom: 1px solid #e8e6e3;
  }
  .mix-card:last-child {
    border-bottom: 0;
  }
  .mix-card__thumb {
    flex: 0 0 36%;
    max-width: 150px;
    height: auto;
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 104px;
    font-size: 13px;
  }
  .mix-card__badge, .mix-card__off {
    top: 8px;
    left: 8px;
    padding: 2px 6px;
    font-size: 10px;
  }
  .mix-card__off {
    right: 8px;
    left: auto;
  }
  .mix-card__body {
    padding: 0;
    min-width: 0;
  }
  .mix-card__tit {
    font-size: 15px;
  }
  .mix-card__tit span {
    font-size: 13px;
  }
  .mix-card__total b {
    font-size: 18px;
  }
  .mix-card__bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
  }
  .mix-card__foot {
    margin: 0;
  }
  .mix-card__tags {
    margin: 0;
    padding: 0;
  }
  .mix-card:hover .mix-card__thumb {
    box-shadow: none;
  }
}
/* 페이저 (inc/pager.php) — 숫자형 · 원형 버튼 · 활성 네이비 채움 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 40px;
}

.pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #1f1e1c;
  transition: background-color 0.15s, color 0.15s;
}

.pager__btn:hover {
  background-color: #f7f6f4;
  color: #0b1140;
}

.pager__btn.on {
  background-color: #0b1140;
  color: #fff;
  font-weight: 700;
  cursor: default;
}

.pager__btn.is-disabled {
  color: #d8d5d1;
  cursor: default;
  pointer-events: none;
}

.pager__info {
  display: none;
}

/* 섹션 제목 옆 '전체 보기' 링크 */
.sec__more {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
}

.sec__more:hover {
  text-decoration: underline;
}

/* 과정명 검색 (courses.php 필터바 마지막 줄) */
.filter-bar__search {
  align-items: center;
}

.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.searchbox__input {
  width: 260px;
  max-width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}

.searchbox__input:focus {
  outline: none;
  border-color: var(--navy);
}

.searchbox__btn {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.searchbox__btn:hover {
  opacity: 0.9;
}

.searchbox__clear {
  font-size: 13px;
  color: var(--gray);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .searchbox__input {
    width: 100%;
  }
}
.targets {
  display: flex;
}

.target-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 24px 20px;
  text-decoration: none;
  color: inherit;
  transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.target-card:first-child {
  padding-left: 0;
}

.target-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 24px;
  width: 1px;
  background: #e8e6e3;
}

.target-card:first-child::before {
  display: none;
}

.target-card__ico {
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border-radius: 0;
  color: #d8d5d1;
  overflow: hidden;
  max-height: 34px;
  opacity: 1;
  transition: opacity 0.3s ease 0.25s, max-height 0.4s ease 0.25s, margin 0.4s ease 0.25s;
}

.target-card__ico svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.target-card__tit {
  margin-top: 12px;
  font-size: 19px;
  font-weight: 700;
  color: #1f1e1c;
  letter-spacing: -0.025em;
  line-height: 1.28;
  transition: color 0.3s ease 0.25s, font-size 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, margin 0.42s ease 0.25s;
}

.target-card__detail {
  margin-top: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.35s ease 0.3s, max-height 0.4s ease 0.3s;
}

.target-card__legal {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  margin: 0;
  padding: 0;
  border: 0;
  color: #ff9553;
}

.target-card__lead {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  margin-top: 8px;
  min-height: 0;
  color: #636363;
}

.target-card__go {
  position: absolute;
  right: 20px;
  bottom: calc(175px + 24px + 12px);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(12px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0b1140;
  white-space: nowrap;
  transition: opacity 0.2s ease, max-height 0.24s ease, transform 0.24s ease;
}

.target-card__go i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0b1140;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-style: normal;
}

.target-card__img {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 24px;
  height: 175px;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #d8d5d1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.target-card:first-child .target-card__img {
  left: 0;
}

.target-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1f1e1c;
  opacity: 0.45;
  transition: opacity 0.4s ease;
}

@media (min-width: 861px) {
  .target-card.is-open, .target-card:hover {
    flex-grow: 2;
  }
  .target-card.is-open .target-card__ico, .target-card:hover .target-card__ico {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
  }
  .target-card.is-open .target-card__tit, .target-card:hover .target-card__tit {
    color: #0b1140;
    font-size: 26px;
    margin-top: 0;
  }
  .target-card.is-open .target-card__detail, .target-card:hover .target-card__detail {
    opacity: 1;
    max-height: 200px;
  }
  .target-card.is-open .target-card__go, .target-card:hover .target-card__go {
    opacity: 1;
    max-height: 40px;
    transform: translateY(0);
    transition: opacity 0.38s ease 0.5s, max-height 0.4s ease 0.5s, transform 0.42s ease 0.5s;
  }
  .target-card.is-open .target-card__img::after, .target-card:hover .target-card__img::after {
    opacity: 0;
  }
  .targets:has(.target-card:hover) .target-card.is-open:not(:hover) {
    flex-grow: 1;
  }
  .targets:has(.target-card:hover) .target-card.is-open:not(:hover) .target-card__ico {
    opacity: 1;
    max-height: 34px;
  }
  .targets:has(.target-card:hover) .target-card.is-open:not(:hover) .target-card__tit {
    color: #1f1e1c;
    font-size: 19px;
    margin-top: 12px;
  }
  .targets:has(.target-card:hover) .target-card.is-open:not(:hover) .target-card__detail {
    opacity: 0;
    max-height: 0;
  }
  .targets:has(.target-card:hover) .target-card.is-open:not(:hover) .target-card__go {
    opacity: 0;
    max-height: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease, max-height 0.24s ease, transform 0.24s ease;
  }
  .targets:has(.target-card:hover) .target-card.is-open:not(:hover) .target-card__img {
    height: 175px;
  }
  .targets:has(.target-card:hover) .target-card.is-open:not(:hover) .target-card__img::after {
    opacity: 0.45;
  }
}
@media (max-width: 860px) {
  .targets {
    flex-direction: column;
  }
  .target-card, .target-card.is-open {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    flex: none;
    min-height: 0;
    padding: 16px 4px;
    border-left: 0;
    border-top: 1px solid #e8e6e3;
    transition: none;
  }
  .target-card:first-child {
    border-top: 0;
  }
  .target-card::before {
    display: none;
  }
  .target-card__ico {
    display: none;
  }
  .target-card__img, .target-card.is-open .target-card__img {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1;
    grid-row: 1/-1;
    width: 100px;
    height: 100px;
    margin: 0;
    align-self: center;
    transition: none;
  }
  .target-card__img::after {
    opacity: 0;
  }
  .target-card__tit, .target-card.is-open .target-card__tit {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 16px;
    color: #0b1140;
    margin: 0;
    transition: none;
  }
  .target-card__detail, .target-card.is-open .target-card__detail {
    grid-column: 2;
    grid-row: 2;
    opacity: 1;
    max-height: none;
    overflow: visible;
    margin: 4px 0 0;
    transition: none;
  }
  .target-card__legal {
    font-size: 14px;
  }
  .target-card__lead {
    display: none;
  }
  .target-card__go, .target-card.is-open .target-card__go {
    position: static;
    right: auto;
    bottom: auto;
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    opacity: 1;
    max-height: none;
    overflow: visible;
    transform: none;
    margin-top: 4px;
    transition: none;
  }
}
.guide-nudge {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: #f7f6f4;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.guide-nudge:hover {
  border-color: #0b1140;
  box-shadow: 0 1px 2px rgba(31, 24, 12, 0.05);
}

.guide-nudge__ic {
  flex: none;
  display: inline-flex;
  color: #ff9553;
}

.guide-nudge__ic svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-nudge__tx {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #4a4844;
}

.guide-nudge__tx b {
  color: #0b1140;
  font-weight: 700;
}

.guide-nudge__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0b1140;
  white-space: nowrap;
}

.guide-nudge__go i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0b1140;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: normal;
}

@media (max-width: 860px) {
  .guide-nudge {
    gap: 12px;
    padding: 16px;
    flex-wrap: wrap;
  }
  .guide-nudge__go {
    margin-left: auto;
  }
}
.edu-sec {
  position: relative;
}

.edu-sec::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * clamp(8px, 1.6vw, 18px));
  max-width: 1920px;
  background-color: #f9f9f8;
  border-radius: 20px;
}

.edu-sec .inner {
  position: relative;
  z-index: 1;
}

.is-home .edu-sec {
  padding: clamp(40px, 5vw, 72px) 0;
}

.edu-head {
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.edu-head__tt {
  min-width: 0;
}

.edu-methods__tit {
  margin-top: 12px;
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}

.edu-methods__desc {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.7;
  color: #636363;
  max-width: 52ch;
}

.edu-methods {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
}

.edu-method:nth-child(-n+3) {
  grid-column: span 2;
}

.edu-method:nth-child(4) {
  grid-column: 2/span 2;
}

.edu-method:nth-child(5) {
  grid-column: 4/span 2;
}

.edu-method {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #d8d5d1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(11, 17, 64, 0.045);
  text-decoration: none;
  transition: border-color 0.16s ease;
}
.edu-method:hover {
  border-color: #0b1140;
}
.edu-method__head {
  padding: clamp(18px, 2vw, 24px);
}
.edu-method__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.edu-method__tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.edu-method__icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background-color: #f2f1ef;
  color: #0b1140;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.edu-method__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.edu-method:hover .edu-method__icon {
  background-color: #0b1140;
  color: #fff;
}
.edu-method__name {
  margin-top: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1f1e1c;
}
.edu-method__desc {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.55;
  color: #4a4844;
}
.edu-method__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid #e8e6e3;
}
.edu-method__aud {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.edu-method__aud-l {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #a8a4a0;
}
.edu-method__aud-v {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #636363;
}
.edu-method__aud-v em {
  font-style: normal;
  font-weight: 700;
  color: #0b1140;
}
.edu-method__tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.edu-method__tags span {
  font-size: 12px;
  font-weight: 600;
  color: #636363;
  background-color: #f2f1ef;
  border-radius: 99px;
  padding: 3px 9px;
}
.edu-method__go {
  margin-top: auto;
  align-self: flex-end;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #0b1140;
  transition: gap 0.16s ease;
}
.edu-method__go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.edu-method:hover .edu-method__go {
  gap: 12px;
}

@media (max-width: 860px) {
  .edu-head {
    margin-bottom: 24px;
  }
  .edu-methods__desc {
    max-width: none;
  }
  .edu-methods {
    grid-template-columns: 1fr;
  }
  .edu-method, .edu-method:nth-child(-n+3), .edu-method:nth-child(4), .edu-method:nth-child(5) {
    grid-column: auto;
  }
}
.home-promos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.home-promos--pair {
  grid-template-columns: 1fr 1fr;
}

.home-promo {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: clamp(28px, 4vw, 44px) 24px;
  min-height: 200px;
  border: 1px solid transparent;
}

.home-promo > * {
  position: relative;
  z-index: 1;
}

.home-promo--mix {
  background: linear-gradient(90deg, #ffd7b0 0%, #fff5ec 50%, #ffd7b0 100%);
  border-color: #ffe4cd;
}

.home-promo--event {
  background: linear-gradient(90deg, #d4d8ea 0%, #f2f3f9 50%, #d4d8ea 100%);
  border-color: #dfe1ef;
}

.home-promo__tx {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.home-promo__k {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 4px 16px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.72);
}
.home-promo--mix .home-promo__k {
  color: #c85a1e;
}
.home-promo--event .home-promo__k {
  color: #0b1140;
}

.home-promo__t {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-weight: 700;
  color: #1f1e1c;
}
.home-promo--mix .home-promo__t b {
  color: #c85a1e;
}
.home-promo--event .home-promo__t b {
  color: #0b1140;
}

.home-promo__d {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
  max-width: 52ch;
}

.home-promo__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  padding: 12px 24px;
  border-radius: 99px;
  transition: gap 0.15s ease;
}
.home-promo--mix .home-promo__go {
  background-color: #ff9553;
}
.home-promo--event .home-promo__go {
  background-color: #0b1140;
}

.home-promo:hover .home-promo__go {
  gap: 12px;
}

.home-promo__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: #0b1140;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
}

@media (max-width: 860px) {
  .home-promos, .home-promos--pair {
    grid-template-columns: 1fr;
  }
  .home-promo {
    padding: 28px 20px;
    min-height: 0;
    gap: 12px;
  }
}
.notices__head {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.notices__tit {
  font-size: clamp(24px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: clamp(24px, 3.6vw, 34px);
  color: #1f1e1c;
}

.notices__desc {
  margin-top: 12px;
  font-size: 18px;
  color: #636363;
}

.notices__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.notice-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  background-color: #fff;
  border: 1px solid #d8d5d1;
  border-radius: 20px;
  padding: clamp(20px, 2.2vw, 28px);
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.notice-card:hover {
  border-color: #0b1140;
  box-shadow: 0 1px 2px rgba(31, 24, 12, 0.05);
  transform: translateY(-3px);
}

.notice-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  background-color: #ecedf3;
  color: #0b1140;
}
.notice-card__badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice-card.is-pin .notice-card__badge {
  background-color: #ffead8;
  color: #c85a1e;
}

.notice-card__tit {
  margin-top: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #1f1e1c;
  transition: color 0.16s ease;
}

.notice-card:hover .notice-card__tit {
  color: #0b1140;
}

.notice-card__date {
  margin-top: auto;
  padding-top: 16px;
  font-size: 14px;
  color: #a8a4a0;
  font-variant-numeric: tabular-nums;
}

.notices__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: 16px;
  font-weight: 700;
  color: #0b1140;
  text-decoration: none;
  transition: gap 0.16s ease;
}

.notices__more:hover {
  gap: 12px;
}

@media (max-width: 1080px) {
  .notices__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .notices__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .notice-card {
    min-height: 0;
  }
}
.apply {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: stretch;
}

.apply__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.apply__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-right: 16px;
}

.apply__lead {
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.8;
  color: #636363;
}
.apply__lead b {
  font-weight: 700;
  color: #1f1e1c;
}

.apply-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease;
}

.apply-card:hover {
  transform: translateY(-3px);
}

.apply-card__top {
  position: relative;
  background-color: #f9f9f8;
  border-radius: 20px;
  padding: 24px 24px 48px;
}

.apply-card__badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.apply-card--person .apply-card__badge {
  color: #ff9553;
}
.apply-card--group .apply-card__badge {
  color: #0b1140;
}

.apply-card__tit {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #1f1e1c;
}

.apply-card__lead {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: #4a4844;
}

.apply-card__info {
  position: relative;
  z-index: 1;
  margin-top: -26px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #d8d5d1;
  border-radius: 20px;
  padding: 20px 20px 16px;
  box-shadow: 0 10px 24px rgba(15, 20, 45, 0.07);
}

.apply-card__sec + .apply-card__sec {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e8e6e3;
}

.apply-card__sh {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1f1e1c;
}
.apply-card__sh svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #636363;
}

.apply-card__list {
  margin-top: 12px;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
}
.apply-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #4a4844;
}
.apply-card__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #a8a4a0;
}
.apply-card__list b {
  color: #1f1e1c;
  font-weight: 700;
}

.apply-steps {
  list-style: none;
  padding: 0;
  margin-top: 12px;
  display: flex;
}

.apply-steps li {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.apply-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3.5px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: #d8d5d1;
}

.apply-steps__dot {
  position: relative;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #d8d5d1;
}

.apply-steps__label {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #4a4844;
}

.apply-steps .is-last .apply-steps__label {
  font-weight: 700;
  color: #1f1e1c;
}

.apply-card__cta {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  text-decoration: none;
  transition: gap 0.15s ease;
}
.apply-card__cta span:first-child {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.apply-card--person .apply-card__cta {
  color: #c85a1e;
}
.apply-card--group .apply-card__cta {
  color: #0b1140;
}

.apply-card__cta:hover {
  gap: 12px;
}

.apply-card__arr {
  flex: none;
  display: flex;
  align-items: center;
  color: inherit;
}
.apply-card__arr svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 860px) {
  .apply {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .apply__side {
    padding-right: 0;
    gap: 16px;
  }
  .apply-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
  }
  .apply-steps li {
    flex-direction: row;
    align-items: center;
    gap: 11px;
    text-align: left;
  }
  .apply-steps li:not(:last-child)::before {
    top: auto;
    left: 3.5px;
    bottom: -11px;
    width: 1px;
    height: 11px;
  }
  .apply-steps__label {
    margin-top: 0;
    font-size: 15px;
  }
}
@media (max-width: 600px) {
  .apply__cards {
    grid-template-columns: 1fr;
  }
}
.inq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.inq-head__count {
  color: #636363;
}

.inq-head__count b {
  color: #0b1140;
  font-weight: 700;
  margin: 0 1px;
}

/* 섹션 묶음 — [기본 정보 입력] / [사업장 정보 입력].
   제목 + (섹션 안내문)을 한 덩어리로 두고, 굵은 밑줄은 그 아래에 온다(흰 배경). */
.signup-sec {
  margin: 40px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #0b1140;
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}

.signup-sec--first {
  margin-top: 8px;
}

/* 제목 줄 — 좌: 제목 / 우: 필수 입력 안내 */
.signup-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.signup-sec__tit {
  font-size: clamp(19px, 2.3vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}

/* 제목 우측 '* 필수 입력 사항' — 작고 담백하게, 별표만 브랜드색 */
.signup-req-note {
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #a8a4a0;
  white-space: nowrap;
}

.signup-req-note i {
  font-style: normal;
  color: #ff9553;
  font-weight: 700;
}

/* 섹션 안내문 — 제목과 밑줄 사이. 섹션 단위 설명이라 칸힌트(form__help)보다 크고 진하다.
   (규칙: signup-sec__desc = 16px gray / form__help = 14px muted) */
.signup-sec__desc {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #636363;
}

/* 회원유형 선택 — 라디오 하나에 설명이 두 줄. 개인/기업 선택이 이후 입력 범위를
   통째로 바꾸므로 설명이 보여야 한다(목록형 카드). */
.radio-cards {
  display: grid;
  gap: 12px;
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 16px;
  border: 1px solid #e8e6e3;
  border-radius: 14px;
  background-color: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.radio-card:hover {
  border-color: #0b1140;
}

.radio-card input {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #ff9553;
}

.radio-card__body {
  display: block;
}

.radio-card__body b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: #1f1e1c;
}

.radio-card__body em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: clamp(13px, 0.25vw + 12px, 14px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: #636363;
}

/* 회원유형별 결과 안내(#managerNote) — JS가 .form__help 로 className 을 채우지만(무수정),
   이건 특정 칸 힌트가 아니라 '가입하면 이렇게 됩니다'는 폼 단위 안내다.
   id 로 콜아웃 박스처럼 구분해 종사업장번호 힌트로 오해되지 않게 한다.
   (JS 가 is-err 를 붙이는 '담당자 이미 있음' 경고는 danger 톤으로) */
#managerNote {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid #e8e6e3;
  border-radius: 8px;
  background-color: #f7f6f4;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #4a4844;
}

#managerNote b {
  color: #0b1140;
  font-weight: 700;
}

#managerNote.is-err {
  background-color: #fbe7e5;
  border-color: #d1433b;
  color: #d1433b;
}

#managerNote.is-err b {
  color: #d1433b;
}

/* 선택 상태 — :has() 지원 브라우저는 카드 전체(테두리 + 웜 틴트 + 얇은 링),
   미지원 폴백은 제목 색만이라도 바뀌게 둔다. */
.radio-card input:checked ~ .radio-card__body b {
  color: #c85a1e;
}

.radio-card:has(input:checked) {
  border-color: #ff9553;
  background-color: #fff6ef;
  box-shadow: inset 0 0 0 1px #ff9553;
}

/* 표가 좁은 화면에서 페이지를 밀어내지 않게 제 상자 안에서만 가로로 흐른다.
   .doc 안의 표는 열이 5개까지 있어(법정 교육시간표) 모바일에서 반드시 넘친다. */
.doc__scroll {
  overflow-x: auto;
  margin: 12px 0;
}

.doc__scroll table {
  margin: 0;
  min-width: 520px;
}

/* 조문형 문서(이용약관·환불규정) — 장/조 위계를 들여쓰기와 여백으로만 준다.
   조문은 글자 크기를 늘리는 것보다 덩어리가 나뉘어 보이는 게 훨씬 읽기 쉽다. */
.doc__tit {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.03em;
}

.doc__lead {
  margin: 8px 0 26px;
  color: var(--gray);
  font-size: 14px;
}

.doc--terms .doc__chapter {
  margin: 38px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.doc--terms .doc__chapter:first-of-type {
  margin-top: 30px;
}

.doc--terms h4 {
  margin: 22px 0 8px;
}

.doc--terms h4:first-of-type {
  margin-top: 0;
}

.doc--terms ol {
  margin-left: 22px;
}

.doc--terms ol li {
  list-style: decimal;
}

/* 법정 안내 문구 묶음 — 교육안내 하단과 신청 완료 화면이 같은 모양으로 쓴다.
   경고가 아니라 계속 붙어 있는 안내라 notice-box 의 주황을 쓰지 않는다.
   같은 화면에 경고와 나란히 놓였을 때 어느 쪽이 급한지 가려지기 때문이다. */
.legal-notes {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
}

.legal-notes__tit {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.legal-notes ul {
  margin: 0;
}

.legal-notes li {
  position: relative;
  padding-left: 2px;
  margin-bottom: 8px;
  list-style: none;
  font-size: 14px;
  line-height: 1.75;
  color: #5a6072;
}

.legal-notes li:last-child {
  margin-bottom: 0;
}

.legal-notes li b {
  color: var(--navy);
}

/* 교육 이용 안내(6문구) — 부드러운 패널 + 아이콘·제목·설명 2단 그리드(심플 카드).
   --notice 한정이라 ※각주 리스트엔 영향 없음. (2026-08-24) */
.legal-notes--notice {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
}

.legal-notes--notice .legal-notes__tit {
  font-size: 17px;
  margin-bottom: 22px;
}

/* 결제완료(pay_result)는 회색 밴드 위라 밴드와 안 묻히게 카드를 흰색으로 — pay_result 한정(guide 등 무영향) */
.paydone-notes .legal-notes--notice {
  background: #fff;
}

/* 결제완료 상단 성공 제목 = 로그인프롬프트와 같은 h3 폰트(.prompt__tit) + 회색 설명. 가운데 정렬. */
.paydone-head {
  text-align: center;
  margin-bottom: 32px;
}

.paydone-head__msg {
  margin-top: 10px;
  font-size: 16px;
  color: var(--gray);
  line-height: 1.7;
}

.legal-notes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px clamp(32px, 4vw, 56px);
}

.legal-notes__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.legal-notes__ico {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b90a0;
}

.legal-notes__ico svg {
  width: 26px;
  height: 26px;
}

.legal-notes__t {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}

.legal-notes__d {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #5a6072;
}

@media (max-width: 860px) {
  .legal-notes__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
/* 여러 줄이 한 교육과정에 묶인 표에서 과정이 바뀌는 줄만 경계선을 진하게.
   '채용 시 교육' 세 줄이 연달아 나올 때 묶음이 눈에 보이게 하려는 것이다. */
.tbl .row-top > td {
  border-top: 2px solid #dfe3ee;
}

/* ==================================================================
 * 기업 관리 (교육담당자 어드민, moduSafety/admin/*)
 *
 * 새 디자인 언어를 만들지 않는다. 표·태그·배지·진도바는 프론트에서 쓰던 것을
 * 그대로 쓰고, 여기서는 **표 안에서만 필요한 것**(보조 글씨, 좁은 진도바,
 * 버튼 두 개가 들어가는 관리 칸)만 더한다. 어드민만 다른 톤이면 담당자는
 * 다른 사이트에 온 것으로 읽는다.
 * ================================================================== */
/* 상단 유틸의 담당자 진입점 — 다른 링크보다 한 톤 밝게 해서 눈에 걸리게 */
.utilbar__admin {
  color: #fff;
  font-weight: 700;
}

/* 사업장 전환 (여러 곳을 맡은 담당자에게만 보인다) */
.admin-company {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-company__label {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}

.admin-company .sel {
  max-width: 320px;
}

/* 현황 화면 — 평균 진도율 */
.admin-summary {
  margin-top: 22px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.admin-summary__head span {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.admin-summary__head strong {
  font-size: 26px;
  font-weight: 800;
  color: var(--orange);
}

.admin-summary__head strong em {
  font-size: 15px;
  font-style: normal;
  margin-left: 2px;
}

.admin-summary__note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--gray);
  line-height: 1.6;
}

/* 현황 화면 — 손이 필요한 목록 카드 셋 */
.admin-cards {
  margin-top: 22px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.admin-card {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.admin-card__tit {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
}

.admin-card__more {
  font-size: 13px;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
}

.admin-card__more:hover {
  text-decoration: underline;
}

.admin-card__none {
  padding: 26px 0;
  text-align: center;
  font-size: 14px;
  color: var(--gray);
}

.admin-card__note {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  color: var(--gray);
  line-height: 1.6;
}

.admin-list {
  display: flex;
  flex-direction: column;
}

.admin-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}

.admin-list li:last-child {
  border-bottom: 0;
}

.admin-list__who {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--ink);
}

.admin-list__who i {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
}

/* 과정명이 길다. 이 줄만 줄여서 오른쪽 숫자가 밀려나지 않게 한다 */
.admin-list__what {
  flex: 1;
  min-width: 0;
  color: var(--gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-list__val {
  flex: 0 0 auto;
  text-align: right;
  color: var(--navy);
}

.admin-list__val b {
  font-size: 15px;
  font-weight: 800;
}

.admin-list__val i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--gray);
}

.admin-list__val.is-bad {
  color: #b02b2b;
}

/* 목록 표 공통 */
.admin-tbl td {
  vertical-align: middle;
}

.admin-tbl td.right {
  text-align: right;
}

/* 이름 아래의 아이디·부서처럼 '있으면 좋은' 값. 본문과 같은 크기면 표가 시끄럽다 */
.admin-tbl__sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--gray);
  line-height: 1.5;
}

.admin-tbl__none {
  color: #a8adba;
}

.admin-tbl__act {
  white-space: nowrap;
}

.admin-tbl__act .btn + .btn {
  margin-left: 4px;
}

.admin-tbl tr.is-off td {
  background: #fbfbfd;
  color: #9aa1ad;
}

/* 표 안의 진도바 — .bar 는 카드용이라 위 여백이 붙어 있다. 여기서만 없앤다 */
.admin-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

.admin-prog .bar {
  margin-top: 0;
  flex: 1;
}

.admin-prog__num {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}

.admin-prog__num i {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: var(--gray);
  margin-left: 2px;
}

/* 수료 기준에 못 미치는 사람만 색으로 집는다 — 전부 색을 주면 아무것도 안 보인다 */
.admin-prog.is-low .bar__fill {
  background: #e8853a;
}

.admin-prog.is-low .admin-prog__num {
  color: #b8500f;
}

/* 수료증 — 회차(과정 + 교육기간) 묶음 */
.cert-group {
  margin-bottom: 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cert-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: #f7f8fc;
  border-bottom: 1px solid var(--line);
}

.cert-group__tit {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
}

.cert-group__meta {
  margin-top: 6px;
  font-size: 14px;
  color: var(--gray);
}

.cert-group__meta i {
  font-style: normal;
  margin: 0 6px;
  opacity: 0.5;
}

.cert-group__act {
  flex: 0 0 auto;
}

.cert-group__off {
  font-size: 13px;
  color: var(--gray);
}

.cert-group .tbl {
  border-top: 0;
}

.cert-group .tbl th {
  background: #fff;
}

.chk--head {
  justify-content: center;
}

/* 화면 아래의 규칙 안내 — 표 바로 밑에 붙어 있어야 읽힌다 */
.admin-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--gray);
  line-height: 1.8;
}

.admin-note b {
  color: var(--ink);
}

@media (max-width: 720px) {
  .admin-cards {
    grid-template-columns: 1fr;
  }
  .admin-list li {
    flex-wrap: wrap;
  }
  .admin-list__what {
    flex: 1 0 100%;
    order: 3;
    white-space: normal;
  }
  .cert-group__head {
    align-items: flex-start;
  }
}
/* 우편번호 찾기 (signup.php · profile.php)
   우편번호 칸은 5자리라 좁게 두고 버튼을 옆에 붙인다. 한 줄을 다 차지하면
   그 아래 도로명·상세주소와 구분이 안 되어 세 칸이 한 덩어리로 보인다. */
.zipfind {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.zipfind__code {
  width: 140px;
  flex: 0 0 auto;
  background: #fff;
}

/* 검색으로만 채우는 칸. 잠겨 있다는 것이 보여야 사용자가 클릭해 보고 포기하지 않는다 */
.inp[readonly] {
  background: var(--surface-2);
  color: var(--ink);
  cursor: default;
}

.inp[readonly]:focus {
  border-color: var(--line);
}

/* 비밀번호 보기 (js/main.js pwEye — 마크업은 스크립트가 만든다)
   .inp 이 width:100% 라 상자도 100% 로 두어야 칸 너비가 그대로 유지된다.
   버튼은 칸 안에 겹쳐 놓는다 — 옆에 붙이면 줄이 길어져 좁은 화면에서 칸이 줄어든다. */
.pwbox {
  position: relative;
  display: block;
  width: 100%;
}

.pwbox .inp {
  padding-right: 46px;
}

.pwbox__eye {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s;
}

.pwbox__eye svg {
  width: 20px;
  height: 20px;
}

.pwbox__eye:hover {
  color: var(--navy);
}

/* 지금 보이는 상태라는 것을 색으로도 알린다 — 아이콘만으로는 어느 쪽이 켜짐인지 헷갈린다 */
.pwbox__eye.is-on {
  color: var(--orange);
}

.pwbox__eye:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-radius: 6px;
}

/* 사업주 등록여부 확인 (signup.php)
   사업자번호 칸과 버튼을 한 줄에 둔다 — 이 둘은 한 동작이라 붙어 있어야 한다 */
.bizcheck {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bizcheck .inp {
  flex: 1;
  min-width: 180px;
}

.bizcheck .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 조회 결과 — 이미 등록된 사업장. 값은 마스킹된 것만 들어온다 */
.bizfound {
  margin: 0 0 18px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.bizfound__tit {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}

.bizfound__list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px 12px;
  font-size: 14px;
}

.bizfound__list dt {
  color: var(--gray);
}

.bizfound__list dd {
  color: var(--ink);
  font-weight: 700;
  word-break: break-all;
}

.bizfound__note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--gray);
  line-height: 1.6;
}

/* 조회 결과 안내 문구의 성공·실패 색 (form__help 위에 얹는다) */
.form__help.is-ok {
  color: var(--success);
}

.form__help.is-err {
  color: var(--danger);
}

.roster-tbl td {
  vertical-align: middle;
}

.roster-tbl th:nth-last-child(2),
.roster-tbl td:nth-last-child(2) {
  min-width: 210px;
}

.roster-tbl th:last-child,
.roster-tbl td:last-child {
  min-width: 96px;
}

.roster-row.is-error > td {
  background: var(--danger-bg);
}

.roster-row.is-editing > td:first-child {
  box-shadow: inset 3px 0 0 var(--navy);
}

.roster-row.is-dropped > td {
  background: #f3f4f7;
  color: #a4a9bb;
  text-decoration: line-through;
  text-decoration-color: #c3c7d4;
}

.roster-row.is-dropped .roster-row__acts,
.roster-row.is-dropped .roster-row__dropped {
  text-decoration: none;
}

.roster-row.is-dropped > td span:not(.roster-row__dropped) {
  opacity: 0.5;
}

.roster-row__dropped:not([hidden]) {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8eaf0;
  color: #6b7186;
  font-size: 12px;
  font-weight: 700;
}

.roster-row.is-dropped input.inp {
  background: #eceef3;
  color: #a4a9bb;
  border-color: #dcdfe8;
}

.roster-row__acts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}