/* 협회 홈 교육 일정표의 스타일 — 월 달력 막대·도구 줄·상세·목록 표·모바일 점 달력(hms- 접두어) */

/* ──────────────────────────────────────────────────────────────
   색 대비(WCAG 상대휘도 공식으로 실제 계산한 값, 2026-09-19)
     흰 글자 #FFFFFF on #1F6E43 (지자체 교육 막대)        6.23:1  통과
     흰 글자 #FFFFFF on #5C6A62 (협회 일정 막대)          5.69:1  통과
     흰 글자 #FFFFFF on #47805C (지난 지자체 교육 막대)   4.66:1  통과
     흰 글자 #FFFFFF on #697870 (지난 협회 일정 막대)     4.64:1  통과
     글자 #B85A14 on #FFFFFF (교육장 바로가기 테두리 버튼) 4.66:1 통과
     글자 #1A1A17 on #F4F1EA (본문)                      15.46:1 통과
     글자 #5B5F57 on #F4F1EA (보조)                       5.78:1  통과
   지난 일정은 투명도가 아니라 「옅은 배경색」으로 표현한다 — opacity 를 쓰면
   글자 대비까지 같이 떨어지기 때문이다.
   채움 주황(#B85A14)은 사이트의 교육 CTA 전용색이라 일정표에서는 배경으로
   쓰지 않고 테두리·글자색으로만 쓴다.
   ────────────────────────────────────────────────────────────── */

