/* 성곡평생교육원 — B 돌봄 초록 (설계서 5절) + 디자인 방향 1 숲 초록 안내형(2026-10-31). 색 값과 대비는 tools/tests/contrast.test.mjs가 검사한다 */
:root {
  --green: #1E7A5A;
  --green-dark: #173D30;
  --green-light: #EDF6F1;
  --warm: #F7F5EF;
  --orange: #C2410C;
  --orange-dark: #9A3412;
  --line: #DFE9E3;
  --field-line: #6B8B7C; /* 입력칸 · 급수 단추 테두리 — 흰 바탕과 3.7:1 (비문자 대비 3:1 이상) */
  --on-dark: #DDEBE4; /* 진한 초록 상자 안의 보조 글씨 */
  --foot-text: #E2ECE7; /* 진한 초록 바닥글 안의 글씨 */
  --foot-muted: #B9CCC3; /* 바닥글 이름표 · 저작권 */
  --text: #222222;
  --muted: #555555;
  --bg: #FFFFFF;
  --danger: #B91C1C;
  --preview-bg: #FFF1E6; /* 공유용 미리보기 판의 맨 위 띠 — 글씨는 --orange-dark */
  --radius: 10px;
  --wrap: 1180px;
  --band-pad: 76px; /* 띠(.section) 위아래 여백. 바닥글 위 간격도 이 값 하나로 정한다(휴대폰 52px — 아래 휴대폰 규칙) */
}

/* 글자 크기: 보통 17px · 크게 19.5px · 더 크게 22px (휴대폰 16 / 18.5 / 21) */
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
html[data-fs="lg"] { font-size: 19.5px; }
html[data-fs="xl"] { font-size: 22px; }
@media (max-width: 720px) {
  html { font-size: 16px; }
  html[data-fs="lg"] { font-size: 18.5px; }
  html[data-fs="xl"] { font-size: 21px; }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; color: var(--text); background: var(--bg); line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; } /* 내용이 짧은 페이지에서도 바닥글이 화면 맨 아래에 붙는다 — 진한 바닥글 아래로 흰 줄이 보이지 않게 */
img { max-width: 100%; height: auto; }
a { color: var(--green); }
a:hover { color: var(--green-dark); }
h1, h2, h3 { color: var(--green-dark); line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 96px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 600px; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; } /* 15.3px — 비용 · 환불 안내 글(민간자격 표시)이 쓴다. PC 보통 글자에서도 15px 이상 */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 16px; background: var(--green-dark); color: #fff; }
.skip:focus { left: 8px; top: 8px; }
/* 공유용 미리보기 판(build.mjs --preview)에만 있는 맨 위 띠. 머리글처럼 붙어 있지 않고 같이 올라간다 */
.preview-bar { padding: 8px 16px; background: var(--preview-bg); color: var(--orange-dark); border-bottom: 1px solid var(--line); font-size: 0.875rem; line-height: 1.5; text-align: center; }

