@charset "utf-8";


:root {
  --sub-align-width: 1440px;
}

/* 마이페이지 교육 출석 현황 */
.attendance-course-select {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  gap: 12px;
  margin: 0;
}

.attendance-course-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0;
}

.attendance-qr-open {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 var(--space-16);
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--accent-ink);
  font: inherit;
  font-size: calc(14px * var(--user-scale));
  font-weight: 800;
}

.attendance-qr-open:hover,
.attendance-qr-open:focus-visible {
  background: var(--surface-warm);
}

.attendance-qr-pending {
  margin: 0;
  color: var(--muted);
  font-size: calc(14px * var(--user-scale));
}

.attendance-course-select label {
  flex: 0 0 auto;
  font-weight: 700;
}

.attendance-course-select select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background-color: #fff;
  color: var(--primary);
  font: inherit;
}

.attendance-empty {
  padding: 56px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.attendance-course-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 2px solid var(--primary);
  border-bottom: 1px solid var(--border);
}

.attendance-course-info > div {
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}

.attendance-course-info > div:last-child {
  border-right: 0;
}

.attendance-course-info dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
}

.attendance-course-info dd {
  overflow-wrap: anywhere;
  color: var(--primary);
  font-weight: 700;
  line-height: 1.5;
}

body.is-qr-modal-open {
  overflow: hidden;
}

.attendance-qr-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-24);
}

.attendance-qr-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--overlay-ink-rgb), 0.58);
}

.attendance-qr-card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, 390px);
  padding: var(--space-40) var(--space-32) var(--space-32);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
}

.attendance-qr-close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--secondary);
}

.attendance-qr-close:hover,
.attendance-qr-close:focus-visible {
  background: var(--surface-warm);
  color: var(--accent-ink);
}

.attendance-qr-close:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 2px;
}

.attendance-qr-close .lucide-icon {
  width: 20px;
  height: 20px;
}

.attendance-qr-logo {
  display: block;
  width: min(100%, 285px);
  height: auto;
  margin: 0 auto var(--space-24);
}

.attendance-qr-title {
  display: block;
  margin-bottom: var(--space-20);
  color: var(--primary);
  font-size: calc(22px * var(--user-scale));
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.attendance-qr-image-wrap {
  display: grid;
  box-sizing: border-box;
  width: min(100%, 312px);
  aspect-ratio: 1;
  margin: 0 auto var(--space-20);
  place-items: center;
  padding: var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.attendance-qr-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.attendance-qr-card p {
  margin: 0;
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  font-weight: 600;
  line-height: 1.6;
}

.attendance-qr-card .attendance-qr-notice {
  display: inline-grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  max-width: 100%;
  gap: var(--space-8);
  text-align: left;
}

.attendance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0;
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  font-weight: 600;
}

.attendance-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.attendance-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.attendance-legend .is-attendance { background: #7eaaa8; }
.attendance-legend .is-late { background: #b9822f; }
.attendance-legend .is-absent { background: #b96956; }
.attendance-legend .is-upcoming { background: #968572; }

/* 본문 폭을 넓게 쓰면서 달력 칸이 정사각형으로 과하게 커졌다.
   달력 쪽 폭에 상한을 두고 남는 자리는 상세가 쓴다. */
.attendance-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(250px, 1fr);
  gap: 20px;
  align-items: start;
}

.attendance-calendar-panel,
.attendance-detail {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.attendance-calendar-panel {
  padding: 18px;
}

.attendance-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.attendance-calendar-toolbar strong {
  font-size: calc(18px * var(--user-scale));
}

.attendance-month-button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1;
}

.attendance-month-button:hover {
  background: var(--bg-2);
}

.attendance-weekdays,
.attendance-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.attendance-weekdays {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  text-align: center;
}

.attendance-weekdays span:first-child { color: #c85757; }
.attendance-weekdays span:last-child { color: #486eaa; }

.attendance-calendar-day,
.attendance-calendar-blank {
  aspect-ratio: 1;
}

.attendance-calendar-day {
  position: relative;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
}

.attendance-calendar-day:disabled {
  cursor: default;
  opacity: 0.45;
}

.attendance-calendar-day.is-sunday { color: #c85757; }
.attendance-calendar-day.is-saturday { color: #486eaa; }
.attendance-calendar-day.is-attendance {
  background-color: transparent;
  background-image: radial-gradient(circle at center, #dceeed 0 17px, transparent 18px);
  color: #477d7b;
}

.attendance-calendar-day.is-late {
  background-color: transparent;
  background-image: radial-gradient(circle at center, #f4dca8 0 17px, transparent 18px);
  color: #835714;
}

.attendance-calendar-day.is-absent {
  background-color: transparent;
  background-image: radial-gradient(circle at center, #efcfc5 0 17px, transparent 18px);
  color: #924a3a;
}

.attendance-calendar-day.is-upcoming {
  background-color: transparent;
  background-image: radial-gradient(circle at center, #e5dcd0 0 17px, transparent 18px);
  color: #67594d;
}

.attendance-calendar-day.is-selected {
  border: 2px solid #25364e;
  outline: none;
  font-weight: 800;
}

.attendance-detail {
  min-height: 290px;
  padding: 22px;
}

.attendance-detail-label {
  margin-bottom: 8px;
  color: var(--accent-ink);
  font-size: calc(13px * var(--user-scale));
  font-weight: 800;
}

.attendance-detail h4 {
  margin-bottom: 22px;
  font-size: calc(18px * var(--user-scale));
}

.attendance-detail-list {
  display: grid;
  gap: 14px;
}

.attendance-detail-list div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.attendance-detail-list dt {
  color: var(--muted);
  font-size: calc(14px * var(--user-scale));
  font-weight: 700;
}

.attendance-detail-list dd {
  min-width: 0;
  color: var(--primary);
  font-weight: 600;
}

.attendance-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: calc(13px * var(--user-scale));
  font-weight: 800;
}

.attendance-status.is-attendance { background: #dceeed; color: #477d7b; }
.attendance-status.is-late { background: #f4dca8; color: #835714; }
.attendance-status.is-absent { background: #efcfc5; color: #924a3a; }
.attendance-status.is-upcoming { background: #e5dcd0; color: #67594d; }

@media screen and (max-width: 900px) {
  .attendance-dashboard {
    grid-template-columns: 1fr;
  }

  .attendance-detail {
    min-height: 0;
  }
}

@media screen and (max-width: 600px) {

  .attendance-qr-modal {
    padding: var(--space-16);
  }

  .attendance-qr-card {
    padding: var(--space-40) var(--space-20) var(--space-24);
  }

  .attendance-course-info {
    grid-template-columns: 1fr;
    border-bottom: 0;
  }

  .attendance-course-info > div {
    padding: 13px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .attendance-calendar-panel {
    padding: 12px;
  }

  .attendance-weekdays,
  .attendance-calendar {
    gap: 3px;
  }

  .attendance-calendar-day {
    font-size: calc(14px * var(--user-scale));
  }

  .attendance-detail-list div {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

.sub-visual > .inner,
.sub-content > .inner {
  width: min(calc(100% - 40px), var(--sub-align-width));
  margin-left: auto;
  margin-right: auto;
}

/* tb_menu 에 heroImageUrl 이 없는 화면(오시는 길 등)에서
   서브비주얼이 빈 영역으로 남던 것을 기본 이미지로 채운다.
   메뉴에 값이 있으면 인라인 변수나 is-hero-* 가 이 값을 덮는다. */
.sub-visual {
  --sub-hero-img: url("../images/sub/sub_h_1.png");
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  text-align: center;
}

.sub-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--sub-hero-img, none);
  background-repeat: no-repeat;
  background-position: center 50%;
  background-size: cover;
}

.sub-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: hwb(0deg 0% 100% / 45%);
}

.sub-visual > .inner {
  position: relative;
  z-index: 1;
}

.sub-visual.is-hero-1 { --sub-hero-img: url("../images/sub/sub_h_1.png"); }
.sub-visual.is-hero-2 { --sub-hero-img: url("../images/sub/sub_h_2.png"); }
.sub-visual.is-hero-3 { --sub-hero-img: url("../images/sub/sub_h_3.png"); }
.sub-visual.is-hero-4 { --sub-hero-img: url("../images/sub/sub_h_4.png"); }
.sub-visual.is-hero-5 { --sub-hero-img: url("../images/sub/sub_h_5.png"); }
.sub-visual.is-hero-6 { --sub-hero-img: url("../images/sub/sub_h_6.png"); }
.sub-visual.is-hero-7 { --sub-hero-img: url("../images/sub/sub_h_7.png"); }
.sub-visual.is-hero-8 { --sub-hero-img: url("../images/sub/sub_h_8.png"); }

.sub-title {
  margin-top: 18px;
  font-size: calc(46px * var(--user-scale));
  color: #fff;
  line-height: 1.25;
  letter-spacing: -1px;
}

.sub-desc {
  margin-top: 14px;
  color: var(--white);
  font-size: calc(17px * var(--user-scale));
  line-height: 1.65;
}

.location-bar {
  border: 1px solid var(--border);
  border-right:0;
  border-left:0;
  background: var(--white);
}

.location-bar .inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  flex-direction: row;
}

.loc-home {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  color: var(--white);
  /* 홈은 링크라 아이콘이 뜻을 진다. 앰버(--ring-accent)는 흰 아이콘 대비가
     2.06 으로 기능성 아이콘 기준 3:1 에 못 미쳐 코랄로 바꿨다(3.45:1). */
  background: var(--point-strong);
}

.loc-home .lucide-icon {
  width: 18px;
  height: 18px;
}

.loc-item {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  border-left: 1px solid var(--border);
}

.loc-item:last-child{
  border-right: 1px solid var(--border);
}
.loc-item summary {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 54px;
  min-width: 0;
  padding: 0 24px;
  color: var(--primary);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.loc-item summary > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-item summary::-webkit-details-marker {
  display: none;
}

.loc-item summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.loc-item[open] summary {
  color: var(--accent-strong);
}

.loc-item[open] summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.loc-item:not([open]) > ul {
  display: none;
}

.loc-item > ul {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.loc-item > ul a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--secondary);
  font-weight: 700;
  white-space: nowrap;
}

.loc-item > ul a.is-active,
.loc-item > ul a:hover {
  color: var(--primary);
  background: var(--surface-warm);
}

/* ─────────────────────────────────────────────
   하위메뉴 띠 — 위치 표시줄 바로 아래.
   현재 1뎁스의 형제 메뉴를 눌러서 펼치지 않고 바로 보이게 한다.

   좁은 화면(767px 이하)에서는 감춘다. 항목이 6개에 이름도 길어
   가로로 펴면 화면 위쪽을 메뉴가 다 차지한다. 그 구간은 기존
   위치 표시줄 아코디언이 그대로 담당한다.
   ───────────────────────────────────────────── */
.local-nav-band {
  display: none;
}

@media screen and (min-width: 768px) {
  .local-nav-band {
    display: block;
    border-bottom: 1px solid var(--border);
    background: #fffbfa;
  }

  /* 첫 항목의 글자를 위 1뎁스 라벨과 같은 선에서 시작시킨다.
     1뎁스 글자 위치 = 홈칸 60 + 테두리 1 + summary 좌패딩 24 = 85px
     띠 글자 위치    = 들여쓰기 + 알약 테두리 1 + 알약 좌패딩 18 */
  .local-nav-band > .inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    width: min(calc(100% - 40px), var(--sub-align-width));
    margin: 0 auto;
    padding: 18px 0 18px 66px;
  }

  /* 선택되지 않은 항목은 한 단계 옅게 둔다. 현재 위치가 먼저 읽혀야 한다. */
  .local-nav-band a {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: #6f6f6f;
    font-size: calc(19px * var(--user-scale));
    font-weight: 500;
    white-space: nowrap;
  }

  .local-nav-band a:hover {
    border-color: var(--point);
    background: var(--white);
    color: var(--primary);
    font-weight: 700;
  }

  /* 노랑은 배경·버튼에 이미 많이 쓰여 현재 위치가 묻힌다. 코랄로 구분한다. */
  .local-nav-band a.is-active {
    border-color: var(--point-strong);
    background: var(--surface-pink);
    color: var(--point-ink);
    font-weight: 700;
  }
}

/* 태블릿 구간은 줄바꿈 대신 가로로 민다 — 두 줄이 되면 본문이 그만큼 밀린다 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .local-nav-band > .inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* 알약 좌패딩이 14px 로 줄어 들여쓰기를 그만큼 늘린다 (85 - 14 - 1) */
    padding: 14px 0 12px 70px;
  }

  .local-nav-band a {
    flex: none;
    padding: 8px 14px;
    font-size: calc(17px * var(--user-scale));
  }
}

.sub-content {
  padding: 70px 0 100px;
  background: var(--white);
}

.content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}

.sub-content .inner > .content-head + :where(.board-search, .result-list, .list-count-bar),
.sub-content .inner > section > .content-head + :where(.board-search, .board-table, .gallery-grid, .faq-list, .page-purpose, .content-copy, .list-count-bar, .program-grid, .purpose-values, .step-list, .service-type-grid, .institution-map-layout, .policy-block) {
  margin-top: var(--space-32);
}

.list-count-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 12px;
  text-align: left;
}

.list-count-bar p {
  margin: 0;
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
}

.list-count-bar strong {
  color: var(--primary);
}

.list-count-bar + :where(.board-table, .gallery-grid, .faq-list, .education-course-list, .survey-section) {
  margin-top: 0;
}

.content-copy {
  margin-top: 8px;
  color: var(--secondary);
  text-align: center;
  font-size: calc(17px * var(--user-scale));
  margin-bottom: 35px;
  line-height: 1.85;
}

.content-title {
  font-size: clamp(calc(33px * var(--user-scale)), 4.1vw, calc(45px * var(--user-scale)));
  line-height: 1.22;
  word-break: keep-all;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.info-card {
  min-height: 220px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.info-card:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 193, 119, 0.35);
}

.info-card h3 {
  font-size: calc(22px * var(--user-scale));
}

.org-chart {
  margin-top: 36px;
}

.org-top {
  position: relative;
}

.org-director {
  display: grid;
  justify-items: center;
  width: calc((100% - 8px) / 3);
  margin: 0 auto;
}

.org-top::after {
  content: "";
  position: absolute;
  left: 49.95%;
  top: 100%;
  width: 0;
  height: 40px;
  border-left: 2px dotted var(--border-strong);
}

.org-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-width: 170px;
  height: 58px;
  padding: 0 26px;
  border-radius: var(--radius-md);
  font-weight: 800;
  text-align: center;
}

.org-box > span {
  font-weight: 800;
}

.org-box.is-director {
  width: 80%;
  background: var(--primary);
  color: var(--white);
  font-size: calc(25px * var(--user-scale));
}

/* 팀 이름과 업무 목록은 한 덩어리다. 이름 칸의 아래 모서리를 펴서 목록과 붙인다. */
.org-box.is-team {
  width: 80%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: calc(21px * var(--user-scale));
}

.org-teams {
  position: relative;
  display: grid;
  --org-gap: var(--space-64);
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--org-gap);
  row-gap: 0;
  margin-top: 40px;
  padding-top: 40px;
}

.org-teams::before {
  content: "";
  position: absolute;
  left: calc((100% - var(--org-gap) * 2) / 6);
  right: calc((100% - var(--org-gap) * 2) / 6);
  top: 0;
  height: 0;
  border-top: 2px dotted var(--border-strong);
}

.org-team {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 센터장에서 각 팀으로 내려오는 세로선. 참고 사이트와 같이 점선으로 둔다. */
.org-team::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -40px;
  width: 0;
  height: 40px;
  border-left: 2px dotted var(--border-strong);
}

/* 직위별 분장사무는 표로 본다(참고: 충북광역지원센터). 좁은 화면에서는
   열이 좁아 읽히지 않으므로 한 건씩 박스로 떨어뜨린다. */
.org-tasks {
  --purpose-task-dot: var(--point);
  position: relative;
  display: grid;
  gap: var(--space-12);
  width: 80%;
  padding: var(--space-20);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--white);
}

.org-tasks li {
  position: relative;
  padding-left: var(--space-16);
  color: var(--secondary);
  font-size: calc(19px * var(--user-scale));
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
}

.org-tasks li::before {
  content: "";
  position: absolute;
  /* 첫 줄 한가운데. 글줄 높이(1.4em)에서 점 지름을 빼고 반으로 나눈다. */
  top: calc((1.4em - 6px) / 2);
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--purpose-task-dot);
}

.org-tasks li small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
}

.org-duty-tables {
  display: grid;
  gap: var(--space-48);
  margin-top: var(--space-80);
}

.org-duty-heading {
  margin-bottom: var(--space-12);
  color: var(--accent-strong);
  font-size: calc(22px * var(--user-scale));
  font-weight: 700;
}

/* 표 위에만 굵은 선을 둔다. 색은 표 머리글과 같은 노랑 계열로 맞춘다.
   열 비율은 참고 사이트와 같게 20 / 25 / 55 로 잡는다. */
.org-duty-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-top: 2px solid var(--accent-mid);
  background: var(--white);
}

.org-duty-table th,
.org-duty-table td {
  padding: var(--space-16) var(--space-20);
  /* 표 바깥 좌우는 열어 두고, 칸 사이 세로 구분선만 남긴다. */
  border-left: 0;
  border-right: 1px solid var(--border);
  border-top: 0;
  border-bottom: 1px solid var(--border);
  font-size: calc(19px * var(--user-scale));
  text-align: left;
  vertical-align: middle;
}

.org-duty-table tr > *:last-child {
  border-right: 0;
}

/* 마지막 줄에도 아래 선을 남겨 표가 닫히게 한다. 좌우 선은 두지 않는다. */
.org-duty-table tbody tr:last-child th,
.org-duty-table tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

/* 머리글이 본문(20px)보다 작으면 위계가 뒤집힌다. 본문 이상으로 둔다. */
.org-duty-table thead th {
  background: var(--surface-warm, var(--bg));
  color: var(--primary);
  font-size: calc(20px * var(--user-scale));
  font-weight: 700;
  text-align: center;
}

.org-duty-table thead th:nth-child(1) { width: 12%; }
.org-duty-table thead th:nth-child(2) { width: 20%; }
.org-duty-table thead th:nth-child(3) { width: 68%; }

/* 옅은 바탕은 직위 칸이 갖는다. 연락처는 흰 바탕으로 둔다. */
.org-duty-table .org-duty-position {
  background: var(--surface-warm, var(--bg));
  color: var(--primary);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.org-duty-table .org-duty-phone {
  background: none;
  text-align: center;
  white-space: nowrap;
}

.org-duty-table .org-duty-description ul {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-duty-table .org-duty-description li {
  position: relative;
  padding-left: var(--space-16);
  color: var(--secondary);
  line-height: 1.5;
}

.org-duty-table .org-duty-description li::before {
  content: "";
  position: absolute;
  top: calc((1.5em - 6px) / 2);
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--point);
}

/* 업무 목록 마지막 줄. 말머리 점 없이 인원만 조용히 적는다. */
.org-tasks li.org-team-count {
  margin-top: var(--space-8);
  padding-left: 0;
  color: var(--muted);
  font-size: calc(17px * var(--user-scale));
  font-weight: 500;
  text-align: center;
}

.org-tasks li.org-team-count::before {
  content: none;
}

.org-duty-position {
  color: var(--accent-ink);
  background: var(--accent-soft);
  font-size: calc(19px * var(--user-scale));
  font-weight: 700;
  text-align: center;
}

.org-duty-description {
  border-right: 1px solid var(--border);
  border-left: 1px solid var(--border);
  color: var(--secondary);
}

.org-duty-description ul {
  display: grid;
  gap: var(--space-8);
  padding-left: var(--space-20);
  list-style: disc;
}

.org-duty-description li {
  font-weight: 500;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.org-duty-description li::marker {
  color: var(--accent-strong);
}

.org-duty-phone {
  background: var(--surface-warm);
  text-align: center;
  white-space: nowrap;
}

.org-duty-phone a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: var(--space-4);
}

.org-duty-phone-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.org-section-copy {
  margin-right: auto;
  margin-left: auto;
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  word-break: keep-all;
}

.org-duty-phone a:hover {
  color: var(--accent-strong);
}

.org-director .org-duty-card,
.org-team .org-director .org-duty-description,
.org-director .org-duty-phone,
.org-team .org-duty-description,
.org-team .org-duty-phone {
  grid-row: auto;
  grid-column: auto;
  border-left: 0;
}

.org-director .org-duty-description,
.org-team .org-duty-description {
  border-top: 1px solid var(--border);
  border-right: 0;
}

.org-director .org-duty-phone,
.org-team .org-duty-phone {
  justify-content: flex-start;
  border-top: 1px solid var(--border);
  text-align: left;
}

@media screen and (max-width: 1024px) {
  .org-duty-description {
    grid-row: 1 / span 2;
    grid-column: 2;
    border-right: 0;
  }

  .org-duty-phone {
    grid-row: 2;
    grid-column: 1;
    border-top: 1px solid var(--border);
  }
}

@media screen and (max-width: 767px) {
  /* 좁은 화면에서는 세 열이 다 들어가지 않는다. 한 건씩 박스로 떨어뜨리고
     각 값 앞에 무슨 항목인지 라벨을 붙인다. */
  .org-duty-table,
  .org-duty-table tbody,
  .org-duty-table tr,
  .org-duty-table th,
  .org-duty-table td {
    display: block;
    width: auto;
  }

  .org-duty-table {
    border: 0;
    background: none;
  }

  .org-duty-table thead {
    display: none;
  }

  .org-duty-table tbody tr {
    margin-bottom: var(--space-16);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    overflow: hidden;
  }

  .org-duty-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .org-duty-table th,
  .org-duty-table td {
    padding: var(--space-12) var(--space-16);
    text-align: left;
  }

  /* 박스로 떨어지면 직위 줄이 카드 머리 역할을 한다. 바탕색은 데스크톱과 같게 둔다. */
  .org-duty-table .org-duty-position {
    text-align: center;
  }

  .org-duty-table .org-duty-phone {
    text-align: left;
  }

  .org-duty-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-4);
    color: var(--muted);
    font-size: calc(14px * var(--user-scale));
  }

  /* 모바일은 덩어리 폭이 335px 뿐이라 20px 로는 대부분 두 줄로 접힌다.
     본문을 한 단 내리고 여백을 줄여 한 줄에 들어가는 글자를 늘린다.
     그래도 접히는 긴 항목은 keep-all 로 단어 단위에서만 끊는다. */
  .timeline-list {
    --timeline-gap: var(--space-16);
  }

  .timeline-entry {
    gap: var(--space-8);
  }

  ul.timeline-body > li {
    font-size: calc(16px * var(--user-scale));
  }

  .timeline-date .tl-month {
    font-size: calc(20px * var(--user-scale));
  }

  .timeline-year-num {
    margin-bottom: var(--space-16);
    font-size: calc(28px * var(--user-scale));
  }

  .timeline-year {
    margin-bottom: var(--space-48);
  }

  .org-director {
    width: 100%;
  }

  .org-box.is-team {
    max-width: 100%;
    min-width: 0;
  }

  .org-duty-description,
  .org-duty-phone {
    grid-row: auto;
    grid-column: auto;
    border-left: 0;
  }

  .org-duty-description {
    border-top: 1px solid var(--border);
  }

  }

@media print {

  }

.si-table-wrap {
  overflow-x: auto;
}



.si-table-wide {
  min-width: 1000px;
}

.si-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-12);
}

.si-table th,
.si-table td {
  padding: var(--space-8);
  border: 1px solid var(--border);
  font-size: 0.9375em;
  text-align: center;
  vertical-align: middle;
}

