@charset "UTF-8";

/* ============================================================
   본문 컴포넌트
   ============================================================ */

/* --- 섹션 / 배치 -------------------------------------------- */
.section { padding-top: 40px; padding-bottom: 40px; }
.section--surface { background: var(--c-surface); }
.section--tight { padding-top: 28px; padding-bottom: 28px; }

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}
.sec-head--center { display: block; text-align: center; margin-bottom: 36px; }
.sec-head--center .sec-desc { margin-left: auto; margin-right: auto; }

.cols { display: flex; flex-wrap: wrap; gap: 28px; }
.cols--wide { gap: 48px; }
.col-main { flex: 999 1 520px; min-width: 0; }
.col-side { flex: 1 1 320px; min-width: 0; }
.col-half { flex: 1 1 440px; min-width: 0; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid--gap-l { gap: 20px; }
.grid--gap-xl { gap: 24px; }

/* --- 카드 / 패널 -------------------------------------------- */
.card {
  padding: 28px 24px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background-color: #fff;
}
.card--pad-l { padding: 30px; }
.card--top { border-top: 4px solid var(--c-brand); }
.card--top-strong { border-top: 4px solid var(--c-brand-deep); }
a.card { display: block; height: 100%; color: var(--c-ink); }
a.card:hover { border-color: var(--c-brand); text-decoration: none; }
.card h3, .card__title {
  display: block;
  margin-top: 14px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.45;
}
.card__text {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-muted);
}
.card__icon { color: var(--c-brand); }

.panel { padding: 30px; border-radius: var(--r-lg); }
.panel--surface { background: var(--c-surface); }
.panel--tint { background: var(--c-tint); }
.panel--line { border: 1px solid var(--c-line-2); background: #fff; }
.panel--deep { background: var(--c-brand-deep); color: #fff; }
.panel--edu { background: var(--c-edu-deep); color: #fff; }
.panel--deep h2, .panel--deep h3,
.panel--edu h2, .panel--edu h3 { color: #fff; }
.panel--deep p, .panel--deep li,
.panel--edu p, .panel--edu li { color: var(--c-on-deep); }
.panel--pad-l { padding: 36px; }

/* --- 목록 --------------------------------------------------- */
.list-dot { display: flex; flex-direction: column; gap: 12px; }
.list-dot li { display: flex; gap: 10px; font-size: 16px; line-height: 1.8; color: var(--c-body); }
.list-dot li::before { content: "\00B7"; flex: none; color: var(--c-brand); font-weight: 700; }
/* 짙은 배경 패널 안에서는 본문 색(어두운 회색)을 쓰면 글자가 묻힙니다 */
.panel--deep .list-dot li,
.panel--edu .list-dot li { color: var(--c-on-deep); }
.panel--deep .list-dot li::before,
.panel--edu .list-dot li::before { color: var(--c-on-deep-dim); }

.list-num { display: flex; flex-direction: column; gap: 14px; }
.list-num > li { display: flex; gap: 16px; font-size: 16px; line-height: 1.7; color: var(--c-body); }
.list-num .no {
  flex: none;
  min-width: 28px;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  color: var(--c-brand);
}
.list-num strong { display: block; font-size: 18px; color: var(--c-ink); }
.list-num .desc { display: block; margin-top: 6px; font-size: 16px; line-height: 1.8; color: var(--c-muted); }

.dl-grid { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px 0; font-size: 17px; }
.dl-grid dt { font-weight: 700; color: var(--c-muted); }
.dl-grid dd { line-height: 1.7; }
.dl-grid--sm { grid-template-columns: 70px minmax(0, 1fr); gap: 10px 0; font-size: 16px; }
.panel--deep .dl-grid dt { color: var(--c-on-deep-dim); }

.link-cards { display: grid; gap: 12px; }

/* --- 표 ----------------------------------------------------- */
.tbl-wrap { overflow-x: auto; }
.tbl {
  width: 100%;
  min-width: 720px;
  border-top: 2px solid var(--c-ink);
}
.tbl caption {
  text-align: left;
  padding-bottom: 12px;
  font-size: 15px;
  color: var(--c-muted);
}
.tbl thead tr { background: var(--c-surface); }
.tbl th, .tbl td {
  padding: 16px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
  vertical-align: middle;
}
.tbl thead th { border-bottom: 1px solid var(--c-line); font-weight: 700; }
.tbl tbody th { font-weight: 700; color: var(--c-ink); }
.tbl td { color: var(--c-body); }
.tbl .tc { text-align: center; }

/* 게시판형 */
.board { min-width: 860px; }
.board td, .board th { padding: 18px 16px; }
.board .subject a { font-size: 17px; color: var(--c-ink); }
.board .subject a:hover { color: var(--c-brand); }
.board tr.is-notice { background: var(--c-surface-2); }
/* 언론보도 — 행 전체가 기사로 연결됩니다 */
.board--link tr.is-link { cursor: pointer; }
.board--link tr.is-link:hover { background: var(--c-surface-2); }
.board--link tr.is-link:hover .subject a { color: var(--c-brand-strong); text-decoration: underline; }
.board tr.is-notice .subject a { font-weight: 700; }

/* --- 페이지네이션 ------------------------------------------- */
.pagination { margin-top: 40px; display: flex; justify-content: center; }
.pagination ul { display: flex; align-items: center; gap: 6px; }
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-body);
}
.pagination a:hover { border-color: var(--c-brand); color: var(--c-brand); text-decoration: none; }
.pagination a[aria-current="page"] {
  border-color: var(--c-brand-strong);
  background: var(--c-brand-strong);
  color: #fff;
  font-weight: 700;
}

/* --- 단계 (steps) ------------------------------------------- */
.steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.step {
  flex: 1 1 180px;
  min-width: 0;
  padding: 24px 20px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
}
.step--surface { border: 0; background: var(--c-surface); }
.step--on { border: 0; background: var(--c-brand-deep); color: #fff; }
.step--on .step__no { color: var(--c-on-deep-dim); }
.step--on .card__text { color: var(--c-on-deep); }
.step--edu { border: 0; background: var(--c-edu-deep); color: #fff; }
.step--edu .step__no { color: var(--c-on-deep-dim); }
.step__no {
  display: block;
  font-family: "Archivo", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-brand);
}
.step strong { display: block; margin-top: 10px; font-size: 18px; }
.chev { flex: none; display: flex; align-items: center; color: #AAA0A0; }

/* --- 통계 / 차트 -------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpi {
  padding: 26px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
}
.kpi__label { font-size: 16px; color: var(--c-muted); }
.kpi__value {
  display: block;
  margin-top: 10px;
  font-family: "Archivo", sans-serif;
  letter-spacing: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
}
.kpi__unit { font-size: 19px; margin-left: 4px; }

.chart {
  padding: 26px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
}
.chart__title { font-size: 18px; font-weight: 700; }
.chart__title span { font-weight: 400; font-size: 14px; color: var(--c-muted); }
.chart__hero {
  margin-top: 20px;
  font-family: "Archivo", sans-serif;
  letter-spacing: -0.02em;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}
.chart__hero small { font-family: "Noto Sans KR", sans-serif; font-size: 18px; font-weight: 700; color: var(--c-muted); margin-left: 6px; }

/* 세로 막대 */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 196px;
  margin-top: 26px;
  border-bottom: 1px solid var(--c-line);
}
.bars--tall { height: 220px; gap: 14px; }
.bars li { flex: 1; text-align: center; }
.bars .v { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.bars .b { display: block; border-radius: 4px 4px 0 0; background: var(--c-bar-soft); }
.bars li.is-on .b { background: var(--c-brand); }
.bar-axis { display: flex; gap: 10px; margin-top: 10px; }
.bars--tall + .bar-axis { gap: 14px; }
.bar-axis li { flex: 1; text-align: center; font-size: 13px; color: var(--c-muted); }
.bar-axis li.is-on { font-weight: 700; color: var(--c-ink); }

/* 최댓값·최솟값 달을 다른 색으로 */
.bars li.is-max .b { background: var(--c-brand); }
.bars li.is-min .b { background: #9B9B9B; }
.bar-axis li.is-max { font-weight: 700; color: var(--c-brand-strong); }
.bar-axis li.is-min { font-weight: 700; color: var(--c-muted); }

/* 막대 12개(월별)는 좁으므로 간격과 글자를 줄입니다 */
.bars--12 { height: 196px; gap: 4px; margin-top: 0; }
.bars--12 .v { margin-bottom: 4px; font-size: 10px; letter-spacing: -0.06em; }
.bar-axis--12 { gap: 4px; }
.bar-axis--12 li { font-size: 11px; letter-spacing: -0.04em; }
/* 패널 안에 들어가는 차트는 테두리를 빼고 씁니다 */
.chart--flat { padding: 0; border: 0; border-radius: 0; }

/* 가로 막대 */
.hbars { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.hbars .row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 7px; }
.hbars .track { height: 12px; border-radius: 6px; background: var(--c-line-soft); }
.hbars .fill { height: 12px; border-radius: 6px; background: var(--c-brand); }
.hbars--lg .row { font-size: 16px; margin-bottom: 8px; }
.hbars--lg .track, .hbars--lg .fill { height: 14px; border-radius: 7px; }

/* --- 플레이스홀더 ------------------------------------------- */
.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed #CFC6C6;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-muted);
}
.ph--dark { border-color: #B07878; background: #8E2A2A; color: #E0C4C4; }
.ph--sm { border-radius: var(--r-md); font-size: 14px; color: var(--c-dim); }

/* --- 갤러리 ------------------------------------------------- */
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.thumbs a { display: block; color: var(--c-ink); }
.thumbs a:hover { text-decoration: none; }
.thumbs a:hover .thumb__title { color: var(--c-brand); }
.thumb__img { display: flex; align-items: center; justify-content: center; height: 230px; }
/* 올린 사진은 칸을 가득 채우고 가운데를 보여 줍니다 */
img.thumb__img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.thumb__title { display: block; margin-top: 16px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.thumb__date { display: block; margin-top: 6px; font-family: "Archivo", sans-serif; font-size: 14px; color: var(--c-muted); }

/* --- 자료 / 공지 목록 (메인) -------------------------------- */
.box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--c-ink);
}
.box-head h2 { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--c-muted); }
.more:hover { color: var(--c-brand); text-decoration: none; }

.dot-list li { border-bottom: 1px solid var(--c-line-soft); }
.dot-list li:last-child { border-bottom: 0; }
.dot-list a { display: flex; gap: 20px; align-items: baseline; padding: 17px 0; color: var(--c-ink); }
.dot-list a:hover { color: var(--c-brand); }
.dot-list .t { flex: 999 1 auto; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-list .d { flex: none; font-family: "Archivo", sans-serif; font-size: 14px; color: var(--c-muted); }
.dot-list__pin { margin-right: 8px; padding: 3px 10px; font-size: 13px; vertical-align: 1px; }

.file-list { display: flex; flex-direction: column; gap: 12px; }
.file-list--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.file-list--two a { padding: 12px; }
.file-list--two .file-ico { width: 36px; height: 36px; }
.file-list a {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--c-line-2);
  border-radius: 12px;
  color: var(--c-ink);
}
.file-list a:hover { border-color: var(--c-brand); text-decoration: none; }
.file-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--c-tint);
  color: var(--c-brand-strong);
}
.file-list .meta { min-width: 0; }
.file-list strong { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .sub { font-family: "Archivo", sans-serif; font-size: 13px; color: var(--c-muted); }

.dl-list { display: flex; flex-direction: column; gap: 10px; }
.dl-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--c-line-2);
  border-radius: 12px;
  background: #fff;
  color: var(--c-ink);
  font-size: 16px;
  font-weight: 700;
}
.dl-list a:hover { border-color: var(--c-brand); text-decoration: none; }