.hms-root {
  --hms-gov: #1F6E43;
  --hms-gov-past: #47805C;
  --hms-assoc: #5C6A62;
  --hms-assoc-past: #697870;
  --hms-brand: var(--hm-brand, #0A3D25);
  --hms-cta: var(--hm-cta, #1F6E43);
  --hms-accent: var(--hm-accent, #B85A14);
  --hms-line: var(--hm-line, #E4DFD3);
  --hms-surface: var(--hm-surface, #ffffff);
  --hms-bg: var(--hm-bg, #F4F1EA);
  --hms-weak: var(--hm-brand-weak, #E7F1EB);
  --hms-text: var(--hm-text, #1A1A17);
  --hms-text-sub: var(--hm-text-sub, #5B5F57);
  --hms-r-card: var(--hm-r-card, 16px);
  --hms-r-pill: var(--hm-r-pill, 999px);
  --hms-bar-h: 24px;

  font-family: var(--hm-font, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif);
  color: var(--hms-text);
  letter-spacing: -0.01em;
  max-width: var(--hm-container, 1200px);
  margin: 0 auto;
}

.hms-root *, .hms-root *::before, .hms-root *::after { box-sizing: border-box; }

.hms-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 도구 줄 ─────────────────────────────────────────────── */

.hms-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--hms-line);
  margin-bottom: 16px;
}

.hms-monthnav { display: flex; align-items: center; gap: 6px; }

.hms-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--hms-brand);
  margin: 0;
  min-width: 8.5em;
  text-align: center;
  line-height: 1.3;
}

.hms-prev, .hms-next, .hms-today, .hms-toggle-cal, .hms-more,
.hms-detail-close, .hms-select {
  min-height: 44px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--hms-brand);
  background: var(--hms-surface);
  border: 1px solid var(--hms-line);
  border-radius: var(--hms-r-pill);
  cursor: pointer;
}

.hms-prev, .hms-next { min-width: 44px; padding: 0; }
.hms-prev .hms-ico, .hms-next .hms-ico { font-size: 22px; line-height: 1; }
.hms-today, .hms-toggle-cal, .hms-detail-close { padding: 0 18px; }

.hms-prev:hover, .hms-next:hover, .hms-today:hover,
.hms-toggle-cal:hover, .hms-more:hover, .hms-detail-close:hover {
  background: var(--hms-weak);
  border-color: var(--hms-cta);
}

.hms-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* 이름표 + 선택 상자 한 덩어리. 줄이 바뀌어도 둘이 갈라지지 않는다. */
.hms-field { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.hms-sel-label { font-size: 15px; font-weight: 600; color: var(--hms-text-sub); white-space: nowrap; }

.hms-select {
  padding: 0 12px;
  border-radius: var(--hm-r-input, 10px);
  min-width: 108px;
  background: var(--hms-surface);
}

.hms-legend {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
  font-size: 14px;
  color: var(--hms-text-sub);
}
.hms-legend-item { display: flex; align-items: center; gap: 6px; }

.hms-mark {
  display: inline-block;
  width: 10px; height: 10px;
  flex: 0 0 auto;
  background: var(--hms-assoc);
}
.hms-mark-gov { border-radius: 50%; background: var(--hms-gov); }
.hms-mark-assoc { transform: rotate(45deg); background: var(--hms-assoc); }

/* ── 우리 지역 교육 기간 안내 ──────────────────────────────
   클래스는 `hms-myregion-` 이다. 상세 패널의 시·도별 목록이 이미 `.hms-region` 을 쓰고 있어
   같은 이름을 쓰면 상세의 평평한 줄이 연두색 둥근 상자가 된다(라이브에서 확인, 2026-09-20). */

.hms-myregion {
  background: var(--hms-weak);
  border: 1px solid var(--hms-line);
  border-radius: var(--hms-r-card);
  padding: 14px 18px;
  margin: 0 0 16px;
}
.hms-myregion-ul { list-style: none; margin: 0; padding: 0; }
.hms-myregion-li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 5px 0;
  font-size: 15px;
}
.hms-myregion-n { color: var(--hms-brand); font-weight: 700; word-break: keep-all; }
.hms-myregion-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hms-cta);
  border-radius: var(--hms-r-pill);
  background: var(--hms-surface);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--hms-cta);          /* #1F6E43 on #fff = 6.23:1 */
  cursor: pointer;
  white-space: nowrap;
}
.hms-myregion-go:hover { background: var(--hms-cta); color: #ffffff; }
.hms-myregion .hms-empty { padding: 6px 0 0; }
.hms-myregion > .hms-myregion-n { display: block; margin: 0 0 4px; }

/* ── 월 달력(막대) ───────────────────────────────────────── */

.hms-calwrap { margin-bottom: 20px; }

.hms-cal {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--hms-surface);
  border: 1px solid var(--hms-line);
  border-radius: var(--hms-r-card);
  overflow: hidden;
}

.hms-cal-cap, .hms-list-cap {
  caption-side: top;
  text-align: left;
  font-size: 14px;
  color: var(--hms-text-sub);
  padding: 0 0 8px;
}
/* 달력 표는 모서리가 둥글고 넘침을 자른다 — 캡션 첫 글자가 왼쪽 위 둥근 모서리에 잘리지 않게 안쪽으로 들인다. */
.hms-cal-cap { padding-left: 10px; }

.hms-dow {
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--hms-text-sub);
  background: var(--hms-bg);
  border-bottom: 1px solid var(--hms-line);
}
.hms-dow abbr { text-decoration: none; border: 0; }
.hms-dow-0 { color: #A33A32; }
.hms-dow-6 { color: #2A5C8A; }

.hms-day {
  vertical-align: top;
  padding: 0;
  box-shadow: inset -1px 0 0 var(--hms-line);
}
.hms-week td:last-child { box-shadow: none; }
.hms-barsrow > td { padding: 0; border-bottom: 1px solid var(--hms-line); }

/* 막대 영역 — 주마다 7열 grid. 줄 높이가 내용에 따라 자동으로 늘고,
   같은 줄에 놓인 막대끼리 높이가 달라도 겹치지 않는다.
   열 너비가 table-layout:fixed 의 1/7 과 같아 위의 날짜 숫자 줄과 어긋나지 않는다. */
.hms-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(var(--hms-rows, 1), auto);
  row-gap: 3px;
  padding: 0 0 5px;
  min-height: 8px;
}
.hms-todaycol {
  grid-column: var(--c) / span 1;
  grid-row: 1 / -1;
  background: var(--hms-weak);
  margin: -2px 0 -5px;
}

.hms-daynum {
  display: block;
  padding: 5px 8px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hms-text-sub);
}
.hms-day.is-out { background: #FBFAF7; }
.hms-day.is-out .hms-daynum { color: #6B6A5F; }   /* on #FBFAF7 = 5.22:1 (이전 #9A9A92 는 2.71:1, 0920 검수 OBS-45) */
.hms-day.is-today { background: var(--hms-weak); }
.hms-day.is-today .hms-daynum {
  color: #ffffff;
  background: var(--hms-brand);        /* 흰 글자 on #0A3D25 = 12.30:1 */
  border-radius: 999px;
  width: 22px; height: 22px;
  line-height: 22px;
  padding: 0;
  text-align: center;
  margin: 4px 0 0 6px;
}

.hms-bar {
  position: relative;
  z-index: 1;
  grid-column: var(--cs, 1) / var(--ce, 2);
  grid-row: var(--lane, 1);
  align-self: start;                 /* 같은 줄의 다른 막대 높이에 늘어나지 않게. */
  margin: 0 2px;
  min-height: var(--hms-bar-h);
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
  background: var(--hms-assoc);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.hms-bar .hms-mark { margin-top: 4px; }
.hms-bar-per { white-space: nowrap; }
/* 지난 막대는 배경이 옅어 글자를 흐리면 4.22:1 로 떨어진다(0920 검수 OBS-45). 흐림은 지나지 않은 막대에만 준다. */
.hms-bar:not(.is-past) .hms-bar-per { opacity: .92; }
.hms-bar-n { white-space: nowrap; }   /* 이름이 가운데서 쪼개지지 않게 — 줄바꿈은 이름 단위로만. */
.hms-bar-gov { background: var(--hms-gov); }
.hms-bar-assoc { background: var(--hms-assoc); }
.hms-bar-gov.is-past { background: var(--hms-gov-past); }
.hms-bar-assoc.is-past { background: var(--hms-assoc-past); }
.hms-bar .hms-mark { background: rgba(255, 255, 255, .92); width: 8px; height: 8px; }
/* min-width:0 이 없으면 flex 항목이 글자 길이 밑으로 줄지 않아 막대 밖으로 넘친다. */
.hms-bar-t { flex: 1 1 auto; min-width: 0; }
/* 이어지는 조각만 한 줄로 줄이고 넘치면 말줄임. 첫 조각은 줄을 바꿔 전부 담는다. */
.hms-bar.is-cont .hms-bar-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 이어지는 조각의 글자 ────────────────────────────────
   주가 바뀌면 같은 이름을 다시 적되 「옅게」 — 굵기를 600 → 400 으로 낮추고 앞 기호(●/◆)를 뺀다.
   흰 글자 알파를 낮춰 옅게 하는 것은 **진행·예정 막대에만** 쓴다. 실제 계산값 —
     rgba(255,255,255,.88) on #1F6E43 = 5.25:1   (지자체 교육, 진행·예정)
     rgba(255,255,255,.88) on #5C6A62 = 4.84:1   (협회 일정, 진행·예정)
   지난 일정 막대는 여유가 없다 — 흰 글자 그대로가 #47805C 4.66:1 · #697870 4.64:1 이고
   알파를 .95 로만 낮춰도 4.39:1 · 4.37:1 로 AA 미달이 된다. 그래서 지난 일정의 이어지는
   조각은 색을 건드리지 않고 굵기와 기호로만 구분한다. 대비를 깎아서 옅게 하지 않는다. */
.hms-bar.is-cont .hms-bar-t { font-weight: 400; }
.hms-bar.is-cont:not(.is-past) .hms-bar-t { color: rgba(255, 255, 255, .88); }

/* 주를 넘어 이어지는 막대의 끝은 화살표 모양으로 — 색만이 아니라 형태로 알린다. */
.hms-bar.is-contr { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); padding-right: 14px; }
.hms-bar.is-contl { clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); padding-left: 14px; }
.hms-bar.is-contl.is-contr {
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
  padding-left: 14px; padding-right: 14px;
}

.hms-morerow td { padding: 2px 6px 6px; box-shadow: inset 0 -1px 0 var(--hms-line); }
.hms-more {
  width: 100%;
  padding: 0 12px;
  font-size: 14px;
  background: var(--hms-bg);
}

/* ── 상세 ────────────────────────────────────────────────── */

.hms-detail {
  background: var(--hms-surface);
  border: 1px solid var(--hms-line);
  border-left: 4px solid var(--hms-cta);
  border-radius: var(--hms-r-card);
  padding: 20px 22px;
  margin: 0 0 20px;
}
.hms-detail-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--hms-brand);
  margin: 0 0 12px;
  line-height: 1.35;
}
.hms-detail-title:focus-visible { outline: 2px solid var(--hms-cta); outline-offset: 3px; }