.si-table thead th {
  background: var(--bg-2);
  white-space: nowrap;
}

.si-table tbody th {
  background: var(--surface-warm);
  font-weight: 600;
}

.info-card p {
  margin-top: 14px;
  color: var(--secondary);
  line-height: 1.65;
}

.info-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.info-card-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-strong) 100%);
}

.info-card-icon .lucide-icon {
  width: 26px;
  height: 26px;
}

.info-card-head h4 {
  margin: 0;
  font-size: calc(27px * var(--user-scale));
  line-height: 2;
}

.info-purpose {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  line-height: 1.6;
}

.info-programs {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.info-program {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.info-program-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.info-program-icon .lucide-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.info-program-body strong {
  display: block;
  color: var(--primary);
  font-size: calc(22px * var(--user-scale));
}

.info-program-body p {
  margin-top: 3px;
  color: var(--secondary);
  font-size: calc(13px * var(--user-scale));
  line-height: 1.55;
}

.page-lead {
  margin-top: var(--space-40);
  padding: var(--space-60) var(--space-48);
  border: 1px solid rgba(242, 84, 45, 0.35);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 238, 231, 0.92), rgba(255, 250, 240, 0.96));
  text-align: center;
  /* .page-purpose 와 같은 오프셋 섀도우. 두 리드는 형태만 다르고 역할이 같다. */
  box-shadow: 7px 7px 0 0 rgba(242, 84, 45, 0.18);
}

.page-lead-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--point);
}

.page-lead-icon .lucide-icon {
  width: 40px;
  height: 40px;
}

.page-lead-text {
  margin-top: var(--space-16);
  color: var(--point-strong);
  font-size: calc(29px * var(--user-scale));
  font-weight: 700;
  line-height: 1.5;
  word-break: keep-all;
}

.page-lead-desc {
  margin-top: var(--space-16);
  width: min(100%, 620px);
  margin-left: auto;
  margin-right: auto;
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.75;
  word-break: keep-all;
}

.page-lead-desc.is-wide {
  width: min(100%, 1080px);
}

.page-hero-icon {
  display: flex;
  justify-content: center;
  margin: 30px 4px 0 30px;
}

.page-hero-icon span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  color: var(--white);
  background: var(--purpose-sky);
}

.page-hero-icon .lucide-icon {
  width: 54px;
  height: 54px;
}

/* 소제목·말머리 점·아이콘 원에 공통으로 쓰는 색.
   앰버에 먹색을 섞은 값이라 올리브(#977a14)로 떨어져 상자의 코랄 테두리와 따로 놀았다.
   상자와 같은 코랄 계열로 맞추되, 크림 배경 위 4.13:1 이 나오는 선까지 어둡힌다
   (소제목은 24px/700 이라 큰 글자 기준 3:1 을 여유 있게 넘긴다). */
.page-purpose {
  --purpose-sky: #d94a26;
  padding: 26px 30px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  margin: 35px 0;
  /* 번지는 회색 그림자가 아니라 blur 0 의 단단한 오프셋 그림자.
     레퍼런스인 충북의 로그인 백판이 같은 방식이다(7px 7px 0, 브랜드색 20%). */
  box-shadow: 7px 7px 0 0 rgba(242, 84, 45, 0.18);
}

.page-purpose h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--purpose-sky);
  font-size: calc(24px * var(--user-scale));
  font-weight: 700;
}

.page-purpose h4::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purpose-sky);
}

.page-purpose p {
  margin-top: 10px;
  color: var(--secondary);
  font-size: calc(21px * var(--user-scale));
  line-height: 1.6;
  word-break: keep-all;
  letter-spacing: -1px;
}

.page-purpose.is-icon-left {
  display: flex;
  align-items: center;
  border: 1px solid #dfdfdf;
  gap: var(--space-24);
  padding: var(--space-20) 0 var(--space-20) var(--space-24);
  background: none;
  margin: var(--space-48) 0;
  text-align: left;
}

.page-purpose.is-icon-left .page-hero-icon {
  flex: none;
  margin: 0;
}

.page-purpose.is-icon-left .page-hero-icon span {
  width: 76px;
  height: 76px;
}

.page-purpose.is-icon-left .page-hero-icon .lucide-icon {
  width: 36px;
  height: 36px;
}

.page-purpose.is-icon-left .page-purpose-body {
  flex: 1;
  min-width: 0;
}

/* 아이콘 좌측형 변이가 기본형과 다른 크기를 갖고 있어
   같은 '목적' 블록인데 페이지마다 위계가 달라졌다. 기본형에 맞춘다. */
.page-purpose.is-icon-left h4 {
  font-size: calc(24px * var(--user-scale));
}

.page-purpose.is-icon-left p {
  font-size: calc(21px * var(--user-scale));
  line-height: 1.6;
}

/* 대제목은 전략방향과 같은 세로 막대를 쓴다. 소제목과 형태를 달리해 위계를 만든다. */
.program-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--space-80) 0 var(--space-32);
  font-family: var(--font-title);
  font-weight: 700;
  font-size: calc(32px * var(--user-scale));
  line-height: 1.25;
  color: var(--primary);
  justify-content: flex-start;
  /* 구획을 눈으로 끊어 준다. 선 위아래 여백은 같은 값으로 둔다.
     제목 바로 아래 첫 소제목에는 붙이지 않는다 */
  margin-top: calc(var(--space-80) + var(--space-20));
  padding-top: calc(var(--space-80) + var(--space-20));
  border-top: 1px solid var(--border);
}

:is(.content-head, .page-purpose, .page-lead) + .program-head {
  padding-top: 0;
  border-top: 0;
}

/* 선이 없는 첫 소제목만 제목 아래 간격을 좁게 둔다 */
:is(.content-head, .page-purpose, .page-lead) + .program-head.is-sub {
  margin-top: var(--space-40);
}

.program-head::before {
  content: "";
  width: 6px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--point);
}

/* 항목 수가 페이지마다 2~6개로 달라 한 줄 고정으로는 카드가 뭉개진다.
   기준 폭을 주고 넘치면 다음 줄로 흘린다. */
.program-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.program-card {
  display: block;
  flex: 1 1 220px;
  /* 항목이 2~3개인 페이지에서 카드가 과도하게 늘어나지 않게 한다.
     4장 한 줄일 때의 폭에 맞춘 값이다. */
  max-width: 340px;
  min-width: 0;
  padding: 30px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: inherit;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

a.program-card:hover {
  transform: translateY(-4px);
  border-color: var(--point);
}

.program-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  color: var(--white);
  background: var(--point);
}

.program-card-icon .lucide-icon {
  width: 28px;
  height: 28px;
}

.program-card h5 {
  font-size: calc(24px * var(--user-scale));
  word-break: keep-all;
  overflow-wrap: break-word;
}

.program-card p {
  margin-top: 10px;
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.6;
  word-break: keep-all;
}

.program-grid.is-wellbeing {
  align-items: stretch;
}

.program-grid.is-full-width .program-card {
  flex: 1 1 0;
  max-width: none;
}

.program-grid.is-full-width {
  gap: var(--space-24);
}

.program-grid.is-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.program-grid.is-two-column .program-card {
  max-width: none;
}

.program-grid.is-wellbeing .program-card {
  display: grid;
  align-content: start;
  justify-items: center;
  max-width: none;
  background: var(--white);
  text-align: center;
}

.program-grid.is-wellbeing .tag {
  justify-self: center;
}

.program-grid.is-wellbeing .program-card-icon {
  margin: var(--space-20) auto var(--space-16);
}

.program-grid.is-wellbeing .purpose-task-list {
  justify-items: center;
  width: 100%;
  text-align: center;
}

.program-grid.is-wellbeing .purpose-task-list li {
  padding-left: 0;
  text-align: center;
}

.program-grid.is-wellbeing .purpose-task-list li::before {
  display: none;
}

/* 항목이 여럿인 카드는 단락 표기를 살린다. 글은 카드와 같이 가운데로 둔다 */
.program-grid.is-wellbeing.is-bulleted .purpose-task-list li {
  padding-left: var(--space-16);
}

.program-grid.is-wellbeing.is-bulleted .purpose-task-list li::before {
  display: block;
}

.program-grid.is-featured-single .program-card {
  display: grid;
  grid-template-columns: var(--space-80) minmax(0, 1fr);
  gap: var(--space-8) var(--space-24);
  align-items: center;
  flex-basis: 100%;
  width: 100%;
  max-width: none;
  padding: var(--space-40);
  background: var(--white);
  text-align: left;
}

.program-grid.is-featured-single .program-card-icon {
  grid-row: 1 / span 2;
  width: var(--space-80);
  height: var(--space-80);
  margin: 0;
}

.program-grid.is-featured-single .program-card-icon .lucide-icon {
  width: var(--space-40);
  height: var(--space-40);
}

.program-grid.is-featured-single .purpose-task-list {
  width: 100%;
  margin-top: 0;
}

/* 표지 이미지를 왼쪽에 세우는 변형. 제목과 설명은 한 덩어리로 묶어
   표지 높이에 따라 벌어지지 않게 한다. */
/* 카드 제목 앞 말머리 점. 제목은 .page-purpose h4::before 와 같은 8px 로,
   아래 항목명은 본문 목록(.purpose-task-list)과 같은 6px 로 층을 나눈다.
   두 점 모두 flex 가 아니라 절대 위치라, 글이 두 줄로 접혀도 첫 줄에 붙는다.

   점의 세로 위치는 줄 높이의 절반에서 점 반지름을 뺀 값이다.
   두 요소 모두 line-height 1.55 라 0.775em 이 첫 줄의 중심이 된다.
   눈대중 em 값(0.56/0.62)을 쓰던 때는 글자 중심보다 위로 떠 있었다. */
.program-grid.is-featured-single .program-card-body h5 {
  position: relative;
  padding-left: var(--space-20);
  /* 항목명이 22px 이라 24px 로는 대제목으로 읽히지 않았다. */
  font-size: calc(30px * var(--user-scale));
}

.program-grid.is-featured-single .program-card-body h5::before {
  content: "";
  position: absolute;
  top: calc(0.775em - 4px);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--point);
}

/* 제공·대상·구성 같은 항목명 앞 말머리 점. */
.program-grid.is-featured-single .feature-item strong {
  position: relative;
  padding-left: var(--space-16);
}

.program-grid.is-featured-single .feature-item strong::before {
  content: "";
  position: absolute;
  top: calc(0.775em - 3px);
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--point);
}

.program-grid.is-featured-single.is-cover .program-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
}

/* 놀이집 놀이는 표지와 줄글만 남으므로 PC에서 본문을 표지 높이의 가운데에 맞춘다. */
@media screen and (min-width: 768px) {
  .program-grid.is-featured-single.is-cover.is-policy-playhouse .program-card {
    align-items: center;
  }
}

/* flex-basis 와 width 를 함께 올린다. 한쪽만 고치면 flex 가 다른 값을 붙잡아
   실제 폭이 따라오지 않는다. 좁은 화면(1024px 이하)은 200px 로 따로 잡혀 있다. */
.program-card-cover {
  flex: 0 0 300px;
  width: 300px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.program-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.program-card-body h5 + p {
  margin-top: var(--space-12);
}

.program-card-body .feature-list {
  margin-top: var(--space-20);
}

.program-card-body .feature-item {
  padding: var(--space-12) 0;
}

.service-apply-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-32);
}

.service-apply-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  padding: var(--space-32);
  border: 1px solid var(--border);
  border-top: var(--space-8) solid var(--green);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.service-apply-card.is-short {
  border-top-color: var(--accent);
}

.service-apply-card.is-urgent {
  border-top-color: var(--point);
}

.service-apply-head {
  text-align: center;
}

.service-apply-head h4 {
  margin-top: var(--space-16);
  font-size: calc(27px * var(--user-scale));
  line-height: 1.35;
  word-break: keep-all;
}

.service-apply-summary {
  min-height: 3.4em;
  margin-top: var(--space-20);
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.7;
  text-align: center;
  word-break: keep-all;
}

.service-apply-card dl {
  display: grid;
  gap: var(--space-16);
  margin-top: auto;
  padding-top: var(--space-24);
  border-top: 1px dashed var(--border);
}

.service-apply-card dl > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.service-apply-card dt {
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--primary-dark);
  background: var(--green-soft);
  font-size: calc(20px * var(--user-scale));
  font-weight: 700;
  text-align: center;
}

.service-apply-card dd {
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.6;
  word-break: keep-all;
}

.service-apply-card dd small {
  color: var(--point-strong);
  font-size: calc(17px * var(--user-scale));
}




.caregiver-license-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.caregiver-license-icon.is-coral {
  color: var(--point-strong);
  background: var(--surface-pink);
}

.caregiver-license-icon .lucide-icon {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

.caregiver-license-contact {
  margin-top: var(--space-48);
  padding: 0;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-pink) 65%, transparent);
  word-break: keep-all;
}

.caregiver-license-contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: var(--space-48);
  width: min(100%, 1120px);
  margin-right: auto;
  margin-left: auto;
}

.caregiver-license-contact-copy {
  display: grid;
  gap: var(--space-24);
  min-width: 0;
}

.caregiver-license-contact-info {
  min-width: 0;
}

.sub-content .caregiver-license-contact .caregiver-license-contact-info h4 {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: fit-content;
  max-width: 100%;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--surface-coral);
  color: var(--primary);
  font-family: var(--font-title);
  font-size: calc(30px * var(--user-scale));
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.55;
}

.caregiver-license-contact-info h4 > span {
  font-family: inherit;
  font-weight: inherit;
}

.caregiver-license-contact-mark {
  display: block;
  flex: none;
  width: var(--space-24);
  height: var(--space-24);
}

.caregiver-license-contact-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-top: var(--space-16);
}

.caregiver-license-organization {
  margin: 0;
}

.caregiver-license-organization img {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
}

.caregiver-license-call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  margin-top: 0;
  color: var(--ring-1);
  font-family: var(--font-base);
  font-size: calc(36px * var(--user-scale));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
}

.caregiver-license-call span {
  font-weight: inherit;
}

.caregiver-license-call .lucide-icon {
  width: var(--space-24);
  height: var(--space-24);
}

.caregiver-license-call:hover {
  color: var(--point-ink);
}

.caregiver-license-call:focus-visible {
  outline: 3px solid var(--point-ink);
  outline-offset: var(--space-4);
}

.caregiver-license-site {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.caregiver-license-site .btn {
  gap: var(--space-8);
  font-size: calc(17px * var(--user-scale));
  font-weight: 700;
  white-space: normal;
}

.caregiver-license-site .lucide-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.caregiver-license-illustration {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1024px) {
  .caregiver-license-contact {
    padding: var(--space-32);
  }

  .sub-content .caregiver-license-contact .caregiver-license-contact-info h4 {
    font-size: calc(24px * var(--user-scale));
  }

  .caregiver-license-contact-inner {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-24);
  }
}

@media screen and (max-width: 767px) {
  .caregiver-license-contact {
    padding: var(--space-32) var(--space-24);
  }

  .caregiver-license-contact-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .caregiver-license-contact-copy {
    gap: var(--space-16);
  }

  .sub-content .caregiver-license-contact .caregiver-license-contact-info h4 {
    display: block;
    font-size: calc(22px * var(--user-scale));
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .caregiver-license-contact-mark {
    display: inline-block;
    margin-right: var(--space-8);
    vertical-align: middle;
  }

  .caregiver-license-contact-meta {
    align-items: center;
    flex-direction: column;
    gap: var(--space-16);
  }

  .caregiver-license-call {
    font-size: calc(30px * var(--user-scale));
  }

  .caregiver-license-site {
    display: grid;
    justify-items: center;
    min-width: 0;
  }

  .caregiver-license-site .btn {
    font-size: calc(16px * var(--user-scale));
  }

  .caregiver-license-illustration {
    display: none;
  }
}


/* 안내 한 줄. 앞에 느낌표 배지를 두어 신청 절차 안내와 형태를 맞춘다 */
.caregiver-license-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-40);
  color: var(--point-strong);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
  text-align: center;
  word-break: keep-all;
}

/* 소제목 바로 아래에 오면 그 구획을 여는 한 줄이다. 제목에 붙여 두고
   제목과 같은 왼쪽 기준에 맞춘다. 아래 내용과는 원래 간격을 유지한다. */
.program-head + .caregiver-license-note {
  justify-content: flex-start;
  margin-top: calc(var(--space-32) * -1 + var(--space-12));
  margin-bottom: var(--space-32);
  text-align: left;
}

.caregiver-license-note::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-24);
  height: var(--space-24);
  border-radius: var(--radius-pill);
  color: var(--white);
  background: var(--point);
  font-size: calc(15px * var(--user-scale));
  font-weight: 800;
}

.service-process-note {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: var(--space-8);
  margin-top: var(--space-20);
  color: var(--point-strong);
  font-size: calc(16px * var(--user-scale));
  font-weight: 800;
  text-align: center;
}

.service-process-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  color: var(--white);
  background: var(--point);
  font-weight: 800;
}

.service-process-note > span:last-child {
  font-weight: 800;
}

.service-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-40);
}

.service-type-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 320px;
  padding: var(--space-40);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.service-type-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.service-type-head .program-card-icon {
  flex: none;
  margin: 0;
}

.service-type-head h4 {
  font-size: calc(27px * var(--user-scale));
  line-height: 1.35;
  word-break: keep-all;
}

.service-type-head h4 small {
  color: var(--point-strong);
  font-size: calc(18px * var(--user-scale));
  font-weight: 700;
}

.service-type-card > p {
  margin-top: var(--space-24);
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.75;
  word-break: keep-all;
}

.service-type-card > .service-type-note {
  margin-top: var(--space-8);
  color: var(--point-strong);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
}

.service-housework-note {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-20);
  padding: var(--space-16) var(--space-20);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--secondary);
  font-size: calc(17px * var(--user-scale));
  line-height: 1.65;
}

.service-housework-note strong {
  color: var(--point-strong);
  font-size: calc(18px * var(--user-scale));
}

.service-availability {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-24);
}

.service-availability .tag {
  min-height: var(--space-32);
  padding: 0 var(--space-16);
  font-size: calc(15px * var(--user-scale));
}

.service-availability .tag.is-disabled {
  border-color: var(--border);
  color: var(--muted);
  background: var(--page-bg);
}

/* 전체 폭을 쓰는 카드. 제목 칸은 내용만큼만 쓰고 나머지를 설명에 준다.
   설명이 한 줄에 들어가야 해서 좌우 여백과 사이 간격도 한 단 좁게 둔다. */
.service-type-card.is-linked {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-24);
  align-items: center;
  min-height: 0;
  padding: var(--space-32);
}

.service-type-card.is-linked .service-type-head h4 {
  white-space: nowrap;
}

.service-type-card.is-linked > p {
  margin-top: 0;
}

.page-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding: 50px 0 0 0;
  justify-content: center;
}

.provider-hotline {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-right: 0;
  margin-left: -50vw;
  padding: 28px 0;
  background: var(--bg-2);
}

.sub-content.provider-index-content {
  padding-top: var(--space-32);
}

.provider-hotline-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
  width: min(calc(100% - 40px), 720px);
  margin-right: auto;
  margin-left: auto;
}

.provider-hotline.is-top {
  margin-top: var(--space-32);
  margin-bottom: var(--space-40);
}

.provider-hotline.is-bottom {
  margin-top: var(--space-32);
  margin-bottom: -100px;
}

/* 신청방법에서는 앱 설치 카드와 같은 그리드의 세 번째 칸으로 쓴다. */
.provider-hotline.is-app-card {
  position: static;
  left: auto;
  width: auto;
  margin: 0;
  padding: var(--space-32);
  border: 1px solid var(--border);
  background: var(--white);
}

.provider-hotline.is-app-card .provider-hotline-inner {
  display: grid;
  justify-content: stretch;
  gap: var(--space-16);
  width: 100%;
  margin: 0;
}

.provider-hotline.is-app-card .provider-hotline-call {
  justify-content: flex-start;
}

.provider-hotline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.provider-hotline-icon .lucide-icon {
  width: var(--space-20);
  height: var(--space-20);
}

.provider-hotline-copy {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding-left: var(--space-16);
  border-left: 3px solid var(--point);
  text-align: left;
}

.provider-hotline-copy strong {
  color: var(--primary);
  font-size: calc(18px * var(--user-scale));
  font-weight: 800;
  line-height: 1.35;
}

.provider-hotline-copy > span {
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  line-height: 1.5;
  word-break: keep-all;
}

.provider-hotline-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  color: var(--ring-1);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}

.provider-hotline-number {
  font-size: calc(30px * var(--user-scale));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.provider-hotline-action {
  padding-top: 2px;
  color: var(--secondary);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  line-height: 1.2;
}

.provider-hotline-call:hover {
  color: var(--point-ink);
  transform: translateY(-2px);
}

.provider-hotline-call:active {
  transform: translateY(0);
}

.provider-hotline-call:focus-visible {
  outline: 3px solid var(--point);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media screen and (max-width: 767px) {
  .provider-hotline {
    padding: var(--space-20) 0;
  }

  .provider-hotline.is-bottom {
    margin-bottom: -70px;
  }

  .provider-hotline-inner {
    justify-content: space-between;
    gap: var(--space-12);
    width: calc(100% - 40px);
  }

  .provider-hotline-copy strong {
    font-size: calc(15px * var(--user-scale));
  }

  .provider-hotline-copy strong > span {
    display: block;
  }

  .provider-hotline-copy > span {
    display: none;
  }

  .provider-hotline-call {
    gap: var(--space-8);
  }

  .provider-hotline-icon {
    width: 36px;
    height: 36px;
  }

  .provider-hotline-number {
    font-size: calc(22px * var(--user-scale));
  }

  .provider-hotline-action {
    display: none;
  }
}

.service-apply-grid + .page-cta .btn,
.service-type-grid + .page-cta .btn {
  font-size: calc(18px * var(--user-scale));
}

@media screen and (max-width: 1024px) {
  .service-apply-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-apply-card.is-urgent {
    grid-column: 1 / -1;
  }

}

@media screen and (max-width: 767px) {
  .service-apply-grid,
  .service-type-grid {
    grid-template-columns: 1fr;
  }

  .program-grid.is-two-column,

  .service-apply-card,
  .service-type-card {
    min-height: 0;
    padding: var(--space-24) var(--space-20);
  }

  .service-apply-card.is-urgent,
  .service-type-card.is-linked {
    grid-column: auto;
  }

  .service-type-card.is-linked {
    display: flex;
    gap: 0;
  }

  .service-apply-summary {
    min-height: 0;
  }

  .service-apply-card dl {
    margin-top: var(--space-24);
  }

  .service-type-head {
    align-items: flex-start;
  }

  .service-type-head h4 {
    font-size: calc(23px * var(--user-scale));
  }
}

.sns-channel-grid {
  display: grid;
  /* 채널 4개(블로그·유튜브·페이스북·인스타)가 한 줄에 들어간다 */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.sns-channel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

/* 다른 카드 섹션과 같은 방식으로 반응한다. */
.sns-channel-card:hover,
.sns-channel-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.sns-channel-card:focus-visible {
  outline: 3px solid rgba(122, 45, 24, 0.28);
  outline-offset: 2px;
}

.sns-channel-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  color: var(--primary);
  background: none;
}

.sns-channel-badge .sns-brand-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.sns-channel-card > span:last-child {
  display: block;
  min-width: 0;
}

.sns-channel-card strong {
  display: block;
  color: var(--primary);
  font-size: calc(21px * var(--user-scale));
  font-weight: 700;
  word-break: keep-all;
}

.sns-channel-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(17px * var(--user-scale));
}

.auth-required {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 70px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-align: center;
}

.auth-required-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: var(--white);
  background: var(--border-strong);
}