/* --- 메인 ---------------------------------------------------- */
.hero { position: relative; background: var(--c-brand-deep); color: #fff; overflow: hidden; }

/* 배경 사진 슬라이드 — 5장이 겹쳐 있고 보이는 한 장만 불투명합니다 */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero__slide.is-on { opacity: 1; }
/* 사진 위에서도 글자가 읽히도록 덮는 색 */
.hero__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(122, 31, 31, 0.93) 0%,
    rgba(122, 31, 31, 0.84) 40%,
    rgba(122, 31, 31, 0.66) 100%);
}
.hero > .inner { position: relative; z-index: 1; }
.hero > .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 96px;
}
.hero__copy { flex: 999 1 460px; min-width: 0; }
.hero__side { flex: 1 1 400px; min-width: 0; }
.hero__kicker { font-family: "Archivo", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px; font-weight: 700; color: var(--c-on-deep-dim); margin-bottom: 18px; }
.hero h1 { font-size: 54px; line-height: 1.26; letter-spacing: -0.04em; font-weight: 900; word-break: keep-all; }
.hero__lead { margin-top: 22px; font-size: 19px; line-height: 1.75; color: var(--c-on-deep); max-width: 540px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__card { margin-top: 14px; padding: 24px; border-radius: var(--r-lg); background: #fff; color: var(--c-ink); }
.hero__card h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.hero__quick { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hero__quick a {
  display: block;
  padding: 16px 10px;
  border-radius: 12px;
  background: var(--c-surface);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink);
}
.hero__quick a:hover { background: var(--c-tint); color: var(--c-brand-strong); text-decoration: none; }

.quick { background: var(--c-surface); }
.quick > .inner { padding-bottom: 28px; }
.quick ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* 설명이 두 줄이 되는 칸이 있어도 네 칸의 높이를 같게 맞춥니다 */
.quick li { display: flex; }
.quick a {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  color: var(--c-ink);
}
.quick a:hover { border-color: var(--c-brand); text-decoration: none; }
.quick strong { display: block; font-size: 18px; }
.quick .sub { font-size: 14px; color: var(--c-muted); }


.family { background: #fff; border-bottom: 1px solid var(--c-line); }
.family > .inner { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.family h2 { flex: none; font-size: 16px; font-weight: 700; color: var(--c-muted); }
.family ul { flex: 999 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.family a {
  display: block;
  padding: 11px 18px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  font-size: 15px;
  color: var(--c-ink);
}
.family a:hover { border-color: var(--c-brand); color: var(--c-brand); text-decoration: none; }

/* --- 연혁 --------------------------------------------------- */
.timeline { border-left: 2px solid var(--c-line); padding-left: 28px; }
.timeline__year {
  font-family: "Archivo", sans-serif;
  letter-spacing: 0.02em;
  font-size: 28px;
  font-weight: 800;
  color: var(--c-brand-strong);
}
.timeline ul { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.timeline li { display: flex; gap: 16px; }
.timeline .m {
  flex: none;
  width: 48px;
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-brand);
}
.timeline .txt { font-size: 17px; line-height: 1.7; color: var(--c-body); }

/* --- 조직도 ------------------------------------------------- */
/* 도형과 연결선의 좌표는 organization.jsp 안에 직접 적어 두었습니다. */
.org-wrap {
  padding: 48px 32px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 20px;
  overflow-x: auto;      /* 좁은 화면에서는 가로로 밀어 봅니다 */
}
.org { position: relative; width: 900px; height: 712px; margin: 0 auto; }
.org__box {
  position: absolute;
  box-sizing: border-box;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
}
/* 단장 · 부단장 · 사무국장 */
.org__box--lead { background: var(--c-brand); color: #fff; font-size: 20px; }
/* 사무국 소속 사무원 */
.org__box--staff { background: var(--c-brand); color: #fff; }
/* 분과 · 운영위원회 */
.org__box--sub {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  font-weight: 500;
}
/* 응급의료 협의체 */
.org__box--com { background: var(--c-dim); color: #fff; }
.org__line { position: absolute; background: #CFC8C8; }

/* --- 홈 : 구별 응급의료 지표 -------------------------------- */
/*
 * 메인 비주얼(짙은 배경) 안에 들어갑니다.
 *   제목 → 지표 탭(가로) → 지도 + 차트
 */
.hero--region > .inner {
  display: block;
  padding-top: 34px;
  padding-bottom: 38px;
}
.hero--region h1 { font-size: 42px; }

/* 지표가 바뀔 때 슬라이드처럼 살짝 떠오릅니다 */
/* 슬라이드가 넘어갈 때 — 옆에서 밀려 들어옵니다 */
@keyframes regionSwap {
  from { opacity: 0; transform: translateX(46px); }
  to { opacity: 1; transform: none; }
}
.region-body.is-swap { animation: regionSwap 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* 지도 버블 — 차례로 톡톡 올라옵니다 */
@keyframes bubblePop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  60% { transform: translate(-50%, -50%) scale(1.06); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.region-bub.is-pop {
  animation: bubblePop 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0s) both;
}

/* 월별 막대 — 아래에서 자라납니다 */
@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.bars.is-grow .b {
  transform-origin: bottom;
  animation: barGrow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0s) both;
}

/* 지도 + 차트 — 가로를 7 : 3 으로 나눕니다 */
.region-body {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: 30px;
  align-items: center;    /* 오른쪽 영역을 지도 높이의 상하 가운데에 둡니다 */
  margin-top: 20px;
}
/* 지표 제목 + 슬라이드 조작 줄 */
.region-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 22px;
}
.region-ctrl { display: flex; align-items: center; gap: 14px; }

/* 지표 개수만큼 찍히는 점 */
.region-dots { display: flex; align-items: center; gap: 2px; }
.region-dots__btn {
  position: relative;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
}
.region-dots__btn::before {
  content: "";
  position: absolute;
  inset: 9px 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.region-dots__btn:hover::before { background: rgba(255, 255, 255, 0.75); }
.region-dots__btn[aria-current="true"]::before {
  inset: 9px 3px;
  border-radius: 4px;
  background: #fff;
}

.region-play {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(46, 12, 12, 0.34);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.region-play:hover { border-color: #fff; background: rgba(46, 12, 12, 0.55); }
/* 재생 중에는 '멈춤'(II), 멈춘 뒤에는 '재생'(▶) 모양 */
.region-play__icon {
  display: block;
  width: 11px;
  height: 13px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
.region-play.is-paused .region-play__icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 12px solid currentColor;
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* 지도와 차트 위에 걸리는 지표 제목 */
.region-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
/* 지표 이름 길이에 따라 줄 수가 달라지지 않도록 설명은 늘 아랫줄에 둡니다 */
.region-title span {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-on-deep-dim);
}
/* 자료 출처 — 작게 */
.region-source {
  margin-top: 12px;
  text-align: right;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-on-deep-dim);
}

/*
 * 오른쪽 떠다니는 배너(1200px 이상에서 보이고 1660px 부터는 본문 바깥에 놓임)가
 * 차트를 가리지 않도록, 겹치는 구간에서만 안쪽 여백을 늘립니다.
 */
@media (min-width: 1200px) and (max-width: 1659px) {
  .hero--region > .inner { padding-right: 206px; }
}

@media (max-width: 1000px) {
  .region-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
  .region-title { font-size: 19px; }
  .region-title span { display: block; margin-left: 0; margin-top: 4px; }
}

/*
 * 지도와 파이차트를 한 칸에 겹쳐 둡니다.
 * 감춘 쪽도 자리를 지켜, 슬라이드가 바뀌어도 영역 높이가 그대로입니다.
 */
.region-view { display: grid; min-width: 0; }
.region-view > * { grid-area: 1 / 1; min-width: 0; }
/*
 * 감춘 쪽도 자리는 지킵니다.
 * 이때 원래 배치(지도는 block, 파이는 flex)를 그대로 둬야
 * 도넛과 범례가 세로로 쌓이면서 높이가 커지는 일이 없습니다.
 */
.region-view > [hidden] {
  visibility: hidden;
  pointer-events: none;
}
.region-map-col[hidden] { display: block; }
.region-pie-col[hidden] { display: flex; }

/* --- 파이차트형 지표 (틈 없는 도넛 + 둘레 라벨) -------------- */
.region-pie-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.region-pie {
  position: relative;
  width: 100%;
  max-width: 620px;
}
.region-pie__svg { display: block; width: 100%; height: auto; }

/* 도넛 조각 — 굵은 호를 틈 없이 이어 붙입니다 */
.region-pie__slice {
  fill: none;
  stroke-width: 38;
  stroke-linecap: butt;
  cursor: pointer;
  transition: stroke-width 0.18s ease, opacity 0.18s ease;
}
.region-pie__slice:hover { opacity: 0.88; }
.region-pie__slice.is-on { stroke-width: 50; }
/*
 * 조각을 누르면 브라우저가 기본 초점 테두리를 그리는데,
 * SVG 패스라 도넛 전체를 감싸는 네모로 나옵니다. 그래서 끄고,
 * 키보드로 옮겨 다닐 때는 조각을 굵고 밝게 해서 알려 줍니다.
 */
.region-pie__slice:focus { outline: none; }
.region-pie__slice:focus-visible { stroke-width: 50; filter: brightness(1.18); }
/* 시계 방향으로 그려지는 애니메이션 */
@keyframes pieDraw {
  from { stroke-dashoffset: var(--len, 0); }
  to { stroke-dashoffset: 0; }
}
.region-pie__slice.is-draw { animation: pieDraw 0.9s ease-out var(--delay, 0s) both; }

/* 도넛 가운데 합계 */
.region-pie__sum-l { fill: var(--c-on-deep-dim); font-size: 14px; font-weight: 700; }
.region-pie__sum-v {
  fill: #fff;
  font-family: "Archivo", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.region-pie__sum-u { fill: var(--c-on-deep); font-size: 14px; font-weight: 700; }

/* 둘레 라벨 — 이름표와 비율 */
.region-pie__tags { position: absolute; inset: 0; pointer-events: none; }
.region-pie__tag {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}
@keyframes pieTagIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.region-pie__tag.is-anim { animation: pieTagIn 0.45s ease var(--delay, 0s) both; }
.region-pie__tag-n {
  /* 상태별 값은 변수로 두고, 실제로 그리는 선언은 이 한 곳에만 둡니다 */
  --pill-bg: var(--tone, #C4362B);
  --pill-fg: #fff;
  --pill-ring: 0 0 0 2px rgba(255, 255, 255, 0.92);
  --pill-scale: 1;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background-color: var(--pill-bg);
  color: var(--pill-fg);
  box-shadow: var(--pill-ring);
  transform: scale(var(--pill-scale));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
}
.region-pie__tag-p {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  transition: text-shadow 0.18s ease;
}
/* 선택된 라벨 — 색을 뒤집어(흰 바탕 + 조각 색 글자) 기본 상태와 구분합니다 */
.region-pie__tag.is-on .region-pie__tag-n {
  --pill-bg: #fff;
  --pill-fg: var(--tone, #C4362B);
  --pill-ring: 0 0 0 3px var(--tone, #C4362B), 0 6px 18px rgba(0, 0, 0, 0.3);
  --pill-scale: 1.06;
}
.region-pie__tag.is-on .region-pie__tag-p { text-shadow: 0 0 14px rgba(255, 255, 255, 0.75); }
.region-pie__tag:not(.is-on):hover .region-pie__tag-n { --pill-ring: 0 0 0 3px rgba(255, 255, 255, 0.95); }
.region-pie__empty { font-size: 15px; color: var(--c-on-deep); }

/* 지도 — 배경 그림 + 그 위에 얹은 투명 경계 */
.region-map { position: relative; }
.region-map__bg { display: block; width: 100%; height: auto; }
.region-map__hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* 빈 여백은 그냥 지나가게 */
}
.region-map__area {
  pointer-events: auto;   /* 구 모양 안에서만 반응 */
  fill: transparent;
  stroke: transparent;
  stroke-width: 5;
  stroke-linejoin: round;
  cursor: pointer;
  /*
   * 색 전환(transition)을 걸면 첫 화면에서 선택된 구의 테두리가
   * 시작값(투명)에 멈춘 채 남는 일이 있어 쓰지 않습니다.
   */
}
.region-map__area:hover { fill: rgba(165, 42, 42, 0.10); stroke: rgba(165, 42, 42, 0.45); }
/*
 * 선택한 구는 테두리로 표시합니다.
 * 흰 지도와 짙은 배경 양쪽에서 보여야 하므로 노란 계열을 씁니다.
 */
.region-map__area.is-on {
  fill: rgba(255, 193, 61, 0.14);
  stroke: #FFC13D;
  stroke-width: 6;
}

/* 지도 위 숫자 버블 */
.region-map__bubbles { position: absolute; inset: 0; pointer-events: none; }
.region-bub {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  /* 크기는 region.js 가 지도 폭에 맞춰 --bub 으로 넣어 줍니다 */
  width: var(--bub, 78px);
  height: var(--bub, 78px);
  padding: 0;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(51, 51, 51, 0.22);
  color: #fff;
  pointer-events: auto;
  transition: transform 0.14s ease;
}
.region-bub:hover { transform: translate(-50%, -50%) scale(1.06); }
.region-bub .n { font-size: calc(var(--bub, 78px) * 0.165); font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; }
.region-bub .v { font-size: calc(var(--bub, 78px) * 0.22); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
/* 좁은 화면 — 숫자만 */
.region-map__bubbles.is-compact .region-bub .n { display: none; }
.region-map__bubbles.is-compact .region-bub .v { font-size: calc(var(--bub, 78px) * 0.3); }
.region-bub--hi { background: #C4362B; }
.region-bub--mid { background: #E08A2E; }
.region-bub--lo { background: #2E6FB7; }
.region-bub.is-on { box-shadow: 0 0 0 4px rgba(165, 42, 42, 0.35), 0 6px 14px rgba(51, 51, 51, 0.28); }

/* 오른쪽 차트 패널 */
/* 카드 없이 비주얼 배경 위에 바로 올립니다 */
.region-panel {
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}
/* 구 이름(왼쪽) + 수치(오른쪽) */
.region-panel__top {
  display: flex;
  flex-wrap: wrap;          /* 이름이 길면 수치가 아랫줄로 내려갑니다 */
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  /*
   * 이름 길이에 따라 한 줄/두 줄이 오가도 카드 높이가 변하지 않도록
   * 두 줄 분량을 미리 잡아 둡니다.
   */
  min-height: 86px;
}
.region-panel .chart { padding-top: 18px; }
/* 수치 밑에 붙는 설명 줄 */
.region-panel__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line-soft);
}
.region-panel__facts li { font-size: 18px; color: var(--c-muted); }
.region-panel__facts strong { font-weight: 700; color: var(--c-brand-strong); }
.region-panel__facts strong.is-min { color: var(--c-muted); }

/*
 * 짙은 사진 배경 위에 놓이므로 안쪽 글자·막대 색을 모두 밝은 쪽으로 바꿉니다.
 * (같은 .chart / .bars 가 흰 바탕 페이지에서도 쓰이므로 이 영역에만 적용)
 */
/* 구 이름 배지는 지도 버블과 같은 색을 씁니다 */
.hero--region .region-panel__eyebrow { background: #fff; color: var(--c-brand-strong); }
.hero--region .region-panel__eyebrow--hi { background: #C4362B; color: #fff; }
.hero--region .region-panel__eyebrow--mid { background: #E08A2E; color: #fff; }
.hero--region .region-panel__eyebrow--lo { background: #2E6FB7; color: #fff; }
.hero--region .region-panel__hero { color: #fff; }
.hero--region .region-panel__hero small { color: var(--c-on-deep); }
.hero--region .region-panel__facts { border-top-color: rgba(255, 255, 255, 0.3); }
.hero--region .region-panel__facts li { color: var(--c-on-deep); }
.hero--region .region-panel__facts strong { color: #fff; }
.hero--region .region-panel__facts strong.is-min { color: #D8C9C9; }
.region-panel .chart__title { font-size: 21px; color: #fff; }
.region-panel .chart__title span { font-size: 16px; color: var(--c-on-deep-dim); }
/* 막대 글자도 한 단계씩 (열이 12개라 너무 키우면 겹칩니다) */
.region-panel .bars--12 .v { font-size: 12px; }
.region-panel .bar-axis--12 li { font-size: 13px; }
.region-panel .bars { border-bottom-color: rgba(255, 255, 255, 0.35); }
.region-panel .bars .b { background: rgba(255, 255, 255, 0.4); }
/* 최고 달은 흰 막대로는 묻혀서 노란색으로 띄웁니다 */
.region-panel .bars li.is-max .b { background: #FFC13D; }
.region-panel .bars li.is-min .b { background: #D5D5D5; }
/* 막대 수치와 달 이름은 모두 흰색 */
.region-panel .bars .v,
.region-panel .bar-axis li { color: #fff; }
.region-panel .bar-axis li.is-max { color: #fff; }
.region-panel .bar-axis li.is-min { color: #fff; }
.hero--region .region-panel__empty {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-on-deep);
}
.region-panel__desc { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--c-body); }
/* 월별 수치가 아직 없을 때 */
.region-panel__empty {
  margin-top: 18px;
  padding: 28px 18px;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
  color: var(--c-muted);
}
.region-panel__eyebrow {
  display: inline-block;
  white-space: nowrap;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--c-brand-strong);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.region-panel__hero {
  flex: none;
  margin-left: auto;
  font-family: "Archivo", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  color: var(--c-brand-strong);
}
.region-panel__hero small {
  margin-left: 6px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-muted);
}

@media (max-width: 768px) {
  .region-bub { border-width: 2px; }
}

/* --- 오시는 길 : 주변 교통 ---------------------------------- */
.traffic { margin-top: 24px; border-top: 2px solid var(--c-ink); }
.traffic__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 20px;
  align-items: start;
  padding: 22px 2px;
  border-bottom: 1px solid var(--c-line);
}
.traffic__title { font-size: 19px; font-weight: 700; color: var(--c-ink); }
/* 항목 사이를 얇은 선으로 구분합니다 */
.traffic__list { display: flex; flex-wrap: wrap; row-gap: 10px; }
.traffic__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-body);
}
.traffic__list li:first-child { padding-left: 0; }
.traffic__list li + li { border-left: 1px solid var(--c-line); }

/* 호선 / 정류장 번호 */
.t-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.t-badge--line { background: var(--c-st-green); color: #fff; }
.t-badge--stop { border: 1px solid var(--c-line); background: #fff; color: var(--c-muted); }

/* 버스 등급별 묶음 */
.bus { display: flex; flex-direction: column; gap: 14px; }
.bus__row { display: flex; align-items: flex-start; gap: 12px; }
.bus__type {
  flex: none;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}
.bus__type--trunk { background: #4A69B0; }   /* 간선 */
.bus__type--branch { background: #3E8E5A; }  /* 지선 */
.bus__type--wide { background: #7A4FA3; }    /* 광역 */
.bus__type--rapid { background: var(--c-brand); } /* 급행 */
.bus__list { display: flex; flex-wrap: wrap; row-gap: 8px; }
.bus__list li { padding: 0 12px; font-size: 17px; line-height: 1.6; color: var(--c-body); }
.bus__list li:first-child { padding-left: 0; }
.bus__list li + li { border-left: 1px solid var(--c-line); }

/* --- 중증도 분류 -------------------------------------------- */
.triage { display: flex; flex-direction: column; gap: 12px; }
.triage li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
}
.triage .swatch { flex: none; width: 14px; height: 44px; border-radius: 4px; }
.triage strong { display: block; font-size: 17px; }
.triage .desc { display: block; margin-top: 4px; font-size: 15px; color: var(--c-muted); }

/* --- 색상 견본 (디자인 가이드용) ---------------------------- */
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.swatch-card { border: 1px solid var(--c-line-2); border-radius: var(--r-md); overflow: hidden; }
.swatch-card .chip-color { height: 88px; }
.swatch-card .body { padding: 16px; }

/* --- 게시글 상세 -------------------------------------------- */
.article { border-top: 2px solid var(--c-ink); }
.article__head { padding: 32px 8px 24px; border-bottom: 1px solid var(--c-line); }
.article__title { margin-top: 16px; font-size: 32px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.4; }
.article__meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--c-muted); }
.article__meta div { display: flex; gap: 8px; }
.article__meta dd { color: var(--c-ink); }
.article__body { padding: 36px 8px 44px; border-bottom: 1px solid var(--c-line); }
.article__files { padding: 24px 8px; border-bottom: 1px solid var(--c-line); }
.article__files ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.article__files a {
  display: inline-grid;
  max-width: 100%;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: 16px;
}
.article__files a > svg { grid-row: 1 / span 2; align-self: start; margin-top: 3px; }
.article__files .file-name { line-height: 1.45; word-break: break-all; }
.article__files .file-size { font-size: 14px; color: var(--c-muted); }
.article__files a:hover { border-color: var(--c-brand); text-decoration: none; }
.prevnext { border-bottom: 1px solid var(--c-line); }
.prevnext li { border-bottom: 1px solid var(--c-line-soft); }
.prevnext li:last-child { border-bottom: 0; }
.prevnext a { display: flex; gap: 20px; align-items: center; padding: 18px 8px; color: var(--c-ink); }
.prevnext a:hover { color: var(--c-brand); }
.prevnext .lab { flex: none; display: inline-flex; align-items: center; gap: 8px; width: 92px; font-size: 15px; font-weight: 700; color: var(--c-muted); }
.prevnext .t { flex: 999 1 auto; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prevnext .t.is-none { color: var(--c-dim); }
.article-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }

/* --- 검색 결과 ---------------------------------------------- */
.search-visual { background: var(--c-brand-deep); color: #fff; }
.search-visual > .inner { padding-top: 56px; padding-bottom: 56px; }
.search-visual .search-form { margin-top: 26px; max-width: 760px; }
.search-visual .input { height: 60px; border: 0; border-radius: 12px; }
.search-visual .btn { min-height: 60px; border-radius: 12px; }
.search-visual .hint { margin-top: 16px; font-size: 15px; color: #E0C4C4; }
.result-list li { border-bottom: 1px solid var(--c-line-soft); }
.result-list li:last-child { border-bottom: 0; }
.result-list a { display: block; padding: 22px 4px; color: var(--c-ink); }
.result-list a:hover { text-decoration: none; }
.result-list a:hover strong { color: var(--c-brand); }
.result-list strong { display: block; font-size: 19px; }
.result-list .snippet { display: block; margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--c-muted); }
.result-list .src { display: block; margin-top: 8px; font-family: "Archivo", sans-serif; font-size: 14px; color: var(--c-dim); }
mark { background: var(--c-tint); color: var(--c-brand-strong); font-weight: 700; }

/* --- 로그인 ------------------------------------------------- */
/* --- 로그인 --------------------------------------------------- */
.login-box { max-width: 700px; margin: 0 auto; }
.login-card {
  padding: 44px 40px 40px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 10px 30px rgba(74, 27, 27, 0.06);
}
.login-card__head { text-align: center; }
.login-card__head h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--c-ink); }
.login-card__head p { margin-top: 8px; font-size: 15.5px; color: var(--c-muted); }

.login-msg {
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-body);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;   /* 안내 글은 칸 가운데에 둡니다 */
}
.login-msg--bad { background: #FBEFEE; color: #B3261E; font-weight: 700; }

.login-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.login-links { display: flex; flex-wrap: wrap; gap: 4px; }
.login-links a { display: block; padding: 6px 8px; font-size: 15px; color: var(--c-muted); }
.login-links a:hover { color: var(--c-brand); }
.login-links .sep { display: flex; align-items: center; color: var(--c-line); }

.login-divider { height: 1px; margin: 26px 0 20px; background: var(--c-line-2); }

/* 카드 아래 계정 안내 — 한 줄씩 떨어지게 둡니다 */
.login-notes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.login-notes > li {
  position: relative;
  padding-left: 15px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-body);
}
.login-notes > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-brand);
}
@media (max-width: 767px) {
  .login-card { padding: 30px 22px 26px; }
  .login-notes { padding: 18px 20px; }
}

/* --- 코드 블록 (퍼블리싱 가이드) ---------------------------- */
.code {
  margin-top: 18px;
  padding: 26px;
  background: var(--c-dark);
  color: #E3E3E3;
  border-radius: var(--r-md);
  font-family: "Archivo", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.9;
  overflow-x: auto;
}
code { font-family: "Archivo", ui-monospace, monospace; font-size: 14px; color: var(--c-brand-strong); }

/* --- 반응형 ------------------------------------------------- */
@media (max-width: 1024px) {
  .grid--5, .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero h1 { font-size: 44px; }
}
@media (max-width: 768px) {
  .section { padding-top: 56px; padding-bottom: 56px; }
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: minmax(0, 1fr); }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero > .inner { padding-top: 48px; padding-bottom: 56px; gap: 32px; }
  .hero h1 { font-size: 34px; }
  .hero__lead { font-size: 17px; }
  .article__title { font-size: 26px; }
  .chev { display: none; }
  .step { flex: 1 1 100%; }
  .dl-grid { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .dl-grid dt { margin-top: 10px; }
  .org-wrap { padding: 24px 16px; }
  .timeline { padding-left: 20px; }
  .traffic__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bus__row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .thumbs { grid-template-columns: minmax(0, 1fr); }
  .swatches { grid-template-columns: minmax(0, 1fr); }
  .hero__quick { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .hero__btns .btn { width: 100%; }
  /* 입력칸과 한 줄에 선 단추는 제 폭을 지킵니다 (인증번호 받기 · 검색 등) */
  .sms-row .btn,
  .search-form .btn,
  .apply-modal__foot .btn,
  .btn--sm,
  .btn--icon { width: auto; }
}

/* ============================================================
   설립 목적 및 연혁
   ============================================================ */

/* --- 설립 목표 ---------------------------------------------- */
.goal + .goal { margin-top: 36px; }
.goal__head { display: flex; align-items: flex-start; gap: 16px; }
.goal__head { align-items: center; }
.goal__no {
  flex: none;
  min-width: 34px;
  font-family: "Archivo", sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--c-brand);
}
/* 제목은 한 줄로 둡니다 (줄바꿈 금지) */
.goal__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.03em;
  color: var(--c-brand);
  white-space: nowrap;
}
/* 설립 목표 칸을 조금 넓게 잡아 제목이 잘리지 않게 합니다 */
.cols--about > .col-half:first-child { flex: 1.12 1 480px; }
.cols--about > .col-half:last-child { flex: 0.88 1 400px; }
.goal__rule { height: 2px; margin: 14px 0 16px; background: var(--c-brand); }
.goal__items { display: flex; flex-direction: column; gap: 12px; }
.goal__items li {
  display: flex;
  gap: 10px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-body);
}
.goal__items li::before { content: "\00B7"; flex: none; color: var(--c-brand); font-weight: 700; }

/* --- 설립 목적 ---------------------------------------------- */
.purpose__head {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--c-brand);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
}
.purpose__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  margin-top: 16px;
}
.purpose__cat {
  flex: none;
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.purpose__items {
  flex: 999 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.purpose__items li { font-size: 16px; line-height: 1.6; color: var(--c-body); }

/* --- 연혁 연도 탭 ------------------------------------------- */
.year-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--c-line);
}
.year-tabs button {
  display: block;
  min-width: 112px;
  padding: 16px 22px;
  border: 0;
  background: var(--c-surface);
  color: var(--c-muted);
  font-family: "Archivo", sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  border-radius: 10px 10px 0 0;
}
.year-tabs button:hover { background: var(--c-tint); color: var(--c-brand-strong); }
.year-tabs button.is-on { background: var(--c-brand); color: #fff; }

/* --- 연혁 본문 ---------------------------------------------- */
.hist { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 36px; }
.hist__year {
  flex: none;
  width: 120px;
  font-family: "Archivo", sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-brand);
}
.hist__body { flex: 999 1 520px; min-width: 0; }
/* 달 단위로 묶고, 각 달 아래에 일자 + 내용을 둡니다 */
.hist__group + .hist__group { margin-top: 30px; }
.hist__month {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-brand-strong);
}
.hist__month::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}
.hist__items { margin-top: 10px; }
.hist__items li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 12px 0;
}
.hist__items li + li { border-top: 1px solid var(--c-line-soft); }
.hist__d {
  font-size: 16px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: var(--c-brand);
}
.hist__t {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-ink);
}

@media (max-width: 768px) {
  .purpose__cat { width: 100%; }
  .purpose__row { gap: 12px; }
  .hist { gap: 16px; padding-top: 24px; }
  .hist__year { width: 100%; font-size: 30px; }
  .hist__month { font-size: 19px; }
  .hist__items li { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding: 11px 0; }
  .hist__d { font-size: 15px; }
  .hist__t { font-size: 16px; }
  .goal__no { font-size: 38px; min-width: 28px; }
  .year-tabs button { min-width: 90px; padding: 14px 16px; font-size: 16px; }
}

/* 좁은 화면에서는 제목이 넘치지 않도록 줄바꿈을 허용합니다 */
@media (max-width: 760px) {
  .goal__title { white-space: normal; word-break: keep-all; font-size: 17px; }
}

/* --- 교육 · 행사 신청서 ------------------------------------- */
.apply-box {
  margin-top: 36px;
  padding: 32px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.apply-box .form-grid { margin-top: 20px; }
.apply-box .field--wide { grid-column: 1 / -1; }
.apply-box__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line-2);
}
.apply-msg {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-body);
  font-size: 16px;
  line-height: 1.6;
}
.apply-msg--ok { background: #E4F1E9; color: #1F6F43; font-weight: 700; }
.apply-msg--bad { background: #FBE9E7; color: #A8322A; font-weight: 700; }

/* 목록에서 신청을 받고 있는 글에 붙는 표시 */
.tag-apply {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: #1E8A5F;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .apply-box { padding: 22px 18px; }
}

/* 휴대폰 문자 인증 */
.sms-row { display: flex; gap: 8px; align-items: center; }
/* 클래스가 기본 [hidden] 보다 우선하므로 따로 숨겨 줍니다 */
.sms-row[hidden] { display: none; }
.sms-row + .sms-row { margin-top: 8px; }
.sms-row .input { flex: 1 1 auto; min-width: 0; }
.sms-row .btn { flex: 0 0 auto; white-space: nowrap; }
.sms-row .input[readonly] { background: var(--c-surface-2); color: var(--c-muted); }
.sms-msg { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.sms-msg.is-ok { color: #1F6F43; font-weight: 700; }
.sms-msg.is-bad { color: #A8322A; font-weight: 700; }

/* 본문 끝의 신청 안내 줄 */
.apply-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding: 22px 26px;
  border: 1px solid var(--c-line-2);
  border-left: 5px solid var(--c-brand);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.apply-cta__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apply-cta__text strong { font-size: 18px; color: var(--c-ink); }
.apply-cta__text span { font-size: 15px; color: var(--c-body); }
@media (max-width: 767px) {
  .apply-cta { padding: 18px; }
  .apply-cta .btn { width: 100%; justify-content: center; }
}

/* --- 생명망 하나로 소개 ------------------------------------- */

/* 배경 및 목적 — 본문 중간의 인용 상자 */
.pull-quote {
  margin: 28px 0;
  padding: 26px 30px;
  border-left: 5px solid var(--c-brand);
  border-radius: var(--r-md);
  background: var(--c-tint);
  font-size: 19px;
  line-height: 1.8;
  color: var(--c-brand-deep);
}
.pull-quote strong { color: var(--c-brand-strong); }

/* 오류 화면 */
.err-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-tint);
  color: var(--c-brand-strong);
}

/* 기대효과 — 그림 한 장과 설명을 나란히 */
.effect-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.effect {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 22px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  background: #fff;
}
/*
 * 그림은 흰 바탕으로 그려져 있습니다.
 * 연한 자리 위에 곱하기로 얹어, 그림이 네모로 떠 보이지 않게 합니다.
 */
.effect__pic {
  display: block;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  overflow: hidden;
}
.effect__pic img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.effect__no {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-brand-pale);
}
.effect__title {
  display: block;
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--c-ink);
  word-break: keep-all;
}
.effect__text {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-body);
  word-break: keep-all;
}

.effect-note {
  margin-top: 26px;
  padding: 18px 24px;
  border-left: 4px solid var(--c-brand);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-body);
}
.effect-note strong { color: var(--c-brand-strong); }

/* 주요기능 — 화면 그림 + 설명을 번갈아 둡니다 */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: 28px; }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  background: #fff;
}
.feature:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.feature:nth-child(even) .feature__shot { order: 2; }
.feature__shot {
  margin: 0;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  overflow: hidden;
}
.feature__shot a { display: block; }
.feature__shot img {
  display: block;
  width: 100%;
  height: auto;
  /* 세로로 긴 캡처(채팅 화면)가 너무 커지지 않도록 높이를 묶어 둡니다 */
  max-height: 380px;
  object-fit: contain;
  object-position: center;
  background: #1A1A1A;
}
.feature__shot figcaption { display: none; }
/* 그림 파일이 아직 없을 때 보이는 자리표시 */
.feature__shot.is-empty figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--c-muted);
  font-size: 15px;
}
.feature__no {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--c-brand);
}
.feature__title { margin-top: 6px; font-size: 24px; font-weight: 800; color: var(--c-ink); }
.feature__text { margin-top: 12px; font-size: 16.5px; line-height: 1.8; color: var(--c-body); }

@media (max-width: 1024px) {
  .effect-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .effect { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
  .effect__pic { width: 100%; max-width: 300px; margin: 0 auto; }
  .feature,
  .feature:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
  .feature:nth-child(even) .feature__shot { order: 0; }
  .pull-quote { padding: 20px; font-size: 17px; }
}

/* --- 사업안내 (목적 · 목표) --------------------------------- */
.biz-intro {
  padding: 28px 34px;
  border-left: 5px solid var(--c-brand);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: 17px;
  line-height: 1.95;
  color: var(--c-body);
}
.biz-sec { margin-top: 52px; }
.biz-sec__title {
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  color: var(--c-brand-strong);
}
.biz-list { margin-top: 24px; padding-left: 4px; border-left: 2px solid var(--c-line-2); }
.biz-list > li { position: relative; padding: 0 0 0 26px; }
.biz-list > li + li { margin-top: 24px; }
.biz-list > li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-brand);
}
.biz-list strong { display: block; font-size: 17px; font-weight: 700; color: var(--c-ink); }
.biz-list span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.8; color: var(--c-body); }
@media (max-width: 767px) {
  .biz-intro { padding: 20px; font-size: 16px; }
  .biz-sec { margin-top: 40px; }
  .biz-list span { font-size: 15px; }
}

/* --- 신청서 모달 ------------------------------------------- */
.apply-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.apply-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--c-body);
  overflow: hidden;
}
.apply-modal::backdrop { background: rgba(26, 16, 16, 0.55); }
.apply-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--c-line-2);
  background: var(--c-surface);
}
.apply-modal__title { font-size: 21px; font-weight: 800; color: var(--c-ink); }
.apply-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--c-body);
  cursor: pointer;
}
.apply-modal__close:hover { background: var(--c-surface-2); color: var(--c-brand); }
.apply-modal__body { padding: 24px; overflow-y: auto; max-height: calc(100vh - 190px); }
.apply-modal__body .form-grid { margin-top: 20px; }
.apply-modal__body .field--wide { grid-column: 1 / -1; }
.apply-modal__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line-2);
}
@media (max-width: 767px) {
  .apply-modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .apply-modal__body { max-height: calc(100vh - 170px); padding: 18px; }
  .apply-cta__btns { width: 100%; }
  .apply-cta__btns .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- 사업안내 : 화면마다 다른 구성 --------------------------- */

/* ① 지역이송체계 — 목적 : 나란한 카드 */
.biz-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.biz-cards > li {
  padding: 26px 24px;
  border: 1px solid var(--c-line-2);
  border-top: 4px solid var(--c-brand);
  border-radius: var(--r-md);
  background: #fff;
}
.biz-cards__no { display: block; font-size: 14px; font-weight: 800; color: var(--c-brand); letter-spacing: 0.06em; }
.biz-cards strong { display: block; margin-top: 8px; font-size: 18px; color: var(--c-ink); }
.biz-cards p { margin-top: 10px; font-size: 15.5px; line-height: 1.75; color: var(--c-body); }

/* ① 지역이송체계 — 목표 : 위에서 아래로 이어지는 흐름 */
.biz-steps { list-style: none; position: relative; padding-left: 10px; }
.biz-steps > li { position: relative; display: flex; gap: 18px; padding: 0 0 28px 0; }
.biz-steps > li::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: var(--c-line-2);
}
.biz-steps > li:last-child { padding-bottom: 0; }
.biz-steps > li:last-child::before { display: none; }
.biz-steps__no {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}
.biz-steps strong { display: block; padding-top: 10px; font-size: 18px; color: var(--c-ink); }
.biz-steps p { margin-top: 8px; font-size: 16px; line-height: 1.8; color: var(--c-body); }