.hms-dl { margin: 0 0 16px; }
.hms-dl-row { display: flex; gap: 12px; padding: 5px 0; font-size: 15px; }
.hms-dl dt { flex: 0 0 74px; color: var(--hms-text-sub); font-weight: 600; margin: 0; }
.hms-dl dd { margin: 0; flex: 1 1 auto; word-break: break-word; }

/* 상세의 시·도별 지자체 목록 */
.hms-regions { margin: 0 0 16px; border-top: 1px solid var(--hms-line); }
.hms-region { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hms-line); font-size: 15px; }
.hms-regions dt { flex: 0 0 8.5em; margin: 0; font-weight: 700; color: var(--hms-brand); word-break: keep-all; }
.hms-regions dd { margin: 0; flex: 1 1 auto; color: var(--hms-text); word-break: keep-all; }
@media (max-width: 767px) {
  .hms-region { flex-direction: column; gap: 2px; }
  .hms-regions dt { flex: none; }
}

.hms-status {
  display: inline-block;
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: var(--hms-r-pill);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--hms-line);
  color: var(--hms-text-sub);
  background: var(--hms-surface);
}
.hms-status-now { color: #ffffff; background: var(--hms-gov); border-color: var(--hms-gov); }   /* 6.23:1 */
.hms-status-soon { color: var(--hms-brand); background: var(--hms-weak); border-color: var(--hms-weak); }
.hms-status-done { color: var(--hms-text-sub); }

.hms-edu-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  margin: 0 10px 0 0;
  border: 2px solid var(--hms-accent);   /* 채움 주황 금지 — 테두리형 */
  border-radius: var(--hms-r-pill);
  color: var(--hms-accent);              /* #B85A14 on #fff = 4.66:1 */
  background: var(--hms-surface);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}