.auth-required-icon .lucide-icon {
  width: 32px;
  height: 32px;
}

.auth-required p {
  max-width: 420px;
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  line-height: 1.7;
}

.data-list-meta {
  margin-bottom: 14px;
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
}

.data-list-scroll {
  overflow-x: auto;
}

.data-list-table th {
  color: var(--white);
  background: var(--green-vivid);
}

.data-list-region {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  color: var(--green);
  background: var(--green-soft);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  white-space: nowrap;
}

.data-list-tel {
  display: block;
}

.data-list-tel + .data-list-tel {
  margin-top: 4px;
}

.data-list-tel a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  white-space: nowrap;
}

.data-list-tel .lucide-icon {
  width: 15px;
  height: 15px;
  color: var(--point-strong);
  flex-shrink: 0;
}

.data-list-table .data-list-empty td {
  padding: 48px 16px;
  color: var(--muted);
  text-align: center;
}

.data-list-table th,
.data-list-table td {
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* 기관 목록은 내용이 문장형이라 헤더까지 왼쪽으로 맞추고, 셀 안쪽 여백을 줘 글이 가장자리에 붙지 않게 한다. */
.board-table.data-list-table th,
.board-table.data-list-table td {
  text-align: left;
  padding-left: 16px;
  padding-right: 16px;
}

.data-list-table th:first-child,
.data-list-table tbody td:first-child:not([colspan]) {
  width: 160px;
}

.data-list-table .data-list-toggle-cell {
  width: 64px;
  text-align: center;
  padding-left: 0;
  padding-right: 8px;
}

/* 상세가 있는 행은 화살표뿐 아니라 행 전체를 눌러 펼친다. */
.data-list-table tbody tr[data-detail] {
  cursor: pointer;
}

.data-list-table tbody tr[data-detail]:hover > td {
  background: var(--bg);
}

.data-list-table.is-fixed-columns {
  table-layout: fixed;
  width: 100%;
  min-width: 1040px;
}

.data-list-table .col-region { width: 96px; }
.data-list-table .col-name { width: 176px; }
.data-list-table .col-area { width: 280px; }
.data-list-table .col-manager { width: 152px; }
.data-list-table .col-contact { width: 176px; }
.data-list-table .col-email { width: 240px; }

.institution-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(760px, 1.15fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 32px;
}

.institution-map-layout > * {
  min-width: 0;
}

.institution-map-layout .data-list {
  margin-bottom: 0;
}

.institution-map-panel {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.institution-map-panel .kakao-map-embed {
  
  padding-top: 120%;
}

.data-list .pagination a[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* 목록 행 펼침 — 행 우측 화살표를 눌러 아래에 상세를 연다 */
.data-list-table .data-list-toggle-cell {
  width: 52px;
  text-align: center;
}

.data-list-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--secondary);
  background: var(--white);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.data-list-toggle:hover,
.data-list-toggle:focus-visible {
  color: var(--green);
  border-color: var(--green);
  background: var(--green-soft);
}

.data-list-toggle .lucide-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.data-list-toggle[aria-expanded="true"] {
  color: var(--white);
  border-color: var(--green-vivid);
  background: var(--green-vivid);
}

.data-list-toggle[aria-expanded="true"] .lucide-icon {
  transform: rotate(180deg);
}

.data-list-table tbody tr.is-expanded > td {
  background: var(--green-soft);
}

/* 펼친 행은 배경이 뱃지와 같은 --green-soft라 시·군 뱃지가 묻힌다.
   화살표 버튼과 같은 반전 처리로 맞춘다. */
.data-list-table tbody tr.is-expanded .data-list-region {
  color: var(--white);
  background: var(--green-vivid);
}

.data-list-table tbody tr.is-highlighted > td {
  animation: data-list-flash 1.6s ease-out;
}

@keyframes data-list-flash {
  0%, 40% { background: var(--green-soft); }
  100% { background: transparent; }
}

.data-list-table .data-list-detail-row > td {
  padding: 0;
  background: var(--bg);
}

.institution-detail {
  display: grid;
  gap: 10px;
  margin: 0;
  /* 라벨을 시·군 뱃지와 같은 선에서 시작시킨다. */
  padding: 18px 24px 18px 16px;
}

.institution-detail > div {
  display: grid;
  /* 라벨 열 128px + 값 왼쪽 여백 16px = 144px. 값이 기관명 열과 같은 지점에서 시작한다. */
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 0;
  align-items: baseline;
}

.institution-detail dt {
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  font-weight: 700;
}

.institution-detail dd {
  margin: 0;
  padding-left: 30px;
  border-left: 1px solid var(--border);
  color: var(--primary);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.6;
  word-break: keep-all;
}

.education-survey-page {
  display: grid;
  gap: 0;
}

.education-survey-page .content-head {
  margin-bottom: 0;
}

/* 조사기간·참여자 수. 줄글로 두면 제목에 붙어 읽히지 않아 항목으로 나눈다. */
.survey-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12) var(--space-32);
  margin: var(--space-20) 0 0;
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.survey-meta > div {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.survey-meta dt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  font-weight: 700;
  line-height: 1.5;
}

.survey-meta dt .lucide-icon {
  width: 17px;
  height: 17px;
  color: var(--accent-strong);
}

.survey-meta dd {
  margin: 0;
  color: var(--primary-dark);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
  line-height: 1.5;
}

.education-survey-page > .survey-meta + .survey-section {
  margin-top: var(--space-32);
}

.education-survey-page > .eyebrow {
  margin-bottom: 15px;
}

.education-survey-page > .survey-section + .board-search {
  margin-top: var(--space-32);
}

.survey-type-guide {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.survey-type-guide span,
.survey-status,
.survey-question-title em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-pill);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.survey-type-guide span {
  color: var(--primary);
  background: var(--bg);
  border: 1px solid var(--border);
}

.survey-section {
  padding: var(--space-32) 0;
}

.survey-section-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  align-items: flex-end;
  margin-bottom: var(--space-20);
}

.survey-section-head h4 {
  color: var(--primary);
  font-size: calc(24px * var(--user-scale));
  font-weight: 700;
}

.survey-section-head p {
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
  font-weight: 500;
}

.survey-table {
  width: 100%;
  border-top: 2px solid var(--primary);
  table-layout: fixed;
}

.survey-table th,
.survey-table td {
  padding: 15px 5px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
  word-break: keep-all;
}

.survey-table th {
  color: var(--primary);
  background: var(--bg);
  font-weight: 700;
}

.survey-table .subject {
  text-align: left;
}

.survey-table .subject a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--primary);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

.survey-table .subject a:hover {
  color: var(--accent-strong);
}

.survey-table .btn {
  min-width: 104px;
  min-height: 38px;
  padding: 0 var(--space-16);
  font-size: calc(14px * var(--user-scale));
  font-weight: 700;
}

.survey-table .col-no { width: 64px; }
.survey-table .col-title { width: auto; }
.survey-table .col-period { width: 420px; }
.survey-table .col-status { width: 104px; }
.survey-table .col-action { width: 104px; }

.survey-table th:nth-child(3),
.survey-table td:nth-child(3) {
  overflow: hidden;
  padding-right: var(--space-12);
  padding-left: var(--space-12);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.survey-table th:nth-child(4),
.survey-table td:nth-child(4) {
  white-space: nowrap;
}

.survey-status.is-open {
  color: var(--green);
  background: var(--green-soft);
}

/* 테두리와 흰 배경이 outline 버튼과 겹쳐 배지인지 버튼인지 읽히지 않았다.
   배지는 채움, 버튼은 테두리로 역할을 나눈다. */
.survey-status.is-closed {
  color: var(--secondary);
  background: var(--border);
  border: 0;
}

.survey-participation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  margin-right: var(--space-8);
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.survey-participation-badge.is-member {
  color: #256084;
  background: #eaf5fb;
}

.survey-participation-badge.is-public {
  color: #815914;
  background: #fff1d0;
}

.survey-response-head > .survey-participation-badge {
  margin: 0 0 var(--space-12);
}

.survey-response-page {
  justify-items: center;
  gap: var(--space-40);
}

.survey-response-page .eyebrow,
.survey-response-head {
  text-align: center;
}

.survey-response-page .eyebrow {
  width: 100%;
  margin-bottom: calc(var(--space-12) * -1);
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.survey-response-head {
  width: 100%;
  max-width: 960px;
}

.survey-response-head .content-title {
  margin-bottom: var(--space-16);
}

.survey-response-head p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
  line-height: 1.7;
}

.survey-response-description,
#main .survey-response-page .survey-response-head .survey-response-description {
  white-space: pre-line;
  text-align: left;
  font-size: var(--user-text-size);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.survey-response-head .survey-response-period {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
}

.survey-response-head .survey-response-period strong {
  color: var(--secondary);
}

.survey-response-card {
  width: min(100%, 960px);
  padding: var(--space-40);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.survey-response-card .survey-question {
  padding: 0 0 var(--space-32);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.survey-response-card .survey-question + .survey-question {
  padding-top: var(--space-32);
}

.survey-response-card .survey-question:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.survey-response-card .survey-question-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-8);
  align-items: baseline;
  margin-bottom: var(--space-20);
}

.survey-response-card .survey-question-title span {
  display: inline;
  width: auto;
  height: auto;
  color: var(--primary);
  background: transparent;
  font-size: calc(18px * var(--user-scale));
  font-weight: 700;
  line-height: 1.6;
}

.survey-response-card .survey-question-title strong {
  min-width: 0;
  font-size: calc(18px * var(--user-scale));
  font-weight: 700;
  line-height: 1.6;
}

.survey-response-card .survey-question-title em {
  min-height: 24px;
  padding: 0 var(--space-8);
  color: var(--secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: calc(12px * var(--user-scale));
  font-style: normal;
}

.survey-response-card .survey-question-title em.is-required {
  color: #b42318;
  background: #fef3f2;
  border-color: #f04438;
}

.survey-response-card .survey-options {
  gap: var(--space-20) var(--space-32);
}

.survey-option-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.survey-option-item > label {
  display: flex;
  align-items: center;
}

.survey-other-input {
  width: min(100%, 520px);
  min-height: 44px;
  margin-left: 30px;
  padding: 0 var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.survey-other-input:disabled {
  color: var(--muted);
  background: var(--bg-2);
  cursor: not-allowed;
}

.survey-multiple-question {
  display: grid;
  gap: var(--space-16);
}

.survey-multiple-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: 10px 14px;
  border-left: 3px solid var(--accent-strong);
  background: var(--surface-warm);
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  font-weight: 700;
}

.survey-multiple-count {
  flex: none;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
  font-weight: 500;
}

.survey-multiple-count strong {
  color: var(--accent-ink);
  font-size: calc(15px * var(--user-scale));
}

.survey-response-card .survey-options label {
  gap: var(--space-8);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--primary);
}

.survey-response-card .survey-options label:has(input:checked) {
  background: transparent;
}

.survey-response-card .survey-options input[type="radio"],
.survey-response-card .survey-options input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.survey-response-card .survey-question textarea {
  min-height: 160px;
}

.survey-response-card .rating-options {
  gap: var(--space-8);
}

.survey-response-card .rating-options span {
  min-width: 72px;
  min-height: 48px;
  border-radius: var(--radius-pill);
}

.survey-response-card .rating-options input:checked + span,
.survey-response-card .rating-options label:has(input:checked) span {
  color: var(--white);
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

.survey-response-card .survey-actions {
  margin-top: var(--space-40);
}

.survey-response-card .survey-actions .btn {
  min-width: 140px;
  border-radius: var(--radius-pill);
}

.survey-privacy-note {
  margin-top: var(--space-16);
  color: var(--muted);
  font-size: calc(14px * var(--user-scale));
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}
.survey-form {
  display: grid;
  gap: var(--space-20);
}

.survey-question {
  padding: var(--space-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.survey-question-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.survey-question-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--white);
  background: var(--primary);
  font-weight: 700;
}

.survey-question-title strong {
  flex: 1;
  min-width: 220px;
  color: var(--primary);
  font-size: calc(18px * var(--user-scale));
  font-weight: 700;
}

.survey-question-title em {
  color: var(--primary);
  background: var(--surface-pink);
  border: 1px solid var(--surface-coral);
  font-style: normal;
}

.survey-options,
.rating-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.survey-options label,
.rating-options label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}

.survey-options label {
  gap: var(--space-8);
  padding: 0 var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--primary);
  font-weight: 500;
}

.survey-options input[type="radio"],
.survey-options input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  flex: 0 0 auto;
  place-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--muted);
  background: var(--white);
}

.survey-options input[type="radio"] {
  border-radius: 50%;
}

.survey-options input[type="checkbox"] {
  border-radius: var(--radius-xs);
}

.survey-options input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-ink);
  transform: scale(0);
}

.survey-options input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
}

.survey-options input:checked {
  border-color: var(--accent-strong);
  background: var(--accent);
}

.survey-options input:checked::before {
  transform: scale(1);
}

.survey-options input[type="checkbox"]:checked::before {
  transform: rotate(-45deg) scale(1);
}

.survey-options label:has(input:checked) {
  border-color: var(--accent-strong);
  background: var(--surface-warm);
}

.survey-options input:focus-visible,
.rating-options input:focus-visible + span,
.survey-question textarea:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.survey-question textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: var(--white);
  font: inherit;
  resize: vertical;
}

.survey-question textarea::placeholder {
  color: var(--muted);
}

.rating-options label input {
  position: absolute;
  opacity: 0;
}

.rating-options span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 44px;
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--primary);
  font-weight: 700;
}

.rating-options input:checked + span,
.rating-options label:has(input:checked) span {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent-strong);
}

.survey-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.survey-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
}

.survey-result-page {
  width: min(100%, 960px);
  margin: 0 auto;
}

.survey-result-page .survey-meta {
  width: 100%;
}

.survey-result-page .survey-result-section {
  padding: var(--space-24) 0;
}

.survey-result-page .survey-section-head {
  margin-bottom: var(--space-16);
}

.survey-result-page .survey-result {
  gap: var(--space-12);
}

.survey-result-page .survey-result article {
  padding: var(--space-20);
}

.survey-result-page .result-bar {
  height: 22px;
}

.survey-result article {
  width: 100%;
  padding: var(--space-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.survey-result h5 {
  margin-bottom: var(--space-16);
  color: var(--primary);
  font-size: calc(18px * var(--user-scale));
  font-weight: 700;
}

.survey-result-option {
  --result-bar-color: var(--chart-provider);
  margin-top: var(--space-12);
}

.survey-result-option:nth-of-type(4n + 1) { --result-bar-color: var(--chart-provider); }
.survey-result-option:nth-of-type(4n + 2) { --result-bar-color: var(--chart-child); }
.survey-result-option:nth-of-type(4n + 3) { --result-bar-color: var(--chart-household); }
.survey-result-option:nth-of-type(4n) { --result-bar-color: var(--chart-caregiver); }

.survey-result-option-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  font-weight: 500;
}

.survey-result-option.is-top .survey-result-option-head strong {
  color: var(--accent-strong);
}

.result-bar {
  height: 28px;
  margin-top: var(--space-8);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
}

.result-bar span {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: var(--space-12);
  color: var(--white);
  background: var(--result-bar-color);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  white-space: nowrap;
}

.result-bar.is-blue span,
.result-bar.is-sky span,
.result-bar.is-gold span,
.survey-result-option.is-top .result-bar span {
  background: var(--result-bar-color);
}
.score-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--primary);
}

.score-summary strong {
  font-size: calc(56px * var(--user-scale));
  font-weight: 900;
  line-height: 1;
}

.data-list-table.is-map-linked tbody tr {
  cursor: pointer;
}

.data-list-table.is-map-linked tbody tr:hover {
  background: var(--bg);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gallery-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform 0.18s ease, border-color 0.18s ease;
}


/* 교육이력·출석현황은 마이페이지 안쪽에 있어 찾기 어렵다.
   교육 일정을 보러 온 회원이 같은 화면에서 넘어가도록 로그인 시에만 노출한다. */
.education-my {
  margin-top: var(--space-32);
  padding: var(--space-24);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
}

.education-my-title {
  margin: 0;
  color: var(--accent-ink);
  font-size: calc(20px * var(--user-scale));
  font-weight: 800;
}

/* 느낌표 배지는 .mypage-notice 와 같은 것을 쓴다(아래 공용 ::before 규칙). */
.education-my-desc {
  position: relative;
  margin: var(--space-8) 0 var(--space-16);
  padding-left: 32px;
  color: var(--accent-ink);
  line-height: 1.6;
}

.education-my-desc::before {
  position: absolute;
  top: 0;
  left: 0;
}

.education-my-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.education-my-links a {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: 76px;
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--primary);
  transition: transform 0.18s ease;
}

.education-my-links a:hover,
.education-my-links a:focus-visible {
  transform: translateY(-2px);
}

/* 느낌표 배지와 같은 배색을 쓴다. */
.education-my-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--white);
  background: var(--point-strong);
}

.education-my-icon .lucide-icon {
  width: 22px;
  height: 22px;
}

.education-my-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.education-my-links strong {
  color: var(--primary-dark);
  font-size: calc(19px * var(--user-scale));
  font-weight: 700;
}

/* 아이콘 배지도 span 이라 .education-my-links span 이 색을 덮는다. 설명 글자만 겨냥한다. */
.education-my-text > span {
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
}


.education-course-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-20);
}

/* 검색 필터는 hidden 속성으로 항목을 감춘다. 카드에 display 선언이 있으면
   브라우저 기본 [hidden] 규칙을 이겨 감춰지지 않으므로 여기서 되돌린다. */
.education-course-card[hidden] {
  display: none;
}


.education-course-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
  gap: var(--space-20);
  padding: var(--space-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.education-course-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.education-course-status,
.education-course-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-pill);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.education-course-status.is-open {
  color: #087443;
  background: #e9f8f0;
}

.education-course-status.is-ready {
  color: #235ca8;
  background: #edf4ff;
}

.education-course-status.is-closed {
  color: #636b75;
  background: #eef0f3;
}

.education-course-type {
  color: var(--primary);
  background: var(--accent-soft);
}

.education-course-summary {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.education-course-summary h4 {
  margin: 0;
  color: var(--primary-dark);
  font-weight: 800;
  line-height: 1.5;
  word-break: keep-all;
}

.education-course-summary p {
  margin: 6px 0 0;
  color: var(--secondary);
  line-height: 1.5;
  white-space: pre-line;
}

.education-course-organization {
  font-weight: 500;
}

.education-course-detail-button {
  align-self: stretch;
  justify-content: center;
  min-width: 112px;
  margin-top: auto;
  text-align: center;
}

.education-course-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  margin: var(--space-16) 0 0;
  padding-top: var(--space-16);
  border-top: 1px solid var(--border);
}

.education-course-info > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  gap: var(--space-4);
}

.education-course-info dt {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
}

.education-course-info dd {
  overflow: visible;
  margin: 0;
  color: var(--primary);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
}

.education-course-empty {
  grid-column: 1 / -1;
  padding: 64px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--secondary);
  background: var(--white);
  text-align: center;
}

.education-detail .view-head .education-course-badges {
  margin-bottom: 16px;
}


.education-detail .view-head .view-meta {
  margin-top: 10px;
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 600;
}

.education-detail-body {
  display: grid;
  gap: 36px;
}

.education-detail-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.education-detail-info > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.education-detail-info dt,
.education-detail-info dd {
  padding: 16px 18px;
}

.education-detail-info dt {
  background: var(--bg);
  color: var(--primary-dark);
  font-weight: 700;
}

.education-detail-info dd {
  margin: 0;
  color: var(--secondary);
  font-weight: 600;
  word-break: keep-all;
}

.education-detail-description h4 {
  margin: 0 0 14px;
  color: var(--primary-dark);
  font-size: calc(20px * var(--user-scale));
}

.education-detail-guide-images {
  display: grid;
  gap: 20px;
}

.education-detail-guide-images figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
}

.education-detail-guide-images img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.education-detail-description p {
  margin: 0;
  white-space: pre-line;
}

.education-detail .view-buttons {
  gap: 10px;
}

.education-detail .btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.education-detail .btn-cancel {
  border: 1px solid #b23a3a;
  color: var(--white);
  background: #b23a3a;
}

.education-detail .btn-cancel:hover {
  border-color: #922f2f;
  background: #922f2f;
}

.education-apply-modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(30, 26, 20, 0.55);
}

.education-apply-modal[hidden] {
  display: none;
}

.education-apply-dialog {
  width: min(100%, 580px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
}

.education-apply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--border);
}

.education-apply-head h4 {
  margin: 0;
  color: var(--primary-dark);
  font-size: calc(22px * var(--user-scale));
}

.education-apply-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  color: var(--secondary);
  background: transparent;
  font-size: calc(30px * var(--user-scale));
  line-height: 1;
  cursor: pointer;
}

.education-apply-form {
  padding: 26px;
}

.education-apply-confirm-list {
  margin: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.education-apply-confirm-list > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.education-apply-confirm-list dt,
.education-apply-confirm-list dd {
  padding: 14px 16px;
}

.education-apply-confirm-list dt {
  color: var(--primary-dark);
  background: var(--bg);
  font-weight: 700;
}

.education-apply-confirm-list dd {
  margin: 0;
  color: var(--secondary);
  font-weight: 600;
  word-break: keep-all;
}

.education-apply-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--primary-dark);
  font-weight: 700;
  cursor: pointer;
}

.education-apply-agree input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
}

.education-apply-agree.is-cancel input {
  accent-color: #b23a3a;
}

.education-apply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.education-apply-actions .btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.gallery-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transform-origin: center center;
}

.gallery-card .gallery-thumb.is-contain {
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  background: #fffaf1;
  padding: 12px;
  transform: none;
}

/* 썸네일이 없거나 못 불러왔을 때. 카드 크기가 달라도 로고가 같은 비율로 보이도록
   여백 대신 축소를 쓴다. 목록과 메인이 같은 모습이 된다. */
/* 썸네일이 없거나 못 불러왔을 때. 요소를 줄이면 배경까지 같이 줄어들므로
   크기는 좌우 여백으로 잡는다. 배경은 칸을 꽉 채운다. */
.gallery-card .gallery-thumb.is-fallback,
.gallery-thumb.is-fallback,
.card-thumb img.is-fallback {
  box-sizing: border-box;
  mix-blend-mode: multiply;
  padding: 0 22%;
  object-fit: contain;
  object-position: center;
  background: var(--bg);
  opacity: 0.55;
  transform: none;
}

.view-body img[src*="video_thumb"] {
  object-position: 50% 46%;
  transform: scale(1.08);
}

.gallery-card strong {
  display: block;
  padding: 30px 20px 5px 20px;
  font-size: calc(21px * var(--user-scale));
}

.gallery-card span {
  display: block;
  padding: 0 20px 22px;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
}

.sub-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
  margin-top: 32px;
  margin-bottom: 34px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 191, 68, 0.22), transparent 28%),
    linear-gradient(135deg, var(--white) 0%, var(--surface-warm) 100%);
}

.sub-hero-panel > :only-child {
  grid-column: 1 / -1;
}

.sub-hero-panel h4 {
  font-size: calc(24px * var(--user-scale));
  
  line-height: 1.35;
}

.sub-hero-panel p {
  margin-top: 12px;
  color: var(--secondary);
  line-height: 1.7;
}

.sub-hero-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  justify-content: center;
}

/* 두 버튼이 한 줄을 정확히 반씩 나눠 채운다.
   테두리 유무로 폭이 어긋나지 않게 칸을 먼저 나눈다. */