/* ② 지역협력체계 — 목적 : 왼쪽에 색 띠를 둔 가로 카드 */
.biz-bars { display: flex; flex-direction: column; gap: 14px; }
.biz-bars > li {
  padding: 22px 26px;
  border-left: 6px solid var(--c-brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-surface);
}
.biz-bars strong { display: block; font-size: 18px; color: var(--c-brand-strong); }
.biz-bars p { margin-top: 8px; font-size: 16px; line-height: 1.8; color: var(--c-body); }

/* ② 지역협력체계 — 목표 : 두 칸씩 놓이는 타일 */
.biz-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.biz-tiles > li {
  position: relative;
  padding: 24px 24px 24px 30px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: #fff;
}
.biz-tiles > li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 31px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-brand);
}
.biz-tiles strong { display: block; font-size: 17px; color: var(--c-ink); }
.biz-tiles p { margin-top: 8px; font-size: 15.5px; line-height: 1.75; color: var(--c-body); }

/* ③ 구급품질 — 목적 : 제목과 설명을 좌우로 */
.biz-dl { border-top: 2px solid var(--c-brand-deep); }
.biz-dl > div {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 20px;
  padding: 22px 6px;
  border-bottom: 1px solid var(--c-line-2);
}
.biz-dl dt { font-size: 17px; font-weight: 700; color: var(--c-brand-strong); }
.biz-dl dd { font-size: 16px; line-height: 1.8; color: var(--c-body); }