.hms-edu-link:hover { background: #FBF2EA; color: #9A4A10; }   /* #9A4A10 on #FBF2EA = 5.65:1 (기본 글자색 그대로면 4.21:1) */
.hms-link { color: var(--hms-cta); word-break: break-all; }

/* ── 목록 표 ─────────────────────────────────────────────── */

.hms-list {
  width: 100%;
  border-collapse: collapse;
  background: var(--hms-surface);
  font-size: 15px;
}
.hms-list th, .hms-list td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hms-line);
  vertical-align: middle;
  word-break: keep-all;          /* 한국어는 낱말 단위로 줄을 바꾼다. */
}
.hms-list thead th {
  font-size: 14px;
  color: var(--hms-text-sub);
  background: var(--hms-bg);
  border-bottom: 1px solid var(--hms-line);
}
.hms-list .hms-col-0 { white-space: nowrap; width: 8.5em; }
.hms-list .hms-col-0 .hms-mark { margin-right: 6px; vertical-align: middle; }
.hms-list .hms-col-1 { white-space: nowrap; width: 11em; }
.hms-list .hms-col-2 { word-break: keep-all; }
.hms-list .hms-col-3 { white-space: nowrap; width: 5.5em; }
.hms-cities { color: var(--hms-text); }
.hms-count { color: var(--hms-text-sub); white-space: nowrap; font-weight: 600; }
.hms-cities-sum { display: none; }        /* 좁은 화면에서만 보인다(아래 미디어 쿼리). */
.hms-range-short { display: none; }        /* 좁은 화면에서만 보인다(아래 미디어 쿼리). */
.hms-list-row:hover { background: var(--hms-bg); }

.hms-listbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--hms-brand);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hms-listbtn:hover { color: var(--hms-cta); }

.hms-empty { color: var(--hms-text-sub); padding: 22px 12px; }
.hms-synced { font-size: 13px; color: var(--hms-text-sub); margin: 10px 0 0; }
.hms-note { font-size: 14px; color: var(--hms-text-sub); margin: 0 0 16px; word-break: keep-all; }

/* ── 모바일 점 달력 ──────────────────────────────────────── */

.hms-mobcal { margin-bottom: 20px; }
/* 좁은 화면에서는 본문 폭(375 화면에서 311px)을 7칸으로 나누면 날짜 버튼이 43.28px 이 된다(0920 검수 OBS-50).
   점 달력만 좌우로 10px 씩 넓혀 360 화면부터 44px 을 확보한다. 페이지 좌우 여백(32px) 안이라 가로 넘침은 없다. */