.form-actions.is-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.form-actions.is-split > .btn {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

/* 안내 문구 앞 느낌표 표시.
   ⚠ flex/grid 로 아이콘 열을 만들면 문장 중간의 <b> 같은 인라인 요소까지
      각각 트랙에 배치되어 글자가 세로로 쪼개진다. 절대배치로 둔다. */
.form-help.is-notice,
.si-help.is-notice,
.si-loadmsg.is-notice {
  position: relative;
  display: block;
  padding-left: 32px;
  line-height: 24px;
}

.form-help.is-notice::before,
.si-help.is-notice::before,
.si-loadmsg.is-notice::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--point-strong);
  color: var(--white);
  font-size: calc(14px * var(--user-scale));
  font-weight: 800;
  line-height: 1;
}

.value-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.value-tags.is-vertical {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
}

/* 우측 패널 폭 안에서 4열로 두면 칸이 66px 밖에 안 돼 숫자가 잘린다. 2×2 로 둔다. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stat-strip li {
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--white);
}

.stat-strip strong {
  display: block;
  color: var(--accent-strong);
  font-size: calc(26px * var(--user-scale));
  line-height: 1.2;
  white-space: nowrap;
}

.stat-strip span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  word-break: keep-all;
}

.step-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

/* 세로로 쌓이는 신청 절차. 단계 사이와 각 칸 안쪽을 넉넉히 둔다 */
.step-list.service-application-process {
  gap: var(--space-20);
  margin-top: var(--space-40);
}

.step-list.service-application-process .step-item {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-24);
  align-items: center;
  padding: var(--space-32) var(--space-40);
}

.step-list.service-application-process .step-no {
  width: 56px;
  height: 56px;
  font-size: calc(20px * var(--user-scale));
}

.step-list.service-application-process .step-item strong {
  font-size: calc(23px * var(--user-scale));
}

.step-list.service-application-process .step-item p {
  margin-top: var(--space-12);
}

@media screen and (max-width: 767px) {
  .step-list.service-application-process .step-item {
    grid-template-columns: 1fr;
    gap: var(--space-16);
    padding: var(--space-24) var(--space-20);
  }
}

.step-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--primary);
  background: var(--accent);
}

.step-item strong {
  display: block;
  font-size: calc(21px * var(--user-scale));
  font-weight: 700;
}

.step-item p {
  margin-top: 6px;
  color: var(--secondary);
  line-height: 1.65;
  letter-spacing: -1px;
  word-break: auto-phrase;
}

/* 사업내용 아래 대분류. 섹션 제목과 같은 크기로 두면 위계가 사라진다. */
.program-head.is-sub {
  gap: 8px;
  margin-bottom: var(--space-24);
  font-family: var(--font-base);
  font-size: calc(21px * var(--user-scale));
  font-weight: 800;
  color: var(--accent-ink);
}

.program-head.is-sub::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-strong);
}

.step-list.is-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 32px;
}

.step-list.is-row .step-item {
  display: block;
  max-width: 34%;
  min-width: 0;
  text-align: center;
}

.step-list.is-row .step-no {
  margin: 0 auto 14px;
}

.step-list.is-row.is-emphasis.monitoring-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
  padding: 0;
  background: transparent;
}

.step-list.is-row.monitoring-process .step-item {
  width: 100%;
  max-width: none;
  height: 100%;
}

@media screen and (max-width: 1024px) {
  .step-list.is-row.is-emphasis.monitoring-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .step-list.is-row.is-emphasis.monitoring-process {
    grid-template-columns: 1fr;
  }
}

.feature-list {
  display: grid;
  margin-top: 22px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--border);
}

.feature-item:last-child {
  border-bottom: 0;
}

.feature-item .program-card-icon {
  flex: none;
  margin: 0;
}

.feature-item strong {
  display: block;
  font-size: calc(22px * var(--user-scale));
  color: var(--primary);
}

.feature-item p {
  margin-top: 6px;
  color: var(--secondary);
  line-height: 1.65;
}

.feature-item > div {
  flex: 1;
  min-width: 0;
}

.feature-item h5 {
  margin: 0;
  color: var(--primary);
  font-size: calc(22px * var(--user-scale));
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.feature-item h6 {
  margin: 18px 0 0;
  color: var(--primary);
  font-size: calc(18px * var(--user-scale));
  font-weight: 700;
  line-height: 1.55;
  word-break: keep-all;
}

.feature-item h5 + .purpose-task-list,
.feature-item h6 + .purpose-task-list {
  margin-top: 8px;
}

.feature-item .purpose-task-list {
  --purpose-task-dot: var(--point);
  width: 100%;
  margin-top: 10px;
}

.feature-item .purpose-task-list li {
  font-size: calc(20px * var(--user-scale));
  line-height: 1.65;
  overflow-wrap: break-word;
}

.program-head + .purpose-values {
  margin-top: 0;
}

.flow-diagram {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.flow-node {
  flex: 1 1 0;
  min-width: 0;
  padding: 36px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
}

.flow-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  color: var(--white);
  background: var(--point);
}

.flow-node-icon .lucide-icon {
  width: 30px;
  height: 30px;
}

.flow-node strong {
  display: block;
  font-size: calc(22px * var(--user-scale));
}

.flow-node p {
  margin-top: 4px;
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.5;
  word-break: keep-all;
}

.flow-arrow {
  display: inline-flex;
  flex: none;
  color: var(--muted);
}

.flow-arrow .lucide-icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}

.flow-diagram.is-emphasis,
.step-list.is-row.is-emphasis,
.feature-list.is-emphasis {
  margin-bottom: 12px;
  padding: 40px 20px 46px;
  border-radius: var(--radius-xl);
  background: var(--page-bg);
}

.flow-diagram.is-emphasis.business-clear-container,
.step-list.is-row.is-emphasis.business-clear-container {
  padding: 0;
  background: transparent;
}

.feature-list.is-emphasis {
  padding: 8px 34px;
}

.feature-list.is-emphasis .feature-item {
  border-bottom: 0;
}


.feature-list.is-business {
  display: grid;
  gap: var(--space-16);
  padding: 0;
  background: transparent;
}

.feature-list.is-business .feature-item {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 30px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* 항목명 열은 본문 높이에 맞춰 늘어나므로 내용을 세로 가운데로 모은다.
   heading 을 DOM 앞에 두고 아이콘만 order 로 올려 읽기 순서는 유지한다. */
.feature-list.is-business .feature-item-head {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
}

.feature-list.is-business .feature-item-head .program-card-icon {
  order: -1;
  flex: none;
  margin: 0;
}

.feature-list.is-business .feature-item-body {
  min-width: 0;
}

.feature-list.is-business .feature-item-body h6:first-child {
  margin-top: 0;
}

/* .btn 은 white-space:nowrap 이라 문구가 길면 좁은 화면에서 폭을 넘긴다.
   이 페이지의 이동 버튼만 줄바꿈을 허용한다. */
.feature-list.is-business .feature-item-body .btn {
  max-width: 100%;
  white-space: normal;
  word-break: keep-all;
}

.feature-list.is-business .purpose-task-list {
  width: 100%;
}

.feature-list.is-business .business-field-tags {
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list.is-business .business-field-tags li {
  padding-left: 0;
  font-size: calc(16px * var(--user-scale));
  line-height: 1;
}

.feature-list.is-business .business-field-tags li::before {
  display: none;
}

.feature-list.is-business .business-field-tags .education-course-type {
  gap: var(--space-4);
  min-height: 30px;
  border: 1px solid var(--border-strong);
  color: var(--primary-dark);
  background: var(--white);
  font-size: calc(15px * var(--user-scale));
}

.feature-list.is-business .business-field-tags .lucide-icon {
  width: 15px;
  height: 15px;
  color: var(--accent-strong);
}

.contact-cta {
  position: relative;
  /* 소제목 구획과 같은 리듬으로 구분선을 둔다. 상자 자체에 테두리가 있어
     border-top 을 쓰면 상자 윗변만 두꺼워지므로 선을 상자 위 여백에 띄운다. */
  margin-top: calc((var(--space-80) + var(--space-20)) * 2);
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-align: center;
}

.contact-cta::before {
  content: "";
  position: absolute;
  top: calc((var(--space-80) + var(--space-20)) * -1);
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
}

.contact-cta h4 {
  font-size: calc(27px * var(--user-scale));
  color: var(--primary);
}

.contact-cta-desc {
  margin-top: 10px;
  color: var(--secondary);
}

.contact-cta-tiles {
  margin-top: var(--space-32);
}

.contact-cta-tiles .flow-node strong {
  font-size: calc(20px * var(--user-scale));
  color: var(--muted);
}

.contact-cta-tiles .flow-node p {
  margin-top: 6px;
  color: var(--primary);
  font-size: calc(19px * var(--user-scale));
  font-weight: 700;
  word-break: keep-all;
}

.contact-cta-tiles .flow-node p a {
  color: var(--point-strong);
}

.auth-layout {
  max-width: 720px;
  margin: 0 auto;
}

.auth-layout .content-head,
.auth-layout .eyebrow {
  text-align: center;
}

.auth-layout .form-actions {
  flex-wrap: wrap;
  justify-content: center;
}

.auth-layout .join-step .form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}

.auth-layout .join-step .form-actions .btn {
  width: 100%;
}

@media screen and (max-width: 359px) {
  .auth-layout .join-step .form-actions {
    grid-template-columns: 1fr;
  }

  .loc-home {
    width: 40px;
  }

  .loc-item summary {
    gap: var(--space-4);
    padding: 0 var(--space-8);
  }
}

@media screen and (min-width: 768px) {
  .auth-layout .form-actions {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .auth-layout .form-actions .btn {
    min-width: 0;
    min-height: 42px;
    padding: 0 14px;
    font-size: calc(15px * var(--user-scale));
    white-space: nowrap;
  }
}

.form-panel {
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.form-grid {
  display: grid;
  gap: 16px;
}

.form-row {
  display: grid;
  gap: 8px;
}

.form-row label,
.agreement-list strong {
  
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.form-row textarea {
  min-height: 132px;
  padding-top: 14px;
  line-height: 1.6;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.radio-row label {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  font-weight: 400;
}

.form-help {
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
  margin-top: 14px;
  text-align: center;
  line-height: 1.55;
}

.agreement-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.agreement-list label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.policy-block {
  display: grid;
  gap: 22px;
}

.policy-section {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.policy-section h4 {
  font-size: calc(20px * var(--user-scale));
  
}

.policy-section p,
.policy-section li {
  color: var(--secondary);
  line-height: 1.75;
}

.policy-section ul {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.sitemap-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.sitemap-card strong {
  display: block;
  margin-bottom: 12px;
  font-size: calc(18px * var(--user-scale));
  
}

.sitemap-card a {
  display: block;
  padding: 7px 0;
  color: var(--secondary);
  font-weight: 700;
}

.sitemap-card a:hover {
  color: var(--accent-strong);
}

.map-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  margin-top: 26px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.kakao-map-embed {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding-top: 62%;
  overflow: hidden;
  background: var(--bg);
}

.kakao-map-embed .root_daum_roughmap,
.kakao-map-embed iframe,
.kakao-map-embed .map-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-size: calc(14px * var(--user-scale));
  color: var(--muted);
}

.map-fallback[hidden] {
  display: none;
}

/* 카카오는 말풍선을 열 때 내용 폭을 재서 상자 크기를 고정하는데,
   그 시점이 웹폰트 적용 전이라 실제 글자보다 2px 좁게 잡혔다.
   센터명이 길어 마지막 글자가 잘려 나갔다. 폰트 로딩 타이밍에 흔들리지 않도록
   한 줄로 두고 여유 폭을 명시한다. */
.kakao-infowindow {
  box-sizing: content-box;
  min-width: 160px;
  padding: 8px 12px;
  color: var(--primary);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.kakao-infowindow strong {
  display: block;
  margin-bottom: 2px;
  font-size: calc(13px * var(--user-scale));
}

.kakao-infowindow-address {
  max-width: 240px;
  color: var(--muted);
  font-size: calc(12px * var(--user-scale));
  font-weight: 500;
}

.kakao-infowindow-phone {
  color: var(--accent-strong);
  font-size: calc(12px * var(--user-scale));
  font-weight: 600;
}

/* 노란 계열의 가장 어두운 두 단계만 써서 갈색으로 읽히던 것을
   브랜드 옐로우로 올리고, 대비 확보를 위해 글자를 어둡게 뒤집는다. */
.map-info-panel {
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
  color: var(--accent-ink);
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-mid) 100%);
}

.map-info-name {
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(74, 54, 10, 0.28);
  font-size: calc(25px * var(--user-scale));
  line-height: 1.4;
}

.map-info-list {
  display: grid;
  gap: 18px;
}

.map-info-list dt {
  color: rgba(74, 54, 10, 0.82);
  font-size: calc(20px * var(--user-scale));
  font-weight: 700;
}

.map-info-list dd {
  margin-top: 5px;
  font-size: calc(17px * var(--user-scale));
  font-weight: 500;
  line-height: 1.55;
}

.map-info-panel .btn {
  margin-top: 28px;
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(74, 54, 10, 0.32);
}

.map-info-panel .btn:hover {
  background: var(--white);
}

.transit-section {
  margin-top: 48px;
}

.transit-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--primary);
}

.transit-head h4 {
  font-size: calc(35px * var(--user-scale));
}

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

.transit-table th:first-child, .transit-table td{border-top:1px solid #ece2cf;}

.transit-table th,
.transit-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  line-height: 1.6;
}

.transit-table th {
  width: 140px;
  background: var(--bg);
  color: var(--primary);
  
}

.transit-table td {
  color: var(--secondary);
}

.result-list {
  display: grid;
  gap: 12px;
}

.result-item {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.result-item strong {
  display: block;
  color: var(--primary);
  font-family: var(--font-title);
  font-size: calc(22px * var(--user-scale));
  font-weight: 700;
  line-height: 1.4;
}

/* 검색 결과 제목과 설명의 위계를 유지하면서 본문 기준보다 작아지지 않게 한다. */
.result-item p {
  margin-top: 6px;
  color: var(--secondary);
  font-size: calc(18px * var(--user-scale));
  line-height: 1.6;
}

.search-result-form input {
  flex-basis: 520px;
}

.search-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 14px;
  color: var(--secondary);
}

.search-result-summary p,
.search-result-summary span {
  margin: 0;
}

.search-result-summary strong {
  color: var(--primary);
}

.search-result-error {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 14px 18px;
  border: 1px solid #e8b8ad;
  border-radius: var(--radius-sm);
  background: #fff6f3;
  color: #9f3b28;
  text-align: center;
}

.search-empty {
  margin-top: 28px;
  padding: 56px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  text-align: center;
}

.search-empty strong {
  display: block;
  color: var(--primary);
  font-family: var(--font-title);
  font-size: calc(21px * var(--user-scale));
}

.search-empty p {
  margin-top: 10px;
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
}

.result-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.result-item-link:hover,
.result-item-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--white));
}

.result-item-link:focus-visible {
  outline: 3px solid rgba(122, 45, 24, 0.24);
  outline-offset: 2px;
}

.result-item-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: calc(13px * var(--user-scale));
}

.result-item-meta time {
  margin-left: auto;
}

.result-type {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 640px) {
  .search-result-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .result-item-meta {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .result-item-meta time {
    width: 100%;
    margin-left: 0;
  }
}

/* transform 커브의 1.3 오버슈트가 바운스를 만들어 등장이 산만했다.
   opacity 와 같은 감속 곡선을 써서 차분하게 올라오도록 맞춘다. */
body.reveal-ready .reveal-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.25s ease;
}

body.reveal-ready .reveal-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 메인 카드 섹션과 같은 방식으로 반응한다.
   등장 애니메이션이 transform 을 쥐고 있어 그 뒤에 둔다. */
.gallery-card:hover,
.gallery-card:focus-visible,
body.reveal-ready .gallery-card.reveal-item.is-revealed:hover,
body.reveal-ready .gallery-card.reveal-item.is-revealed:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
}

/* 그림자를 쓰지 않으므로 이미지가 살짝 다가오는 것으로 반응을 알린다. */
.gallery-card .gallery-thumb {
  transition: transform 0.25s ease;
}

.gallery-card:hover .gallery-thumb.is-cover,
.gallery-card:focus-visible .gallery-thumb.is-cover {
  transform: scale(1.06);
}

.gallery-card:focus-visible {
  outline: 3px solid rgba(122, 45, 24, 0.28);
  outline-offset: 2px;
}

/* 연혁 - 연도별 묶음 + 연도 단위 지그재그.
   예전에는 항목 하나하나가 좌우로 갈려서, 한쪽에 항목이 있으면 반대쪽이 빈칸이었다.
   그 빈칸이 그대로 세로 여백(항목당 141~265px)이 되어 3.8화면까지 늘어졌고,
   지금 몇 년도를 보고 있는지도 알기 어려웠다.
   연도로 묶고, 같은 달은 한 줄로 합치고, 덩어리 단위로 좌우를 번갈아 놓는다. */
.timeline-list {
  --timeline-gap: var(--space-32);
  position: relative;
  margin: var(--space-32) auto 0;
}

.timeline-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 2px;
  margin-left: -1px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--accent), var(--accent-mid));
}

.timeline-year {
  position: relative;
  width: calc(50% - var(--timeline-gap));
  margin-bottom: var(--space-80);
}

.timeline-year:last-child {
  margin-bottom: 0;
}

.timeline-year:nth-child(odd) {
  text-align: right;
}

/* 짝수 연도는 가운데 선 오른쪽으로 밀어 지그재그를 만든다. */
.timeline-year:nth-child(even) {
  margin-left: calc(50% + var(--timeline-gap));
  text-align: left;
}

.timeline-year-num {
  position: relative;
  margin-bottom: var(--space-24);
  color: var(--accent);
  font-size: calc(36px * var(--user-scale));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
}

/* 연도만 가운데 선 위에 큰 점으로 찍는다.
   점은 box-sizing:border-box 라 테두리 포함 15px 이므로 중심까지 7.5px 이다. */
.timeline-year-num::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--white);
  transform: translateY(-50%);
}

.timeline-year:nth-child(odd) .timeline-year-num::after {
  right: calc((var(--timeline-gap) + 7.5px) * -1);
}

.timeline-year:nth-child(even) .timeline-year-num::after {
  left: calc((var(--timeline-gap) + 7.5px) * -1);
}

.timeline-entries {
  display: grid;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-entry {
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
}

/* 왼쪽 덩어리는 월 숫자가 안쪽(가운데 선 쪽)으로 오도록 뒤집는다. */
.timeline-year:nth-child(odd) .timeline-entry {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.timeline-date {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  color: var(--accent);
}

/* 점은 가운데 선이 아니라 월 숫자 바로 앞에 붙는 말머리다. */
.timeline-date::before {
  content: "";
  align-self: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  background: var(--accent);
}

/* 왼쪽 덩어리는 줄이 뒤집히므로 말머리도 월 앞(왼쪽)에 오도록 되돌린다. */
.timeline-year:nth-child(odd) .timeline-date {
  flex-direction: row-reverse;
}

.timeline-date .tl-month {
  font-size: calc(24px * var(--user-scale));
  font-weight: 700;
  line-height: 1.5;
}

/* 같은 달의 일들은 월 하나 아래로 묶는다. */
ul.timeline-body {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.timeline-body > li {
  color: var(--primary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.5;
  word-break: keep-all;
}


.greeting-page {
  padding-top: 82px;
}

.greeting-section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.78fr);
  gap: clamp(48px, 7vw, 118px);
  align-items: center;
}

.greeting-copy {
  animation: greeting-rise 0.7s cubic-bezier(0.2, 1.15, 0.24, 1) both;
}
.greeting-copy .eyebrow {text-align:left;}
.greeting-title {
  margin-top: 18px;
  color: var(--primary);
  font-size: clamp(calc(33px * var(--user-scale)), 4.2vw, calc(49px * var(--user-scale)));
  line-height: 1.18;
  letter-spacing: -3px;
  word-break: keep-all;
}

/* 센터명에 형광펜 강조. 히어로는 mark::after 로 막대 하나를 깔지만
   이 대제목은 모바일에서 두 줄로 접혀 막대가 어긋난다.
   배경 그라데이션 + box-decoration-break: clone 이라야 줄마다 따라 붙는다.
   띠 색·두께는 히어로(rgba(255,194,60,.42))와 같게 맞췄다. */
.greeting-title mark,
.purpose-title mark {
  color: var(--point-strong);
  font-weight: 600;
  background: linear-gradient(
    to top,
    transparent 0.06em,
    rgba(255, 194, 60, 0.42) 0.06em,
    rgba(255, 194, 60, 0.42) 0.3em,
    transparent 0.3em
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.greeting-lead {
  width: min(100%, 720px);
  margin-top: 28px;
  padding-left: 18px;
  border-left: 5px solid var(--accent);
  color: var(--primary);
  font-size: calc(24px * var(--user-scale));
  font-weight: 700;
  line-height: 1.55;
  word-break: keep-all;
}

.greeting-body {
  display: grid;
  gap: 17px;
  width: min(100%, 760px);
  margin-top: 34px;
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.86;
  word-break: keep-all;
}

.greeting-quote {
  margin-top: 34px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  color: var(--point-strong);
  background: linear-gradient(135deg, rgba(255, 238, 231, 0.92), rgba(255, 250, 240, 0.96));
  font-size: calc(20px * var(--user-scale));
  line-height: 1.55;
  word-break: keep-all;
}

.greeting-sign {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  color: var(--primary);
}

.greeting-sign span {
  color: var(--secondary);
  font-size: calc(17px * var(--user-scale));
  font-weight: 700;
  white-space: nowrap;
}

.greeting-signature {
  display: block;
  flex: 0 0 auto;
  width: 170px;
  height: auto;
  filter: grayscale(1) contrast(1.35) brightness(1.08);
}

.greeting-visual {
  position: relative;
  min-height: 620px;
  animation: greeting-rise 0.74s 0.12s cubic-bezier(0.2, 1.15, 0.24, 1) both;
}

.greeting-photo {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(227, 215, 192, 0.95);
  border-radius: 0 44px 0 44px;
  background: url('../images/sub/greeting.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

.greeting-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.greeting-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 22px;
  border: 1px dashed rgba(185, 116, 0, 0.46);
  border-radius: inherit;
}

.greeting-photo::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 24px 24px auto;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: rgba(255, 194, 60, 0.34);
}

.greeting-photo.is-main {
  right: 0;
  top: 28px;
  width: min(86%, 520px);
  aspect-ratio: 0.74;
}

.greeting-shape {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 30px;
  opacity: 0.88;
}

.greeting-shape.is-coral {
  right: 36px;
  top: 0;
  width: 110px;
  height: 110px;
  background: var(--point);
}

.greeting-shape.is-gold {
  left: 38px;
  bottom: 26px;
  width: 138px;
  height: 138px;
  background: rgba(255, 194, 60, 0.72);
}

.greeting-shape.is-green {
  right: 10px;
  bottom: 34px;
  width: 76px;
  height: 76px;
  background: rgba(94, 132, 83, 0.78);
}

.greeting-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 120px;
}

.greeting-values li {
  --value-color: var(--green);
  --value-bg: var(--green-soft);
  position: relative;
  overflow: hidden;
  min-height: 150px;
  padding: 28px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--value-color);
  border-radius: var(--radius-md);
  background: var(--white);
  animation: greeting-rise 0.62s cubic-bezier(0.2, 1.15, 0.24, 1) both;
}

.greeting-values li::before {
  content: "";
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  width: var(--space-40);
  height: var(--space-40);
  border-radius: var(--radius-pill);
  background: var(--value-color);
  opacity: 0.18;
}

.greeting-values li:nth-child(2) {
  --value-color: var(--accent);
  --value-bg: var(--accent-soft);
  animation-delay: 0.08s;
}

.greeting-values li:nth-child(3) {
  --value-color: var(--point);
  --value-bg: var(--surface-warm);
  animation-delay: 0.16s;
}

.greeting-values strong {
  position: relative;
  display: block;
  padding-right: var(--space-48);
  color: var(--primary);
  font-size: calc(24px * var(--user-scale));
  font-weight: 700;
}

.greeting-values span {
  display: block;
  margin-top: 12px;
  color: var(--secondary);
  font-size: calc(19px * var(--user-scale));
  word-break: auto-phrase;
  line-height: 1.7;
}

.purpose-page {
  position: relative;
  overflow: hidden;
}

.purpose-page::before,
.purpose-page::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.purpose-page::before {
  left: -90px;
  top: 360px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 215, 201, 0.72) 0 42%, rgba(255, 215, 201, 0) 43%);
}