/* ③ 구급품질 — 목표 : 점검표 */
.biz-checks { display: flex; flex-direction: column; gap: 12px; }
.biz-checks > li {
  display: flex;
  gap: 14px;
  padding: 20px 24px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: #fff;
}
.biz-checks__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #E4F1E9;
  color: #1F6F43;
}
.biz-checks strong { display: block; font-size: 17px; color: var(--c-ink); }
.biz-checks p { margin-top: 6px; font-size: 15.5px; line-height: 1.75; color: var(--c-body); }

/* ④ 지표 — 목적 : 큰 숫자를 앞세운 카드 */
.biz-figures { display: flex; flex-direction: column; gap: 14px; }
.biz-figures > li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 24px 26px;
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.biz-figures__no {
  flex: 0 0 auto;
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-brand);
  opacity: 0.55;
}
.biz-figures strong { display: block; font-size: 18px; color: var(--c-ink); }
.biz-figures p { margin-top: 8px; font-size: 16px; line-height: 1.8; color: var(--c-body); }

/* ④ 지표 — 목표 : 표 */
.biz-table th[scope="row"] { font-size: 16px; font-weight: 700; color: var(--c-brand-strong); text-align: left; }
.biz-table td { font-size: 15.5px; line-height: 1.75; color: var(--c-body); }