@media (max-width: 400px) {
  .hms-mobcal { margin-left: -10px; margin-right: -10px; }
}
.hms-mcal {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--hms-surface);
  border: 1px solid var(--hms-line);
  border-radius: var(--hms-r-card);
  overflow: hidden;
}
.hms-mday-cell { padding: 0; border: 1px solid var(--hms-line); }
.hms-mday {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 48px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--hms-text);
  cursor: pointer;
}
.hms-mday.is-out { color: #6B6A5F; background: #FBFAF7; }   /* 5.22:1 */
.hms-mday.is-today .hms-mday-n {
  color: #ffffff; background: var(--hms-brand);
  border-radius: 999px; width: 24px; height: 24px; line-height: 24px; text-align: center;
}
.hms-mday.is-sel { background: var(--hms-weak); box-shadow: inset 0 0 0 2px var(--hms-cta); }
.hms-dots { display: flex; gap: 3px; min-height: 8px; }
.hms-dot { display: block; width: 7px; height: 7px; }
.hms-dot-gov { border-radius: 50%; background: var(--hms-gov); }
.hms-dot-assoc { transform: rotate(45deg); background: var(--hms-assoc); }

.hms-daylist { margin-top: 12px; }
.hms-daylist-title { font-size: 16px; font-weight: 700; color: var(--hms-brand); margin: 0 0 8px; }
.hms-daylist-hint { font-size: 14px; color: var(--hms-text-sub); margin: 0; }
.hms-daylist-ul { list-style: none; margin: 0; padding: 0; }
.hms-daybtn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--hms-line);
  border-radius: 10px;
  background: var(--hms-surface);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--hms-text);
  text-align: left;
  cursor: pointer;
}
.hms-daybtn-t { flex: 1 1 auto; word-break: keep-all; }
.hms-daybtn-s { font-size: 13px; color: var(--hms-text-sub); font-weight: 600; white-space: nowrap; }

/* ── 포커스 ──────────────────────────────────────────────── */

.hms-root button:focus-visible,
.hms-root select:focus-visible,
.hms-root a:focus-visible {
  outline: 2px solid var(--hms-cta);
  outline-offset: 2px;
}
.hms-bar:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px var(--hms-brand);
}

/* ── 반응형 ──────────────────────────────────────────────── */

@media (min-width: 768px) {
  .hms-toggle-cal { display: none; }
  .hms-mobcal { display: none !important; }
}