.purpose-page::after {
  right: -120px;
  top: 720px;
  width: 310px;
  height: 310px;
  background: radial-gradient(circle, rgba(255, 233, 180, 0.64) 0 44%, rgba(255, 233, 180, 0) 45%);
}

.purpose-page > .inner {
  position: relative;
  z-index: 1;
}

.purpose-section {
  position: relative;
}

.purpose-section::before {
  content: "";
  position: absolute;
  right: 2%;
  top: 24px;
  width: 180px;
  height: 180px;
  border: 34px solid rgba(220, 231, 210, 0.5);
  border-radius: 50%;
  opacity: 0.75;
  pointer-events: none;
}

.purpose-head {
  display: grid;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
  grid-auto-flow: row;
  justify-content: center;
}

.purpose-title {
  color: var(--primary);
  font-size: clamp(calc(38px * var(--user-scale)), 4.1vw, calc(50px * var(--user-scale)));
  
  line-height: 1.22;
  letter-spacing: -3px;
  word-break: keep-all;
  text-align: center;
}

.purpose-head p {
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.55;
  word-break: keep-all;
}

.purpose-head-copy {
  display: grid;
  gap: 9px;
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.purpose-flow {
  position: relative;
  display: grid;
  gap: 28px;
  width: min(100%, 1085px);
  margin: 0 auto 76px;
}

.purpose-flow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 98px;
  bottom: 98px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 194, 60, 0.3), rgba(242, 106, 75, 0.28));
  transform: translateX(-50%);
}

.purpose-orb {
  position: absolute;
  display: block;
  border-radius: 34px;
  opacity: 0.72;
  pointer-events: none;
}

.purpose-orb.is-orange {
  right: -54px;
  top: -34px;
  width: 112px;
  height: 112px;
  background: var(--point);
}

.purpose-orb.is-green {
  left: -44px;
  bottom: -28px;
  width: 82px;
  height: 82px;
  background: var(--green-soft);
}

.purpose-statement {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  min-height: 108px;
  padding: 26px 34px;
  border: 2px solid rgba(242, 106, 75, 0.48);
  border-radius: 56px;
  background: rgba(255, 255, 255, 0.9);
}

.purpose-statement.is-vision {
  border-color: rgba(94, 132, 83, 0.38);
  background: linear-gradient(135deg, rgba(220, 231, 210, 0.68), rgba(255, 255, 255, 0.96));
}

/* 미션=코랄, 비전=초록처럼 이 줄도 테두리·뱃지를 한 계열로 맞춘다.
   테두리에 옛 하늘색(#4cb8e8)이, 배경 워시에는 앰버가 남아 서로 어긋나 있었다. */
.purpose-statement.is-core {
  border-color: rgba(26, 143, 208, 0.38);
  background: linear-gradient(135deg, var(--white), color-mix(in srgb, var(--ring-4) 10%, var(--white)));
}

.purpose-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 158px;
  min-height: 54px;
  padding: 0 var(--space-24);
  border-radius: var(--radius-pill);
  color: var(--white);
  background: var(--point);
  font-size: calc(18px * var(--user-scale));
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.purpose-statement.is-vision .purpose-badge {
  color: var(--white);
  background: var(--green-vivid);
}

/* 앰버에 먹색을 62% 섞은 값이라 탁한 올리브(#a07114)로 떨어졌다.
   미션 코랄 · 비전 그린과 나란히 서는 자리라 브랜드 앰버 원색으로 되돌린다.
   흰 글자 대비 4.6:1 로 굵은 18px 기준 AA 를 넘는다. */
.purpose-statement.is-core .purpose-badge {
  color: var(--white);
  background: var(--ring-4);
}

.purpose-statement p {
  color: var(--primary);
  font-size: clamp(calc(22px * var(--user-scale)), 2.1vw, calc(30px * var(--user-scale)));
  line-height: 1.42;
  font-weight: 700;
  text-align: center;
  word-break: keep-all;
}

.purpose-section-title {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.purpose-section-title span {
  width: 6px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--point);
}

.purpose-section-title h4 {
  color: var(--primary);
  font-family: var(--font-title);
  font-size: calc(32px * var(--user-scale));
  line-height: 1.25;
}

.purpose-goals {
  position: relative;
  margin-top: 58px;
  padding: 44px 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 240, 0.96)),
    radial-gradient(circle at 8% 0%, rgba(255, 215, 201, 0.44), transparent 26%);
}

.purpose-goals ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 36px;
}

.purpose-goals li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 72px;
}

.purpose-goals li strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--white);
  background: var(--point);
  font-size: calc(17px * var(--user-scale));
  
}

.purpose-goals li:nth-child(even) strong {
  background: var(--ring-accent);
}

.purpose-goals li span {
  color: var(--primary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.5;
  word-break: keep-all;
}
.purpose-values {
  margin-top: 82px;
}

/* 설립목적 화면의 법적근거 구획. 다른 구획과 같이 위에 구분선을 둔다 */
.purpose-legal {
  margin-top: calc(var(--space-80) + var(--space-20));
  padding-top: calc(var(--space-80) + var(--space-20));
  border-top: 1px solid var(--border);
}

/* 법적근거 두 장은 나란히 둔다. 한 장씩 쌓으면 카드가 지나치게 넓어
   조문 한 줄이 어중간하게 접힌다. */
.feature-list.is-business.is-two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.feature-list.is-business.is-two-up .feature-item {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-16);
  text-align: center;
}

@media screen and (max-width: 767px) {
  .purpose-legal {
    margin-top: calc(var(--space-48) * 2);
    padding-top: var(--space-48);
  }

  .feature-list.is-business.is-two-up {
    grid-template-columns: 1fr;
  }

  /* 좁은 화면에서는 글자도 한 단씩 줄인다. 데스크톱 크기를 그대로 두면
     조문이 카드를 넘겨 어중간하게 접힌다. */
  .purpose-legal .feature-item h5 {
    font-size: calc(19px * var(--user-scale));
  }

  .purpose-legal .feature-item-body p {
    font-size: var(--user-small-size);
  }
}

.purpose-legal .feature-item-body p + p {
  margin-top: 6px;
}

/* 원 사이 점선이 간격을 알아야 다음 원까지 정확히 닿는다.
   gap 을 바꿀 때는 --ring-gap 도 같이 바꾼다. */
.purpose-values > ul {
  --ring-gap: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 260px));
  justify-content: center;
  align-items: stretch;
  gap: var(--ring-gap);
}

.purpose-values > ul > li {
  --purpose-task-dot: var(--point);
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  align-content: start;
  margin-top: 50px;
  text-align: center;
}

/* 원 지름 172px 기준으로 계산한다. 예전 184px 원에 맞춘 고정값(top 92,
   left 50%+96, width 100%-68)이 남아 있어 선이 6px 처지고 다음 원에
   46px 못 미쳤다. 반지름·간격에서 끌어내 원 크기가 바뀌어도 따라오게 한다. */
.purpose-values > ul > li::before {
  --ring-radius: 86px;
  --ring-clearance: 8px;
  content: "";
  position: absolute;
  top: calc(var(--ring-radius) - 2px);
  left: calc(50% + var(--ring-radius) + var(--ring-clearance));
  right: calc(var(--ring-radius) + var(--ring-clearance) - 50% - var(--ring-gap));
  border-top: 4px dotted rgba(242, 106, 75, 0.30);
}

.purpose-values > ul > li:last-child::before {
  display: none;
}

/* 속을 채운 코랄 단색 원. 이전에는 18px 링에 코랄·앰버를 번갈아 쓰고 변마다
   색이 다른 두 톤 테두리까지 얹혀 있었다. 발주처가 「색이 원색이고 쨍해서 눈에
   안 들어온다」고 지적한 실체는 채도가 아니라 이 산만함이었다 — 레퍼런스로 지목한
   충북(cbidolbom.co.kr)은 채도가 더 높은 #FF5722 를 쓰면서도 채운 원 한 색에
   흰 아이콘이라 차분하다. 같은 방식으로 맞췄다. 색 교차와 두 톤 테두리는 없앤다. */
.purpose-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  color: var(--white);
  background: var(--ring-1);
}

/* 사업마다 색을 달리해 구분한다. 레퍼런스인 충북도 원형에 여러 색을 쓴다. */
.purpose-values > ul > li:nth-child(6n + 2) .purpose-ring { background: var(--ring-2); }
.purpose-values > ul > li:nth-child(6n + 3) .purpose-ring { background: var(--ring-3); }
.purpose-values > ul > li:nth-child(6n + 4) .purpose-ring { background: var(--ring-4); }
.purpose-values > ul > li:nth-child(6n + 5) .purpose-ring { background: var(--ring-5); }
.purpose-values > ul > li:nth-child(6n + 6) .purpose-ring { background: var(--ring-6); }

.purpose-ring .lucide-icon {
  width: 58px;
  height: 58px;
}

.purpose-values strong {
  display: block;
  margin-top: 22px;
  color: var(--primary);
  font-size: calc(24px * var(--user-scale));
  font-weight: 700;
}

.purpose-values p {
  width: min(100%, 250px);
  margin-top: 12px;
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.7;
  word-break: auto-phrase;
}

.purpose-task-list {
  display: grid;
  align-self: stretch;
  box-sizing: border-box;
  gap: var(--space-12);
  width: min(100%, 250px);
  margin-top: 18px;
  padding: 0;
  text-align: left;
}

.purpose-task-list li {
  position: relative;
  padding-left: var(--space-16);
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  line-height: 1.55;
  word-break: keep-all;
}

/* 원형 사업 카드의 설명은 기본 본문 크기를 유지한다. */
.purpose-values .purpose-task-list li {
  font-size: calc(18px * var(--user-scale));
}

.purpose-task-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--purpose-task-dot);
}

/* 항목 수가 3의 배수가 아니면 마지막 줄이 왼쪽으로 치우친다.
   그리드는 덜 찬 줄을 가운데로 모으지 못하므로 가로 배치로 둔다. */
.purpose-values.is-cols-3 > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.purpose-values.is-cols-3 > ul > li {
  flex: 0 0 260px;
}

@media screen and (min-width: 1025px) {
  /* li 가 260px 고정이라 폭이 남으면 네 개가 들어차 4열이 됐다.
     클래스 이름대로 세 개에서 끊기도록 ul 폭을 3열분으로 묶는다. */
  .purpose-values.is-cols-3 > ul {
    --ring-gap: var(--space-80);
    gap: var(--ring-gap);
    max-width: calc(260px * 3 + var(--ring-gap) * 2);
    margin-inline: auto;
  }

  .purpose-values.is-cols-3.is-wide-gap > ul {
    --ring-gap: calc(var(--space-80) + var(--space-80));
    gap: var(--ring-gap);
    max-width: calc(260px * 3 + var(--ring-gap) * 2);
  }

  .purpose-values.is-card-aligned > ul {
    grid-template-columns: repeat(2, minmax(0, 340px));
    --ring-gap: var(--space-20);
    gap: var(--ring-gap);
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .purpose-values.is-cols-3.is-wide-gap > ul {
    --ring-gap: var(--space-80);
    gap: var(--ring-gap);
  }
}

.purpose-values.is-cols-3 > ul > li:nth-child(3n)::before {
  display: none;
}

.purpose-values.is-cols-3 > ul > li > a {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  align-content: start;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.purpose-values.is-cols-3 > ul > li > a:focus-visible strong {
  color: var(--accent-strong);
}

.purpose-values.is-cols-3 > ul > li > a:focus-visible {
  border-radius: var(--radius-sm);
  outline: 3px solid var(--accent-strong);
  outline-offset: var(--space-4);
}

.purpose-values.is-wrap > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.purpose-values.is-wrap > ul > li::before {
  display: none;
}

.purpose-values.is-wrap p {
  width: min(100%, 300px);
  word-break: keep-all;
}

/* 활동 범위는 서비스 종류 카드와 같은 2열 사각 정보 카드로 읽힌다. */
.purpose-values.is-activity-cards > ul {
  --ring-gap: var(--space-24);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.purpose-values.is-activity-cards > ul > li {
  --activity-card-color: var(--ring-1);
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  justify-items: start;
  gap: 0 var(--space-20);
  margin-top: 0;
  padding: var(--space-32);
  border: 1px solid var(--border);
  border-top: var(--space-8) solid var(--activity-card-color);
  border-radius: var(--radius-xl);
  background: var(--white);
  text-align: left;
}

.purpose-values.is-activity-cards > ul > li:nth-child(6n + 2) { --activity-card-color: var(--ring-2); }
.purpose-values.is-activity-cards > ul > li:nth-child(6n + 3) { --activity-card-color: var(--ring-3); }
.purpose-values.is-activity-cards > ul > li:nth-child(6n + 4) { --activity-card-color: var(--ring-4); }
.purpose-values.is-activity-cards > ul > li:nth-child(6n + 5) { --activity-card-color: var(--ring-5); }
.purpose-values.is-activity-cards > ul > li:nth-child(6n + 6) { --activity-card-color: var(--ring-6); }

.purpose-values.is-activity-cards > ul > li::before {
  display: none;
}

.purpose-values.is-activity-cards .purpose-ring {
  width: 72px;
  height: 72px;
  background: var(--activity-card-color);
}

.purpose-values.is-activity-cards .purpose-ring .lucide-icon {
  width: var(--space-32);
  height: var(--space-32);
}

.purpose-values.is-activity-cards strong {
  align-self: center;
  margin-top: 0;
  text-align: left;
}

.purpose-values.is-activity-cards p {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: var(--space-20);
  text-align: left;
  word-break: keep-all;
}

.program-grid.caregiver-training-grid .tag {
  min-height: var(--space-32);
  padding: 0 var(--space-16);
  font-size: calc(15px * var(--user-scale));
}

.program-grid.caregiver-training-grid .purpose-task-list > li {
  font-size: calc(19px * var(--user-scale));
  line-height: 1.65;
}

.page-cta.caregiver-page-cta .btn {
  font-size: calc(19px * var(--user-scale));
}

.service-purpose-intro {
  margin-top: var(--space-16);
  color: var(--secondary);
  font-size: calc(20px * var(--user-scale));
  line-height: 1.7;
  word-break: keep-all;
}

.service-purpose-focus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  margin: calc(var(--space-40) + var(--space-12)) 0 var(--space-40);
}

.service-purpose-focus::before,
.service-purpose-focus::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--border);
}

.service-purpose-focus strong {
  color: var(--primary);
  font-family: var(--font-title);
  font-size: calc(26px * var(--user-scale));
  font-weight: 800;
  letter-spacing: -0.045em;
  text-align: center;
  word-break: keep-all;
}

.service-purpose-grid .program-card h5 {
  font-size: calc(27px * var(--user-scale));
}

.service-purpose-grid .service-purpose-subtitle {
  display: block;
  width: 100%;
  margin-top: var(--space-24);
  padding-top: var(--space-24);
  border-top: 1px dashed var(--border);
  color: var(--point-strong);
  font-family: var(--font-title);
  font-size: calc(20px * var(--user-scale));
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.5;
  word-break: keep-all;
}