@media (max-width: 1024px) {
  .biz-cards { grid-template-columns: minmax(0, 1fr); }
  .biz-tiles { grid-template-columns: minmax(0, 1fr); }
  .biz-dl > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 767px) {
  .biz-figures > li { gap: 14px; padding: 20px; }
  .biz-figures__no { font-size: 30px; }
  .biz-steps p, .biz-bars p { font-size: 15px; }
}

/* 본문에서 눈여겨볼 어구 */
.hl {
  padding: 0 2px;
  background: linear-gradient(transparent 58%, var(--c-tint) 58%);
  font-weight: 700;
  color: var(--c-brand-strong);
}
.biz-intro .hl { background: linear-gradient(transparent 56%, #F3D9D9 56%); }
.biz-table .hl, .biz-tiles .hl, .biz-cards .hl { padding: 0 1px; }

/* 글 제목 줄 — 오른쪽에 신청 버튼 */
.article__title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.article__title-row .article__title { flex: 1 1 320px; min-width: 0; }
.article__title-row .btn { flex: 0 0 auto; }
@media (max-width: 767px) {
  .article__title-row .btn { width: 100%; justify-content: center; }
}

/* 모달이 내용 때문에 넓어지지 않도록 */
.apply-modal { max-width: calc(100vw - 32px); box-sizing: border-box; }
.apply-modal__body .form-grid { min-width: 0; }
.apply-modal__body .field { min-width: 0; }
.apply-modal__body .sms-row { min-width: 0; }
.apply-modal__body .sms-row .input { min-width: 0; }

/* 갤러리 글에 붙은 사진 */
.shots { margin-top: 24px; display: grid; gap: 16px; }
.shots__item { margin: 0; }
.shots__item img {
  display: block;
  width: 100%;
  border-radius: var(--r-sm);
  background: var(--c-surface);
}

/* 언론보도 상세 — 기사 원문 안내 */
.press-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 28px;
  padding: 18px 22px;
  border: 1px solid var(--c-line-2);
  border-left: 4px solid var(--c-brand);
  border-radius: var(--r-sm);
  background: var(--c-surface-2);
}
.press-link__label { flex: none; font-weight: 700; color: var(--c-ink); }
.press-link__url {
  flex: 1 1 260px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: var(--c-muted);
}
.press-link .btn { flex: none; margin-left: auto; }

/* 신청 마감 안내 — 상세 제목 줄 */
.apply-closed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-muted);
  font-size: 17px;
  font-weight: 700;
}