@media (max-width: 767px) {
  .hms-calwrap { display: none; }
  .hms-toolbar { gap: 10px 12px; }
  .hms-title { font-size: 19px; min-width: 0; flex: 1 1 auto; }
  .hms-monthnav { width: 100%; }
  .hms-tools { width: 100%; flex-wrap: wrap; gap: 8px 10px; }
  /* 좁은 화면에서는 덩어리가 남는 폭을 나눠 갖고, 선택 상자가 그 안에서 줄어든다.
     라이브 본문 폭은 311px(375 화면)·256px(320 화면)라 상자가 줄지 않으면 덩어리가 줄을 넘는다. */
  .hms-field { flex: 1 1 140px; min-width: 0; gap: 6px; }
  .hms-field .hms-select { flex: 1 1 auto; min-width: 0; }
  .hms-toggle-cal { flex: 1 1 100%; }
  .hms-legend { margin-left: 0; }
  .hms-list { font-size: 14px; }
  .hms-list th, .hms-list td { padding: 8px 6px; }
  .hms-list .hms-col-0, .hms-list .hms-col-1, .hms-list .hms-col-3 { width: auto; }
  /* 지자체 이름 칸만 — 칸보다 긴 낱말은 그때만 쪼개 화면 밖으로 밀려나지 않게 한다.
     다른 칸까지 이 규칙을 주면 「지자체 교육」이 한 글자씩 세로로 쪼개진다(실측). */
  .hms-list .hms-col-2 { overflow-wrap: anywhere; }
  /* 좁은 화면에서는 「강릉시 외 8곳」으로 줄인다 — 22곳을 다 적으면 한 행이 22줄이 된다(실측).
     전체 이름은 시각 숨김으로 남겨 화면낭독기는 그대로 읽는다. */
  .hms-col-2.is-group .hms-cities {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }
  .hms-col-2.is-group .hms-count { display: none; }
  .hms-cities-sum { display: inline; }
  /* 기간은 짧은 표기(8.24~9.6)를 보이고, 긴 표기는 화면낭독기용으로 남긴다. */
  .hms-range-short { display: inline; }
  .hms-list .hms-range-long {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }
  .hms-status { font-size: 12px; padding: 2px 8px; }
  .hms-detail { padding: 16px; }
  .hms-dl-row { flex-direction: column; gap: 2px; }
  .hms-dl dt { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hms-root *, .hms-root *::before, .hms-root *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ══ 테마 간섭 차단 ══════════════════════════════════════════════
   사이트 추가 CSS 의 본문 공통 규칙(`body:not(.home) .entry-content …`)이 이 컴포넌트
   안까지 닿아 시안과 다르게 보이는 것을 막는다. 실측 재현 — 60_제작기록/schedule/theme_repro.html.
   테마 규칙의 특이도는 0,2,2 ~ 0,3,3 이라 컴포넌트의 0,1,0 규칙을 이긴다. 그래서 같은
   조상 사슬에 `.hms-root` 를 한 칸 더 얹어 특이도를 0,3,x ~ 0,5,x 로 올리고, 테마가
   덮어쓴 속성만 컴포넌트가 원래 쓰던 값으로 다시 선언한다. !important 는 쓰지 않는다.
   홈(body.home)에는 이 컴포넌트가 없어 고려하지 않는다.
   ① h2/h3 — 위아래 큰 여백·주황 밑줄(h2::after)·왼쪽 초록 띠(h3 border-left)
   ② ul/li — 앞의 녹색 점(li::before)·왼쪽 22px 들여쓰기·아래 10px 여백·보조 글자색
   ③ table — 테두리·둥근 모서리·칸 여백 14/16px·글자색·캡션이 표 아래로 내려가는 것
   ④ th:first-child — 첫 열을 90px 로 고정해 좁은 화면에서 지자체 칸이 세 줄로 꺾이던 것
   `inherit` 을 쓴 곳은 컴포넌트가 값을 선언하지 않고 물려받기를 의도한 자리다. */

/* ① 제목 — 테마의 여백·밑줄·띠·자간을 걷어 내고 각 제목의 본래 크기를 다시 준다. */
body:not(.home) .entry-content .hms-root h2,
body:not(.home) .entry-content .hms-root h3 {
  margin: 0;
  padding: 0;
  border: 0;
  position: static;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
body:not(.home) .entry-content .hms-root h2::before,
body:not(.home) .entry-content .hms-root h2::after,
body:not(.home) .entry-content .hms-root h3::before,
body:not(.home) .entry-content .hms-root h3::after { content: none; }

body:not(.home) .entry-content .hms-root .hms-title { font-size: 22px; line-height: 1.3; }
body:not(.home) .entry-content .hms-root .hms-detail-title { font-size: 19px; line-height: 1.35; margin: 0 0 12px; }
body:not(.home) .entry-content .hms-root .hms-daylist-title { font-size: 16px; margin: 0 0 8px; }

/* ② 목록 — 범례와 그날 일정 목록에 점·들여쓰기가 붙던 것을 되돌린다. */
body:not(.home) .entry-content .hms-root ul { margin: 0; padding: 0; }
body:not(.home) .entry-content .hms-root li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: static;
  color: inherit;
  line-height: inherit;
}
body:not(.home) .entry-content .hms-root li::before,
body:not(.home) .entry-content .hms-root li::after { content: none; }
/* 범례는 도구 줄 오른쪽 끝에 붙는다(모바일에서는 왼쪽 정렬이라 넓은 화면에서만). */
@media (min-width: 768px) {
  body:not(.home) .entry-content .hms-root .hms-legend { margin-left: auto; }
}

/* ③ 표 틀 — 테두리·모서리·칸 나눔·글자 크기. */
body:not(.home) .entry-content .hms-root .hms-cal { border-radius: var(--hms-r-card); font-size: inherit; }
body:not(.home) .entry-content .hms-root .hms-mcal {
  border-radius: var(--hms-r-card);
  font-size: inherit;
  border-collapse: collapse;
  border-spacing: 2px;        /* 브라우저 기본값. collapse 에서는 쓰이지 않지만 테마가 0 으로 바꿔 둔 것을 되돌린다. */
}
body:not(.home) .entry-content .hms-root .hms-list {
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-size: 15px;
  border-collapse: collapse;
  border-spacing: 2px;
}
/* 캡션은 표 위에 남는다 — 테마는 표 아래로 내린다. */
body:not(.home) .entry-content .hms-root .hms-cal-cap,
body:not(.home) .entry-content .hms-root .hms-list-cap {
  caption-side: top;
  text-align: left;
  font-size: 14px;
  color: var(--hms-text-sub);
  padding: 0 0 8px;
}
body:not(.home) .entry-content .hms-root .hms-cal-cap { padding-left: 10px; }

/* ④ 달력 칸 — 요일 머리·날짜 칸·막대 줄·「더 보기」 줄·모바일 점 달력. */
body:not(.home) .entry-content .hms-root .hms-dow {
  padding: 10px 0;
  text-align: center;
  color: var(--hms-text-sub);
}
body:not(.home) .entry-content .hms-root .hms-dow-0 { color: #A33A32; }
body:not(.home) .entry-content .hms-root .hms-dow-6 { color: #2A5C8A; }
/* 테마는 표의 첫 열을 90px 로 고정한다 — 7등분 달력에서는 요일이 어긋난다. */
body:not(.home) .entry-content .hms-root .hms-cal th:first-child,
body:not(.home) .entry-content .hms-root .hms-mcal th:first-child { width: auto; }

body:not(.home) .entry-content .hms-root .hms-day {
  padding: 0;
  border-bottom: 0;
  color: inherit;
  line-height: inherit;
}
body:not(.home) .entry-content .hms-root .hms-barsrow > td {
  padding: 0;
  border-bottom: 1px solid var(--hms-line);
  color: inherit;
  line-height: inherit;
}
body:not(.home) .entry-content .hms-root .hms-morerow td {
  padding: 2px 6px 6px;
  border-bottom: 0;
  color: inherit;
  line-height: inherit;
}
body:not(.home) .entry-content .hms-root .hms-mday-cell {
  padding: 0;
  border: 1px solid var(--hms-line);
  color: inherit;
  line-height: inherit;
}

/* ⑤ 목록 표 칸 — 칸 여백·정렬·아래 줄·글자색·열 너비. */
body:not(.home) .entry-content .hms-root .hms-list th,
body:not(.home) .entry-content .hms-root .hms-list td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--hms-line);
  color: inherit;
  line-height: inherit;
}
body:not(.home) .entry-content .hms-root .hms-list thead th {
  font-size: 14px;
  color: var(--hms-text-sub);
}
body:not(.home) .entry-content .hms-root .hms-list .hms-empty { color: var(--hms-text-sub); }
body:not(.home) .entry-content .hms-root .hms-list .hms-col-0 { width: 8.5em; }
body:not(.home) .entry-content .hms-root .hms-list .hms-col-1 { width: 11em; }
body:not(.home) .entry-content .hms-root .hms-list .hms-col-3 { width: 5.5em; }

/* ⑥ 우리 지역 교육 기간 안내 — 위 ② 의 li 되돌리기(padding:0)가 이 목록의 줄 간격까지 지운다.
   테마가 준 들여쓰기·점은 그대로 막고 컴포넌트가 쓰던 위아래 여백만 다시 준다. */
body:not(.home) .entry-content .hms-root .hms-myregion-li { padding: 5px 0; }

/* ⑦ 선택 상자 아래 안내 문구 — 부모 테마의 `.single-content p`(아래 여백 2rem)가 컴포넌트의 16px 를 덮는다(라이브에서 32px 확인, 2026-09-20). */
body:not(.home) .entry-content .hms-root .hms-note { margin: 0 0 16px; }

@media (max-width: 767px) {
  body:not(.home) .entry-content .hms-root .hms-title { font-size: 19px; }
  body:not(.home) .entry-content .hms-root .hms-list { font-size: 14px; }
  body:not(.home) .entry-content .hms-root .hms-list th,
  body:not(.home) .entry-content .hms-root .hms-list td { padding: 8px 6px; }
  body:not(.home) .entry-content .hms-root .hms-list .hms-col-0,
  body:not(.home) .entry-content .hms-root .hms-list .hms-col-1,
  body:not(.home) .entry-content .hms-root .hms-list .hms-col-3 { width: auto; }
}