.service-purpose-grid .service-purpose-subtitle > span {
  padding: 0 0.08em 0.04em;
  background: linear-gradient(
    to top,
    transparent 1px,
    rgba(255, 194, 60, 0.42) 1px,
    rgba(255, 194, 60, 0.42) 11px,
    transparent 11px
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.service-purpose-grid .program-card > p {
  font-size: calc(18px * var(--user-scale));
}

@media screen and (max-width: 767px) {
  .purpose-values.is-activity-cards > ul {
    grid-template-columns: 1fr;
  }

  .purpose-values.is-activity-cards > ul > li {
    grid-template-columns: 60px minmax(0, 1fr);
    padding: var(--space-24);
  }

  .purpose-values.is-activity-cards .purpose-ring {
    width: 60px;
    height: 60px;
  }

  .purpose-values.is-activity-cards .purpose-ring .lucide-icon {
    width: 28px;
    height: 28px;
  }

  .purpose-values.is-activity-cards strong {
    font-size: calc(21px * var(--user-scale));
  }

  .page-cta.caregiver-page-cta .btn {
    font-size: calc(17px * var(--user-scale));
  }
}
@keyframes greeting-rise {
  from {
    opacity: 1;
    transform: translateY(20px) scale(0.98);
  }
  72% {
    transform: translateY(-3px) scale(1.004);
  }
  to {
    transform: translateY(0) scale(1);
  }
}

@media screen and (max-width: 1024px) {

  .education-course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .info-grid,
  .gallery-grid,
  .sitemap-grid,
  .sns-channel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .program-grid,
  .step-list.is-row {
    flex-wrap: wrap;
  }

  .program-card {
    flex-basis: calc(50% - 10px);
    max-width: none;
  }

  .step-list.is-row .step-item {
    flex: 1 1 calc(50% - 16px);
    max-width: none;
  }

  .sub-hero-panel,
  .map-section,
  .institution-map-layout {
    grid-template-columns: 1fr;
  }

  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 팀 박스는 원래 80% 폭이라 아래 직위 표(100%)와 좌우가 어긋났다. 맞춰 준다. */
  .org-box.is-director,
  .org-box.is-team,
  .org-tasks,
  .org-team .org-duty-group {
    width: 100%;
  }

  /* 한 줄로 쌓이면 세 팀이 행을 나눠 쓸 이유가 없다. subgrid 를 풀지 않으면
     팀 사이 간격(gap)이 이름칸과 업무칸 사이에도 들어가 붙여 놓은 박스가 다시 갈라진다. */
  .org-teams {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 36px;
    padding-top: 0;
  }

  .org-team {
    display: flex;
    grid-row: auto;
  }

  .org-team .org-duty-group,
  .org-team .org-duty-list {
    display: block;
    grid-row: auto;
  }

  .org-team .org-duty-list {
    display: grid;
  }

  .org-teams::before {
    display: none;
  }

  .org-team::before {
    top: -20px;
    height: 20px;
  }

  .org-team:first-child::before {
    display: none;
  }

  .greeting-section {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .greeting-visual {
    order: -1;
    min-height: 470px;
  }

  .greeting-photo.is-main {
    width: min(74%, 520px);
  }

  .greeting-values {
    grid-template-columns: 1fr;
  }

  .purpose-head {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .purpose-statement {
    grid-template-columns: 1fr;
    border-radius: 34px;
    text-align: center;
  }

  .purpose-badge {
    justify-content: center;
    margin-bottom: 20px;
  }

  .purpose-goals ol,
  .purpose-values > ul,
  .purpose-values.is-wrap > ul,
  .purpose-values.is-cols-3 > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .purpose-values.is-cols-3 > ul > li {
    flex-basis: calc(50% - var(--space-40));
  }

  .purpose-values > ul > li:nth-child(2)::before {
    display: none;
  }

  .purpose-values.is-cols-3 > ul > li::before {
    display: block;
  }

  .purpose-values.is-cols-3 > ul > li:nth-child(3n)::before {
    display: block;
  }

  .purpose-values.is-cols-3 > ul > li:nth-child(2n)::before {
    display: none;
  }

  /* 좁아지면 지그재그를 버리고 한 줄로 세운다.
     반쪽 폭에 좌우로 갈리면 제목이 글자 단위로 끊긴다. */
  .timeline-list {
    --timeline-gap: var(--space-24);
  }

  .timeline-list::before {
    left: calc(var(--timeline-gap) - 1px);
    margin-left: 0;
  }

  .timeline-year:nth-child(odd),
  .timeline-year:nth-child(even) {
    width: auto;
    margin-left: 0;
    padding-left: calc(var(--timeline-gap) * 2);
    text-align: left;
  }

  .timeline-year-num {
    font-size: calc(32px * var(--user-scale));
  }

  .timeline-year:nth-child(odd) .timeline-year-num::after,
  .timeline-year:nth-child(even) .timeline-year-num::after {
    left: calc((var(--timeline-gap) + 7.5px) * -1);
    right: auto;
  }

  /* 왼쪽 덩어리도 오른쪽과 같은 방향으로 돌려놓는다. */
  .timeline-year:nth-child(odd) .timeline-entry {
    flex-direction: row;
  }

  .timeline-year:nth-child(odd) .timeline-date {
    flex-direction: row;
  }

}

@media screen and (max-width: 767px) {
  .sub-visual {
    padding: 46px 0;
  }

  .institution-map-panel .kakao-map-embed {
    padding-top: 78%;
  }

  .sub-title {
    font-size: calc(34px * var(--user-scale));
  }

  .history-section .content-title {
    font-size: calc(31px * var(--user-scale));
    letter-spacing: -1.2px;
  }

  /* 모바일은 날짜를 내용 위로 올린다. 가로로 두면 제목 폭이 남지 않는다. */
  .timeline-entry {
    display: block;
  }

  .sub-content {
    padding: 48px 0 70px;
  }

  .content-head {
    display: block;
  }

  /* 가로 배치용 space-between 이 남으면 칸이 내용 폭에 묶여 줄이 꽉 차지 않는다. */
  .attendance-course-select-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-items: stretch;
    gap: var(--space-12);
  }

  .attendance-course-select {
    display: grid;
    gap: var(--space-8);
  }

  .attendance-course-select select,
  .attendance-qr-open {
    width: 100%;
  }

  .attendance-qr-pending {
    line-height: 1.5;
  }

  .transit-table,
  .transit-table tbody,
  .transit-table tr,
  .transit-table th,
  .transit-table td {
    display: block;
    width: 100%;
  }

  .transit-table tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }

  .transit-table th,
  .transit-table td {
    padding: 2px 0;
    border-bottom: 0;
  }

  .info-grid,
  .gallery-grid,
  .sitemap-grid,
  .sns-channel-grid,
  .stat-strip {
    grid-template-columns: 1fr;
  }

  .education-course-list {
    grid-template-columns: 1fr;
  }

  .education-my-links {
    grid-template-columns: 1fr;
  }

  .education-course-card {
    padding: 22px 20px;
  }

  .education-course-info {
    grid-template-columns: 1fr;
  }

  .education-detail-info {
    grid-template-columns: 1fr;
  }

  .education-apply-modal {
    padding: 16px;
  }

  .education-apply-head,
  .education-apply-form {
    padding: 20px;
  }

  .education-apply-confirm-list > div {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .education-apply-actions .btn {
    flex: 1;
  }

  .program-card {
    flex-basis: 100%;
  }

  .program-grid.is-featured-single .program-card {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: var(--space-32) var(--space-20);
    text-align: center;
  }

  .program-grid.is-featured-single .program-card-icon {
    grid-row: auto;
  }

  .program-grid.is-featured-single.is-cover .program-card {
    flex-direction: column;
    align-items: center;
    gap: var(--space-20);
  }

  .program-card-cover {
    flex: 0 0 auto;
    width: 200px;
  }

  .step-list.is-row {
    gap: 16px;
  }

  .step-list.is-row .step-item {
    flex: 1 1 100%;
    max-width: none;
    display: grid;
    text-align: left;
  }

  .step-list.is-row .step-no {
    margin: 0;
  }

  .sub-hero-panel,
  .form-panel,
  .policy-section {
    padding: 22px;
  }

  .page-lead {
    padding: 20px;
  }

  .program-head {
    margin-top: var(--space-48);
    padding-top: var(--space-48);
  }

  .contact-cta {
    margin-top: calc(var(--space-48) * 2);
  }

  .contact-cta::before {
    top: calc(var(--space-48) * -1);
  }

  .page-lead-text {
    font-size: calc(25px * var(--user-scale));
  }

  .step-item {
    grid-template-columns: 1fr;
  }

  .flow-diagram.is-emphasis,
  .step-list.is-row.is-emphasis {
    padding: 28px 20px 32px;
  }

  .feature-list.is-emphasis {
    padding: 4px 20px;
  }

  .feature-list.is-business {
    padding: 0;
  }

  .feature-list.is-business .feature-item {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 20px;
  }

  .feature-list.is-business .feature-item-head {
    gap: 12px;
  }

  .feature-list.is-business .feature-item-body {
    max-width: none;
  }

  .feature-list.is-business .feature-item-body > p:last-child {
    text-align: center;
  }


  .page-purpose {
    text-align: center;
  }

  .page-purpose h4 {
    justify-content: center;
  }

  .survey-response-page {
    gap: var(--space-32);
  }

  .survey-response-head p {
    font-size: calc(15px * var(--user-scale));
  }

  .survey-response-card {
    padding: var(--space-24);
  }

  .survey-response-card .survey-question {
    padding-bottom: var(--space-24);
  }

  .survey-response-card .survey-question + .survey-question {
    padding-top: var(--space-24);
  }

  .survey-response-card .survey-question-title {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-4);
  }

  .survey-response-card .survey-options {
    gap: var(--space-12) var(--space-20);
  }

  .survey-multiple-guide {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
  }

  .survey-response-card .survey-actions {
    justify-content: center;
  }
  /* 설문 목록은 제목 아래에 기간·상태를 한 줄로 붙여 읽는다. */
  .survey-table {
    table-layout: auto;
    border-top: 0;
    min-width: 0;
  }

  .survey-table colgroup,
  .survey-table thead {
    display: none;
  }

  .survey-table,
  .survey-table tbody,
  .survey-table tr {
    display: block;
    width: 100%;
  }

  /* 왼쪽 열에 제목과 기간, 오른쪽 열에 상태 배지를 둔다.
     버튼은 아래에서 두 열을 걸친다. */
  /* 좁은 화면에서는 건수와 첫 항목이 붙어 보여 경계를 하나 둔다. */
  .survey-section .list-count-bar {
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--border);
  }

  table.survey-list-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(76px, auto);
    align-items: start;
    column-gap: var(--space-12);
    row-gap: var(--space-4);
    padding: var(--space-12) 0;
    border-bottom: 1px solid var(--border);
  }

  table.survey-list-table td {
    width: auto;
    padding: 0;
    border-bottom: 0;
    text-align: left;
  }

  table.survey-list-table td[colspan] {
    grid-column: 1 / -1;
  }

  table.survey-list-table td[data-label="No"] {
    display: none;
  }

  table.survey-list-table td.subject {
    padding: 0;
    font-size: calc(17px * var(--user-scale));
  }

  /* 한 건에서 제목이 먼저 읽혀야 하므로 본문보다 크고 굵게 둔다.
     종료·대기 건은 링크가 아니라 span 이어서 전역 span 규칙에 눌리므로 함께 잡는다. */
  table.survey-list-table td.subject a,
  table.survey-list-table td.subject > span:not(.survey-participation-badge) {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.4;
    font-size: calc(17px * var(--user-scale));
    font-weight: 700;
    color: var(--primary);
  }

  table.survey-list-table td.subject .survey-participation-badge {
    margin-bottom: var(--space-4);
    font-size: calc(12px * var(--user-scale));
  }

  /* 한 건을 제목 → 상태 → 기간 → 버튼 순으로 쌓는다.
     상태는 오른쪽 끝, 나머지는 왼쪽에 붙는다. */
  table.survey-list-table td.subject {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  table.survey-list-table td[data-label="기간"], table.survey-list-table td[data-label="참여 기간"] {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    color: var(--secondary);
    font-size: calc(13px * var(--user-scale));
    font-weight: 600;
    min-width: 0;
    overflow: visible;
    padding-right: var(--space-8);
    padding-left: 0;
    font-size: calc(13px * var(--user-scale));
    text-overflow: clip;
    white-space: normal;
    line-height: 1.45;
  }

  table.survey-list-table td[data-label="상태"] {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-width: 76px;
    white-space: nowrap;
  }

  /* 참여·결과보기는 한 건의 주 행동이므로 줄을 따로 쓰고 폭을 꽉 채운다. */
  table.survey-list-table td[data-label="참여"] {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    padding-top: var(--space-12);
  }

  table.survey-list-table td[data-label="참여"] .btn {
    display: flex;
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  table.survey-list-table td[data-label]:not(.subject)::before {
    content: attr(data-label) " ";
    color: var(--muted);
    font-size: calc(12px * var(--user-scale));
    font-weight: 700;
  }

  table.survey-list-table td[data-label="No"]:not(.subject)::before,
  table.survey-list-table td[data-label="참여"]:not(.subject)::before {
    content: none;
  }

  /* 배지가 스스로 상태를 말하므로 앞에 글자 라벨을 덧붙이지 않는다. */
  table.survey-list-table td[data-label="상태"]:not(.subject)::before {
    content: none;
  }

  /* 날짜 앞 달력 표시. 글자 라벨 대신 쓰므로 라벨 규칙보다 뒤에 둔다. */
  table.survey-list-table td[data-label="기간"]:not(.subject)::before,
  table.survey-list-table td[data-label="참여 기간"]:not(.subject)::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: no-repeat center / contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  }

  /* 설문 결과 */
  .survey-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-16);
  }

  .survey-result-option-head {
    flex-wrap: wrap;
    gap: 4px;
  }

  .survey-actions {
    flex-direction: column;
  }

  .survey-actions .btn {
    width: 100%;
  }

  .survey-section {
    padding: var(--space-20) 0;
  }

  .survey-section-head {
    display: block;
  }

  .survey-section-head p {
    margin-top: 8px;
  }

  .survey-table {
    min-width: 0;
  }

  .survey-section:has(.survey-table) {
    overflow-x: visible;
  }

  .survey-result {
    grid-template-columns: 1fr;
  }

  .survey-result article {
    padding: 18px;
  }

  .survey-actions {
    justify-content: stretch;
  }

  .survey-actions .btn,
  .survey-actions button {
    flex: 1;
  }

  .survey-response-card .survey-actions {
    justify-content: center;
  }

  .survey-response-card .survey-actions .btn,
  .survey-response-card .survey-actions button {
    flex: 0 1 auto;
  }

  .page-purpose.is-icon-left {
    flex-direction: column;
    padding: var(--space-20);
    border-top: 4px solid var(--accent);
    text-align: center;
  }

  .flow-diagram {
    flex-direction: column;
  }

  .flow-node {
    width: 100%;
  }

  .flow-arrow {
    transform: rotate(90deg);
  }

  .page-cta {
    padding-top: 24px;
  }

  .contact-cta {
    padding: 32px 24px;
  }


  .loc-home {
    width: 46px;
  }

  .loc-item summary {
    height: 46px;
    padding: 0 16px;
    font-size: calc(14px * var(--user-scale));
  }

  .loc-item > ul {
    min-width: 200px;
  }

  .greeting-page {
    padding-top: 46px;
  }

  .greeting-title {
    font-size: calc(31px * var(--user-scale));
    letter-spacing: -1.2px;
    line-height: 1.23;
  }

  .greeting-lead {
    margin-top: 22px;
    font-size: calc(19px * var(--user-scale));
  }

  .greeting-body {
    margin-top: 26px;
    font-size: calc(16px * var(--user-scale));
    line-height: 1.78;
  }

  .greeting-quote {
    padding: 18px;
    font-size: calc(17px * var(--user-scale));
  }

  .greeting-sign {
    gap: 10px;
  }

  .greeting-sign span {
    font-size: calc(14px * var(--user-scale));
    letter-spacing: -0.05em;
  }

  .greeting-signature {
    width: 112px;
  }

  .greeting-visual {
    min-height: 300px;
  }

  .greeting-photo.is-main {
    right: 0;
    width: 66%;
  }

  .greeting-shape.is-green {
    display: none;
  }

  .greeting-shape.is-coral {
    width: 76px;
    height: 76px;
  }

  .greeting-shape.is-gold {
    width: 92px;
    height: 92px;
    left: 70px;
  }

  .greeting-values {
    margin-top: 42px;
  }

  .greeting-values li {
    min-height: 0;
    padding: 22px;
  }

  .purpose-section::before,
  .purpose-page::before,
  .purpose-page::after {
    display: none;
  }

  .purpose-title {
    font-size: calc(33px * var(--user-scale));
    letter-spacing: -1.6px;
  }

  .purpose-head {
    margin-bottom: 38px;
  }

  .purpose-flow {
    gap: 20px;
    margin-bottom: 46px;
  }

  .purpose-flow::before,
  .purpose-orb {
    display: none;
  }

  .purpose-statement {
    min-height: 0;
    padding: 24px 20px;
  }

  .purpose-statement p {
    font-size: calc(21px * var(--user-scale));
  }

  .purpose-goals {
    margin-top: 38px;
    padding: 26px 20px;
    border-radius: var(--radius-lg);
  }

  .purpose-goals ol,
  .purpose-values > ul,
  .purpose-values.is-wrap > ul,
  .purpose-values.is-cols-3 > ul {
    grid-template-columns: 1fr;
  }

  .purpose-goals li {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .purpose-goals li strong {
    width: 40px;
    height: 40px;
    font-size: calc(14px * var(--user-scale));
  }

  .purpose-values {
    margin-top: 54px;
  }


  .purpose-values > ul > li::before {
    display: none;
  }

  .purpose-values.is-cols-3 > ul > li {
    flex-basis: 100%;
  }

  .purpose-values.is-cols-3 > ul > li:nth-child(n)::before {
    display: none;
  }

  .purpose-ring {
    width: 150px;
    height: 150px;
    border-width: 14px;
  }

  .purpose-ring .lucide-icon {
    width: 46px;
    height: 46px;
  }
}


.loc-item summary,
.loc-item > ul a,
.board-search select,
.board-search input,
.board-search button,
.board-table th,
.board-table td,
.pagination a,
.pagination strong,
.view-meta,
.view-body,
.gallery-card span {
  letter-spacing: 0;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;
}

.view-meta,
.gallery-card span {
  font-size: calc(13px * var(--user-scale));
  font-weight: 500;
}

.board-table th,
.pagination a,
.pagination strong {
  font-weight: 700;
}


body.font-size-small #main,
body.font-size-medium #main,
body.font-size-large #main {
  font-size: var(--user-text-size);
}

/* 보조 설명·정의어처럼 본문보다 한 단 작게 쓰던 글(15~17px). 15/16/18 로 따라 움직인다 */
body.font-size-small #main .agreement-modal-body .policy-section li,
body.font-size-small #main .auth-layout .join-steps li,
body.font-size-small #main .auth-required p,
body.font-size-small #main .feature-list.is-business .business-field-tags li,
body.font-size-small #main .institution-detail dd,
body.font-size-small #main .list-count-bar p,
body.font-size-small #main .map-info-list dd,
body.font-size-small #main .mypage-table td,
body.font-size-small #main .prep-notice p,
body.font-size-small #main .search-empty p,
body.font-size-small #main .survey-meta dd,
body.font-size-small #main .survey-response-head p,
body.font-size-small #main .survey-section-head p,
body.font-size-medium #main .agreement-modal-body .policy-section li,
body.font-size-medium #main .auth-layout .join-steps li,
body.font-size-medium #main .auth-required p,
body.font-size-medium #main .feature-list.is-business .business-field-tags li,
body.font-size-medium #main .institution-detail dd,
body.font-size-medium #main .list-count-bar p,
body.font-size-medium #main .map-info-list dd,
body.font-size-medium #main .mypage-table td,
body.font-size-medium #main .prep-notice p,
body.font-size-medium #main .search-empty p,
body.font-size-medium #main .survey-meta dd,
body.font-size-medium #main .survey-response-head p,
body.font-size-medium #main .survey-section-head p,
body.font-size-large #main .agreement-modal-body .policy-section li,
body.font-size-large #main .auth-layout .join-steps li,
body.font-size-large #main .auth-required p,
body.font-size-large #main .feature-list.is-business .business-field-tags li,
body.font-size-large #main .institution-detail dd,
body.font-size-large #main .list-count-bar p,
body.font-size-large #main .map-info-list dd,
body.font-size-large #main .mypage-table td,
body.font-size-large #main .prep-notice p,
body.font-size-large #main .search-empty p,
body.font-size-large #main .survey-meta dd,
body.font-size-large #main .survey-response-head p,
body.font-size-large #main .survey-section-head p {
  font-size: var(--user-note-size);
}

/* 메타·캡션처럼 가장 작게 쓰던 글(13~14px). 13/14/16 으로 따라 움직인다 */
body.font-size-small #main .attendance-course-info dt,
body.font-size-small #main .attendance-detail-list dt,
body.font-size-small #main .attendance-qr-card p,
body.font-size-small #main .info-program-body p,
body.font-size-small #main .institution-detail dt,
body.font-size-small #main .labor-work-guide p,
body.font-size-small #main .survey-meta dt,
body.font-size-medium #main .attendance-course-info dt,
body.font-size-medium #main .attendance-detail-list dt,
body.font-size-medium #main .attendance-qr-card p,
body.font-size-medium #main .info-program-body p,
body.font-size-medium #main .institution-detail dt,
body.font-size-medium #main .labor-work-guide p,
body.font-size-medium #main .survey-meta dt,
body.font-size-large #main .attendance-course-info dt,
body.font-size-large #main .attendance-detail-list dt,
body.font-size-large #main .attendance-qr-card p,
body.font-size-large #main .info-program-body p,
body.font-size-large #main .institution-detail dt,
body.font-size-large #main .labor-work-guide p,
body.font-size-large #main .survey-meta dt {
  font-size: var(--user-caption-size);
}




body.font-size-small #main :where(.view-meta, .gallery-card span),
body.font-size-medium #main :where(.view-meta, .gallery-card span),
body.font-size-large #main :where(.view-meta, .gallery-card span) {
  font-size: var(--user-small-size);
}

body.font-size-small #main :where(.loc-item summary, .loc-item > ul a, .board-search button, .pagination a, .pagination strong),
body.font-size-medium #main :where(.loc-item summary, .loc-item > ul a, .board-search button, .pagination a, .pagination strong),
body.font-size-large #main :where(.loc-item summary, .loc-item > ul a, .board-search button, .pagination a, .pagination strong) {
  font-size: var(--user-label-size);
}

body.font-size-small #main :where(.pagination-prev, .pagination-next),
body.font-size-medium #main :where(.pagination-prev, .pagination-next),
body.font-size-large #main :where(.pagination-prev, .pagination-next) {
  font-size: 0;
}

body.font-size-small #main :where(.education-course-summary h4),
body.font-size-medium #main :where(.education-course-summary h4),
body.font-size-large #main :where(.education-course-summary h4) {
  font-size: calc(var(--user-text-size) + 4px);
}

body.font-size-small #main :where(.education-course-organization),
body.font-size-medium #main :where(.education-course-organization),
body.font-size-large #main :where(.education-course-organization) {
  font-size: var(--user-text-size);
}

body.font-size-small #main :where(.education-course-info dd),
body.font-size-medium #main :where(.education-course-info dd),
body.font-size-large #main :where(.education-course-info dd) {
  font-size: var(--user-small-size);
}

body.font-size-small #main :where(.education-course-info dt, .education-course-status, .education-course-type),
body.font-size-medium #main :where(.education-course-info dt, .education-course-status, .education-course-type),
body.font-size-large #main :where(.education-course-info dt, .education-course-status, .education-course-type) {
  font-size: calc(var(--user-small-size) - 1px);
}

/* 이 두 규칙은 「가/가/가」 블록 안에 있으면서 고정 px 을 박아
   조절을 무력화하고 있었다. 이용자가 크기를 키워도 그대로였다.
   기준 크기에서 --user-text-size 만큼 따라 움직이게 바꾼다. */
body.font-size-small #main .purpose-head p,
body.font-size-medium #main .purpose-head p,
body.font-size-large #main .purpose-head p {
  font-size: var(--user-text-size);
}

/* 미션·비전 본문은 큰 표시용 글이라 본문보다 한 단 크게 두되,
   위아래 폭은 유지해 좁은 화면에서 넘치지 않게 한다. */
body.font-size-small #main .purpose-statement p,
body.font-size-medium #main .purpose-statement p,
body.font-size-large #main .purpose-statement p {
  font-size: clamp(calc(var(--user-text-size) + 2px), 2.1vw, calc(var(--user-text-size) + 10px));
}


.prep-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 90px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-align: center;
}

.prep-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.prep-notice-icon .lucide-icon {
  width: 32px;
  height: 32px;
}

.prep-notice-title {
  font-size: calc(26px * var(--user-scale));
  font-weight: 700;
}

.prep-notice p {
  max-width: 460px;
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  line-height: 1.7;
}


.mypage-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.mypage-nav {
  position: sticky;
  top: 24px;
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-bright);
}

.mypage-nav-title {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: calc(18px * var(--user-scale));
  font-weight: 700;
}


.mypage-nav-toggle {
  display: none;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--primary);
  font-family: inherit;
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.mypage-nav-toggle::after {
  content: "";
  float: right;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-right: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: rotate(45deg);
}

.mypage-nav.is-open .mypage-nav-toggle::after {
  margin-top: 10px;
  transform: rotate(-135deg);
}

.mypage-nav-list {
  display: grid;
  gap: 4px;
}

.mypage-nav-list a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--secondary);
  font-weight: 600;
}

.mypage-nav-list a:hover {
  background: var(--bg-2);
  color: var(--primary);
}

.mypage-nav-list a.is-active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
}

.mypage-body .content-head {
  margin-bottom: 8px;
}


/* 아이콘은 절대배치한다. grid/flex 로 잡으면 문장 중간의 <strong> 같은
   인라인 요소까지 트랙에 배치돼 글자가 세로로 쪼개진다. */
.mypage-notice {
  position: relative;
  margin: 12px 0 20px;
  padding: 14px 18px 14px 50px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  color: var(--accent-ink);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.6;
}

.mypage-notice::before {
  position: absolute;
  top: 14px;
  left: 18px;
}

.mypage-notice::before,
.attendance-qr-notice::before,
.education-my-desc::before {
  content: "!";
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--point-strong);
  color: var(--white);
  font-size: calc(15px * var(--user-scale));
  font-weight: 900;
  line-height: 1;
}


.mypage-warn {
  margin: 12px 0 24px;
  padding: 20px 24px;
  border: 1px solid var(--point-strong);
  border-radius: var(--radius-md);
  background: var(--surface-pink);
}

.mypage-warn h4 {
  margin-bottom: 10px;
  color: var(--point-strong);
  font-size: calc(17px * var(--user-scale));
  font-weight: 800;
}

.mypage-warn ul {
  display: grid;
  gap: 6px;
  color: var(--primary);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.6;
}

.mypage-warn li {
  padding-left: 14px;
  text-indent: -14px;
}

.mypage-warn li::before {
  content: "· ";
  font-weight: 700;
}


.mypage-rules {
  margin: 20px 0 4px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.mypage-rules h4 {
  margin-bottom: 8px;
  font-size: calc(16px * var(--user-scale));
  font-weight: 800;
}

.mypage-rules ul {
  display: grid;
  gap: 4px;
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.6;
}

.mypage-rules li {
  padding-left: 14px;
  text-indent: -14px;
}

.mypage-rules li::before {
  content: "· ";
}


.mypage-label {
  padding-top: 13px;
  font-weight: 700;
}

.mypage-readonly {
  min-height: 48px;
  font-weight: 600;
}

.mypage-optional {
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
  font-weight: 500;
}


.mypage-table-scroll {
  overflow-x: auto;
}

.mypage-table {
  width: 100%;
  border-top: 2px solid var(--primary);
  border-collapse: collapse;
}

.mypage-table th,
.mypage-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  font-size: calc(15px * var(--user-scale));
  text-align: center;
  vertical-align: middle;
}

.mypage-table thead th {
  background: var(--bg-2);
  font-weight: 700;
}

.mypage-table tbody th {
  font-weight: 600;
  text-align: left;
}

.mypage-table .subject {
  text-align: left;
  font-weight: 600;
}

.mypage-table .mypage-reject {
  display: block;
  margin-top: 4px;
  color: var(--point-strong);
  font-size: calc(14px * var(--user-scale));
  font-weight: 500;
}

.mypage-table .mypage-empty {
  padding: 48px 12px;
  color: var(--muted);
}


.mypage-table .btn {
  min-width: 0;
  min-height: 34px;
  padding: 0 14px;
  font-size: calc(14px * var(--user-scale));
}

.mypage-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 28px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--bg-2);
  color: var(--secondary);
  font-size: calc(13px * var(--user-scale));
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.mypage-badge.is-approved {
  background: var(--green-soft);
  color: #2e5127;
}