/* 버튼 — 모두 높이 48px 이상 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 20px; border: 2px solid transparent; border-radius: var(--radius); font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.btn-cta { background: var(--orange); color: #fff; }
.btn-cta:hover { background: var(--orange-dark); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); color: #fff; }
.btn-line { background: #fff; color: var(--green-dark); border-color: var(--green); }
.btn-line:hover { background: var(--green-light); color: var(--green-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); } /* 진한 초록 상자 안 */
.btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-text { background: none; color: var(--green); text-decoration: underline; padding: 0 8px; }
.btn-danger { background: #fff; color: var(--danger); border-color: #E9A5A5; }
.btn-sm { padding: 0 14px; font-size: 0.94rem; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.1rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.nb { white-space: nowrap; } /* 전화번호가 중간에서 끊기지 않게 */

/* 머리글 */
.site-head { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 48px; color: var(--green-dark); font-size: 1.15rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; background: var(--green-dark); color: #fff; font-size: 0.84rem; font-weight: 700; letter-spacing: 0; }
.site-nav { display: flex; gap: 2px; } /* 로고 바로 옆에 둔다 — 가운데로 밀지 않고, 오른쪽 끝은 도구 묶음(.head-tools)이 차지한다 */
.site-nav a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-bottom: 3px solid transparent; color: var(--text); font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }
.head-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.fontsize { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fontsize button { min-height: 48px; padding: 0 12px; border: 0; background: #fff; color: var(--muted); font: inherit; font-size: 0.85rem; cursor: pointer; }
.fontsize button[aria-pressed="true"] { background: var(--green-dark); color: #fff; }
/* 키보드 초점 표시는 버튼 안쪽에(둥근 틀의 overflow: hidden이 바깥쪽을 잘라 냄), 눌린 진한 초록 버튼은 흰색 */
.fontsize button:focus-visible { outline-offset: -5px; }
.fontsize button[aria-pressed="true"]:focus-visible { outline-color: #fff; }
.auth { display: flex; gap: 8px; }
/* 머리글 글자가 줄바꿈으로 두 줄이 되어 높이가 들쭉날쭉해지지 않게 */
.site-nav a, .fontsize button, .auth .btn { white-space: nowrap; }
.nav-toggle { display: none; margin-left: auto; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--green-dark); font: inherit; font-weight: 700; }
/* 경계는 'not all and (min-width: …)'로 쓴다 — 최대 폭 조건으로 쓰면 1080.5px 같은 소수 폭이 어느 쪽에도 안 걸린다 */
@media not all and (min-width: 1081px) {
  .head-row { flex-wrap: wrap; gap: 8px 12px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-nav { display: none; order: 3; width: 100%; flex-direction: column; }
  .site-nav.open { display: flex; }
  .site-nav a { border-bottom: 1px solid var(--line); }
  .head-tools { display: none; order: 4; width: 100%; margin-left: 0; flex-wrap: wrap; justify-content: space-between; padding-bottom: 10px; }
  .site-nav.open + .head-tools { display: flex; }
  .fontsize button { font-size: 1rem; } /* 메뉴 안에서는 본문 크기(16px 이상) */
  /* 열린 메뉴가 화면보다 길면 머리글 안에서 스크롤된다(머리글이 화면 위에 붙어 있어서 아래가 잘리던 것) — ui.js가 열린 동안 menu-open을 붙임 */
  .site-head.menu-open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
/* 글자를 키우면(크게 · 더 크게) 한 줄 머리글이 모자라므로, 넓은 화면에서도 메뉴를 아래 줄로 내린다 */
@media (min-width: 1081px) {
  html[data-fs] .head-row { flex-wrap: wrap; gap: 0 16px; padding-top: 8px; }
  html[data-fs] .site-nav { order: 3; width: 100%; }
  html[data-fs] [id] { scroll-margin-top: 130px; }
}

/* 공통 구역 — 띠 바탕은 흰색 · 따뜻한 회백(section-warm) · 연초록(section-alt)을 번갈아 쓴다 */
.section { padding: var(--band-pad) 0; }
/* 띠 안 첫 · 끝 요소의 바깥 여백(p 기본 1em · 약관 제목 36px · 민간자격 안내 상자 32px)은 뺀다 — 띠 위아래 간격은 --band-pad 하나로만 정해서 페이지마다 76 · 93 · 112px로 달라지지 않게 */
.section > .wrap > :first-child { margin-top: 0; }
.section > .wrap > :last-child { margin-bottom: 0; }
.section-alt { background: var(--green-light); }
.section-warm { background: var(--warm); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head h2, .how-text h2, .faq-head h2 { margin: 0; font-size: 1.8rem; font-weight: 800; line-height: 1.35; }
.section-head p, .faq-head p { margin: 8px 0 0; color: var(--muted); }
.more { display: inline-flex; align-items: center; min-height: 48px; color: var(--green-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
.page-head { padding: 40px 0 32px; background: var(--green-light); border-bottom: 1px solid var(--line); }
.page-head h1 { margin: 0 0 8px; font-size: 1.9rem; }
.page-head p { margin: 0; color: var(--muted); }

/* 첫 화면: 안내 문구 + 등록 정보 카드 두 칸 */
.hero { background: var(--warm); }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.kicker { display: inline-block; margin: 0 0 14px; color: var(--green); font-size: 0.94rem; font-weight: 700; }
.hero h1 { margin: 0 0 16px; font-size: 2.45rem; font-weight: 800; line-height: 1.3; }
.hero h1 em { font-style: normal; color: var(--green); }
.hero .lead { margin: 0 0 28px; color: var(--muted); font-size: 1.12rem; }
.hero .hero-btns { gap: 12px; margin-bottom: 26px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--green-dark); font-size: 0.94rem; font-weight: 700; }
.facts li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.reg-card { padding: 26px 28px; border: 1px solid var(--line); border-top: 5px solid var(--green); border-radius: 12px; background: #fff; }
.reg-head { margin: 0 0 14px; font-size: 1.12rem; font-weight: 800; }
.reg-list { margin: 0 0 16px; }
.reg-list div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.reg-list dt { color: var(--muted); }
.reg-list dd { margin: 0 0 0 auto; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.reg-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--green-dark); font-weight: 700; text-underline-offset: 4px; text-wrap: balance; } /* 줄이 꺾여도 끝의 › 만 혼자 남지 않게 */
.reg-note { margin: 4px 0 0; color: var(--muted); font-size: 0.94rem; }

/* 처음이세요? 단계 안내 — 칸 수만큼 한 줄(4칸이든 발급 안내의 5칸이든). .steps는 로그인 단계 표시(아래)용이라 이름을 겹치지 않는다 */
.howto { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
.howto li { display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.howto .no { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.12rem; font-weight: 800; }
.howto b { display: block; margin-bottom: 4px; color: var(--green-dark); font-size: 1.15rem; }
.howto li div > span { color: var(--muted); }
.howto + .note { margin-top: 18px; } /* 발급 안내: 단계 카드 바로 아래 안내 글이 카드에 붙지 않게 */

/* 분야 고르기 · 과정 카드 */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.filters button { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.filters button[aria-pressed="true"] { border-color: var(--green-dark); background: var(--green-dark); color: #fff; }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.course-card a { display: flex; flex-direction: column; height: 100%; min-height: 48px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.course-card a:hover { box-shadow: 0 8px 22px rgba(23, 61, 48, .12); transform: translateY(-2px); }
.course-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tag, .badge-new { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 6px; font-size: 0.94rem; font-weight: 700; line-height: 1.2; }
.tag { background: var(--green-light); color: var(--green-dark); }
.badge-new { border: 1.5px solid var(--orange); background: #fff; color: var(--orange); }
.course-card h3 { margin: 0 0 8px; font-size: 1.28rem; font-weight: 800; }
.course-intro { flex: 1; margin: 0 0 14px; color: var(--muted); }
.course-meta { margin: 0 0 14px; color: var(--muted); font-size: 0.94rem; font-variant-numeric: tabular-nums; }
.course-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin: 0; padding-top: 6px; border-top: 1px solid var(--line); }
.course-free { color: var(--green); font-weight: 800; }
.course-more { color: var(--green-dark); font-weight: 700; }
.course-card a:hover .course-more { text-decoration: underline; text-underline-offset: 4px; }

/* 비용 안내 */
.how-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.how-text h2 { margin-bottom: 18px; }
.how-text p { margin: 0 0 12px; }
.legal-line { padding: 16px 18px; border-left: 4px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; background: var(--warm); color: var(--green-dark); font-weight: 700; }
.how-text .legal-line { margin-top: 20px; }
.fee-box { padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.fee-box h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; }
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th, .fee-table td { padding: 15px 0; border-bottom: 1px solid var(--line); font-weight: 600; text-align: left; vertical-align: middle; }
.fee-table td { text-align: right; }
.fee-table td b { color: var(--green); font-size: 1.2rem; }
.fee-link { display: flex; align-items: center; min-height: 48px; color: var(--green-dark); font-weight: 700; text-underline-offset: 4px; text-wrap: balance; }
.fee-table + .fee-link { margin-top: 8px; }

/* 자주 묻는 질문 */
.faq-grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; }
.faq-head .more { margin-top: 10px; }
.faq details { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 22px; font-size: 1.06rem; font-weight: 700; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--green); font-size: 1.6rem; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .q { margin-right: 10px; color: var(--green); font-weight: 800; }
.faq summary > span { min-width: 0; overflow-wrap: anywhere; } /* 질문도 자유 입력(관리자가 고침) — 같은 이유 */
.faq .ans { margin: 0; padding: 0 22px 20px 50px; }

/* 고객센터: 공지 목록 + 상담 전화 상자 */
.cs-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: stretch; }
.box { padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.box h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; font-size: 1.35rem; }
.box h2 a { display: inline-flex; align-items: center; min-height: 48px; color: var(--green-dark); font-size: 0.94rem; font-weight: 700; text-decoration: none; }
.list-plain { margin: 0; padding: 0; list-style: none; }
.list-plain li { border-bottom: 1px solid var(--line); }
.list-plain li.muted { padding: 18px 0; }
.list-plain li.muted .btn { display: flex; width: fit-content; margin-top: 12px; } /* 불러오기 실패 안내('연결이 원활하지 않습니다') 아래 [다시 시도] — 글 옆이 아니라 아래 줄에 */
.list-plain a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; color: var(--text); text-decoration: none; }
.list-plain a:hover { color: var(--green); }
.list-plain a > span { min-width: 0; overflow-wrap: anywhere; } /* 공지 제목은 자유 입력 — 띄어쓰기 없이 긴 제목도 줄이 옆으로 밀리지 않게 */
.list-plain time { color: var(--muted); font-size: 0.94rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.call-box { padding: 30px; border-radius: 12px; background: var(--green-dark); color: #fff; }
.call-label { margin: 0 0 2px; color: var(--on-dark); font-weight: 700; }
.call-box .tel { display: block; color: #fff; font-size: 2.3rem; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.call-hours { margin: 4px 0 18px; }
.call-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.call-addr { display: flex; align-items: center; min-height: 48px; color: var(--on-dark); text-underline-offset: 4px; text-wrap: balance; }
.call-addr:hover { color: #fff; }
/* 진한 초록 바탕에서는 주황 초점 테두리(2.3:1)가 흐리다 — 흰색(12:1) */
.call-box :focus-visible { outline-color: #fff; }

/* 처음 화면 — 1080px 이하(태블릿 · 휴대폰): 두 칸은 한 줄로 쌓고, 카드와 단계는 두 열 */
@media not all and (min-width: 1081px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .howto { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid, .faq-grid, .cs-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* 휴대폰(720px 이하) — 모든 페이지 공통: 옆 여백 · 로고 칸 · 구역 여백 · 제목 크기 */
@media (max-width: 720px) {
  :root { --band-pad: 52px; }
  .wrap { padding-left: 16px; padding-right: 16px; } /* 옆 여백만 — 줄임 글(padding: 0 16px)은 .wrap과 같이 쓰는 칸(.head-row)의 위아래 여백까지 0으로 지운다 */
  .brand-mark { width: 40px; height: 40px; }
  .page-head h1 { font-size: 1.6rem; }
}
/* 휴대폰(720px 이하) — 처음 화면: 카드와 단계는 한 열 */
@media (max-width: 720px) {
  .hero-grid { gap: 28px; padding-top: 36px; padding-bottom: 40px; }
  .hero h1 { font-size: 1.85rem; }
  .hero .lead { margin-bottom: 22px; font-size: 1.06rem; }
  .hero .hero-btns { flex-direction: column; margin-bottom: 22px; }
  .hero .hero-btns .btn { flex-wrap: wrap; column-gap: 6px; row-gap: 0; width: 100%; padding-top: 8px; padding-bottom: 8px; line-height: 1.35; } /* 번호(.nb)는 끊기지 않고 좁으면 두 줄 */
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .facts li { justify-content: flex-start; }
  html[data-fs] .facts { grid-template-columns: 1fr; } /* 글자를 키우면(크게 · 더 크게) 두 칸에서는 칩 안의 글이 두 줄로 꺾인다 */
  .reg-card { padding: 22px 20px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 22px; }
  .section-head h2, .how-text h2, .faq-head h2 { font-size: 1.45rem; }
  .howto { grid-template-columns: 1fr; gap: 10px; }
  .howto li { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px; }
  .course-grid { grid-template-columns: 1fr; gap: 14px; }
  .course-card a { padding: 20px; }
  .fee-box, .box, .call-box { padding: 22px 20px; }
  .fee-table th { padding-right: 12px; }
  .faq summary { padding: 10px 16px; }
  .faq .ans { padding: 0 16px 18px; }
  .call-box .tel { font-size: min(2rem, 9vw); } /* 글자를 키워도 번호가 두 줄로 꺾이거나 상자 밖으로 나가지 않게 — 좁은 화면에서는 화면 폭에 맞춘다 */
  .call-btns .btn { flex: 1 1 100%; }
}

/* 과정 상세 */
.course-hero { padding: 36px 0; background: var(--green-light); border-bottom: 1px solid var(--line); }
.course-hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.course-hero h1 { margin: 6px 0; font-size: 2rem; }
.breadcrumb { margin: 0; color: var(--muted); font-size: 0.9rem; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 48px; } /* '자격과정' 링크: 글 한 줄 높이(20px)가 아니라 누르는 칸 높이 48px 이상(스펙 5-2). inline-flex라 이동 경로 글 줄 안에 그대로 */
.lead { margin: 0 0 8px; font-size: 1.08rem; }
.course-hero-meta { margin: 0; color: var(--muted); }
/* 신청 칸 폭 상한: 상한이 없으면 안내 문장이 한 줄로 늘어나(594px) 소개 글 옆에 못 들어가고 아래로 내려간다(머리 띠 222 → 360px).
   22rem(PC 374px)이면 가장 긴 소개 글(629px) + 간격 20px + 374px이 1100px 화면의 본문 칸(1052px · 스크롤 막대가 있으면 1037px)에 들어가 9쪽 모두 옆에 남는다 */
.course-hero-cta { display: grid; gap: 6px; min-width: 260px; max-width: 22rem; }
@media (max-width: 720px) { .course-hero-cta { max-width: none; } } /* 휴대폰은 칸 폭 전체(원래대로) — 상한을 두면 390px 이상 폰에서 단추 칸이 가로 전체보다 좁아진다 */
/* 신청 단추 아래 안내 줄(연결 실패일 때만 글이 들어간다. 처음부터 있는 알림 영역이어야 스크린리더가 읽는다): 비어 있을 때 .field-msg의 최소 높이(1.4em)만큼 자리를 차지하지 않게 */
#enrollStartMsg { min-height: 0; }
.course-body .block { margin: 36px 0; }
/* 과정 상세 맨 끝: 마지막 구역(36px)과 '다른 과정 없음' 글(격자 안 p의 1em — 격자 안이라 겹치지 않고 그대로 더해진다)의 아래 여백은 뺀다 — 바닥글 위 간격이 다른 쪽과 같은 76px(휴대폰 52px)이 되게 */
.course-body > .block:last-child, .course-body > .block:last-child .course-grid > :last-child { margin-bottom: 0; }
.study { display: grid; gap: 0; margin: 0; }
.study > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.study dt { color: var(--green-dark); font-weight: 800; }
.study dd { margin: 0; }

/* 민간자격 안내 상자 */
.legal-box { margin: 32px 0; padding: 22px; border: 2px solid var(--green); border-radius: 14px; background: #fff; }
.legal-box h2 { margin: 0 0 12px; font-size: 1.25rem; }
.legal-box dl { display: grid; gap: 0; margin: 0; }
.legal-box dl > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.legal-box dt { color: var(--green-dark); font-weight: 800; }
.legal-box dd { margin: 0; }
.legal-box ul { margin: 0; padding-left: 1.1em; }
.legal-note { margin: 14px 0 0; font-weight: 700; }
@media (max-width: 560px) { .legal-box dl > div, .study > div { grid-template-columns: 1fr; gap: 2px; } }

/* 표 · 약관 글 */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: #fff; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { background: var(--green-light); color: var(--green-dark); }
.table tbody th, .table.info th, .table.jobs th { width: 9em; color: var(--green-dark); }
/* 가운데 칸(등록번호 · 등급)은 줄을 바꾸지 않는다 — 등록번호가 '2026-' '000623'으로 끊기던 것(쌓은 휴대폰 화면에서는 '이름표 + 값'이 한 덩어리로 다니고, 721px 이상 한 줄 표에서도 번호가 안 끊긴다).
   첫 칸 · 끝 칸(긴 글)은 그대로 줄이 바뀐다. 약관 표처럼 두 칸짜리는 해당 없음 */
.table td:nth-child(n+2):not(:last-child) { white-space: nowrap; }
/* 휴대폰: 이름표 · 내용 두 칸짜리 표(자격 정보 · 직무 내용)는 위아래로 쌓는다 */
@media (max-width: 560px) {
  .table:is(.info, .jobs), .table:is(.info, .jobs) :is(tbody, tr, th, td) { display: block; }
  .table:is(.info, .jobs) th { width: auto; padding-bottom: 0; border-bottom: 0; }
  .table:is(.info, .jobs) td { padding-top: 2px; }
}
/* 교육원 소개 표의 자격명 링크(render.js가 행 머리글 칸 안에 만든다): 칸 전체가 누르는 곳이고 높이는 48px 이상(설계서 5-2).
   칸의 위아래 · 옆 여백을 링크가 가져가서(칸 여백 0 + 링크 여백 12px 14px) 행 높이와 글 자리는 그대로다.
   링크가 표 가장자리에 닿으므로 초점 테두리는 안쪽에 그린다(바깥쪽은 표를 감싼 틀의 overflow에 잘린다) */
#registered .table tbody th { padding: 0; }
#registered .table tbody th a { display: flex; align-items: center; min-height: 48px; padding: 12px 14px; }
#registered .table tbody th a:focus-visible { outline-offset: -4px; }
/* 휴대폰(720px 이하): 자격 목록 표(칸 넷 — 교육원 소개 #registered의 등록 자격 · 발급 안내 #fees의 과정별 총비용)는 오른쪽 칸(주무부처 · 총비용)이 화면 밖으로 밀려 보이지 않는다.
   (더 크게 글자는 600px에서도 넘친다 — 680px부터는 어느 글자 크기에서나 한 줄 표가 들어간다)
   자격마다 한 묶음으로 위아래로 쌓고, 제목 줄은 눈에서만 감추며(스크린리더는 그대로 읽는다) 칸 이름은 값 앞에 붙인다.
   구조(:has)가 아니라 두 표의 id로 콕 집는다 — 앞으로 생길 칸 넷짜리 표에 이름표가 잘못 붙지 않게 */
@media (max-width: 720px) {
  :is(#registered, #fees) .table, :is(#registered, #fees) .table :is(tbody, tr, th, td) { display: block; }
  :is(#registered, #fees) .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :is(#registered, #fees) .table tbody tr { padding: 14px; border-bottom: 1px solid var(--line); }
  :is(#registered, #fees) .table tbody :is(th, td) { width: auto; padding: 0; border: 0; }
  :is(#registered, #fees) .table tbody th { margin-bottom: 4px; font-size: 1.06rem; }
  :is(#registered, #fees) .table tbody td:is(:nth-child(2), :nth-child(3)) { display: inline-block; margin-right: 18px; }
  :is(#registered, #fees) .table td:nth-child(2)::before, :is(#registered, #fees) .table td:nth-child(3)::before, #registered .table td:nth-child(4)::before { color: var(--muted); }
  :is(#registered, #fees) .table td:nth-child(2)::before { content: "등록번호 "; }
  :is(#registered, #fees) .table td:nth-child(3)::before { content: "등급 "; }
  #registered .table td:nth-child(4)::before { content: "주무부처 "; }
  /* 쌓은 카드 안의 자격명 링크: 위 여백은 링크(48px)가 갖고, 옆 여백은 카드가 갖는다.
     다만 초점 테두리가 링크 안쪽 4px에 그려져서 옆 여백이 0이면 첫 글자를 덮는다 — 링크 옆에 6px 여백을 두고 같은 크기의 음수 바깥 여백으로 글 자리는 그대로(카드 옆 여백 14px 안) */
  #registered .table tbody tr { padding-top: 0; }
  #registered .table tbody th a { padding: 0 6px; margin: 0 -6px; }
}
.prose { max-width: 820px; }
/* 글 칸은 가운데가 아니라 다른 띠 · 쪽 제목과 같은 왼쪽 줄에 선다: .wrap의 auto 여백 대신 .wrap의 왼쪽 가장자리와 같은 자리(화면이 --wrap보다 좁으면 0)로. 줄 길이(820px)는 그대로 */
.wrap.prose { margin-left: max(0px, calc((100% - var(--wrap)) / 2)); margin-right: auto; }
.prose h2 { margin: 36px 0 10px; font-size: 1.3rem; }
.prose ol, .prose ul { padding-left: 1.3em; }
.sign { color: var(--green-dark); font-weight: 700; text-align: right; }

/* 입력 칸 · 단계 표시(로그인 3단계) */
.card { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.form { display: grid; gap: 10px; margin: 16px 0; }
/* 로그인 화면의 세 칸은 번갈아 하나만 보이고 나머지는 hidden이다. '띠 안 끝 요소의 아래 여백 0'(.section > .wrap > :last-child)은 숨은 칸도 세어서
   보이는 칸에 안 닿고, 바닥글 위가 76 + 16 = 92px(휴대폰 68px)이 되었다 — 어느 칸이 보이든 맨 아래 칸이므로 세 칸의 아래 여백을 직접 0으로 한다 */
#phoneForm, #codeForm, #profileForm { margin-bottom: 0; }
.form label, .form legend { color: var(--green-dark); font-weight: 700; }
.form input[type="tel"], .form input[type="text"], .form select, .form textarea { width: 100%; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--field-line); border-radius: var(--radius); background: #fff; color: var(--text); font: inherit; font-size: 1.05rem; }
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--green-dark); outline: 3px solid var(--orange); outline-offset: 1px; }
.form fieldset { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.form fieldset legend { grid-column: 1 / -1; margin-bottom: 4px; padding: 0; }
/* 동의 줄: 글 속에 링크가 끼어도('[필수] 이용약관에 동의합니다') 한 문장으로 이어진다. flex로 두면 글 · 링크 · 글이 따로 칸이 되어 사이가 10px씩 벌어지므로,
   글은 보통 흐름으로 두고 체크 칸만 왼쪽에 띄운다(글 앞 여백 32px = 체크 칸 22px + 간격 10px). 체크 칸은 글 첫 줄 가운데에 맞춘다(글자 크기를 키워도 따라간다). 줄이 꺾이면 글 칸에 맞춰 정렬 */
.form .check { display: block; position: relative; min-height: 48px; padding: 10px 0 10px 32px; color: var(--text); font-weight: 500; }
.check input { width: 22px; height: 22px; accent-color: var(--green); }
.form .check input { position: absolute; left: 0; top: calc(10px + (1.65rem - 22px) / 2); margin: 0; }
.field-msg { min-height: 1.4em; margin: 0; color: var(--danger); font-weight: 700; }
.field-msg .btn { display: flex; width: fit-content; margin-top: 8px; } /* 안내 줄 안의 단추(마이페이지: 로그인이 풀렸을 때 [다시 로그인]) — 안내 글 옆이 아니라 아래 줄에 */
.field-msg.ok { color: var(--green-dark); } /* 성공 안내('저장했습니다' · '인증번호를 보냈습니다')는 오류색(빨강)이 아니라 초록 — 마이페이지 */
.note { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--green-light); color: var(--green-dark); font-size: 0.92rem; }
.help { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.help a[href^="tel:"] { white-space: nowrap; } /* '…계속 안 오면 062-227-2356으로 전화 주세요'에서 번호가 062- / 227-2356으로 꺾이지 않게 */
.consent-box { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 0.9rem; } /* 가입 동의 안내(법정 고지) — PC 보통 글자에서도 15px 이상 */
.steps { display: flex; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; justify-content: center; flex: 1; padding: 10px 8px; border-radius: 8px; background: #F1F4F2; color: var(--muted); font-size: 0.9rem; font-weight: 700; text-align: center; } /* 가운데 정렬: 휴대폰에서 '처음 한 번 정보 입력'만 두 줄로 꺾여도 나머지 글이 칸 가운데 */
.steps li.on { background: var(--green); color: #fff; }
/* 다시 받을 수 있을 때까지 기다리는 동안([다시 받기 (56초)])의 단추: 흐린 비활성 단추(.55 투명)는 남은 초가 3.2:1이라 읽기 어렵다 — 불투명하게 두고 본문 회색(7.5:1) 글자로. 마우스를 올려도 색이 안 바뀐다.
   id가 아니라 클래스(.btn-resend)에 건다 — 로그인 화면의 [다시 받기]와 마이페이지 휴대폰 번호 변경의 [인증번호 받기 · 다시 받기]가 같은 모양을 쓴다. .btn[disabled] · .btn-line:hover(선택자 무게 2)보다 무겁게(3) 써서 파일 순서와 상관없이 이긴다 */
.btn.btn-resend[disabled] { opacity: 1; background: #fff; border-color: var(--line); color: var(--muted); }
/* 생년월일: 휴대폰 폭(360px)에서는 세 칸을 한 줄에 두면 고른 값('31일' · '12월')의 끝 글자가 칸에 잘린다 — 글자를 키우면 '1985년'까지. 년도는 한 줄, 월 · 일은 그 아래 두 칸 */
@media (max-width: 720px) {
  .form fieldset { grid-template-columns: 1fr 1fr; }
  .form fieldset select:first-of-type { grid-column: 1 / -1; }
}

/* 신청 창 · 알림 */
dialog.sheet { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
dialog.sheet::backdrop { background: rgba(10, 30, 22, .55); }
.sheet-body { display: grid; gap: 12px; padding: 24px; }
.sheet-body h2 { margin: 0; font-size: 1.3rem; }
.grade-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.grade-choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--field-line); border-radius: 999px; font-weight: 700; cursor: pointer; }
.grade-choice input { width: 20px; height: 20px; accent-color: var(--green); }
/* 폼 안의 급수 고르기: 로그인 화면 생년월일 격자('.form fieldset', 3칸 1.3 : 1 : 1)가 위의 flex를 덮어서 PC에서 알약 폭이 서로 달라지고 셋째 칸이 비었다 — 원래 모양(알약 나란히)으로 */
.form .grade-choice { display: flex; }
/* 신청 창 안의 폼은 창 안쪽 여백(24px)만 갖는다 — .form의 바깥 여백(16px 0)이 더해지면 위 · 아래가 40px가 되어 '신청이 끝났습니다' 쪽(24px)과 높이가 다르다 */
.sheet-body.form { margin: 0; }
.toast { position: fixed; left: 50%; bottom: 80px; z-index: 90; max-width: calc(100% - 32px); padding: 14px 18px; border-radius: 10px; background: var(--green-dark); color: #fff; font-weight: 700; transform: translateX(-50%); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }

/* 고객센터 탭 · 공지 · FAQ */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; border-bottom: 2px solid var(--line); }
.tabs a { display: flex; align-items: center; min-height: 48px; margin-bottom: -2px; padding: 0 14px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 700; text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); }
/* 휴대폰: 옆 여백 · 간격을 줄여 360px에서 가장 큰 글자(21px)에도 세 탭이 한 줄에 든다 — 옆 여백 14px · 간격 6px이면 세 탭 합 342px가 칸(328px)을 넘어 두 줄이 되고 아랫줄 하나에만 밑줄이 그어진다. 높이 48px는 그대로 */
@media (max-width: 720px) { .tabs { gap: 2px; } .tabs a { padding: 0 8px; } }
/* 1:1 문의 쪽은 탭 줄과 양식이 같은 좁은 칸(.narrow, 600px 가운데) 안에 있다. 그대로면 탭 줄이 공지 · FAQ 쪽(본문 폭, 왼쪽 줄)과 PC 1280px에서 283px 어긋나 탭을 오갈 때 줄이 튄다 —
   칸을 본문 폭으로 넓혀(탭 줄이 다른 두 쪽과 똑같아진다) 탭 줄 아래의 안내 · 양식 상자만 원래 폭(600px)으로 둔다. :has()를 모르는 브라우저는 이 규칙 하나만 건너뛰어 예전 모양(가운데 600px 칸)이 된다 */
.wrap.narrow:has(> .tabs) { max-width: var(--wrap); }
.narrow > .tabs ~ * { max-width: 600px; }
.board-item { border-bottom: 1px solid var(--line); }
.board-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font-weight: 700; list-style: none; cursor: pointer; }
.board-item summary::-webkit-details-marker { display: none; }
/* 줄은 칸이 셋(제목 · 날짜 · +)이라 제목이 남는 자리를 차지해야 날짜가 + 바로 옆 오른쪽 끝에 붙는다(안 그러면 줄 한가운데에 뜬다).
   제목은 자유 입력 — 띄어쓰기 없이 긴 제목도 줄어들어서 쪽을 옆으로 밀지 않게 min-width: 0 · overflow-wrap: anywhere (처음 화면 공지 · 처음 화면 FAQ와 같은 이유) */
.board-item summary > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.board-item summary::after { content: '+'; color: var(--green); font-size: 1.3rem; }
.board-item[open] summary::after { content: '−'; }
.board-item .pin { margin-right: 6px; color: var(--orange); }
.board-body { padding: 4px 0 18px; }
.board-body p { margin: 0 0 8px; }
/* 바깥 여백은 없다 — 빈 상태 글(p)의 기본 아래 여백 1em이 목록 칸을 뚫고 올라와 바닥글 위 간격에 더해진다(93px · 휴대폰 68px). 간격은 둘러싼 칸이 정한다 */
.empty { margin: 0; padding: 28px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
/* 1:1 문의 양식: 보이는 양식 뒤에 숨은 완료 칸(#inquiryDone)이 있어 :last-child가 아니다 → '띠 안 끝 요소의 아래 여백 0'이 안 닿아 바닥글 위가 76 + 16 = 92px(휴대폰 68px). 로그인 세 칸과 같은 이유로 직접 0 */
#inquiryForm { margin-bottom: 0; }

/* 마이페이지 */
/* 큰 칸은 글 칸(.prose)과 같은 820px 안 — 그대로면 PC에서 이름 입력 칸이 1100px까지 늘어난다(로그인 · 문의 양식은 600px). 불러오는 중 · 준비 중 · 실패 안내 칸도 같은 폭이라 내용이 나올 때 폭이 튀지 않는다 */
.my-grid, #myLoading, #myClosed, #myProblem { max-width: 820px; }
/* 칸 하나짜리 격자: 기본 칸(auto)은 안의 가장 긴 낱말만큼 늘어난다 — 문의 내용에 띄어쓰기 없는 긴 글(붙여넣은 주소 · 'ㅋㅋㅋ…')이 있으면 360px 화면에서 카드가 2900px까지 넓어졌다. 줄어들 수 있는 칸으로 두면 긴 글은 body의 overflow-wrap: break-word로 꺾인다 */
.my-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.my-course { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.my-course p { margin: 2px 0 0; }
/* 과정으로 가는 링크(내 강의실에서 과정 쪽으로 가는 길) · 신청이 없을 때의 [자격과정 보기]: 글 한 줄 높이(20px)가 아니라 누르는 칸 높이 48px 이상(스펙 5-2). inline-flex라 가운데 정렬 문장 안에서도 제자리 */
.my-course a, #courseList .empty a { display: inline-flex; align-items: center; min-height: 48px; }
/* 수강 상태는 믿음을 주는 정보 — 0.88rem은 PC 보통 글자에서 14.96px라 15px에 못 미쳤다(스펙 5-2). 휴대폰은 아래 '작은 안내 글' 목록(16px) */
.status { display: inline-block; align-self: center; padding: 2px 10px; border-radius: 999px; background: var(--green-light); color: var(--green-dark); font-size: 0.9rem; font-weight: 700; }
.answer { margin-top: 8px; padding: 12px; border-left: 4px solid var(--green); background: var(--green-light); }
.danger-zone { border-color: #F3C9C9; }
.danger-zone .field-msg { margin-top: 10px; } /* 탈퇴 실패 안내가 [회원 탈퇴] 단추에 붙지 않게 */

/* 오른쪽 바로가기(1500px 이상) · 아래 바(1500px 미만 — 휴대폰과 노트북). 어느 폭에서든 둘 중 하나는 보인다 */
/* 경계는 'not all and (min-width: …)'와 '(min-width: …)'를 같은 숫자로 짝지어 쓴다 — 최대 폭 조건으로 쓰면 1499.5px 같은 소수 폭에 바로가기가 하나도 없다 */
/* 상자 폭은 글자(rem)를 따라 커져서 전화번호가 한 줄로 들어가고, 본문 칸(1180px) 옆 빈자리보다는 넓어지지 않는다(max-width).
   고정 요소의 %는 세로 스크롤 막대를 뺀 화면 폭이다 — 뷰포트 단위(vw)는 막대까지 포함해서 막대가 있는 화면에서 본문에 닿는다 */
.quick { position: fixed; top: 50%; right: 16px; z-index: 40; display: none; flex-direction: column; width: 7.8rem; max-width: calc((100% - 1190px) / 2); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(23, 61, 48, .12); transform: translateY(-50%); }
/* overflow: hidden으로 모서리를 깎으면 키보드 초점 테두리까지 잘린다 — 모서리는 첫 · 끝 칸에 직접 주고, 초점 테두리는 칸 안쪽에 그린다 */
.quick a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--green-dark); font-size: 0.9rem; font-weight: 700; text-align: center; text-decoration: none; }
.quick a:first-child { border-top: 0; border-radius: 13px 13px 0 0; }
.quick a:last-child { border-radius: 0 0 13px 13px; }
.quick a:focus-visible { outline-offset: -4px; }
.quick .quick-call { padding: 10px 4px; background: var(--green); color: #fff; } /* 더 크게 + 스크롤 막대가 있는 1500px대 화면은 상자가 147px로 눌려서 번호(한 줄, 140px)가 안쪽 여백으로 번진다 — 여백을 줄여 상자 밖으로는 나가지 않게 */
.quick-call:focus-visible { outline-color: #fff; } /* 초록 바탕에서는 주황 테두리가 보이지 않는다(1.0:1) */
.quick-call strong { font-size: 0.85rem; }
.quick-call span { white-space: nowrap; }
.quick-call small { font-size: 0.8rem; font-weight: 500; line-height: 1.4; } /* 흰 글씨 그대로 — 투명도로 흐리게 하면 초록 바탕과의 대비가 4.5:1 턱걸이가 된다 */
@media (min-width: 1500px) { .quick { display: flex; } }
.mobile-bar { display: none; }
@media not all and (min-width: 1500px) {
  /* 키보드로 초점이 간 입력 칸 · 단추를 브라우저가 화면 안으로 끌어올 때 아래 바 뒤에 숨지 않게 — 바 높이 56px(떠 있는 상자는 아래 16px 띄움까지 74px)에 숨 쉴 여유 */
  html { scroll-padding-bottom: 88px; }
  .mobile-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1.4fr; border-top: 1px solid var(--line); background: #fff; }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--green-dark); font-weight: 800; text-decoration: none; }
  .mobile-bar a.cta { background: var(--orange); color: #fff; }
  .mobile-bar a:focus-visible { outline-offset: -4px; } /* 화면 가장자리에 붙은 칸이라 바깥쪽 테두리는 잘린다 */
  .mobile-bar a.cta:focus-visible { outline-color: #fff; } /* 주황 칸 위의 주황 테두리는 보이지 않는다 */
  /* 1081~1499px: 화면 폭 전체 대신 가운데 떠 있는 상자(폭 560px). 바닥글 아래 여백은 바닥글 규칙 옆에 있다 */
  @media (min-width: 1081px) {
    .mobile-bar { right: auto; bottom: 16px; left: 50%; width: 560px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .14); transform: translateX(-50%); }
    .mobile-bar a:first-child { border-radius: 13px 0 0 13px; }
    .mobile-bar a.cta { border-radius: 0 13px 13px 0; }
  }
}

/* 바닥글 — 진한 초록 바탕(시안과 같게) */
.site-foot { padding: 48px 0 40px; background: var(--green-dark); color: var(--foot-text); font-size: 0.94rem; }
/* 바닥글 위 간격은 어떤 페이지든 같다: 구역 아래 여백(--band-pad) 하나. 바닥글 자신은 위 여백이 없다.
   마지막 칸이 띠(.section)면 그 띠의 아래 여백이 간격이고(띠가 바닥글에 바로 닿는다), 아니면(과정 상세) 같은 값을 마지막 칸 아래에 둔다.
   본문(main)은 body의 세로 단(flex) 안이라 마지막 요소의 아래 여백이 바닥글 쪽으로 겹치지 않고 그대로 더해진다 —
   그래서 띠 안 첫 · 끝 요소의 바깥 여백은 위의 .section 규칙이, 과정 상세 맨 끝 요소의 아래 여백은 '과정 상세' 규칙이 뺀다.
   (맨 끝 칸의 모든 깊이를 건드리는 넓은 규칙은 뒤 Task의 폼 · 카드 여백까지 지우므로 쓰지 않는다)
   과정 상세는 맨 끝에 신청 창(<dialog>)이 붙어서 :last-child가 창이 된다 — 창은 이 규칙에서 빼고(열린 창이 아래 여백 76px를 받아 늘어나지 않게),
   과정 상세 본문(.course-body)이 같은 여백을 직접 갖는다(안 그러면 마지막 구역이 바닥글에 딱 붙는다).
   :not(.section, dialog)(목록 형태)는 쓰지 않는다 — 옛 브라우저는 목록 안의 선택자를 하나만 몰라도 규칙 전체를 버려서 .course-body 쪽 선택자까지 사라진다 */
main > :last-child:not(.section):not(dialog), main > .course-body { padding-bottom: var(--band-pad); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 14px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 48px; color: #fff; text-decoration: none; } /* a:hover의 진한 초록이 진한 바탕에 묻히지 않게 색은 모든 상태에서 같다 */
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-info { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0 0 18px; }
.foot-info div { display: flex; gap: 8px; }
.foot-info dt { color: var(--foot-muted); }
.foot-info dd { margin: 0; }
.foot-legal { margin: 0 0 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.foot-legal a { color: #fff; text-underline-offset: 3px; }
.copy { margin: 0; color: var(--foot-muted); }
.site-foot :focus-visible { outline-color: #fff; } /* 진한 초록 바탕에서는 주황 초점 테두리(2.3:1)가 흐리다 */
/* 아래 바가 바닥글 마지막 줄을 가리지 않게 — 바닥글 아래 여백에 바 높이를 더한다(1500px 이상은 오른쪽 상자라 더하지 않는다).
   <body>에 두면 진한 바닥글 아래로 흰 줄이 보인다. 아래 바 56px + 여백 40px / 떠 있는 상자: 아래 16px + 56px + 테두리 + 여백 */
@media not all and (min-width: 1500px) {
  .site-foot { padding-bottom: 96px; }
  @media (min-width: 1081px) { .site-foot { padding-bottom: 128px; } }
}

/* 휴대폰: 작은 안내 글도 본문 크기(16px)로. 무게가 같은 앞쪽 기본 규칙을 이기려면 그 규칙들보다 뒤에 있어야 한다 */
@media (max-width: 720px) {
  .small, .help, .note, .consent-box, .site-foot, .course-intro, .legal-line, .reg-note, .call-addr, .steps li, .status, .breadcrumb { font-size: 1rem; }
  .site-foot { padding-top: 36px; }
  .foot-info { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .course-card a { transition: none; }
  .course-card a:hover { transform: none; }
}