/* 목록 — 첨부파일이 있는 글 표시 */
.file-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: var(--c-brand);
  vertical-align: -2px;
}

/* --- CI 화면 ------------------------------------------------ */
/* --- 오시는 길 지도 ----------------------------------------- */
.map {
  height: 420px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
}
/* 지도를 못 불러왔을 때 */
.map.is-off {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.map__off { font-size: 16px; line-height: 1.8; color: var(--c-muted); }
/* 자리 표시 말풍선 — 카카오 쪽 틀 안에 들어가므로 여백만 손봅니다 */
.map__tip {
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .map { height: 320px; }
}

/* --- CI : 왼쪽 차례 + 네모난 마당 --------------------------- */
/* 맨 위의 내려받기 띠 — 이 쪽에서 가장 자주 쓰는 길입니다 */
.ci-get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  margin-bottom: 22px;
  padding: 26px 30px;
  border: 1px solid var(--c-brand);
  border-radius: 18px;
  background: var(--c-tint);
}
.ci-get__text { flex: 1 1 420px; min-width: 0; }
.ci-get__tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-brand);
}
.ci-get__text > strong {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  font-weight: 800;
  color: var(--c-brand-deep);
}
.ci-get__text > p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--c-body);
  word-break: keep-all;
}
.ci-get__text > p strong { color: var(--c-brand-strong); }
.ci-get__btn { flex: none; gap: 8px; }