.mypage-badge.is-done {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.mypage-badge.is-rejected {
  background: var(--surface-coral);
  color: #8c2f16;
}

.mypage-badge.labor-status-waiting { color: #315b8a; background: #e7f0fb; }
.mypage-badge.labor-status-message { color: #6b3fa0; background: #f0e6ff; }
.mypage-badge.labor-status-admin { color: #59636f; background: #eef1f4; }
.mypage-badge.labor-status-answerable { color: #2e5127; background: var(--green-soft); }
.mypage-badge.labor-status-assigned { color: #8c2f16; background: #ffd7c9; }
.mypage-badge.labor-status-submitted { color: #7a4b00; background: #fff0c2; }
.mypage-badge.labor-status-approved { color: #59636f; background: #eef1f4; }

.labor-qna-answer-label {
  display: block;
  margin: 0;
  padding: 24px 30px 0;
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
}

.labor-qna-answer-block + .labor-qna-answer-block {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.labor-qna-answer-block .labor-qna-content {
  min-height: 100px;
  padding-top: 18px;
}

.labor-qna-view .labor-qna-answer-block .labor-qna-files {
  margin: 0 30px 24px;
  padding-bottom: 0;
  border-bottom: 0;
}

@media screen and (max-width: 768px) {
  .labor-qna-answer-label { padding: 20px 18px 0; }
  .labor-qna-view .labor-qna-answer-block .labor-qna-files { margin: 0 18px 20px; }
}


.mypage-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.mypage-agree {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 20px 0 4px;
  padding: 14px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  box-sizing: border-box;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  word-break: keep-all;
}

.mypage-agree input {
  flex: none;
}

.mypage-agree span {
  min-width: 0;
}

@media screen and (max-width: 1024px) {
  
  .mypage-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mypage-nav {
    position: static;
    padding: 16px;
  }

  .mypage-nav-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
    font-size: calc(16px * var(--user-scale));
  }

  .mypage-nav-list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .mypage-nav-list a {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
}

@media screen and (max-width: 767px) {
  
  .mypage-nav-toggle {
    display: block;
  }

  .mypage-nav-list {
    display: none;
    
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    margin-top: 8px;
    overflow: visible;
  }

  .mypage-nav.is-open .mypage-nav-list {
    display: grid;
  }

  .mypage-nav-list a {
    border-radius: var(--radius-sm);
    white-space: normal;
  }

  
  .mypage-table.is-history colgroup,
  .mypage-table.is-history thead {
    display: none;
  }

  .mypage-table.is-history,
  .mypage-table.is-history tbody,
  .mypage-table.is-history tr,
  .mypage-table.is-history td {
    display: block;
    width: 100%;
  }

  .mypage-table.is-history tr {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

  .mypage-table.is-history td {
    display: flex;
    gap: 12px;
    padding: 6px 4px;
    border: 0;
    text-align: left;
  }

  .mypage-table.is-history td::before {
    content: attr(data-label);
    flex: 0 0 72px;
    color: var(--muted);
    font-weight: 700;
  }
}


.cms-content img,
.cms-content video,
.cms-content iframe {
  max-width: 100%;
  height: auto;
}


.cms-content table {
  max-width: 100%;
}
.form-panel {
  padding: var(--space-40);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.form-grid,
.education-apply-form .form-grid {
  gap: var(--space-24);
}

.form-row {
  gap: var(--space-8);
}

.form-row label,
.agreement-list strong,
.si-field label {
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
  line-height: 1.45;
}

.form-row input,
.form-row select,
.form-row textarea,
.si-field input,
.si-field select,
.si-field textarea,
.si-field .fx,
.mypage-readonly {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
  line-height: 1.45;
}

.mypage-readonly {
  display: flex;
  align-items: center;
  margin: 0;
  font-weight: 600;
}

.form-row textarea,
.si-field textarea {
  min-height: 132px;
  padding-top: var(--space-12);
  line-height: 1.6;
}

.form-row input::placeholder,
.form-row textarea::placeholder,
.si-field input::placeholder,
.si-field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.si-field input:focus,
.si-field select:focus,
.si-field textarea:focus,
.si-field .fx:focus {
  border-color: var(--accent-strong);
  outline: none;
}

.form-help {
  margin-top: var(--space-8);
  text-align: left;
}

.form-actions,
.education-apply-actions,
.si-actions {
  gap: var(--space-12);
  margin-top: var(--space-24);
  justify-content: center;
}

.radio-row {
  gap: var(--space-12);
}

.radio-row label,
.education-apply-agree,
.agreement-list label {
  min-height: 44px;
}

.write-form {
  padding: var(--space-40);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.write-row {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.write-row > label {
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
  line-height: 1.45;
}

.write-row input[type="text"],
.write-row input[type="password"],
.write-row input[type="tel"],
.write-row textarea {
  min-height: 48px;
  padding: 0 var(--space-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
}

.write-row textarea {
  min-height: 180px;
  padding-top: var(--space-12);
  line-height: 1.6;
}

.write-row input:focus,
.write-row textarea:focus,
.write-dropzone:focus-visible {
  border-color: var(--accent-strong);
  outline: none;
}

.write-row small,
.write-guide {
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
  font-weight: 500;
  line-height: 1.55;
}

.write-buttons {
  gap: var(--space-12);
  margin-top: var(--space-24);
  justify-content: center;
}

/* 노무 질문 전용 입력 요소: 공통 게시판의 기존 구조는 변경하지 않는다. */
.labor-question-form .write-row {
  grid-template-columns: 160px minmax(0, 1fr);
}

.labor-question-form .write-row > :not(label):not(.labor-question-field-label) {
  grid-column: 2;
  min-width: 0;
}

.labor-question-field-label {
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
  line-height: 1.45;
}

.labor-question-form .write-row input[type="tel"] {
  width: 100%;
  font-family: inherit;
}

.labor-question-form .write-row input[readonly] {
  background: var(--bg-soft, #f8f7f5);
  color: var(--muted);
}

.labor-question-category {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.labor-category-guide {
  margin-bottom: var(--space-8);
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
}

.labor-category-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.labor-category-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: calc(17px * var(--user-scale));
  white-space: nowrap;
  cursor: pointer;
}

.labor-category-options input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--accent-strong);
}

.labor-question-category:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 4px;
}

.labor-question-editor-contents.is-wysiwyg {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
}

.labor-question-editor-contents.is-wysiwyg > .cke_wysiwyg_frame {
  flex: 1 1 0;
  min-height: 180px;
  height: 0 !important;
}

.labor-question-editor-contents .labor-question-content-guide,
.labor-question-editor-fallback .labor-question-content-guide {
  flex: none;
  margin: 0;
  padding: 20px 20px 0;
  border: 0;
  background: var(--white);
  color: var(--primary);
  font-family: "Malgun Gothic", "맑은 고딕", sans-serif;
  font-size: calc(15px * var(--user-scale));
  line-height: 1.7;
}

.labor-question-content-guide[hidden] {
  display: none !important;
}

.labor-question-content-guide strong,
.labor-question-content-guide p {
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}

.labor-question-content-guide strong {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.labor-question-editor-fallback {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.labor-question-form .labor-question-editor-fallback textarea {
  display: block;
  width: 100%;
  padding: 20px;
  border: 0;
  border-radius: 0;
}

@media screen and (max-width: 767px) {
  .labor-question-form .write-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .labor-question-form .write-row > :not(label):not(.labor-question-field-label) {
    grid-column: 1;
  }
}

.education-course-status,
.education-course-type {
  gap: var(--space-8);
}

.education-course-status .lucide-icon,
.education-course-type .lucide-icon,
.education-detail-info dt .lucide-icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.education-detail-info dt {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.education-apply-dialog {
}

@media screen and (max-width: 767px) {
  .form-panel,
  .write-form {
    padding: var(--space-24);
  }

  .form-actions .btn,
  .write-buttons .btn,
  .education-apply-actions .btn {
    min-width: 0;
  }
}

.survey-response-head h3 {
  font-weight: 800;
}

.survey-status {
  min-width: 76px;
  height: 30px;
  padding: 0 var(--space-12);
  font-weight: 800;
}

.education-detail-info > div {
  min-height: 58px;
}

.education-detail-info dt,
.education-detail-info dd {
  display: flex;
  align-items: center;
  vertical-align: middle;
}

.education-detail-info dt span {
  font-weight: 800;
}

/* 화면별 보정 */
.org-box {
  font-family: var(--font-title);
}

.org-box.is-director {
  color: var(--accent-ink);
  background: var(--accent);
}

.org-box.is-team {
  font-family: var(--font-title);
}

.map-info-panel {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.map-info-name {
  font-weight: 800;
}

.program-card :is(ul, ol) {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-left: 0;
  color: var(--secondary);
  font-size: calc(16px * var(--user-scale));
  line-height: 1.58;
  text-align: left;
}

.program-card :is(ul, ol) li {
  position: relative;
  padding-left: 17px;
  word-break: keep-all;
}

/* 사업 카드의 핵심 설명은 본문보다 작아지지 않게 한다. */
.program-card .purpose-task-list > li {
  font-size: calc(18px * var(--user-scale));
}

.program-card :is(ul, ol) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.74em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

.program-card :is(ul, ol) :is(ul, ol) {
  gap: 6px;
  margin-top: 7px;
  padding-left: 2px;
  font-size: calc(15px * var(--user-scale));
}

.program-card :is(ul, ol) :is(ul, ol) li::before {
  width: 5px;
  height: 5px;
  background: var(--accent-mid);
}

.education-course-status,
.education-course-type,
.education-course-status span,
.education-course-type span {
  font-weight: 800;
}

.education-detail-info > div {
  min-height: 64px;
}

.education-detail-info dt,
.education-detail-info dd {
  min-height: 64px;
}

.board-table .subject a {
  color: var(--primary);
  font-weight: 800;
}

.board-table .tag {
  justify-content: center;
  min-width: 64px;
  font-weight: 800;
}

.board-table .btn {
  min-width: 92px;
  min-height: 38px;
  padding: 0 var(--space-16);
  font-size: calc(14px * var(--user-scale));
  font-weight: 700;
}

.board-table .btn-outline {
}

.view-title {
  color: var(--primary);
  font-weight: 800;
  line-height: 1.35;
  word-break: keep-all;
}

.view-head {
  padding-bottom: var(--space-24);
  border-bottom: 2px solid var(--primary);
}

.view-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-12);
  color: var(--secondary);
}

.labor-qna-view .view-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.labor-qna-view .labor-qna-category {
  margin: 12px 0 20px;
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.labor-qna-view .labor-qna-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.labor-qna-view .labor-qna-meta > div {
  min-width: 0;
}

.labor-qna-view .labor-qna-meta dt {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.5;
}

.labor-qna-view .labor-qna-meta dd {
  margin: 0;
  color: var(--primary);
  font-size: calc(17px * var(--user-scale));
  font-weight: 500;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 767px) {
  .labor-qna-view .labor-qna-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media screen and (max-width: 479px) {
  .labor-qna-view .labor-qna-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

.view-nav {
  overflow: hidden;
  display: grid;
  margin: var(--space-32) 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.view-nav li {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 58px;
}

.view-nav li + li {
  border-top: 1px solid var(--border);
}

.view-nav li > span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-16);
  color: var(--secondary);
  background: var(--surface-warm);
  font-weight: 800;
}

.view-nav li > a,
.view-nav li > span:not(:first-child) {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 var(--space-20);
  color: var(--primary);
  font-weight: 700;
  line-height: 1.45;
  word-break: keep-all;
}

.view-nav li > a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-nav li > a:hover,
.view-nav li > a:focus-visible {
  color: var(--accent-strong);
  background: var(--surface-bright);
}

.view-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: center;
  margin-top: var(--space-32);
}

@media screen and (max-width: 767px) {
  .view-nav li {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .view-nav li > a,
  .view-nav li > span:not(:first-child) {
    padding: 0 var(--space-16);
  }
}

.education-detail-info > div {
  grid-template-columns: 170px minmax(0, 1fr);
}

.education-detail-info dt span {
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .education-detail-info > div {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

/* 로그인 화면 안내문은 카드 중앙에 놓는다.
   위쪽 .form-help 의 text-align: left 가 뒤에 선언돼 있어 범위를 좁혀 다시 지정한다. */
.auth-layout .form-help {
  text-align: center;
}

.auth-layout .login-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--muted);
  font-size: calc(14px * var(--user-scale));
}

.auth-layout .login-help .lucide-icon {
  flex: none;
  width: 15px;
  height: 15px;
}

/* 안내 패널은 노란 채도가 주변과 떠 보인다.
   퀵바 SNS 버튼과 같은 --surface-warm 으로 낮추고 글자는 짙은 그레이로 둔다. */
.map-info-panel {
  color: var(--primary);
  background: var(--surface-warm);
}

.map-info-name {
  color: var(--primary);
  border-bottom-color: var(--border-strong);
}

.map-info-list dt {
  color: var(--secondary);
}

.map-info-list dd {
  color: var(--primary);
}

.map-info-panel .btn {
  color: var(--primary);
  background: var(--white);
  border-color: var(--border-strong);
}

.map-info-panel .btn:hover {
  background: var(--surface-bright);
}

/* 안내 패널 기관명은 헤더와 같은 로고를 쓴다. */
.map-info-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 32px;
}

/* stats-card 는 hover 로 그래프 계열을 강조할 뿐 클릭 동작이 없다.
   pointer 는 클릭 가능을 뜻하므로 텍스트 커서만 걷어낸다. */
.stats-card {
  cursor: default;
}

/* 회원 화면 정비.
   로그인과 회원가입의 폭이 같아야 한다는 요구에 따라 기본값을 720px 로 둔다.
   좁은 단일 폼이 필요하면 .is-narrow 를 붙인다. */
.auth-layout {
  width: 100%;
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

/* 회원 관련 화면은 폭을 하나로 통일한다.
   변형 클래스가 붙어 있어도 같은 폭이 되도록 함께 지정한다. */
.auth-layout.is-narrow,
.auth-layout.is-medium,
.auth-layout.is-wide,
.auth-layout.is-data {
  max-width: 720px;
}

.member-auth-layout > .content-head,
.member-auth-layout .mypage-body > .content-head {
  margin-bottom: 0;
}

.member-auth-layout:not(:has(> .join-steps)) > .content-head + :where(.form-panel, .form-error, .form-success, .sub-hero-panel),
.member-auth-layout .mypage-body > .content-head + :where(.form-panel, .form-error, .form-success, .mypage-notice, .mypage-warn, .mypage-table-scroll, .attendance-course-info, .attendance-dashboard) {
  margin-top: var(--space-32);
}

.member-auth-layout > .content-head + .form-help {
  margin-top: var(--space-32);
  margin-bottom: 0;
}

.member-auth-layout > .form-help + :where(.form-panel, .form-error, .form-success, .sub-hero-panel, div) {
  margin-top: var(--space-16);
}

.auth-layout .join-steps,
.auth-layout .join-steps li,
.auth-layout .join-steps span,
.auth-layout .join-steps .step-no,
.step-list .step-no {
  font-family: var(--font-title);
}

.auth-layout .join-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  margin: var(--space-32) 0 var(--space-24);
  padding: 0;
  list-style: none;
}

.auth-layout .join-steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 72px;
  padding: var(--space-12);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--secondary);
  font-size: calc(18px * var(--user-scale));
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.auth-layout .join-steps li.is-current {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.auth-layout .join-steps li.is-done {
  border-color: var(--accent-mid);
  color: var(--accent-ink);
  background: var(--surface-warm);
}

.auth-layout .join-steps .step-no {
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--primary);
  font-size: calc(19px * var(--user-scale));
  font-weight: 900;
}

.auth-layout .join-steps li.is-current .step-no {
  border-color: var(--accent-strong);
  background: var(--white);
  color: var(--accent-ink);
}

.auth-layout .join-steps li.is-done .step-no {
  border-color: var(--accent-mid);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.auth-layout .join-step-title,
.mypage-body .join-step-title {
  margin: 0 0 var(--space-16);
  color: var(--primary);
  font-size: calc(22px * var(--user-scale));
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

.auth-layout .join-step:not([hidden]) {
  display: block;
}

.auth-layout .join-step + .join-step-title,
.auth-layout .join-step-title:not(:first-child),
.mypage-body .join-step-title:not(:first-child) {
  margin-top: var(--space-32);
}

.auth-layout .agreement-list {
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.auth-layout .agreement-list label,
.auth-layout .agreement-list .agree-all {
  align-items: center;
  gap: var(--space-12);
  min-height: 72px;
  padding: var(--space-16) var(--space-20);
  border-color: var(--border);
  background: var(--white);
}

.auth-layout .agreement-list input[type="checkbox"] {
  flex: none;
  align-self: center;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-xs);
  appearance: none;
  background: var(--white);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.auth-layout .agreement-list input[type="checkbox"]::before {
  content: "";
  width: 9px;
  height: 5px;
  border-bottom: 2px solid var(--white);
  border-left: 2px solid var(--white);
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.8);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.auth-layout .agreement-list input[type="checkbox"]:checked {
  border-color: var(--accent-ink);
  background: var(--accent-ink);
}

.auth-layout .agreement-list input[type="checkbox"]:checked::before {
  opacity: 1;
  transform: translateY(-1px) rotate(-45deg) scale(1);
}

.auth-layout .agreement-list input[type="checkbox"]:focus-visible {
  border-color: var(--accent-strong);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.auth-layout .agreement-list small {
  display: inline-block;
  margin-top: 3px;
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
  font-weight: 500;
  line-height: 1.55;
}

.auth-layout .agreement-list small a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 2px;
  padding: 0 var(--space-8);
  color: var(--accent-ink);
  font-size: calc(12px * var(--user-scale));
  font-weight: 600;
  line-height: 1.3;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.auth-layout .agreement-list small a:hover,
.auth-layout .agreement-list small a:focus-visible {
  color: var(--primary);
}
.agreement-modal[hidden] {
  display: none;
}

.agreement-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
}

.agreement-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(30, 26, 20, 0.45);
  cursor: pointer;
}

.agreement-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 760px);
  max-height: min(760px, calc(100vh - 80px));
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.agreement-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-24) var(--space-16);
  border-bottom: 1px solid var(--border);
}

.agreement-modal-head h4 {
  margin: 0;
  color: var(--primary);
  font-size: calc(22px * var(--user-scale));
  font-weight: 800;
  line-height: 1.35;
}

.agreement-modal-close {
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-warm);
  color: var(--primary);
  font-size: calc(24px * var(--user-scale));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.agreement-modal-close:hover,
.agreement-modal-close:focus-visible {
  border-color: var(--accent-strong);
  color: var(--accent-ink);
}

.agreement-modal-body {
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  padding: var(--space-24);
  color: var(--primary);
  line-height: 1.75;
}

.agreement-modal-body .policy-block {
  display: grid;
  gap: var(--space-20);
}

.agreement-modal-body .policy-section h4 {
  margin-bottom: var(--space-8);
  color: var(--primary);
  font-size: calc(19px * var(--user-scale));
  font-weight: 800;
}

.agreement-modal-body .policy-section p,
.agreement-modal-body .policy-section li {
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  line-height: 1.75;
}

.agreement-modal-body .policy-section ul {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding-left: var(--space-20);
}

.agreement-modal-body .btn {
  margin-top: var(--space-16);
}

.auth-layout .type-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin: var(--space-16) 0 var(--space-32);
}

.auth-layout .type-choice label,
.mypage-body .type-choice label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 112px;
  padding: var(--space-20);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--white);
  box-sizing: border-box;
  color: var(--primary);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}

.auth-layout .type-choice input[type="radio"],
.mypage-body .type-choice input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.auth-layout .type-choice .lucide-icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--accent-strong);
}

.auth-layout .type-choice label:has(input[type="radio"]:checked),
.mypage-body .type-choice label:has(input[type="radio"]:checked) {
  border-width: 2px;
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.auth-layout .type-choice .type-choice-text,
.mypage-body .type-choice .type-choice-text {
  font-weight: 900;
}

.auth-layout .type-choice label:has(input[type="radio"]:focus-visible),
.mypage-body .type-choice label:has(input[type="radio"]:focus-visible),
.auth-links a:focus-visible,
.mypage-tabs a:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}

.join-fields {
  display: grid;
  gap: var(--space-24);
}

.join-field {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: var(--space-8) var(--space-16);
  align-items: start;
}

.join-field > label,
.join-field > .mypage-label {
  padding-top: 13px;
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 800;
  line-height: 1.45;
}

.join-input {
  min-width: 0;
}

.auth-layout .join-input input,
.auth-layout .join-input select,
.auth-layout .join-input textarea {
  width: 100%;
}

.join-input.has-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-8);
}

.join-note,
.join-hint {
  grid-column: 2;
  color: var(--secondary);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.55;
}

.auth-layout .join-note:has(.pw-strength) {
  display: grid;
  gap: var(--space-8);
  width: 100%;
}

.auth-layout .pw-strength {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.auth-layout .pw-strength span {
  display: block;
  min-width: 0;
  height: 8px;
  border-radius: 999px;
  background: var(--border-strong);
}

.auth-layout .pw-strength span.is-level-1,
.auth-layout .pw-strength span.is-level-2 {
  background: var(--surface-coral);
}

.auth-layout .pw-strength span.is-level-3 {
  background: var(--accent-mid);
}

.auth-layout .pw-strength span.is-level-4 {
  background: var(--accent-strong);
}

.auth-layout .form-actions .btn,
.mypage-body .form-actions .btn {
  min-height: 48px;
}

.auth-layout .login-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
}

.auth-layout .login-actions .btn {
  width: 100%;
}

.auth-layout .mypage-actions {
  display: grid;
  gap: var(--space-12);
}

.auth-layout .mypage-actions.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.auth-layout .mypage-actions.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 버튼이 하나인 화면도 폭을 채워 다른 화면과 리듬을 맞춘다. */
.auth-layout .mypage-actions.is-one {
  grid-template-columns: minmax(0, 1fr);
}

.auth-layout .mypage-actions .btn {
  width: 100%;
  min-width: 0;
}

.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
  font-weight: 600;
}

.auth-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-8);
  color: var(--secondary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.auth-links a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.auth-layout.mypage-layout {
  display: block;
  max-width: 720px;
}

.auth-layout.mypage-layout.is-data {
  max-width: 720px;
}

/* 교육이력·출석현황은 표가 들어가 720px 안에서는 좁다.
   회원 화면 중 이 둘만 본문 기본 폭을 그대로 쓴다. */
.auth-layout.is-full,
.auth-layout.mypage-layout.is-full,
.auth-layout.mypage-layout.is-data.is-full {
  max-width: none;
}


.mypage-body .content-head {
  margin-bottom: var(--space-24);
}

.mypage-body .form-panel,
.mypage-body .mypage-warn,
.mypage-body .mypage-rules,
.mypage-body .mypage-table-scroll,
.mypage-body .attendance-course-info,
.mypage-body .attendance-dashboard {
  margin-top: var(--space-20);
}

@media screen and (max-width: 767px) {
  .auth-layout.is-medium,
  .auth-layout.is-wide,
  .auth-layout.is-data,
  .auth-layout.mypage-layout,
  .auth-layout.mypage-layout.is-data {
    max-width: 100%;
  }

  .auth-layout .join-steps {
    gap: var(--space-8);
  }

  .auth-layout .join-steps li {
    flex-direction: column;
    min-height: 86px;
    padding: var(--space-12) var(--space-8);
    font-size: calc(16px * var(--user-scale));
  }

  .auth-layout .join-steps .step-no {
    width: 30px;
    height: 30px;
    font-size: calc(17px * var(--user-scale));
  }

  .auth-layout .type-choice,
  .join-field,
  .join-input.has-button {
    grid-template-columns: 1fr;
  }

  .auth-layout .login-actions,
  .auth-layout .mypage-actions.is-three,
  .auth-layout .mypage-actions.is-two {
    grid-template-columns: 1fr;
  }

  .join-note,
  .join-hint {
    grid-column: 1;
  }
}

/* 안내문 안의 강조어는 본문과 같은 서체로 두고 굵기로만 강조한다.
   경기도체는 제목용이라 문장 중간에 섞이면 어색하다.
   common.css 의 body .sub-content :is(..., strong, ...) 가 특정도 (0,2,1) 로
   이기므로 같은 형태로 선언한다. */
body .sub-content .mypage-notice strong {
  font-family: var(--font-base);
  font-weight: 700;
}

/* 안내문은 아이콘과 문구를 한 줄에서 위쪽 기준으로 맞춘다.
   문구가 여러 줄이어도 아이콘이 첫 줄에 붙어 있게 한다. */
.join-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.join-hint .lucide-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 0.2em;
}

.gallery-card strong {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

/* 배경 톤이 옅어져 흰 카드가 묻힌다. 테두리로 경계를 만든다. */
.education-my-links a {
  border: 1px solid var(--border);
}

.education-my-links a:hover,
.education-my-links a:focus-visible {
  border-color: var(--accent);
}

/* 배경 톤이 옅어져 면이 배경에 묻힌다. 테두리로 경계를 만든다. */
.contact-cta {
  border: 1px solid var(--border);
}

.map-info-panel {
  border: 1px solid var(--border-strong);
}

.page-purpose {
  border: 1px solid rgba(242, 84, 45, 0.35);
}

.page-purpose.is-icon-left {
  border-color: var(--border);
}

/* 지도와 맞붙는 쪽은 라운드를 죽여 두 면이 하나로 이어지게 한다.
   1024px 이하에서는 지도 아래로 쌓이므로 맞붙는 쪽이 위쪽으로 바뀐다. */
.map-info-panel {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

@media screen and (max-width: 1024px) {
  .map-info-panel {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

/* 배경 톤이 옅어져 흰 카드가 묻힌다. 테두리로 경계를 만든다. */
.stat-strip li {
  border: 1px solid var(--border);
}

/* 노무법인 전용 Q&A 업무 화면 */
.labor-work-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding: 24px 28px;
  border: 1px solid #ead7aa;
  border-radius: var(--radius-lg);
  background: #fffaf0;
}

.labor-work-entry strong { display: block; margin-bottom: 6px; color: var(--primary); font-size: calc(19px * var(--user-scale)); }
.labor-work-entry p { color: var(--muted); line-height: 1.55; }
.labor-work-entry .btn { flex: none; }
.labor-work-page { display: block; }

.labor-work-guide {
  margin-bottom: 28px;
  padding: 20px 24px;
  border: 1px solid #ead7aa;
  border-radius: var(--radius-md);
  background: #fffaf0;
}

.labor-work-guide strong { display: block; margin-bottom: 5px; color: var(--primary); font-size: calc(17px * var(--user-scale)); }
.labor-work-guide p,
.labor-work-answer-note { color: var(--muted); line-height: 1.65; word-break: keep-all; }
.labor-work-guide p { margin: 0; font-size: calc(14px * var(--user-scale)); white-space: nowrap; }

.labor-work-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.labor-work-toolbar strong { color: var(--primary); }
.labor-work-search { display: flex; gap: 7px; width: min(100%, 520px); }
.labor-work-search select {
  flex: 0 0 138px;
  height: 38px;
  padding: 0 30px 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  background-color: var(--white);
  font-size: calc(14px * var(--user-scale));
}
.labor-work-search input {
  min-width: 0;
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: calc(14px * var(--user-scale));
}

.labor-work-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 72px;
  height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  cursor: pointer;
}

.labor-work-search button:hover { background: var(--accent-pale); }
.labor-work-search button .lucide-icon { width: 15px; height: 15px; }

.labor-work-table .subject a { color: var(--text); text-decoration: none; }
.labor-work-table .subject a:hover { color: var(--primary); text-decoration: underline; }
.mypage-badge.is-admin-complete {
  color: var(--green);
  background: var(--green-soft);
}
.mypage-badge.is-other {
  color: #8c2f16;
  background: #ffd7c9;
}
.labor-work-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.labor-work-question,
.labor-work-answer-panel {
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.labor-work-question > header,
.labor-work-answer-head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}

.labor-work-question-label { margin-bottom: 7px; color: var(--primary); font-size: calc(15px * var(--user-scale)); font-weight: 800; }
.labor-work-question h4,
.labor-work-answer-head h4 { font-size: calc(22px * var(--user-scale)); line-height: 1.45; }

.labor-work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin-top: 15px;
  color: var(--muted);
  font-size: calc(14px * var(--user-scale));
}

.labor-work-meta div { display: flex; gap: 9px; }
.labor-work-meta dt { font-weight: 700; }
.labor-work-question-content,
.labor-work-readonly-answer { min-height: 180px; padding: 30px; line-height: 1.8; word-break: break-word; }
.labor-work-answer-panel form,
.labor-work-answer-panel > div:not(.labor-work-answer-head) { padding: 28px; }
.labor-work-answer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.labor-work-answer-head small { color: var(--muted); }

.labor-work-answer-panel textarea {
  width: 100%;
  min-height: 360px;
  padding: 18px;
  border: 1px solid var(--border-strong);
  resize: vertical;
}
.labor-work-file-editor {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.labor-work-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.labor-work-file-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: calc(15px * var(--user-scale));
}
.labor-work-file-head strong .lucide-icon { width: 18px; height: 18px; color: var(--point); }
.labor-work-file-head > span {
  min-width: 42px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: var(--bg-2);
  font-size: calc(12px * var(--user-scale));
  font-weight: 700;
  text-align: center;
}
.labor-work-existing-files,
.labor-work-selected-files {
  display: grid;
  gap: 7px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.labor-work-selected-files[hidden] { display: none; }
.labor-work-existing-files li,
.labor-work-selected-files li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e2e6ea;
  border-radius: 8px;
  background: #fafbfc;
}
.labor-work-file-download {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.labor-work-file-download:hover { color: var(--point-strong); }
.labor-work-file-remove { flex: 0 0 auto; cursor: pointer; }
.labor-work-file-remove input { position: absolute; opacity: 0; pointer-events: none; }
.labor-work-file-remove span,
.labor-work-selected-file-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: var(--white);
  font-size: calc(12px * var(--user-scale));
  font-weight: 700;
  cursor: pointer;
}
.labor-work-file-remove input:checked + span {
  border-color: #d99a8a;
  color: #8c2f16;
  background: var(--surface-coral);
}
.labor-work-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.labor-work-file-picker {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 11px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: #fafbfc;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.labor-work-file-picker:hover,
.labor-work-file-upload.is-dragover .labor-work-file-picker,
.labor-work-file-input:focus-visible + .labor-work-file-picker {
  border-color: var(--accent-strong);
  background: var(--surface-warm);
}
.labor-work-file-picker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.labor-work-file-picker-icon .lucide-icon { width: 20px; height: 20px; }
.labor-work-file-picker-copy { display: grid; gap: 3px; min-width: 0; }
.labor-work-file-picker-copy strong { color: var(--primary); font-size: calc(14px * var(--user-scale)); }
.labor-work-file-picker-copy small { color: var(--muted); font-size: calc(12px * var(--user-scale)); font-weight: 500; }
.labor-work-file-picker-button {
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--secondary);
  background: var(--white);
  font-size: calc(12px * var(--user-scale));
  font-weight: 700;
}
.labor-work-selected-files { margin-top: 8px; }
.labor-work-selected-files .labor-qna-file-info { flex: 1 1 auto; }
.labor-work-answer-panel .labor-qna-files { margin: 18px 0 0; }

.labor-work-answer-note { margin-top: 14px; font-size: calc(14px * var(--user-scale)); }
.labor-work-answer-note.is-complete { color: #2e5127; }
.labor-work-actions { justify-content: flex-end; margin-top: 24px; }
.labor-work-message-action { display: flex; align-items: center; justify-content: center; margin-top: 18px; }
.labor-work-message-action + .labor-work-answer-panel { margin-top: 18px; }
.labor-work-list-action { justify-content: center; margin-top: 24px; }

.labor-work-detail-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.labor-message-open-button {
  min-height: 34px;
  padding: 0 14px;
  font-size: calc(13px * var(--user-scale));
}

.labor-message-dialog {
  width: min(560px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: var(--text);
  background: var(--white);
  box-shadow: 0 24px 70px rgba(22, 31, 39, 0.28);
}

.labor-message-dialog::backdrop {
  background: rgba(22, 31, 39, 0.55);
}

.labor-message-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--border);
}

.labor-message-dialog-head h3 { margin-top: 4px; font-size: calc(21px * var(--user-scale)); }
.labor-message-dialog-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--secondary);
  background: var(--white);
  font-size: 24px;
  line-height: 1;
}
.labor-message-dialog-body {
  min-height: 150px;
  max-height: 45vh;
  padding: 26px;
  overflow-y: auto;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}
.labor-message-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 26px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

@media screen and (max-width: 767px) {
  .labor-work-entry,
  .labor-work-toolbar,
  .labor-work-detail-head,
  .labor-work-answer-head { align-items: stretch; flex-direction: column; }
  .labor-work-entry .btn,
  .labor-work-search { width: 100%; }
  .labor-work-guide p { white-space: normal; }
  .labor-work-search { flex-wrap: wrap; }
  .labor-work-search select { flex: 1 1 130px; }
  .labor-work-search input { flex: 1 1 180px; }
  .labor-work-file-picker { grid-template-columns: 38px minmax(0, 1fr); }
  .labor-work-file-picker-button { grid-column: 1 / -1; width: 100%; }
  .labor-work-question > header,
  .labor-work-answer-head,
  .labor-work-question-content,
  .labor-work-readonly-answer,
  .labor-work-answer-panel form,
  .labor-work-answer-panel > div:not(.labor-work-answer-head) { padding: 20px; }
  .labor-work-actions { display: grid; grid-template-columns: 1fr; }
  .labor-work-actions .btn { width: 100%; }
  .labor-work-message-action .btn,
  .labor-work-list-action .btn { width: 100%; }
  .labor-work-detail-controls { align-items: flex-start; flex-direction: column; }
  .labor-message-dialog-head,
  .labor-message-dialog-body,
  .labor-message-dialog-foot { padding-left: 20px; padding-right: 20px; }
  .labor-message-dialog-foot { display: grid; grid-template-columns: 1fr; }
  .labor-message-dialog-foot .btn { width: 100%; }
}

/* ===== 내 기관 제출 현황 (SP-19) ===== */
/* ⚠ 반응형은 반드시 @media screen — @media (max-width:) 로 쓰면 인쇄 시 A4 폭으로 평가돼 모바일로 출력된다 */
/* 월을 가로로 배치해 세로 높이를 표 개수만큼만 차지하게 한다(입력 폼이 스크롤 밑으로 밀리지 않도록) */
.si-status { padding: var(--space-24); }
.si-status > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  list-style: none;
}
.si-status > summary::-webkit-details-marker { display: none; }
.si-status > summary::before {
  content: "▸";
  color: var(--accent-strong);
  transition: transform .15s ease;
}
.si-status[open] > summary::before { content: "▾"; }
.si-status > summary b { font-weight: 800; font-size: 1.0625em; }
/* 범례는 표에 실제로 찍히는 기호를 그대로 보여준다.
   "O = 저장됨 · · = 미제출" 은 구분자와 미제출 기호가 같은 글자라 읽히지 않았다. */
.si-status-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--muted);
  font-size: 0.8125em;
}
.si-status-key { display: inline-flex; align-items: center; gap: 4px; }
.si-status-key.is-done { color: var(--green); font-weight: 700; }
.si-status-key.is-none { color: var(--muted); }

/* 연도 선택 — 브라우저 기본 모양이라 화면 톤과 겉돌았다.
   다른 화면의 선택 상자(.labor-work-search select)와 같은 규칙을 쓴다. */
/* 모양은 common.css 의 공용 규칙이 갖는다(메인 통계 선택 상자와 같은 규칙). */
.si-status > summary select { margin-left: auto; }

/* 감싸는 스크롤 컨테이너를 두지 않는다 — 13칸(구분+12개월)이 항상 카드 폭 안에 들어오게 고정 레이아웃으로 짠다.
   격자선을 사방에 두르면 칸이 좁아 답답해 보인다. 바깥은 한 겹으로 감싸 모서리를 둥글리고
   안쪽은 아래·오른쪽 선만 남겨 줄만 구분되게 한다. */
.si-status-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 0.8125em;
  margin-top: var(--space-16);
}
.si-status-table th,
.si-status-table td {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: var(--space-8) 2px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-status-table th:last-child,
.si-status-table td:last-child { border-right: 0; }
.si-status-table tbody tr:last-child th,
.si-status-table tbody tr:last-child td { border-bottom: 0; }

/* 머리글은 본문 기호(O·)보다 한 단계 크게 — 무엇을 읽는 표인지 먼저 들어와야 한다 */
.si-status-table th { font-size: 1.077em; }
.si-status-table thead th { background: var(--bg-2); font-weight: 700; }
.si-status-table th.si-status-row {
  background: var(--bg-2);
  text-align: left;
  width: 26%;
  padding-left: var(--space-12);
  font-weight: 600;
  white-space: nowrap;
}
.si-status-table td.is-done { color: var(--green); font-weight: 700; }
.si-status-table td.is-none { color: var(--muted); }

@media screen and (max-width: 767px) {
  /* 좁은 화면에서는 글자를 줄이고 구분 칸을 넓게 — 그래도 가로 스크롤은 만들지 않는다 */
  .si-status-table { font-size: 0.75em; }
  .si-status-table th,
  .si-status-table td { padding: var(--space-8) 1px; }
  .si-status-table th.si-status-row { width: 32%; padding-left: var(--space-8); }
  .si-status > summary select { margin-left: 0; }
}

/* ─────────────────────────────────────────────
   위치 표시줄 — 현재 1뎁스 (768px 이상)

   홈 옆에는 현재 선택된 1뎁스만 표시한다.
   좁은 화면에서는 메뉴 이동이 가능한 기존 드롭다운을 그대로 쓴다.
   ───────────────────────────────────────────── */
.loc-tops {
  display: none;
}

@media screen and (min-width: 768px) {
  /* 가로 줄을 쓰는 구간에서는 드롭다운을 감춘다. 둘이 같은 링크를 담고 있어
     동시에 보이면 같은 메뉴가 두 번 나온다. */
  .location-bar .loc-item {
    display: none;
  }

  .loc-tops {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    min-width: 0;
  }

  /* 기존 활성 메뉴의 높이·색상·테두리는 유지하고 너비만 고정한다. */
  .loc-top {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    height: 62px;
    padding: 0 10px;
    border-left: 1px solid var(--border);
    /* 비활성 글자색의 바닥은 4.5:1 이다(웹접근성 2.1, COR-001).
       #6f6f6f 가 흰 바탕 5.0:1 로 아슬아슬한 하한이라 더 옅게 두지 않는다.
       대신 굵기를 400 으로 낮추고 활성 쪽을 강하게 만들어 간격을 벌린다. */
    color: #6f6f6f;
    font-size: calc(18px * var(--user-scale));
    font-weight: 500;
    white-space: nowrap;
  }

  .loc-top:last-child {
    border-right: 1px solid var(--border);
  }

  .loc-top:hover,
  .loc-top:focus-visible {
    background: #fffbfa;
    color: var(--primary);
    font-weight: 700;
  }

  /* 현재 위치. 아래 띠의 is-active 와 같은 코랄 계열로 맞춘다. */
  .loc-top.is-active {
    position: relative;
    background: var(--surface-pink);
    color: var(--point-ink);
    font-weight: 800;
  }

  .loc-top.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--point-strong);
  }

  /* 현재 1뎁스에 속한 2뎁스 띠만 표시한다. */
  .loc-nav .local-nav-band {
    display: none;
  }

  .loc-nav .local-nav-band.is-current {
    display: block;
  }
}

/* PC 에서 위치 표시줄 글자를 띠 한가운데보다 2px 위로 올린다. 상단 메뉴와 같은 방식으로
   아래 여백만 늘려 글자 칸을 위로 민다. 현재 위치 밑줄은 칸 바깥에 붙어 있어 그대로다.
   768px 이상에서 쓰는 가로 줄(.loc-top)이 대상이고, 767px 이하 드롭다운은 손대지 않는다. */
@media screen and (min-width: 1025px) {
  .location-bar .loc-top {
    padding-bottom: 4px;
  }
}

/* 목적 상자 안의 각주 한 줄. 본문(21px)과 한 단 차이인 보조 크기를 쓴다.
   16px 까지 떨어뜨리면 같은 상자 안에서 크기 차가 너무 벌어져 어긋나 보인다. */
.page-purpose .page-purpose-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-12);
  font-size: var(--user-small-size);
  line-height: 1.65;
  color: var(--muted);
}

/* 안내 문장 앞 느낌표. 신청 절차 안내와 같은 배지를 한 단 작게 쓴다 */
.page-purpose .note-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-24);
  height: var(--space-24);
  margin-top: 2px;
  border-radius: var(--radius-pill);
  color: var(--white);
  background: var(--point);
  font-size: calc(15px * var(--user-scale));
  font-weight: 800;
}

/* 앱 설치 QR. 왼쪽에 QR, 오른쪽에 이름을 두는 가로 카드다.
   QR 을 크게 놓고 아래에 이름을 달면 두 칸만으로도 화면이 답답해 보인다. */
.app-qr-group {
  display: grid;
  /* 카드를 본문 폭 전체로 늘리면 내용은 300px 남짓이라 오른쪽이 빈다.
     내용에 맞는 폭으로 잡고 가운데로 모은다. */
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  gap: var(--space-24);
  margin-top: calc(var(--space-80) + var(--space-20));
  padding-top: calc(var(--space-80) + var(--space-20));
  border-top: 1px solid var(--border);
}

.app-qr-card {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--primary);
  text-decoration: none;
}

.app-qr-card:hover {
  border-color: var(--border-strong);
  background: var(--surface-bright);
}

.app-qr-card img {
  flex: none;
  width: 120px;
  height: 120px;
}

.app-qr-card span {
  display: grid;
  gap: var(--space-4);
  color: var(--secondary);
  font-size: calc(18px * var(--user-scale));
  line-height: 1.4;
}

.app-qr-card em {
  color: var(--accent-ink);
  font-family: var(--font-title);
  font-size: calc(16px * var(--user-scale));
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-qr-card strong {
  color: var(--primary);
  font-family: var(--font-title);
  font-size: calc(24px * var(--user-scale));
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .app-qr-group {
    grid-template-columns: minmax(0, 340px);
    gap: var(--space-16);
  }

  .app-qr-card {
    gap: var(--space-20);
    padding: var(--space-20);
  }

  .app-qr-card img {
    width: 96px;
    height: 96px;
  }

  .app-qr-card strong {
    font-size: calc(21px * var(--user-scale));
  }
}

/* ── 좁은 화면 보완 ──────────────────────────────────────────────
   가로로 늘어놓는 부품들에 767px 대응이 빠져 있어 카드가 한 줄에 몰려
   글자가 겹치거나 잘렸다. 좁은 화면에서는 모두 한 열로 쌓는다. */
@media screen and (max-width: 767px) {
  .program-grid.is-full-width {
    flex-wrap: wrap;
  }

  .program-grid.is-full-width .program-card {
    flex: 0 0 100%;
  }

  .program-grid.is-two-column {
    grid-template-columns: 1fr;
  }

  .purpose-values.is-card-aligned > ul {
    grid-template-columns: 1fr;
  }

  .org-teams {
    grid-template-columns: 1fr;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .flow-diagram {
    flex-wrap: wrap;
  }

  .flow-node {
    flex: 0 0 100%;
  }

  .flow-arrow {
    display: none;
  }

  /* 법적근거처럼 왼쪽 라벨·오른쪽 내용인 카드는 라벨을 위로 올린다 */
  .purpose-legal .feature-list.is-business .feature-item {
    grid-template-columns: 1fr;
  }

  .purpose-legal .feature-item-body p {
    word-break: keep-all;
  }

  /* 괄호 안 기관·조문 이름은 한 덩어리로 움직인다. 중간에서 끊기면 읽기 어렵다 */
  .purpose-legal .feature-item-body span {
    display: inline-block;
    white-space: nowrap;
  }

  /* 서비스 종류 카드 머리: 아이콘과 제목을 세로 중앙으로 맞춘다 */
  .service-type-head {
    align-items: center;
  }

  /* 로그인 안내 한 줄. 좁은 화면에서 가운데 정렬하면 두 줄로 접힐 때
     줄 시작이 들쭉날쭉해 읽기 어렵다. 왼쪽에 맞춘다. */
  .auth-layout .login-help {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .auth-layout .login-help .lucide-icon {
    margin-top: 3px;
  }

  .service-type-card.is-linked {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}

/* 아이돌봄사 화면의 안내 QR 넉 장. 한 줄에 나란히 두고 QR 을 위, 이름을 아래에 둔다.
   가로 카드로 두면 넉 장이 한 줄에 들어가지 않는다. */
.qr-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
  margin-top: var(--space-40);
}

.qr-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-16);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-decoration: none;
}

.qr-card:hover {
  border-color: var(--accent);
  background: var(--surface-bright);
}

.qr-card img,


.qr-card > span:last-child {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  text-align: left;
}

.qr-card em {
  color: var(--accent-ink);
  font-size: calc(15px * var(--user-scale));
  font-style: normal;
  font-weight: 700;
}

.qr-card strong {
  color: var(--primary);
  font-family: var(--font-title);
  font-size: calc(19px * var(--user-scale));
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
}


@media screen and (max-width: 1024px) {
  .qr-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .qr-row {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

}

@media screen and (max-width: 767px) {
  /* 위치 표시줄은 글자 크기 조절 규칙(--user-label-size)이 덮고 있어
     좁은 화면에서도 20px 로 나온다. 그래서 2뎁스가 옆으로 잘렸다.
     같은 특이도로 되받아 좁은 화면 크기를 되돌린다.
     되돌리되 고정값으로 박지는 않는다 — 배율은 살려 조절이 계속 먹게 한다. */
  body.font-size-small #main .loc-item summary,
  body.font-size-medium #main .loc-item summary,
  body.font-size-large #main .loc-item summary {
    font-size: calc(15px * var(--user-scale));
  }

  body.font-size-small #main .loc-item > ul a,
  body.font-size-medium #main .loc-item > ul a,
  body.font-size-large #main .loc-item > ul a {
    font-size: calc(15px * var(--user-scale));
  }

  .loc-top {
    min-width: 0;
  }

  /* 버튼 두 개가 세로로 쌓이면 폭이 제각각이라 어긋나 보인다.
     한 줄에 나란히 두고 폭을 같게 맞춘다. */
  .page-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .page-cta > :only-child {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .page-cta .btn {
    width: 100%;
    min-width: 0;
    padding: 0 var(--space-8);
    /* 좁은 칸에 긴 이름이 들어가야 한다. 줄바꿈 대신 자간을 조여 한 줄로 앉힌다 */
    font-size: calc(15px * var(--user-scale));
    letter-spacing: -0.06em;
    white-space: nowrap;
  }

  .service-process-note-icon {
    margin-top: 2px;
  }
}

/* 메인 비주얼과 같은 코랄 글자 + 앰버 밑줄 강조 */
.program-card-heading-mark {
  position: relative;
  z-index: 0;
  color: var(--point-strong);
  background: none;
}

.program-card-heading-mark::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 0.08em;
  left: -2px;
  z-index: -1;
  height: 0.28em;
  border-radius: var(--radius-pill);
  background: rgba(255, 194, 60, 0.42);
}

/* 수급데이터 조회 조건: 데이터 입력과 보고 서식에서 같은 규격을 사용한다. */
.supply-input form.report-filter,
.supply-report .report-filter form {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin: 0;
}

.supply-input form.report-filter,
.supply-report .report-filter {
  padding: var(--space-16);
}

.supply-input .report-filter label,
.supply-report .report-filter label {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.supply-input .report-filter select,
.supply-report .report-filter select,
.supply-report .report-filter input[type="month"] {
  height: 48px;
  min-height: 48px;
  padding: 0 var(--space-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
}

.supply-input .report-filter select,
.supply-report .report-filter select {
  min-width: 280px;
}

.supply-report .report-filter input[type="month"] {
  width: 190px;
}

.supply-input .report-filter select:focus,
.supply-report .report-filter select:focus,
.supply-report .report-filter input[type="month"]:focus {
  border-color: var(--accent-strong);
  outline: none;
}

.supply-report .report-filter .btn-sm {
  height: 48px;
  min-height: 48px;
  padding: 0 var(--space-20);
  font-size: 1em;
}

.supply-input .report-filter .si-help,
.supply-report .report-filter .si-help {
  margin: 0 0 0 var(--space-4);
}

@media screen and (max-width: 767px) {
  .supply-input form.report-filter,
  .supply-report .report-filter form {
    align-items: stretch;
  }

  .supply-input .report-filter label,
  .supply-report .report-filter label,
  .supply-input .report-filter select,
  .supply-report .report-filter select,
  .supply-report .report-filter input[type="month"],
  .supply-report .report-filter .btn-sm {
    width: 100%;
    min-width: 0;
  }

  .supply-input .report-filter .si-help,
  .supply-report .report-filter .si-help {
    flex-basis: 100%;
    margin-left: 0;
  }
}