.ci-main { display: flex; flex-direction: column; gap: 22px; }

.ci-block {
  padding: 34px 36px 38px;
  border: 1px solid var(--c-line-2);
  border-radius: 18px;
  background: #fff;
  scroll-margin-top: 16px;
}
.ci-block__head { display: flex; align-items: center; gap: 12px; }
.ci-block__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-tint);
  color: var(--c-brand-strong);
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.ci-block__head h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-ink);
}
.ci-block__desc {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-muted);
}
.ci-block__desc strong { color: var(--c-body); }

/* 유의사항 — 한 줄씩 또렷하게 */
.ci-rules {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ci-rules li {
  padding: 16px 18px;
  border-left: 3px solid var(--c-brand-pale);
  border-radius: 0 10px 10px 0;
  background: var(--c-surface-2);
}
.ci-rules strong { display: block; font-size: 16px; color: var(--c-ink); }
.ci-rules span {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-body);
  word-break: keep-all;
}

@media (max-width: 768px) {
  .ci-block { padding: 24px 20px 28px; }
  .ci-block__head h2 { font-size: 22px; }
  .ci-rules { grid-template-columns: minmax(0, 1fr); }
}

.ci-symbol {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  margin-top: 28px;
  padding: 36px 40px;
  border: 1px solid var(--c-line-2);
  border-radius: 18px;
  background: #fff;
}
.ci-symbol__mark { flex: 1 1 360px; min-width: 0; }
.ci-symbol__mark img { width: 100%; max-width: 460px; height: auto; }
.ci-symbol__notes { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.ci-symbol__notes li {
  padding-left: 18px;
  position: relative;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-body);
}
.ci-symbol__notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-brand);
}

/* 기본으로 쓰는 조합은 따로 크게 보여 줍니다 */
.ci-lead {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  padding: 26px 30px;
  border: 1px solid var(--c-brand);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(165, 42, 42, 0.10);
}
.ci-lead__box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 18px 24px;
  border-radius: 10px;
  background: var(--c-surface-2);
}
.ci-lead__box img { max-width: 100%; max-height: 92px; }
.ci-lead__tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--c-tint);
  color: var(--c-brand-strong);
  font-size: 13px;
  font-weight: 700;
}
.ci-lead__text strong {
  display: block;
  margin-top: 12px;
  font-size: 21px;
  font-weight: 800;
  color: var(--c-ink);
}
.ci-lead__text p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--c-body);
  word-break: keep-all;
}

.ci-sub {
  margin-top: 30px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-muted);
}

.ci-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ci-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ci-card {
  border: 1px solid var(--c-line-2);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.ci-card--on { border-color: var(--c-brand); box-shadow: 0 0 0 2px rgba(165, 42, 42, 0.12); }
.ci-card__box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 22px;
  background: #fff;
}
.ci-card__box img { max-width: 100%; max-height: 100%; }
.ci-card__foot {
  padding: 14px 16px;
  border-top: 1px solid var(--c-line-2);
  background: var(--c-surface-2);
}
.ci-card__foot strong { display: block; font-size: 15px; }
.ci-card__foot span { display: block; margin-top: 4px; font-size: 14px; color: var(--c-muted); }

.ci-dl { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ci-dl li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--c-line-2);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
}
.ci-dl__no { font-family: "Archivo", sans-serif; font-weight: 700; color: var(--c-muted); }
.ci-dl a { margin-left: auto; font-weight: 700; color: var(--c-brand); }
.ci-dl a + a { margin-left: 12px; }

@media (max-width: 1024px) {
  .ci-lead { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px; }
  .ci-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ci-grid, .ci-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ci-symbol { padding: 24px 20px; }
}

/* --- 홈 팝업 ------------------------------------------------ */
.popup-dim {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(26, 16, 16, 0.5);
}
.popup-dim[hidden] { display: none; }
.popup {
  width: 100%;
  max-width: 800px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(26, 16, 16, 0.35);
  overflow: hidden;
}
/* 크기를 고정해 두어, 좌우로 넘겨도 창이 커졌다 작아지지 않습니다 */
.popup__body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(700px, 80vh);
  padding: 36px 44px;
}
.popup__item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  text-align: center;
  overflow: hidden;
}
.popup__item[hidden] { display: none; }
.popup__title { flex: none; font-size: 24px; font-weight: 800; line-height: 1.45; color: var(--c-ink); }
.popup__text {
  flex: none;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-body);
  white-space: pre-line;
}
.popup__more { flex: none; }

.popup__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 0 4px;
}
.popup__arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: #fff;
  color: var(--c-ink);
  cursor: pointer;
}
.popup__arrow:hover { border-color: var(--c-brand); color: var(--c-brand); }
.popup__count { font-family: "Archivo", sans-serif; font-size: 14px; color: var(--c-muted); }
.popup__count strong { color: var(--c-brand); }

.popup__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 20px;
  border-top: 1px solid var(--c-line-2);
  background: var(--c-surface-2);
}
.popup__today {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--c-muted);
  cursor: pointer;
}
.popup__close {
  padding: 8px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.popup__close:hover { background: var(--c-brand-strong); }

/* 팝업에 올린 그림 */
.popup__shot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup__shot img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

/* 안내만 하는 작은 창 (회원 공개 자료 등) */
.popup--sm { max-width: 460px; }
.popup__body--auto { height: auto; min-height: 0; padding: 34px 36px 26px; text-align: center; }
.popup__foot--end { justify-content: flex-end; }
.popup__foot--end .btn { padding: 10px 20px; font-size: 15px; }

/* --- 교육 · 행사 상세 : 일시 · 장소 · 주최 안내 상자 --------- */
.ev-info {
  margin-bottom: 34px;
  padding: 22px 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 34px;
  border: 1px solid var(--c-line-2);
  border-left: 4px solid var(--c-brand);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.ev-info > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
.ev-info dt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-muted);
  white-space: nowrap;
}
.ev-info dd { font-size: 16px; font-weight: 600; line-height: 1.6; color: var(--c-ink); word-break: keep-all; }
.ev-info__host { display: block; }

@media (max-width: 760px) {
  .ev-info { grid-template-columns: 1fr; padding: 18px 20px; }
}

/* --- 홈 : 교육 · 행사 · 공지 · 자료실 (2 : 1 : 1) ------------- */
.home-grid {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 24px;
  align-items: stretch;
}
.home-side {
  display: grid;
  grid-template-rows: minmax(0, 6fr) minmax(206px, 4fr);
  gap: 24px;
  min-width: 0;
  height: 0;
  min-height: 100%;
}
.home-side > .home-card { min-height: 0; overflow: hidden; }
/*
 * 왼쪽에 걸어 둔 행사가 없을 때.
 * 맞출 높이가 없으므로 위의 height:0 + min-height:100% 를 풀어 줍니다.
 * 안 풀면 오른쪽 칸이 왼쪽(제목만 남은 낮은 칸)에 맞춰지고,
 * 아래쪽 자료실이 206px 를 먼저 가져가 공지사항이 0 이 되어 사라집니다.
 */
.home-grid--plain .home-side {
  grid-template-rows: auto auto;
  height: auto;
  min-height: 0;
}
.home-grid--plain .home-side > .home-card { overflow: visible; }
.home-card { display: flex; flex-direction: column; min-width: 0; }
.home-empty { padding: 28px 0; color: var(--c-muted); }

.ev-slide { margin-top: 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.ev-slide__track { flex: 1 1 auto; min-height: 0; display: grid; }

/* 행사 한 장 — 위에 상태와 단추, 아래에 작은 사진과 내용 */
.ev-card { grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 0; }
.ev-card[hidden] { visibility: hidden; }
.ev-card__go {
  flex: none;
  align-self: flex-end;
  margin-top: auto;
  min-height: 38px;
  padding: 0 16px;
  gap: 7px;
  border-radius: 8px;
  font-size: 15px;
}
.ev-card__go svg { width: 14px; height: 14px; }

.ev-card__main { flex: 1 1 auto; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: stretch; }

.ev-card__shot {
  align-self: stretch;
  min-height: 280px;
  border-radius: var(--r-md);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ev-card__shot img { width: 100%; height: 100%; object-fit: contain; }
.ev-card__noshot { color: var(--c-line); }

.ev-card__body { min-width: 0; display: flex; flex-direction: column; }
.ev-card__title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-card__title .badge { margin-right: 8px; vertical-align: 3px; }
.ev-card__title a { color: var(--c-ink); }
.ev-card__title a:hover { color: var(--c-brand); }

.ev-card__meta { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.ev-card__meta > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; font-size: 17px; }
.ev-card__meta dt { color: var(--c-muted); font-weight: 700; line-height: 1.55; white-space: nowrap; }
.ev-card__meta dd { color: var(--c-ink); font-weight: 400; line-height: 1.55; word-break: keep-all; }
.ev-card__host { display: block; }
.ev-card__host--more { color: var(--c-muted); }

@media (max-width: 900px) {
  .ev-card__main { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
  .ev-card__shot { min-height: 190px; }
}

.ev-slide__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line-soft);
}
.ev-slide__arrow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: #fff;
  color: var(--c-ink);
  cursor: pointer;
}
.ev-slide__arrow:hover { border-color: var(--c-brand); color: var(--c-brand); }
.ev-slide__count { font-family: "Archivo", sans-serif; font-size: 14px; color: var(--c-muted); }
.ev-slide__count strong { color: var(--c-brand); }

@media (max-width: 1100px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  /*
   * 넓은 화면에서는 height:0 + min-height:100% 로 왼쪽 칸 높이에 맞춥니다.
   * 위아래로 쌓이면 맞출 높이가 없어 그대로 0 이 되어 버리므로 풀어 줍니다.
   * (이 처리가 없으면 공지사항 · 자료실 칸이 찌그러져 다음 마당과 겹칩니다)
   */
  .home-side {
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
  }
  .home-side > .home-card { overflow: visible; }
}

/* --- 안내 문서 (개인정보처리방침 · 이용약관 등) ---------------- */
.policy { max-width: 900px; }
.policy__lead {
  padding: 22px 26px;
  border-left: 4px solid var(--c-brand);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  font-size: 17px;
  line-height: 1.9;
  color: var(--c-body);
}
.policy h2 {
  margin-top: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
  font-size: 20px;
  font-weight: 800;
  color: var(--c-ink);
}
.policy h2 + p,
.policy h2 + ol,
.policy h2 + div { margin-top: 18px; }
.policy p { font-size: 17px; line-height: 1.9; color: var(--c-body); }
.policy p + p { margin-top: 14px; }

.policy__list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; counter-reset: pol; }
.policy__list > li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--c-body);
}
.policy__list > li::before {
  counter-increment: pol;
  content: counter(pol) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--c-brand);
}
.policy__list ul { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.policy__list ul > li {
  position: relative;
  padding-left: 14px;
  font-size: 16px;
  color: var(--c-muted);
}
.policy__list ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 5px;
  height: 1px;
  background: var(--c-bar-soft);
}

.policy__note { margin-top: 14px; font-size: 15px; color: var(--c-muted); }
.policy__date { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--c-line-soft); font-size: 16px; color: var(--c-muted); }

.policy__law {
  margin-top: 18px;
  padding: 24px 28px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: #fff;
}
.policy__law-title { font-size: 16px; font-weight: 700; color: var(--c-brand-strong); }
.policy__law ol { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; counter-reset: law; }
.policy__law ol > li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-body);
}
.policy__law ol > li::before {
  counter-increment: law;
  content: "제" counter(law) "항";
  position: absolute;
  left: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-muted);
}
.policy__law-note { margin-top: 16px; font-size: 15px; color: var(--c-muted); }

/* --- 좁은 화면(휴대전화) 손질 --------------------------------- */
@media (max-width: 600px) {
  /*
   * 게시판 목록.
   * 860px 짜리 표를 그대로 두면 제목이 잘리고 날짜 · 조회수는 아예 보이지 않습니다.
   * 좁은 화면에서는 표를 풀어 한 건씩 쌓아 둡니다.
   */
  .board { min-width: 0; }
  .board colgroup { display: none; }
  /* 표를 풀어 두면 설명 글귀가 한 글자씩 세로로 떨어집니다 — 읽어 주는 기기에만 남깁니다 */
  .board caption,
  .board thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .board,
  .board tbody,
  .board tr,
  .board td { display: block; width: auto; }
  .board tr {
    padding: 15px 4px;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .board td {
    display: inline-block;
    margin-right: 10px;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 13.5px;
    color: var(--c-muted);
  }
  .board td.tc { text-align: left; }
  .board td:empty { display: none; }
  /* 맨 앞 칸(상태 · 분류)은 제목 위에 따로 둡니다 */
  .board tr > td:first-child { display: block; margin: 0 0 7px; }
  .board td.subject {
    display: block;
    margin: 0 0 9px;
    font-size: inherit;
    color: var(--c-ink);
  }
  .board .subject a { font-size: 16px; line-height: 1.5; }

  /*
   * 홈 교육 · 행사 카드.
   * 그림 140px + 글 로 나누면 글 칸이 120px 밖에 남지 않아
   * 일시 · 장소 · 주최가 칸 밖으로 비져 나갑니다. 위아래로 쌓습니다.
   */
  .ev-card__main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ev-card__shot { min-height: 0; aspect-ratio: 16 / 10; }
  .ev-card__meta > div { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 15.5px; }
  .ev-card__meta dt { font-size: 13.5px; }
  /* 주최 · 주관 바로 밑에 붙어 버려 사이를 띄웁니다 */
  .ev-card__go { align-self: stretch; justify-content: center; margin-top: 18px; min-height: 46px; }

  /*
   * 바로가기 — 아이콘 옆에 글을 두면 글자가 두세 줄로 접힙니다.
   * 아이콘을 위에 두고 그 아래로 이름과 설명을 놓습니다.
   */
  .quick ul { gap: 10px; }
  .quick a {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    text-align: center;
  }
  .quick strong { font-size: 15.5px; }
  .quick .sub { font-size: 13px; }

  /* 홈 자료실 — 두 칸으로 두면 제목이 잘려 한 칸씩 둡니다 */
  .file-list--two { grid-template-columns: minmax(0, 1fr); }

  /* 꼬리말 안내 줄 — 줄바꿈이 들쑥날쑥해 보여 간격을 고릅니다 */
  .footer-policy { gap: 0 4px; }
  .footer-policy a { padding: 9px 10px; font-size: 14px; }
  .footer-policy li:first-child a { padding-left: 10px; }
}