:root {
  --color-ink: #09090b;
  --color-muted: #71717b;
  --color-line: rgba(113, 113, 123, 0.22);
  --color-soft: #f4f4f5;
  --color-green: #6eba2c;
  --color-green-dark: #4f9e23;
  --color-blue: #337fd1;
  --color-red: #dc4f5f;
  --container: 1520px;
  --header-height: 100px;
  /* 모바일 하단 고정 바의 높이. 바 자신과 문서 아래 여백이 같은 값을 봐야 해서
     따로 적지 않고 여기 한 군데서 관리한다(--search-band-height와 같은 방식). */
  --cta-bar-height: 61px;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 5px rgba(0, 0, 0, 0.03), 0 2px 10px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 16px 34px rgba(0, 0, 0, 0.12);
  /* 카드형 게시판 썸네일의 "이미지 없음" 상태(원고 그대로). 바탕을 #f4f4f5로 채우고
     가운데에 Empty data 아이콘을 놓는다. 아이콘은 상자 높이의 37.5%로 잡되 120px에서
     멈춘다 — 원고 카드(썸네일 높이 320px)에서 정확히 120px이 되고, 상자가 낮은 모바일
     카드에서는 같은 비율로 작아져 원고와 같은 여백감이 남는다. cover로 늘이면 상자가
     클수록 아이콘이 같이 커져 원고와 달라진다. 세로만 정하고 가로는 auto라 아이콘
     비율은 그대로다. 특정 카드만 달리 가려면 --thumb-default-size만 다시 주면 된다.

     전에 쓰던 program-placeholder.png는 바탕이 비어 있는(체크무늬로 보이는) 투명
     PNG라 카드 안이 뚫린 것처럼 보였다. 여기서는 불투명 색을 같이 깔아 막는다.
     등록된 사진이 없으면 이 배경이 그대로 보이고, <img>로 넣은 사진이 로딩에
     실패하면 site.js가 그 <img>를 감춰 다시 이 배경이 보이게 한다. */
  --thumb-default-size: min(120px, 37.5%);
  --thumb-default: url("../images/ui/thumb-default.svg") center / auto var(--thumb-default-size) no-repeat, #f4f4f5;
}

/* ── 정보 항목 아이콘 ─────────────────────────────────────────────
   전에는 dl 안 순서(:nth-child)로 아이콘을 정했다. 그래서 항목을 하나 빼거나
   추가하면 "운영 시간" 앞에 집 아이콘이 붙는 식으로 전부 한 칸씩 밀렸다.
   지금은 항목마다 붙인 meta-* 클래스가 --meta-icon만 정하고, 각 화면의
   dt::before는 그 변수를 읽는다. 순서를 바꿔도 아이콘은 따라오지 않는다.

   항목을 새로 추가할 때: 아래에 클래스 한 줄을 더하고, 마크업의 항목 <div>에
   그 클래스를 적는다. dt::before 규칙은 건드릴 필요가 없다.
   클래스를 빠뜨린 항목은 --meta-icon-fallback(각 화면의 기본 아이콘)으로 그려진다. */
.meta-period,
.meta-date {
  --meta-icon: url("../images/ui/life-icon-1.png"); /* 달력 */
}

.meta-place {
  --meta-icon: url("../images/ui/dt-icon-4.png"); /* 위치 */
}

.meta-time {
  --meta-icon: url("../images/ui/dt-icon-3.png"); /* 시계 */
}

.meta-age {
  --meta-icon: url("../images/ui/dt-icon-2.png"); /* 대상 연령 */
}

.meta-people,
.meta-org {
  --meta-icon: url("../images/ui/dt-icon-1.png"); /* 인원 · 연계기관 */
}

/* 참가비 항목은 퍼블리싱 마크업에는 없다(개발서버에서 붙인다). 항목 <div>에
   meta-fee만 적으면 이 줄이 아이콘을 대준다. 클래스를 빠뜨리면 집 아이콘
   (--meta-icon-fallback)이 조용히 붙으니 주의. 원본은 48px이라 24px 자리에
   contain으로 줄어들면서 고해상도 화면에서도 또렷하다. */
.meta-fee {
  --meta-icon: url("../images/ui/dt-icon-fee.png"); /* 참가비 · 이용료 */
}

/* 돌봄MAP 상세 카드의 표 제목이 쓴다. 원고에서 받은 SVG라 24px 자리에 그대로 맞고
   색(#6EBA2C)도 그림 안에 들어 있다. */
.meta-class {
  --meta-icon: url("../images/ui/dt-icon-class.svg"); /* 학급 및 학생 수 */
}

.meta-staff {
  --meta-icon: url("../images/ui/dt-icon-staff.svg"); /* 교직원 현황 */
}

.container {
  width: min(var(--container), calc(100% - 400px));
}

.site-header {
  position: relative;
  height: var(--header-height);
  background: #fff;
  border-bottom: 0;
  backdrop-filter: none;
}

/* 메인은 히어로 사진이 화면 꼭대기까지 올라와 헤더가 그 위에 얹힌다. 사진 위라
   글자와 아이콘을 흰색으로 뒤집는다.
   사이트맵(햄버거)도 제 안에 .site-header를 한 벌 더 갖고 있는데 그쪽은 흰 바탕이라
   같이 뒤집으면 글자·아이콘이 흰색이 되어 보이지 않는다. body 직계 헤더만 집는다. */
body.home-page > .site-header {
  z-index: 2;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

body.home-page > .site-header .header-inner .gnb-link,
body.home-page > .site-header .header-inner .utility-link,
body.home-page > .site-header .header-inner .icon-button {
  color: #fff;
}

/* 로고는 한 판짜리 그림 두 가지다. 메인은 사진 위라 흰 판, 나머지는 컬러판.
   높이는 옛 조합 로고와 같게 둔다(PC 28 / PDA 20 / 모바일 16). 폭은 그림 비율대로
   따라간다 — 조합이 달라 같은 높이에서도 가로 길이는 다르다. */
.logo-header-white {
  display: none;
}

.header-inner .logo-color,
body.home-page > .site-header .header-inner .logo-header-white {
  display: block;
  width: 332px;
  height: 46px;
  max-width: 100%;
  /* 컬러판(277x42)과 흰 판(333x46)은 가로세로 비율이 조금 다르다. 받은 상자에
     억지로 늘리면 로고가 찌그러지므로, 상자는 그대로 두고 그림은 비율을 지킨 채
     그 안에 맞춘다. */
  object-fit: contain;
  object-position: left center;
}

/* 메인은 컬러판 대신 흰 판을 쓴다(사이트맵 안 헤더는 흰 바탕이라 컬러판 그대로다). */
body.home-page > .site-header .header-inner .logo-color {
  display: none;
}

@media (max-width: 1024px) {
  .header-inner .logo-color,
  body.home-page > .site-header .header-inner .logo-header-white {
    width: 277px;
    height: 42px;
  }

  /* responsive.css가 로고 줄을 20px로 눌러 두어, 42px짜리 그림이 그 줄 밖으로
     넘친다. 옛 조합 로고(20px 세 장) 기준 값이라 새 한 판에서는 푼다. */
  .site-header .site-logo {
    height: auto;
  }

  /* 좁은 화면 헤더에는 언어 고르기를 두지 않는다. 사이트맵(햄버거) 안에 같은 것이
     들어 있어 거기서 고른다. 사이트맵도 제 안에 .site-header를 한 벌 더 갖고 있어,
     본문 바로 밑의 헤더만 집도록 body 직계로 좁힌다. */
  body > .site-header .header-inner .lang-select {
    display: none;
  }
}

@media (max-width: 640px) {
  .header-inner .logo-color,
  body.home-page > .site-header .header-inner .logo-header-white {
    width: 160px;
    height: 25px;
  }

  /* 새 로고 한 판에는 심벌이 이미 들어 있다. 옛 조합용으로 따로 그리던 심벌을 끈다
     (그대로 두면 심벌이 두 번 보인다). 아래쪽에 같은 이름의 규칙이 있어 자리로는
     이길 수 없으므로 부모를 함께 적어 특이성을 올린다. */
  .header-inner .site-logo::before,
  .mobile-nav .site-logo::before {
    display: none;
  }
}

/* 격자 칸의 기본값(min-width: auto)이면 로고가 줄지 않아 위 max-width가 듣지 않는다. */
.home-page .header-inner .site-logo {
  min-width: 0;
}

.home-page .header-inner .logo-divider {
  display: none;
}

/* 아이콘은 그림이라 color가 닿지 않는다. 검정으로 눌렀다가 반전해 흰색으로 찍어 낸다
   (원본 색이 무엇이든 순백이 된다). 로고는 이미 흰 판이라, 국기(.utility-icon)는 제 색을
   지켜야 하므로 여기서 뺀다. */
body.home-page > .site-header .header-inner .icon-search,
body.home-page > .site-header .header-inner .icon-menu {
  filter: brightness(0) invert(1);
}

body.home-page > .site-header .header-inner .logo-divider {
  background: rgba(255, 255, 255, 0.5);
}

/* 로그인만 흰 알약으로 남긴다. 바탕까지 희어지면 그 안 글자가 보이지 않는다. */
body.home-page > .site-header .header-inner .login-pill {
  background: #fff;
}

.site-header .container,
.mega-inner.container {
  width: calc(100% - 80px);
  max-width: none;
}

.header-inner {
  gap: 44px;
}

.site-logo {
  gap: 10px;
}

.logo-header-mark {
  width: 86px;
  height: 28px;
}

.logo-header-city {
  width: 88.47px;
  height: 28px;
}

.logo-header-service {
  width: 156.1px;
  height: 28px;
}

.logo-divider {
  height: 20px;
}

.logo-mark {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(135deg, #b7d719 0%, #6eba2c 45%, #009fe3 100%);
}

.logo-city {
  color: #0f6db5;
  font-size: 29px;
}

.logo-service {
  color: #063477;
  font-size: 22px;
}

.gnb {
  gap: 50px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

/* 영문 메뉴는 같은 항목이라도 훨씬 길다(About Smart Dolbom-e 등). .gnb는
   justify-content: center라 내용이 칸보다 넓어지면 좌우로 삐져나가 로고와 겹친다.
   1650 미만은 원래 GNB를 감추므로, 그 위 구간에서 자간·글자를 줄여 칸 안에 넣는다. */
@media (min-width: 1650px) {
  html[lang="en"] .gnb {
    gap: clamp(14px, 1.2vw, 30px);
    font-size: 17px;
  }
}

.utility-link {
  min-height: 40px;
  gap: 4px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.utility-icon {
  width: 20px;
  height: 20px;
}

/* 푸터 로고. 옛 조합(마크+경산시+서비스명 여러 장) 대신 새 로고 한 판을 쓴다.
   흰 판이라 어두운 푸터 바탕에 그대로 얹힌다. 높이는 옛 조합과 같은 32px. */
.footer-logo-white {
  width: 332px;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* 모바일에서는 332px이 푸터 안쪽 영역(320px)보다 넓어 좌우 여백이 어긋난다. */
@media (max-width: 640px) {
  .footer-logo-white {
    width: 277px;
    height: 42px;
  }
}

.map-logo-white {
  width: 360px;
  height: 47px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}


/* ── 언어 고르기 ──────────────────────────────────────────────
   원고대로 국기 + 이름 알약을 누르면 그 아래로 네 언어가 펼쳐진다. */
.lang-select {
  position: relative;
}

/* 바탕은 비워 둔다(옆의 로그인만 알약이다). */
.lang-select .utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #09090b;
  cursor: pointer;
}

.lang-select .utility-icon {
  width: 28px;
  height: 28px;
}

.lang-list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(9, 9, 11, 0.12);
  /* 항목의 네모난 호버 배경이 둥근 모서리 밖으로 삐져나오지 않게 잘라낸다. */
  overflow: hidden;
}

.lang-list[hidden] {
  display: none;
}

/* 항목 사이 점선. 이 파일의 다른 점선과 같이 그라데이션으로 그린다(1px dashed는
   브라우저가 3px씩 끊어 시안과 달라진다). 좌우 20px씩 들여둔다. */
.lang-list li + li {
  background-image: linear-gradient(to right, #e4e4e4 0 7.5px, transparent 7.5px 13.5px);
  background-size: 13.5px 1px;
  background-repeat: repeat-x;
  background-position: 20px top;
}

.lang-option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: left;
  gap: 10px;
  /* 좌우 50px: 국기와 이름 묶음이 판 안에서 가운데쯤에 놓인다. */
  padding: 14px 50px;
  border: 0;
  background: transparent;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.lang-option img {
  width: 28px;
  height: 28px;
  flex: none;
}

.lang-option:hover {
  background: #f4f4f5;
}

/* 지금 보고 있는 언어. */
.lang-option[aria-current="true"] {
  font-weight: 700;
}


.login-pill {
  min-height: 40px;
  padding: 0 18px;
  background: #f4f4f5;
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.icon-button {
  width: 40px;
  height: 40px;
}

/* 아래 섹션과 맞붙는다. 원고에 사진과 다음 섹션 사이 틈이 없다. */
.home-hero {
  padding: 0;
}

/* 새 원고의 히어로는 사진이 화면을 꽉 채우고 헤더가 그 위에 얹힌다. 헤더 높이만큼
   위로 올라가 앉고 같은 크기의 padding으로 글을 제자리에 둔다. */
.hero-panel {
  position: relative;
  display: grid;
  /* 칸을 명시하지 않으면 auto라 안에 든 .container의 100%가 제 자신을 가리켜
     폭이 글자 크기만큼으로 쪼그라든다. */
  grid-template-columns: minmax(0, 1fr);
  min-height: 975px;
  /* pages.css가 아래 모서리를 72px 깎아 두었다. 새 원고는 사진이 곧게 끝나고
     그 줄에서 바로 아래 섹션이 시작한다(원고를 픽셀로 훑어 확인했다). */
  border-radius: 0;
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
  align-content: center;
  overflow: hidden;
  background-image: url("../images/ui/home-hero.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 글과 탭·빠른 예약은 다른 섹션과 같은 폭 안에 선다. */
.hero-inner.container {
  position: relative;
  z-index: 1;
  display: grid;
  /* 칸을 하나로 못박는다. auto로 두면 폭이 정해진 탭 줄(1115px)이 칸을 그만큼 벌려
     좁은 화면에서 안쪽 전체가 컨테이너 밖으로 밀려난다. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.hero-panel::before,
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.hero-panel::before {
  display: none;
  z-index: 0;
  background-repeat: no-repeat;
}

.hero-panel::after {
  display: none;
  z-index: 0;
}

/* 히어로 배너도 여러 건이면 한 자리에서 겹쳐 바뀐다.
   패널이 이미 overflow:hidden이라 둥근 모서리 밖은 알아서 잘린다.
   z-index 0이라 ::before(바탕 사진) 위, ::after(그라데이션)·본문 아래에 놓인다. */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  /* 사진은 관리자가 배너마다 인라인 style의 background-image로 등록한다(마크업 주석
     참고). 여기 적은 것은 등록 전에 보이는 기본 사진이고, 인라인 값이 있으면 그쪽이
     이긴다. 이 url()은 이 CSS 파일 기준이라 ../ 로 적는다. */
  background-image: url("../images/ui/home-hero.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  /* 나가는 장은 흐려지지 않고 들어오는 장이 다 덮은 뒤에 꺼진다. 둘 다 반투명해지는
     순간이 없어 전환 중에 바탕이 비쳐 사진이 잠깐 밝아지는 일이 없다. */
  transition: opacity 0s linear 0.6s;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide.is-active {
    transition: none;
  }
}

.hero-copy {
  width: min(760px, 100%);
}

.hero-copy h1 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* 손글씨 제목. 글자가 아니라 그림이라 글자 규칙이 닿지 않는다. 원고에서 480x256으로
   놓이고, 화면이 좁아지면 폭에 맞춰 같은 비율로 줄어든다. */
.hero-title-art {
  font-size: 0;
  line-height: 0;
}

.hero-title-art img {
  display: block;
  width: 480px;
  max-width: 100%;
  height: auto;
}

.hero-title-line {
  display: block;
}

.hero-service-word {
  display: inline;
}

/* 제목 아래 설명. 원고에서 새로 생겼다. */
.hero-lead {
  margin-top: 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.hero-actions {
  gap: 12px;
  margin-top: 40px;
}

/* ── 자주찾는 서비스 탭 줄 ────────────────────────────────────
   아래 섹션에 있던 서비스 카드 다섯 개가 히어로 안으로 들어왔다. 흰 알약 한 줄에
   나란히 서고, 지금 고른 것만 연두 그라데이션으로 켜진다. */
.hero-service-tabs {
  display: flex;
  /* 원고에서 받은 크기다. 아래 빠른 예약 줄(카드 3 + 단추)보다 좁다. */
  width: 1115px;
  max-width: 100%;
  min-height: 72px;
  /* 아래 빠른 예약 줄보다 좁아 가운데에 세운다. */
  margin: 24px auto 0;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.hero-service-tab {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.hero-service-tab + .hero-service-tab {
  border-left: 1px solid rgba(113, 113, 123, 0.15);
}

/* 좁은 화면에서는 다섯 칸이 320px 안에 들어가지 못해 뒤쪽 칸이 잘려 보이지 않는다.
   지도 시설 유형 칩과 같은 방식으로, 눌러 담지 않고 옆으로 굴려 본다. */
@media (max-width: 1024px) {
  .hero-service-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hero-service-tabs::-webkit-scrollbar {
    display: none;
  }

  .hero-service-tab {
    flex: 0 0 auto;
    min-width: 168px;
  }
}

/* 올렸을 때만 색이 든다. 올리지 않은 칸은 켜진 칸(.is-active)이라도 흰 바탕이다.
   .is-active는 지금 보고 있는 분류를 나타내는 표식으로 마크업에 남겨 둔다(모양은 없다). */
.hero-service-tab:hover {
  background: linear-gradient(90deg, #ffd499, #cde8aa);
}

/* 띠에 색이 드는 만큼 배지는 흰 동그라미로 뒤집는다. */
.hero-service-tab:hover i {
  background: #fff;
}

/* 칸마다 붙는 화살표 배지. 글리프는 빠른 예약 단추와 같은 그림인데, 색을 원고대로
   입히려고 그림 대신 마스크로 찍는다(그림은 색을 바꿀 수 없다). */
.hero-service-tab i {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e6f4d4;
}

.hero-service-tab i::before {
  content: "";
  width: 16px;
  height: 16px;
  -webkit-mask: url("../images/ui/quick-submit-arrow.png") center / contain no-repeat;
  mask: url("../images/ui/quick-submit-arrow.png") center / contain no-repeat;
  background: #6eba2c;
}

/* 히어로 검색칸·도트와 하단 고정 바는 모바일 시안에만 있다. 마크업은 한 벌이라
   기본은 숨겨 두고 ≤640 블록에서만 켠다. 반대로 하면(모바일에서 숨김) PC·PDA·
   좁은 PC 구간마다 따로 꺼야 해서 빠뜨리기 쉽다.
   도트는 .carousel-dots를 통째로 끄지 않고 히어로 것만 끈다. 통째로 끄면 다른
   캐러셀에 [data-carousel-dots]를 달았을 때 아무 말 없이 안 보인다. */
.hero-search,
.hero-panel .carousel-dots,
.site-cta-bar {
  display: none;
}

/* 도트 자체는 화면 폭과 무관한 모양이라 미디어 쿼리 밖에 둔다. 다른 캐러셀에
   [data-carousel-dots]를 달면 그대로 쓸 수 있다(숨김은 히어로 쪽만 걸어 뒀다). */
.carousel-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* 보이는 점은 8px이지만 누르는 자리는 ::after로 24x24까지 넓힌다. 모바일 히어로에서
   도트가 유일한 캐러셀 조작 수단이라(이전·다음·일시정지를 숨긴다) 8px로는 손가락으로
   짚기 어렵다. 상자를 키우지 않고 가상요소만 얹어 간격 10px은 그대로 둔다. */
.carousel-dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.carousel-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 24px;
  min-height: 24px;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.carousel-dot.is-active {
  width: 24px;
  background: #fff;
}

/* ============================================================
   버튼 상태 (normal / hover / pressed / disabled)
   components.css의 .btn에는 상태 규칙이 하나도 없어서 네 상태가 모두 같아
   보였다. 시안의 초록 버튼에서 뽑은 값이 기준이다.

   면 색에 따라 얹는 색을 뒤집는다. 채움 버튼은 어둡게, 어두운 배경 위의
   버튼은 흰색을 얹고, 흰 배경 버튼은 흰색을 얹어도 변화가 없으니 검정을 얹는다.

   hover/pressed에 :not(...) 가드를 두는 이유는, 비활성 버튼에 마우스를 올려도
   색이 변하면 안 되기 때문이다. <a class="btn">에는 disabled 속성을 쓸 수 없어
   .is-disabled와 [aria-disabled="true"]도 함께 받는다.
   ============================================================ */
.btn-primary:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):hover {
  border-color: #61a327;
  background: #61a327;
}

.btn-primary:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):active {
  border-color: #569122;
  background: #569122;
}

/* 어두운 배경 위의 흰 아웃라인 버튼(메인 히어로). 시안에서 단계마다 흰색을
   8%씩 더 얹는다. normal은 지금 값(0.08)을 그대로 두고 두 단계를 얹었다.
   시안의 normal은 투명이지만, 여기는 사진 위에 backdrop-filter로 떠 있는
   버튼이라 투명으로 내리면 배경 사진에 따라 잘 안 보인다. */
.btn-white:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):hover {
  background: rgba(255, 255, 255, 0.16);
}

.btn-white:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):active {
  background: rgba(255, 255, 255, 0.24);
}

/* 흰 배경 버튼(btn-ghost·btn-line·btn-danger와 변형 없는 .btn).
   여기에 흰색을 얹으면 아무 변화가 없으므로 반대로 검정을 얹는다.
   알파 대신 흰색과 합성한 결과값을 그대로 적는 이유는, 버튼이 흰색이 아닌
   섹션 위에 놓였을 때 반투명 배경이 뒤쪽 색을 그대로 비쳐 버리기 때문이다.
   hover의 #f4f4f5는 프로젝트가 이미 쓰는 회색이다. */
.btn:not(.btn-primary):not(.btn-white):not(.btn-dark):not(:disabled):not(.is-disabled):not([aria-disabled="true"]):hover {
  background: #f4f4f5;
}

.btn:not(.btn-primary):not(.btn-white):not(.btn-dark):not(:disabled):not(.is-disabled):not([aria-disabled="true"]):active {
  background: #e9e9ea;
}

/* 어두운 채움 버튼. btn-white와 같이 흰색을 8%씩 얹은 값이다. */
.btn-dark:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):hover {
  border-color: #38383b;
  background: #38383b;
}

.btn-dark:not(:disabled):not(.is-disabled):not([aria-disabled="true"]):active {
  border-color: #4a4a4c;
  background: #4a4a4c;
}

/* disabled는 변형과 무관하게 같은 회색으로 눕는다.
   !important를 쓴 이유가 있다. 페이지마다 .btn을 다시 칠하는 규칙이 흩어져 있고
   (body.home-page .compact-list .btn, .life-desktop-actions .btn-primary,
   .reservation-form-actions .btn-primary 등) 명시도가 제각각이라, 선택자를
   아무리 키워도 새 페이지 규칙 하나에 다시 뚫린다. 실제로 .btn.btn[aria-disabled]
   (0,3,0)로는 body.home-page .compact-list .btn(0,3,1)에 져서 메인페이지 버튼이
   비활성인데도 초록으로 남았다. 비활성 버튼이 활성처럼 보이는 건 오작동이라
   여기서는 무조건 이기게 둔다. */
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  border-color: #f4f4f5 !important;
  background: #f4f4f5 !important;
  color: #c0c0c1 !important;
  cursor: not-allowed;
}

/* <a class="btn is-disabled">는 링크라서 그냥 두면 눌린다. 실제로 돌봄서비스
   목록의 PC 카드 밖에 있는 버튼 하나가 비활성 표시인데도 이동이 됐다.
   <button disabled>는 브라우저가 알아서 막으므로 여기서 다룰 대상이 아니다. */
a.btn.is-disabled,
a.btn[aria-disabled="true"] {
  pointer-events: none;
}

.btn-white {
  gap: 4px;
  min-height: 48px;
  padding: 0 18px;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(25px);
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.btn-arrow {
  width: 24px;
  height: 24px;
}

.carousel-icon {
  width: 20px;
  height: 20px;
}

/* ── 메인 히어로 화살표 ─────────────────────────────────────────
   원고 값이다. 아래 .carousel-controls·.carousel-nav 공통 규칙은 운영 프로그램·팝업
   캐러셀이 함께 쓰므로 건드리지 않고, 히어로 안에서만 덮어쓴다. */
.hero-panel .carousel-controls button {
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.1);
  /* 배경 흐리기(Blur 50). 뒤 사진이 뭉개지면서 같은 검정 10%도 더 짙어 보인다. */
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

/* 올렸을 때도 눌렀을 때도 같은 검정 10%다. */
.hero-panel .carousel-controls button:not(:disabled):hover,
.hero-panel .carousel-controls button:not(:disabled):active {
  background: rgba(0, 0, 0, 0.1);
}

/* 단추가 커진 만큼 화살표도 키운다. */
.hero-panel .carousel-icon {
  width: 28px;
  height: 28px;
}

/* 메인 히어로는 원고대로 좌우 끝 화살표만 남는다. 01/04·진행 막대·일시정지는
   원고에 없어 이 구간에서만 감춘다(마크업은 그대로라 다른 캐러셀은 영향이 없다). */
.hero-panel .carousel-controls {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0 40px;
  transform: translateY(-50%);
  justify-content: space-between;
  pointer-events: none;
}

.hero-panel .carousel-controls button {
  pointer-events: auto;
}

.hero-panel .carousel-progress,
.hero-panel [data-carousel-pause] {
  display: none;
}

.carousel-controls {
  gap: 12px;
  margin-top: 32px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.carousel-progress {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.carousel-progress em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.6);
}

/* 현재 번호가 바뀔 때 폭이 흔들리지 않게 고정한다. NPS_font는 비례 숫자라
   "1"이 좁아서(01=18.4px, 02=22.8px) 번호가 바뀔 때마다 바와 총 개수가
   4.4px씩 밀렸다. 이 폰트에는 tabular-nums/tnum 기능이 없어 효과가 없으므로
   폭으로 잡는다. 2ch = "00"의 폭(23.5px)이라 두 자리는 항상 들어간다.

   오른쪽 정렬인 이유. 상자가 23.5px인데 "01"은 18.4px뿐이라 5.2px이 남는다.
   left면 그 여백이 전부 바 쪽에 몰려 앞 간격 21.8 / 뒤 간격 16으로 바가
   뒤 숫자에 붙어 보였고, 번호에 따라 앞 간격이 4.5px씩 널뛰었다.
   right로 두면 숫자 오른쪽 끝이 고정돼 앞뒤가 16.5 / 16으로 맞고
   번호가 바뀌어도 바와의 간격이 그대로다. 남는 여백은 화살표 쪽으로 간다. */
.carousel-progress strong,
.carousel-position strong {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}

/* align-items:center는 상자를 맞추는데, 숫자는 상자 한가운데 그려지지 않는다.
   NPS_font 17px/25.5px에서 "01"의 잉크는 4.25~19.25라 중심이 11.75로 상자 중심
   12.75보다 1px 위다(숫자에 디센더가 없는데 폰트는 디센더 자리를 잡아 둔다).
   그래서 상자만 맞추면 2px 바가 숫자보다 1px 내려가 보인다. 시안은 숫자 잉크
   중심과 바가 맞아 있어, 여기서 1px 올려 광학 중심을 맞춘다.
   top은 레이아웃을 건드리지 않아 옆 숫자·버튼 위치가 그대로다. */
.carousel-bar {
  position: relative;
  top: -1px;
  width: 100px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
}

.carousel-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--carousel-progress, 0%);
  height: 100%;
  background: #ffffff;
}

/* 바는 클릭이 아니라 시간에 따라 찬다. 배너가 바뀔 때마다 site.js가
   .is-animating을 다시 걸어 0%부터 재생하고, 자동 전환도 같은 주기(
   --carousel-duration)로 돌기 때문에 바가 다 차는 시점과 전환 시점이 맞는다. */
.carousel-bar.is-animating::before {
  animation: carousel-bar-fill var(--carousel-duration, 5000ms) linear forwards;
}

/* 일시정지 버튼은 타이머와 바를 함께 멈춘다. 바는 채워진 지점에서 얼어붙는다.
   키보드 초점이 캐러셀 안에 있는 동안(.is-focus-held)에도 자동 전환을 멈추므로
   바도 같이 얼려야 한다. 바만 흐르면 곧 넘어갈 것처럼 보인다. */
[data-carousel].is-paused .carousel-bar::before,
[data-carousel].is-focus-held .carousel-bar::before {
  animation-play-state: paused;
}

@keyframes carousel-bar-fill {
  from {
    width: 0%;
  }

  to {
    width: 100%;
  }
}

/* 운영 프로그램 제목 옆 장식(jump.png)이 16px 떠올랐다 제자리로 내려온다.
   transform이 아니라 translate로 옮기는 이유는 PC(≥1025)에서 이 그림이
   transform: translateY(-50%)로 세로 가운데를 잡고 있기 때문이다. translate는
   transform과 별개 속성이라 덮어쓰지 않고 -50%에 -16px이 더해진다. 구간마다
   기준 위치가 달라도(PDA·모바일은 top 40px, 변형 없음) 이 한 규칙으로 끝난다. */
@keyframes program-heading-jump {
  to {
    translate: 0 -16px;
  }
}

body.home-page .program-strip .program-heading-graphic {
  animation: program-heading-jump 1.2s ease-in-out infinite alternate;
}

/* 모션 최소화 설정에서는 바를 채우지 않는다. 자동 전환도 site.js에서 함께 끈다. */
@media (prefers-reduced-motion: reduce) {
  .carousel-bar.is-animating::before {
    animation: none;
  }

  body.home-page .program-strip .program-heading-graphic {
    animation: none;
  }

}

.carousel-controls button,
.carousel-nav {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.12);
}

/* 반투명 흰 버튼이라 .btn-white와 같이 흰색을 8%씩 더 얹는다(0.12 → 0.20 → 0.28).
   밝은 배경 위에 놓인 program-controls·popup-controls는 아래에서 따로 받는다. */
.carousel-controls button:not(:disabled):hover,
.carousel-nav:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.2);
}

.carousel-controls button:not(:disabled):active,
.carousel-nav:not(:disabled):active {
  background: rgba(255, 255, 255, 0.28);
}

.hero-visual {
  display: none;
}

.quick-filter {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 148px;
  gap: 12px;
  margin-top: 24px;
}

.quick-filter label,
.quick-submit {
  min-height: 152px;
  /* 카드·셀렉트 모두 32px로 통일한다(원래는 오른쪽 위만 64px이었다). */
  border-radius: 32px;
  box-shadow: var(--shadow-sm);
}

.quick-filter label {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: end;
  justify-content: stretch;
  justify-items: stretch;
  padding: 24px 32px;
}

 /* PDA·모바일 원고에만 있는 카드 제목. 그 구간에서 아래 1·2·3 라벨과 자리를 맞바꾼다. */
.quick-filter-heading {
  display: none;
}

.quick-filter-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  color: var(--color-ink);
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.quick-filter-title b {
  font-weight: inherit;
}

.quick-filter-title i {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font-style: normal;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.quick-filter-title b {
  font-weight: 700;
}

.quick-filter select {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 32px;
  appearance: none;
  background-color: #f4f4f5;
  background-image: url("../images/ui/select-chevron.png");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 24px 24px;
  color: rgba(9, 9, 11, 0.8);
  padding: 0 52px 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

/* ============================================================
   커스텀 셀렉트 목록 (site.js가 만든다)
   네이티브 <select>의 목록은 브라우저가 그리는 것이라 시안처럼 흰 패널·둥근
   모서리·그림자를 줄 수 없다.

   <select> 자체는 그대로 화면에 남겨 둔다. 페이지마다 셀렉트 생김새가 다른데
   (게시판 툴바, 찾기 폼, 회원가입, 신청·예약 …) 버튼으로 갈아끼우면 그 스타일을
   전부 다시 만들어야 한다. 그래서 닫힌 모습은 각 페이지 CSS 그대로 두고,
   펼쳐지는 목록만 이 패널로 바꾼다.

   패널은 position:fixed로 <body>에 붙인다. 셀렉트를 감싸는 상자를 만들지 않아
   그리드·플렉스 배치가 틀어질 일이 없고, overflow:hidden 안에 있는 셀렉트에서도
   목록이 잘리지 않는다. 자리는 site.js가 잡는다.
   ============================================================ */
.custom-select-panel {
  position: fixed;
  /* 전체화면 오버레이(.school-search·.mobile-nav = 130)보다 위. 60일 때는
     학교 검색 팝업 안에서 목록이 딤 뒤로 깔려 보이지도 눌리지도 않았다.
     이 패널은 <body> 끝에 붙어 있어 어떤 오버레이보다도 위여야 한다. */
  z-index: 140;
  max-height: 268px;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.custom-select-option {
  display: flex;
  min-height: 56px;
  align-items: center;
  padding: 0 24px;
  color: rgba(9, 9, 11, 0.8);
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

.custom-select-option:hover,
.custom-select-option.is-active {
  background: #f4f4f5;
}

/* 지금 고른 항목만 굵게 + 불투명도 100%로 구분한다. */
.custom-select-option[aria-selected="true"] {
  color: #09090b;
  font-weight: 700;
}

.quick-select-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quick-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #72bf2f;
  color: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}

/* 초록 채움 버튼이라 .btn-primary와 같은 단계값을 쓴다. 바탕 #72bf2f는
   --color-green(#64be25)과 사실상 같은 초록이라 그대로 얹어도 어긋나지 않는다. */
.quick-submit:not(:disabled):hover {
  background: #61a327;
}

.quick-submit:not(:disabled):active {
  background: #569122;
}

/* 안쪽 흰 원도 같이 한 단계씩. 흰 배경이라 검정을 얹는 .btn 계열 값을 쓴다. */
.quick-submit:not(:disabled):hover i {
  background: #f4f4f5;
}

.quick-submit:not(:disabled):active i {
  background: #e9e9ea;
}

.quick-submit i {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #72bf2f;
  font-style: normal;
  font-size: 24px;
}

.quick-submit-arrow {
  width: 24px;
  height: 24px;
}

.frequent-section {
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-top: 100px;
}

/* 오른쪽 칼럼(제목+카드)만 행 높이로 늘린다. 섹션이 start라 칼럼이 내용 높이로
   잡히고, 그러면 .service-grid의 align-items: end가 밀어낼 여백이 없어 카드가
   도움말 박스 바닥까지 내려오지 않는다. 제목은 auto, 그리드가 남는 높이를 받는다.
   help-box는 start 그대로 둔다. */
.frequent-section > .frequent-body {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr;
}

.help-box {
  min-height: 414px;
  padding: 40px 32px;
  border-radius: 32px 64px 32px 32px;
  background: #337fd1;
}

.help-box h2 {
  margin-bottom: 32px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
}

.help-box strong {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 256px;
  height: 109px;
  margin-bottom: 34px;
  padding: 20px 24px;
  border-radius: 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.help-box-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.help-box-phone-icon {
  width: 24px;
  height: 24px;
}

.help-box-label {
  color: #757575;
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.help-box p {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}

.help-box-hours-label {
  display: flex;
  align-items: center;
  gap: 16px;
}

.help-box-hours-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

.help-box-hours-time {
  color: rgba(255, 255, 255, 0.8);
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.section-heading .section-heading-desc {
  margin-top: 24px;
  margin-bottom: 0;
  color: rgba(9, 9, 11, 0.5);
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

/* 모바일에서만 살아나는 줄바꿈. 앞에 공백을 두고 쓸 것. */
.br-mobile {
  display: none;
}

.section-heading .program-controls,
.section-heading .popup-controls {
  display: flex;
  align-items: center;
  color: #09090b;
}

.section-heading .popup-controls {
  margin-top: 0;
}

.section-heading .program-controls {
  margin-top: 100px;
}

.section-heading .program-controls .carousel-progress strong,
.section-heading .popup-controls .carousel-progress strong {
  color: #09090b;
}

.section-heading .program-controls .carousel-progress em,
.section-heading .popup-controls .carousel-progress em {
  color: rgba(9, 9, 11, 0.6);
}

.section-heading .popup-controls .carousel-progress {
  gap: 8px;
}

.section-heading .popup-controls .carousel-progress-divider {
  color: rgba(9, 9, 11, 0.6);
}

.section-heading .program-controls .carousel-bar,
.section-heading .popup-controls .carousel-bar {
  background: #b6b6b6;
}

.section-heading .program-controls .carousel-bar::before,
.section-heading .popup-controls .carousel-bar::before {
  background: #09090b;
}

.section-heading .program-controls button,
.section-heading .popup-controls button {
  background: rgba(9, 9, 11, 0.08);
  color: #09090b;
}

/* 밝은 배경 위 버튼이라 흰색을 얹으면 변화가 없다. 반대로 검정을 8%씩 얹는다
   (0.08 → 0.16 → 0.24). 히어로의 흰색 단계와 대칭이다. */
.section-heading .program-controls button:not(:disabled):hover,
.section-heading .popup-controls button:not(:disabled):hover {
  background: rgba(9, 9, 11, 0.16);
}

.section-heading .program-controls button:not(:disabled):active,
.section-heading .popup-controls button:not(:disabled):active {
  background: rgba(9, 9, 11, 0.24);
}

.section-heading .program-controls .carousel-icon,
.section-heading .popup-controls .carousel-icon {
  filter: brightness(0);
}

.section-heading .program-controls [data-carousel-pause] .carousel-icon,
.section-heading .popup-controls [data-carousel-pause] .carousel-icon {
  filter: brightness(0) saturate(100%) invert(31%) sepia(8%) saturate(390%) hue-rotate(202deg) brightness(93%) contrast(86%);
}

/* 더보기(운영 프로그램으로 이동)는 button이 아니라 a라서, 정렬·모양을 잡아주던
   `.carousel-controls button` 규칙이 걸리지 않는다. 필요한 값만 여기서 직접 준다. */
.section-heading .program-controls .carousel-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  background: transparent;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
}

.section-heading .program-controls .carousel-extra .carousel-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0);
}

/* 더보기는 원형 버튼이 아니라 20px 아이콘 하나뿐이라 배경을 얹으면 네모가 생긴다.
   같은 줄의 버튼들과 단계 수를 맞춰 불투명도로만 눌린 느낌을 준다. */
.section-heading .program-controls .carousel-extra:hover {
  opacity: 0.72;
}

.section-heading .program-controls .carousel-extra:active {
  opacity: 0.56;
}

.section-heading h2 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.018em;
}

.mypage-facility-list-page .mypage-facility-heading h2 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  color: #09090b;
}

.section-heading span {
  color: #337fd1;
}

#homeMapTitle span {
  color: #289e96;
}

/* 제목 상자 안 간격이 두 가지다. 별 그림과 글자 사이는 20px, 글자와 글자
   사이는 10px. flex의 gap은 한 값뿐이라 좁은 쪽(글자 사이)을 gap으로 두고,
   그림 두 개만 margin으로 모자란 10px을 더 벌린다. */
#homeMapTitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 별 캐릭터가 한 포즈 그대로 반 바퀴 갔다가 되돌아온다(참고 영상 기준).
   참고 영상은 0도에서 0.5초 멈췄다 출발하는데, 그 멈춤이 눈에 걸려 뺐다.
   쉬는 구간 없이 3초에 180도씩 왕복한다(영상에서 잰 속도와 같은 60도/초).
   가감속을 주면 되돌아가는 지점에서 다시 멈춘 것처럼 보이므로 linear로 둔다.
   .map-title-icon이 그림이 아니라 두 그림을 담는 상자라 회전은 상자가 받는다
   (구간별 크기·자리 규칙도 이 상자가 그대로 물려받는다). */
.map-title-icon {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  /* gap(10px)에 더해 그림 쪽만 20px이 되게 한다(위 #homeMapTitle 설명 참고). */
  margin-right: 10px;
  animation: map-title-icon-swing 6s linear infinite;
}

@keyframes map-title-icon-swing {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.map-title-icon img {
  width: 100%;
  height: 100%;
}

/* 대체 그림(map-title-icon-alt.png)은 여백 없이 잘려 있어 35x36 전체가 별인데,
   기본 그림은 50x50 상자 안에 36x36 별이 7px 여백을 두고 들어 있다. 그대로
   겹치면 별만 커 보이므로 대체 그림 상자를 안쪽으로 14%(7/50) 들인다. 상자가
   40px로 줄어드는 구간에서도 비율이라 그대로 맞는다. */
.map-title-icon .map-title-icon-alt {
  position: absolute;
  top: 14%;
  left: 14%;
  /* inset만으로는 안 된다. 대체 요소는 width: auto가 늘어나는 대신 원본 크기
     (35x36)로 서서, 상자가 40px로 줄어드는 구간에서 별만 커지고 넘친다.
     72%(36/50)로 못박고 contain으로 비율을 지킨다. */
  width: 72%;
  height: 72%;
  object-fit: contain;
  /* 참고 영상은 한 포즈가 돌기만 하고 포즈가 바뀌지 않는다. 대체 그림은 감춘
     채로 두고 회전만 쓴다(마크업은 그대로라 언제든 되살릴 수 있다). */
  opacity: 0;
}

/* 모션 최소화 설정에서는 돌지 않고 기본 포즈로 멈춘다. 캐러셀 바를 끄는 블록과
   합치지 않고 여기에 두는 까닭은, 그 블록이 파일 앞쪽(380행 언저리)이라 뒤에
   오는 이 규칙에 순서로 지기 때문이다. 구체성이 같으면 나중에 온 쪽이 이긴다. */
@media (prefers-reduced-motion: reduce) {
  .map-title-icon {
    animation: none;
  }
}

.map-title-icon-right {
  width: 76px;
  height: 100px;
  margin-left: 10px;
}

.service-grid {
  grid-template-columns: repeat(5, minmax(0, 208px));
  gap: 24px;
  /* 칼럼에서 받은 남는 높이만큼 카드 줄을 아래로 내린다(align-items: end와 짝). */
  align-content: end;
}

#frequentTitle {
  position: relative;
}

#frequentTitle::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 360px;
  width: 1160px;
  height: 300px;
  background-image: url("../images/ui/section-vector.svg");
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

.service-card {
  width: 208px;
  height: 284px;
  border: 1.5px solid transparent;
  border-radius: 32px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover,
.service-card:focus-within {
  border-color: #27272a;
  transform: translateY(-16px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 10px 20px rgba(0, 0, 0, 0.1),
    0 24px 40px rgba(0, 0, 0, 0.14);
}

.card-media {
  height: 169px;
  background-position: center top;
  background-size: cover;
}

.service-card:nth-child(1) .card-media { background-image: url("../images/ui/service-1.png"); }
.service-card:nth-child(2) .card-media { background-image: url("../images/ui/service-2.png"); }
.service-card:nth-child(3) .card-media { background-image: url("../images/ui/service-3.png"); }
.service-card:nth-child(4) .card-media { background-image: url("../images/ui/service-4.png"); }
.service-card:nth-child(5) .card-media { background-image: url("../images/ui/service-5.png"); }
.service-card:nth-child(6) .card-media { background-image: url("../images/ui/service-5.png"); }

.service-card h3 {
  margin-top: 22px;
  color: var(--color-green-dark);
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.service-card a {
  margin-top: 3px;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.map-preview-band {
  /* 히어로와 맞붙는다(원고). 예전에는 히어로가 둥글게 끝나 80px을 띄워 뒀다. */
  margin-top: 0;
  padding: 120px 0 88px;
  /* 새 원고의 배경 그림이다. 예전 것은 위가 곡선이라 그 위 250px이 비어 있었는데,
     이번 것은 판이 꽉 차 있어 히어로와 그대로 맞붙는다. */
  background: url("../images/ui/map-band-bg.png") center top / cover no-repeat;
}

.map-preview {
  grid-template-columns: minmax(0, 760px) minmax(0, 760px);
  border-radius: 32px;
  overflow: visible;
}

/* 메인 돌봄 지도.
   전에는 마커까지 그려 넣은 home-map.png 한 장을 배경으로 깔고 .pin 요소는
   감췄다. 돌봄MAP 화면처럼 지도(map-base.png)와 마커를 나눈다.

   지도는 .mini-map-layer 한 겹 안에 둔다. 이 겹은 잘라 쓰는 조각과 같은
   비율(760:658)로 잡고 상자를 덮을 만큼만 키운다. 배경을 상자에 바로 늘리면
   구간마다 상자 비율이 달라 지도가 찌그러지고, cover로 깔면 잘리는 자리가 폭에
   따라 달라져 마커가 지도와 어긋난다. 겹을 두면 둘 다 피하면서 보이는 범위가
   전과 같다(겹이 cover와 같은 크기가 된다). */
.mini-map {
  position: relative;
  container-type: size;
  min-height: 658px;
  overflow: visible;
  border-radius: 32px 0 0 32px;
  background: #eef1f3;
}

/* 자르는 역할만 한다. .mini-map에 직접 걸면 위로 걸친 배너까지 잘린다. */
.mini-map-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.mini-map-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  container-type: inline-size;
  width: max(100cqw, calc(100cqh * 760 / 658));
  aspect-ratio: 760 / 658;
  /* 전에 쓰던 home-map.png는 map-base.png의 가로 19.70~71.21%, 세로
     11.83~72.82% 조각이다(구워진 마커 열 개의 자리를 돌봄MAP의 마커 좌표와
     맞춰 구했다. 어긋남은 3px 안쪽). 그 조각이 이 겹을 꽉 채우도록 키워 옮긴다. */
  background: url("../images/ui/map-base.png") no-repeat;
  background-size: 194.13% 163.96%;
  background-position: 40.62% 30.33%;
  translate: -50% -50%;
}

/* 마커는 돌봄MAP과 같은 그림(87x97 SVG)을 원래 크기 그대로 쓴다. 지도가 커지고
   작아지는 만큼 같이 커지도록 겹 폭(cqw) 기준으로 잡는다. 87 / 760 = 11.447%. */
.mini-map-pin {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.447cqw;
  aspect-ratio: 87 / 97;
  /* top·left가 가리키는 곳은 물방울 몸통의 가운데다. 그림 안에서 몸통은 가로
     18~64, 세로 15~70.56 자리이므로 가운데는 가로 47.13%, 세로 44.10%. */
  translate: -47.126% -44.103%;
  /* 숫자는 오른쪽 위 배지 가운데(그림 좌표 60,19 = 가로 68.97%, 세로 19.59%)에
     온다. 안쪽 여백으로 글상자를 그 점에 맞춘다(돌봄MAP 마커와 같은 방식). */
  padding: 0 0 7.763cqw 4.342cqw;
  background: var(--pin-image) center / 100% 100% no-repeat;
  color: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 1.579cqw;
  font-weight: 800;
  line-height: 1;
}

/* 미니맵도 같은 규칙으로 묶는다. 묶음 그림(82x92)은 분류 마커(87x97)보다 작아,
   물방울 몸통 크기를 맞추려면 폭이 82/87배여야 한다(11.447 x 82/87 = 10.789cqw).
   그 값이 분류 마커로 바꾸기 전 .mini-map-pin이 쓰던 값과 같다. */
.mini-map-cluster {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10.789cqw;
  aspect-ratio: 82 / 92;
  translate: -50% -41%;
  padding: 0 0 3.421cqw;
  background: url("../images/ui/map-marker-cluster.svg") center / 100% 100% no-repeat;
  color: #292929;
  font-family: "NPS_font", var(--font-sans);
  font-size: 2.105cqw;
  font-weight: 800;
  line-height: 1;
}

.mini-map-pin.is-clustered {
  display: none;
}

/* 마커 자리는 전에 쓰던 home-map.png에 구워져 있던 위치를 그대로 잰 값이다.
   색과 순서도 돌봄MAP의 열 개와 같다. */
.mini-map-layer .pin-1 { top: 39.84%; left: 57.03%; --pin-image: url("../images/ui/map-marker-care.svg"); } /* 돌봄서비스 */
.mini-map-layer .pin-2 { top: 47.41%; left: 49.28%; --pin-image: url("../images/ui/map-marker-daycare.svg"); } /* 어린이집 */
.mini-map-layer .pin-3 { top: 31.71%; left: 83.48%; --pin-image: url("../images/ui/map-marker-kindergarten.svg"); } /* 유치원 */
.mini-map-layer .pin-4 { top: 50.21%; left: 45.02%; --pin-image: url("../images/ui/map-marker-elementary.svg"); } /* 초등학교 */
.mini-map-layer .pin-5 { top: 66.24%; left: 73.88%; --pin-image: url("../images/ui/map-marker-middle.svg"); } /* 중학교 */
.mini-map-layer .pin-6 { top: 76.76%; left: 86.50%; --pin-image: url("../images/ui/map-marker-experience.svg"); } /* 체험기관 */
.mini-map-layer .pin-7 { top: 78.73%; left: 31.64%; --pin-image: url("../images/ui/map-marker-hospital.svg"); } /* 병원 */
.mini-map-layer .pin-8 { top: 83.73%; left: 27.16%; --pin-image: url("../images/ui/map-marker-pharmacy.svg"); } /* 약국 */
.mini-map-layer .pin-9 { top: 57.16%; left: 17.16%; --pin-image: url("../images/ui/map-marker-care.svg"); } /* 돌봄서비스 */
.mini-map-layer .pin-10 { top: 25.26%; left: 21.58%; --pin-image: url("../images/ui/map-marker-experience.svg"); } /* 체험기관 */

.map-banner {
  position: absolute;
  top: -37px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 271px;
  height: 74px;
  background: url("../images/ui/map-overlay-banner.png") center / 100% 100% no-repeat;
  color: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  pointer-events: none;
}

.map-banner-icon {
  width: 24px;
  height: 24px;
}

body.home-page .home-map-chips {
  border-bottom: 1px solid #e0e0e2;
}

body.home-page .home-map-chips button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1.5px solid rgba(113, 113, 123, 0.22);
}

body.home-page .home-map-chips button.is-active {
  border-color: #27272a;
}

.chip-chevron {
  width: 24px;
  height: 24px;
}

.mini-map::after {
  content: "";
  position: absolute;
  top: -37px;
  left: 0;
  width: 58px;
  height: 148px;
  background: url("../images/ui/map-overlay-union.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

.compact-list {
  max-height: 658px;
  padding: 48px 32px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.compact-list::-webkit-scrollbar {
  display: none;
}

.compact-list article {
  padding: 27px 0;
}

.compact-list article:nth-child(1) .home-map-number {
  background: #e49000;
}

.compact-list article:nth-child(2) .home-map-number {
  background: #cf495a;
}

.compact-list article:nth-child(3) .home-map-number {
  background: #3679cb;
}

/* ── 돌봄 지도 목록: 결과 0건 ──────────────────────────────
   보여 줄 시설이 없을 때 목록 자리에 놓는 안내다. 통합검색·게시판의 .search-empty와
   같은 그림·문구를 쓰되, 이 패널은 목록 높이가 404px로 정해져 있어 위아래 여백만
   줄인다.

   켜고 끄는 것을 CSS가 맡는 이유. 목록을 그리는 쪽에서 <article>만 빼면 안내가
   저절로 나오고, 클래스를 붙이고 떼는 일을 따로 하지 않아도 된다.
   기본을 숨김으로 둔 것은 :has()를 모르는 브라우저 때문이다. 그런 곳에서는 지금처럼
   빈자리로 남을 뿐, 카드가 있는데도 안내가 뜨는 일은 없다. */
body.home-page .compact-list .compact-list-empty {
  display: none;
}

body.home-page .compact-list:not(:has(article)) .compact-list-empty {
  display: grid;
  gap: 24px;
  padding: 24px 0;
}

/* 안내 문단을 다시 적는 이유. 목록의 카드 규칙(body.home-page .compact-list p)이
   카드 안 주소줄을 두 번째 칸에 앉히려고 grid-column: 2를 걸어 두는데, 그 선택자가
   이 안내의 <p>에도 걸린다. 그대로 두면 안내 상자에 없던 두 번째 칸이 생겨 그림과
   글이 좌우로 갈라진다. 자리와 생김새를 .search-empty 쪽으로 되돌린다.
   앞에 body.home-page를 붙인 것은 가중치 때문이다. 없으면 카드 규칙과 (0,2,2)로
   같아져, 파일 뒤쪽 ≥1025 블록에 있는 그 규칙이 순서로 이긴다. */
body.home-page .compact-list:not(:has(article)) .compact-list-empty p {
  grid-column: auto;
  align-self: auto;
  margin: 0;
  color: #71717b;
  font-size: 19px;
}

/* 안내만 남으면 목록의 남는 자리 한가운데에 놓는다. 카드가 있을 때는 위에서부터
   쌓아야 하므로 align-content: start를 그대로 둔다. */
body.home-page .compact-list:not(:has(article)) {
  align-content: center;
}

/* 시설이 없으면 넘길 쪽도 없다. */
body.home-page .compact-list:not(:has(article)) + .home-map-pagination {
  display: none;
}

/* 돌봄 지도 패널의 페이지네이션은 PDA·모바일 시안에만 있다. PC는 목록을 통째로
   스크롤해서 보여 주므로 감춘다. 켜는 쪽은 ≤1024 구간에 있다. */
.home-map-pagination {
  display: none;
}

.facility-stats {
  height: 102px;
  gap: 0;
  border-radius: 32px;
  background: #fff;
}

/* 영문은 같은 뜻이라도 글자 수가 훨씬 길어 고정 높이 박스를 넘친다(라벨이 3줄로
   접히고 "개소" 자리가 잘렸다). 한국어 레이아웃은 그대로 두고 영문일 때만 푼다. */
html[lang="en"] .facility-stats {
  height: auto;
  min-height: 102px;
  padding-block: 16px;
}

html[lang="en"] .facility-stats dt {
  font-size: 17px;
}

.facility-stats div + div::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 0;
  width: 1.5px;
  background-image: linear-gradient(to bottom, #e4e4e4 50%, transparent 50%);
  background-size: 1.5px 12px;
  background-repeat: repeat-y;
}

.facility-stats-title {
  position: relative;
  isolation: isolate;
  margin-top: 40px;
  margin-bottom: 24px;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.facility-stats-title::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -10px;
  z-index: -1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e1ecca;
}

.facility-stats-title + .facility-stats {
  margin-top: 0;
}

.facility-stats dt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.facility-stats dt::before {
  content: "";
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #e1ecca;
}

.facility-stats dt::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-color: #ffffff;
  -webkit-mask: url("../images/ui/apartment.png") center / 20px 20px no-repeat;
  mask: url("../images/ui/apartment.png") center / 20px 20px no-repeat;
}

.facility-stats div:nth-child(1) dt::before {
  background-color: #cf495a;
}

.facility-stats div:nth-child(2) dt::before {
  background-color: #e49000;
}

.facility-stats div:nth-child(3) dt::before {
  background-color: #289e96;
}

.facility-stats div:nth-child(4) dt::before {
  background-color: #3679cb;
}

.facility-stats dd {
  display: flex;
  align-items: center;
  gap: 8px;
}

.facility-stats dd strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.facility-stats dd span {
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.facility-stats div {
  position: relative;
  justify-content: space-between;
  gap: 85px;
  align-items: center;
  padding: 28px 40px;
}

.program-strip {
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 120px;
  min-height: 780px;
  align-items: center;
}

.program-slide {
  position: relative;
  align-items: flex-start;
  gap: 24px;
  min-height: 190px;
  border-radius: 32px 32px 32px 64px;
}

/* 카드 전체가 운영 프로그램 상세로 이동한다. 제목 링크를 카드 전면으로 늘려
   제목 글자뿐 아니라 배지·일시 등 빈 곳을 눌러도 같은 곳으로 가게 한다. */
.program-slide-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 카드 위쪽 사진(.program-feature의 배경 이미지)도 같은 곳으로 보낸다.
   슬라이드가 absolute라 카드의 늘린 링크는 카드 밖까지 못 덮는다.
   마크업에서 슬라이드보다 앞에 둔 덮개 링크가 사진 영역을 받는다.
   카드·캐러셀 컨트롤은 이 링크보다 뒤에 그려져 그대로 눌린다. */
.program-feature {
  position: relative;
}

.program-feature-link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.program-slide.is-active {
  display: flex;
}

.program-slide-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.program-slide .program-slide-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
  color: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}

.program-slide .program-slide-title a {
  color: inherit;
  text-decoration: none;
}

.program-slide .program-slide-title a:hover,
.program-slide .program-slide-title a:focus-visible {
  text-decoration: underline;
}

.program-slide .program-slide-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

.program-slide .program-slide-date-range {
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.program-slide .status-badge {
  width: 61px;
  height: 28px;
  min-height: 28px;
  margin-top: 5px;
  padding: 0;
  border-radius: 8px;
  color: #222222;
  font-family: "NPS_font", var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.home-news {
  padding: 120px 0 150px;
  background: #eef7ff;
}

.home-news .section-heading h2,
.popup-zone .section-heading h2 {
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.018em;
}

.home-news .news-layout > div {
  position: relative;
  isolation: isolate;
}

.home-news .news-layout > div > .section-heading h2 {
  position: relative;
}

.home-news .news-layout > div > .section-heading h2::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 260px;
  width: 1160px;
  height: 252px;
  background-image: url("../images/ui/section-vector.svg");
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}

.home-news .popup-zone {
  position: relative;
  z-index: 1;
}

.home-news .section-heading.inline,
.popup-zone .section-heading.inline {
  align-items: center;
}

.news-tabs {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.news-tabs a {
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.news-tabs a:first-of-type {
  color: #6eba2c;
  font-size: 25px;
  font-weight: 700;
}

.news-tabs a:nth-of-type(2) {
  color: rgba(9, 9, 11, 0.5);
  font-size: 25px;
  font-weight: 700;
}

/* 위 두 규칙은 순서로 활성/비활성 색을 정해두고 있었다. 이제 탭으로 목록을
   바꾸므로 순서가 아니라 선택 상태(.is-active)를 따라간다. 두 규칙보다
   선택자가 구체적이라 그대로 덮어쓴다. */
.news-tabs a[data-news-tab]:not(.is-active) {
  color: rgba(9, 9, 11, 0.5);
}

.news-tabs a[data-news-tab].is-active {
  color: #6eba2c;
}

.news-tabs-divider {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(9, 9, 11, 0.5);
  font-size: 0;
  color: transparent;
}

.news-tabs-extra {
  margin-left: 10px;
}

.news-tabs-extra img {
  width: 20px;
  height: 20px;
}

.news-layout {
  grid-template-columns: minmax(0, 960px) 480px;
  gap: 100px;
}

.news-grid {
  gap: 20px;
}

.news-card {
  position: relative;
  width: auto;
  height: 291px;
  min-height: 291px;
  padding: 40px 24px;
  border: 1.5px solid transparent;
  border-radius: 24px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* 카드 전체가 공지사항·채용소식 상세로 이동한다. 제목 링크를 카드 전면으로 늘려
   제목 글자뿐 아니라 날짜·본문·빈 곳을 눌러도 같은 곳으로 가게 한다.
   h3의 overflow: hidden은 이 ::after를 자르지 않는다. 기준이 되는 상자가
   h3 바깥의 .news-card이기 때문이다. */
.news-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.news-card:hover,
.news-card:focus-within {
  border-color: #27272a;
  transform: translateY(-16px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 10px 20px rgba(0, 0, 0, 0.1),
    0 24px 40px rgba(0, 0, 0, 0.14);
}

.news-card time {
  color: rgba(9, 9, 11, 0.5);
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.news-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

.news-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(113, 113, 123, 0.15);
  color: rgba(9, 9, 11, 0.5);
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-word;
}

.popup-banner {
  width: 480px;
  height: 291px;
  min-height: 291px;
  border-radius: 32px;
  /* 사진은 관리자가 배너마다 등록하므로 마크업이 --banner-image로 넘긴다.
     값이 없으면 지금 쓰는 기본 사진이 그대로 나온다. 인라인 style의 url()은
     CSS 파일이 아니라 HTML 문서 기준이라 "./assets/images/..."로 적어야 한다. */
  background: var(--banner-image, url("../images/ui/popup-banner-bg.png")) center center / cover no-repeat;
}

/* 배너가 여러 건이면 세로로 쌓이지 않고 한 자리에서 겹쳐 바뀐다.
   배너를 absolute로 띄우는 만큼 자리(높이)는 이 래퍼가 대신 잡는다.
   브레이크포인트별 크기도 배너가 아니라 래퍼에서 다시 지정한다. */
.popup-slides {
  position: relative;
  width: 480px;
  height: 291px;
}

.popup-slides .popup-banner {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  opacity: 0;
  /* visibility까지 같이 껐다 켜야 안 보이는 배너가 탭 이동에 걸리지 않는다.
     opacity만으로는 링크가 그대로 남아 키보드로 지나가게 된다. */
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.popup-slides .popup-banner.is-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .popup-slides .popup-banner {
    transition: none;
  }
}

.site-footer {
  padding: 120px 0 88px;
}

html {
  scrollbar-gutter: stable;
}

.search-panel {
  /* 검색 밴드 높이. 아래 딤(::after)의 시작점 계산에도 쓰므로 여기서 한 번만 정의한다. */
  --search-band-height: 280px;
  position: fixed;
  inset: auto;
  top: var(--header-height, 96px);
  left: 0;
  right: 0;
  display: block;
  padding: 0;
  background: transparent;
  z-index: 80;
}

.search-panel[hidden] {
  display: none;
}

/* 검색 패널이 열리면 그 아래 화면을 어둡게 덮는다.
   패널 박스에 붙이지 않고 fixed + bottom:0으로 뷰포트에 직접 고정한다.
   패널을 기준으로 top:100% + height:100vh로 잡으면 스크롤 상태나 패널 높이
   변화에 따라 아래쪽이 비는 경우가 생긴다.
   pointer-events:none이라 기존 클릭 동작은 그대로이고, ::after가 패널의
   마지막 자식으로 그려지므로 닫기 버튼에는 z-index를 줘서 딤 위로 올린다. */
.search-panel::after {
  content: "";
  position: fixed;
  top: calc(var(--header-height, 96px) + var(--search-band-height));
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(9, 9, 11, 0.6);
  pointer-events: none;
}

.search-panel-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--search-band-height);
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: url("../images/ui/search-panel-bg.png") center / cover no-repeat;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.search-panel .global-search {
  position: relative;
  width: 600px;
  max-width: calc(100% - 40px);
}

.search-panel .global-search input[type="search"] {
  width: 100%;
  height: 80px;
  min-height: 80px;
  padding: 0 72px 0 32px;
  border: 3px solid #6eba2c;
  border-radius: 40px 24px 24px 24px;
  background: #fff;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.search-panel .global-search input::placeholder {
  color: rgba(157, 157, 157, 0.8);
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 1;
}

/* 브라우저가 붙이는 입력 지우기(x) 버튼은 전 페이지의 모든 검색 인풋에서 감춘다. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.search-panel .global-search-submit {
  position: absolute;
  top: 50%;
  right: -24px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: #27272a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
}

.search-panel .global-search-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #ffffff;
  -webkit-mask: url("../images/ui/icon-search.png") center / 24px 24px no-repeat;
  mask: url("../images/ui/icon-search.png") center / 24px 24px no-repeat;
}

/* 돋보기 버튼은 인풋 오른쪽으로 24px 걸쳐 나온다. 좁은 화면에서는 인풋이 화면 폭까지
   늘어나 버튼이 화면 밖으로 잘렸다. 걸치는 만큼 패널 오른쪽을 비워 중앙 정렬을 지킨다. */
@media (max-width: 640px) {
  .search-panel-inner {
    padding-right: 24px;
  }

  /* 버튼이 인풋 밖으로 나가 있어 오른쪽 72px을 비워둘 이유가 없다.
     좁은 화면에서는 그 여백 때문에 "무엇을 도와드릴까요?"가 잘렸다. */
  .search-panel .global-search input[type="search"] {
    padding: 0 32px 0 32px;
  }
}

.search-panel .search-close {
  position: absolute;
  top: 100%;
  left: 50%;
  /* 딤(.search-panel::after)이 마지막 자식으로 그려지므로 그 위로 올린다. */
  z-index: 1;
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.search-panel .search-close img {
  width: 24px;
  height: 24px;
}

.top-button {
  right: 64px;
  bottom: 64px;
  width: auto;
  height: auto;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.top-button > span {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* 버튼 자체는 투명하고 눈에 보이는 건 흰 원이라 상태는 원이 받는다.
   TOP 글자 위에 올려도 같이 반응하도록 부모의 :hover로 건다.
   흰 배경이라 흰색을 얹으면 변화가 없어 .btn 계열처럼 검정을 얹는다. */
.top-button:not(:disabled):hover > span {
  background: #f4f4f5;
}

.top-button:not(:disabled):active > span {
  background: #e9e9ea;
}

.top-button-icon {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
  filter: brightness(0);
}

.top-button em {
  font-family: "NPS_font", var(--font-sans);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

.site-footer p {
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

body.home-page .site-footer::before {
  background: #eef7ff;
}

body.home-page .home-news {
  position: relative;
}

body.home-page .home-news::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 80px;
  background: #eef7ff;
  pointer-events: none;
}

.site-footer::before {
  top: -150px;
  height: 240px;
}

.footer-inner {
  min-height: 152px;
}

.related-site {
  min-width: 240px;
  border-radius: 12px;
  color: #ffffff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.related-site-icon {
  width: 24px;
  height: 24px;
}

/* 푸터 "관련 사이트" 목록. 푸터가 페이지 맨 아래라 버튼 위쪽으로 펼친다.
   .site-footer에는 위쪽 곡선을 만드는 clip-path가 걸려 있어 푸터 안에 두면 fixed라도
   푸터 밖으로 나가는 만큼 잘린다(clip-path는 fixed 자손까지 자르고 컨테이닝 블록도
   가져간다). 그래서 마크업을 푸터 밖에 두고 뷰포트 기준 fixed로 띄운다.
   버튼 자리가 구간마다 다르니(PC는 오른쪽 위, PDA·모바일은 전체 너비) 열 때
   site.js가 버튼을 재서 left·width·bottom을 넣고, 스크롤·리사이즈 중에는 다시 잰다.
   z-index는 본문 위, TOP 버튼(70)·검색(80)·헤더(90) 아래인 60을 쓴다.
   값은 시안(image.png, PC 푸터를 약 134%로 확대한 캡처)에서 재서 환산했다.
   버튼과 같은 너비, 버튼 위 16px, 패널 위아래 여백 4px, 항목 한 칸 48px. */
.related-site-list {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 4px 0;
  overflow: hidden;
  list-style: none;
  border-radius: 12px;
  background: #27272a;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.related-site-list[hidden] {
  display: none;
}

/* 항목 사이 점선. 1px dashed 테두리는 브라우저가 3px씩 끊어 시안(대시 8·간격 2)과
   다르므로 그라데이션으로 그린다. 좌우 12px씩 들여둔다. */
.related-site-list li + li {
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 10px);
  background-repeat: no-repeat;
  background-position: 12px top;
  background-size: calc(100% - 24px) 1px;
}

.related-site-list a {
  display: block;
  padding: 13px 20px;
  color: #ffffff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.related-site-list a:hover,
.related-site-list a:focus-visible {
  background-color: rgba(255, 255, 255, 0.05);
}

.page-visual {
  padding: 0;
}

.page-visual-inner.container {
  width: calc(100% - 80px);
  max-width: 1840px;
  min-height: 360px;
  border-radius: 80px;
  background-color: transparent;
  background-image: url("../images/ui/page-header-smart-intro.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.smart-intro-page .page-visual h1 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.breadcrumbs > a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.breadcrumbs .breadcrumb-home-icon {
  display: block;
  width: 24px;
  height: 24px;
}

/* btn-arrow.png은 알파가 비어 있어 마스크로 쓰면 아무것도 그려지지 않는다.
   전 페이지에서 꺾쇠가 안 보이던 원인이라, 보더로 직접 그린다. */
.breadcrumbs .breadcrumb-arrow {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.breadcrumbs .breadcrumb-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid rgba(255, 255, 255, 0.6);
  border-right: 1.5px solid rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) rotate(45deg);
}

.breadcrumbs .breadcrumb-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.breadcrumbs .breadcrumb-item > span,
.breadcrumbs .breadcrumb-item > strong {
  display: inline-flex;
  align-items: center;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  transform: translateY(1px);
}

.breadcrumbs .breadcrumb-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  line-height: 0;
  cursor: pointer;
}

.breadcrumbs .breadcrumb-toggle:hover,
.breadcrumbs .breadcrumb-toggle:focus-visible {
  background-color: rgba(255, 255, 255, 0.35);
}

/* 꺾쇠(∨). btn-arrow.png은 알파가 비어 마스크로는 아무것도 안 나와 원만 보였다. */
.breadcrumbs .breadcrumb-toggle::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.breadcrumbs .breadcrumb-toggle[aria-expanded="true"]::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.breadcrumbs .breadcrumb-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.breadcrumbs .breadcrumb-dropdown[hidden] {
  display: none;
}

.breadcrumbs .breadcrumb-dropdown li {
  margin: 0;
}

.breadcrumbs .breadcrumb-dropdown a {
  display: block;
  padding: 10px 20px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.breadcrumbs .breadcrumb-dropdown a:hover,
.breadcrumbs .breadcrumb-dropdown a:focus-visible {
  background-color: #f3f7ee;
  color: #6eba2c;
}

.breadcrumbs .breadcrumb-dropdown a[aria-current="page"] {
  color: #6eba2c;
  font-weight: 700;
}

.page-visual h1 {
  font-size: 60px;
  line-height: 1.5;
}

.breadcrumbs {
  margin-bottom: 24px;
  font-size: 17px;
}

.page-main {
  padding-block: 140px 160px;
}

.life-list-page .page-main {
  padding-block: 140px 160px;
}

.life-list-page .content-section.container {
  width: calc(100% - 400px);
  max-width: none;
}

.life-list-page .section-heading.inline {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}

.life-list-page .section-heading p {
  display: none;
}

.life-list-page .section-heading h2 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: #09090b;
}

.life-list-page form.search-field {
  position: relative;
  flex: 0 0 480px;
  width: 480px;
  min-width: 0;
}

.life-list-page form.search-field input {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  padding: 0 64px 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.life-list-page form.search-field input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 1;
}

.life-list-page form.search-field .icon-button {
  position: absolute;
  top: 50%;
  right: -24px;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.life-list-page form.search-field .icon-button .icon-search {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.life-list-page form.search-field .icon-button .icon-search::before,
.life-list-page form.search-field .icon-button .icon-search::after {
  display: none;
}

.life-category-tabs {
  display: flex;
  height: 56px;
  align-items: center;
  gap: 16px;
  margin-bottom: 64px;
}

.life-category-tabs button,
.life-category-tabs a {
  display: inline-flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  padding: 13.5px 24px;
  border: 1px solid #6EBA2C;
  border-radius: 999px;
  background: #ffffff;
  color: #09090B;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}

.life-category-tabs button.is-active,
.life-category-tabs a.is-active {
  background: #6EBA2C;
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 700;
}

.life-desktop-filter {
  display: grid;
  /* 높이를 못 박지 않는다. 페이지마다 필터 행 수가 2~5개로 다른데 고정 높이를 주면
     행이 적은 페이지(체험기관·의료기관)에 큰 빈 칸이 남고, 반대로 폭이 좁아 칩이
     줄바꿈되면 행끼리 겹쳤다. 행 자체가 min-height 48px을 갖고 있어 내용만으로도
     줄 간격은 유지된다. */
  align-content: start;
  padding: 40px 0;
  border-top: 1.5px solid #27272a;
  border-bottom: 1.5px solid #27272A;
}

.life-desktop-filter-main {
  display: grid;
  align-content: start;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(113, 113, 123, 0.22);
}

.life-desktop-filter-row {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 40px;
  min-height: 48px;
}

.life-desktop-filter-title {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 12px;
  color: #09090b;
}

.life-desktop-filter-title::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
}

.life-desktop-filter-title strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.life-desktop-filter-title small {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.life-desktop-filter-chips {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 12px;
}

.life-desktop-filter-chips button {
  display: inline-flex;
  /* 폭이 좁아지면 "초등학생 (7세~12세)" 같은 라벨이 2줄이 되는데
     height 고정이면 글자가 칩 밖으로 5px 넘친다. 최소 높이로 둔다. */
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 9.5px 24px;
  border: 0;
  border-radius: 999px;
  background: #F4F4F5;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.life-desktop-filter-chips button.is-active {
  border: 1.5px solid #27272a;
  background: #fff;
  font-weight: 700;
}

/* 목록에 없는 항목을 직접 적어 칩으로 추가하는 칸(의료기관의 "기타 진료과목").
   칩과 같은 줄에서 남는 폭을 차지하고, 줄이 차면 칩처럼 다음 줄로 내려간다. */
.life-desktop-filter-chips .chip-input {
  position: relative;
  display: flex;
  /* 폭 고정. 1920에서 남는 폭이 정확히 이만큼이라 그때 모습은 그대로다.
     칩 줄은 화면 폭에 따라 210~1105px로 크게 달라지므로, 줄보다 넓어지는 구간에서는
     max-width가 줄 폭까지 줄여 준다(고정만 걸면 필터 밖으로 70px까지 삐져나온다). */
  flex: 0 0 408px;
  width: 408px;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  /* 버튼(48px)이 입력칸 끝에 반쯤 걸쳐 나오게 한다(상단 검색창과 같은 모양).
     밀려나온 만큼을 이 여백으로 미리 비워 둬야 버튼이 줄 밖으로 튀어나가지 않는다.
     입력칸은 이 여백을 뺀 폭을 쓰고, 버튼은 right:0으로 여백 바깥쪽 끝에 선다. */
  padding-right: 24px;
}

.life-desktop-filter-chips .chip-input input {
  width: 100%;
  min-height: 48px;
  /* 오른쪽은 버튼(48px)이 앉을 자리를 비워 둔다. */
  padding: 0 60px 0 24px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.life-desktop-filter-chips .chip-input input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 1;
}

/* 위의 칩 규칙(.life-desktop-filter-chips button)이 이 버튼까지 회색 알약으로
   만들어 버리므로 여기서 되돌린다. 생김새는 목록 상단 검색 버튼과 같다. */
.life-desktop-filter-chips .chip-input .icon-button {
  position: absolute;
  top: 50%;
  right: 0;
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  transform: translateY(-50%);
}

.life-desktop-filter-chips .chip-input .icon-search {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.life-desktop-filter-chips .chip-input .icon-search::before,
.life-desktop-filter-chips .chip-input .icon-search::after {
  display: none;
}

/* 같은 칸의 PDA·모바일용. 1024 이하에서는 위의 PC 필터가 숨고 모바일 필터 패널이
   대신 뜨는데, 그쪽 칩은 38px·15px이라 칸도 거기에 맞춘다. 아래 미디어쿼리에 있는
   .life-age-chips button(0,1,1)보다 구체성이 높아 그 값에 먹히지 않는다. */
.care-filter-chips .chip-input {
  position: relative;
  display: flex;
  /* 이쪽도 같은 방식. 모바일 필터 패널은 줄이 320~969px이라 고정 폭이 넘칠 때가
     있어 max-width로 받아 준다. */
  flex: 0 0 320px;
  width: 320px;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  /* 버튼(38px)이 반쯤 걸쳐 나온다. 위와 같은 이유로 그만큼을 여백으로 비워 둔다. */
  padding-right: 19px;
}

.care-filter-chips .chip-input input {
  width: 100%;
  min-height: 38px;
  /* 오른쪽은 버튼(38px)이 앉을 자리를 비워 둔다. */
  padding: 0 46px 0 18px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.care-filter-chips .chip-input input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 1;
}

.care-filter-chips .chip-input .icon-button {
  position: absolute;
  top: 50%;
  right: 0;
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  transform: translateY(-50%);
}

.care-filter-chips .chip-input .icon-search {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.care-filter-chips .chip-input .icon-search::before,
.care-filter-chips .chip-input .icon-search::after {
  display: none;
}

.life-desktop-date-fields {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

/* 날짜 칸. 값이 "YYYY.MM.DD"(108px)에서 실제 날짜로 바뀌면 글자 폭이 달라진다.
   NPS_font에는 tabular-nums(tnum)가 없어 숫자마다 폭이 제각각이라
   "1111.11.11"은 56px, "0000.00.00"은 99px까지 벌어진다. 텍스트를 왼쪽에 붙이면
   아이콘까지의 거리가 고른 날짜에 따라 15~47px로 널뛴다.
   그래서 텍스트를 오른쪽 끝에 붙여 아이콘과의 간격을 24px로 못박고,
   들쭉날쭉한 여백은 왼쪽으로 몰아준다. padding-right 72px = 아이콘 24 + 간격 24 +
   오른쪽 여백 24라, 칸 너비가 바뀌어도 이 24px는 그대로 유지된다. */
.life-desktop-date-fields input {
  /* 가장 넓은 값 "YYYY.MM.DD"(108px)가 잘리지 않는 최소치 + 여유 */
  width: 208px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5 url("../images/ui/icon-calendar.svg") no-repeat;
  background-size: 24px 24px;
  /* 아이콘 상단 눈금 때문에 정중앙에 두면 시각적으로 2px 내려가 보인다 */
  background-position: right 24px top calc(50% - 2px);
  color: #09090b;
  padding: 0 72px 0 24px;
  text-align: right;
  font-size: 17px;
}

.life-desktop-date-fields span {
  color: rgba(9, 9, 11, 0.5);
  font-size: 17px;
}

.life-desktop-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 40px;
}

.life-desktop-filter-actions button {
  min-height: 64px;
  border-radius: 12px;
  font-size: 19px;
  line-height: 1.5;
}

.life-desktop-reset {
  display: inline-flex;
  width: 168px;
  height: 64px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 1px solid rgba(113, 113, 123, 0.22);
  border-radius: 13px;
  background: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.life-desktop-reset-icon {
  width: 24px;
  height: 24px;
}

.life-desktop-search {
  display: inline-flex;
  width: 118px;
  height: 64px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: #27272A;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
}

.life-list-page .filter-chips,
.life-list-page .life-mobile-total,
.life-list-page .card-grid.three {
  display: none;
}

.life-desktop-results {
  display: grid;
  margin-top: 64px;
}

.life-desktop-results .life-total {
  display: block;
  margin: 0 0 40px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.life-desktop-results .life-total strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #6eba2c;
}

.life-desktop-list {
  display: grid;
  gap: 40px;
}

/* 카드 어디를 눌러도 상세로 간다. 전에는 썸네일(카드의 26%)만 눌렸는데
   hover 효과(썸네일 초록 테두리)는 카드 전체에 반응해, 눌릴 것처럼 보이는 본문이
   아무 동작도 하지 않았다. 넓은 쪽인 hover에 클릭 범위를 맞춘다.
   방식은 게시판·행사 카드와 같다 — 제목 링크를 카드 전체로 늘린다. */
.life-desktop-card {
  position: relative;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr) 144px;
  gap: 64px;
  padding-bottom: 40px;
  border-bottom: 1.5px solid rgba(113, 113, 123, 0.22);
}

/* z-index가 필요하다. 메타의 dt가 position: relative여서 늘린 링크보다 위에 그려지고,
   그대로 두면 "운영 시간·주소" 라벨 위에서는 클릭이 먹히지 않는다
   (.life-event-copy h3 a::after와 같은 이유·같은 처방). */
.life-desktop-copy h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 즐겨찾기 하트와 아래 버튼(신청·예약, 상세 정보, 지도 보러가기)은 늘린 링크보다
   더 위로 올려 자기 동작을 유지한다. 하트는 공통 규칙이 이미 absolute라 z-index만 준다.
   버튼을 감싼 상자가 아니라 버튼 자체를 올린다. 상자를 올리면 그 열의 빈 자리까지
   링크를 가려 카드에서 잘려 나간다. */
.life-desktop-thumb .life-desktop-favorite {
  z-index: 2;
}

.life-desktop-actions a,
.life-desktop-actions button {
  position: relative;
  z-index: 2;
}

.life-desktop-card:last-child {
  height: 260px;
  padding-bottom: 0;
  border-bottom: 0;
}

.life-desktop-thumb {
  position: relative;
  display: grid;
  width: 400px;
  height: 260px;
  place-items: center;
  border: 1px solid rgba(113, 113, 123, 0.22);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0 48%, transparent 49%),
    #f4f4f5;
}

/* 등록한 사진이 들어오는 자리. 이 상자 안에 <img class="life-desktop-photo">를 넣으면
   상자를 꽉 채우고, 없으면 아래 ::before/::after가 그리는 자리표시가 그대로 보인다.
   커스텀 속성(--card-image) 대신 <img>로 받는 이유:
   - 자리표시가 배경이 아니라 ::before/::after라, 배경으로 깔면 사진 위에 회색 원과
     아이콘이 그대로 남는다. 실제 요소라야 그 위를 덮는다.
   - alt를 줄 수 있고 로딩·크기 조절을 브라우저가 맡는다.
   z-index 1은 늘린 제목 링크와 같은 층이지만 링크가 문서에서 뒤에 있어 그 위에
   그려진다. 그래서 사진을 눌러도 상세로 간다. 즐겨찾기 하트는 2라 그대로 눌린다.

   사진을 실제로 넣을 때 같이 손봐야 하는 것: 아래 hover 초록 테두리와
   .care-desktop-card.is-disabled의 어둡게가 둘 다 이 상자의 inset box-shadow다.
   inset box-shadow는 배경 바로 위에 그려져 자식인 사진에 가려지므로, 사진이
   들어오는 순간 둘 다 안 보인다. 그때는 사진보다 위(z-index 2)에 오는 오버레이로
   옮겨야 한다. 지금은 사진을 쓰는 페이지가 없어 드러나지 않는다. */
.life-desktop-thumb .life-desktop-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.life-desktop-card.is-hovered .life-desktop-thumb {
  /* border 두께 변화 대신 box-shadow로 → 레이아웃 시프트 없음 */
  border-color: #6eba2c;
  box-shadow: inset 0 0 0 3px #6eba2c;
}

.life-desktop-thumb::before {
  content: "";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(113, 113, 123, 0.08);
}

.life-desktop-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  -webkit-mask: url("../images/ui/apartment.png") center / contain no-repeat;
  mask: url("../images/ui/apartment.png") center / contain no-repeat;
  background: rgba(9, 9, 11, 0.13);
}

.life-desktop-thumb button {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 58%, #fff 0 0),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.life-desktop-thumb button::before {
  content: "♡";
  color: #71717b;
  font-size: 24px;
  line-height: 1;
}

.life-desktop-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 16px;
}

.life-desktop-badge {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(110, 186, 44, 0.08);
  font-family: "NPS_font", var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #6EBA2C;
}

.life-desktop-copy h3 {
  min-width: 0;
  overflow: hidden;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-desktop-copy dl {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.life-desktop-copy dl div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
}

.life-desktop-copy dt,
.life-desktop-copy dd {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: #09090B;
}

.life-desktop-copy dt {
  position: relative;
  padding-left: 32px;
  font-weight: 700;
}

/* 영문 라벨(Capacity·Age group·Address 등)은 100px 칸(아이콘 32px 제외 68px)에서
   2줄로 접힌다. 라벨 칸을 넓히고 줄바꿈을 막아 한 줄로 둔다.
   목록 카드를 쓰는 페이지(돌봄서비스 신청·예약, 의료기관, 체험기관 2종) 공통. */
html[lang="en"] .life-desktop-copy dl div,
html[lang="en"] .care-desktop-card .life-desktop-copy dl div {
  grid-template-columns: 130px minmax(0, 1fr);
}

html[lang="en"] .life-desktop-copy dt {
  white-space: nowrap;
}

.life-desktop-copy dt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: var(--meta-icon, var(--meta-icon-fallback)) center / contain no-repeat;
}

.life-desktop-copy dl {
  --meta-icon-fallback: url("../images/ui/dt-icon-1.png");
}

.life-desktop-copy dd {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  color: #09090B;
}

.life-desktop-copy dd strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #6EBA2C;
}

.life-desktop-copy dd em {
  margin: 0 8px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.life-desktop-copy dd b {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
}

.life-desktop-actions {
  display: grid;
  align-content: start;
  gap: 12px;
}

.life-desktop-actions .btn {
  display: inline-flex;
  width: 144px;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 18px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.life-desktop-actions .btn-primary {
  background: #6eba2c;
}

/* "지도 보러가기" 버튼 모양. 의료기관과 체험기관 2종이 같은 버튼을 쓴다.
   같은 .care-desktop-card를 쓰는 돌봄서비스 신청·예약은 버튼 구성이 달라 제외한다. */
.life-medical-page .care-desktop-card .life-desktop-actions,
.life-kids-page .care-desktop-card .life-desktop-actions,
.life-culture-page .care-desktop-card .life-desktop-actions {
  margin-left: -40px;
}

.life-medical-page .care-desktop-card .life-desktop-actions .btn,
.life-kids-page .care-desktop-card .life-desktop-actions .btn,
.life-culture-page .care-desktop-card .life-desktop-actions .btn {
  width: 172px;
  height: 56px;
  min-height: 56px;
  gap: 4px;
  padding: 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.life-medical-page .life-desktop-actions-icon,
.life-kids-page .life-desktop-actions-icon,
.life-culture-page .life-desktop-actions-icon {
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  -webkit-mask-image: url("../images/ui/right-icon.png");
  mask-image: url("../images/ui/right-icon.png");
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #09090B;
}

.life-desktop-actions .btn-ghost {
  border-color: rgba(113, 113, 123, 0.22);
  background: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.life-event-grid {
  display: grid;
  /* 3열 고정이면 컨테이너가 좁아질 때 카드가 235px까지 눌려, 메타 값 칸이 81px가 되고
     "YYYY.MM.DD - YYYY.MM.DD"(234px 필요)가 4줄로 깨진다(PC 1100~1300).
     카드가 400px 밑으로 내려가지 않게 해 폭이 부족하면 스스로 2열이 되도록 한다.
     1920에서는 카드 475px로 종전과 같은 3열.

     auto-fit이 아니라 auto-fill이다. auto-fit은 카드가 없는 열을 0으로 접어 버려서
     검색 결과가 1~2건이면 남은 가로를 카드가 다 먹으며 폭이 늘어났다. auto-fill은
     빈 열을 그대로 둬, 결과 개수와 상관없이 3열 기준 카드 폭이 유지된다. */
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 64px 40px;
}

.life-event-card {
  position: relative;
  display: grid;
  height: 590px;
  overflow: hidden;
  border: 1px solid rgba(113, 113, 123, 0.22);
  border-radius: 32px;
  background: #fff;
}

.life-event-card:not(.is-muted):hover {
  /* border 두께 변경은 레이아웃 시프트를 유발하므로, 두께 불변인 box-shadow로 표현 */
  border-color: #6eba2c;
  box-shadow: 0 0 0 3px #6eba2c;
}

.life-event-card.is-muted > * {
  opacity: 0.48;
}

.life-event-card.is-muted::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 1;
}

.life-event-thumb {
  position: relative;
  min-height: 304px;
  padding: 32px;
  background: var(--thumb-default);
}

/* 등록한 사진이 들어오는 자리. <img class="thumb-photo">를 썸네일 안에 넣으면
   상자를 꽉 채우고, 없거나 로딩에 실패하면 위의 기본 이미지가 그대로 보인다.
   배지(span)는 사진 위에 떠 있어야 하므로 사진보다 아래 층에 둔다. */
.thumb-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.life-event-thumb span {
  /* 사진(.thumb-photo)보다 위에 떠 있어야 한다. */
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #6eba2c;
  border-radius: 7px;
  background: #fff;
  color: #6eba2c;
  font-size: 15px;
  line-height: 1.5;
}

.life-event-card.is-upcoming .life-event-thumb span,
.life-event-card.is-muted .life-event-thumb span {
  border-color: #52525C;
  color: #52525C;
}

.life-event-copy {
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 40px 32px;
}

/* 제목은 두 줄까지만 보이고 넘치면 말줄임(…)이다. 한 줄짜리 제목도 두 줄 자리를
   차지하게 min-height를 두어, 아래 항목 목록이 카드마다 같은 높이에서 시작한다.
   3em = 25px x 1.5(line-height) x 2줄. */
.life-event-copy h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 3em;
  overflow: hidden;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

/* 카드 전체가 운영 프로그램 상세로 이동한다. 제목 링크를 카드 전면으로 늘려 제목 글자뿐
   아니라 사진·배지·정보 목록·빈 곳을 눌러도 같은 곳으로 가게 한다. 카드에 걸린
   overflow: hidden은 카드 크기와 같은 이 ::after를 자르지 않는다.
   z-index가 필요하다. dt가 position: relative여서 늘린 링크(문서 순서상 앞)보다 위에
   그려지고, 그대로 두면 "신청기간·일시·장소" 라벨 위에서는 클릭이 먹히지 않는다. */
.life-event-copy h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.life-event-copy dl {
  display: grid;
  gap: 12px;
}

.life-event-copy dl div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
}

.life-event-copy dt,
.life-event-copy dd {
  color: #09090b;
  font-size: 17px;
  line-height: 1.5;
}

/* 값도 한 줄로 끊는다. 주소처럼 긴 값이 두 줄로 접히면 그 아래 줄이 카드마다
   어긋나고 카드 높이(590px)를 넘겨 잘려 나간다. */
.life-event-copy dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-event-copy dt {
  position: relative;
  padding-left: 28px;
  font-weight: 700;
}

.life-event-copy dt::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--meta-icon, var(--meta-icon-fallback)) center / contain no-repeat;
}

.life-event-copy dl {
  /* 클래스가 없는 항목이 들어와도 빈 자리가 남지 않게 달력을 기본으로 둔다. */
  --meta-icon-fallback: url("../images/ui/life-icon-1.png");
}

.life-event-copy dd {
  font-weight: 400;
}

.life-list-page .pagination {
  gap: 8px;
  height: 40px;
  margin-top: 160px;
}

.life-list-page .pagination a {
  width: 40px;
  height: 40px;
  font-size: 15px;
  font-weight: 400;
}

.life-list-page .site-footer {
  padding-bottom: 69px;
}

.life-list-page .site-footer::before {
  top: -150px;
  height: 194px;
}

.program-list-page .page-main {
  padding-block: 140px 160px;
}

.program-list-page .content-section.container {
  width: calc(100% - 400px);
  max-width: none;
}

.program-list-page .section-heading.inline {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}

.program-list-page .section-heading p {
  display: none;
}

.program-list-page .section-heading h2 {
  color: #09090b;
  font-size: 44px;
  line-height: 1.32;
}

.program-list-page .program-list-heading h2 span:first-child {
  color: #09090b;
}

.program-list-page .program-list-heading h2 span + span {
  color: #6eba2c;
}

.program-list-page .content-toolbar {
  width: min(480px, 42vw);
  min-width: 0;
  gap: 8px;
}

.program-list-page .content-toolbar .select-control {
  display: none;
}

.program-list-page .content-toolbar select,
.program-list-page .search-field input {
  min-height: 56px;
  border-color: rgba(113, 113, 123, 0.18);
  border-radius: 999px;
  background-color: #f4f4f5;
  color: rgba(9, 9, 11, 0.75);
  font-size: 16px;
}

.program-list-page .search-field .icon-button {
  top: 4px;
  right: 4px;
  width: 48px;
  height: 48px;
}

.program-list-page .filter-chips,
.program-list-page .program-total,
.program-list-page .card-grid.three {
  display: none;
}

.program-list-page .life-desktop-results {
  display: grid;
  margin-top: 64px;
}

.program-list-page .life-desktop-results .life-total {
  display: block;
  margin: 0 0 40px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.program-list-page .life-desktop-results .life-total strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #6eba2c;
}

.program-list-page .content-toolbar .search-field {
  position: relative;
  width: 480px;
  min-width: 0;
}

.program-list-page .content-toolbar .search-field input {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  padding: 0 64px 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.program-list-page .content-toolbar .search-field input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 1;
}

.program-list-page .content-toolbar .search-field .icon-button {
  position: absolute;
  top: 50%;
  right: -24px;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.program-list-page .content-toolbar .search-field .icon-button .icon-search {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.program-list-page .content-toolbar .search-field .icon-button .icon-search::before,
.program-list-page .content-toolbar .search-field .icon-button .icon-search::after {
  display: none;
}

.program-list-page .pagination {
  gap: 8px;
  height: 40px;
  margin-top: 160px;
}

.program-list-page .pagination a {
  width: 40px;
  height: 40px;
  font-size: 15px;
  font-weight: 400;
}

.program-list-page .site-footer {
  padding-bottom: 69px;
}

.program-list-page .site-footer::before {
  top: -150px;
  height: 194px;
}

.program-detail-page .page-main {
  padding-block: 140px 160px;
}

.program-detail-page .content-section.container {
  width: calc(100% - 400px);
  max-width: none;
}

.program-detail-page .detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0;
}

.program-detail-mobile-heading {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  color: #09090b;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.32;
}

.program-detail-mobile-heading span + span {
  color: #6eba2c;
}

.program-detail-page .detail-article {
  grid-column: 1;
  display: block;
  width: 100%;
  margin-top: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.program-detail-desktop-content,
.program-detail-page .detail-side {
  display: none;
}

/* 카드 치수는 1520px(=1920 뷰포트의 컨테이너) 기준 비율로 환산.
   고정 px(좌 760 / 우 80 + gap 64)로 두면 1920 미만에서 남는 폭이 전부
   오른쪽 텍스트 칸에서 깎여 1280 이하에선 0px이 되고 카드가 컨테이너를 넘쳤다.
   우측 9.4737% = 80(패딩) + 64(비어 있던 2번째 트랙의 gap) = 144 / 1520.

   왼쪽 패딩은 이미지 오른쪽 끝(left 5.2632% + width 42.7632% = 48.0264%)에서
   64px 띄운 자리다. 예전 50% 고정은 간격까지 비율로 묶어버려서
   1920에서 30px이던 것이 1200에서 15px까지 좁아졌다. */
.program-detail-mobile-card {
  position: relative;
  display: grid;
  min-height: 526px;
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  overflow: visible;
  padding: 64px 9.4737% 64px calc(48.0264% + 64px);
  border-radius: 48px 120px 48px 48px;
  background: linear-gradient(108deg, #fff7eb 0%, #f4faec 100%);
}

/* 체크무늬 그라디언트는 "이미지 없음"이 아니라 투명 영역처럼 읽혀서
   카드형 게시판과 같은 공통 기본 썸네일로 바꿨다. */
.program-detail-mobile-main-image {
  background: var(--thumb-default);
}

/* 카드와 같은 1520px 기준 비율(80/1520, 650/1520)로 환산하고
   원본 650:470 비율을 유지한다. 고정 650×470이면 카드가 줄어도
   그대로라 카드 밖으로 튀어나왔다. */
.program-detail-mobile-media {
  position: absolute;
  top: -24px;
  left: 5.2632%;
  width: 42.7632%;
  height: auto;
  aspect-ratio: 65 / 47;
  border-radius: 24px 96px 24px 24px;
  /* 사진은 관리자가 장마다 등록하므로 마크업이 --program-image로 넘긴다.
     등록 전에는 아래 깔린 공통 기본 썸네일이 그대로 보인다. 전에 쓰던
     program-art.jpg는 그림 자체가 체크무늬라 사진 자리가 뚫린 것처럼 읽혔다. */
  background: var(--program-image, none) center / cover no-repeat, var(--thumb-default);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
}

/* 사진이 여러 장이어도 원래 absolute라 같은 자리에 겹친다. 보이는 한 장만 남기고
   나머지는 꺼 두되, 나가는 장은 들어오는 장이 다 덮은 뒤에 꺼진다. */
.program-detail-mobile-media {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s linear 0.6s, visibility 0s linear 0.6s;
}

.program-detail-mobile-media.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.6s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .program-detail-mobile-media,
  .program-detail-mobile-media.is-active {
    transition: none;
  }
}

/* 즐겨찾기 하트 버튼 공통.
   사진 오른쪽 위에 떠 있는 버튼이다. 전에는 .program-detail-mobile-media::after,
   .facility-service-image::after로 그린 장식이라 눌러도 아무 일이 없었고, 목록·마이페이지
   카드처럼 실제 <button>으로 바꿨다. 아이콘 교체는 site.js가 <img>의 src를 갈아 끼운다.

   같은 아이콘이 세 클래스로 흩어져 크기도 제각각이었다(상세 이미지 위 40px,
   목록 카드 32px, 마이페이지 카드 32px). 생김새와 크기는 여기서 한 번에 잡고,
   위치(top/right)만 담기는 상자에 따라 각자 규칙에 남긴다.

   선택자마다 명시도를 달리 적은 이유가 있다.
   - .life-desktop-thumb .life-desktop-favorite (0,2,0): 기반인
     .life-desktop-thumb button(0,1,1)이 40px 원형 배경을 잡고 있어 그걸 이겨야 한다.
   - .mypage-facility-favorite (0,1,0): pages.css의 같은 명시도 규칙을
     figma-match가 나중에 로드돼 이긴다. */
/* 마이페이지 시설 카드도 카드 어디를 눌러도 상세로 간다. 전에는 data-card-href를
   site.js가 읽어 이동했는데, 카드가 <a>가 아니라 새 탭·주소 복사·검색엔진 수집이
   안 됐고 즐겨찾기 목록 카드는 안에 링크가 하나도 없어 스크립트가 막히면 갈 방법이
   없었다. 다른 목록과 같은 방식(제목 링크 늘리기)으로 맞춘다. */
.mypage-facility-card {
  position: relative;
}

.mypage-facility-copy h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 즐겨찾기 하트와 "상세 이용 정보"는 늘린 링크보다 위에 둬 자기 동작을 지킨다. */
.mypage-facility-action {
  position: relative;
  z-index: 2;
}

.favorite-badge,
.life-desktop-thumb .life-desktop-favorite,
.mypage-facility-favorite {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.favorite-badge img,
.life-desktop-thumb .life-desktop-favorite img,
.mypage-facility-favorite img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.favorite-badge {
  top: 32px;
  right: 32px;
}

.program-detail-mobile-copy {
  display: grid;
  gap: 24px;
  align-self: start;
}

.program-detail-mobile-copy h2 {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.program-detail-mobile-copy p {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
}

.program-detail-mobile-meta {
  display: grid;
  gap: 12px;
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
}

.program-detail-mobile-meta div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
}

.program-detail-mobile-meta dt {
  position: relative;
  padding-left: 32px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
}

.program-detail-mobile-meta dt span {
  display: none;
}

.program-detail-mobile-meta dt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: var(--meta-icon, var(--meta-icon-fallback)) center / contain no-repeat;
}

.program-detail-mobile-meta {
  --meta-icon-fallback: url("../images/ui/dt-icon-1.png");
}

/* 운영 시간은 값이 여러 줄이라 라벨을 위로 붙인다(항목 순서와 무관하게). */
.program-detail-mobile-meta .meta-time dt {
  align-self: start;
}

.program-detail-mobile-meta dd {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.program-detail-mobile-meta dd strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #6EBA2C;
}

.program-detail-mobile-meta dd em {
  margin: 0 8px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.program-detail-mobile-meta dd b {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
}

.facility-service-carousel,
.program-detail-mobile-carousel {
  display: grid;
  grid-template-columns: 48px auto 48px;
  gap: 24px;
  align-items: center;
  justify-content: center;
  color: #09090b;
  font-size: 17px;
  font-weight: 700;
}

.program-detail-mobile-copy > .program-detail-mobile-carousel {
  grid-template-columns: 48px auto 48px 1fr;
  justify-self: stretch;
  margin-top: 40px;
  align-items: center;
}

/* .carousel-bar와 같은 이유로 1px 올린다. align-items:center는 상자를 맞추는데
   "01" 잉크 중심이 상자 중심보다 1px 위라, 선만 내려가 보인다. */
.program-detail-mobile-copy > .program-detail-mobile-carousel::after {
  content: "";
  position: relative;
  top: -1px;
  margin-left: 8px;
  height: 1px;
  background: rgba(113, 113, 123, 0.15);
}

.facility-service-carousel button,
.program-detail-mobile-carousel button {
  display: inline-flex;
  width: 48px;
  height: 48px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.08);
  color: #27272a;
  font-size: 24px;
  cursor: pointer;
}

.facility-service-carousel .carousel-arrow,
.program-detail-mobile-carousel .carousel-arrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-mask: url("../images/ui/btn-arrow.png") no-repeat center / contain;
  mask: url("../images/ui/btn-arrow.png") no-repeat center / contain;
}

/* 이전 화살표는 항상 다음과 같은 진한 색이다. 첫 장에서 흐리게 두던 .is-first
   규칙은 지웠다. 첫 장에서 이전을 눌러도 마지막 장으로 돌아가므로(site.js) 실제로는
   눌리는 버튼인데 비활성으로 보였다. */
.facility-service-carousel .carousel-arrow-prev,
.program-detail-mobile-carousel .carousel-arrow-prev {
  background-color: #27272A;
  transform: rotate(180deg);
}

.facility-service-carousel .carousel-arrow-next,
.program-detail-mobile-carousel .carousel-arrow-next {
  background-color: #27272A;
}

.facility-service-carousel .carousel-position,
.program-detail-mobile-carousel .carousel-position {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.6);
}

.facility-service-carousel .carousel-position strong,
.program-detail-mobile-carousel .carousel-position strong {
  font-weight: 700;
  color: #09090B;
}

.facility-service-carousel .carousel-position em,
.program-detail-mobile-carousel .carousel-position em {
  margin: 0 8px;
  font-style: normal;
}

/* "01 / 04"는 한 덩어리다. 끊기면 숫자와 총 개수가 따로 노는 것처럼 보인다. */
.carousel-position {
  white-space: nowrap;
}

/* 360 미만에서는 캐러셀 상자가 220px까지 좁아진다. 화살표 48px 두 개와 좌우
   gap 39px 두 개가 174px를 먹어 가운데 칸이 46px만 남고, "01 / 04"(69px)가
   두 줄로 갈라졌다. 이 폭에서만 간격을 줄여 한 줄로 들어가게 한다
   (48+16+69+16+48 = 197 ≤ 220). 360 이상은 종전 39px 그대로다.
   한국어·영문 모두 같은 증상이라 언어 구분 없이 적용한다. */
@media (max-width: 359px) {
  .facility-service-carousel,
  .program-detail-mobile-carousel {
    gap: 16px;
  }
}

.program-detail-mobile-contact {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
}

/* "관련 문의"와 연락처를 한 줄에 둔다. h3·p가 블록이라 두 줄로 쌓여 있었다.
   ≤640은 아래 모바일 블록이 다시 세로로 쌓는다(그쪽은 h3에 margin-bottom 16px이 있다). */
.program-detail-mobile-contact > div:not(.program-detail-mobile-actions) {
  display: flex;
  align-items: center;
  gap: 16px;
}

.program-detail-mobile-contact h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #09090b;
  font-size: 19px;
  line-height: 1.5;
}

.program-detail-contact-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.program-detail-mobile-contact p {
  margin: 0;
  color: #09090b;
  font-size: 17px;
  line-height: 1.5;
}

.program-detail-mobile-actions {
  display: flex;
  gap: 12px;
}

/* PC에서는 "목록으로"를 왼쪽, "신청·예약하기"를 오른쪽에 둔다. 마크업 순서(신청·예약하기가
   먼저)는 세로로 쌓이는 PDA·모바일 기준이라 그대로 두고, 여기서 순서만 바꾼다.
   ≤1024 블록에서 order를 되돌려 쌓일 때는 신청·예약하기가 위에 온다. */
.program-detail-mobile-actions .btn-ghost {
  order: -1;
}

.program-detail-mobile-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 118px;
  min-height: 64px;
  border-radius: 12px;
  padding: 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.program-detail-mobile-actions-icon {
  width: 24px;
  height: 24px;
}

.program-detail-mobile-actions .btn-ghost {
  border-color: rgba(113, 113, 123, 0.22);
  background: #fff;
  color: #09090b;
}

.program-detail-mobile-body {
  display: grid;
  gap: 40px;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1.5px solid #27272a;
}

/* 760×1072 고정 → 1520px 기준 50% 폭 + 760:1072 비율 유지. */
.program-detail-mobile-main-image {
  width: 50%;
  height: auto;
  aspect-ratio: 95 / 134;
}

.program-detail-mobile-body p {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.program-detail-mobile-files {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  overflow: hidden;
  border-top: 1px solid #27272a;
}

.program-detail-mobile-files strong,
.program-detail-mobile-files a {
  display: flex;
  min-height: 64px;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  color: #09090b;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.program-detail-mobile-files strong {
  justify-content: center;
  background: #f7f7f7;
}

.program-detail-mobile-files a {
  gap: 8px;
  padding: 0 40px;
  background: #fff;
}

.program-detail-mobile-files a span {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../images/ui/file-icon.png") center / contain no-repeat;
  font-size: 0;
  color: transparent;
}

.program-detail-page .site-footer {
  padding-bottom: 69px;
}

.program-detail-page .site-footer::before {
  top: -150px;
  height: 194px;
}

.feature-card,
.facility-card,
.program-card,
.life-card,
.news-card,
.route-card,
.term-box,
.profile-panel,
.detail-side,
.result-panel,
.auth-panel,
.form-panel,
.terms-doc {
  border-radius: 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.login-page-section {
  max-width: 1520px;
}

.login-intro {
  padding-bottom: 64px;
  border-bottom: 2px solid rgba(9, 9, 11, 0.56);
}

.login-intro h2 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: #09090b;
}

.login-intro p {
  margin-top: 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.login-grid {
  display: grid;
  grid-template-columns: minmax(0, 696px) minmax(0, 728px);
  gap: 64px;
  margin-top: 40px;
}

.government-login h3,
.id-login h3 {
  margin-bottom: 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.login-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.login-method,
.id-login-panel {
  border: 1.5px solid rgba(113, 113, 123, 0.22);
  border-radius: 32px;
  background: #fff;
}

.login-method {
  display: flex;
  min-height: 248px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  text-align: center;
}

.login-method:hover {
  border-width: 2px;
  border-color: #6eba2c;
  background: rgba(110, 186, 44, 0.05);
}

/* 호버하면 원 배경은 넷 다 흰색. */
.login-method:hover .login-method-icon.mobile-id,
.login-method:hover .login-method-icon.simple,
.login-method:hover .login-method-icon.finance,
.login-method:hover .login-method-icon.cert {
  background-color: #fff;
}

/* 아이콘 색은 호버 시 #6EBA2C. PNG라 color로는 물들지 않아서 원본 이미지를
   숨기고 같은 PNG를 마스크로 쓴 ::before를 덮어 칠한다(사이트의 다른 아이콘
   착색과 같은 방식). 평상시에는 원본 PNG 그대로 둔다.

   모바일 신분증은 여기서 뺐다. 그 아이콘만 빨강·파랑 다색이라 마스크로 칠하면
   로고가 단색으로 뭉개진다. 원 배경만 흰색으로 바뀌고 로고는 원래 색 그대로다. */
.login-method:hover .login-method-icon.simple,
.login-method:hover .login-method-icon.finance,
.login-method:hover .login-method-icon.cert {
  background-image: none;
}

.login-method:hover .login-method-icon.simple::before,
.login-method:hover .login-method-icon.finance::before,
.login-method:hover .login-method-icon.cert::before {
  content: "";
  inset: 0;
  -webkit-mask-size: 40px 40px;
  mask-size: 40px 40px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #6eba2c;
}

.login-method:hover .login-method-icon.simple::before {
  -webkit-mask-image: url("../images/ui/icon-login-simple.png");
  mask-image: url("../images/ui/icon-login-simple.png");
}

.login-method:hover .login-method-icon.finance::before {
  -webkit-mask-image: url("../images/ui/icon-login-finance.png");
  mask-image: url("../images/ui/icon-login-finance.png");
}

.login-method:hover .login-method-icon.cert::before {
  -webkit-mask-image: url("../images/ui/icon-login-cert.png");
  mask-image: url("../images/ui/icon-login-cert.png");
}

.login-method strong {
  margin: 24px 0 10px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.login-method em {
  font-style: normal;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.login-method-icon {
  position: relative;
  display: inline-flex;
  width: 80px;
  height: 80px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4f4f5;
  color: #303036;
}

.login-method-icon::before,
.login-method-icon::after {
  content: "";
  position: absolute;
}

.login-method-icon.mobile-id,
.login-method-icon.simple,
.login-method-icon.finance,
.login-method-icon.cert {
  background-color: #f4f4f5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
}

.login-method-icon.mobile-id::before,
.login-method-icon.mobile-id::after,
.login-method-icon.simple::before,
.login-method-icon.simple::after,
.login-method-icon.finance::before,
.login-method-icon.finance::after,
.login-method-icon.cert::before,
.login-method-icon.cert::after {
  content: none;
}

.login-method-icon.mobile-id {
  background-image: url("../images/ui/icon-login-mobile-id.png");
}

.login-method-icon.simple {
  background-image: url("../images/ui/icon-login-simple.png");
}

.login-method-icon.finance {
  background-image: url("../images/ui/icon-login-finance.png");
}

.login-method-icon.cert {
  background-image: url("../images/ui/icon-login-cert.png");
}

.login-method-icon.password {
  flex: 0 0 80px;
  background: #fff;
}

.login-method-icon.password::before {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: url("../images/ui/icon-login-password.png") center / contain no-repeat;
}

/* 아이디 로그인 카드의 자물쇠 아이콘도 호버하면 #6EBA2C.
   이 아이콘은 .login-method 버튼 안이 아니라 .id-login-panel(폼) 안에 있어서
   호버를 거는 조상이 그 카드뿐이다. 위쪽 넷과 달리 원본이 ::before에 그려져
   있으므로, 그 배경을 마스크로 바꿔 칠한다. */
.id-login-panel:hover .login-method-icon.password::before {
  background: #6eba2c;
  -webkit-mask: url("../images/ui/icon-login-password.png") center / contain no-repeat;
  mask: url("../images/ui/icon-login-password.png") center / contain no-repeat;
}

.id-login-panel {
  display: grid;
  width: 100%;
  max-width: 728px;
  height: 516px;
  padding: 32px;
  background: #f4f4f5;
}

.id-login-copy {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 50px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.id-login-panel input {
  min-height: 64px;
  margin-bottom: 12px;
  border: 1px solid rgba(113, 113, 123, 0.15);
  border-radius: 13px;
  background: #fff;
  padding-inline: 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.id-login-panel input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 1;
}

.id-login-panel .btn-primary {
  min-height: 68px;
  margin-top: 28px;
  border-radius: 12px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}

.id-login-panel .auth-links {
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 50px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
}

.id-login-panel .auth-links a {
  color: inherit;
}

.id-login-panel .auth-links a + a::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 16px;
  vertical-align: middle;
  background: rgba(113, 113, 123, 0.22);
}

.anyid-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 40px;
  padding: 30px 32px;
  border-radius: 32px;
  background: #f4f4f5;
}

.anyid-panel div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}

.anyid-panel div:first-child {
  padding-right: 24px;
}

.anyid-panel div + div {
  padding-left: 24px;
  border-left: 1px solid rgba(113, 113, 123, 0.22);
}

.anyid-panel .btn-small {
  width: 93px;
  min-width: 93px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 9px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.anyid-panel p {
  position: relative;
  padding-left: 17px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
}

.anyid-panel p::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-green);
}

.member-type-panel,
.org-search-panel {
  display: grid;
  gap: 20px;
}

.member-type-panel h2,
.org-search-panel h2 {
  color: #09090b;
  font-size: 28px;
  line-height: 1.35;
}

.member-type-panel p,
.org-search-panel p {
  color: rgba(9, 9, 11, 0.58);
  font-size: 17px;
  line-height: 1.5;
}

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

.member-type-card {
  position: relative;
  display: grid !important;
  min-height: 150px;
  place-items: center;
  gap: 10px;
  border: 1.5px solid rgba(113, 113, 123, 0.22);
  border-radius: 24px;
  background: #fff;
  color: #09090b !important;
  text-align: center;
}

.member-type-card.is-selected,
.member-type-card:has(input:checked) {
  border-color: #6eba2c;
  background: rgba(110, 186, 44, 0.035);
}

.member-type-card input {
  position: absolute;
  opacity: 0;
}

.member-type-icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4f4f5;
}

.member-type-icon::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: #09090b;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.member-type-icon.home::before {
  width: 32px;
  height: 32px;
  background-color: #09090b;
  mask-image: url("../images/ui/icon-home.png");
  -webkit-mask-image: url("../images/ui/icon-home.png");
}

.member-type-icon.building::before {
  width: 32px;
  height: 32px;
  background-color: #09090b;
  mask-image: url("../images/ui/apartment.png");
  -webkit-mask-image: url("../images/ui/apartment.png");
}

.org-search-panel {
  grid-column: 1 / -1;
  padding: 38px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.org-search-field {
  margin-top: 12px;
  border: 1.5px solid rgba(113, 113, 123, 0.22);
  border-radius: 16px;
  background: #fff;
}

.org-search-field .icon-search {
  width: 24px;
  height: 24px;
  background-color: #09090b;
  -webkit-mask: url("../images/ui/icon-search.png") center / contain no-repeat;
  mask: url("../images/ui/icon-search.png") center / contain no-repeat;
}

.org-search-field .icon-search::before,
.org-search-field .icon-search::after {
  content: none;
}

.join-divider {
  height: 1.5px;
  background-image: repeating-linear-gradient(
    to right,
    #e4e4e4 0,
    #e4e4e4 6px,
    transparent 6px,
    transparent 14px
  );
}

.member-form-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 48px;
  padding: 48px;
}

.member-form-section,
.member-form-fields,
.member-child-list,
.join-child-form,
.member-child-head {
  display: grid;
}

.member-form-section {
  position: relative;
  gap: 24px;
  padding-bottom: 44px;
  border-bottom: 0;
}

.member-form-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background-image: repeating-linear-gradient(
    to right,
    #e4e4e4 0,
    #e4e4e4 6px,
    transparent 6px,
    transparent 14px
  );
}

.member-form-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #09090b;
  font-size: 28px;
  line-height: 1.35;
}

.member-form-section h2::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
}

.member-form-fields,
.join-child-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.join-field {
  display: grid !important;
  min-width: 0;
  gap: 12px;
  color: #09090b !important;
  font-size: 17px;
  font-weight: 400 !important;
  line-height: 1.5;
}

.join-field span,
.join-field legend {
  font-weight: 400;
}

.join-field input,
.join-field select {
  width: 100%;
  min-width: 0;
  min-height: 64px;
  border: 1px solid rgba(113, 113, 123, 0.15);
  border-radius: 13px;
  background: #fff;
  padding: 0 24px;
  color: #09090b;
  font: inherit;
}

.join-field input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 0.8;
}

.join-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #09090b 50%),
    linear-gradient(135deg, #09090b 50%, transparent 50%);
  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.join-field small {
  color: rgba(9, 9, 11, 0.5);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.join-radio-field {
  border: 0;
  padding: 0;
}

.join-radio-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.join-radio-option {
  display: inline-flex !important;
  position: relative;
  align-items: center;
  gap: 12px;
  color: #09090b !important;
  font-weight: 400 !important;
}

/* 라디오 공통 규격. 회원가입 정보입력(.join-radio-option)과 마이페이지 수정
   (.radio-row)이 서로 다른 방식으로 같은 모양을 그리고 있었다. 전자는 네이티브
   input을 숨기고 가짜 원(span.join-radio-dot)을, 후자는 label::before를 썼다.
   두 곳 모두 네이티브 input을 직접 그려 한 벌로 통일한다.
   padding:0은 체크박스와 같은 이유다(components.css의 input 공통 규칙이
   좌우 16px 패딩을 걸어 지정한 크기가 무시된다). */
.join-radio-option input[type="radio"],
.radio-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(113, 113, 123, 0.22);
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
}

.join-radio-option input[type="radio"]::after,
.radio-row input[type="radio"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(113, 113, 123, 0.22);
  transform: translate(-50%, -50%);
}

.join-radio-option input[type="radio"]:checked,
.radio-row input[type="radio"]:checked {
  border-color: #6eba2c;
  background: #6eba2c;
}

.join-radio-option input[type="radio"]:checked::after,
.radio-row input[type="radio"]:checked::after {
  background: #ffffff;
}

/* 가짜 원은 더 이상 쓰지 않는다(마크업에는 남아 있어 숨긴다). */
.join-radio-dot {
  display: none;
}

.join-date-field,
.join-button-field,
.join-contact-group,
.join-email-field,
.join-address-group,
.join-district-field {
  grid-column: 1 / -1;
}

.join-control-stack,
.join-email-grid,
.join-address-group,
.join-contact-group {
  display: grid;
  gap: 12px;
}

.join-button-field button,
.child-add-button {
  min-height: 64px;
  border: 0;
  border-radius: 13px;
  background: #27272a;
  color: #fff;
  font: inherit;
  font-size: 19px;
}

.join-empty-label {
  display: none;
}

.join-email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.join-email-row em {
  color: #09090b;
  font-style: normal;
}

.join-email-row.two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.member-child-head {
  gap: 16px;
}

.member-child-head p {
  color: #6eba2c;
  font-size: 18px;
  line-height: 1.65;
}

.child-add-button {
  min-height: 48px;
  border: 1px solid #6eba2c;
  background: #fff;
  color: #6eba2c;
  font-size: 17px;
}

.join-child-form.has-divider {
  padding-top: 40px;
  border-top: 1px solid rgba(113, 113, 123, 0.15);
}

.member-form-actions {
  display: flex;
  justify-content: center;
}

.member-form-actions .btn {
  min-height: 64px;
  border-radius: 13px;
}

.find-page .page-main {
  padding-block: 140px 160px;
}

.find-page .site-footer {
  min-height: 379px;
}

.find-layout {
  display: grid;
  gap: 64px;
}

.find-head {
  display: grid;
  gap: 24px;
}

.find-head h2 {
  color: #09090b;
  font-size: 44px;
  line-height: 1.5;
}

.find-tabs {
  display: flex;
  gap: 16px;
}

.find-tabs a {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 2px solid #6eba2c;
  border-radius: 999px;
  background: #fff;
  color: #09090b;
  /* 안 고른 탭은 17px Regular, 고른 탭만 19px Bold로 무게를 준다.
     ≤640 구간은 이미 같은 값이라 따로 손대지 않았다. */
  font-size: 17px;
  font-weight: 400;
}

.find-tabs .is-active {
  background: #6eba2c;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}

.find-form-panel {
  display: grid;
  gap: 64px;
  border-top: 1.5px solid #27272a;
  padding-top: 40px;
}

.find-form-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.48fr);
  gap: 100px;
  padding-bottom: 64px;
  background-image: linear-gradient(to right, #e4e4e4 7.5px, transparent 7.5px);
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 14px 1.5px;
}

/* PC에서 이 블록은 .find-form-row의 첫 칼럼이라 행 높이(1920에서 240px)만큼
   늘어난다. center면 제목이 그 한가운데 떠서 오른쪽 입력칸 첫 줄과 어긋나므로
   위로 붙인다. */
.find-section-title {
  display: flex;
  gap: 12px;
  align-items: start;
}

.leaf-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
}

/* start로 붙이면 아이콘 상자와 h3 상자의 위가 나란해지는데, h3는 25px/1.5라
   줄상자 37.5px 안에서 글자가 6.25px 내려가 있다. 그대로 두면 아이콘이 글자보다
   6px 올라가 보인다. 6.25 + (25-24)/2 = 6.75px만큼 내려 글자 중심에 맞춘다. */
.find-section-title .leaf-icon {
  margin-top: 6.75px;
}

.find-section-title h3 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.find-fields {
  display: grid;
  gap: 24px;
}

.find-field {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  color: #09090b;
  font-size: 15px;
  font-weight: 900;
}

.find-field > span {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.find-field input,
.find-field select {
  width: 100%;
  min-height: 64px;
  border: 1px solid rgba(113, 113, 123, 0.15);
  border-radius: 13px;
  background: #fff;
  padding: 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.find-field input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 1;
}

.find-field select {
  appearance: none;
  -webkit-appearance: none;
  background:
    url("../images/ui/select-chevron.png") right 24px center / 24px no-repeat,
    #fff;
  padding-right: 56px;
}

.email-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 180px;
  gap: 12px;
  align-items: center;
}

.email-inputs i {
  color: rgba(9, 9, 11, 0.62);
  font-style: normal;
  text-align: center;
}

.find-actions {
  display: flex;
  justify-content: flex-end;
}

.find-actions .btn {
  min-width: 64px;
  min-height: 64px;
  border-radius: 12px;
}

.find-actions .btn-primary {
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}

.find-result-page .page-main {
  padding-block: 140px 160px;
}

.find-result-section {
  width: min(1520px, calc(100% - 400px));
}

.find-result-page .result-panel {
  display: flex;
  width: 100%;
  min-height: 404px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  margin: 0;
  padding: 64px;
  border: 0;
  border-radius: 32px;
  background: #f4f4f5;
  box-shadow: none;
  text-align: center;
}

.find-result-message {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.find-result-page .result-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  margin: 0;
  background: url("../images/ui/complete-check.png") center / contain no-repeat;
}

.find-result-page .result-copy {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.find-result-page .result-copy span {
  display: block;
}

.find-result-page .result-value {
  color: #6eba2c;
}

.find-result-page .result-actions {
  width: 100%;
  height: 64px;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

.find-result-page .result-actions .btn {
  min-width: 101px;
  min-height: 64px;
  padding: 0 24px;
  border: 0;
  border-radius: 13px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.find-result-page .result-actions .btn-ghost {
  background: #27272a;
  color: #fff;
}

.find-result-page .result-password-link {
  min-width: 158px;
}

.find-result-page .site-footer {
  height: 341px;
  min-height: 341px;
  padding-block: 100px 64px;
}

.join-complete-page .page-main {
  padding-block: 140px 160px;
}

.join-complete-section {
  width: min(1520px, calc(100% - 400px));
}

.join-complete-panel {
  display: flex;
  width: 100%;
  min-height: 404px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  margin: 0;
  padding: 64px;
  border: 0;
  border-radius: 32px;
  background: #f4f4f5;
  box-shadow: none;
  text-align: center;
}

.join-complete-head {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.join-complete-panel h2 {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.join-complete-actions {
  display: flex;
  width: 100%;
  height: 64px;
  justify-content: center;
  gap: 12px;
  margin: 0;
}

.join-complete-actions .btn {
  min-width: 101px;
  min-height: 64px;
  padding: 0 24px;
  border: 0;
  border-radius: 13px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.board-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}

.board-list-head h2 {
  color: #09090b;
  font-size: 44px;
  line-height: 1.32;
}

.board-list-head .content-toolbar {
  min-width: 560px;
}

.board-list-head .select-control {
  flex: 0 0 auto;
  width: 122px;
}

/* 옆의 검색창(.search-field input)은 border:0 + #f4f4f5인데 셀렉트만 components.css의
   공통 폼 규칙(1px 테두리, #f7f8fa)이 살아 있어 PC에서만 테두리가 보였다.
   ≤1024 구간은 이미 둘을 함께 border:0으로 잡아 뒀으므로 PC를 거기에 맞춘다. */
.board-list-head .select-control select {
  width: 122px;
  height: 56px;
  min-height: 56px;
  padding: 13.5px 64px 13.5px 24px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  /* background 단축속성은 아래 background-image(chevron)를 지운다 → color만 지정 */
  background-color: #f4f4f5;
  background-image: url("../images/ui/select-chevron.png");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 24px 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
}

.board-list-head .search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.board-list-head .search-field input {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  padding: 0 64px 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.board-list-head .search-field input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 1;
}

.board-list-head .search-field .icon-button {
  position: absolute;
  top: 50%;
  right: -24px;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.board-list-head .search-field .icon-button .icon-search {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.board-total {
  margin: 0 0 40px;
  color: #09090b;
  font-size: 17px;
  line-height: 1.5;
}

.board-total strong {
  color: #6eba2c;
  font-size: 19px;
}

/* 건수 강조 숫자 공통: 좌우 2px 여백 + 숫자가 한글보다 1.5px 높게 앉는 것 보정.
   position/top으로 내려 라인박스 높이는 건드리지 않는다. */
.board-total strong,
.mypage-total strong,
.mypage-facility-total strong,
.life-total strong,
.home-map-total strong {
  position: relative;
  top: 1px;
  padding: 0 2px;
}

.board-badge {
  display: inline-flex;
  width: 42px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 7px;
  background: #71717b;
  color: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* 게시판 목록 테이블: base .table-wrap의 좌측 24px 인셋 제거 — 전 뷰포트 공통 */
.board-list-page .table-wrap {
  padding-left: 0;
}

.board-list-page .board-table {
  border-top-width: 1.5px;
}

.board-list-page .board-table th,
.board-list-page .board-table td {
  height: 64px;
  padding: 0 20px;
  color: #09090b;
  font-size: 17px;
  line-height: 1.5;
}

.board-list-page .board-table th {
  background: #f7f7f7;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.board-list-page .board-table th:nth-child(1),
.board-list-page .board-table td:nth-child(1),
.board-list-page .board-table th:nth-child(5),
.board-list-page .board-table td:nth-child(5),
.board-list-page .board-table th:nth-child(6),
.board-list-page .board-table td:nth-child(6) {
  width: 100px;
}

.board-list-page .board-table th:nth-child(3),
.board-list-page .board-table td:nth-child(3),
.board-list-page .board-table th:nth-child(4),
.board-list-page .board-table td:nth-child(4) {
  width: 180px;
}

.board-list-page .board-table th,
.board-list-page .board-table td {
  text-align: center;
}

.board-list-page .board-table th:nth-child(2),
.board-list-page .board-table td:nth-child(2) {
  text-align: start;
}

.board-list-page .board-table td {
  color: #757575;
}

.board-list-page .board-table td:nth-child(2) {
  color: #09090b;
  font-weight: 700;
}

.board-list-page .board-table tr:not(.notice-row) td:nth-child(1),
.board-list-page .board-table tr:not(.notice-row) td:nth-child(3),
.board-list-page .board-table tr:not(.notice-row) td:nth-child(4),
.board-list-page .board-table tr:not(.notice-row) td:nth-child(5) {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
}

.board-list-page .board-table tr:not(.notice-row) td:nth-child(2),
.board-list-page .board-table tr:not(.notice-row) td:nth-child(2) a {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.board-list-page .board-table .notice-row td:nth-child(2),
.board-list-page .board-table .notice-row td:nth-child(2) a {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.board-list-page .board-table .notice-row td:nth-child(3),
.board-list-page .board-table .notice-row td:nth-child(4),
.board-list-page .board-table .notice-row td:nth-child(5) {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
}

.board-list-page .board-table tbody tr:hover {
  background: #f7f7f7;
}

/* 게시글은 행 어디를 눌러도 상세로 간다. 셀마다 <a>를 넣는 대신 이미 있는 제목
   링크를 행 전체로 늘린다. 셀에 <a>를 넣으면 td가 들고 있는 height 64px·좌우
   padding 20px 때문에 글자만 눌리고, display:block으로 채우면 td의
   vertical-align:middle이 블록 자식에는 안 먹어 제목이 4px 떠오른다. flex로
   다시 맞추면 이번엔 배지·첨부 아이콘이 1~3px 어긋난다. 늘리는 방식은 글자
   위치가 그대로고 링크도 행당 하나여서 탭 이동도 한 번이다.

   행 안의 글자를 드래그로 선택하는 것은 늘린 링크가 덮어 막힌다
   (홈의 .program-feature-link와 같은 방식·같은 대가다).
   첨부파일이 나중에 다운로드 링크가 되면 그 링크에는 position:relative와
   z-index를 줘서 이 위로 올려야 한다. */
.board-list-page .board-table tbody tr,
.mypage-reservation-page .board-table tbody tr {
  position: relative;
}

.board-list-page .board-table tbody td:nth-child(2) a::after,
.mypage-reservation-page .board-table tbody td:nth-child(2) a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 신청·예약 내역 리스트 – 채용소식(board-list) 스타일과 정렬 */
.mypage-reservation-page .mypage-total {
  margin: 0 0 40px;
  color: #09090b;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.mypage-reservation-page .mypage-total strong {
  color: #6eba2c;
  font-size: 19px;
}

/* 신청·예약 내역 테이블: base .table-wrap의 좌측 24px 인셋 제거 — 전 뷰포트 공통 */
.mypage-reservation-page .table-wrap {
  padding-left: 0;
}

:is(.mypage-reservation-page, .care-calendar) .status-badge {
  display: inline-flex;
  width: auto;
  min-height: 0;
  height: 24px;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 0 10px;
  border-radius: 7px;
  background: #71717b;
  color: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

:is(.mypage-reservation-page, .care-calendar) .status-badge--using {
  background: rgba(110, 186, 44, 0.08);
  color: #6eba2c;
}

:is(.mypage-reservation-page, .care-calendar) .status-badge--confirmed {
  background: rgba(54, 121, 203, 0.08);
  color: #3679cb;
}

:is(.mypage-reservation-page, .care-calendar) .status-badge--pending {
  background: rgba(40, 158, 150, 0.08);
  color: #289e96;
}

:is(.mypage-reservation-page, .care-calendar) .status-badge--canceled {
  background: rgba(207, 73, 90, 0.08);
  color: #cf495a;
}

:is(.mypage-reservation-page, .care-calendar) .status-badge--done {
  background: rgba(82, 82, 92, 0.08);
  color: #52525c;
}

/* 신청·예약 내역의 표 모양(번호·기관명·일자·상태 4열). PDA에서는 기관명 칸이
   좁아 "돌봄기관 명이 들어가는 곳입니다."가 세 줄로 접혔다. 그 구간은 아래
   ≤1024 블록의 카드형(모바일과 같은 모양)을 쓰므로 여기는 PC 전용이다.
   이 블록 안은 전부 이 페이지 규칙이라 구간만 바꿔도 다른 페이지에 영향이 없다. */
@media (min-width: 1025px) {
  .mypage-reservation-page .mypage-reservation-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 0 0 32px;
  }

  .mypage-reservation-page .mypage-reservation-heading h2 {
    font-family: "NPS_font", var(--font-sans);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.5;
    color: #09090b;
  }

  .mypage-reservation-page .content-toolbar {
    flex: 0 0 min(480px, 100%);
    gap: 10px;
    min-width: 0;
  }

  .mypage-reservation-page .content-toolbar .select-control {
    flex: 0 0 auto;
    width: 122px;
  }

  .mypage-reservation-page .content-toolbar .select-control select {
    width: 122px;
    height: 56px;
    min-height: 56px;
    padding: 13.5px 64px 13.5px 24px;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("../images/ui/select-chevron.png");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px 24px;
    font-family: "NPS_font", var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: #000;
  }

  .mypage-reservation-page .content-toolbar .search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mypage-reservation-page .content-toolbar .search-field input {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    padding: 0 64px 0 24px;
    font-family: "NPS_font", var(--font-sans);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: #09090b;
  }

  .mypage-reservation-page .content-toolbar .search-field input::placeholder {
    color: rgba(9, 9, 11, 0.5);
    opacity: 1;
  }

  /* 검색 버튼은 알약 밖으로 절반(24px = 버튼 반지름) 걸치는 것이 사이트 공통이다.
     여기만 right가 양수라 버튼이 입력칸 안에 들어와 있었다(게시판·생활 목록·운영
     프로그램은 모두 -24px). 카드 안쪽 끝까지 53px 남아 잘리지 않는다. */
  .mypage-reservation-page .content-toolbar .search-field .icon-button {
    position: absolute;
    top: 50%;
    right: -24px;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
  }

  .mypage-reservation-page .content-toolbar .search-field .icon-button .icon-search {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
  }

  .mypage-reservation-page .board-table {
    border-top-width: 1.5px;
  }

  .mypage-reservation-page .board-table th,
  .mypage-reservation-page .board-table td {
    height: 64px;
    padding: 0 20px;
    color: #09090b;
    font-size: 17px;
    line-height: 1.5;
    text-align: center;
  }

  .mypage-reservation-page .board-table th {
    background: #f7f7f7;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: #09090b;
  }

  .mypage-reservation-page .board-table th:nth-child(1),
  .mypage-reservation-page .board-table td:nth-child(1) {
    width: 100px;
  }

  .mypage-reservation-page .board-table th:nth-child(3),
  .mypage-reservation-page .board-table td:nth-child(3) {
    width: 200px;
  }

  .mypage-reservation-page .board-table th:nth-child(4),
  .mypage-reservation-page .board-table td:nth-child(4) {
    width: 140px;
  }

  .mypage-reservation-page .board-table th:nth-child(2),
  .mypage-reservation-page .board-table td:nth-child(2) {
    text-align: start;
  }

  .mypage-reservation-page .board-table td {
    color: #757575;
  }

  .mypage-reservation-page .board-table tbody td:nth-child(1),
  .mypage-reservation-page .board-table tbody td:nth-child(3) {
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(9, 9, 11, 0.75);
  }

  .mypage-reservation-page .board-table tbody td:nth-child(2),
  .mypage-reservation-page .board-table tbody td:nth-child(2) a {
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: #09090b;
  }

  .mypage-reservation-page .board-table .notice-row td:nth-child(2),
  .mypage-reservation-page .board-table .notice-row td:nth-child(2) a,
  .mypage-reservation-page .board-table .notice-row td:nth-child(3) {
    font-weight: 700;
  }

  .mypage-reservation-page .board-table tbody tr:hover {
    background: #f7f7f7;
  }

  .mypage-reservation-page .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 160px;
  }
}

.board-section-title {
  margin: 0 0 64px;
  color: #09090b;
  font-size: 44px;
  line-height: 1.32;
}

.board-detail-page .board-detail {
  padding: 40px 0 0;
  border: 0;
  border-top: 1.5px solid #27272a;
  border-radius: 0;
  background: #fff;
}

.board-detail-page .board-detail header {
  display: grid;
  gap: 24px;
  justify-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid #e4e4e4;
  text-align: center;
}

.board-detail-page .board-detail h2 {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.board-detail-page .board-detail header dl {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.board-detail-page .board-detail header dl div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.board-detail-page .board-detail header dl div + div {
  position: relative;
  padding-left: 16px;
}

.board-detail-page .board-detail header dl div + div::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: #e4e4e4;
}

.board-detail-page .board-detail header dd {
  margin: 0;
}

.board-detail-page .board-detail header dd::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.board-detail-page .board-detail .meta-date dd::before {
  background-image: url("../images/ui/icon-meta-date.png");
}

.board-detail-page .board-detail .meta-view dd::before {
  background-image: url("../images/ui/icon-meta-view.png");
}

.board-detail-page .article-body {
  margin-top: 40px;
  color: #09090b;
}

.board-detail-page .article-body p {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.board-detail-page .article-body p + p {
  margin-top: 26px;
}

.board-detail-page .attach-box {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 0;
  margin-top: 40px;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid #27272a;
  border-radius: 0;
  background: #fff;
}

.board-detail-page .attach-box strong,
.board-detail-page .attach-box span {
  display: flex;
  min-height: 64px;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  font-size: 17px;
  line-height: 1.5;
}

.board-detail-page .attach-box strong {
  justify-content: center;
  background: #f7f7f7;
  color: #09090b;
  font-weight: 400;
}

.board-detail-page .attach-box span {
  padding: 0 40px;
  color: #757575;
}

.board-detail-actions {
  justify-content: flex-end;
  margin-top: 64px;
}

.board-detail-actions .btn {
  width: 114px;
  height: 64px;
  min-width: 114px;
  min-height: 64px;
  border-radius: 12px;
  border-color: rgba(113, 113, 123, 0.22);
  background: #fff;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.gnb-demo-page .site-footer,
.gnb-demo-page .top-button,
.search-overlay-page .site-footer,
.search-overlay-page .top-button {
  display: none;
}

.gnb-demo-main,
.search-overlay-main {
  padding: 0;
}

.gnb-demo-hero {
  position: relative;
  min-height: 775px;
  margin: 0 40px;
  overflow: hidden;
  border-radius: 180px 80px 80px 80px;
  background:
    linear-gradient(90deg, rgba(25, 55, 42, 0.68), rgba(25, 55, 42, 0.04) 56%),
    url("../images/ui/home-hero.jpg") -580px -665px / 2469px auto no-repeat;
}

.gnb-hero-copy {
  position: absolute;
  top: 290px;
  left: 200px;
  color: #fff;
}

.gnb-hero-copy h1 {
  font-size: 64px;
  line-height: 1.35;
}

.gnb-hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 48px;
}

.gnb-hero-actions a {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 19px;
}

.gnb-hero-count {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  font-size: 19px;
  font-weight: 900;
}

.gnb-hero-count i {
  width: 96px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.gnb-hero-count em {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-style: normal;
}

.gnb-depth {
  position: absolute;
  top: -18px;
  display: grid;
  width: 200px;
  overflow: hidden;
  border: 1px solid rgba(113, 113, 123, 0.08);
  border-radius: 24px 32px 32px 32px;
  background: #fff;
  box-shadow: 0 16px 20px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.12), 0 0 8px rgba(0, 0, 0, 0.08);
}

.gnb-depth strong {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed rgba(113, 113, 123, 0.3);
  font-size: 19px;
}

.gnb-depth strong:last-child {
  border-bottom: 0;
}

.gnb-depth .active {
  color: #6eba2c;
}

.depth-two {
  left: 508px;
}

.depth-three {
  left: 693px;
  top: 46px;
  border-top-left-radius: 16px;
}

.gnb-mobile-panel {
  display: none;
}

.gnb-demo-filter {
  margin-top: -77px;
}

.search-overlay-main {
  min-height: calc(100vh - var(--header-height));
  background: #6f7173;
}

.search-overlay-demo {
  position: relative;
  min-height: 875px;
  overflow: hidden;
  background: #6f7173;
}

.search-overlay-demo::before,
.search-overlay-demo::after {
  content: "";
  position: absolute;
  z-index: 1;
}

.search-overlay-demo::before {
  top: 0;
  right: 0;
  left: 0;
  height: 280px;
  background:
    radial-gradient(ellipse 104px 128px at 6% 58%, transparent 0 70px, rgba(110, 186, 44, 0.11) 72px 94px, transparent 96px),
    radial-gradient(ellipse 74px 104px at 0% 48%, transparent 0 48px, rgba(110, 186, 44, 0.12) 50px 72px, transparent 74px),
    radial-gradient(ellipse 128px 92px at 79% -2%, transparent 0 78px, rgba(110, 186, 44, 0.08) 80px 102px, transparent 104px),
    #f4faec;
}

.search-overlay-demo::after {
  right: 124px;
  top: 216px;
  width: 80px;
  height: 80px;
  border: 24px solid rgba(110, 186, 44, 0.11);
  border-radius: 50%;
}

.overlay-search-form {
  position: relative;
  z-index: 2;
  width: min(624px, calc(100% - 48px));
  margin: 100px auto 0;
}

.overlay-search-form input {
  width: 100%;
  min-height: 80px;
  border: 3px solid #6eba2c;
  border-radius: 36px 18px 18px 18px;
  background: #fff;
  padding-inline: 28px 72px;
  font-size: 17px;
}

.overlay-search-form button {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: #242529;
  color: #fff;
}

.overlay-close {
  position: absolute;
  z-index: 3;
  top: 252px;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-md);
  color: #09090b;
  font-size: 0;
}

.overlay-close::before,
.overlay-close::after {
  content: "";
  position: absolute;
  top: 27px;
  left: 17px;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: #09090b;
}

.overlay-close::before {
  transform: rotate(45deg);
}

.overlay-close::after {
  transform: rotate(-45deg);
}

.search-dimmed-hero {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 40px;
  left: 40px;
  min-height: 775px;
  border-radius: 200px 80px 80px 80px;
  background:
    linear-gradient(rgba(9, 9, 11, 0.62), rgba(9, 9, 11, 0.62)),
    url("../images/ui/home-hero.jpg") -580px -665px / 2469px auto no-repeat;
  color: rgba(255, 255, 255, 0.36);
}

.search-dimmed-hero > div {
  padding: 296px 200px 56px;
}

.search-dimmed-hero h1 {
  font-size: 60px;
  line-height: 1.5;
}

.overlay-title-mobile {
  display: none;
}

.search-dimmed-hero p {
  display: flex;
  gap: 16px;
  margin-top: 42px;
}

.search-dimmed-hero a {
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.search-dimmed-hero > div > span {
  display: block;
  margin-top: 54px;
  font-size: 22px;
  font-weight: 900;
}

.search-dimmed-filter {
  position: absolute;
  z-index: 1;
  top: 698px;
  left: 0;
  right: 0;
  margin-top: 0;
  opacity: 0.42;
  filter: brightness(0.62);
  pointer-events: none;
}

.search-dimmed-filter.quick-filter.container {
  margin-top: 0;
}

.map-page .site-header,
.map-page .site-footer,
.map-page .top-button {
  display: none;
}

.map-main {
  min-height: 100vh;
  padding: 0;
}

.map-workspace {
  position: relative;
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  min-height: 100vh;
  overflow: hidden;
  background: #48791B;
}

.map-sidebar {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 28px 24px;
  border: 0;
  background: #48791B;
  color: #fff;
}

.map-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 24px;
  color: #fff;
  font-weight: 900;
}

.map-logo .logo-city,
.map-logo .logo-service {
  color: #fff;
}

/* 검색창은 사이드바 폭을 그대로 채운다(입력창의 고정 336px은 마크업에서 뺐다).
   검색 버튼이 입력창 밖으로 20px 나와 있어서(right: -20px) 그만큼을 오른쪽에 비워야
   버튼 오른끝이 패널 안쪽 경계에 맞는다. */
.map-search {
  margin-bottom: 32px;
  padding-right: 20px;
}

.map-keyword {
  min-height: 56px;
  border-radius: 999px;
  background: #fff;
}

.map-keyword input {
  min-height: 56px;
  border: 0;
  background: transparent;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 19px;
}

.map-keyword input::placeholder {
  color: rgba(9, 9, 11, 0.5);
}

.map-keyword .icon-button {
  width: 48px;
  height: 48px;
  margin-right: 4px;
}

.map-page .list-count {
  margin: 0 0 32px;
  color: #fff;
  font-size: 17px;
  line-height: 29px;
}

.map-page .list-count strong {
  color: #fff;
}

.map-page .map-list {
  gap: 16px;
  /* 목록 위에 쌓인 것(사이드바 위 패딩 28 + 로고 48 + 24 + 검색창 56 + 32 +
     개소수 29 + 32 = 249)과 사이드바 아래 패딩 28을 더하면 277px이다.
     176px일 때는 101px이 모자라 사이드바가 화면보다 딱 그만큼 길어졌고,
     그래서 지도 화면 전체가 101px씩 스크롤됐다. */
  max-height: calc(100vh - 277px);
  /* 스크롤바는 감추고 스크롤 기능은 남긴다(.compact-list, .map-filter-chips와 같은 방식).
     바가 없으니 카드를 밀어 두던 오른쪽 여백도 함께 뺐다. 이제 카드가 검색창과 같은 폭을 쓴다. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.map-page .map-list::-webkit-scrollbar {
  display: none;
}

.map-page .map-list-item {
  grid-template-columns: 40px minmax(0, 1fr);
  row-gap: 0;
  column-gap: 14px;
  min-height: 236px;
  align-content: start;
  padding: 24px;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

/* 번호 배지는 원 모양 그대로 두고 색만 지도 마커를 따라간다. 항목에 붙인 pin-N 클래스가
   --pin-color를 정하므로(아래 .map-page .pin-N 규칙) 목록과 지도의 색이 한 곳에서 짝지어진다. */
.map-page .map-list-item span {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--pin-color, #E49000);
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.map-page .map-list-item strong {
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
}

.map-page .map-list-item em,
.map-page .map-list-item p {
  grid-column: 2;
  color: rgba(9, 9, 11, 0.75);
  font-size: 17px;
  line-height: 1.5;
}

.map-page .map-list-item em {
  font-family: "NPS_font", var(--font-sans);
  font-weight: 400;
  font-style: normal;
  margin-bottom: 20px;
}

.map-page .map-list-item p {
  margin-bottom: 24px;
  color: rgba(9, 9, 11, 0.75);
  font-family: "NPS_font", var(--font-sans);
  font-weight: 400;
}

.map-card-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
}

/* display: grid가 [hidden]의 기본값(display: none)을 이긴다. 분류에 따라 접을 수
   있도록 짝 규칙을 둔다(돌봄MAP 상세 카드, site.js). */
.map-card-actions[hidden] {
  display: none;
}

.map-card-actions .btn {
  height: 56px;
  border-radius: 10px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.map-page .map-list-item.is-active {
  background: #fff;
  border: 4px solid #6EBA2C;
}

.map-page .map-detail-card.map-detail-panel {
  display: none;
  border: 4px solid #6EBA2C;
}

.map-page .map-detail-card.map-detail-panel.is-open {
  display: flex;
  flex-direction: column;
}

.map-canvas-large {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-radius: 40px 0 0 40px;
  background-image: url("../images/ui/map-base.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.map-page .map-canvas-large .map-pin,
.map-page .map-canvas-large .map-cluster-pin {
  position: absolute;
  cursor: pointer; /* 목록 항목과 같은 동작을 하는 클릭 대상이다(site.js) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 46px;
  height: 56px;
  /* 상자는 물방울 몸통과 같은 46x56이고(자리 잡는 %값이 여기 걸려 있다), 숫자만
     오른쪽 위 배지 안으로 보낸다. 배지 가운데는 그림 좌표로 (60,19), 상자 기준
     (42,4)이다. 안쪽 여백으로 글상자를 그 점에 맞추면(가로 (46+38)/2=42,
     세로 (56-48)/2=4) 가운데 정렬은 그대로 두고 글자만 옮겨진다. */
  padding: 0 0 48px 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: "NPS_font", var(--font-sans);
  /* 배지 지름이 17px이라 그 안에 들어가는 크기로 줄인다(두 자리 수도 들어간다). */
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  isolation: isolate;
}

/* 마커는 <button>이라 키보드로도 고를 수 있다. 상자가 투명해서(그림은 ::before) 기본
   포커스 링이 잘 안 보이므로 지도 위에서 또렷한 외곽선을 준다. */
.map-page .map-canvas-large .map-pin:focus-visible {
  outline: 3px solid #09090b;
  outline-offset: 2px;
}

.map-page .map-canvas-large .map-pin::before,
.map-page .map-canvas-large .map-cluster-pin::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -18px;
  width: 87px;
  height: 97px;
  background: var(--pin-image) center / 100% 100% no-repeat;
  z-index: -1;
}

.map-page .map-canvas-large .map-pin::after,
.map-page .map-canvas-large .map-cluster-pin::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 50%;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%);
  z-index: -2;
  display: none;
  pointer-events: none;
}

/* 고른 마커와 목록을 연 묶음 마커는 둘레에 옅은 원을 깔아 지도에서 어디인지 보인다.
   묶음 마커는 상자(46x56)가 분류 마커와 같아 원의 자리도 같이 쓴다. */
.map-page .map-canvas-large .map-pin.is-active::after,
.map-page .map-canvas-large .map-cluster-pin[aria-expanded="true"]::after {
  display: block;
}

.map-page .map-canvas-large.has-selection .map-pin:not(.is-active) {
  display: none;
}

/* ── 겹친 마커 묶음 ──────────────────────────────────────────────
   마커끼리 겹치면 site.js가 그 무리를 감추고 자리에 묶음 마커 하나를 놓는다.
   지도가 화면 폭을 따라 줄어들면 마커 사이도 같이 좁아져 겹치는 무리가 달라지므로
   캔버스 크기가 바뀔 때마다 다시 계산한다.

   묶음 그림은 87x97인 분류 마커와 달리 82x92이고 배지 대신 흰 동그라미 안에 숫자를
   넣는다. 물방울 몸통은 두 그림 모두 46x55.56이라 상자(46x56)는 그대로 쓰고
   ::before의 크기·위치와 글자 자리만 되돌린다. */
.map-page .map-canvas-large .map-cluster-pin {
  --pin-image: url("../images/ui/map-marker-cluster.svg");
  padding: 0 0 10px;
  color: #292929;
  font-size: 16px;
  cursor: pointer; /* 누르면 겹친 시설 목록이 열리고 닫힌다(site.js) */
}

.map-page .map-canvas-large .map-cluster-pin:focus-visible {
  outline: 3px solid #09090b;
  outline-offset: 2px;
}

.map-page .map-canvas-large .map-cluster-pin::before {
  top: -10px;
  width: 82px;
  height: 92px;
}

/* 묶음으로 대신 그린 마커는 감춘다. 다만 고른 시설은 묶음 안에 있어도 다시 보여야
   지도에서 어디인지 알 수 있다(고르면 묶음 자체도 아래 규칙으로 사라진다). */
.map-page .map-canvas-large .map-pin.is-clustered {
  display: none;
}

.map-page .map-canvas-large .map-pin.is-clustered.is-active {
  display: inline-flex;
}

.map-page .map-canvas-large.has-selection .map-cluster-pin {
  display: none;
}

/* ── 묶음 목록 ───────────────────────────────────────────────────
   묶음 마커를 누르면 그 자리에 겹친 시설을 늘어놓는다. 줄마다 쓰는 마커는
   지도와 같은 그림에서 번호 배지만 뺀 것(--pin-plain)이라, 분류가 바뀌면 지도와
   목록이 함께 바뀐다. 캔버스가 overflow: hidden이라 자리는 site.js가 캔버스 안으로
   물려서 잡는다. */
.map-cluster-popover {
  position: absolute;
  z-index: 4;
  display: flex;
  width: 420px;
  max-width: calc(100% - 32px);
  flex-direction: column;
  /* 원고에서 잰 값이다(카드 421x461, 테두리 4px). 좌우는 같게 두고, 줄까지의 거리는
     목록의 padding(왼 16 · 오른 22)이 마저 채운다. 오른쪽 22px 자리에는 스크롤바가 선다. */
  padding: 32px 30px;
  border: 4px solid #6EBA2C;
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

/* 목록이 넘쳐 굴려야 할 때는 아래 여백을 없앤다. 마지막 줄이 카드 밑에 딱 붙어
   잘린 듯 보여야 더 있다는 것이 눈에 든다. 붙이고 떼는 것은 site.js가 한다. */
.map-cluster-popover.is-scrollable {
  padding-bottom: 0;
}

/* 말꼬리. 원고는 네모 카드가 아니라 마커 쪽으로 둥근 꼬리가 나온 말풍선이다.
   윤곽은 원고를 픽셀로 따서 옮겼다: 카드 가장자리에서 25px 나오고 높이 54px,
   밑동은 오목하게 카드에 붙고 끝은 둥글다. 그림 안에서 카드 테두리의 가운데 선이
   x=28이다. left는 패딩 상자에서 재므로 테두리 4px이 이미 빠져 있고, 30px 내밀면
   그 선이 카드 테두리 가운데에 앉는다. 그림 오른쪽 6px은 카드 안으로 들어가 그 구간의
   테두리를 흰 면으로 덮고, 남는 바깥쪽 반은 꼬리 선 자신의 굵기가 가린다.
   상자 높이는 그림과 같은 70px이어야 한다. 줄이면 아래 밑동이 잘린다.
   선 굵기·색은 카드 테두리(4px, #6EBA2C)와 같아야 한다. 테두리를 바꾸면 여기도 바꾼다.
   세로 자리는 site.js가 마커의 흰 원 가운데에 맞춰 --cluster-tail-top으로 준다. */
.map-cluster-popover::before {
  content: "";
  position: absolute;
  top: var(--cluster-tail-top, 31px);
  left: -30px;
  width: 56px;
  height: 70px;
  border-radius: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='70' viewBox='0 0 34 70'%3E%3Cpath d='M28 8C28 14 22 17 11 21.5C4.5 25 3 29 3 35C3 41 4.5 45 11 48.5C22 53 28 56 28 62H34V8Z' fill='%23fff'/%3E%3Cpath d='M28 8C28 14 22 17 11 21.5C4.5 25 3 29 3 35C3 41 4.5 45 11 48.5C22 53 28 56 28 62' fill='none' stroke='%236EBA2C' stroke-width='4'/%3E%3C/svg%3E") no-repeat;
  pointer-events: none;
}

/* 오른쪽에 자리가 모자라 카드가 마커 왼쪽으로 가면 꼬리도 오른쪽으로 뒤집는다. */
.map-cluster-popover.is-flipped::before {
  left: auto;
  right: -30px;
  transform: scaleX(-1);
}

/* 좁은 화면에서 카드가 마커 위에 겹쳐 앉으면 꼬리가 가리킬 데가 없어 뺀다. */
.map-cluster-popover.is-covering::before {
  display: none;
}

.map-cluster-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 머리줄 높이는 글자(19px x 150% = 28.5)가 아니라 닫기 단추 32px이 잡는다.
     첫 줄 윗선은 테두리 4 + 위 여백 32 + 머리줄 32 + 18 = 86px 자리. */
  margin-bottom: 18px;
}

.map-cluster-popover-head p {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

/* 개수만 굵고 크게 쓴다. 줄 높이는 p에서 물려받은 150%. 양옆 띄움은 site.js가 넣는
   낱말 사이 빈칸이 맡는다. 글자가 17px보다 커서 같은 기준선에 서면 혼자 위로 솟아
   보이므로 1px 내려 눈으로 보이는 가운데를 "총 … 개소"와 맞춘다. */
.map-cluster-popover-head strong {
  position: relative;
  top: 1px;
  font-size: 19px;
  font-weight: 700;
  color: #6EBA2C;
}

/* 상세 카드의 닫기 단추(.map-detail-close)와 같은 짜임이다. 글자 ×는 font-size: 0으로
   숨기고 흰 × 그림을 마스크로 얹는다(읽기 도구는 aria-label "닫기"로 읽는다).
   지도 위에 뜨는 단추라 둘레만 상세(28px)보다 크게 32px로 둔다. */
.map-cluster-popover-close {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #27272A;
  color: #fff;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
}

.map-cluster-popover-close::before {
  content: "";
  width: 20px;
  height: 20px;
  -webkit-mask: url("../images/ui/left-icon.png") center / contain no-repeat;
  mask: url("../images/ui/left-icon.png") center / contain no-repeat;
  background: #FFFFFF;
}

.map-cluster-list {
  display: grid;
  /* 원고는 세 줄과 다음 줄 일부가 보이는 높이다(줄 높이 100 x 3.44). 더 있다는 것이
     보여야 굴려 볼 생각이 든다. */
  max-height: 344px;
  /* 스크롤바를 줄에서 14px 떼어 카드 옆 여백 쪽으로 내보낸다. 음수 여백으로 목록
     상자만 오른쪽으로 넓히고, 같은 크기의 padding으로 줄은 제자리에 둔다. */
  margin: 0 -14px 0 0;
  padding: 0 14px 0 0;
  list-style: none;
  overflow-y: auto;
  /* 목록 끝에서 계속 굴려도 지도 화면이 따라 움직이지 않게 한다. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #71717b transparent;
}

.map-cluster-list::-webkit-scrollbar {
  width: 6px;
}

.map-cluster-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #71717b;
}

.map-cluster-list li + li {
  border-top: 1px solid #e0e0e2;
}

.map-cluster-item {
  display: grid;
  width: 100%;
  /* 마커 그림은 71px인데 왼쪽으로 16px 물러나 있어 칸이 실제로 차지하는 폭은 55px다. */
  grid-template-columns: 55px minmax(0, 1fr);
  min-height: 100px;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.map-page .map-cluster-item .map-cluster-item-pin {
  /* 원고의 물방울 몸통은 40px이다. 그림(82x92) 중 몸통은 46px이므로 71x80으로 줄인다. */
  width: 71px;
  height: 80px;
  /* 왼쪽 -16px: 그림의 투명한 여백만큼 물러난다. 목록에 padding이 없어진 지금은
     물방울 왼끝이 구분선 시작보다 16px 더 왼쪽, 카드 옆 여백 안으로 들어간다.
     위 14px: 그림 안에서 물방울이 위로 치우쳐 있어(위 여백 10, 아래 26.44) 상자를
     가운데 맞추면 7px 떠 보인다. 가운데 정렬에서 위 여백은 절반만 밀리므로 14를 준다. */
  margin: 14px 0 0 -16px;
  /* pin-N은 지도에서 자리와 그림을 함께 정한다. 여기서는 그림만 빌려 쓰는데,
     같은 규칙의 background: transparent가 이겨 그림이 지워지므로 선택자를 더 좁힌다.
     자리를 정하는 top·left는 이 자리에서 position: static이라 그냥 무시된다. */
  background: var(--pin-plain) center / contain no-repeat;
}

.map-cluster-item-copy {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.map-cluster-item strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.map-cluster-item:hover strong,
.map-cluster-item:focus-visible strong {
  text-decoration: underline;
}

/* 좁은 화면에서는 목록이 지도를 거의 다 덮는다. 줄과 글자를 한 단계씩 줄인다.
   묶음 목록만 보는 규칙이라 아래 큰 구간 묶음으로 옮기지 않고 여기 붙여 둔다. */
@media (max-width: 640px) {
  .map-cluster-popover {
    padding: 28px 12px 20px 20px;
    border-radius: 28px;
  }

  .map-cluster-popover-head p {
    font-size: 17px;
  }

  .map-cluster-popover-head strong {
    font-size: 20px;
  }

  /* 상세 카드 닫기 단추와 같이, 좁은 화면에서는 그림 대신 글자 ×를 쓴다. */
  .map-cluster-popover-close {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .map-cluster-popover-close::before {
    display: none;
  }

  .map-cluster-list {
    max-height: 258px;
    padding: 0 16px 0 13px;
  }

  .map-cluster-item {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 86px;
  }

  .map-page .map-cluster-item .map-cluster-item-pin {
    width: 57px;
    height: 64px;
    margin: 11px 0 0 -13px;
  }

  .map-cluster-item strong {
    font-size: 15px;
  }
}

/* 마커 좌표는 기준 화면(1920×1080, 캔버스 1475×1080)에서 잰 px였다.
   캔버스는 폭에 따라 줄어드는데 마커는 px에 고정돼 있어, 캔버스가 좁아지면
   지도 밖으로 밀려났다(1280에서 3개, 768 이하에서 10개 전부).
   .map-canvas-large는 background-size:100% 100%로 지도 이미지가 캔버스에 맞춰
   늘어나므로, 좌표를 %로 바꾸면 마커가 이미지와 함께 움직인다.
   값은 원래 px ÷ 기준 캔버스(가로 1475 / 세로 1080). ≤640은 지도를 크롭해서
   쓰는 별도 좌표계라 아래 모바일 블록이 그대로 덮는다. */
.map-page .pin-1 { top: 33.8889%; left: 47.5254%; --pin-image: url("../images/ui/map-marker-care.svg"); --pin-plain: url("../images/ui/map-marker-care-plain.svg"); --pin-color: #E49000; } /* 돌봄서비스 */
.map-page .pin-2 { top: 38.5185%; left: 43.5254%; --pin-image: url("../images/ui/map-marker-daycare.svg"); --pin-plain: url("../images/ui/map-marker-daycare-plain.svg"); --pin-color: #D6B51E; } /* 어린이집 */
.map-page .pin-3 { top: 28.9352%; left: 61.1525%; --pin-image: url("../images/ui/map-marker-kindergarten.svg"); --pin-plain: url("../images/ui/map-marker-kindergarten-plain.svg"); --pin-color: #3679CB; } /* 유치원 */
.map-page .pin-4 { top: 40.1852%; left: 41.3559%; --pin-image: url("../images/ui/map-marker-elementary.svg"); --pin-plain: url("../images/ui/map-marker-elementary-plain.svg"); --pin-color: #8656C7; } /* 초등학교 */
.map-page .pin-5 { top: 50%; left: 56.2034%; --pin-image: url("../images/ui/map-marker-middle.svg"); --pin-plain: url("../images/ui/map-marker-middle-plain.svg"); --pin-color: #55A84F; } /* 중학교 */
.map-page .pin-6 { top: 56.3889%; left: 62.7119%; --pin-image: url("../images/ui/map-marker-experience.svg"); --pin-plain: url("../images/ui/map-marker-experience-plain.svg"); --pin-color: #289E96; } /* 체험기관 */
.map-page .pin-7 { top: 57.5926%; left: 34.4407%; --pin-image: url("../images/ui/map-marker-hospital.svg"); --pin-plain: url("../images/ui/map-marker-hospital-plain.svg"); --pin-color: #CF495A; } /* 병원 */
.map-page .pin-8 { top: 60.6481%; left: 32.1356%; --pin-image: url("../images/ui/map-marker-pharmacy.svg"); --pin-plain: url("../images/ui/map-marker-pharmacy-plain.svg"); --pin-color: #C94F91; } /* 약국 */
.map-page .pin-9 { top: 44.4444%; left: 26.9831%; --pin-image: url("../images/ui/map-marker-care.svg"); --pin-plain: url("../images/ui/map-marker-care-plain.svg"); --pin-color: #E49000; } /* 돌봄서비스 */
.map-page .pin-10 { top: 25%; left: 29.2542%; --pin-image: url("../images/ui/map-marker-experience.svg"); --pin-plain: url("../images/ui/map-marker-experience-plain.svg"); --pin-color: #289E96; } /* 체험기관 */

.map-page .pin-1,
.map-page .pin-2,
.map-page .pin-3,
.map-page .pin-4,
.map-page .pin-5,
.map-page .pin-6,
.map-page .pin-7,
.map-page .pin-8,
.map-page .pin-9,
.map-page .pin-10 {
  background: transparent;
}

.map-filter-chips {
  position: absolute;
  z-index: 2;
  top: 30px;
  left: 24px;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 12px;
}

.map-filter-chips button {
  display: inline-flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  /* 지도 위에 떠 있는 흰 칩이라 그림자가 없으면 배경에 묻힌다. 같은 성격의
     흰색 원형 컨트롤(.map-zoom 등)이 쓰는 --shadow-sm을 그대로 쓴다. */
  box-shadow: var(--shadow-sm);
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.map-filter-chips button.is-active {
  border: 1.5px solid #27272a;
  background: #fff;
  font-weight: 700;
}

.map-page .map-detail-card {
  position: absolute;
  z-index: 3;
  bottom: 40px;
  right: 40px;
  width: 400px;
  /* 표가 붙으면서 카드가 원고에서 1224px까지 길어졌다. 높이를 802px로 박아 두면
     표가 잘려 아예 보이지 않으므로, 내용만큼 자라게 하고 지도 밖으로 넘치지 않게
     위아래 40px을 남긴 데까지만 늘린다. 넘치는 만큼은 글 영역(.map-detail-copy)이
     혼자 굴린다. 썸네일은 자리에 붙어 있어야 해서 카드째 굴리지 않는다. */
  height: auto;
  max-height: calc(100% - 80px);
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}

.map-list-page .map-detail-card {
  display: none;
}

.map-detail-close {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 24px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #27272A;
  color: #fff;
  font-size: 0;
  line-height: 1;
}

.map-detail-close::before {
  content: "";
  width: 20px;
  height: 20px;
  -webkit-mask: url("../images/ui/left-icon.png") center / contain no-repeat;
  mask: url("../images/ui/left-icon.png") center / contain no-repeat;
  background: #FFFFFF;
}

.map-detail-thumb {
  position: relative;
  display: grid;
  width: 400px;
  height: 260px;
  place-items: center;
  background: #f4f4f5;
}

.map-detail-thumb::before {
  content: "";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(113, 113, 123, 0.08);
}

.map-detail-thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  -webkit-mask: url("../images/ui/apartment.png") center / contain no-repeat;
  mask: url("../images/ui/apartment.png") center / contain no-repeat;
  background: rgba(9, 9, 11, 0.13);
}

.map-detail-copy {
  padding: 32px;
  background: #fff;
  /* 카드가 지도 높이에 걸려 잘릴 때 굴리는 곳은 여기 하나다.
     flex 자식은 기본값(min-height: auto)이면 줄지 않아 굴러가지 않는다. */
  min-height: 0;
  overflow-y: auto;
}

.map-detail-thumb {
  flex: none;
}

.map-detail-copy .category-chip,
.map-cluster-item .category-chip {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(110, 186, 44, 0.08);
  font-family: "NPS_font", var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #6EBA2C;
}

/* 상세 패널은 칩 아래에 제목이 붙어 여백이 필요하다. 묶음 목록 줄은 격자가 잡는다. */
.map-detail-copy .category-chip {
  margin-bottom: 20px;
}

/* 묶음 목록의 칩은 원고에서 조금 크다(28px 높이, 좌우 10px). */
.map-cluster-item .category-chip {
  min-height: 28px;
  padding: 0 10px;
}

/* 제목과 바로가기 단추를 한 줄에 둔다. 원고에서 단추는 글 영역 오른쪽 끝에 붙고
   제목 덩어리(두 줄까지 간다) 한가운데에 선다. */
.map-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* 해당 시설 바로가기. 주소는 관리자가 등록하므로 마크업의 href는 자리만 잡고
   site.js가 고른 항목의 data-link로 바꿔 넣는다(없으면 적힌 주소를 그대로 쓴다). */
.map-detail-link {
  display: inline-flex;
  width: 48px;
  height: 48px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #E0E0E2;
  border-radius: 50%;
}

.map-detail-link::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url("../images/ui/icon-external-link.svg") center / contain no-repeat;
}

.map-detail-copy h2 {
  color: #09090B;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.map-detail-copy dl {
  display: grid;
  gap: 16px;
  margin: 20px 0 32px;
}

/* 직계 자식만 잡는다. 그냥 두면 표를 감싼 .table-scroll까지 격자가 되어, 표 너비가
   규칙이 아니라 우연으로 정해진다. */
.map-detail-copy dl > div {
  display: grid;
  gap: 8px;
}

.map-detail-copy dt,
.map-detail-copy dd {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  color: #09090B;
}

.map-detail-copy dt {
  position: relative;
  padding-left: 32px;
  font-weight: 700;
}

.map-detail-copy dt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: var(--meta-icon, var(--meta-icon-fallback)) center / contain no-repeat;
}

.map-detail-copy dl {
  --meta-icon-fallback: url("../images/ui/dt-icon-1.png");
}

.map-detail-copy dd {
  font-weight: 400;
}

.map-detail-copy dd strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #6EBA2C;
}

.map-detail-copy dd em {
  margin: 0 8px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.map-detail-copy dd b {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
}

/* ── 상세 카드의 표(학급 및 학생 수 · 교직원 현황) ──────────────────
   표도 dl 안의 한 항목이다. 제목을 dt로 두면 아이콘(--meta-icon)과 위아래 간격
   (dl의 gap 16, 항목 안 gap 8)이 이미 있는 규칙에 그대로 얹힌다. 원고를 재 보면
   제목 글자 밑에서 표 윗선까지 8px, 표 밑에서 다음 제목까지 16px으로 딱 맞는다.

   칸 수는 시설마다 다르다(만 0세~만 7세, 교사 종류). 17px 여섯 칸이면 600px이라
   400px 카드에 들어가지 않는데, 폭에 맞춰 접으면 "999"까지 쪼개져 읽을 수 없다.
   그래서 원고 그대로 제 크기로 두고 카드 오른쪽 끝에서 자른다. 가로로 굴리지는 않는다.
   감싼 상자를 카드 여백만큼 오른쪽으로 넓혀 테두리까지 닿게 하고 넘치는 만큼은 자른다.
   (글 영역은 세로로 굴리느라 가로도 auto가 되므로, 여기서 잘라 주지 않으면 글 영역에
   가로 스크롤바가 생긴다.) */
.map-detail-copy .table-cut {
  margin-right: -32px;
  overflow: hidden;
}

/* 제목 뒤의 "(단위: 명)". 같은 줄에 작게 붙는다. */
.map-detail-copy dt span {
  font-size: 13px;
  font-weight: 400;
  color: #71717B;
}

.map-detail-table {
  border-collapse: collapse;
  /* 원고에서 잰 값이다: 윗선 1px #27272A, 머리행 56px에 #F4F4F5, 본문 줄 64px,
     줄 사이 선은 상세 페이지 표와 같은 rgba(113,113,123,0.15), 글자는 17px 왼끝. */
  border-top: 1px solid #27272A;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
  /* 칸 이름이 접히면 줄 높이가 흐트러진다. 넘치는 만큼은 감싼 상자가 자른다. */
  white-space: nowrap;
  /* 자리가 남으면(태블릿처럼 카드가 넓을 때) 채우고, 모자라면 칸의 min-width가 이긴다. */
  width: 100%;
}

.map-detail-table th,
.map-detail-table td {
  min-width: 100px;
  height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(113, 113, 123, 0.15);
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.map-detail-table thead th {
  height: 56px;
  background: #f4f4f5;
}


/* dl 안 항목은 display: grid라 [hidden]의 기본값(display: none)을 이겨 버린다.
   분류에 따라 표를 통째로 숨기는 것은 site.js가 hidden으로 한다. */
.map-detail-copy dl > div[hidden] {
  display: none;
}

.modal-detail-page {
  position: relative;
  min-height: 2420px;
}

.modal-detail-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(9, 9, 11, 0.58);
  pointer-events: none;
}

.modal-detail-page .page-main {
  min-height: 1680px;
}

.detail-modal {
  position: absolute;
  z-index: 121;
  top: 80px;
  left: 50%;
  display: flex;
  width: min(1000px, calc(100% - 48px));
  transform: translateX(-50%);
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  padding: 0 48px 48px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

.detail-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px 0 40px;
  border-bottom: 2px solid rgba(9, 9, 11, 0.72);
}

.detail-modal-head h2 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.detail-modal-head a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #09090b;
  font-size: 24px;
  line-height: 1;
}

.detail-modal-head a img {
  width: 32px;
  height: 32px;
}

.detail-modal-body {
  display: grid;
}

.detail-modal-body section {
  padding: 64px 0 0;
  /* 격자 칸의 기본값(min-width: auto)이면 안에 든 넓은 것(달력 표)이 칸을 밀어 넓힌다.
     그러면 .table-scroll이 굴릴 일이 없어지고 모달의 overflow: hidden에 잘려 나간다. */
  min-width: 0;
}

/* 섹션 사이 점선. 신청·예약 페이지의 .reservation-form-group과 같은 방식이고
   선 위아래 64px씩인 비율도 거기(padding-bottom 64 + 부모 gap 64)에 맞췄다.
   1px dashed를 쓰지 않은 건 브라우저가 3px씩 끊어 시안(대시 8·간격 2)과
   달라지기 때문이다(이 파일 1546행 주석 참고). */
.detail-modal-body section + section {
  margin-top: 64px;
  padding-top: 64px;
  background-image: linear-gradient(to right, #e4e4e4 0 7.5px, transparent 7.5px 13.5px);
  background-size: 13.5px 1.5px;
  background-repeat: repeat-x;
  background-position: left top;
}

.facility-detail-page .detail-modal-body section:last-child {
  margin-bottom: 40px;
}

.detail-modal-body h3 {
  margin-bottom: 40px;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

/* ── 돌봄 서비스 달력 ─────────────────────────────────────────────
   원고에서 잰 값이다(원고 그림이 실제의 약 2.27배 축소본이라 폭 기준으로 환산했다):
   요일 머리행 50px에 #F4F4F5, 주 한 줄 120px, 줄 사이 선 1px #F4F4F5,
   날짜·요일 굵게 15px, 시간 15px, 일요일과 공휴일 #FB2C36, 지난달·다음달 날짜는 옅게.
   상태 표는 신청·예약 내역의 .status-badge를 그대로 쓴다(색이 원고와 같다).
   달 이동과 날짜별 일정은 개발에서 채운다. */
.care-calendar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.care-calendar-month {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}

/* 달을 고르는 목록은 개발에서 붙인다. 여기서는 열리는 표시만 둔다. */
.care-calendar-month::after {
  content: "";
  width: 20px;
  height: 20px;
  -webkit-mask: url("../images/ui/carousel-next.svg") center / 20px no-repeat;
  mask: url("../images/ui/carousel-next.svg") center / 20px no-repeat;
  background: #09090b;
  transform: rotate(90deg);
}

.care-calendar-month-select {
  position: relative;
}

/* 달 고르는 목록. 원고에 열린 모습이 없어 이 사이트의 입력 칸(.join-field select)과 같은
   흰 바탕·연한 테두리·13px 모서리를 빌렸다. 보고 있는 해의 열두 달만 담고, 해는 좌우
   화살표로 넘긴다. */
.care-calendar-month-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  width: 160px;
  max-height: 288px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  border: 1px solid rgba(113, 113, 123, 0.15);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(9, 9, 11, 0.08);
  list-style: none;
}

.care-calendar-month-list[hidden] {
  display: none;
}

.care-calendar-month-option {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  background: transparent;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

.care-calendar-month-option:hover {
  background: #f4f4f5;
}

/* 지금 보고 있는 달. */
.care-calendar-month-option[aria-current="true"] {
  color: #6eba2c;
  font-weight: 700;
}

/* 펼쳐져 있으면 캐럿을 돌려 접힌다는 것을 보인다. */
.care-calendar-month[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}

.care-calendar-move {
  display: flex;
  gap: 4px;
}

.care-calendar-arrow {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #e0e0e2;
  border-radius: 50%;
  background: #fff;
  /* 원고에는 단추 아래로 옅은 그림자가 깔린다. 테두리 바로 밑이 가장 진하고(3% 남짓)
     11px쯤에서 사라진다. 원고 그림에서 밝기를 재서 옮겼다. */
  box-shadow: 0 4px 12px rgba(9, 9, 11, 0.06);
  cursor: pointer;
}

/* 페이지 이동 화살표와 같은 글리프다. 마스크라 background가 곧 화살표 색이다. */
.care-calendar-arrow::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask: url("../images/ui/carousel-next.svg") center / 20px no-repeat;
  mask: url("../images/ui/carousel-next.svg") center / 20px no-repeat;
  background: #27272a;
}

.care-calendar-prev::before {
  transform: rotate(180deg);
}

.care-calendar-grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-family: "NPS_font", var(--font-sans);
}

/* 머리행 띠를 알약 모양으로 둥글린다. 양 끝 칸만 바깥쪽 모서리를 깎으면 띠 전체가
   둥글어 보인다. border-collapse: collapse에서는 칸의 모서리가 깎이지 않으므로
   표를 separate로 두되 칸 사이 간격은 0으로 붙여, 줄 사이 선은 지금 그대로 둔다. */
.care-calendar-grid th:first-child {
  border-radius: 999px 0 0 999px;
}

.care-calendar-grid th:last-child {
  border-radius: 0 999px 999px 0;
}

.care-calendar-grid th {
  height: 50px;
  background: #f4f4f5;
  color: #27272a;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.care-calendar-grid td {
  height: 120px;
  padding: 16px 8px;
  border-bottom: 1px solid #f4f4f5;
  vertical-align: top;
}

/* 일요일 칸. 공휴일은 무슨 요일이든 같은 빨강으로 쓴다. */
.care-calendar-grid tr > :first-child,
.care-calendar-grid .is-holiday .care-calendar-day {
  color: #fb2c36;
}

/* 지난달·다음달 날짜. 빨강이든 검정이든 같은 만큼 옅어진다. */
.care-calendar-grid .is-outside {
  opacity: 0.3;
}

.care-calendar-day {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
}

/* "오늘"·"임시공휴일"처럼 날짜 옆에 붙는 꼬리표. */
.care-calendar-day em {
  margin-left: 6px;
  font-size: 13px;
  /* 날짜가 굵어졌어도 꼬리표는 따라가지 않는다(원고에서도 날짜보다 연하다). */
  font-weight: 400;
  font-style: normal;
  color: #71717b;
}

.care-calendar-time {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: #71717b;
}

.care-calendar-grid .status-badge {
  margin-top: 8px;
}

/* 모바일에서는 일곱 칸이 42px까지 줄어 "09:00 ~ 11:00"이 다섯 줄로 쪼개진다.
   이 사이트의 다른 표와 같이 눌러 담지 않고 .table-scroll 안에서 가로로 본다
   (한 칸 88px). 달력만 보는 규칙이라 아래 큰 구간 묶음으로 옮기지 않고 여기 둔다. */
@media (max-width: 640px) {
  .care-calendar-grid {
    min-width: 616px;
  }
}

.detail-modal-grid {
  display: grid;
  gap: 16px;
}

.detail-modal-grid label {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.detail-modal-grid input,
.detail-modal-body textarea {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #f4f4f5;
  color: rgba(9, 9, 11, 0.4);
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}

.detail-modal-grid input {
  min-height: 64px;
  padding: 0 24px;
}

.detail-modal-body textarea {
  min-height: 244px;
  padding: 20px 24px;
  resize: none;
}

.detail-modal-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 80px;
}

.btn-danger {
  width: 119px;
  height: 64px;
  border: 1px solid #fb2c36;
  border-radius: 13px;
  background: #fff;
  color: #fb2c36;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.care-reservation-page .care-reservation-heading h2,
.reservation-form-page .reservation-form-heading h2 {
  display: flex;
  gap: 10px;
}

.care-reservation-page .care-reservation-heading h2 span:first-child,
.reservation-form-page .reservation-form-heading h2 span:first-child {
  color: #09090b;
}

.care-reservation-page .care-reservation-heading h2 span + span,
.reservation-form-page .reservation-form-heading h2 span + span {
  color: #6eba2c;
}

.care-search-toolbar {
  position: relative;
  width: 480px;
  min-width: 0;
}

.care-search-toolbar input {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  padding: 0 64px 0 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.care-search-toolbar input::placeholder {
  color: rgba(9, 9, 11, 0.5);
  opacity: 1;
}

.care-search-toolbar .icon-button {
  position: absolute;
  top: 50%;
  right: -24px;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.care-search-toolbar .icon-button .icon-search {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.care-search-toolbar .icon-button .icon-search::before,
.care-search-toolbar .icon-button .icon-search::after {
  display: none;
}

.care-reservation-page .life-desktop-results .life-total {
  margin-bottom: 40px;
}

.care-desktop-list {
  gap: 40px;
}

.care-desktop-card {
  /* 썸네일 400px·버튼 118px·gap 64px×2가 모두 고정이라 카드가 646px 이하면
     가운데 본문 칼럼이 0px로 붕괴하며 글자가 한 자씩 쪼개졌다(1025에서 카드 646px).
     썸네일을 줄어들 수 있게 하고 본문에 최소 폭을 줘서 붕괴를 막는다.
     카드가 넉넉한 폭(≥1090)에서는 썸네일이 400px 그대로라 종전과 동일. */
  min-height: 260px;
  /* 본문 최소 240px = dt 100 + gap 16 + dd 124.
     dd("999명 / 999명")가 121px를 필요로 하는데 그보다 좁으면
     overflow-wrap:break-word가 숫자를 "9"/"99명"으로 쪼갠다. */
  grid-template-columns: minmax(0, 400px) minmax(240px, 1fr) 118px;
  padding-bottom: 0;
  border-bottom: 0;
}

.care-desktop-card .life-desktop-thumb {
  width: 100%;
  max-width: 400px;
  border-color: rgba(113, 113, 123, 0.15);
  background: #F4F4F5;
}

/* 좁은 데스크톱에서는 64px 간격이 본문 폭을 너무 잡아먹어 썸네일이 얇아진다.
   간격을 줄여 썸네일·본문 모두에 폭을 돌려준다. (1400 이상은 종전 64px) */
@media (min-width: 1025px) and (max-width: 1400px) {
  .care-desktop-card {
    gap: 32px;
  }
}

.care-desktop-card:not(.is-disabled):hover .life-desktop-thumb {
  /* border 두께 변화 대신 box-shadow로 → 레이아웃 시프트 없음 */
  border-color: #6EBA2C;
  box-shadow: inset 0 0 0 3px #6EBA2C;
}

/* 크기·생김새는 공통 하트 규칙이 잡는다. 여기에는 이 카드에서만 다른 위치와,
   기반인 .life-desktop-thumb button(원형 배경 + 그림자)을 지우는 선언만 남긴다. */
.care-desktop-card .life-desktop-thumb .life-desktop-favorite {
  top: 22px;
  right: 22px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.care-desktop-card .life-desktop-thumb .life-desktop-favorite::before {
  display: none;
}

.care-desktop-card .life-desktop-copy {
  gap: 20px;
}

.care-desktop-card .life-desktop-copy dl {
  gap: 12px;
  margin-top: 0;
}

.care-desktop-card .life-desktop-copy dl div {
  grid-template-columns: 100px minmax(0, 1fr);
}

.care-desktop-card .life-desktop-copy dd strong {
  color: #6eba2c;
}

.care-desktop-card .life-desktop-actions .btn {
  width: 118px;
  padding: 0 16px;
}

.care-desktop-card.is-disabled .life-desktop-copy {
  opacity: 0.4;
}

.care-desktop-card.is-disabled .life-desktop-thumb {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.08);
}

.care-desktop-card .btn.is-disabled {
  border-color: rgba(113, 113, 123, 0.08);
  background: rgba(113, 113, 123, 0.08);
  color: rgba(9, 9, 11, 0.32);
  pointer-events: none;
}

.facility-service-page {
  font-family: "NPS_font", var(--font-sans);
}

.facility-service-page .page-main {
  padding-block: 40px 0;
}

.facility-service-detail {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.facility-service-title {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: "NPS_font", var(--font-sans);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: #09090b;
}

.facility-service-title strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.018em;
  color: #6eba2c;
}

.facility-service-card {
  display: grid;
  grid-template-columns: minmax(0, 642px) minmax(0, 654px);
  gap: 64px;
  align-items: center;
  padding: 56px 80px;
  border-radius: 48px 140px 48px 48px;
  background: linear-gradient(109deg, #fff7eb 0%, #f4faec 100%);
}

.facility-service-copy {
  display: grid;
  gap: 24px;
  align-self: start;
}

.facility-service-copy > .facility-service-carousel {
  grid-template-columns: 48px auto 48px 1fr;
  justify-self: stretch;
  margin-top: 40px;
  align-items: center;
}

/* 위 program-detail 쪽과 같은 광학 중심 보정. */
.facility-service-copy > .facility-service-carousel::after {
  content: "";
  position: relative;
  top: -1px;
  margin-left: 8px;
  height: 1px;
  background: rgba(113, 113, 123, 0.15);
}

.facility-service-copy h3 {
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.facility-service-copy p,
.facility-service-facts {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
}

.facility-service-facts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.facility-service-facts div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
}

.facility-service-facts dt {
  position: relative;
  padding-left: 32px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
}

.facility-service-facts dt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: var(--meta-icon, var(--meta-icon-fallback)) center / contain no-repeat;
}

.facility-service-facts {
  --meta-icon-fallback: url("../images/ui/dt-icon-1.png");
}

/* 운영 시간은 값이 여러 줄이라 라벨을 위로 붙인다(항목 순서와 무관하게). */
.facility-service-facts .meta-time dt {
  align-self: start;
}

.facility-service-facts dd {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.facility-service-facts dd strong {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #6EBA2C;
}

.facility-service-facts dd span {
  margin: 0 8px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.5);
}

.facility-service-facts dd b {
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
}

.facility-service-actions p strong::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: url("../images/ui/facility-actions-icon.png") center / contain no-repeat;
}

.facility-service-gallery {
  display: grid;
  gap: 16px;
}

.facility-service-image {
  position: relative;
  min-height: 393px;
  border-radius: 140px 48px 48px 48px;
  /* 사진은 관리자가 장마다 등록하므로 마크업이 --facility-image로 넘긴다. 인라인
     style의 경로는 CSS 파일이 아니라 HTML 문서 기준으로 적는다. 등록 전에는 아래
     깔린 공통 기본 썸네일이 그대로 보인다. 전에 쓰던 program-placeholder.png는
     속이 빈 투명 PNG라 사진 자리가 체크무늬로 뚫린 것처럼 읽혔다. */
  background: var(--facility-image, none) center / cover no-repeat, var(--thumb-default);
}

/* 사진이 여러 장이면 세로로 쌓이지 않고 한 자리에서 겹쳐 바뀐다.
   그리드 한 칸에 모두 넣는 방식이라 높이·모서리 규칙은 사진 자신에게 그대로 남는다
   (페이지마다, 화면 폭마다 값이 달라 사진에서 떼어내면 전부 다시 맞춰야 한다). */
.facility-service-slides {
  display: grid;
}

.facility-service-slides > .facility-service-image {
  grid-area: 1 / 1;
  opacity: 0;
  /* 안 보이는 장 안의 즐겨찾기 버튼이 탭 이동에 걸리지 않도록 같이 끈다. */
  visibility: hidden;
  /* 나가는 장은 흐려지지 않고 들어오는 장이 다 덮은 뒤에 꺼진다. */
  transition: opacity 0s linear 0.6s, visibility 0s linear 0.6s;
}

.facility-service-slides > .facility-service-image.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.6s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .facility-service-slides > .facility-service-image,
  .facility-service-slides > .facility-service-image.is-active {
    transition: none;
  }
}

/* 위치·크기는 .favorite-badge에서 공통으로 잡는다. */

.facility-service-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 275px 164px;
  gap: 12px;
  align-items: center;
}

.facility-service-actions p {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0;
  color: #09090b;
  font-size: 17px;
  line-height: 1.5;
}

.facility-service-actions p strong {
  position: relative;
  padding-left: 32px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
}

.facility-service-actions p strong::before {
  top: 2px;
  left: 0;
}

.facility-service-actions .btn-favorite-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.facility-service-actions .btn {
  min-height: 64px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 400;
}

.facility-service-actions .btn-dark {
  border-color: #27272a;
  background: #27272a;
  color: #fff;
}

.facility-info-block {
  display: grid;
  gap: 20px;
  color: #09090b;
  font-size: 17px;
  line-height: 1.5;
}

.facility-info-block h3 {
  position: relative;
  padding-left: 36px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.facility-info-block h3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
}

.facility-info-block p {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
}

.facility-info-block:has(> ul) > p {
  font-size: 19px;
  color: #09090b;
}

.facility-info-block ul {
  display: grid;
  gap: 8px;
  margin: 0;
  height: 114px;
  align-content: start;
  border-radius: 32px;
  padding: 24px 32px;
  background: #f4f4f6;
  color: rgba(9, 9, 11, 0.75);
  line-height: 1.5;
}

.facility-info-block li {
  position: relative;
  padding-left: 16px;
}

.facility-info-block li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-green);
}

.facility-info-table {
  width: 100%;
  border-top: 1px solid #27272A;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.facility-info-table th,
.facility-info-table td {
  min-height: 64px;
  border-right: 1px solid rgba(113, 113, 123, 0.15);
  border-bottom: 1px solid rgba(113, 113, 123, 0.15);
  padding: 18px 20px;
  text-align: center;
  vertical-align: middle;
}

.facility-info-table tr > th:last-child,
.facility-info-table tr > td:last-child {
  border-right: 0;
}

.facility-info-table th {
  width: 33.333%;
  background: #f4f4f5;
  font-weight: 400;
}

.facility-info-table:not(.fee-table) {
  table-layout: fixed;
}

.facility-info-table:not(.fee-table) tr:first-child td {
  background: #f4f4f5;
}

.facility-info-table:not(.fee-table) tr:not(:first-child) td {
  color: rgba(9, 9, 11, 0.75);
}

.fee-table th {
  width: 50%;
}

.fee-table td {
  color: rgba(9, 9, 11, 0.75);
}

.facility-process {
  display: grid;
  grid-template-columns: minmax(0, 365fr) minmax(0, 365fr) minmax(0, 750fr);
  gap: 20px;
}

.facility-process article {
  position: relative;
  display: grid;
  gap: 12px;
}

.facility-process article:nth-child(-n+2)::before {
  content: "";
  position: absolute;
  top: calc(49px + 12px + 126px / 2);
  right: -34px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  z-index: 1;
}

.facility-process article:nth-child(-n+2)::after {
  content: "";
  position: absolute;
  top: calc(49px + 12px + 126px / 2);
  right: -18px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  -webkit-mask: url("../images/ui/carousel-next.svg") center / contain no-repeat;
  mask: url("../images/ui/carousel-next.svg") center / contain no-repeat;
  background: #09090B;
  z-index: 2;
}

.facility-process h4 {
  align-self: start;
  width: 100%;
  /* 폭이 좁아지면 "정부지원 신청 및 접수" 같은 라벨이 2줄이 되는데
     height 고정이면 아랫줄이 알약 밖으로 잘린다. */
  min-height: 49px;
  border-radius: 999px;
  background: #6EBA2C;
  padding: 10px 32px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}

.facility-process article:nth-child(2) h4 {
  background: #5A9A22;
}

.facility-process article:nth-child(2) li {
  padding-left: 0;
  text-align: center;
}

.facility-process article:nth-child(2) li::before {
  display: none;
}

.facility-process article:nth-child(3) h4 {
  background: #48791B;
}

.facility-process article:nth-child(3) ul {
  display: grid;
  /* li가 white-space:nowrap이라 3열 고정이면 최소폭이 713px로 고정되는데,
     이 트랙은 1025에서 467px뿐이라 페이지 밖으로 밀려 가로 스크롤이 생겼다(+207px).
     칸이 230px 밑으로 내려가지 않게 해 폭에 맞춰 열 수를 줄인다.
     1920에서는 트랙 742px로 종전과 같은 3열. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  height: auto;
  padding: 0;
  background: none;
}

.facility-process article:nth-child(3) li {
  display: grid;
  align-content: center;
  justify-items: center;
  height: 126px;
  padding: 24px 32px;
  border-radius: 32px;
  background: #f4f4f6;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(9, 9, 11, 0.75);
  text-align: center;
  white-space: nowrap;
}

.facility-process article:nth-child(3) li::before {
  display: none;
}

.facility-process ul {
  min-height: 126px;
  align-content: center;
}

/* 영문은 같은 내용이라도 줄 수가 늘어난다.
   - .facility-info-block ul의 height:114px가 상속돼 박스가 126px로 고정되어 있어
     늘어난 글이 회색 배경 밖으로 흘렀다.
   - 3번째 칸의 li는 white-space:nowrap이라 줄바꿈이 막혀 글자가 잘렸다.
   한국어 레이아웃은 그대로 두고 영문일 때만 푼다. */
/* 세 칸의 제목 알약과 회색 박스 높이를 서로 맞춘다. 영문은 1·2번 제목이 2줄(77),
   3번은 1줄(49)이라 그냥 두면 칸마다 높이가 다르다. 회색 박스도 184/180/181로
   어긋나서 가장 큰 값에 맞춘다(한국어는 49 / 126으로 이미 균일하다).

   아래 값들은 세 칸이 가로로 놓이는 PC 기준이다. 미디어쿼리 없이 두면 641 이하
   세로 스택에서도 그대로 먹는데, html[lang="en"]가 붙어 특정도가 높아 스택용
   규칙(top:auto/bottom:-34px, li min-height:88px)을 이겨버린다. 실제로 연결 원이
   박스 아래가 아니라 본문 글자 위에 얹혀 겹쳤다. PC로 한정한다. */
@media (min-width: 1025px) {
  html[lang="en"] .facility-process h4 {
    /* 한 줄짜리 "User"가 2줄 높이 알약 안에서 위로 붙지 않도록 세로 중앙에 둔다. */
    display: grid;
    align-content: center;
    min-height: 77px;
  }

  html[lang="en"] .facility-process ul {
    height: auto;
    min-height: 184px;
  }

  html[lang="en"] .facility-process article:nth-child(3) li {
    height: auto;
    min-height: 184px;
    white-space: normal;
  }

  /* 카드 사이 연결 표시는 회색 박스 세로 중앙에 놓는다. 한국어는 h4 49 + gap 12 +
     박스 126의 절반이라 124px인데, 영문은 h4가 2줄(77)이고 박스도 커져 182px가 된다. */
  html[lang="en"] .facility-process article:nth-child(-n+2)::before,
  html[lang="en"] .facility-process article:nth-child(-n+2)::after {
    top: 182px;
  }
}

/* 세로 스택(641 이하)에서는 영문도 글이 길어지면 박스가 커져야 한다. 위 PC 값이
   빠졌으니 여기서 다시 풀어 준다. */
@media (max-width: 1024px) {
  html[lang="en"] .facility-process ul {
    height: auto;
  }

  html[lang="en"] .facility-process article:nth-child(3) li {
    height: auto;
    white-space: normal;
  }
}

.child-center-page .facility-service-title {
  color: #09090b;
}

.child-center-page .facility-service-card {
  position: relative;
  width: 100%;
  max-width: 1520px;
  min-height: 338px;
  max-height: 338px;
  /* 카드가 1520px(80+660+100+600+80) 미만이면 고정 트랙이 넘쳐 오른쪽 이미지가
     왼쪽 설명글을 덮었다. 트랙을 축소 가능하게 해 겹치지 않도록 한다. */
  grid-template-columns: minmax(0, 660px) minmax(0, 600px);
  gap: 100px;
  align-items: start;
  padding: 56px 80px;
  border-radius: 48px 140px 48px 48px;
}

.child-center-page .facility-service-copy {
  width: 100%;
  min-height: 226px;
  gap: 64px;
}

.child-center-copy-text {
  display: grid;
  gap: 24px;
}

.child-center-card-control {
  display: flex;
  width: 100%;
  gap: 32px;
  align-items: center;
}

.child-center-card-control > span {
  flex: 1;
  height: 1px;
  background: rgba(113, 113, 123, 0.32);
}

/* 갤러리를 절대배치에서 그리드 두 번째 칸으로 되돌린다.
   흐름 밖에 있어서 설명글이 자리를 비켜주지 않는 것이 겹침의 원인이었다.
   카드 max-height(338px)는 그대로라 이미지(360px)가 아래로 78px 넘치는
   기존 오버행은 유지된다. */
.child-center-page .facility-service-gallery {
  position: static;
  width: 100%;
  gap: 0;
}

.child-center-page .facility-service-image {
  min-height: 360px;
  border-radius: 140px 48px 48px 48px;
  /* child-center-card.png도 속이 빈 투명 PNG였다(위 .facility-service-image와 같은 이유).
     background-image만 바꾸면 base의 두 겹 배경과 어긋나므로 축약형으로 다시 적는다. */
  background: var(--facility-image, none) center / cover no-repeat, var(--thumb-default);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03), 0 4px 10px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.child-center-mobile-carousel {
  display: none;
}

.child-service-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 142px;
}

.child-service-block {
  gap: 12px;
}

.child-service-block h3 {
  align-self: start;
  /* 라벨이 2줄이 될 때 알약 밖으로 잘리지 않도록 고정 높이 대신 최소 높이 */
  min-height: 49px;
  border-radius: 999px;
  background: #6eba2c;
  padding: 10px 32px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}

.child-service-block h3::before {
  display: none;
}

.child-service-block ul {
  display: grid;
  gap: 8px;
  /* .facility-info-block ul의 height:114px가 상속돼 min-height와 함께 210px 고정
     박스가 되면서, 폭이 좁아져 줄이 늘면 텍스트가 회색 배경 밖으로 흘렀다
     (641에서 84px). 내용에 따라 늘어나게 풀되 최소 높이 210px는 유지한다. */
  height: auto;
  min-height: 210px;
  align-content: start;
  border-radius: 32px;
  padding: 24px 32px;
  background: #f4f4f6;
  color: rgba(9, 9, 11, 0.75);
  line-height: 1.5;
}

.child-service-block ul li {
  position: relative;
  padding-left: 17px;
}

.child-service-block ul li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-green);
}

.reservation-form-page .page-main {
  padding-block: 140px 160px;
}

.reservation-form-page .content-section.container {
  width: calc(100% - 400px);
  max-width: none;
}

.reservation-form-page .reservation-form-heading {
  min-height: 66px;
  align-items: center;
  margin-bottom: 64px;
}

.reservation-form-page .reservation-form-heading h2 {
  color: #09090b;
  font-size: 44px;
  line-height: 1.32;
}

.reservation-application-form {
  border-top: 1.5px solid #27272a;
}

.reservation-form-body {
  display: grid;
  gap: 64px;
  padding: 40px 0;
}

.reservation-form-group {
  display: grid;
  grid-template-columns: minmax(0, 406.666px) minmax(0, 1013.333px);
  gap: 100px;
  align-items: start;
  padding-bottom: 64px;
  background-image: linear-gradient(to right, #E4E4E4 0 7.5px, transparent 7.5px 13.5px);
  background-size: 13.5px 1.5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.reservation-group-title {
  display: grid;
  gap: 16px;
  align-content: start;
  min-height: 38px;
}

.reservation-group-title h3 {
  position: relative;
  min-height: 38px;
  margin: 0;
  padding-left: 36px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
}

.reservation-group-title h3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
}

.reservation-group-title small {
  color: #6eba2c;
  font-size: 17px;
  line-height: 1.5;
}

.reservation-fields {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.reservation-field {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.reservation-field > label {
  display: flex;
  min-height: 64px;
  align-items: center;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.reservation-control,
.reservation-control-grid,
.reservation-search-control {
  min-width: 0;
}

.reservation-control input,
.reservation-control select,
.reservation-fields textarea,
.reservation-search-control input,
.school-search-form input,
.school-search-form select {
  /* 폼 컨트롤은 min-width가 auto라 고유폭(select 82px) 밑으로 못 줄어든다.
     칸이 좁아지면 칸을 넘쳐 서로 겹치고, 겹친 위쪽 요소가 클릭을 가로챈다
     (생년월일 3-select가 1025에서 71px 칸을 66px 넘침). */
  width: 100%;
  min-width: 0;
  min-height: 64px;
  border: 1px solid rgba(113, 113, 123, 0.15);
  border-radius: 13px;
  background: #fff;
  color: #09090b;
  padding: 0 24px;
  font-size: 17px;
  line-height: 1.5;
}

.reservation-control input::placeholder,
.reservation-fields textarea::placeholder,
.reservation-search-control input::placeholder,
.school-search-form input::placeholder {
  color: rgba(9, 9, 11, 0.5);
}

.reservation-control-grid {
  display: grid;
  gap: 12px;
}

.reservation-control-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reservation-control-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reservation-control select,
.school-search-form select {
  appearance: none;
  -webkit-appearance: none;
  background:
    url("../images/ui/select-chevron.png") right 24px center / 24px no-repeat,
    #fff;
  padding-right: 56px;
}

.reservation-search-control {
  position: relative;
}

.reservation-search-control input {
  padding-right: 64px;
}

/* 돋보기는 학교 검색 팝업을 여는 버튼이다. 그림은 안쪽 <img>가 맡는다.
   .icon-search를 버튼에 직접 걸면 안 된다. components.css의 그 클래스는 ::before·
   ::after로 돋보기를 직접 그리는데, <img>에서는 가상 요소가 안 그려져 조용하지만
   <button>에 붙이면 그려져서 아이콘 위에 겹친다.
   자리는 예전 <img>와 같게 두고 손가락·마우스가 닿는 넓이만 조금 키운다. */
.reservation-search-control .icon-button {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
}

/* ============================================================
   학교 검색 팝업 (신청·예약)
   시안 크기는 1170x820이다. 화면이 그보다 작으면 여백만 남기고 줄이고,
   결과 목록만 안에서 스크롤한다.
   ============================================================ */
.school-search {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(9 9 11 / 60%);
}

/* hidden 속성은 display 선언에 지므로 다시 감춘다. */
.school-search[hidden] {
  display: none;
}

.school-search-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 40px;
  width: min(1170px, 100%);
  height: min(820px, 100%);
  padding: 60px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.school-search-close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.school-search-close img {
  width: 24px;
  height: 24px;
}

.school-search-panel h2 {
  margin: 0;
  font-family: "NPS_font", var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090b;
}

.school-search-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
}

.school-search-form label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

/* 라벨 폭을 묶어 두 줄의 컨트롤 시작선을 맞춘다. */
.school-search-form label > span {
  flex: 0 0 88px;
  font-size: 17px;
  line-height: 1.5;
  color: #09090b;
}

.school-search-name {
  grid-column: 1 / -1;
}

/* 위 검색 칸과의 사이는 패널 gap(40px)의 절반쯤이 시안에 맞아 20px을 당긴다. */
.school-search-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: -20px;
}

.school-search-actions .btn {
  min-height: 48px;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 17px;
  font-weight: 400;
}

.school-search-actions .refresh-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* 목록 위 점선. 1px dashed를 쓰지 않은 건 브라우저가 3px씩 끊어 시안(대시 8·간격 2)과
   달라지기 때문이다. 이 파일의 다른 점선(.detail-modal-body section + section)과 같은
   방식이다. 목록이 안에서 스크롤해도 선은 상자에 붙어 있어 따라 움직이지 않는다. */
.school-search-results {
  /* 한 줄 높이 = 버튼 40 + 상하 padding 10 + 아래 선 1. 줄 치수를 바꾸면
     이 값만 맞추면 되고, 5줄 높이는 아래 max-height가 알아서 따라온다. */
  --school-row-height: 61px;
  --school-rows: 5;
  /* 점선과 표 사이. PC는 패널 padding(60)의 0.67배가 시안값이라 40px이고,
     좁은 화면에서는 패널 padding이 줄어든 만큼 아래 구간에서 같이 줄인다. */
  --school-list-gap: 40px;
  min-height: 0;
  /* 5줄까지만 보이고 나머지는 안에서 스크롤. 1px은 표 위 테두리(#27272a). */
  max-height: calc(var(--school-list-gap) + 1px + var(--school-row-height) * var(--school-rows));
  overflow-y: auto;
  /* 스크롤은 되게 두고 막대만 감춘다. */
  scrollbar-width: none;
  /* 점선 아래 여백. padding으로 두면 그 자리가 스크롤 영역 안이라 행이 위로
     밀려 올라와 점선까지 침범했다. 테두리는 스크롤 영역 밖이라 행이 못 들어오고,
     배경은 아래 background-origin 덕에 테두리 바깥선 기준으로 그려진다. */
  border-top: var(--school-list-gap) solid transparent;
  background-image: linear-gradient(to right, #e4e4e4 0 7.5px, transparent 7.5px 13.5px);
  background-size: 13.5px 1.5px;
  background-repeat: repeat-x;
  /* 기준을 테두리 바깥선으로. 기본값(padding-box)이면 위 40px 테두리만큼
     점선이 아래로 내려가 목록 첫 줄에 붙는다. */
  background-origin: border-box;
  background-position: left top;
}

/* scrollbar-width를 아직 모르는 웹킷 계열(사파리 등)용. */
.school-search-results::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.school-search-results table {
  width: 100%;
  border-top: 1px solid #27272a;
  border-collapse: collapse;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090b;
}

.school-search-results th,
.school-search-results td {
  border-bottom: 1px solid rgba(113, 113, 123, 0.15);
  padding: 10px 20px;
  text-align: center;
  vertical-align: middle;
}

/* 세로선은 칸 사이에만. td에만 왼쪽 선을 주면 th|td와 td|td 두 경계에는 서고
   표의 바깥 좌우에는 서지 않는다(첫 칸이 th, 마지막 칸이 td라서). */
.school-search-results td {
  border-left: 1px solid rgba(113, 113, 123, 0.15);
}

/* 열 너비는 %로 잡는다. px으로 박으면 PC(내용폭 1050)에서 맞춘 240·220이 PDA(640)에
   그대로 내려와 학교명 칸만 180px로 눌린다. 아래 값은 PC 실측 비율 그대로다
   (240/1050 = 22.86%, 220/1050 = 20.95%). */
.school-search-results th {
  width: 22.86%;
  background: #f4f4f6;
  font-weight: 400;
}

.school-search-results td:last-child {
  width: 20.95%;
}

/* 학교명 칸만 75% 농도. 표 전체 색(#09090b)은 지역명(th)에 그대로 두고,
   마지막 칸은 버튼이라 색이 걸리지 않도록 :not(:last-child)로 좁힌다. */
.school-search-results td:not(:last-child) {
  color: rgba(9, 9, 11, 0.75);
}

.school-search-results .btn-small {
  min-height: 40px;
  padding: 0 12px;
  font-size: 15px;
  border-radius: 9px;
}

@media (max-width: 1024px) {
  /* 높이를 820px로 못박으면 글자·여백이 줄어든 만큼 목록 아래에 빈 자리가
     남는다(PDA에서 152px). 내용만큼만 서게 둔다.
     막는 값에 100%를 쓰면 안 된다. 이 패널은 그리드 칸 안에 있고 그 칸 높이가
     내용에 따라 정해져서 백분율이 풀리지 않는다(360x560에서 641px로 화면을 넘겼다).
     오버레이 padding(24×2)을 뺀 화면 높이로 직접 막는다. */
  .school-search-panel {
    height: auto;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    gap: 24px;
    padding: 40px;
  }

  /* 패널 padding이 60→40으로 줄었으니 닫기 버튼도 같은 비율(0.4배)로 당긴다. */
  .school-search-close {
    top: 16px;
    right: 16px;
  }

  .school-search-panel h2 {
    font-size: 25px;
  }

  /* PC의 -20px은 gap 40의 절반이었다. gap이 24면 -12px이 같은 비율이다. */
  .school-search-actions {
    margin-top: -12px;
  }

  /* 라벨 폭이 88px 그대로면 칸(300px)의 29%를 먹어 셀렉트가 196px밖에 안 남는다.
     PC는 셀렉트가 칸의 79%(401/505)라 그 비율에 가깝게 라벨을 줄인다. */
  .school-search-form label > span {
    flex-basis: 64px;
  }

  /* 점선 위아래 여백은 PC에서 패널 gap과 같은 40px이다. gap이 24면 여기도 24. */
  .school-search-results {
    --school-list-gap: 24px;
  }
}

/* 좁은 화면에서는 두 칸을 나란히 둘 자리가 없다. 그대로 두면 라벨과 셀렉트가
   서로 겹치고, 표는 옆으로 넘쳐 "선택하기"가 잘린다. 한 줄에 하나씩 쌓고
   표의 여백·글자를 줄여 폭 안에 넣는다. */
@media (max-width: 640px) {
  .school-search {
    padding: 16px;
  }

  /* 오버레이 padding이 16px로 줄었으니 막는 값도 그만큼 늘린다. */
  .school-search-panel {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    gap: 20px;
    padding: 24px;
    border-radius: 24px;
  }

  .school-search-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .school-search-panel h2 {
    font-size: 22px;
  }

  .school-search-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* PC는 라벨과 컨트롤 글자가 둘 다 17px로 같다. 컨트롤만 15px로 줄이면
     라벨만 커 보이므로 같이 내린다. */
  .school-search-form label > span {
    flex-basis: 64px;
    font-size: 15px;
  }

  .school-search-form input,
  .school-search-form select {
    min-height: 52px;
    padding: 0 16px;
    font-size: 15px;
  }

  .school-search-form select {
    background-position: right 16px center;
    padding-right: 44px;
  }

  /* gap 20의 절반. PC의 -20px이 gap 40의 절반인 것과 같다. */
  .school-search-actions {
    margin-top: -10px;
  }

  .school-search-actions .btn {
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }

  /* 점선 위아래 여백은 PC에서 패널 gap과 같은 40px이다. gap이 20이면 여기도 20. */
  .school-search-results {
    --school-list-gap: 20px;
  }

  .school-search-results table {
    font-size: 15px;
  }

  /* 세로 여백은 PC와 같은 10px. 가로만 폭에 맞춰 20→6px로 줄인다.
     360에서는 아래 %가 이겨서 칸 폭이 그대로지만, 320처럼 더 좁은 화면에서는
     8px일 때 칸들의 최소폭 합(242px)이 자리(240px)를 넘겨 표가 옆으로 삐져나갔다. */
  .school-search-results th,
  .school-search-results td {
    padding: 10px 6px;
  }

  /* PC 비율(22.86 / 20.95)을 그대로 쓰면 내용폭 280px에서 버튼 칸이 59px이라
     "선택하기" 버튼(71px)이 안 들어간다. 글자 폭이 바닥이라 더 못 줄이므로
     양쪽 끝 칸만 조금 넓히고, 남는 자리는 전부 학교명 칸에 준다. */
  .school-search-results th {
    width: 23%;
  }

  .school-search-results td:last-child {
    width: 32%;
  }

  .school-search-results .btn-small {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }

  /* 줄이 낮아진 만큼(버튼 32 + padding 10 + 10 + 선 1) 5줄 높이도 다시 잡는다. */
  .school-search-results {
    --school-row-height: 53px;
  }
}

.reservation-day-chips {
  display: flex;
  min-height: 64px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.reservation-day-chips button {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 9.5px 24px;
  border: 0;
  border-radius: 999px;
  background: #F4F4F5;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  color: #09090B;
}

.reservation-day-chips button.is-active {
  border: 1.5px solid #27272A;
  background: #fff;
  font-weight: 700;
}

.reservation-fields textarea {
  height: 246px;
  padding: 24px;
  resize: none;
}

.privacy-consent-box {
  height: 324px;
  overflow: hidden;
  border-radius: 24px;
  background: #F4F4F5;
  padding: 19px 24px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(9, 9, 11, 0.75);
}

.privacy-consent-box p {
  margin: 0;
}

.privacy-consent-box p + p {
  margin-top: 1em;
}

.reservation-check-row {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #09090B;
}

/* 체크박스 공통 규격. 쓰는 곳은 신청·예약 동의(.reservation-check-row)와
   회원가입 약관 동의(.term-box) 두 곳이고 모양이 같아 여기서 한 번만 정의한다.
   구간별로 크기를 줄이지 않는다(PC·PDA·모바일 모두 32x32).

   padding을 0으로 되돌리는 이유: components.css의 입력 공통 규칙이
   `input { padding: 0 16px }`을 걸어두는데, box-sizing이 border-box라
   좌우 패딩 32px + 테두리가 최소 폭이 되어 width:32px이 무시되고 34x32로
   눌렸다. 체크박스는 공통 입력 규격에서 빠져야 한다. */
.reservation-check-row input,
.term-box input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(113, 113, 123, 0.22);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

/* 체크 표시는 이미지 대신 테두리로 그린다(checkbox-icon.png은 어두운 체크라
   채워진 상자 위에서 보이지 않는다). 기본 상태에도 체크를 보여주되 색을
   테두리와 같게 두고, 체크되면 상자를 채우고 체크만 흰색으로 바꾼다. */
.reservation-check-row input::after,
.term-box input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 12px;
  border: solid rgba(113, 113, 123, 0.22);
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

.reservation-check-row input:checked,
.term-box input[type="checkbox"]:checked {
  border-color: #6eba2c;
  background: #6eba2c;
}

.reservation-check-row input:checked::after,
.term-box input[type="checkbox"]:checked::after {
  border-color: #ffffff;
}

.reservation-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 64px;
}

.reservation-form-actions .btn {
  min-height: 64px;
  border-radius: 12px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.reservation-form-actions .btn-ghost {
  width: 118px;
  border-color: rgba(113, 113, 123, 0.22);
  color: #09090b;
}

.reservation-form-actions .btn-primary {
  width: 164px;
  background: #6eba2c;
}

@media (max-width: 1280px) {
  .container {
    width: min(var(--container), calc(100% - 48px));
  }

  .site-header .container,
  .mega-inner.container,
  .hero-panel.container,
  .quick-filter.container,
  .page-visual-inner.container {
    width: calc(100% - 48px);
  }

  .hero-panel.container {
    padding-inline: 72px;
  }

  .quick-filter.container {
    padding-inline: 72px;
  }

  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  body.home-page {
    --header-height: 80px;
  }

  body.home-page .site-header .container,
  body.home-page .hero-panel.container,
  body.home-page .quick-filter.container,
  body.home-page .frequent-section.container,
  body.home-page .program-strip.container,
  body.home-page .news-layout.container,
  body.home-page .map-preview-band .container {
    width: calc(100% - 48px);
  }

  body.home-page .hero-panel.container {
    min-height: clamp(560px, 44vw, 680px);
    padding-inline: clamp(72px, 8vw, 120px);
    border-radius: clamp(120px, 12vw, 170px) 64px 64px 64px;
  }

  body.home-page .hero-copy {
    width: min(620px, 100%);
  }

  body.home-page .hero-copy h1 {
    font-size: clamp(42px, 3.6vw, 52px);
  }

  body.home-page .hero-actions {
    margin-top: 32px;
  }

  body.home-page .carousel-controls {
    margin-top: 24px;
  }

  body.home-page .quick-filter.container {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 1.35fr) minmax(0, 1fr) 128px;
    gap: 10px;
    margin-top: -68px;
    padding-inline: clamp(48px, 6vw, 96px);
  }

  body.home-page .quick-filter label,
  body.home-page .quick-submit {
    min-height: 132px;
    border-radius: 28px;
  }

  body.home-page .quick-filter label:first-child {
    border-bottom-left-radius: 56px;
  }

  body.home-page .quick-filter label {
    padding: 20px;
  }

  body.home-page .quick-filter-title {
    gap: 10px;
    font-size: 17px;
  }

  body.home-page .quick-filter-title i {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  body.home-page .quick-filter select {
    min-height: 50px;
    padding-left: 18px;
    padding-right: 44px;
    background-position: right 14px center;
    background-size: 22px 22px;
    font-size: 15px;
  }

  body.home-page .quick-submit {
    gap: 10px;
    font-size: 16px;
  }

  body.home-page .quick-submit i {
    width: 48px;
    height: 48px;
  }

  body.home-page .frequent-section.container {
    min-height: 0;
    padding-top: 72px;
  }

  body.home-page .help-box {
    min-height: 360px;
  }

  body.home-page .section-heading h2 {
    font-size: 48px;
  }
}

@media (max-width: 1024px) {
  /* [요청] 목록 결과를 모바일/태블릿에서도 PC와 동일하게:
     데스크톱 결과 표시 + 모바일 전용(카드 그리드·개수) 숨김 + 페이지네이션 PC값 복원.
     body 접두로 기존 페이지별 반응형 규칙보다 우선순위를 높인다. */
  body .life-desktop-results,
  body.program-list-page .life-desktop-results {
    display: grid;
  }
  body.life-list-page .card-grid.three,
  body.program-list-page .card-grid.three,
  body.care-reservation-page .life-mobile-total,
  body.program-list-page .program-total {
    display: none;
  }
  body.life-list-page .pagination,
  body.program-list-page .pagination {
    gap: 8px;
    margin-top: 160px;
  }

  /* PDA 헤더 높이. 전에는 여기가 74px이고 페이지 클래스마다 60px로 덮어쓰는 규칙이
     열넷 흩어져 있어, 같은 구간에서 74px 페이지와 60px 페이지가 섞였다(배너가
     14px씩 어긋나 보였다). 메인이 쓰던 80px으로 모으고 흩어진 덮어쓰기는 지운다.
     모바일(≤640)은 아래에서 60px으로 다시 낮춘다.
     페이지별로 이 값을 다시 선언하지 말 것. */
  :root {
    --header-height: 80px;
  }

  .site-header .container,
  .mega-inner.container,
  .hero-panel.container,
  .quick-filter.container,
  .page-visual-inner.container {
    width: calc(100% - 40px);
  }

  .hero-panel.container {
    min-height: 620px;
    padding: 72px 48px 150px;
    border-radius: 80px 36px 44px 44px;
    background-position: 58% center;
  }

  .quick-filter.container {
    grid-template-columns: 1fr 1fr;
    margin-top: -120px;
    padding-inline: 24px;
  }

  .quick-submit {
    min-height: 96px;
    flex-direction: row;
  }

  .frequent-section {
    padding-top: 72px;
  }

  .map-preview {
    grid-template-columns: 1fr;
  }

  .program-strip,
  .news-layout {
    min-height: 0;
    gap: 0px;
  }

  .page-visual {
    padding: 0 20px;
  }

  .page-visual-inner.container {
    min-height: 260px;
    border-radius: 48px;
    background-size: auto, 420px 420px;
  }

  .life-list-page .site-header {
    height: var(--header-height);
  }

  .life-list-page .header-inner {
    min-height: var(--header-height);
  }

  .life-list-page .site-header .container,
  .life-list-page .content-section.container {
    width: calc(100% - 40px);
    max-width: none;
  }

  .life-list-page .page-main {
    padding: 140px 0 160px;
  }

  .life-list-page .section-heading.inline {
    display: grid;
    min-height: 0;
    gap: 24px;
    margin-bottom: 0;
  }

  /* 위에서 heading의 margin-bottom 64px를 0으로 지웠으므로 탭이 그 간격을
     대신 갖는다. ≤640에는 이미 있었는데 641~1024에만 빠져 있어서
     PDA에서만 heading과 탭이 붙어 있었다. */
  .life-category-tabs {
    margin-top: 64px;
  }

  .life-list-page .section-heading p {
    display: none;
  }

  .life-list-page .section-heading h2 {
    font-size: 44px;
    line-height: 1.5;
  }

  /* base(flex)의 justify-content: space-between이 그리드에서도 살아 있어 단일 트랙이
     max-content로 잡혔다. 그 탓에 width:100%인 검색창이 260px에서 멈춰 오른쪽이 비었다. */
  .life-list-page .section-heading.inline {
    justify-content: normal;
  }

  /* 검색 버튼이 폼 밖으로 20px 나와 있으므로(right:-20px) 그만큼 빼야 버튼 오른쪽 끝이
     컨테이너 끝에 맞는다(돌봄서비스 신청·예약·통합검색과 동일). */
  .life-list-page form.search-field {
    display: block;
    min-width: 0;
    width: calc(100% - 20px);
  }

  .life-list-page form.search-field input {
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    padding: 0 58px 0 16px;
    font-size: 15px;
  }

  .life-list-page form.search-field .icon-button {
    top: 50%;
    right: -20px;
    width: 48px;
    height: 48px;
  }

  /* 높이를 못 박지 않는다. 필터 그룹이 2개인 페이지와 5개인 페이지가 같은
     1348px를 쓰면서 그룹이 적은 쪽에 큰 빈 칸이 남았다. */
  .life-mobile-filters {
    display: grid;
    gap: 40px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 2px solid rgba(9, 9, 11, 0.34);
  }

  /* 고정 최소 높이(116px)는 접힘 상태 내용(제목 38px + 안내 문구 35px = 73px)보다
     43px 크고, 안내 문구가 없는 "운영 기간" 같은 그룹에서는 78px이 통째로 빈 칸으로
     남았다. 아래 여백만 주고 높이는 내용이 정하게 해, 필터 항목 수가 달라져도
     점선 구분선이 항상 글자 바로 아래 같은 자리에 온다. */
  .life-filter-group {
    padding-bottom: 24px;
    border-bottom: 1px dashed rgba(113, 113, 123, 0.3);
  }

  .life-filter-group button {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    color: #09090b;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
  }

  .life-filter-group button span {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 0;
    background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
  }

  .life-filter-group button i {
    margin-left: auto;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4f4f5;
    color: #71717b;
    font-style: normal;
    font-size: 16px;
  }

  .life-filter-group small {
    display: block;
    margin-top: 12px;
    color: rgba(9, 9, 11, 0.5);
    font-size: 15px;
    line-height: 1.5;
  }

  .life-date-fields {
    display: grid;
    gap: 8px;
    /* 아래 여백이 빠져 있어 점선 구분선에 붙어 있었다.
       다른 필터 그룹(.life-age-chips)과 같은 24px 쌍으로 맞춘다. */
    margin-top: 24px;
    margin-bottom: 24px;
  }

  /* PDA·모바일 날짜 칸에도 같은 캘린더 아이콘을 둔다. 다만 여기 칸은 전체폭이라
     PC처럼 텍스트를 오른쪽에 붙이면 글자가 화면 끝까지 밀려난다. 텍스트는 왼쪽에
     두고 아이콘만 오른쪽 끝에 고정한다. 사이에 여백이 넓은 건 칸이 넓어서지
     PC 때처럼 값에 따라 흔들리는 게 아니다.
     아이콘은 글자 15px·칸 높이 36px에 맞춰 20px로 줄인다. */
  .life-date-fields input {
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5 url("../images/ui/icon-calendar.svg") no-repeat;
    background-size: 20px 20px;
    background-position: right 16px top calc(50% - 2px);
    color: rgba(9, 9, 11, 0.55);
    padding: 0 44px 0 16px;
    font-size: 15px;
  }

  .life-age-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .life-age-chips button {
    width: auto;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #09090b;
    font-size: 15px;
    font-weight: 400;
  }

  /* 고른 칩 표시. 640 이하에만 있어서 641~1024에서는 "전체"조차 안 고른 것과
     똑같이 보였다. 값은 640 이하와 같다. */
  .care-filter-chips button.is-active {
    border: 1.5px solid #27272a;
    background: #fff;
  }

  .life-filter-actions {
    display: grid;
    gap: 12px;
  }

  .life-filter-actions button {
    min-height: 64px;
    border-radius: 8px;
    font-size: 17px;
  }

  .life-search-button {
    border: 0;
    background: #27272a;
    color: #fff;
  }

  .life-reset-button {
    border: 1px solid rgba(113, 113, 123, 0.22);
    background: #fff;
    color: #09090b;
  }

  .life-list-page .filter-chips,
  .life-desktop-filter,
  .life-desktop-results {
    display: none;
  }

  .life-total {
    display: block;
    margin: 64px 0 40px;
    color: #09090b;
    font-size: 17px;
    line-height: 29px;
  }

  .life-list-page .card-grid.three {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .life-list-page .life-card {
    position: relative;
    min-height: 547px;
    overflow: hidden;
    padding: 0;
    border-radius: 24px;
    box-shadow: none;
  }

  .life-list-page .life-card:nth-child(2) {
    min-height: 551px;
  }

  .life-list-page .life-card:nth-child(n+4) {
    display: none;
  }

  .life-list-page .life-card:nth-child(3) {
    opacity: 0.45;
  }

  /* 체크무늬 그라디언트는 "이미지 없음"이 아니라 투명 영역처럼 읽혀서
     공통 기본 썸네일로 바꿨다. */
  .life-list-page .life-thumb {
    position: relative;
    height: 237px;
    border-radius: 24px 24px 0 0;
    background: var(--thumb-default);
  }

  .life-status {
    position: absolute;
    top: 32px;
    left: 24px;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid #6eba2c;
    border-radius: 7px;
    background: #fff;
    color: #6eba2c;
    font-size: 15px;
    line-height: 1.5;
  }

  .life-list-page .category-chip,
  .life-list-page .desktop-title,
  .life-list-page .life-card > p,
  .life-list-page .button-row {
    display: none;
  }

  .life-list-page .mobile-title {
    display: inline;
  }

  .life-list-page .life-card h3 {
    margin: 24px 24px 0;
    font-size: 25px;
    line-height: 1.5;
  }

  .life-card-meta {
    display: grid;
    gap: 16px;
    margin: 16px 24px 24px;
  }

  .life-card-meta div {
    display: grid;
    gap: 4px;
  }

  .life-card-meta dt {
    position: relative;
    padding-left: 28px;
    color: #09090b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
  }

  .life-card-meta dt::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #6eba2c;
  }

  .life-card-meta dd {
    padding-left: 28px;
    color: #09090b;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
  }

  .life-list-page .pagination {
    gap: 24px;
    height: 40px;
    margin-top: 64px;
  }

  .life-list-page .pagination a {
    width: 40px;
    height: 40px;
    font-size: 15px;
    font-weight: 400;
  }

  .life-list-page .pagination a:nth-child(n+6):not(:last-child) {
    display: none;
  }

  .life-list-page .top-button {
    display: none;
  }

  .life-list-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .care-reservation-page .care-reservation-heading h2,
  .reservation-form-page .reservation-form-heading h2 {
    font-size: 44px;
    line-height: 1.5;
  }

  .care-reservation-page .care-search-toolbar input {
    min-height: 56px;
    padding-left: 16px;
    padding-right: 56px;
    font-size: 15px;
  }

  .care-reservation-page .care-search-toolbar .icon-button {
    width: 48px;
    height: 48px;
  }

  .reservation-form-page .site-header {
    height: var(--header-height);
  }

  .reservation-form-page .header-inner {
    min-height: var(--header-height);
  }

  .reservation-form-page .content-section.container {
    width: calc(100% - 28px);
  }

  .reservation-group-title h3 {
    min-height: 38px;
    padding-right: 40px;
    padding-left: 36px;
    font-size: 25px;
  }

  .reservation-group-title h3::before {
    top: 7px;
    width: 24px;
    height: 24px;
    transform: none;
  }

  .reservation-control input,
  .reservation-control select,
  .reservation-fields textarea,
  .reservation-search-control input {
    min-height: 56px;
    padding-inline: 16px;
    font-size: 15px;
  }

  .reservation-control-grid.two {
    grid-template-columns: 1fr;
  }

  .reservation-control-grid.three {
    gap: 8px;
  }

  .reservation-day-chips {
    gap: 8px;
  }

  .reservation-day-chips button {
    min-height: 40px;
    padding-inline: 16px;
    font-size: 15px;
  }

  .privacy-consent-box {
    min-height: 220px;
    border-radius: 18px;
    padding: 18px;
    font-size: 14px;
  }

  .reservation-check-row {
    width: 100%;
    align-items: flex-start;
    font-size: 15px;
  }

  .reservation-form-actions {
    flex-direction: column;
  }

  /* 세로로 쌓이면 주 동작이 위에 와야 한다. HTML은 PC 가로 배치(뒤로가기가 왼쪽)
     기준이라 뒤로가기가 먼저 적혀 있어서, 여기서 순서만 바꾼다.
     Tab 순서는 원래대로 뒤로가기 → 신청·예약하기다. */
  .reservation-form-actions .btn-primary {
    order: -1;
  }

  .reservation-form-actions .btn,
  .reservation-form-actions .btn-ghost,
  .reservation-form-actions .btn-primary {
    width: 100%;
  }

  .program-list-page .site-header {
    height: var(--header-height);
  }

  .program-list-page .header-inner {
    min-height: var(--header-height);
  }

  .program-list-page .site-header .container,
  .program-list-page .content-section.container {
    width: calc(100% - 40px);
    max-width: none;
  }

  .program-list-page .page-main {
    padding: 140px 0 160px;
  }

  .program-list-page .section-heading.inline {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
    gap: 24px;
    margin-bottom: 0;
  }

  .program-list-page .section-heading p {
    display: none;
  }

  .program-list-page .section-heading h2 {
    font-size: 44px;
    line-height: 1.5;
  }

  .program-list-page .program-list-heading h2 span {
    display: block;
  }

  .program-list-page .program-list-heading h2 span + span {
    display: inline;
    color: #6eba2c;
  }

  .program-list-page .program-list-heading h2 span + span::before {
    content: "";
  }

  .program-list-page .content-toolbar {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .program-list-page .content-toolbar .select-control {
    display: none;
  }

  /* 검색 버튼이 폼 밖으로 24px 나와 있으므로(right:-24px) 그만큼 빼야
     버튼 오른쪽 끝이 컨테이너 끝에 맞는다(돌봄서비스·통합검색·목록 페이지와 동일). */
  .program-list-page .content-toolbar .search-field {
    display: block;
    width: calc(100% - 24px);
    min-width: 0;
  }

  .program-list-page .content-toolbar .search-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    padding: 0 58px 0 16px;
    font-size: 15px;
  }

  .program-list-page .content-toolbar .search-field .icon-button {
    top: 50%;
    right: -24px;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
  }

  .program-list-page .filter-chips,
  .program-list-page .life-desktop-filter,
  .program-list-page .life-desktop-results {
    display: none;
  }

  .program-list-page .program-total {
    display: block;
  }

  .program-list-page .card-grid.three {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .program-list-page .program-card {
    position: relative;
    min-height: 547px;
    overflow: hidden;
    padding: 0;
    border-radius: 24px;
    box-shadow: none;
  }

  .program-list-page .program-card:nth-child(2) {
    min-height: 551px;
  }

  .program-list-page .program-card:nth-child(n+4) {
    display: none;
  }

  .program-list-page .program-card:nth-child(3) {
    opacity: 0.45;
  }

  .program-list-page .program-thumb {
    position: relative;
    height: 237px;
    border-radius: 24px 24px 0 0;
    background: var(--thumb-default);
  }

  .program-list-page .status-badge,
  .program-list-page .desktop-title,
  .program-list-page .program-desktop-meta,
  .program-list-page .text-link {
    display: none;
  }

  .program-list-page .mobile-title {
    display: inline;
  }

  .program-list-page .program-card h3 {
    margin: 24px 24px 0;
    font-size: 25px;
    line-height: 1.5;
  }

  .program-list-page .pagination {
    gap: 8px;
    height: 40px;
    margin-top: 64px;
  }

  .program-list-page .pagination a {
    width: 40px;
    height: 40px;
    font-size: 15px;
    font-weight: 400;
  }

  .program-list-page .pagination a:nth-child(n+6):not(:last-child) {
    display: none;
  }

  .program-list-page .top-button {
    display: none;
  }

  .program-list-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .program-detail-page .site-header {
    height: var(--header-height);
  }

  .program-detail-page .header-inner {
    min-height: var(--header-height);
  }

  .program-detail-page .site-header .container,
  .program-detail-page .content-section.container {
    width: calc(100% - 40px);
    max-width: none;
  }

  .program-detail-page .page-main {
    padding: 140px 0 160px;
  }

  .program-detail-page .detail-layout {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }

  /* 타이틀 44px(PDA·PC 공통값)로 올리면서 height 104px(32px×1.5×2행 + gap 8)은
     두 줄을 못 담아 잘리므로 auto로 푼다. 모바일(≤640)은 32px + 104px 유지. */
  .program-detail-mobile-heading {
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: #09090b;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
  }

  .program-detail-mobile-heading span {
    display: block;
  }

  .program-detail-mobile-heading span + span {
    color: #6eba2c;
  }

  .program-detail-page .detail-article {
    display: block;
    width: 100%;
    min-height: 888px;
    margin-top: 64px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .program-detail-desktop-content,
  .program-detail-page .detail-side {
    display: none;
  }

  .program-detail-mobile-card {
    position: relative;
    display: flex;
    min-height: 888px;
    flex-direction: column;
    gap: 64px;
    justify-content: space-between;
    overflow: visible;
    padding: 214px 32px 32px;
    border-radius: 32px 64px 32px 32px;
    background: linear-gradient(108deg, #fff7eb 0%, #f4faec 100%);
  }

  .program-detail-mobile-main-image {
    background: var(--thumb-default);
  }

  .program-detail-mobile-media {
    position: absolute;
    top: -20px;
    left: 20px;
    right: 20px;
    width: auto;
    /* PC의 65/47 비율을 해제해야 left/right로 폭이 결정된다. */
    aspect-ratio: auto;
    height: 202px;
    border-radius: 20px 80px 20px 20px;
    background: var(--program-image, none) center / cover no-repeat, var(--thumb-default);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
  }

  .program-detail-mobile-media .favorite-badge {
    display: none;
  }

  .program-detail-mobile-copy {
    display: grid;
    gap: 24px;
  }

  .program-detail-mobile-copy h2 {
    margin: 0;
    color: #09090b;
    font-size: 25px;
    line-height: 1.5;
  }

  .program-detail-mobile-copy p {
    margin: 0;
    color: rgba(9, 9, 11, 0.75);
    font-size: 17px;
    line-height: 1.5;
    min-height: 130px;
  }

  .program-detail-mobile-meta {
    display: grid;
    gap: 16px;
    margin: 0;
  }

  .program-detail-mobile-meta div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .program-detail-mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    margin-top: 64px;
  }

  .program-detail-mobile-actions {
    display: grid;
    gap: 12px;
  }

  /* 세로로 쌓일 때는 마크업 순서대로 신청·예약하기가 위에 온다(PC용 order를 되돌린다). */
  .program-detail-mobile-actions .btn-ghost {
    order: 0;
  }

  .program-detail-mobile-actions .btn {
    width: 100%;
    min-height: 64px;
    border-radius: 13px;
    font-size: 19px;
    font-weight: 400;
  }

  .program-detail-mobile-body {
    display: flex;
    width: calc(100% + 2px);
    flex-direction: column;
    gap: 40px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1.5px solid #27272a;
  }

  .program-detail-mobile-main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 431 / 612;
  }

  .program-detail-mobile-files {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border-top: 1px solid #27272a;
  }

  .program-detail-page .top-button {
    display: none;
  }

  .program-detail-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .login-intro {
    padding-bottom: 40px;
  }

  .login-grid,
  .anyid-panel {
    grid-template-columns: 1fr;
  }

  .login-grid {
    gap: 48px;
  }

  /* base의 max-width 728px은 PC 2단 그리드의 오른쪽 트랙
     minmax(0, 728px)에 맞춘 값이다. 1단으로 바뀌면 width:100%가 이 값에
     잘려서, 컨테이너가 728px을 넘는 순간(뷰포트 약 792px 이상) 패널
     오른쪽에만 빈 공간이 생기고 아래 .anyid-panel과 끝이 안 맞는다. */
  .id-login-panel {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .anyid-panel {
    gap: 18px;
  }

  /* 1열로 스택되므로 좌우 분할용 패딩 해제. 안 풀면 첫 행 버튼만
     24px 안쪽으로 들어가 두 행의 오른쪽 끝이 안 맞는다. */
  .anyid-panel div:first-child {
    padding-right: 0;
  }

  .anyid-panel div + div {
    padding-top: 18px;
    padding-left: 0;
    border-top: 1px solid rgba(113, 113, 123, 0.22);
    border-left: 0;
  }

  .care-reservation-page .care-reservation-heading {
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: stretch;
    gap: 24px;
  }

  /* 검색 버튼이 툴바 밖으로 24px 나와 있으므로(right:-24px) 그만큼 빼야
     버튼 오른쪽 끝이 컨테이너 끝에 맞는다. */
  .care-reservation-page .care-search-toolbar {
    width: calc(100% - 24px);
  }

  .care-reservation-page .care-mobile-filters {
    height: auto;
    padding-bottom: 40px;
  }

  /* 필터 초기화의 ↻ 글자 → refresh 이미지 (제목 아이콘은 공통 규칙에서 처리) */
  .life-reset-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .life-reset-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  /* 아코디언 화살표: ⌄ 글자 → carousel-next.svg (회색 원 유지, 아래 방향).
     .life-filter-group과 함께 써서 base(.life-filter-group button i) 특이성을 넘는다. */
  .care-filter-group.life-filter-group button i {
    font-size: 0;
  }

  .care-filter-group.life-filter-group button i::before {
    content: "";
    width: 16px;
    height: 16px;
    background: #09090b;
    -webkit-mask: url("../images/ui/carousel-next.svg") center / contain no-repeat;
    mask: url("../images/ui/carousel-next.svg") center / contain no-repeat;
    transform: rotate(90deg);
  }

  /* 접힘 상태에서는 칩/날짜 필드를 숨기고, 펼침(is-expanded)일 때만 표시한다. (태블릿도 모바일과 동일) */
  .care-filter-group:not(.is-expanded) .care-filter-chips,
  .care-filter-group:not(.is-expanded) .life-date-fields {
    display: none;
  }

  /* 펼치면 화살표를 위로 회전 */
  .care-filter-group.is-expanded button i::before {
    transform: rotate(-90deg);
  }

  .care-reservation-page .care-mobile-card-grid .life-card.is-disabled {
    opacity: 0.46;
  }

  .reservation-form-page .content-section.container {
    width: calc(100% - 40px);
  }

  .reservation-form-page .page-main {
    padding-block: 140px 160px;
  }

  .reservation-form-page .reservation-form-heading {
    min-height: 0;
    margin-bottom: 40px;
    align-items: flex-start;
  }

  .reservation-form-page .reservation-form-heading h2 {
    font-size: 44px;
    text-align: start;
  }

  .reservation-form-body {
    gap: 40px;
    padding: 32px 0;
  }

  .reservation-form-group {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 40px;
  }

  .reservation-fields {
    gap: 18px;
  }

  .reservation-field {
    margin-top: 24px;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .reservation-field > label {
    min-height: auto;
    font-weight: 700;
  }

  .reservation-day-chips {
    min-height: 0;
  }

  .privacy-consent-box {
    min-height: 260px;
  }

  .reservation-form-actions {
    margin-top: 40px;
  }
}

/* 목록 결과 카드(돌봄서비스·생활서비스·프로그램)는 PDA에서도 PC 가로카드 대신
   세로 스택 카드로 (모바일과 동일) → ≤1024로 확장 */
@media (max-width: 1024px) {
  body .life-desktop-results,
  body.program-list-page .life-desktop-results {
    display: grid;
  }
  body.life-list-page .card-grid.three,
  body.program-list-page .card-grid.three,
  body.care-reservation-page .life-mobile-total,
  body.program-list-page .program-total {
    display: none;
  }
  body.life-list-page .pagination,
  body.program-list-page .pagination {
    gap: 8px;
    margin-top: 64px;
  }

  /* 모바일 결과 카드(데스크톱 마크업)를 화면 폭에 맞추기 위한 반응형 조정 */
  .life-desktop-thumb {
    width: 320px;
    height: 207px;
  }

  .care-desktop-card {
    display: block;
    height: auto;
  }

  /* base의 .life-desktop-card:last-child{height:260px} 고정을 모바일에서 해제 */
  .life-desktop-card:last-child {
    height: auto;
  }

  /* 세로 스택 시 썸네일→본문→버튼 간 여백 */
  .care-desktop-card .life-desktop-copy {
    margin-top: 16px;
  }

  .care-desktop-card .life-desktop-actions {
    margin-top: 24px;
  }

  /* 제목: 최대 2줄 말줄임 */
  .life-desktop-copy h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
  }

  /* 메타: 라벨(아이콘) 위 / 값 아래로 세로 배치 */
  .care-desktop-card .life-desktop-copy dl {
    gap: 20px;
  }

  .care-desktop-card .life-desktop-copy dl div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 버튼: 풀폭 스택 */
  .care-desktop-card .life-desktop-actions .btn {
    width: 100%;
  }

  /* 지도 보러가기 목록(의료기관·체험기관 2종): 데스크톱 정렬용 margin-left(-40px)·고정폭
     (172px)을 모바일에서 리셋 → 좌측 넘침 방지 */
  .life-medical-page .care-desktop-card .life-desktop-actions,
  .life-kids-page .care-desktop-card .life-desktop-actions,
  .life-culture-page .care-desktop-card .life-desktop-actions {
    margin-left: 0;
  }

  .life-medical-page .care-desktop-card .life-desktop-actions .btn,
  .life-kids-page .care-desktop-card .life-desktop-actions .btn,
  .life-culture-page .care-desktop-card .life-desktop-actions .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .container {
    width: calc(100% - 40px);
  }

  .join-complete-page,
  .program-list-page {
    font-family: "NPS_font", var(--font-sans);
  }

  .site-header .container {
    width: calc(100% - 40px);
  }

  .header-inner {
    gap: 6px;
  }

  .site-logo {
    gap: 6px;
  }

  /* logo-header-mark.svg는 심볼(viewBox 0~28)과 "MY UNIVERSE GYEONGSAN"
     텍스트(31.5~86.4)가 붙은 87×28 락업이라, 16×16 박스에 넣으면 비율이 유지되며
     16×5.15로 눌린다(이 SVG만 preserveAspectRatio="none"이 없어 object-fit도 안 먹는다).
     모바일 시안은 심볼만 쓰므로, 락업 이미지를 숨기고 심볼 전용 16×16 에셋을 같은
     자리에 그린다. img의 src는 CSS로 못 바꾸고 content:url() 엘리먼트 치환은
     Firefox가 미지원이라, 모든 브라우저에서 동작하는 ::before로 처리한다. */
  .site-logo .logo-header-mark {
    display: none;
  }

  .site-logo::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background: url("../images/ui/logo-header-symbol.svg") center / contain no-repeat;
  }

  .logo-header-city {
    width: 50.32px;
    height: 16px;
  }

  .logo-header-service {
    width: 89.2px;
    height: 16px;
  }

  .logo-divider {
    height: 12px;
  }

  .logo-mark {
    width: 15px;
    height: 15px;
  }

  .logo-city {
    font-size: 18px;
  }

  .logo-service {
    font-size: 13px;
  }

  .header-actions {
    gap: 2px;
  }

  .icon-button {
    width: 34px;
    height: 34px;
  }

  .facility-service-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .facility-service-page .page-visual h1 {
    max-width: 280px;
    font-size: 32px;
    line-height: 1.5;
  }

  .facility-service-page .page-main {
    padding-block: 64px 64px;
  }

  .facility-service-detail {
    width: calc(100% - 40px);
    gap: 32px;
  }

  .facility-service-title {
    flex-wrap: wrap;
    gap: 0 10px;
    font-size: 32px;
    line-height: 1.5;
  }

  .facility-service-title strong {
    font-size: 32px;
  }

  .facility-service-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px;
    border-radius: 32px 64px 32px 32px;
  }

  .facility-service-copy h3 {
    font-size: 25px;
  }

  .facility-service-facts {
    gap: 16px;
  }

  .facility-service-facts div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .facility-service-image {
    min-height: 160px;
    border-radius: 64px 32px 32px 32px;
  }

  .facility-service-image .favorite-badge {
    display: none;
  }

  /* 모바일: 갤러리(이미지)를 캐러셀(01/04)보다 위로 배치.
     copy를 contents로 펼쳐 캐러셀·갤러리를 같은 그리드 아이템으로 만든 뒤 order로 정렬. */
  .facility-service-copy {
    display: contents;
  }

  .facility-service-copy > .facility-service-carousel {
    grid-template-columns: 48px auto 48px;
    margin-top: 0;
  }

  /* 모바일에서는 캐러셀 오른쪽 구분선(::after)을 숨긴다. */
  .facility-service-copy > .facility-service-carousel::after {
    display: none;
  }

  .facility-service-carousel {
    grid-template-columns: 48px auto 48px;
    gap: 39px;
    order: 1;
  }

  .facility-service-actions {
    margin-top: 32px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .facility-service-actions p {
    display: grid;
    gap: 8px;
    font-size: 17px;
  }

  .facility-service-actions .btn {
    min-height: 56px;
    border-radius: 10px;
  }

  .facility-info-block {
    gap: 20px;
  }

  /* 카드(.facility-service-card)는 그대로 두고, .facility-service-detail의
     직계 정보 블록에만 위 여백을 준다. .child-service-groups 안의 그룹
     블록(.child-service-block)은 직계가 아니므로 그리드 간격이 흐트러지지 않는다. */
  .facility-service-detail > .facility-info-block {
    margin-top: 32px;
  }

  .facility-info-block h3 {
    font-size: 25px;
  }

  .facility-info-block ul {
    padding: 24px;
    height: auto;
  }

  /* 표는 모바일에서 눌러 담지 않고, 래퍼(.table-scroll) 안에서 가로 스크롤로 본다. */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .facility-info-table {
    display: table;
    table-layout: fixed;
    min-width: 480px;
    font-size: 13px;
  }

  .facility-info-table th,
  .facility-info-table td {
    padding: 15px 10px;
  }

  /* 이용절차: 모바일에서는 단계를 세로로 쌓고, 단계 사이에 아래 방향
     커넥터(원+화살표)를 둔다. minmax(0,1fr)로 가로 넘침을 막는다. */
  .facility-process {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .facility-process article {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .facility-process ul {
    min-height: 88px;
    border-radius: 20px;
  }

  /* 3단계: 가로 3열 → 세로 1열로 쌓고, 각 항목을 개별 박스로 둔다. */
  .facility-process article:nth-child(3) ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
  }

  .facility-process article:nth-child(3) li {
    height: auto;
    min-height: 88px;
    white-space: normal;
    border-radius: 20px;
  }

  /* 커넥터를 오른쪽(가로 흐름)에서 아래쪽(세로 흐름)으로 재배치 */
  .facility-process article:nth-child(-n+2)::before {
    top: auto;
    right: auto;
    bottom: -34px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .facility-process article:nth-child(-n+2)::after {
    top: auto;
    right: auto;
    bottom: -18px;
    left: 50%;
    transform: translate(-50%, 0) rotate(90deg);
  }

  .child-center-page .facility-service-card {
    position: relative;
    grid-template-columns: 1fr;
    gap: 24px;
    max-height: none;
    min-height: 0;
    padding: 32px;
    border-radius: 32px 64px 32px 32px;
  }

  .child-center-page .facility-service-copy {
    width: 100%;
    min-height: 0;
    gap: 0;
  }

  .child-center-card-control {
    display: none;
  }

  .child-center-page .facility-service-gallery {
    position: static;
    width: 100%;
    gap: 16px;
  }

  .child-center-page .facility-service-image {
    min-height: 160px;
    border-radius: 64px 32px 32px 32px;
  }

  .child-center-mobile-carousel {
    display: grid;
  }

  .child-service-groups {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
  }

  .child-service-block {
    gap: 12px;
  }

  .child-service-block h3 {
    min-height: 49px;
    padding: 10px 32px;
    font-size: 19px;
  }

  .child-service-block ul {
    min-height: 0;
    border-radius: 32px;
    padding: 24px 32px;
    height: auto;
  }

  .site-footer {
    height: 572px;
    min-height: 572px;
    padding: 108px 0 36px;
  }

  .site-footer::before {
    top: -84px;
    right: -25%;
    left: -25%;
    height: 152px;
  }

  .footer-inner.container {
    display: grid;
    width: calc(100% - 40px);
    gap: 0;
    justify-items: center;
    text-align: center;
  }

  .footer-inner > div {
    display: contents;
  }

  .footer-logo {
    order: 1;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 27px;
  }

  .footer-logo .logo-mark {
    width: 16px;
    height: 16px;
  }

  .site-footer p {
    order: 2;
    max-width: 280px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 12px;
    line-height: 1.5;
  }

  .related-site {
    order: 3;
    width: 100%;
    min-height: 56px;
    margin-top: 32px;
    border-radius: 10px;
  }

  .footer-links {
    order: 4;
    display: grid;
    width: 100%;
    gap: 0;
    margin-top: 36px;
    color: rgba(255, 255, 255, 0.72);
  }

  .footer-links a {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 15px;
  }

  .find-page .page-visual h1 {
    max-width: 260px;
    margin-inline: auto;
    line-height: 1.35;
  }

  .reservation-form-page .page-main {
    padding-block: 64px;
  }

  /* PDA는 A그룹 공통 배너를 쓰도록 ≤1024 규칙을 지웠으므로, 모바일 값은 여기서 유지한다. */
  .reservation-form-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  /* 제목은 ≤1024 블록에서 44px(PDA·PC 공통값)이라 모바일만 32px로 되돌린다. */
  .reservation-form-page .reservation-form-heading h2 {
    font-size: 32px;
  }

  .reservation-form-page .reservation-form-group {
    position: relative;
    gap: 0px;
  }

  .reservation-form-page .reservation-form-group:first-child {
    gap: 0;
    padding-bottom: 40px;
  }

  /* 아코디언: 제목 클릭으로 필드를 펼치고 접는다(기본 접힘). */
  .reservation-form-page .reservation-group-title {
    position: relative;
    cursor: pointer;
  }

  /* "(선택 사항)" 문구는 모바일에서 숨긴다. */
  .reservation-form-page .reservation-group-title small {
    display: none;
  }

  .reservation-form-page .reservation-form-group:not(.is-expanded) .reservation-fields {
    display: none;
  }

  .reservation-form-page .reservation-group-title::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f4f4f5;
  }

  .reservation-form-page .reservation-group-title::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #09090b;
    border-bottom: 2px solid #09090b;
    transform: rotate(45deg);
  }

  /* 펼침 시 화살표를 위로 */
  .reservation-form-page .reservation-form-group.is-expanded .reservation-group-title::after {
    top: 14px;
    transform: rotate(-135deg);
  }

  .reservation-form-page .privacy-consent-box {
    margin-top: 24px;
    overflow: hidden;
  }

  .reservation-form-page .reservation-form-group:nth-child(4) textarea {
    margin-top: 24px;
    height: 202px;
  }

  /* 시안은 두 버튼을 위아래로 쌓고 신청·예약하기를 위에 둔다. ≤1024의 세로 스택과
     풀폭, 순서 뒤집기가 그대로 맞으므로 여기서 가로로 되돌리던 것만 걷어낸다
     (예전엔 flex-direction: row + 뒤로가기 122px 고정이었다). */
  .reservation-form-page .reservation-form-actions {
    gap: 12px;
    margin-top: 73px;
  }

  .reservation-form-page .reservation-form-actions .btn {
    min-height: 64px;
  }

  .reservation-form-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .login-page-section {
    width: calc(100% - 40px);
  }

  .login-intro {
    padding-bottom: 32px;
  }

  .login-intro h2 {
    font-size: 32px;
  }

  .login-intro p {
    margin-top: 20px;
    font-size: 17px;
  }

  .government-login h3,
  .id-login h3 {
    margin-bottom: 18px;
    font-size: 24px;
  }

  .login-method-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .login-method {
    min-height: 154px;
    gap: 12px;
    padding: 24px;
    border-radius: 28px;
  }

  .login-method-icon {
    width: 68px;
    height: 68px;
  }

  .login-method strong {
    font-size: 19px;
  }

  .login-method em {
    font-size: 15px;
  }

  .id-login-panel {
    padding: 24px;
    border-radius: 28px;
  }

  .id-login-copy {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    margin-bottom: 20px;
  }

  .id-login-panel .auth-links {
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 20px;
  }

  .id-login-panel input {
    min-height: 56px;
    padding-inline: 18px;
    font-size: 15px;
  }

  .id-login-panel .btn-primary {
    min-height: 58px;
    margin-top: 12px;
  }

  .anyid-panel {
    padding: 24px;
    border-radius: 28px;
  }

  .anyid-panel div {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding-right: 0;
  }

  /* 데스크톱 좌우 분할용 패딩/구분선 해제 (base :first-child·div+div가 특이성으로 이겨서 명시) */
  .anyid-panel div:first-child {
    padding-right: 0;
  }

  .anyid-panel div + div {
    padding-left: 0;
    border-left: 0;
  }

  /* 세로 스택 시 버튼 풀폭 (base 고정폭 93px 해제) */
  .anyid-panel .btn-small {
    width: auto;
    min-width: 0;
  }

  .join-page .site-header {
    height: var(--header-height);
  }

  .join-page .header-inner {
    min-height: var(--header-height);
  }

  .join-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .join-page .page-visual h1 {
    font-size: 0;
  }

  .join-page .page-visual h1::after {
    content: "회원가입";
    font-size: 32px;
    line-height: 1.5;
  }

  .join-page .page-main {
    padding-block: 64px;
  }

  .join-page .join-layout {
    display: block;
    width: calc(100% - 40px);
  }

  .join-page .join-member-head {
    display: contents;
  }

  .join-page .join-member-head h2 {
    display: none;
  }

  .join-page .join-terms-head h2 {
    display: none;
  }

  .join-page .join-layout::before {
    content: "회원가입";
    display: block;
    margin-bottom: 28px;
    color: #09090b;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.35;
  }

  .join-page .step-indicator {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 2px solid rgba(9, 9, 11, 0.74);
  }

  /* PC(≥1025)와 동일하게 이미지 아이콘 + 실제 텍스트(STEP 0X. 볼드) 사용.
     레이아웃은 모바일 세로 스택 유지. */
  .join-page .step-indicator li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(9, 9, 11, 0.5);
    opacity: 0.5;
    text-align: left;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
  }

  .join-page .step-indicator li::before {
    content: "";
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    background: url("../images/ui/icon-step-idle.png") center / contain no-repeat;
  }

  .join-page .step-indicator li span {
    font-weight: 700;
  }

  .join-page .step-indicator li.active {
    opacity: 1;
    color: #09090b;
  }

  .join-page .step-indicator li.active::before {
    background: url("../images/ui/icon-step-check.png") center / contain no-repeat;
  }

  .join-page .step-indicator li.active span {
    color: #6eba2c;
  }

  .join-page .terms-panel,
  .join-page .org-search-panel {
    display: grid;
    gap: 40px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .member-type-panel h2,
  .join-page .term-box h2,
  .org-search-panel h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 26px;
  }

  .join-page .member-type-panel h2::before,
  .join-page .term-box h2::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
  }

  .join-page .member-type-panel {
    padding-bottom: 64px;
    border-bottom: 1.5px dashed #e4e4e4;
  }

  .member-type-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .member-type-card {
    min-height: 184px;
    gap: 24px;
    border-radius: 32px;
    font-size: 20px;
  }

  .member-type-icon {
    width: 80px;
    height: 80px;
  }

  /* PC(≥1025)에만 있던 hover 효과를 모바일에도 부여 */
  .member-type-card:hover {
    border: 2px solid #6eba2c;
    background: rgba(110, 186, 44, 0.05);
  }

  .member-type-card:hover .member-type-icon {
    background: #fff;
  }

  .join-page .check-all {
    display: none !important;
  }

  .join-page .term-box {
    padding: 0;
    border: 0;
    border-bottom: 1.5px dashed #e4e4e4;
    border-radius: 0;
    background: transparent;
    padding-bottom: 20px;
  }

  /* 점선은 약관 상자 사이를 나누는 선이다. 마지막 상자 아래에는 나눌 것이
     없어서 "다음" 버튼 위에 선만 하나 뜬다. */
  .join-page .term-box:last-of-type {
    border-bottom: 0;
  }

  .join-page .term-box h2 {
    margin-bottom: 20px;
    color: #09090b;
    line-height: 1.4;
  }

  .join-page .term-box div {
    margin: 0;
    min-height: 300px;
    padding: 33px 24px;
    border-radius: 24px;
    background: #f4f4f5;
    font-size: 16px;
    line-height: 1.65;
  }

  .join-page .term-box label {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #09090b;
    font-size: 14px;
    line-height: 1.45;
  }

  /* 약관/폼 라벨 모바일 패딩 */
  .auth-panel label,
  .form-panel label,
  .terms-panel label {
    display: grid;
    gap: 10px;
    color: var(--color-ink-soft);
    font-weight: 900;
  }

  .join-page .terms-panel .form-actions {
    display: block;
    margin-top: 6px;
  }

  .join-page .terms-panel .form-actions .btn-ghost {
    display: none;
  }

  .join-page .terms-panel .form-actions .btn-primary,
  .org-search-panel .btn-primary {
    width: 100%;
    min-height: 64px;
    border-radius: 12px;
    font-size: 22px;
  }

  .join-page .top-button {
    display: none;
  }

  .join-page .site-footer {
    height: 572px;
    min-height: 572px;
    padding: 64px 20px;
  }

  .join-page .site-footer::before {
    top: -80px;
    right: -30%;
    left: -30%;
    height: 128px;
  }

  .join-page .footer-inner.container {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  .join-page .footer-inner > div {
    display: contents;
  }

  .join-page .footer-logo {
    order: 1;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 24px;
    line-height: 1;
  }

  .join-page .footer-logo .logo-mark {
    width: 18px;
    height: 18px;
  }

  .join-page .site-footer p {
    order: 2;
    width: 100%;
    max-width: 284px;
    margin: 32px 0 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
  }

  .join-page .related-site {
    order: 3;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    margin-top: 40px;
    border-radius: 12px;
    font-size: 19px;
    font-weight: 400;
  }

  .join-page .footer-links {
    order: 3;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 53px;
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .join-page .footer-links a {
    display: flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
  }

  .join-page .footer-links a:first-child {
    color: #fff;
    font-weight: 700;
  }

  .join-page .footer-links a + a {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .join-org-page .page-main {
    padding-block: 64px;
  }

  .join-org-page .org-search-panel {
    display: block;
    gap: 0;
    padding-top: 9px;
  }

  .join-org-page .org-search-panel h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 25px;
    line-height: 1.5;
  }

  .join-org-page .org-search-panel h2::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
  }

  .join-org-page .org-search-panel label {
    gap: 8px;
    margin: 0;
  }

  .join-org-page .org-search-panel p {
    margin: 8px 0 0;
    font-size: 15px;
  }

  .join-org-page .join-divider {
    margin: 52px 0 64px;
  }

  .join-general-page .page-main {
    padding-block: 64px;
  }

  .join-general-page .member-form-panel {
    display: grid;
    gap: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .join-general-page .member-form-section {
    gap: 20px;
    padding-bottom: 40px;
  }

  .join-general-page .member-form-section h2 {
    font-size: 25px;
    line-height: 1.5;
  }

  .join-general-page .member-form-fields,
  .join-general-page .join-child-form {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .join-general-page .join-field {
    gap: 12px;
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
  }

  .join-general-page .form-panel label + label {
    margin-top: 0;
  }

  .join-general-page .join-field > span:first-child,
  .join-general-page .join-field > legend {
    min-height: 26px;
  }

  /* 라디오는 공통 규격(32x32 원)을 쓰므로 텍스트 입력용 치수에서 제외한다.
     빼지 않으면 이 규칙이 더 구체적이라 모바일에서만 50x64 사각형이 된다. */
  .join-general-page .join-field input:not([type="radio"]),
  .join-general-page .join-field select {
    min-height: 64px;
    border-color: rgba(113, 113, 123, 0.15);
    border-radius: 13px;
    padding-inline: 24px;
    font-size: 17px;
  }

  .join-general-page .join-field small {
    margin-top: -4px;
    font-size: 15px;
    line-height: 1.35;
  }

  .join-general-page .join-radio-row {
    min-height: 32px;
  }

  .join-general-page .join-radio-field {
    display: block !important;
  }

  .join-general-page .join-radio-field legend,
  .join-general-page .join-radio-field > span:first-child {
    display: block;
    min-height: 26px;
    margin: 0 0 12px;
    padding: 0;
    line-height: 1.5;
  }

  .join-general-page .join-control-stack,
  .join-general-page .join-email-grid,
  .join-general-page .join-address-group,
  .join-general-page .join-contact-group {
    gap: 12px;
  }

  .join-general-page .join-email-row {
    grid-template-columns: minmax(0, 1fr) 16px;
  }

  .join-general-page .join-email-row.two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .join-general-page .member-child-section {
    gap: 40px;
  }

  .join-general-page .member-child-list {
    gap: 40px;
  }

  .join-general-page .member-child-head {
    gap: 16px;
  }

  .join-general-page .member-child-head p {
    margin: 0;
    color: #6eba2c;
    font-size: 18px;
    line-height: 1.65;
  }

  .join-general-page .child-add-button {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    background: #fff;
    font-size: 17px;
  }

  .join-general-page .join-child-form.has-divider {
    padding-top: 40px;
  }

  .join-general-page .member-form-actions .btn {
    width: 100%;
    min-height: 64px;
    border-radius: 13px;
    font-size: 19px;
    font-weight: 400;
  }

  .join-complete-page .page-main {
    padding: 64px 0;
  }

  .join-complete-page .join-complete-section {
    width: calc(100% - 40px);
  }

  .join-complete-panel {
    display: flex;
    min-height: 386px;
    flex-direction: column;
    gap: 26px;
    padding: 40px 20px;
    border: 0;
    border-radius: 24px;
    background: #f4f4f5;
    box-shadow: none;
  }

  .join-complete-head {
    height: 140px;
    gap: 16px;
  }

  .join-complete-icon {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    margin: 0;
  }

  .join-complete-panel h2 {
    margin: 0;
    color: #09090b;
    font-size: 21px;
    line-height: 1.5;
  }

  .join-complete-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    align-items: stretch;
    justify-content: stretch;
    justify-items: stretch;
    margin: 0;
  }

  .join-complete-actions .btn {
    width: 100%;
    justify-self: stretch;
    min-height: 64px;
    border-radius: 13px;
    font-size: 19px;
    font-weight: 400;
  }

  /* 세로로 쌓이는 모바일은 원래대로 로그인이 위에 온다. 마크업 순서(홈으로 → 로그인)는
     가로로 놓이는 PC·PDA 기준이라 여기서만 되돌린다. */
  .join-complete-actions .btn-primary {
    order: -1;
  }

  .join-complete-actions .btn-dark {
    border-color: #27272a;
    background: #27272a;
    color: #fff;
  }

  .join-complete-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .org-search-panel label {
    display: grid;
    gap: 14px;
    color: #09090b;
    font-size: 17px;
    font-weight: 400;
  }

  .org-search-field {
    min-height: 64px;
    border-radius: 12px;
  }

  .org-search-field input {
    min-height: 64px;
    border: 0;
    background: transparent;
    padding-left: 22px;
    font-size: 17px;
  }

  .org-search-field .icon-button {
    width: 48px;
    height: 48px;
  }

  .join-divider {
    margin: 36px 0;
  }

  .find-page .page-main {
    padding-block: 64px;
  }

  .find-page .site-header {
    height: var(--header-height);
  }

  .find-page .header-inner {
    min-height: var(--header-height);
  }

  .find-page .site-header .container,
  .find-page .find-layout {
    width: calc(100% - 40px);
  }

  .find-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .find-page .page-visual h1 {
    max-width: 250px;
    font-size: 32px;
    line-height: 1.5;
  }

  .find-page .page-visual h1 .find-visual-tail {
    display: block;
  }

  .find-layout {
    gap: 40px;
  }

  .find-head h2 {
    font-size: 32px;
    line-height: 1.5;
  }

  .find-tabs {
    gap: 16px;
  }

  .find-tabs a {
    min-height: 56px;
    padding: 0 24px;
    font-size: 17px;
    font-weight: 400;
    white-space: nowrap;
  }

  .find-tabs .is-active {
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap;
  }

  .find-form-panel {
    gap: 40px;
    padding-top: 0;
  }

  .find-id-layout .find-form-panel {
    gap: 20px;
  }

  .find-form-row {
    grid-template-columns: 1fr;
    min-height: 608px;
    gap: 40px;
    padding: 30px 0;
  }

  .find-field {
    grid-template-columns: 1fr;
    gap: 12px;
    font-size: 17px;
    font-weight: 400;
  }

  .find-field input,
  .find-field select {
    min-height: 64px;
    border-radius: 13px;
    font-size: 17px;
  }

  /* responsive.css의 `.find-page .email-inputs`(0-2-0, ≤1024, 4열)가 특이성으로 이겨서
     여기 grid를 무력화 → 동일 특이성(.email-field .email-inputs)으로 올려 figma-match(마지막 로드)가 이기게 함 */
  .email-field .email-inputs {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .email-inputs i {
    position: absolute;
    top: 19px;
    right: 0;
    display: block;
    width: 16px;
    color: #09090b;
    font-size: 17px;
    line-height: 1.5;
  }

  .email-inputs input:first-child {
    grid-column: 1 / -1;
    /* .find-field input의 width:100%가 margin-right를 오버플로로 밀어내므로 auto로 되돌려
       grid stretch가 margin을 존중하게 한다(0-2-1 특이성으로 .find-field input을 이김) */
    width: auto;
    padding-right: 40px;
    margin-right: 27px;
  }

  .email-inputs input:nth-of-type(2),
  .email-inputs select {
    grid-row: 2;
  }

  .find-actions .btn {
    width: 100%;
    min-height: 64px;
    border-radius: 13px;
    font-size: 19px;
    font-weight: 400;
  }

  .find-page .top-button {
    display: none;
  }

  .find-page .site-footer {
    height: 572px;
    min-height: 572px;
    padding: 64px 0 36px;
  }

  .find-page .site-footer::before {
    height: 84px;
  }

  .mypage .site-header {
    height: var(--header-height);
  }

  .mypage .header-inner {
    min-height: var(--header-height);
  }

  .mypage .site-header .container,
  .mypage .content-section.container {
    width: calc(100% - 40px);
  }

  .mypage .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .mypage .page-visual h1 {
    max-width: 280px;
    font-size: 32px;
    line-height: 1.5;
  }

  .mypage .page-main {
    padding: 64px 0;
  }

  .mypage .mypage-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .mypage .mypage-side {
    position: static;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 556px;
    gap: 20px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .mypage .mypage-side h2 {
    display: none;
  }

  .mypage-mobile-profile {
    display: grid;
    min-height: 216px;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 32px;
    border: 2px solid #6eba2c;
    border-radius: 64px 32px 32px;
    background: linear-gradient(146deg, #fff7eb 0%, #f4faec 100%);
    text-align: center;
  }

  .mypage-mobile-profile .avatar {
    width: 56px;
    height: 56px;
  }

  .mypage-mobile-profile strong {
    color: #09090b;
    font-size: 25px;
    line-height: 1.5;
  }

  .mypage-mobile-profile em {
    color: rgba(9, 9, 11, 0.75);
    font-size: 17px;
    font-style: normal;
    line-height: 1.5;
  }

  .mypage .mypage-side nav {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 0;
    align-self: start;
    padding: 8px 32px;
    border: 1px solid rgba(113, 113, 123, 0.15);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03), 0 4px 10px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  .mypage .mypage-side a {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 64px;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-bottom: 0;
    border-radius: 0;
    color: rgba(9, 9, 11, 0.75);
    font-size: 21px;
    font-weight: 400;
    white-space: nowrap;
  }

  .mypage .mypage-side a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background-image: repeating-linear-gradient(
      to right,
      rgba(113, 113, 123, 0.22) 0,
      rgba(113, 113, 123, 0.22) 6px,
      transparent 6px,
      transparent 10px
    );
  }

  .mypage .mypage-side a:last-child::before {
    content: none;
  }

  .mypage .mypage-side a.active,
  .mypage .mypage-side a:hover {
    background: transparent;
    color: #6eba2c;
    font-weight: 700;
  }

  .mypage .top-button {
    display: none;
  }

  .mypage .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .mypage-info-page .mypage-layout {
    gap: 40px;
  }

  .mypage-info-page .mypage-content {
    width: 100%;
    min-width: 0;
    min-height: 2070px;
    padding: 32px;
    border: 1px solid rgba(113, 113, 123, 0.22);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03), 0 4px 5px rgba(0, 0, 0, 0.03), 0 4px 6px rgba(0, 0, 0, 0.06);
  }

  .mypage-info-page .profile-panel,
  .mypage-info-page .mypage-content > .info-grid {
    display: none;
  }

  .mypage-info-mobile {
    display: grid;
    gap: 40px;
  }

  .mypage-info-head {
    display: grid;
    gap: 24px;
  }

  .mypage-info-head h2 {
    color: #09090b;
    font-size: 25px;
    line-height: 1.5;
  }

  .mypage-info-head .btn-dark {
    min-height: 64px;
    border: 0;
    border-radius: 13px;
    background: #27272a;
    color: #fff;
    font-family: "NPS_font", var(--font-sans);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
  }

  .mypage-info-sections {
    display: grid;
    gap: 20px;
  }

  .mypage-info-section {
    display: grid;
    gap: 32px;
    padding: 32px;
    border-radius: 24px;
    background: #f4f4f5;
  }

  .mypage-info-section.member-info {
    min-height: 694px;
  }

  .mypage-info-section.address-info {
    min-height: 344px;
  }

  .mypage-info-section.child-info {
    min-height: 762px;
  }

  .mypage-info-section h3 {
    color: #09090b;
    font-size: 25px;
    line-height: 1.5;
  }

  .mypage-info-section dl {
    display: grid;
    gap: 30px;
  }

  .mypage-info-section div {
    display: grid;
    gap: 12px;
  }

  .mypage-info-section dt,
  .mypage-info-section dd {
    color: #09090b;
    font-size: 17px;
    line-height: 1.5;
  }

  .mypage-info-section dt {
    color: rgba(9, 9, 11, 0.75);
    font-weight: 400;
  }

  .mypage-info-section dd {
    font-weight: 400;
    overflow-wrap: anywhere;
  }

  .mypage-edit-page .mypage-layout {
    gap: 40px;
  }

  .mypage-edit-page .mypage-content {
    width: 100%;
    min-width: 0;
    padding: 32px;
    border: 1px solid rgba(113, 113, 123, 0.22);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03), 0 4px 5px rgba(0, 0, 0, 0.03), 0 4px 6px rgba(0, 0, 0, 0.06);
  }

  .mypage-edit-page .mypage-content > h2,
  .mypage-edit-page .mypage-content > .form-grid,
  .mypage-edit-page .mypage-content > .form-actions {
    display: none;
  }

  .mypage-edit-mobile {
    display: grid;
    gap: 40px;
  }

  .mypage-edit-head {
    display: grid;
    gap: 24px;
  }

  .mypage-edit-head h2 {
    color: #09090b;
    font-size: 25px;
    line-height: 1.5;
  }

  .mypage-edit-actions {
    display: grid;
    gap: 12px;
  }

  .mypage-edit-actions .btn {
    min-height: 64px;
    border-radius: 13px;
    font-size: 19px;
    font-weight: 400;
  }

  .mypage-edit-actions .btn-ghost {
    border-color: rgba(113, 113, 123, 0.22);
  }

  .mypage-edit-body {
    display: grid;
    gap: 40px;
    padding: 40px 0 0;
    border-top: 1.5px solid #27272a;
  }

  .mypage-edit-section {
    position: relative;
    display: grid;
    align-content: start;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 0;
  }

  .mypage-edit-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background-image: repeating-linear-gradient(
      to right,
      #e4e4e4 0,
      #e4e4e4 6px,
      transparent 6px,
      transparent 14px
    );
  }

  .mypage-edit-section.member-edit {
    min-height: 1020px;
  }

  .mypage-edit-section.child-edit {
    min-height: 1008px;
  }

  .mypage-edit-section.child-edit::after {
    content: none;
  }

  .mypage-edit-section h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #09090b;
    font-size: 25px;
    line-height: 1.5;
  }

  .mypage-edit-section h3::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
  }

  .mypage-edit-fields {
    display: grid;
    gap: 24px;
  }

  .mypage-edit-child {
    display: grid;
    gap: 24px;
  }

  .mypage-edit-child.has-divider {
    padding-top: 40px;
    border-top: 1px solid rgba(113, 113, 123, 0.15);
  }

  .mypage-edit-field {
    display: grid;
    gap: 12px;
    min-width: 0;
  }

  .mypage-edit-fields label + label,
  .mypage-edit-field + .mypage-edit-field {
    margin-top: 0;
  }

  .mypage-edit-field span {
    color: #09090b;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .mypage-edit-field input {
    width: 100%;
    min-height: 64px;
    border: 1px solid rgba(113, 113, 123, 0.15);
    border-radius: 13px;
    background: #fff;
    padding: 0 24px;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .mypage-edit-field.is-locked input {
    background: #f4f4f5;
    color: rgba(9, 9, 11, 0.4);
  }

  .mypage-edit-field.select-field input {
    padding-right: 48px;
    background-image:
      linear-gradient(45deg, transparent 50%, #09090b 50%),
      linear-gradient(135deg, #09090b 50%, transparent 50%);
    background-position:
      calc(100% - 23px) 50%,
      calc(100% - 17px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
  }

  .mypage-edit-field button,
  .mypage-child-add {
    min-height: 64px;
    border: 0;
    border-radius: 13px;
    background: #27272a;
    color: #fff;
    font-family: "NPS_font", var(--font-sans);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
  }

  .mypage-edit-field.with-button {
    gap: 12px;
  }

  .mypage-edit-field.with-button button {
    background: #27272a;
  }

  .mypage-edit-field.button-only button {
    min-height: 64px;
  }

  .address-edit .mypage-edit-fields {
    gap: 12px;
  }

  .mypage-edit-field.compact-field {
    gap: 0;
  }

  .mypage-edit-field.compact-field span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .mypage-edit-field.compact-field input {
    min-height: 64px;
  }

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

  .radio-row label {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 12px;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  /* 자녀 추가 버튼 아래 점선 구분선(::after)은 뺐다. PC·PDA도 동일. */
  .mypage-child-add {
    position: relative;
    border: 1px solid #6eba2c;
    border-radius: 12px;
    background: #fff;
    color: #6eba2c;
  }

  .mypage-facility-list-page .mypage-layout {
    gap: 40px;
  }

  .mypage-facility-list-page .mypage-content {
    width: 100%;
    min-width: 0;
    min-height: 2474px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    padding: 32px;
    border: 1px solid rgba(113, 113, 123, 0.15);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03), 0 4px 10px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  .mypage-recent-page .mypage-content {
    min-height: 2714px;
  }

  .mypage-facility-list-page .mypage-facility-heading {
    display: grid;
    width: 100%;
    min-height: 118px;
    gap: 24px;
    margin: 0;
  }

  .mypage-facility-list-page .mypage-facility-heading h2 {
    width: 100%;
    font-size: 25px;
    line-height: 1.5;
  }

  .mypage-facility-list-page .mypage-facility-heading .content-toolbar,
  .mypage-facility-list-page .mypage-facility-heading .search-field {
    width: 100%;
  }

  /* 좁은 화면에서는 검색칸이 카드 폭을 다 쓰므로 PC의 24px을 그대로 두면 버튼이
     카드 여백을 너무 파고든다. 같은 마이페이지인 신청·예약 내역과 같은 10px로 맞춘다. */
  .mypage-facility-list-page .mypage-facility-heading .search-field .icon-button {
    right: -10px;
  }

  .mypage-facility-list-page .mypage-facility-list-body {
    width: 100%;
    min-width: 0;
    gap: 40px;
    margin-top: 40px;
  }

  .mypage-facility-list-page .mypage-facility-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    justify-content: stretch;
  }

  .mypage-facility-list-page .mypage-facility-card {
    width: 100%;
    min-height: 634px;
  }

  .mypage-facility-list-page .mypage-facility-card.has-action {
    min-height: 714px;
  }

  .mypage-facility-list-page .mypage-facility-card:nth-child(n+4) {
    display: none;
  }

  /* min-height 166px는 360 목업의 카드 폭(≈249px) 기준 높이라, 폭만 늘고
     높이는 고정돼 640에서 3.13:1 레터박스가 됐다(360에서는 1.44:1).
     166 × 1.5 = 249로 디자인 비율은 3:2다(PC도 312 × 1.5 = 468 ≈ 카드 472).
     base의 min-height 312px가 비율보다 우선하므로 같이 해제한다. */
  .mypage-facility-list-page .mypage-facility-thumb {
    min-height: 0;
    aspect-ratio: 3 / 2;
    border-width: 1px;
    border-radius: 32px;
  }

  /* 크기는 공통 하트 규칙을 따르고, 이 구간에서 다른 위치만 남긴다. */
  .mypage-facility-list-page .mypage-facility-favorite {
    top: 20px;
    right: 20px;
  }

  .mypage-facility-list-page .mypage-facility-copy {
    margin-top: 40px;
  }

  .mypage-facility-list-page .mypage-facility-copy h3 {
    height: 76px;
    font-size: 25px;
  }

  .mypage-facility-list-page .mypage-facility-meta {
    gap: 16px;
    height: 288px;
  }

  .mypage-facility-list-page .mypage-facility-meta div {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 60px;
  }

  .mypage-facility-list-page .mypage-facility-meta dt,
  .mypage-facility-list-page .mypage-facility-meta dd {
    min-height: 26px;
  }

  .mypage-facility-list-page .pagination {
    width: 100%;
    min-width: 0;
    gap: 6px;
    height: 40px;
    margin-top: 120px;
  }

  .mypage-facility-list-page .pagination a {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    font-size: 15px;
    font-weight: 400;
  }

  .mypage-facility-list-page .pagination a:nth-child(n+6):not(:last-child) {
    display: none;
  }

  .life-list-page .site-header {
    height: var(--header-height);
  }

  .life-list-page .header-inner {
    min-height: var(--header-height);
  }

  .life-list-page .site-header .container,
  .life-list-page .content-section.container {
    width: calc(100% - 40px);
  }

  .life-list-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .life-list-page .page-visual h1 {
    max-width: 280px;
    font-size: 32px;
    line-height: 1.5;
  }

  .life-list-page .page-main {
    padding: 0;
  }

  .life-list-page .content-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .life-list-page .section-heading.inline {
    display: grid;
    gap: 24px;
    margin-bottom: 0;
  }

  .life-list-page .section-heading p {
    display: none;
  }

  .life-list-page .section-heading h2 {
    font-size: 32px;
    line-height: 1.5;
  }

  /* 폭·정렬은 ≤1024 규칙과 동일하므로 여기서 다시 잡지 않는다. */
  .life-list-page form.search-field input {
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    padding: 0 58px 0 16px;
    font-size: 15px;
  }

  .life-list-page form.search-field .icon-button {
    top: 50%;
    right: -20px;
    width: 48px;
    height: 48px;
  }

  /* 높이를 못 박지 않는다(PC와 같은 이유). */
  .life-mobile-filters {
    display: grid;
    gap: 40px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 2px solid rgba(9, 9, 11, 0.34);
    border-bottom: 2px solid rgba(9, 9, 11, 0.34);
  }

  /* 고정 최소 높이(116px)는 접힘 상태 내용(제목 38px + 안내 문구 35px = 73px)보다
     43px 크고, 안내 문구가 없는 "운영 기간" 같은 그룹에서는 78px이 통째로 빈 칸으로
     남았다. 아래 여백만 주고 높이는 내용이 정하게 해, 필터 항목 수가 달라져도
     점선 구분선이 항상 글자 바로 아래 같은 자리에 온다. */
  .life-filter-group {
    padding-bottom: 24px;
    border-bottom: 1px dashed rgba(113, 113, 123, 0.3);
  }

  .life-filter-group button {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    color: #09090b;
    font-size: 24px;
    font-weight: 700;
    text-align: left;
  }

  .life-filter-group button span {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 0;
    background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
  }

  .life-filter-group button i {
    margin-left: auto;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4f4f5;
    color: #71717b;
    font-style: normal;
    font-size: 16px;
  }

  .life-filter-group small {
    display: block;
    margin-top: 12px;
    color: rgba(9, 9, 11, 0.5);
    font-size: 15px;
    line-height: 1.5;
  }

  .life-date-fields {
    display: grid;
    gap: 8px;
    /* 아래 여백이 빠져 있어 점선 구분선에 붙어 있었다.
       다른 필터 그룹(.life-age-chips)과 같은 24px 쌍으로 맞춘다. */
    margin-top: 24px;
    margin-bottom: 24px;
  }

  /* PDA·모바일 날짜 칸에도 같은 캘린더 아이콘을 둔다. 다만 여기 칸은 전체폭이라
     PC처럼 텍스트를 오른쪽에 붙이면 글자가 화면 끝까지 밀려난다. 텍스트는 왼쪽에
     두고 아이콘만 오른쪽 끝에 고정한다. 사이에 여백이 넓은 건 칸이 넓어서지
     PC 때처럼 값에 따라 흔들리는 게 아니다.
     아이콘은 글자 15px·칸 높이 36px에 맞춰 20px로 줄인다. */
  .life-date-fields input {
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5 url("../images/ui/icon-calendar.svg") no-repeat;
    background-size: 20px 20px;
    background-position: right 16px top calc(50% - 2px);
    color: rgba(9, 9, 11, 0.55);
    padding: 0 44px 0 16px;
    font-size: 15px;
  }

  .life-age-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .life-age-chips button {
    width: auto;
    min-height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #09090b;
    font-size: 15px;
    font-weight: 400;
  }

  .life-filter-actions {
    display: grid;
    gap: 12px;
    margin-bottom: 40px;
  }

  .life-filter-actions button {
    min-height: 64px;
    border-radius: 8px;
    font-size: 17px;
  }

  .life-search-button {
    border: 0;
    background: #27272a;
    color: #fff;
  }

  .life-reset-button {
    border: 1px solid rgba(113, 113, 123, 0.22);
    background: #fff;
    color: #09090b;
  }

	  .life-list-page .filter-chips {
	    display: none;
	  }

	  .life-desktop-filter,
	  .life-desktop-results {
	    display: none;
	  }

	  /* 카테고리 탭: 모바일에서 두 탭이 한 줄에 들어가도록 축소 */
	  .life-category-tabs {
	    gap: 10px;
	    margin-bottom: -36px;
	    margin-top: 64px;
	  }

	  .life-category-tabs a,
	  .life-category-tabs button {
	    height: 48px;
	    padding: 0 14px;
	    font-size: 14px;
	  }

	  .life-category-tabs a.is-active,
	  .life-category-tabs button.is-active {
	    font-size: 15px;
	  }

	  .life-total {
	    display: block;
    margin: 64px 0 40px;
    color: #09090b;
    font-size: 17px;
    line-height: 29px;
  }

  .life-list-page .card-grid.three {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .life-list-page .life-card {
    position: relative;
    min-height: 547px;
    overflow: hidden;
    padding: 0;
    border-radius: 24px;
    box-shadow: none;
  }

  .life-list-page .life-card:nth-child(2) {
    min-height: 551px;
  }

  .life-list-page .life-card:nth-child(n+4) {
    display: none;
  }

  .life-list-page .life-card:nth-child(3) {
    opacity: 0.45;
  }

  /* 체크무늬 그라디언트는 "이미지 없음"이 아니라 투명 영역처럼 읽혀서
     공통 기본 썸네일로 바꿨다. */
  .life-list-page .life-thumb {
    position: relative;
    height: 237px;
    border-radius: 24px 24px 0 0;
    background: var(--thumb-default);
  }

  .life-status {
    position: absolute;
    top: 32px;
    left: 24px;
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid #6eba2c;
    border-radius: 7px;
    background: #fff;
    color: #6eba2c;
    font-size: 15px;
    line-height: 1.5;
  }

  .life-list-page .category-chip,
  .life-list-page .desktop-title,
  .life-list-page .life-card > p,
  .life-list-page .button-row {
    display: none;
  }

  .life-list-page .mobile-title {
    display: inline;
  }

  .life-list-page .life-card h3 {
    margin: 24px 24px 0;
    font-size: 25px;
    line-height: 1.5;
  }

  .life-card-meta {
    display: grid;
    gap: 16px;
    margin: 16px 24px 24px;
  }

  .life-card-meta div {
    display: grid;
    gap: 4px;
  }

  .life-card-meta dt {
    position: relative;
    padding-left: 28px;
    color: #09090b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
  }

  .life-card-meta dt::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #6eba2c;
  }

  .life-card-meta dd {
    padding-left: 28px;
    color: #09090b;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
  }

  .life-list-page .pagination {
    gap: 24px;
    height: 40px;
    margin-top: 64px;
  }

  .life-list-page .pagination a {
    width: 40px;
    height: 40px;
    font-size: 15px;
    font-weight: 400;
  }

  .life-list-page .pagination a:nth-child(n+6):not(:last-child) {
    display: none;
  }

  .life-list-page .top-button {
    display: none;
  }

  .life-list-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  /* 아코디언 토글: 고정 높이 없이 내용에 맞춘다(접힘=제목만, 펼침=칩 포함). */
  .care-reservation-page .care-mobile-filters {
    height: auto;
    min-height: 0;
    margin-top: 64px;
    padding-bottom: 40px;
  }

  /* 접힘 상태에서는 칩/날짜 필드를 숨기고, 펼침(is-expanded)일 때만 표시한다. */
  .care-filter-group:not(.is-expanded) .care-filter-chips,
  .care-filter-group:not(.is-expanded) .life-date-fields {
    display: none;
  }

  /* 펼치면 화살표를 위로 회전 */
  .care-filter-group.is-expanded button i::before {
    transform: rotate(-90deg);
  }

  .care-filter-chips {
    align-content: start;
  }

  .care-filter-chips button.is-active {
    border: 1.5px solid #27272a;
    background: #fff;
  }

  .care-reservation-page .life-mobile-total {
    display: block;
    margin-top: 64px;
    margin-bottom: 40px;
  }

  .care-reservation-page .care-mobile-card-grid {
    gap: 40px;
  }

  .care-reservation-page .care-mobile-card-grid .life-card,
  .care-reservation-page .care-mobile-card-grid .life-card:nth-child(2),
  .care-reservation-page .care-mobile-card-grid .life-card:nth-child(3),
  .care-reservation-page .care-mobile-card-grid .life-card:nth-child(4) {
    display: grid;
    min-height: 824px;
    height: 824px;
    align-content: start;
    overflow: visible;
    border-radius: 0;
    background: #fff;
    opacity: 1;
  }

  .care-reservation-page .care-mobile-card-grid .life-card:nth-child(n+5) {
    display: none;
  }

  .care-reservation-page .care-mobile-card-grid .life-card.is-disabled {
    opacity: 0.42;
  }

  .care-reservation-page .care-mobile-card-grid .life-thumb {
    position: relative;
    height: 208px;
    border: 1px solid rgba(113, 113, 123, 0.08);
    border-radius: 16px;
    background: #f4f4f5;
  }

  .care-reservation-page .care-mobile-card-grid .life-thumb::before {
    content: "♡";
    position: absolute;
    top: 18px;
    right: 18px;
    color: #d4d4d8;
    font-size: 20px;
    line-height: 1;
  }

  .care-reservation-page .care-mobile-card-grid .life-thumb::after {
    content: "▦";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ececef;
    color: #d4d4d8;
    font-size: 24px;
    line-height: 1;
  }

  .care-reservation-page .care-mobile-card-grid .life-status {
    display: none;
  }

  .care-reservation-page .care-mobile-card-grid .category-chip {
    display: inline-flex;
    width: fit-content;
    min-height: 24px;
    align-items: center;
    margin: 40px 0 0;
    padding: 0 8px;
    border-radius: 6px;
    background: #f4f4f5;
    color: #09090b;
    font-size: 15px;
    line-height: 1.5;
  }

  .care-reservation-page .care-mobile-card-grid .life-card h3 {
    min-height: 76px;
    margin: 20px 0 0;
    overflow: hidden;
    color: #09090b;
    font-size: 25px;
    line-height: 1.5;
  }

  .care-reservation-page .care-mobile-card-grid .life-card-meta {
    gap: 16px;
    margin: 24px 0 40px;
  }

  .care-reservation-page .care-mobile-card-grid .button-row {
    display: grid;
    gap: 12px;
    margin: 0;
  }

  .care-reservation-page .care-mobile-card-grid .button-row .btn {
    display: inline-flex;
    width: 100%;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 400;
  }

  .care-reservation-page .care-mobile-card-grid .button-row .btn.is-disabled {
    border-color: rgba(113, 113, 123, 0.08);
    background: rgba(113, 113, 123, 0.08);
    color: rgba(9, 9, 11, 0.32);
    pointer-events: none;
  }

  .program-list-page .site-header {
    height: var(--header-height);
  }

  .program-list-page .header-inner {
    min-height: var(--header-height);
  }

  .program-list-page .site-header .container,
  .program-list-page .content-section.container {
    width: calc(100% - 40px);
  }

  .program-list-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .program-list-page .page-visual h1 {
    max-width: 280px;
    font-size: 32px;
    line-height: 1.5;
  }

  .program-list-page .page-main {
    padding: 0;
  }

  .program-list-page .content-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .program-list-page .section-heading.inline {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: stretch;
    gap: 32px;
    margin-bottom: 0;
  }

  .program-list-page .section-heading p {
    display: none;
  }

  .program-list-page .section-heading h2 {
    font-size: 32px;
    line-height: 1.5;
  }

  .program-list-page .program-list-heading h2 span {
    display: block;
  }

  .program-list-page .program-list-heading h2 span:first-child {
    color: #09090b;
  }

  .program-list-page .program-list-heading h2 span + span {
    color: #6eba2c;
  }

  .program-list-page .program-list-heading h2 span + span::before {
    content: "";
  }

  .program-list-page .content-toolbar {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .program-list-page .content-toolbar .select-control {
    display: none;
  }

  /* 폭·버튼 위치는 ≤1024 규칙과 동일하므로 여기서 다시 잡지 않는다. */
  .program-list-page .content-toolbar .search-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    padding: 0 58px 0 16px;
    font-size: 15px;
  }

  .program-list-page .filter-chips {
    display: none;
  }

  .program-list-page .program-total {
    margin: 64px 0 40px;
  }

  .program-list-page .card-grid.three {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .program-list-page .program-card {
    position: relative;
    min-height: 547px;
    overflow: hidden;
    padding: 0;
    border-radius: 24px;
    box-shadow: none;
  }

  /* 운영프로그램 결과(life-event) 카드: 모바일에서 세로 1열 풀폭, 내용 높이 */
  .program-list-page .life-event-grid,
  .life-events-page .life-event-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .program-list-page .life-event-card,
  .life-events-page .life-event-card {
    height: auto;
  }

  .program-list-page .life-event-thumb,
  .life-events-page .life-event-thumb {
    min-height: 180px;
  }

  /* 카드 본문 여백: 좁은 화면에서 40px 32px은 글자 폭을 너무 잡아먹는다.
     life-event 카드를 쓰는 모든 페이지(운영 프로그램·공연·전시·행사·통합검색) 공통. */
  .life-event-copy {
    padding: 24px;
  }

  .program-list-page .program-card:first-child {
    border-color: #6eba2c;
    border-width: 2px;
  }

  .program-list-page .program-card:nth-child(2) {
    min-height: 551px;
  }

  .program-list-page .program-card:nth-child(n+4) {
    display: none;
  }

  .program-list-page .program-card:nth-child(3) {
    opacity: 0.45;
  }

  .program-list-page .program-thumb {
    position: relative;
    height: 237px;
    border-radius: 24px 24px 0 0;
    background: var(--thumb-default);
  }

  .program-list-page .status-badge,
  .program-list-page .desktop-title,
  .program-list-page .program-desktop-meta,
  .program-list-page .text-link {
    display: none;
  }

  .program-list-page .mobile-title {
    display: inline;
  }

  .program-list-page .program-card h3 {
    margin: 24px 24px 0;
    font-size: 25px;
    line-height: 1.5;
  }

  .program-list-page .pagination {
    gap: 8px;
    height: 40px;
    margin-top: 65px;
  }

  .program-list-page .pagination a {
    width: 40px;
    height: 40px;
    font-size: 15px;
    font-weight: 400;
  }

  .program-list-page .pagination a:nth-child(n+6):not(:last-child) {
    display: none;
  }

  .program-list-page .top-button {
    display: none;
  }

  .program-list-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .program-detail-page .site-header {
    height: var(--header-height);
  }

  .program-detail-page .header-inner {
    min-height: var(--header-height);
  }

  .program-detail-page .site-header .container,
  .program-detail-page .content-section.container {
    width: calc(100% - 40px);
  }

  .program-detail-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .program-detail-page .page-visual h1 {
    max-width: 280px;
    font-size: 32px;
    line-height: 1.5;
  }

  .program-detail-page .page-main {
    padding: 0;
  }

  .program-detail-page .detail-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .program-detail-mobile-heading {
    display: flex;
    height: 104px;
    flex-direction: column;
    gap: 8px;
    color: #09090b;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
  }

  .program-detail-mobile-heading span {
    display: block;
  }

  .program-detail-mobile-heading span + span {
    color: #6eba2c;
  }

  .program-detail-page .detail-article {
    display: block;
    width: 100%;
    min-height: 888px;
    margin-top: 64px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .program-detail-desktop-content,
  .program-detail-page .detail-side {
    display: none;
  }

  .program-detail-mobile-card {
    position: relative;
    display: flex;
    min-height: 888px;
    flex-direction: column;
    gap: 64px;
    justify-content: space-between;
    overflow: visible;
    padding: 214px 32px 32px;
    border-radius: 32px 64px 32px 32px;
    background: linear-gradient(108deg, #fff7eb 0%, #f4faec 100%);
  }

  .program-detail-mobile-main-image {
    background: var(--thumb-default);
  }

  .program-detail-mobile-media {
    position: absolute;
    top: -20px;
    left: 20px;
    right: 20px;
    width: auto;
    /* PC의 65/47 비율을 해제해야 left/right로 폭이 결정된다. */
    aspect-ratio: auto;
    height: 202px;
    border-radius: 20px 80px 20px 20px;
    background: var(--program-image, none) center / cover no-repeat, var(--thumb-default);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
  }

  .program-detail-mobile-copy {
    display: grid;
    gap: 24px;
  }

  .program-detail-mobile-copy h2 {
    margin: 0;
    color: #09090b;
    font-size: 25px;
    line-height: 1.5;
  }

  .program-detail-mobile-copy p {
    margin: 0;
    color: rgba(9, 9, 11, 0.75);
    font-size: 17px;
    line-height: 1.5;
    min-height: 130px;
  }

  .program-detail-mobile-meta {
    display: grid;
    gap: 16px;
    margin: 0;
  }

  .program-detail-mobile-meta div {
    display: grid;
    gap: 8px;
  }

  .program-detail-mobile-meta dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #09090b;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
  }

  .program-detail-mobile-meta dt span {
    width: 24px;
    color: #6eba2c;
    font-size: 17px;
    line-height: 1;
  }

  .program-detail-mobile-meta dd {
    color: #09090b;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .program-detail-mobile-meta dd strong {
    color: #6eba2c;
    font-weight: 700;
  }

  .program-detail-mobile-meta dd em {
    display: inline-block;
    margin: 0 8px;
    color: rgba(9, 9, 11, 0.5);
    font-style: normal;
  }

  .program-detail-mobile-carousel {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .program-detail-mobile-carousel button {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: rgba(9, 9, 11, 0.25);
    font-size: 26px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.08);
  }

  .program-detail-mobile-carousel span {
    display: inline-flex;
    flex: 1 1 auto;
    justify-content: center;
    gap: 8px;
    color: #09090b;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
  }

  .program-detail-mobile-carousel em {
    color: rgba(9, 9, 11, 0.6);
    font-style: normal;
  }

  .program-detail-mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 64px;
  }

  /* 모바일은 시안대로 "관련 문의" 아래에 연락처를 둔다(아래 h3의 margin-bottom 16px). */
  .program-detail-mobile-contact > div:not(.program-detail-mobile-actions) {
    display: block;
  }

  .program-detail-mobile-contact h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: #09090b;
    font-size: 19px;
    line-height: 1.5;
  }

  .program-detail-mobile-contact p {
    margin: 0;
    color: #09090b;
    font-size: 17px;
    line-height: 1.5;
  }

  .program-detail-mobile-actions {
    display: grid;
    gap: 12px;
  }

  .program-detail-mobile-actions .btn {
    width: 100%;
    min-height: 64px;
    border-radius: 13px;
    font-size: 19px;
    font-weight: 400;
  }

  .program-detail-mobile-actions .btn-ghost {
    border-color: rgba(113, 113, 123, 0.22);
  }

  .program-detail-mobile-body {
    display: flex;
    width: calc(100% + 2px);
    flex-direction: column;
    gap: 40px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1.5px solid #27272a;
  }

  .program-detail-mobile-main-image {
    width: 100%;
    aspect-ratio: 431 / 612;
  }

  .program-detail-mobile-body p {
    margin: 0;
    color: #09090b;
    font-size: 17px;
    line-height: 1.5;
  }

  .program-detail-mobile-files {
    display: grid;
    overflow: hidden;
    border-top: 1px solid #27272a;
  }

  .program-detail-mobile-files strong,
  .program-detail-mobile-files a {
    display: flex;
    min-height: 64px;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
    color: #09090b;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .program-detail-mobile-files strong {
    justify-content: center;
    background: #f7f7f7;
  }

  .program-detail-mobile-files a {
    gap: 8px;
    padding: 0 40px;
    background: #fff;
  }

  .program-detail-mobile-files a span {
    color: #09090b;
    font-size: 10px;
  }

  .program-detail-page .top-button {
    display: none;
  }

  .program-detail-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .reservation-complete-page .site-header {
    height: var(--header-height);
  }

  .reservation-complete-page .header-inner {
    min-height: var(--header-height);
  }

  .reservation-complete-page .site-header .container,
  .reservation-complete-section {
    width: calc(100% - 40px);
  }

  .reservation-complete-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .reservation-complete-page .page-visual h1 {
    max-width: 280px;
    font-size: 32px;
    line-height: 1.5;
  }

  .reservation-complete-page .page-main {
    padding-block: 64px;
  }

  .reservation-complete-panel {
    min-height: 529px;
    gap: 26px;
    padding: 40px 20px;
    border-radius: 24px;
  }

  .complete-check {
    width: 60px;
    height: 60px;
  }

  .reservation-complete-panel h2 {
    max-width: 280px;
    font-size: 21px;
  }

  .reservation-complete-info {
    width: 100%;
    min-height: 117px;
    padding: 24px 20px;
    font-size: 15px;
    line-height: 1.5;
    white-space: nowrap;
  }

  .reservation-complete-info span {
    font-size: 15px;
  }

  .reservation-complete-actions {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .reservation-complete-actions .btn {
    width: 100%;
    min-height: 64px;
    font-size: 19px;
  }

  .reservation-complete-actions .btn-primary {
    order: -1;
  }

  .reservation-complete-actions .btn-dark {
    min-width: 0;
  }

  .reservation-complete-page .top-button {
    display: none;
  }

  .reservation-complete-page .site-footer {
    height: 572px;
    min-height: 572px;
  }

  .find-result-page .site-header {
    height: var(--header-height);
  }

  .find-result-page .header-inner {
    min-height: var(--header-height);
  }

  .find-result-page .site-header .container,
  .find-result-page .find-result-section {
    width: calc(100% - 40px);
  }

  .find-result-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .find-result-page .page-visual h1 {
    font-size: 32px;
    line-height: 1.5;
  }

  .find-result-page .page-main {
    padding-block: 64px;
  }

  .find-result-page .result-panel {
    min-height: 386px;
    gap: 26px;
    padding: 40px 20px;
    border-radius: 24px;
  }

  .find-result-page .result-icon {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }

  .find-result-page .result-icon::after {
    width: 23px;
    height: 12px;
    border-bottom-width: 4px;
    border-left-width: 4px;
  }

  .find-result-page .result-copy {
    font-size: 21px;
  }

  .find-result-page .result-actions {
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .find-result-page .result-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    font-size: 19px;
  }

  .find-result-page .result-login {
    order: 1;
  }

  .find-result-page .result-secondary {
    order: 2;
  }

  .find-result-page .top-button {
    display: none;
  }

  .find-result-page .site-footer {
    height: auto;
    min-height: 572px;
  }
}

/* 신청·예약 내역 표를 카드형으로 바꾸는 규칙. 원래 ≤640 전용이었는데,
   PDA(641~1024)도 같은 모양으로 쓴다. 그 구간에서 표를 그대로 두면 기관명
   칸이 좁아 "돌봄기관 명이 들어가는 곳입니다."가 세 줄로 접혔다.
   표 모양은 위 @media (min-width: 1025px) 블록이 PC에서만 맡는다. */
@media (max-width: 1024px) {
  .mypage-reservation-page .mypage-content {
    width: 100%;
    min-width: 0;
    padding: 32px;
    border: 1px solid rgba(113, 113, 123, 0.22);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03), 0 4px 10px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  /* 칸을 1fr로 못박는다. base의 가로 배치용 justify-content: space-between이
     grid에서도 살아 있어서, 칸이 폭을 채우지 않고 내용 폭(260px)으로 잡혔다.
     그 탓에 아래 .content-toolbar의 width: 100%도 260px 기준이 되어 검색 바가
     662px 자리에서 260px만 쓰고 있었다(즐겨찾기 시설 헤딩과 같은 처리다). */
  .mypage-reservation-page .mypage-reservation-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0;
  }

  .mypage-reservation-page .mypage-reservation-heading h2 {
    font-size: 25px;
    line-height: 1.5;
  }

  .mypage-reservation-page .content-toolbar {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .mypage-reservation-page .content-toolbar .select-control {
    display: none;
  }

  .mypage-reservation-page .search-field {
    width: 100%;
  }

  .mypage-reservation-page .search-field input {
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    padding: 0 58px 0 16px;
    font-size: 15px;
  }

  .mypage-reservation-page .search-field .icon-button {
    top: 4px;
    right: -10px;
    width: 48px;
    height: 48px;
  }

  .mypage-reservation-page .search-field .icon-button .icon-search {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
  }

  .mypage-reservation-page .mypage-total {
    margin: 40px 0 30px;
    color: #09090b;
    font-size: 17px;
    font-weight: 400;
    line-height: 29px;
  }

  .mypage-reservation-page .mypage-total strong {
    color: #6eba2c;
  }

  .mypage-reservation-page .table-wrap {
    overflow: visible;
    padding-left: 0;
  }

  .mypage-reservation-page .board-table {
    display: block;
    width: 100%;
    min-width: 0;
    border-top: 2px solid var(--color-ink);
  }

  .mypage-reservation-page .board-table thead {
    display: none;
  }

  .mypage-reservation-page .board-table tbody {
    display: block;
  }

  .mypage-reservation-page .board-table tr {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    min-width: 0;
    min-height: 0;
    row-gap: 20px;
    padding: 40px 16px;
    border: 0;
    border-bottom: 1px solid rgba(113, 113, 123, 0.15);
    border-radius: 0;
    background: transparent;
  }

  .mypage-reservation-page .board-table tr:last-child {
    border-bottom: 0;
  }

  .mypage-reservation-page .board-table tbody tr:not(.notice-row):hover {
    background: #f7f7f7;
  }

  .mypage-reservation-page .board-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border-bottom: 0;
    line-height: 1.5;
    text-align: left;
  }

  .mypage-reservation-page .board-table td::before {
    display: none;
  }

  /* 번호 셀: 공지 뱃지만 노출, 번호 숫자는 숨김 (상단 좌측) */
  .mypage-reservation-page .board-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-size: 0;
  }

  /* 공지 뱃지: 상태 뱃지와 붙지 않도록 우측 여백 (일반행엔 .board-badge 없음) */
  .mypage-reservation-page .board-table td:nth-child(1) .board-badge {
    margin-right: 8px;
  }

  /* 상태 뱃지: 상단, 공지 옆 */
  .mypage-reservation-page .board-table td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  /* 돌봄기관 명: 굵게, 한 줄 말줄임 */
  .mypage-reservation-page .board-table td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .mypage-reservation-page .board-table td:nth-child(2) a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #09090b;
    font-size: 17px;
    font-weight: 700;
  }

  /* 신청·예약 일자: 회색 */
  .mypage-reservation-page .board-table td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 3;
    color: rgba(9, 9, 11, 0.55);
    font-size: 15px;
  }

  .mypage-reservation-page .board-table .status-badge {
    justify-self: start;
    margin-bottom: 0;
  }

  /* 공지 행 강조 */
  .mypage-reservation-page .board-table .notice-row {
    padding: 40px 16px;
    border-bottom: 0;
    border-radius: 0px;
    background: rgba(110, 186, 44, 0.08);
  }

  .mypage-reservation-page .pagination {
    gap: 6px;
    height: 40px;
    margin-top: 40px;
  }

  .mypage-reservation-page .pagination a {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    font-size: 15px;
    font-weight: 400;
  }

  .mypage-reservation-page .pagination a:nth-child(n+6):not(:last-child) {
    display: none;
  }
}

/* 게시판(공지·채용 목록/상세)은 PDA에서도 PC 표가 아니라 모바일 카드형 유지 → ≤1024로 확장 */
@media (max-width: 1024px) {
  .board-page .site-header {
    height: var(--header-height);
  }

  .board-page .header-inner {
    min-height: var(--header-height);
  }

  .board-page .site-header .container,
  .board-page .content-section.container {
    width: calc(100% - 40px);
  }

  .board-page .page-visual {
    padding: 0 20px;
  }

  .board-list-page .page-main {
    padding-block: 140px 160px;
  }

  .board-list-head {
    display: block;
    margin-bottom: 64px;
  }

  .board-list-head h2 {
    font-size: 44px;
    line-height: 1.5;
  }

  .board-list-head .content-toolbar {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin-top: 24px;
  }

  .board-list-head .select-control select,
  .board-list-head .search-field input {
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    /* background 단축속성은 base의 background-image(select chevron)를 지운다 → color만 지정 */
    background-color: #f4f4f5;
    font-size: 17px;
  }

  .board-list-head .select-control {
    width: 100%;
  }

  .board-list-head .select-control select {
    width: 100%;
    padding: 0 48px 0 24px;
  }

  .board-list-head .search-field input {
    padding: 0 64px 0 24px;
  }

  .board-list-head .search-field .icon-button {
    top: 50%;
    right: -10px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
  }

  .board-total {
    margin-bottom: 40px;
  }

  .board-list-page .table-wrap {
    overflow: visible;
  }

  .board-list-page .board-table {
    display: block;
    min-width: 0;
    border-top: 1.5px solid #27272a;
  }

  .board-list-page .board-table thead {
    display: none;
  }

  .board-list-page .board-table tbody,
  .board-list-page .board-table tr,
  .board-list-page .board-table td {
    display: block;
  }

  .board-list-page .board-table tr {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) 24px;
    grid-template-rows: auto auto auto;
    align-content: center;
    /* 가로 간격 11.5px은 메타 줄 구분선의 왼쪽 여백이기도 하다(선은 칸 맨 앞에
       붙는 ::before라 그 앞 간격을 칸 사이 gap이 만든다). 아래 구분선의
       margin-right와 같은 값이어야 선 양옆이 대칭이 된다. */
    gap: 20px 11.5px;
    padding: 40px 16px;
    border-bottom: 1px solid #e4e4e4;
  }

  /* 공지 아닌 행은 제목/메타 2행만 쓴다 → 빈 3번째 행 + row-gap이 만드는 하단 여백 제거 */
  .board-list-page .board-table tr:not(.notice-row) {
    grid-template-rows: auto auto;
  }

  .board-list-page .board-table .notice-row {
    background: rgba(110, 186, 44, 0.035);
  }

  .board-list-page .board-table td {
    height: auto;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 17px;
  }

  /* 데스크톱 고정폭(width:100px/180px)을 모바일 그리드에서 해제 → 셀이 트랙을 넘겨 잘리는 문제 방지 */
  .board-list-page .board-table td:nth-child(1),
  .board-list-page .board-table td:nth-child(3),
  .board-list-page .board-table td:nth-child(4),
  .board-list-page .board-table td:nth-child(5),
  .board-list-page .board-table td:nth-child(6) {
    width: auto;
  }

  .board-list-page .board-table tr:not(.notice-row) td:first-child {
    display: none;
  }

  .board-list-page .board-table td:first-child {
    grid-column: 1 / 5;
    grid-row: 1;
  }

  .board-list-page .board-table td:nth-child(2) {
    grid-column: 1 / 5;
    grid-row: 2;
    color: #09090b;
    font-size: 19px;
    font-weight: 900;
  }

  .board-list-page .board-table tr:not(.notice-row) td:nth-child(2) {
    grid-row: 1;
  }

  /* 제목 굵게(900): 데스크톱 base(비공지 400 / 공지 700)가 특이성으로 이기던 것을
     동일 특이성으로 덮어써 모든 행 제목을 굵게 통일 (a 태그 포함) */
  .board-list-page .board-table tr:not(.notice-row) td:nth-child(2),
  .board-list-page .board-table tr:not(.notice-row) td:nth-child(2) a,
  .board-list-page .board-table .notice-row td:nth-child(2),
  .board-list-page .board-table .notice-row td:nth-child(2) a {
    font-weight: 900;
  }

  .board-list-page .board-table td:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
  }

  .board-list-page .board-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 3;
  }

  .board-list-page .board-table td:nth-child(5) {
    grid-column: 3;
    grid-row: 3;
  }

  .board-list-page .board-table tr:not(.notice-row) td:nth-child(3),
  .board-list-page .board-table tr:not(.notice-row) td:nth-child(4),
  .board-list-page .board-table tr:not(.notice-row) td:nth-child(5) {
    grid-row: 2;
  }

  .board-list-page .board-table td:nth-child(3),
  .board-list-page .board-table td:nth-child(4),
  .board-list-page .board-table td:nth-child(5) {
    color: rgba(9, 9, 11, 0.56);
    font-size: 15px;
    font-weight: 700;
    /* 아래 구분선을 붙이면 칸 안이 "| 홍길동" 두 덩어리가 되어 360에서 값이
       선 아래로 접혔다. 칸 안에서는 줄을 바꾸지 않는다. */
    white-space: nowrap;
  }

  /* 메타 한 줄(날짜 · 작성자 · 조회수)을 구분선으로 나눈다. 칸이 놓이는 순서가
     4(날짜) → 3(작성자) → 5(조회수)라 뒤 두 칸 앞에만 선을 붙이면 값 사이에만
     들어가고 줄 끝에는 남지 않는다.
     글자 "|" 대신 1px 상자를 쓴다. 글리프는 폰트마다 두께·높이가 달라 1px이
     안 나온다. 왼쪽 11.5px은 위 grid의 column-gap이 만든다. */
  .board-list-page .board-table td:nth-child(3)::before,
  .board-list-page .board-table td:nth-child(5)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-right: 11.5px;
    vertical-align: -0.15em;
    background: rgba(113, 113, 123, 0.22);
  }

  .board-list-page .board-table td:nth-child(6) {
    grid-column: 5;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: end;
  }

  /* 공지 아닌 행은 2행 레이아웃 → 첨부 아이콘도 2행만 span해서 유령 3번째 행/gap 제거 */
  .board-list-page .board-table tr:not(.notice-row) td:nth-child(6) {
    grid-row: 1 / 3;
  }

  .board-list-page .pagination {
    gap: 12px;
    margin-top: 40px;
  }

  /* flex-shrink로 너비만 줄어 원이 타원이 되던 문제 → 축소 금지 + gap 축소로 폭 안에 맞춤 */
  .board-list-page .pagination a {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .board-list-page .pagination a:nth-child(n+6):not(:last-child) {
    display: none;
  }

  .board-detail-page .page-main {
    padding-block: 140px 160px;
  }

  .board-section-title {
    margin-bottom: 64px;
    font-size: 44px;
    line-height: 1.5;
  }

  .board-detail-page .board-detail {
    padding-top: 40px;
  }

  .board-detail-page .board-detail h2 {
    font-size: 25px;
  }

  .board-detail-page .board-detail header dl {
    gap: 16px;
  }

  .board-detail-page .article-body p {
    font-size: 17px;
  }

  .board-detail-page .attach-box {
    grid-template-columns: 1fr;
  }

  .board-detail-page .attach-box strong,
  .board-detail-page .attach-box span {
    min-height: 64px;
  }

  .board-detail-page .attach-box span {
    justify-content: flex-start;
    padding: 0 40px;
  }

  .board-detail-actions {
    display: none;
  }

  .board-page .top-button {
    display: none;
  }

  .board-page .site-footer {
    min-height: 572px;
  }
}

@media (max-width: 640px) {
  .gnb-demo-page .site-header,
  .search-overlay-page .site-header {
    position: relative;
    height: 60px;
  }

  .gnb-demo-page .login-pill,
  .gnb-demo-page .utility-link {
    display: none;
  }

  .gnb-demo-page .menu-trigger .icon-menu::before {
    top: 10px;
    transform: rotate(45deg);
    box-shadow: none;
  }

  .gnb-demo-page .menu-trigger .icon-menu::after {
    top: 10px;
    transform: rotate(-45deg);
  }

  .gnb-demo-hero {
    display: none;
  }

  .gnb-demo-filter,
  .search-dimmed-filter {
    display: none;
  }

  .gnb-mobile-panel {
    display: block;
    min-height: calc(100vh - 60px);
    padding: 16px 20px 28px;
    background: #fff;
  }

  .gnb-mobile-actions {
    display: grid;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 10px solid #f4f4f5;
  }

  .gnb-mobile-actions .login-pill,
  .gnb-mobile-actions .language-pill {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(113, 113, 123, 0.22);
    border-radius: 999px;
    background: #fff;
    color: #09090b;
    font-size: 20px;
    font-weight: 400;
  }

  .gnb-mobile-actions .login-pill {
    border: 0;
    background: #f4f4f5;
  }

  .gnb-mobile-groups {
    padding-top: 24px;
  }

  .gnb-mobile-group {
    padding: 22px 0;
    border-bottom: 1px dashed rgba(113, 113, 123, 0.3);
  }

  .gnb-mobile-group h2 {
    font-size: 22px;
    line-height: 1.4;
  }

  .gnb-mobile-group.is-open h2 {
    color: #6eba2c;
  }

  .gnb-mobile-group ul {
    display: none;
    margin-top: 22px;
  }

  .gnb-mobile-group.is-open ul {
    display: grid;
    gap: 16px;
  }

  .gnb-mobile-group a {
    font-size: 18px;
    font-weight: 800;
  }

  .gnb-mobile-group a.is-active {
    color: #6eba2c;
  }

  .search-overlay-page .login-pill,
  .search-overlay-page .utility-link {
    display: none;
  }

  .search-overlay-page .site-logo .logo-city::after {
    content: "|";
    display: inline-block;
    margin-left: 4px;
    color: #0d2872;
    font-weight: 800;
  }

  .search-overlay-demo {
    min-height: 580px;
  }

  .search-overlay-demo::before {
    height: 280px;
    background:
      radial-gradient(circle at 70% -4%, transparent 0 48px, rgba(110, 186, 44, 0.11) 50px 70px, transparent 72px),
      radial-gradient(circle at -7% 72%, transparent 0 58px, rgba(110, 186, 44, 0.12) 60px 78px, transparent 80px),
      radial-gradient(circle at 82% 100%, transparent 0 48px, rgba(110, 186, 44, 0.11) 50px 70px, transparent 72px),
      #f4faec;
  }

  .search-overlay-demo::after {
    display: none;
  }

  .overlay-search-form {
    width: calc(100% - 40px);
    margin-top: 108px;
  }

  .overlay-search-form input {
    min-height: 64px;
    border-width: 3px;
    border-radius: 28px 16px 16px 16px;
    padding-inline: 18px 76px;
    font-size: 18px;
  }

  .overlay-search-form button {
    width: 56px;
    height: 56px;
    right: 0;
  }

  .overlay-close {
    top: 252px;
    width: 56px;
    height: 56px;
  }

  .search-dimmed-hero {
    top: 0;
    right: 20px;
    bottom: auto;
    left: 20px;
    min-height: 547px;
    border-radius: 120px 52px 36px 36px;
    color: rgba(255, 255, 255, 0.28);
    background:
      linear-gradient(rgba(24, 31, 39, 0.86), rgba(24, 31, 39, 0.86)),
      url("../images/ui/home-hero.jpg") 50% center / cover no-repeat;
    background-size: cover;
  }

  .search-dimmed-hero > div {
    padding: 305px 24px 28px;
  }

  .search-dimmed-hero h1 {
    font-size: 31px;
    line-height: 1.35;
  }

  .search-dimmed-hero h1 .overlay-title-desktop {
    display: none;
  }

  .search-dimmed-hero h1 .overlay-title-mobile {
    display: inline;
  }

  .search-dimmed-hero p {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 26px;
  }

  .search-dimmed-hero a {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: transparent;
    color: rgba(255, 255, 255, 0.32);
    font-size: 15px;
  }

  .search-dimmed-hero > div > span {
    margin-top: 28px;
    font-size: 17px;
  }

  .map-page .site-header {
    display: block;
    position: relative;
    height: var(--header-height);
  }

  .map-page .site-header .container {
    width: calc(100% - 40px);
  }

  .map-page .login-pill,
  .map-page .utility-link {
    display: none;
  }

  .map-workspace {
    display: flex;
    min-height: 1709px;
    flex-direction: column;
    overflow: visible;
    background: #36780d;
  }

  .map-sidebar {
    order: 2;
    min-height: 1261px;
    margin-top: -32px;
    padding: 32px 20px 28px;
    border-radius: 32px 32px 0 0;
  }

  .map-logo {
    display: none;
  }

  .map-search {
    margin-bottom: 32px;
  }

  .map-keyword {
    min-height: 56px;
  }

  .map-keyword input {
    min-height: 56px;
    font-size: 16px;
  }

  .map-keyword .icon-button {
    width: 52px;
    height: 52px;
  }

  .map-page .list-count {
    margin-bottom: 32px;
    font-size: 17px;
  }

  .map-page .map-list {
    gap: 16px;
    max-height: none;
  }

  .map-page .map-list-item {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 328px;
    padding: 24px;
    border-radius: 28px;
    column-gap: 15px;
  }

  .map-page .map-list-item strong {
    font-size: 21px;
    max-width: 196px;
  }

  .map-page .map-list-item em,
  .map-page .map-list-item p {
    font-size: 17px;
  }

  .map-card-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .map-card-actions .btn-primary {
    order: -1;
  }

  .map-card-actions .btn {
    min-height: 48px;
    border-radius: 10px;
    font-size: 17px;
  }

  .map-canvas-large {
    order: 1;
    min-height: 480px;
    border-radius: 0;
    background-position: -536px -354px;
    background-size: 1599px 921px;
  }

  .map-page .map-canvas-large .map-pin {
    width: 46px;
    height: 56px;
    padding-top: 0px;
    border-width: 0;
    font-size: 12px;
  }

  .map-page .map-canvas-large .map-pin::after,
  .map-page .map-canvas-large .map-cluster-pin::after {
    top: 65%;
  }

  .map-page .pin-1 { top: 36px; left: 199px; }
  .map-page .pin-2 { top: 86px; left: 140px; }
  .map-page .pin-3 { top: -17.5px; left: 400px; }
  .map-page .pin-4 { top: 104px; left: 108px; }
  .map-page .pin-5 { top: 210px; left: 327px; }
  .map-page .pin-6 { top: 279px; left: 423px; }
  .map-page .pin-7 { top: 292px; left: 6px; }
  .map-page .pin-8 { top: 325px; left: -28px; }
  .map-page .pin-9 { top: 150px; left: -104px; }
  .map-page .pin-10 { top: -60px; left: -70.5px; }

  .map-filter-chips {
    top: 20px;
    right: 0;
    left: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 20px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  /* 가로 스크롤바 숨김 (스크롤 기능은 유지) */
  .map-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .map-filter-chips button {
    flex: 0 0 auto;
    min-height: 42px;
    font-size: 15px;
  }

  .map-page .map-detail-card {
    position: static;
    width: auto;
    margin: 20px;
    /* 여기서는 카드가 글 흐름에 놓여 페이지째 굴린다. 카드 안에 또 굴릴 데가 생기지
       않도록 PC의 높이 제한(max-height)을 푼다. */
    max-height: none;
  }

  /* 팝업 초록 테두리 제거 */
  .map-page .map-detail-card.map-detail-panel {
    border: 0;
  }

  /* 닫기 버튼: 마스크(left-icon) X + 텍스트 X 중복 → 텍스트 × 하나만 깔끔하게 */
  .map-page .map-detail-close {
    font-size: 22px;
    font-weight: 400;
  }

  .map-page .map-detail-close::before {
    display: none;
  }

  /* 시트를 absolute로 띄우면 페이지 높이에 들어가지 않는다. 그래서 아래 두 곳의
     min-height(1292px = 지도 448 + 옛 카드 802 + 여백)로 자리를 손수 잡아 뒀는데,
     표가 붙어 카드 높이가 분류마다 달라지면서 아래쪽이 스크롤로도 닿지 않게 됐다.
     지도 자리는 캔버스의 padding-top이 잡고, 시트는 흐름에 둔다. 그러면 캔버스가
     카드만큼 자라고 페이지도 따라 자란다(카드 높이를 아무도 몰라도 된다).
     static이 아니라 relative인 것은 닫기 단추(.map-detail-close) 때문이다. 그 단추는
     absolute라 기준이 될 조상이 필요한데, static으로 두면 캔버스를 기준으로 삼아
     지도 위로 올라가 버린다. */
  .map-detail-page .map-detail-card {
    position: relative;
    /* ≥641의 bottom: 40px · right: 40px이 relative에서는 카드를 통째로 밀어 버린다. */
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 32px 32px 0 0;
    box-shadow: none;
  }

  .map-detail-page .map-workspace {
    /* 높이는 캔버스(지도 자리 + 시트)가 정한다. 위 .map-detail-card 주석 참고. */
    min-height: 0;
    background: #fff;
  }

  .map-detail-page .map-sidebar {
    display: none;
  }

  .map-detail-page .map-canvas-large {
    /* 지도가 보이는 자리는 448px이고 그 아래부터 시트다. padding은 배경 자리도
       absolute 마커의 기준점(패딩 상자 윗변)도 건드리지 않는다. */
    min-height: 0;
    padding-top: 448px;
    background-position: -602px -302px;
    background-size: 1599px 921px;
  }

  /* 상세에서는 고른 마커 하나만 확대된 지도의 정해진 자리에 둔다. 전에는 pin-1로 못박아
     2~10번을 고르면 마커가 아예 없었다(has-selection 규칙이 비활성 pin-1도 숨긴다).
     고른 마커(.is-active)를 기준으로 바꿔 어느 번호를 골라도 그 마커가 남는다. */
  .map-detail-page .map-canvas-large .map-pin:not(.is-active) {
    display: none;
  }

  .map-detail-page .map-canvas-large .map-pin.is-active {
    top: 149px;
    left: 212px;
  }

  .map-detail-page .map-filter-chips button {
    min-height: 40px;
    font-size: 17px;
  }

  .map-detail-page .map-detail-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 50%;
    width: 80px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #fff;
  }

  .map-detail-page .map-detail-close {
    top: 24px;
    right: 24px;
    width: 28px;
    height: 28px;
    font-size: 22px;
  }

  /* base의 .map-detail-thumb가 width: 400px으로 박혀 있어(구간 밖 규칙이라
     여기까지 내려온다) 카드(360px)를 40px 넘쳤다. auto로 풀어 카드 폭을
     그대로 따르게 한다(360px으로 못박으면 그보다 좁은 화면에서 다시 넘친다). */
  .map-detail-page .map-detail-thumb {
    position: relative;
    min-height: 234px;
    background:
      radial-gradient(circle at 50% 50%, #e9e9eb 0 40px, transparent 41px),
      linear-gradient(145deg, #c9c9cc 0%, #eeeeef 48%, #f4f4f5 100%);
    width: auto;
  }

  .map-detail-page .map-detail-thumb::before {
    width: 80px;
    height: 80px;
    background: #e9e9eb;
  }

  /* transform은 적지 않는다. base의 translate(-50%, -50%)가 그대로 살아서
     top/left 50%와 맞물려 가운데에 놓인다. */
  .map-detail-page .map-detail-thumb::after {
    content: "▦";
    position: absolute;
    top: 50%;
    left: 50%;
    color: #c9c9cc;
    font-size: 30px;
    line-height: 1;
  }

  .map-detail-page .map-detail-copy {
    height: auto;
    padding: 32px 32px 40px;
  }

  .map-detail-page .map-detail-copy h2 {
    margin-top: 20px;
    font-size: 25px;
    line-height: 1.5;
  }

  .map-detail-page .map-detail-copy dl {
    gap: 16px;
    margin: 24px 0 32px;
  }

  .map-detail-page .map-detail-copy dl div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .map-detail-page .map-detail-copy dt {
    position: relative;
    padding-left: 32px;
    color: #09090b;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.5;
  }

  .map-detail-page .map-detail-copy dd {
    color: #09090b;
    font-size: 17px;
    line-height: 1.5;
  }

  .map-detail-page .map-detail-copy .map-card-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 0;
  }

  .map-detail-page .map-detail-copy .btn-primary {
    order: -1;
  }

  .map-detail-page .map-detail-copy .btn-ghost {
    order: 0;
  }

  .map-detail-page .map-detail-copy .btn {
    min-height: 56px;
    border-radius: 12px;
    font-size: 19px;
  }

  .modal-detail-page {
    min-height: 2652px;
  }

  .modal-detail-page .page-main {
    min-height: 1980px;
    padding-block: 64px;
  }

  .detail-modal {
    top: 64px;
    width: calc(100% - 32px);
    border-radius: 12px;
    padding: 0 16px 24px;
  }

  .detail-modal-head {
    min-height: 64px;
    border-bottom-width: 1px;
  }

  .detail-modal-head a {
    width: 32px;
    height: 32px;
    font-size: 20px;
  }

  .detail-modal-body section {
    padding: 32px 0;
  }

  /* 모바일은 선 위아래 32px씩. 앞 섹션에 padding-bottom 32px이 이미 있어
     margin은 필요 없고, base의 64px 두 값만 되돌린다.
     (section + section이 위 .detail-modal-body section보다 명시도가 높아
      padding-top을 여기서 다시 잡지 않으면 base의 64px이 그대로 이긴다.) */
  .detail-modal-body section + section {
    margin-top: 0;
    padding-top: 32px;
  }

  .detail-modal-body h3 {
    margin-bottom: 40px;
  }

  .detail-modal-grid {
    gap: 12px;
  }

  .detail-modal-grid label {
    grid-template-columns: 1fr;
    gap: 8px;
    font-size: 12px;
  }

  .detail-modal-grid input {
    min-height: 44px;
    padding-inline: 16px;
    font-size: 12px;
  }

  .detail-modal-body textarea {
    min-height: 168px;
    padding: 16px;
    font-size: 12px;
  }

  .detail-modal-actions {
    padding-top: 24px;
    margin-bottom: 40px;
  }

  .btn-danger {
    min-height: 44px;
    padding-inline: 18px;
    font-size: 13px;
    width: 100%;
  }

  /* 모바일 헤더 높이. 위 1024 구간의 80px을 여기서 한 번에 낮춘다.
     페이지별로 이 값을 다시 선언하지 말 것. */
  :root {
    --header-height: 60px;
  }

  .site-header .container,
  .mega-inner.container,
  .hero-panel.container,
  .quick-filter.container,
  .page-visual-inner.container {
    width: calc(100% - 28px);
  }

  .hero-panel.container {
    min-height: 540px;
    padding: 54px 24px 138px;
    border-radius: 56px 0 32px 32px;
    background-position: 60% center;
  }

  .quick-filter.container {
    grid-template-columns: 1fr;
    margin-top: -96px;
    padding-inline: 0;
  }

  .quick-filter label,
  .quick-submit {
    min-height: auto;
    border-radius: 24px;
  }

  .quick-select-row {
    grid-template-columns: 1fr;
  }

  .help-box {
    min-height: 0;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 0;
  }

  .map-preview-band {
    margin-top: 70px;
    padding: 92px 0 70px;
  }

  .mini-map {
    min-height: 360px;
  }

  .news-layout {
    grid-template-columns: 1fr;
  }

  /* 모바일 배너 여백은 페이지를 가리지 않고 좌우 20px + 하단 32px로 통일한다.
     페이지마다 흩어져 있던 동일 선언(facility-service·join 계열·find 계열·
     mypage·목록형·reservation-complete·auth/document/sitemap)을 대신하므로,
     페이지별 규칙에서 이 값을 다시 선언하지 말 것. */
  .page-visual {
    padding: 0 20px 32px;
  }

  /* 게시판(공지사항·채용소식)은 ≤1024 블록의 `.board-page .page-visual`이
     하단 0이고 선택자가 더 구체적이라 위 공통 규칙을 이긴다. 모바일에서만 맞춘다. */
  .board-page .page-visual {
    padding: 0 20px 32px;
  }

  /* PDA는 A그룹 공통 배너를 쓰도록 ≤1024 규칙을 지웠으므로, 모바일 값은 여기서 유지한다. */
  .board-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 24px;
  }

  /* 모바일 배너 공통. 배너 원본(page-header-smart-intro.png, 1840x360)은 왼쪽 대부분이
     단색 초록이고 아이들이 오른쪽에만 있어, 좁은 박스에서 그대로 깔면 초록 여백만 남는다.
     확대(126%)한 뒤 오른쪽 위(92% 20%)를 기준으로 잘라 아이들이 화면을 채우게 하고,
     첫 레이어로 초록 오버레이를 얹는다. 페이지별 규칙에서 이 값을 덮지 말 것. */
  .page-visual-inner.container {
    width: 100%;
    min-height: 220px;
    border-radius: 0 0 32px 32px;
    background-image:
      linear-gradient(rgba(110, 186, 44, 0.7), rgba(110, 186, 44, 0.7)),
      url("../images/ui/page-header-smart-intro.png");
    background-position: center, 92% 20%;
    background-size: cover, auto 126%;
  }

  /* 배너 override가 없어 풀폭 generic을 쓰던 페이지들(로그인·문서·사이트맵)을
     다른 페이지와 동일하게 좌우 20px 여백 + 전체 라운드(32px) + 200px로 맞춘다.
     배경(오버레이·crop)은 공통 규칙 그대로 두고 박스 형태만 맞춘다. */
  .auth-page .page-visual-inner.container,
  .document-page .page-visual-inner.container,
  .sitemap-page .page-visual-inner.container,
  .search-page .page-visual-inner.container {
    min-height: 200px;
    border-radius: 32px;
  }

  /* font-size는 지정하지 않는다: generic `.page-visual h1`(32px)로 충분하고,
     join-page의 `h1{font-size:0}`(텍스트 숨김+::after로 대체)를 덮어써 제목이 중복되던 문제 방지 */
  .auth-page .page-visual h1,
  .document-page .page-visual h1,
  .sitemap-page .page-visual h1,
  .search-page .page-visual h1 {
    max-width: 280px;
    line-height: 1.5;
  }

  /* 모바일 본문 여백은 페이지를 가리지 않고 64px로 통일한다.
     데스크톱 기본값(120/160)과 페이지별로 흩어져 있던 값(96/58, 74/70, 52, 40,
     20 …)을 대신한다. 목록형 전체폭 페이지(life-list·program-list·
     program-detail)만 내부 섹션이 여백을 직접 갖는 padding:0 레이아웃이라
     예외이며, 각자의 규칙이 우선순위로 이 규칙을 덮는다. */
  .page-main {
    padding-block: 64px;
  }

  /* 게시판(공지사항·채용소식)은 ≤1024 블록에 96px 계열 값이 있고 선택자가
     더 구체적이라 위 공통 규칙을 이긴다. 모바일에서만 다시 맞춘다. */
  .board-list-page .page-main,
  .board-detail-page .page-main {
    padding-block: 64px;
  }

  /* 모바일 페이지 타이틀은 32px. 사이트맵만 모바일 규칙이 없어 데스크톱
     기본값(pages.css의 44px)을 그대로 쓰고 있었다. */
  .sitemap-title {
    margin-bottom: 24px;
    font-size: 32px;
  }

  /* 사이트맵 모바일: 배너 자리를 전체메뉴와 같은 로그인·KR 줄로 바꾼다.
     .page-visual-inner은 사이트맵 페이지에 두 벌(전체메뉴 오버레이 + 본문) 있고
     둘 다 같은 화면이라 함께 맞춘다. */
  /* 구분선(10px 띠)은 화면 좌우 끝까지 가야 한다. 원래 .gnb-mobile-actions에
     걸려 있는데 그 상자가 좌우 20px 안쪽이라 띠도 20px씩 떠 있었다.
     좌우 여백이 padding인 .page-visual로 옮기면 테두리가 padding 바깥,
     즉 화면 끝에서 끝까지 그려진다. */
  .sitemap-page .page-visual {
    padding: 0 20px;
    border-bottom: 10px solid #f4f4f5;
  }

  .sitemap-page .page-visual .gnb-mobile-actions {
    border-bottom: 0;
  }

  /* 배너 상자를 껍데기만 남긴다. 배경 그림·초록 오버레이·라운드·최소 높이가
     모두 .page-visual-inner.container에 걸려 있어 여기서 되돌린다. */
  .sitemap-page .page-visual-inner.container {
    width: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  /* 배너 안 글자와 본문 제목. 시안에는 둘 다 없고 버튼 줄이 그 자리를 대신한다. */
  .sitemap-page .page-visual .breadcrumbs,
  .sitemap-page .page-visual h1,
  .sitemap-page .sitemap-title {
    display: none;
  }

  /* 전체메뉴에서 쓰던 모양 그대로. 아래 10px 띠가 시안의 구분선이다.
     .utility-link는 responsive.css가 ≤1024에서 감추므로 여기서 다시 띄운다.
     width: 100%는 .page-visual-inner이 flex라서 필요하다. 없으면 버튼 줄이
     내용 폭(90px)으로 줄어 가운데에 몰린다. */
  .sitemap-page .page-visual .gnb-mobile-actions {
    display: grid;
    width: 100%;
  }

  /* .login-pill은 layout.css에서 width: 90px로 박혀 있어 칸을 채우지 않는다.
     auto로 풀어야 grid 칸 폭을 그대로 쓴다(KR은 폭 지정이 없어 이미 채운다). */
  .sitemap-page .page-visual .gnb-mobile-actions .login-pill {
    width: auto;
  }

  /* 버튼 줄 바로 아래에서 본문이 시작한다. 배너를 걷어낸 만큼 위 여백을 줄인다. */
  .sitemap-page .page-main {
    padding-top: 24px;
  }

  /* 게시판 제목은 ≤1024 블록에서 44px(PDA·PC 공통값)이다.
     모바일만 다른 페이지 타이틀과 같은 32px로 되돌린다. */
  .board-list-head h2,
  .board-section-title {
    font-size: 32px;
  }

  /* 첨부 아이콘 자리를 행 기준 절대배치로 잡는다.

     grid-row/column을 함께 푸는 게 핵심이다. 그리드 배치가 남아 있으면 절대배치
     기준이 행이 아니라 그 칸의 그리드 영역이 되어(공지 행은 1/4, 일반 행은 1/3로
     영역이 서로 다르다) 같은 bottom 값이 행마다 다른 자리에 찍힌다.
     실제로 그 상태에서 bottom: 90px을 주니 일반 행에서 아이콘이 행 위로 빠져나가
     윗 행 경계선에 걸쳤다. 기준을 행으로 통일하면 두 행 모두 안에 들어온다.

     td는 아이콘만 담는데 글줄 높이 때문에 아래에 7px이 남아 아이콘이 그만큼
     떠 있었다. line-height를 0으로 만들어 td 높이를 아이콘 높이와 같게 두면
     bottom 값이 곧 아이콘 위치가 된다. */
  .board-list-page .board-table tr {
    position: relative;
  }

  .board-list-page .board-table td:nth-child(6),
  .board-list-page .board-table tr:not(.notice-row) td:nth-child(6) {
    position: absolute;
    grid-row: auto;
    grid-column: auto;
    right: 15px;
    bottom: 90px;
    line-height: 0;
  }

  .content-section.container.sitemap-section {
    width: min(var(--container), calc(100% - 40px));
  }

  .privacy-intro {
    font-size: 17px;
  }

  .privacy-lead p {
    font-size: 15px;
  }

  .email-refusal h2,
  .rss-doc h2,
  .privacy-doc h2 {
    margin-bottom: 24px;
    font-size: 32px;
  }

  .email-refusal-lead {
    font-size: 17px;
  }

  .email-refusal-box p {
    font-size: 15px;
  }

  .rss-intro-box li {
    font-size: 15px;
  }

  /* 개인정보 문서 테이블: 라벨링/목차만 모바일 카드형으로 재구성
     (kv/detail 등 다른 privacy-table은 PC 그대로 두고 .table-wrap 가로 스크롤 유지) */
  .privacy-label-table,
  .privacy-toc-table {
    min-width: 0;
    width: 100%;
  }

  .privacy-label-table,
  .privacy-label-table > thead,
  .privacy-label-table > thead > tr,
  .privacy-label-table > tbody,
  .privacy-toc-table,
  .privacy-toc-table > thead,
  .privacy-toc-table > thead > tr,
  .privacy-toc-table > tbody,
  .privacy-toc-table > tbody > tr,
  .privacy-toc-table > tbody > tr > td {
    display: block;
    width: 100%;
  }

  table.privacy-label-table thead th,
  table.privacy-toc-table thead th {
    display: block;
    height: auto;
    padding: 16px 18px;
  }

  /* 라벨링: 2열 그리드(아이콘 위 · 텍스트 아래), 셀 사이 1px 라인 */
  .privacy-label-table > tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(113, 113, 123, 0.2);
    border-top: 1px solid rgba(113, 113, 123, 0.2);
    border-bottom: 1px solid rgba(113, 113, 123, 0.2);
  }

  .privacy-label-table > tbody > tr {
    display: contents;
  }

  table.privacy-label-table tbody td,
  table.privacy-label-table tbody td:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 150px;
    padding: 24px 12px;
    border: 0;
    background: #fff;
  }

  /* base의 셀 사이 border-right 무력화(그리드 라인은 gap으로 처리) */
  .privacy-label-table th:not(:last-child),
  .privacy-label-table td:not(:last-child),
  .privacy-toc-table th:not(:last-child),
  .privacy-toc-table td:not(:last-child) {
    border-right: 0;
  }

  .privacy-label-icon {
    width: 56px;
    height: 56px;
  }

  table.privacy-label-table tbody td span,
  table.privacy-label-table tbody td small {
    margin-top: 10px;
    font-size: 14px;
  }

  /* 목차: 단일 열 리스트 */
  table.privacy-toc-table tbody td {
    padding: 24px 18px;
    border: 0;
    border-bottom: 1px solid rgba(113, 113, 123, 0.2);
    text-align: left;
  }

  .privacy-toc ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .privacy-toc li {
    font-size: 15px;
  }

  /* 문서 소제목(h3): 잎 불릿을 제목 세로 중앙에, 태그 아이콘은 제목 아래 줄로 */
  .privacy-section h3 {
    display: flex;
    align-items: center;
    position: relative;
  }

  /* 태그 아이콘이 있는 h3(제1조)만 아래쪽 여백으로 태그 자리 확보 */
  .privacy-section h3:has(.privacy-section-tags) {
    padding-bottom: 60px;
  }

  .privacy-section-tags {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
  }

  .privacy-section-tags img {
    width: 44px;
    height: 44px;
  }

  /* 소제목/조항 인라인 아이콘은 텍스트 아래로 (제9조 소제목·clause 공통) */
  .privacy-subtitle-icon {
    display: block;
    margin-left: 0;
    margin-top: 12px;
  }

  /* 제11조 이전방침 목록: 버튼을 운영기간 텍스트 아래 줄로 */
  .privacy-version-list > li {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .privacy-version-list > li > span {
    flex-basis: 100%;
  }

  .privacy-version-list .privacy-btn {
    margin-left: 0;
    margin-top: 12px;
  }

  .login-method-icon {
    width: 80px;
    height: 80px;
  }

  .login-method {
    min-height: 154px;
    /* gap: 12px; */
    padding: 24px;
    border-radius: 28px;
  }

  /* .smart-intro-page 선택자를 함께 적는 이유: 위쪽 base의
     `.smart-intro-page .page-visual h1`(60px)이 구체성이 더 높아 공통 규칙을 이긴다. */
  .page-visual h1,
  .smart-intro-page .page-visual h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.02em;
  }

  /* 모바일에서는 배너에 breadcrumb을 노출하지 않는다. 페이지별로 따로 숨기지 말 것. */
  .breadcrumbs {
    display: none;
  }

  /* "돌봄서비스 신청·예약"은 한 줄에 287px이 드는데 공통 제한이 280px이라 7px이
     모자라 두 줄로 끊겼다. 글자 크기는 다른 페이지와 같은 32px인데도 줄이 짧아져
     혼자 작아 보였다. 배너 안쪽이 305px이라 제한만 풀면 한 줄에 들어간다.
     .life-list-page .page-visual h1(280px)을 덮으려고 규칙은 남겨 둔다. */
  .care-reservation-page .page-visual h1,
  .reservation-form-page .page-visual h1 {
    max-width: none;
    margin-inline: auto;
  }

}

@media (max-width: 1024px) {
  body.home-page .site-header {
    height: var(--header-height);
  }

  body.home-page .site-header .container,
  body.home-page .program-strip.container,
  body.home-page .news-layout.container,
  body.home-page .map-preview-band .container {
    width: calc(100% - 80px);
  }

  body.home-page .top-button {
    display: none;
  }

  /* 히어로(사진·글·탭·빠른 예약) 반응형은 파일 끝 "합친 히어로 반응형"에 모아 두었다.
     예전에는 여기서 따로 놓인 카드(.hero-panel.container)와 잘라 쓰던 사진을 다뤘는데,
     원고가 바뀌어 사진이 화면을 꽉 채우게 되면서 그 규칙은 모두 걷어냈다. */

  body.home-page .hero-panel .carousel-controls {
    gap: 12px;
    font-size: 17px;
  }

  .home-news {
    padding: 80px 0 100px;
    background: #eef7ff;
  }

  .home-news .news-layout > div > .section-heading h2::after {
    display: none;
  }

  body.home-page .home-news .news-layout > div > .section-heading.inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-top: 0;
  }

  body.home-page .home-news .news-layout > div > .section-heading.inline .news-tabs {
    display: flex;
    width: 100%;
    align-items: center;
  }

  body.home-page .home-news .news-layout > div > .section-heading.inline .news-tabs-extra {
    margin-left: auto;
  }

  body.home-page .home-news .popup-zone .section-heading.inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-top: 100px;
  }

  body.home-page .home-news .popup-zone .section-heading.inline .popup-controls {
    width: 100%;
  }

  body.home-page .btn-white {
    min-height: 48px;
    padding: 0 16px;
    font-size: 17px;
    font-weight: 400;
  }

  body.home-page .carousel-controls button,
  body.home-page .carousel-nav {
    width: 40px;
    height: 40px;
  }

  body.home-page .quick-filter.container {
    display: none;
  }

  body.home-page .frequent-section.container {
    grid-template-columns: 1fr;
    gap: 80px;
    margin-top: 0;
    padding-top: 0;
  }

  body.home-page .help-box {
    width: 100%;
    max-width: none;
    display: grid;
    min-height: 262px;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    padding: 32px 24px;
  }

  body.home-page .help-box h2,
  body.home-page .help-box strong,
  body.home-page .help-box p {
    margin: 0;
  }

  body.home-page .help-box h2 {
    font-size: 25px;
    line-height: 1.2;
  }

  body.home-page .help-box strong {
    align-self: start;
    width: 300px;
    padding: 20px 24px;
    font-size: 28px;
  }

  body.home-page .help-box p {
    grid-column: 1 / -1;
  }

  body.home-page .section-heading {
    margin-bottom: 32px;
  }

  body.home-page .section-heading.inline {
    align-items: center;
    flex-direction: row;
  }

  body.home-page .section-heading h2 {
    font-size: 32px;
  }

  body.home-page .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  body.home-page .service-card {
    min-height: 284px;
    width: auto;
  }

  #frequentTitle::after {
    display: none;
  }

  /* PC는 상자가 이미지 원본(208x169)과 거의 같아 통째로 보이지만, 여기서는 상자가
     넓어져 cover가 가로에 맞추느라 아래가 100px 넘게 잘린다. 위 여백만 남고 인물이
     아래로 처져 보여서 이미지를 조금 끌어올린다.
     %로 잡아 남는 양의 20%만큼 올린다(768에서 약 20px). 1024까지 카드가 넓어져도
     같은 비율로 따라가 프레이밍이 유지된다. */
  body.home-page .card-media {
    height: 160px;
    background-position: center 20%;
  }

  body.home-page .map-preview-band {
    padding: 72px 0 80px;
    background-color: transparent;
    background-image:
      url("../images/ui/map-band-bg.png"),
      linear-gradient(#fcf8ec, #fcf8ec);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: 100% auto, 100% calc(100% - 120px);
  }

  body.home-page .map-preview {
    grid-template-columns: 1fr;
    overflow: visible;
    border-radius: 32px;
  }

  /* height까지 적는 이유. PC는 옆 패널이 늘려 줘서 높이가 확정되지만 여기서는
     min-height뿐이라 확정 높이가 아니고, 그러면 지도 겹이 쓰는 100cqh가 0이 된다
     (겹이 상자를 못 덮어 모서리에 바탕색이 드러난다). */
  body.home-page .mini-map {
    height: 573px;
    min-height: 573px;
    border-radius: 32px 32px 0 0;
  }

  body.home-page .home-map-panel {
    display: grid;
    align-content: start;
    overflow: hidden;
    border-radius: 0 0 32px 32px;
  }

  body.home-page .home-map-chips {
    display: flex;
    min-height: 96px;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
  }

  body.home-page .home-map-chips button {
    min-height: 48px;
    border: 1px solid rgba(113, 113, 123, 0.15);
    border-radius: 999px;
    background: #fff;
    padding: 0 20px;
    color: #09090b;
    font-size: 17px;
  }

  body.home-page .home-map-chips .is-active {
    border-color: #27272a;
  }

  /* 검색창은 지도 패널 폭을 채운다(좌우 여백 32px만 남김). 449px 고정이던 때는
     패널이 넓은 구간에서 오른쪽이 비어 보였다. */
  body.home-page .home-map-search {
    position: relative;
    display: block;
    width: auto;
    /* 오른쪽은 56px: 검색 버튼이 입력창 밖으로 24px 나와 있어(right: -24px)
       그만큼 더 비워야 버튼이 왼쪽 여백과 같은 32px 안쪽에 놓인다. */
    margin: 24px 56px 0 32px;
  }

  body.home-page .home-map-search input {
    width: 100%;
    height: 56px;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    padding: 0 58px 0 24px;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .home-map-search input::placeholder {
    color: rgba(9, 9, 11, 0.5);
  }

  body.home-page .home-map-search button {
    position: absolute;
    top: 50%;
    right: -24px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #27272a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-50%);
  }

  body.home-page .home-map-search button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ffffff;
    -webkit-mask: url("../images/ui/icon-search.png") center / 24px 24px no-repeat;
    mask: url("../images/ui/icon-search.png") center / 24px 24px no-repeat;
  }

  body.home-page .home-map-total {
    display: flex;
    min-height: 29px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 32px 32px 0;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .home-map-total strong {
    color: #6eba2c;
    font-family: "NPS_font", var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.home-page .home-map-total a,
  body.home-page .home-map-total button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    min-height: 26px;
    color: rgba(9, 9, 11, 0.75);
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .home-map-total .refresh-icon {
    width: 24px;
    height: 24px;
    transform: translateY(-2px);
  }

  /* align-content를 적는 이유. 목록은 높이가 404px로 정해져 있어 남는 자리를
     줄(row)에 나눠 준다. 카드가 셋일 때는 내용이 404px을 넘겨(스크롤) 티가 안
     나지만, 필터를 걸어 한 장만 남으면 그 한 줄이 404px까지 늘어나고 카드 안의
     제목·주소·전화 줄까지 따라 벌어져 카드가 찢어진 것처럼 보인다. */
  body.home-page .compact-list {
    display: grid;
    align-content: start;
    gap: 32px;
    height: 404px;
    max-height: none;
    margin: 32px 32px 0;
    overflow-y: auto;
    padding: 0 0 0 5px;
  }

  body.home-page .compact-list article {
    display: grid;
    position: relative;
    grid-template-columns: 40px minmax(0, 1fr) 111px;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    padding: 0;
  }

  body.home-page .home-map-number {
    grid-row: 1;
    align-self: start;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.home-page .compact-list h3 {
    display: flex;
    align-items: center;
    grid-column: 2;
    align-self: start;
    min-height: 40px;
    margin-bottom: 12px;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.home-page .compact-list p {
    grid-column: 2;
    align-self: start;
    margin-bottom: 20px;
    color: rgba(9, 9, 11, 0.75);
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .home-map-phone {
    grid-column: 2;
    align-self: start;
    margin-bottom: 32px;
    color: rgba(9, 9, 11, 0.75);
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .compact-list article:not(:last-child) {
    border-bottom: 1px solid rgba(113, 113, 123, 0.15);
  }

  body.home-page .compact-list .btn {
    grid-column: 3;
    align-self: start;
    width: 105px;
    height: 48px;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #6eba2c;
    color: #fff;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .compact-list article .btn-primary {
    grid-row: 1;
    margin-bottom: 12px;
  }

  body.home-page .compact-list article .btn-line {
    grid-row: 2;
  }

  body.home-page .compact-list .btn-line {
    border: 1px solid rgba(113, 113, 123, 0.22);
    background: #fff;
    color: #09090b;
  }

  /* 목록 아래 페이지네이션. 구분선을 패널 폭 끝까지 긋도록 여백 없이 붙이고,
     선 색은 항목 사이 구분선과 같은 것을 쓴다. .pagination이 기본으로 들고 있는
     margin-top(76px)은 여기서 쓰지 않는다. */
  body.home-page .home-map-pagination {
    display: flex;
    margin: 0;
    border-top: 1px solid rgba(113, 113, 123, 0.15);
    padding: 24px 0;
  }

  body.home-page .facility-stats {
    grid-template-columns: 1fr;
    height: 408px;
    margin-top: 40px;
  }

  body.home-page .facility-stats div {
    min-height: 102px;
    justify-content: space-between;
    padding: 32px 40px;
  }

  body.home-page .facility-stats div + div::before {
    top: 0;
    bottom: auto;
    left: 40px;
    right: 40px;
    width: auto;
    height: 1.5px;
    background-image: linear-gradient(to right, #e4e4e4 50%, transparent 50%);
    background-size: 12px 1.5px;
    background-repeat: repeat-x;
  }

  body.home-page .program-strip.container,
  body.home-page .news-layout {
    grid-template-columns: 1fr;
  }

  body.home-page .program-strip.container {
    align-content: start;
    padding-block: 80px;
  }

  body.home-page .program-feature {
    position: relative;
    display: block;
    min-height: 540px;
    overflow: hidden;
    border-radius: 140px 48px 48px 48px;
    background: url("../images/ui/program-art.jpg") center / cover no-repeat, #f4f4f5;
  }

  body.home-page .program-feature .carousel-nav {
    position: absolute;
    z-index: 2;
    bottom: 196px;
  }

  body.home-page .program-feature [data-carousel-prev] {
    left: 0;
  }

  body.home-page .program-feature [data-carousel-next] {
    left: 196px;
  }

  body.home-page .program-slide {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    min-height: 160px;
    border-radius: 0;
  }

  body.home-page .program-slide .status-badge {
    margin: 0;
  }

  body.home-page .program-slide .program-slide-date {
    flex-direction: column;
    align-items: flex-start;
  }

  body.home-page .program-slide .program-slide-date-range {
    white-space: nowrap;
  }

  body.home-page .program-strip .section-heading > p:first-of-type {
    width: fit-content;
    position: relative;
    margin-bottom: 0;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.018em;
  }

  body.home-page #homeProgramTitle {
    color: #dc4f5f;
    font-family: "NPS_font", var(--font-sans);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.018em;
  }

  body.home-page .program-strip .section-heading .section-heading-desc {
    margin-top: 24px;
    margin-bottom: 0;
    color: rgba(9, 9, 11, 0.5);
    font-family: "NPS_font", var(--font-sans);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
  }

  body.home-page .news-grid {
    grid-template-columns: 1fr;
  }

  body.home-page .home-news {
    min-height: 1946px;
  }

  body.home-page .news-card {
    min-height: 291px;
  }

  body.home-page .popup-slides {
    width: auto;
    height: 417px;
  }

  body.home-page .popup-banner {
    width: auto;
    height: 417px;
    min-height: 417px;
    border-radius: 40px;
  }

  /* 겹쳐 놓인 배너는 래퍼가 잡은 높이를 그대로 채운다. 위 규칙보다
     구체성이 높아야 height 417px를 덮으므로 .popup-slides를 앞에 붙인다. */
  body.home-page .popup-slides .popup-banner {
    height: auto;
    min-height: 0;
  }

  body.home-page .site-footer {
    min-height: 557px;
  }
}

/* PC 아래로는 제목 간격이 한 단계 좁다. 글자 사이 4px은 PDA·모바일이 같고,
   그림 쪽 16px은 PDA에만 해당한다(모바일은 별이 제목 위로 빠져 절대배치라
   아래 ≤640 블록에서 margin을 0으로 되돌린다. 오른쪽 그림은 숨는다). */
@media (max-width: 1024px) {
  body.home-page #homeMapTitle {
    gap: 4px;
  }

  body.home-page .map-title-icon {
    margin-right: 12px;
  }

  body.home-page .map-title-icon-right {
    margin-left: 12px;
  }
}

@media (max-width: 640px) {
  body.home-page .site-header .container,
  body.home-page .program-strip.container,
  body.home-page .news-layout.container,
  body.home-page .map-preview-band .container {
    width: calc(100% - 40px);
  }

  body.home-page .carousel-progress {
    gap: 4px;
  }

  body.home-page .carousel-bar {
    width: auto;
    height: auto;
    background: none;
  }

  /* 모바일에서는 바 대신 "01 / 04"의 구분 슬래시로 쓰므로, 폭을 0→100%로 채우는
     진행 애니메이션을 꺼야 한다. 켜두면 슬래시 글자가 눌린다. */
  body.home-page .carousel-bar::before {
    content: "/";
    position: static;
    width: auto;
    background: none;
    color: rgba(255, 255, 255, 0.6);
    animation: none;
  }

  body.home-page .section-heading .program-controls .carousel-bar::before {
    color: rgba(9, 9, 11, 0.6);
  }

  body.home-page .site-header {
    height: var(--header-height);
  }

  body.home-page .header-inner {
    min-height: var(--header-height);
  }

  body.home-page .logo-mark {
    width: 16px;
    height: 16px;
  }

  body.home-page .logo-city {
    font-size: 18px;
  }

  body.home-page .logo-service {
    font-size: 12px;
  }

  /* 모바일 히어로도 파일 끝 "합친 히어로 반응형"에서 한꺼번에 다룬다. 새 원고에는
     검색칸도 도트도 없고 최근 이용 시설·My 즐겨찾기 시설 두 알약이 그 자리에 선다.
     사진 자르기(left/top/%), 비율 카드, 가운데 정렬은 모두 옛 원고 값이라 걷어냈다. */

  body.home-page .frequent-section.container {
    gap: 16px;
    margin-bottom: 80px;
  }

  /* 새 시안은 자주찾는 서비스가 먼저, 도움말 상자가 그 뒤다. 마크업은 PC 기준으로
     도움말이 먼저라(왼쪽 칼럼) 여기서만 자리를 바꾼다. */
  body.home-page .frequent-section > .frequent-body {
    order: 1;
  }

  body.home-page .help-box {
    order: 2;
    width: 100%;
    max-width: none;
    display: block;
    min-height: 362px;
    padding: 32px 24px;
  }

  body.home-page .help-box h2 {
    margin-bottom: 24px;
    font-size: 28px;
    line-height: 1.35;
  }

  body.home-page .help-box strong {
    width: 100%;
    margin-bottom: 24px;
    padding: 16px 18px;
    font-size: 24px;
  }

  body.home-page .help-box p {
    padding-top: 20px;
  }

  body.home-page .section-heading h2 {
    font-size: 32px;
  }

  body.home-page .home-news .news-layout > div > .section-heading.inline {
    margin-bottom: 64px;
  }

  body.home-page .section-heading.inline {
    align-items: flex-start;
    flex-direction: column;
  }

  /* ── 자주찾는 서비스: 초록 상자 안의 알약 목록 ──────────────
     PC는 사진 카드 다섯 장이지만 모바일 시안은 제목과 카드가 초록 상자 하나로
     묶이고, 카드는 사진 없이 이름과 화살표만 남은 한 줄 상자가 된다. 상자가 되는 건
     제목+그리드를 이미 감싸고 있던 div이고, 요소를 더 넣는 대신 그 div에 클래스만
     붙였다(.frequent-body). 무클래스 `> div`로 잡아 두면 나중에 이 섹션에 div를
     하나만 더 넣어도 그쪽까지 초록 상자가 된다. */
  body.home-page .frequent-section > .frequent-body {
    padding: 32px 24px;
    border-radius: 32px;
    background: var(--color-green);
  }

  /* 상자 안에서는 제목이 흰색 한 색이다. 파란 강조("서비스")도 같이 흰색으로
     맞춘다. 최근 소식·운영 프로그램 제목까지 물들지 않게 상자 안으로 한정한다. */
  /* 제목이 25px로 작아지면서 줄상자가 4px 줄었다. 알약 목록이 시안 자리(446)에
     그대로 있도록 그만큼 아래 여백으로 옮긴다. */
  body.home-page .frequent-section > .frequent-body .section-heading {
    margin-bottom: 24px;
  }

  /* 시안 지정값: NPS Bold 25px / 150%. 서체·굵기는 기본 .section-heading h2가
     이미 NPS_font 700이라 크기와 줄높이만 다시 적는다(줄높이는 기본값과 같지만,
     공용 규칙이 바뀌어도 이 제목은 안 흔들리게 여기에 남긴다). */
  body.home-page .frequent-section > .frequent-body .section-heading h2,
  body.home-page .frequent-section > .frequent-body .section-heading h2 span {
    color: #fff;
    font-size: 25px;
    line-height: 1.5;
  }

  body.home-page .service-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* .service-grid를 한 단계 더 적는 이유가 있다. 파일 끝의
     html[lang="en"] .service-card { height:auto; min-height:284px }가 특이성 (0,2,1)로
     같고 파일에서 더 뒤라, body.home-page .service-card로만 적으면 영문 화면에서
     그 규칙이 이겨 한 줄 카드가 284px 빈 상자로 부푼다(다섯 장이면 목록이 1470px).
     PC의 사진 카드에는 그 규칙이 그대로 필요하므로 저쪽을 고치지 않고 여기를 올린다. */
  body.home-page .service-grid .service-card {
    display: flex;
    width: 100%;
    height: 52px;
    min-height: 0;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-radius: 16px;
    background: #fff;
  }

  /* PC 사진 카드의 hover 연출(16px 떠오름 + 그림자 + 어두운 테두리)을 모두 끈다.
     줄 간격이 12px이라 떠오르면 위아래 줄을 파고들고, 흰 줄에 어두운 테두리는
     너무 세다. 아래 배경색 한 가지로만 알린다. 테두리는 자리를 차지한 채(1.5px)
     투명으로만 두므로 상태가 바뀌어도 글자가 밀리지 않는다.
     키보드 초점은 이 프로젝트가 outline을 지운 적이 없어 브라우저 기본 초점
     테두리가 그대로 나온다. */
  body.home-page .service-card:hover,
  body.home-page .service-card:focus-within {
    transform: none;
    box-shadow: none;
    border-color: transparent;
  }

  /* 상태값은 이 파일 위쪽 "버튼 상태" 절의 관례를 그대로 따른다. 흰 면에는 검정을
     얹고, 알파 대신 합성한 결과값을 적는다(초록 상자 위라 반투명이면 뒤쪽 초록이
     비친다). #f4f4f5·#e9e9ea는 흰 배경 .btn이 이미 쓰는 값이다. */
  body.home-page .service-card {
    transition: background-color 0.2s ease;
  }

  body.home-page .service-card:hover {
    background: #f4f4f5;
  }

  body.home-page .service-card:active {
    background: #e9e9ea;
  }

  /* 아이콘은 원 바탕이 SVG 안에 있어 색을 따로 못 바꾼다. brightness는 곱셈이라
     검정을 얹는 것과 결과가 같으므로, 줄과 같은 폭으로 어둡게 한다
     (0.957·0.914는 흰색에 걸면 정확히 #f4f4f5·#e9e9ea가 되는 값이다). */
  body.home-page .service-card a {
    transition: filter 0.2s ease;
  }

  body.home-page .service-card a:hover {
    filter: brightness(0.957);
  }

  body.home-page .service-card a:active {
    filter: brightness(0.914);
  }

  body.home-page .service-card:nth-child(6) {
    display: none;
  }

  body.home-page .card-media {
    display: none;
  }

  /* 시안 지정값: NPS Bold 17px / 150%. 서체·굵기는 기본 .service-card h3가 이미
     NPS_font 700이라 크기·줄높이·정렬만 다시 적는다. */
  body.home-page .service-card h3 {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    color: var(--color-ink);
    font-size: 17px;
    line-height: 1.5;
    text-align: left;
  }

  /* "신청·예약" 링크가 32×32 아이콘 자리로 바뀐다. 원 바탕과 화살표가 한 파일에
     들어 있어 배경으로만 얹는다. 글자는 화면에서만 감추고(font-size:0) 마크업에
     남겨 둬, 링크 이름은 여전히 "신청·예약"이다. */
  body.home-page .service-card a {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    /* pages.css가 h3와 함께 걸어 둔 padding:0 18px을 지운다. border-box라 그대로
       두면 상자가 32px이 아니라 좌우 패딩 합(36px)으로 벌어진다. */
    margin: 0;
    padding: 0;
    background: url("../images/ui/service-link-arrow.svg") center / 32px 32px no-repeat;
    font-size: 0;
  }

  body.home-page .map-preview-band {
    margin-top: 0;
    padding: 64px 0 80px;
  }

  body.home-page .map-title-icon-right {
    display: none;
  }

  body.home-page .map-preview-band .section-heading {
    position: relative;
  }

  /* 여기서는 별이 제목 옆이 아니라 위로 빠져 절대배치라, 기본값의 margin-right가
     남아 있으면 right(20px)에 10px이 더해져 그만큼 왼쪽으로 밀린다. */
  body.home-page .map-title-icon {
    position: absolute;
    right: 20px;
    bottom: calc(100% + 20px);
    width: 40px;
    height: 40px;
    margin: 0;
  }

  body.home-page #homeMapTitle {
    margin-bottom: 34px;
  }

  /* height를 함께 적는 까닭은 ≤1024 블록의 설명과 같다(100cqh가 0이 되는 것을 막는다). */
  body.home-page .mini-map {
    height: 400px;
    min-height: 400px;
  }

  body.home-page .home-map-panel {
    height: 780px;
    min-height: 0;
    overflow: hidden;
  }

  body.home-page .home-map-chips {
    min-height: 96px;
    padding: 24px;
  }

  body.home-page .home-map-chips button {
    padding: 0 16px;
    font-size: 15px;
  }

  body.home-page .home-map-search,
  body.home-page .home-map-total {
    margin-right: 24px;
    margin-left: 24px;
  }

  body.home-page .home-map-panel {
    grid-template-columns: minmax(0, 1fr);
    /* 칩·검색·총계·목록·페이지네이션 다섯 줄. 목록만 남는 자리를 먹는다. */
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }

  /* PDA는 패널이 넓어 1~7쪽을 다 펼치지만 여기서는 자리가 없다. 뒤쪽 링크를 숨겨
     1~3쪽만 남긴다(첫 자식은 이전 화살표, 마지막 자식은 다음 화살표라 빼고 센다).
     한 번에 넘기는 쪽수도 site.js가 보이는 링크를 다시 재서 3쪽으로 맞춘다. */
  body.home-page .home-map-pagination a:nth-child(n+5):not(:last-child) {
    display: none;
  }

  body.home-page .home-map-search {
    width: auto;
  }

  body.home-page .home-map-search input {
    width: 100%;
    min-width: 0;
  }

  body.home-page .home-map-search button {
    right: -4px;
  }

  body.home-page .compact-list {
    height: auto;
    min-height: 0;
    margin: 32px 24px 0;
    padding: 0;
  }

  body.home-page .compact-list article {
    display: block;
    position: relative;
    padding: 0;
  }

  body.home-page .compact-list article:nth-child(3) {
    min-height: 280px;
  }

  body.home-page .home-map-number {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
  }

  body.home-page .compact-list h3 {
    align-items: normal;
    margin-left: 48px;
    color: #09090b;
    font-size: 21px;
    line-height: 1.5;
  }

  body.home-page .compact-list p {
    margin: 0 0 0 48px;
    color: rgba(9, 9, 11, 0.75);
    font-size: 17px;
    line-height: 1.5;
  }

  body.home-page .home-map-phone {
    display: block;
    margin: 20px 0 0 48px;
    color: rgba(9, 9, 11, 0.75);
    font-size: 17px;
    line-height: 1.5;
  }

  body.home-page .compact-list .btn {
    width: 100%;
    min-height: 56px;
    margin-top: 24px;
    border-radius: 8px;
    font-size: 19px;
  }

  body.home-page .compact-list .btn + .btn {
    margin-top: 0;
    margin-bottom: 32px;
  }

  body.home-page .facility-stats div {
    min-height: 158px;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    padding: 30px 40px;
  }

  body.home-page .facility-stats dd {
    justify-content: flex-end;
  }

  body.home-page .facility-stats div + div::before {
    left: 0;
    right: 0;
    width: auto;
  }

  body.home-page .facility-stats {
    height: 632px;
  }

  body.home-page .program-strip.container {
    position: relative;
    padding-block: 80px;
  }

  /* PDA와 동일하게 기준을 섹션으로 넘긴다. 점선 장식 ::after는 1025 이상에서만
     선언되므로 여기서는 아예 없다. */
  body.home-page .program-strip .section-heading > p:first-of-type {
    position: static;
  }

  body.home-page .program-strip .section-heading > p:first-of-type,
  body.home-page #homeProgramTitle {
    font-size: 32px;
  }

  body.home-page .program-strip .program-heading-graphic {
    position: absolute;
    top: 40px;
    right: 0;
    width: 67.82px;
    height: 80px;
  }

  .br-mobile {
    display: inline;
  }

  body.home-page .section-heading .program-controls {
    margin-top: 64px;
  }

  body.home-page .section-heading .program-controls .carousel-bar {
    background: none;
  }

  body.home-page .section-heading .program-controls .carousel-bar::before {
    background: none;
  }

  body.home-page .program-feature {
    position: relative;
    display: block;
    min-height: 540px;
    overflow: hidden;
    border-radius: 70px 24px 24px 24px;
    background: url("../images/ui/program-art.jpg") center / cover no-repeat, #f4f4f5;
  }

  body.home-page .program-feature .carousel-nav {
    display: none;
  }

  body.home-page .program-slide {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 220px;
    padding: 28px 24px;
    border-radius: 0;
  }

  body.home-page .home-news {
    min-height: 1723px;
    padding: 80px 0 0;
  }

  body.home-page .news-card {
    min-height: 291px;
  }

  body.home-page .popup-slides {
    width: auto;
    height: auto;
    min-height: 194px;
    margin-bottom: 100px;
  }

  body.home-page .popup-banner {
    height: auto;
    min-height: 194px;
    margin-bottom: 100px;
    border-radius: 24px;
  }

  /* 배너가 absolute라 min-height를 들고 있어도 래퍼 높이를 밀어내지 못한다.
     여백·높이는 래퍼가 맡고 배너는 그 자리를 채우기만 한다. */
  body.home-page .popup-slides .popup-banner {
    min-height: 0;
    margin-bottom: 0;
  }

  body.home-page .popup-banner strong {
    font-size: 54px;
  }

  body.home-page .site-footer {
    min-height: 572px;
  }

  /* ── 하단 고정 바 ──────────────────────────────────────────
     모바일에만 나오는 바로가기 두 칸. 메인에서 시작했지만 전 페이지가 쓰므로
     선택자를 body.home-page로 묶지 않는다(클래스 이름도 .site-*다).
     뷰포트 기준 fixed라 스크롤 내내 붙어 있고, 마크업은 푸터 밖(<body> 끝)에
     둔다. 푸터의 clip-path가 fixed 자손까지 잘라 안에 두면 화면에서 사라진다
     (관련 사이트 목록과 같은 사정).
     z-index는 이 프로젝트의 층 순서(관련 사이트 목록 60 · TOP 70 · 검색 80 ·
     헤더 90 · 오버레이 130)에서 본문 위, 그 모두의 아래인 50을 쓴다. 특히 관련
     사이트 목록보다 아래여야 푸터에서 목록을 펼쳤을 때 바가 덮지 않는다. */
  .site-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: var(--cta-bar-height);
    gap: 1px;
  }

  /* 두 칸이 1px 틈을 두고 각자 위 모서리만 둥글다. 가운데에 시안과 같은 V자 홈이 생긴다.
     text-align이 따로 필요하다. justify-content는 글자를 담은 익명 상자를 가운데
     두는 것뿐인데, 글이 한 줄에 안 들어가면 그 상자가 칸 폭을 다 써서 가운데 정렬이
     아무 일도 하지 않는다. 그러면 두 줄 모두 왼쪽에 붙는다(영문 "Frequently used
     services"가 그렇다. 한국어는 한 줄에 들어가 안 보였다). */
  .site-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px 24px 0 0;
    text-align: center;
    color: #fff;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    transition: background-color 0.2s ease;
  }

  .site-cta-quick {
    background: var(--color-green);
  }

  /* 초록은 .btn-primary가 이미 쓰는 단계(#61a327·#569122)를 그대로 가져오고,
     파랑은 같은 비율(0.88·0.78)로 내린 값이다. */
  .site-cta-quick:hover {
    background: #61a327;
  }

  .site-cta-quick:active {
    background: #569122;
  }

  .site-cta-frequent {
    background: var(--color-blue);
  }

  .site-cta-frequent:hover {
    background: #2d70b8;
  }

  .site-cta-frequent:active {
    background: #2863a3;
  }

  /* 바가 푸터 마지막 줄을 덮지 않게 바 높이만큼 문서 아래를 띄운다. 두 값이
     엇갈리지 않도록 같은 토큰을 본다. */
  body {
    padding-bottom: var(--cta-bar-height);
  }
}

@media (max-width: 1024px) {
  /* 칸을 1fr로 못박는다. base의 가로 배치용 justify-content: space-between이
     grid에서도 살아 있어서, 칸이 폭을 채우지 않고 내용 폭(= h2 "공지사항" 295px)에
     맞춰졌다. 그 탓에 아래 .content-toolbar의 width: 100%도 295px 기준이 되어
     검색 줄이 728px 자리에서 295px만 쓰고 있었다. */
  .board-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  .board-list-head .content-toolbar {
    width: 100%;
    min-width: 0;
  }

  .board-list-head .search-field input {
    min-width: 0;
  }

  .board-list-page .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    padding-left: 0px;
  }

  .board-list-page .board-table {
    width: 100%;
    min-width: 0;
  }

  .depth-three {
    right: 24px;
    left: auto;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  /* PDA는 PC 기본값(40px 0)을 그대로 쓰고 있어 상하 여백이 어긋난다.
     ≤640과 같은 64px로 맞춘다. (PC ≥1025는 140px/183px 그대로) */
  .facility-service-page .page-main {
    padding-block: 140px 160px;
  }

  /* 시설 소개 카드: 지역아동센터와 달리 PDA 대응이 없어 PC의 2단(642px+654px,
     1520px 기준)을 그대로 써서 각 칸이 177~369px로 눌렸다.
     - 글상자가 좁아 메타 값 칸이 92px가 되고 주소 4줄·운영시간 5줄로 깨짐
     - 이미지는 높이 393px 고정이라 폭 177px에서 비율 0.45의 세로 슬라이버
     1단으로 쌓고 이미지는 고정 높이 대신 비율로 잡는다. */
  .facility-service-page:not(.child-center-page) .facility-service-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 32px;
    border-radius: 32px 64px 32px 32px;
  }

  .facility-service-page:not(.child-center-page) .facility-service-image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  /* 1단으로 쌓으면 캐러셀(01/04)이 자기가 넘기는 이미지보다 위에 오게 된다.
     ≤640과 같은 방식으로 copy를 contents로 펼쳐 캐러셀·갤러리를 같은 그리드
     아이템으로 만든 뒤, 갤러리(이미지) → 캐러셀 순으로 돌린다. */
  .facility-service-page:not(.child-center-page) .facility-service-copy {
    display: contents;
  }

  .facility-service-page:not(.child-center-page) .facility-service-carousel {
    order: 1;
  }

  /* 순서를 바꿨으니 위 여백(40px)도 따라가야 한다. PC에서는 캐러셀이 글 아래
     마지막이라 캐러셀에 붙어 있었지만, PDA에서는 갤러리(이미지)가 그 자리다. */
  .facility-service-page:not(.child-center-page) .facility-service-copy > .facility-service-carousel {
    margin-top: 0;
  }

  .facility-service-page:not(.child-center-page) .facility-service-gallery {
    margin-top: 40px;
  }

  /* 하단 액션: PC는 [1fr 118px 275px 164px] 고정이라 카드가 좁아지면
     첫 칸(관련 문의)이 0px로 붕괴해 문의 텍스트가 버튼 위로 겹친다(641).
     문의를 버튼 줄 위로 분리한다.

     버튼 세 개는 폭을 똑같이 나눈다. 전에는 118px / 남는 자리 / 164px이라
     가운데 "My 즐겨찾기 시설에 추가"만 혼자 넓었다(768에서 118·399·164). */
  .facility-service-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .facility-service-actions p {
    grid-column: 1 / -1;
  }

  .child-center-page .facility-service-card {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
    /* PC의 max-height:338px가 남아 있어 1단으로 쌓인 갤러리가 카드 높이를 넘겨
       카드 밖으로 215px 흘러나오고 아래 .child-service-groups를 덮었다(641에서 34px).
       min-height와 함께 높이 고정을 푼다. */
    max-height: none;
    padding: 32px;
    border-radius: 32px 64px 32px 32px;
  }

  .child-center-page .facility-service-copy {
    width: 100%;
    min-height: 0;
    gap: 24px;
  }

  .child-center-card-control {
    display: none;
  }

  .child-center-page .facility-service-gallery {
    position: static;
    width: 100%;
    gap: 16px;
  }

  .child-center-page .facility-service-image {
    min-height: 320px;
  }

  .child-center-mobile-carousel {
    display: grid;
  }

  /* 서비스 묶음은 모바일처럼 한 줄에 하나씩 쌓는다. 4단을 유지하면 한 칸이 161px
     밖에 안 돼 "안전한 / 보호"처럼 낱말이 쪼개져 내려간다.

     위 여백 142px은 PC에서 카드 밖으로 흘러나오는 갤러리를 피하려고 둔 값이다.
     여기서는 카드가 1단으로 다시 짜여 흘러나오지 않으므로 뺀다. */
  .child-service-groups {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  /* 4단일 때 네 칸의 키를 맞추던 최소 높이다. 한 줄에 하나씩 쌓으면 항목이 두
     개뿐인 묶음 아래로 빈 회색 칸이 남는다. */
  .child-service-block ul {
    min-height: 0;
  }

  .mypage-facility-list-page .mypage-content {
    justify-items: stretch;
    padding: 32px;
  }

  /* 칸을 1fr로 못박는다. base(.section-heading.inline)의 가로 배치용
     justify-content: space-between이 grid에서도 살아 있어서, 칸이 폭을 채우지 않고
     내용 폭(316px)으로 잡혔다. 그 탓에 아래 .content-toolbar의 width: 100%도
     316px 기준이 되어 검색 바가 662px 자리에서 316px만 쓰고 있었다. */
  .mypage-facility-list-page .mypage-facility-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-height: 0;
    gap: 24px;
    margin: 0;
  }

  .mypage-facility-list-page .mypage-facility-heading h2 {
    width: 100%;
    font-size: 25px;
    line-height: 1.5;
  }

  .mypage-facility-list-page .mypage-facility-heading .content-toolbar,
  .mypage-facility-list-page .mypage-facility-heading .search-field {
    width: 100%;
    min-width: 0;
  }

  .mypage-facility-list-page .mypage-facility-heading .content-toolbar {
    flex: 1 1 auto;
  }

  /* ≤640 구간과 같은 이유로 10px. 신청·예약 내역과 값을 맞춘다. */
  .mypage-facility-list-page .mypage-facility-heading .search-field .icon-button {
    right: -10px;
  }

  .mypage-facility-list-page .mypage-facility-list-body,
  .mypage-facility-list-page .mypage-facility-grid,
  .mypage-facility-list-page .pagination {
    width: 100%;
    min-width: 0;
  }

  .mypage-facility-list-page .mypage-facility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mypage-facility-list-page .mypage-facility-card {
    width: auto;
  }

  /* 2열 카드가 좁아 메타(라벨|값 132px 고정)가 넘침 → 값을 세로 스택 */
  .mypage-facility-list-page .mypage-facility-meta div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 60px;
  }

  /* base의 height 140px는 "26px 한 줄 × 4행 + gap 12px × 3" 계산값이다.
     위에서 dt/dd를 세로로 쌓으면 한 행이 26+8+26 = 60px가 되는데 높이는
     그대로라, 행들이 140px 안에 눌려 라벨과 값이 서로 겹쳐 찍혔다.
     (≤640 블록은 같은 이유로 height를 288px로 올려놨다.) */
  .mypage-facility-list-page .mypage-facility-meta {
    height: auto;
  }

  body.home-page .program-strip.container {
    position: relative;
  }

  /* 기준을 섹션으로 넘기기 위해 해제. 이 <p>의 relative는 점선 장식 ::after의
     기준점인데, 그 ::after가 1025 이상에서만 선언되므로 PDA에서는 쓰이지 않는다. */
  body.home-page .program-strip .section-heading > p:first-of-type {
    position: static;
  }

  body.home-page .program-strip .section-heading > p:first-of-type,
  body.home-page #homeProgramTitle {
    font-size: 32px;
  }

  body.home-page .program-strip .program-heading-graphic {
    position: absolute;
    top: 40px;
    right: 0;
    width: 67.82px;
    height: 80px;
  }
}

@media (min-width: 1025px) {
  .facility-service-page .page-main {
    padding-block: 140px 160px;
  }

  .facility-service-page .site-footer {
    height: 341px;
    min-height: 341px;
  }

  .join-page .site-footer {
    height: 341px;
    min-height: 341px;
  }

  body.home-page .service-card:nth-child(n + 6) {
    display: none;
  }

  body.home-page .home-map-panel {
    display: grid;
    min-height: 658px;
    align-content: start;
    overflow: hidden;
    border-radius: 0 32px 32px 0;
  }

  body.home-page .home-map-chips {
    display: flex;
    min-height: 96px;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
  }

  body.home-page .home-map-chips button {
    min-height: 48px;
    border: 1px solid rgba(113, 113, 123, 0.15);
    border-radius: 999px;
    background: #fff;
    padding: 0 20px;
    color: #09090b;
    font-size: 17px;
  }

  body.home-page .home-map-chips .is-active {
    border-color: #27272a;
  }

  /* 검색창은 지도 패널 폭을 채운다(좌우 여백 32px만 남김). 449px 고정이던 때는
     패널이 넓은 구간에서 오른쪽이 비어 보였다. */
  body.home-page .home-map-search {
    position: relative;
    display: block;
    width: auto;
    /* 오른쪽은 56px: 검색 버튼이 입력창 밖으로 24px 나와 있어(right: -24px)
       그만큼 더 비워야 버튼이 왼쪽 여백과 같은 32px 안쪽에 놓인다. */
    margin: 24px 56px 0 32px;
  }

  body.home-page .home-map-search input {
    width: 100%;
    height: 56px;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    padding: 0 58px 0 24px;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .home-map-search input::placeholder {
    color: rgba(9, 9, 11, 0.5);
  }

  body.home-page .home-map-search button {
    position: absolute;
    top: 50%;
    right: -24px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #27272a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-50%);
  }

  body.home-page .home-map-search button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ffffff;
    -webkit-mask: url("../images/ui/icon-search.png") center / 24px 24px no-repeat;
    mask: url("../images/ui/icon-search.png") center / 24px 24px no-repeat;
  }

  body.home-page .home-map-total {
    display: flex;
    min-height: 29px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 32px 32px 0;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .home-map-total strong {
    color: #6eba2c;
    font-family: "NPS_font", var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.home-page .home-map-total a,
  body.home-page .home-map-total button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    min-height: 26px;
    color: rgba(9, 9, 11, 0.75);
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    margin-right: 10px;
  }

  body.home-page .home-map-total .refresh-icon {
    width: 24px;
    height: 24px;
    transform: translateY(-2px);
  }

  /* align-content를 적는 이유. 목록은 높이가 404px로 정해져 있어 남는 자리를
     줄(row)에 나눠 준다. 카드가 셋일 때는 내용이 404px을 넘겨(스크롤) 티가 안
     나지만, 필터를 걸어 한 장만 남으면 그 한 줄이 404px까지 늘어나고 카드 안의
     제목·주소·전화 줄까지 따라 벌어져 카드가 찢어진 것처럼 보인다. */
  body.home-page .compact-list {
    display: grid;
    align-content: start;
    gap: 32px;
    height: 404px;
    max-height: none;
    margin: 32px 32px 0;
    overflow-y: auto;
    padding: 0 0 0 5px;
  }

  body.home-page .compact-list article {
    display: grid;
    position: relative;
    grid-template-columns: 40px minmax(0, 1fr) 111px;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    padding: 0;
  }

  body.home-page .home-map-number {
    grid-row: 1;
    align-self: start;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.home-page .compact-list h3 {
    display: flex;
    align-items: center;
    grid-column: 2;
    align-self: start;
    min-height: 40px;
    margin-bottom: 12px;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
  }

  body.home-page .compact-list p {
    grid-column: 2;
    align-self: start;
    margin-bottom: 20px;
    color: rgba(9, 9, 11, 0.75);
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .home-map-phone {
    grid-column: 2;
    align-self: start;
    margin-bottom: 32px;
    color: rgba(9, 9, 11, 0.75);
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .compact-list article:not(:last-child) {
    border-bottom: 1px solid rgba(113, 113, 123, 0.15);
  }

  body.home-page .compact-list .btn {
    grid-column: 3;
    align-self: start;
    width: 105px;
    height: 48px;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #6eba2c;
    color: #fff;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  body.home-page .compact-list article .btn-primary {
    grid-row: 1;
    margin-bottom: 12px;
  }

  body.home-page .compact-list article .btn-line {
    grid-row: 2;
  }

  body.home-page .compact-list .btn-line {
    border: 1px solid rgba(113, 113, 123, 0.22);
    background: #fff;
    color: #09090b;
  }

  body.home-page .program-strip.container {
    min-height: 780px;
    align-items: center;
  }

  body.home-page .program-strip .section-heading > p:first-of-type {
    width: fit-content;
    position: relative;
    color: #09090b;
    font-family: "NPS_font", var(--font-sans);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.018em;
    margin-bottom: 0;
  }

  body.home-page .program-strip .program-heading-graphic {
    position: absolute;
    top: 50%;
    left: calc(100% + 200px);
    width: 100.99px;
    max-width: none;
    height: 119.12px;
    transform: translateY(-50%);
  }

  /* 제목 옆 점선 장식. 원래 <img>였는데 width/height를 둘 다 박는 바람에
     651x212 원본이 665x139로 눌려, 한 선인데 두께가 3.9~6.1px로 들쭉날쭉했다.
     .home-news의 section-vector와 같은 방식으로 배경에 깐다. background-size를
     주지 않으면 원본 크기 그대로만 그려지므로 스케일 자체가 일어나지 않아
     찌그러질 여지가 없다.
     장식이라 스크린리더에 읽히지 않고, .program-feature 위에 얹히므로
     #frequentTitle::after와 같이 클릭은 통과시킨다. */
  body.home-page .program-strip .section-heading > p:first-of-type::after {
    content: "";
    position: absolute;
    top: calc(50% + 120px);
    left: calc(100% + 210px + 100.99px + 14px);
    width: 651px;
    height: 212px;
    background-image: url("../images/ui/program-heading-vector.svg");
    background-repeat: no-repeat;
    transform: translateY(-50%);
    pointer-events: none;
  }

  body.home-page .program-strip .section-heading .section-heading-desc {
    margin-top: 24px;
    margin-bottom: 0;
    color: rgba(9, 9, 11, 0.5);
    font-family: "NPS_font", var(--font-sans);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
  }

  body.home-page #homeProgramTitle {
    color: #dc4f5f;
    font-family: "NPS_font", var(--font-sans);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.018em;
  }

  body.home-page .program-feature {
    position: relative;
    display: block;
    justify-self: end;
    width: 728px;
    height: 540px;
    min-height: 540px;
    overflow: visible;
    border-radius: 140px 48px 48px 48px;
    background: url("../images/ui/program-art.jpg") center / cover no-repeat, #f4f4f5;
  }

  body.home-page .program-feature .carousel-nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #09090b;
  }

  body.home-page .program-feature [data-carousel-prev] {
    left: -52px;
  }

  body.home-page .program-feature [data-carousel-next] {
    right: -52px;
  }

  body.home-page .program-slide {
    position: absolute;
    left: -100px;
    bottom: 0px;
    /* display: none; */
    width: 640px;
    height: 149px;
    min-height: 149px;
    padding: 20px 40px;
    border-radius: 40px 80px 0 40px;
  }

  body.home-page .program-slide.is-active {
    display: flex;
  }
}

@media (min-width: 1025px) {
  .site-footer {
    height: 341px;
    min-height: 341px;
    overflow: hidden;
    padding: 100px 0 64px;
    background: #27272a;
    clip-path: polygon(
      0 70px,
      5% 56px,
      10% 44px,
      15% 34px,
      20% 26px,
      25% 19px,
      30% 13px,
      35% 8px,
      40% 4px,
      45% 1px,
      50% 0,
      55% 1px,
      60% 4px,
      65% 8px,
      70% 13px,
      75% 19px,
      80% 26px,
      85% 34px,
      90% 44px,
      95% 56px,
      100% 70px,
      100% 100%,
      0 100%
    );
  }

  .site-footer::before {
    display: none;
  }

  .footer-inner.container {
    display: grid;
    width: min(1520px, calc(100vw - 400px));
    max-width: none;
    min-height: 177px;
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 64px;
    align-items: start;
  }

  .footer-brand {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .footer-logo {
    height: 32px;
    gap: 10px;
    margin: 0;
    color: #fff;
    opacity: 0.6;
  }

  .footer-logo .logo-asset {
    opacity: 1;
  }

  .footer-logo-mark {
    width: 32px;
    height: 32px;
  }

  .footer-logo-universe-main {
    width: 62.81px;
    height: 7.21px;
  }

  .footer-logo-universe-sub {
    width: 47.79px;
    height: 5.15px;
  }

  .footer-logo-city {
    width: 100.63px;
    height: 32px;
  }

  .footer-logo-service {
    width: 178.4px;
    height: 32px;
  }

  .footer-logo-divider {
    height: 24px;
    background: rgba(255, 255, 255, 0.5);
  }

  .site-footer p {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.4;
  }

  .related-site {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 240px;
    min-width: 240px;
    height: 56px;
    min-height: 56px;
    padding: 0 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
  }

  .related-site span {
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
  }

  .footer-links {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .footer-links a {
    position: relative;
    color: #fff;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.7;
  }

  .footer-links a:first-child {
    font-weight: 700;
    opacity: 1;
  }

  .footer-links a + a {
    margin-left: 53px;
  }

  .footer-links a + a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -26px;
    width: 1px;
    height: 12px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .site-footer {
    height: 557px;
    min-height: 557px;
    overflow: hidden;
    padding: 64px 40px;
    background: #27272a;
    clip-path: polygon(
      0 40px,
      5% 32px,
      10% 25px,
      15% 19px,
      20% 14px,
      25% 10px,
      30% 7px,
      35% 4px,
      40% 2px,
      45% 1px,
      50% 0,
      55% 1px,
      60% 2px,
      65% 4px,
      70% 7px,
      75% 10px,
      80% 14px,
      85% 19px,
      90% 25px,
      95% 32px,
      100% 40px,
      100% 100%,
      0 100%
    );
  }

  .site-footer::before {
    display: none;
  }

  .footer-inner.container {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .footer-inner > .footer-brand {
    order: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin: 0 0 40px;
  }

  .footer-logo {
    height: 32px;
    gap: 10px;
    justify-content: center;
    margin: 0;
    color: #fff;
    opacity: 0.6;
  }

  .footer-logo .logo-asset {
    opacity: 1;
  }

  .footer-logo-mark {
    width: 32px;
    height: 32px;
  }

  .footer-logo-universe-main {
    width: 62.81px;
    height: 7.21px;
  }

  .footer-logo-universe-sub {
    width: 47.79px;
    height: 5.15px;
  }

  .footer-logo-city {
    width: 100.63px;
    height: 32px;
  }

  .footer-logo-service {
    width: 178.4px;
    height: 32px;
  }

  .footer-logo-divider {
    height: 24px;
    background: rgba(255, 255, 255, 0.5);
  }

  .site-footer p {
    width: 100%;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.4;
  }

  .related-site {
    order: 2;
    width: 100%;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    margin: 0 0 64px;
    padding: 0 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
  }

  .related-site span {
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
  }

  .footer-links {
    order: 3;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 53px;
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .footer-links a {
    position: relative;
    display: flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    opacity: 0.7;
  }

  .footer-links a:first-child {
    font-weight: 700;
    opacity: 1;
  }

  .footer-links a + a {
    margin: 0;
    padding: 0;
  }

  .footer-links a + a::before {
    content: "";
    position: absolute;
    top: -27px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 640px) {
  .site-footer {
    height: 572px;
    min-height: 572px;
    overflow: hidden;
    padding: 64px 20px;
    background: #27272a;
    clip-path: polygon(
      0 18px,
      5% 14px,
      10% 11px,
      15% 8px,
      20% 6px,
      25% 4px,
      30% 3px,
      35% 2px,
      40% 1px,
      45% 0,
      50% 0,
      55% 0,
      60% 1px,
      65% 2px,
      70% 3px,
      75% 4px,
      80% 6px,
      85% 8px,
      90% 11px,
      95% 14px,
      100% 18px,
      100% 100%,
      0 100%
    );
  }

  .site-footer::before {
    display: none;
  }

  .footer-inner.container {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .footer-inner > .footer-brand {
    order: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin: 0 0 40px;
  }

  .footer-logo {
    height: 24px;
    gap: 8px;
    justify-content: center;
    margin: 0;
    color: #fff;
    opacity: 0.6;
  }

  .footer-logo .logo-asset {
    opacity: 1;
  }

  .footer-logo-mark {
    width: 24px;
    height: 24px;
  }

  .footer-logo-universe-main {
    width: 47.11px;
    height: 5.41px;
  }

  .footer-logo-universe-sub {
    width: 35.84px;
    height: 3.86px;
  }

  .footer-logo-city {
    width: 75.47px;
    height: 24px;
  }

  .footer-logo-service {
    width: 133.8px;
    height: 24px;
  }

  .footer-logo-divider {
    height: 18px;
    background: rgba(255, 255, 255, 0.5);
  }

  .site-footer p {
    width: 100%;
    max-width: 320px;
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.4;
  }

  .related-site {
    order: 2;
    width: 100%;
    min-width: 0;
    height: 56px;
    min-height: 56px;
    margin: 0 0 64px;
    padding: 0 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
  }

  .related-site span {
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
  }

  .footer-links {
    order: 3;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 53px;
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
  }

  .footer-links a {
    position: relative;
    display: flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    opacity: 0.7;
  }

  .footer-links a:first-child {
    font-weight: 700;
    opacity: 1;
  }

  .footer-links a + a {
    margin: 0;
    padding: 0;
  }

  .footer-links a + a::before {
    content: "";
    position: absolute;
    top: -27px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }
}

/* 사이트맵 콘텐츠는 헤더/배너와 동일한 폭(100% - 80px)으로 정렬.
   기본 .container(100% - 400px) 및 host 페이지별 override를 덮어쓴다. */
.content-section.container.sitemap-section {
  width: min(var(--container), calc(100% - 80px));
  max-width: none;
}

/* GNB는 1650px 이상에서만 노출. 그 아래에서는 로고·유틸리티와 겹쳐서
   숨기고 햄버거 메뉴로 대체한다. */
@media (max-width: 1649px) {
  .gnb,
  .gnb-dropdown {
    display: none;
  }
}

/* ===== PDA(태블릿 641~1024): PC 레이아웃을 축소해서 적용 ===== */
/* mypage: PC 2단 레이아웃을 태블릿 치수로 축소 (사이드바/여백/패딩 축소) */
@media (min-width: 641px) and (max-width: 1024px) {
  .mypage .content-section.container {
    width: calc(100% - 40px);
  }

  .mypage .page-main {
    padding-block: 140px 160px;
  }

  .mypage .mypage-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
  }

  .mypage .mypage-side {
    width: 220px;
    top: 88px;
  }

  /* 신청·예약 내역의 PDA 규칙은 뺐다. 표를 좁은 폭에 욱여넣으려고 제목·툴바를
     세로로 쌓고 표에 가로 스크롤(min-width: 520px)을 걸어 두었는데, 이 구간이
     위 ≤1024 블록의 카드형으로 바뀌면서 전부 필요 없어졌다.
     특히 min-width: 520px은 카드 목록에 걸리면 좁은 PDA에서 가로로 삐져나온다.
     이 블록이 파일 뒤쪽이라 남겨 두면 카드 규칙을 이긴다. */

  /* 시설 상세 프로세스: 데스크톱 가로 3열 → 태블릿 세로 스택 (시설-소개·지역아동센터) */
  .facility-process {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .facility-process article {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .facility-process article:nth-child(3) ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
  }

  .facility-process article:nth-child(3) li {
    height: auto;
    min-height: 88px;
    white-space: normal;
  }

  .facility-process article:nth-child(-n+2)::before {
    top: auto;
    right: auto;
    bottom: -34px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .facility-process article:nth-child(-n+2)::after {
    top: auto;
    right: auto;
    bottom: -18px;
    left: 50%;
    transform: translate(-50%, 0) rotate(90deg);
  }

  /* 프로그램·행사 결과 카드 그리드: 2열 고정은 641~800에서 카드가 273px까지 눌려
     메타 값이 4줄로 깨졌다. 기본 규칙의 auto-fill(minmax(420px,1fr))이
     PDA에서도 폭에 맞춰 1~2열을 고르므로 전용 override를 두지 않는다. */

  /* 회원가입: PDA에서 좌측 head(280px) 2단 → 단일 컬럼 (step-indicator 눌림 방지) */
  .join-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 제목↔step 간격(데스크톱 gap:24px)을 PDA에도 유지.
     회원가입 헤더는 약관동의(.join-terms-head)와 회원정보입력(.join-member-head)이
     클래스만 다른 같은 구조다. pages.css의 ≥1025 규칙은 둘 다 있는데 여기엔
     terms만 있어 회원정보입력 2개 페이지가 PDA에서 gap 0이었다. */
  .join-terms-head,
  .join-member-head {
    display: grid;
    gap: 24px;
  }

  /* 회원가입 제목의 44px은 pages.css에서 min-width:1025로 걸려 있어 PDA에서는
     base h2(1.5em=24px)로 떨어졌다. 다른 페이지 타이틀과 같은 44px로 맞춘다.
     (모바일에서는 이 제목이 display:none이라 영향 없음) */
  .join-terms-head h2,
  .join-member-head h2 {
    font-size: 44px;
  }

  /* step-indicator PDA에서 크기 축소 (데스크톱보다 작게) */
  .join-terms-page .step-indicator,
  .join-general-page .step-indicator,
  .join-org-page .step-indicator {
    gap: 16px;
  }

  .join-terms-page .step-indicator li,
  .join-general-page .step-indicator li,
  .join-org-page .step-indicator li,
  .join-terms-page .step-indicator li span,
  .join-general-page .step-indicator li span,
  .join-org-page .step-indicator li span {
    font-size: 15px;
  }

  .join-terms-page .step-indicator li,
  .join-general-page .step-indicator li,
  .join-org-page .step-indicator li {
    gap: 8px;
    padding-right: 28px;
  }

  .join-terms-page .step-indicator li::before,
  .join-general-page .step-indicator li::before,
  .join-org-page .step-indicator li::before,
  .join-terms-page .step-indicator li.active::before,
  .join-general-page .step-indicator li.active::before,
  .join-org-page .step-indicator li.active::before,
  .join-general-page .step-indicator li.is-complete::before,
  .join-org-page .step-indicator li.is-complete::before {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }

  .join-terms-page .step-indicator li::after,
  .join-general-page .step-indicator li::after,
  .join-org-page .step-indicator li::after {
    width: 13px;
    height: 13px;
  }

  /* 스마트 돌봄e 소개 카드: PDA도 모바일(≤640)과 같은 구조로 맞춘다.
     PC는 사진(.smart-intro-photo)이 1013px 고정폭 절대배치라 PDA에서 카드보다 커져
     641에서 화면 왼쪽으로 435px 빠져나가고, 글상자는 PC 고정 높이(294px)가 남아
     본문이 테두리 밖으로 넘쳤다(641~669 최대 85px).
     모바일처럼 카드가 테두리·배경을 갖고, 글상자는 비우고, 사진은 카드 안쪽 아래로
     흐르게 한다. 값은 ≤640 규칙과 동일하게 두어 640↔641 경계가 이어지도록 했다. */
  .smart-intro-page .smart-intro-card {
    min-height: 0;
    padding: 32px;
    border: 2px solid #6eba2c;
    border-radius: 32px 48px 32px 32px;
    background-color: #ffffff;
    background-image: url("../images/ui/smart-intro-copy-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
  }

  /* 테두리·배경·패딩은 카드로 옮겼으므로 글상자는 비운다. */
  .smart-intro-page .smart-intro-copy {
    max-width: none;
    min-height: 0;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* 사진: 절대배치(1013px) 해제 → 카드 안쪽 아래에 알약형으로 배치 */
  .smart-intro-page .smart-intro-photo {
    position: static;
    z-index: auto;
    width: 100%;
    height: 80px;
    min-height: 0;
    margin: 24px 0 0;
    border-radius: 999px;
    background-position: center;
  }
}

/* 맨 위로(top-button)는 모바일에서 숨김 */
@media (max-width: 640px) {
  .top-button {
    display: none;
  }
}

/* 마이페이지 좁은 데스크톱(1025~1280).
   `.mypage .content-section.container`가 @media (min-width:641px)에서 좌우 400px을
   비우는데(특이성 0,3,0이라 공용 .container의 ≤1280 48px 규칙을 이긴다),
   이 구간은 전체 폭이 그만큼 안 나와 컨테이너가 610px까지 줄고
   사이드바 360px + gap 64px를 빼면 본문이 186px만 남는다.
   그 결과 페이지네이션(min-content 620px)이 밖으로 밀려 가로 스크롤이 생겼다.
   공용 컨테이너와 같은 48px 여백 + PDA와 같은 사이드바 축소를 적용한다. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .mypage .content-section.container {
    width: calc(100% - 48px);
  }
}

/* 사이드바 360px + gap 64px는 1460px 아래에서 본문을 페이지네이션 최소폭(620px)
   밑으로 밀어낸다(1300에서 461px, 1440에서 601px). 그 구간까지 축소본을 쓴다. */
@media (min-width: 1025px) and (max-width: 1460px) {
  .mypage .mypage-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
  }

  .mypage .mypage-side {
    width: 220px;
  }
}

/* 신청·예약 폼 좁은 데스크톱.
   `.reservation-form-page .content-section.container`가 좌우 400px을 비우고,
   폼 그룹(406.666px+1013.333px+gap 100px = 1520px 기준)과 라벨 160px이 겹쳐
   입력 칸이 1025에서 71px까지 눌린다. 공용 컨테이너와 같은 48px 여백을 쓴다. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .reservation-form-page .content-section.container {
    width: calc(100% - 48px);
  }
}

/* 라벨 160px + gap 24px가 붙어 있으면 1400px 아래에서 입력 칸이 3-select를
   담지 못한다(1281에서 199px). ≤1024와 같이 라벨을 입력 위로 올려 폭을 넘긴다. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .reservation-form-page .reservation-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .reservation-form-page .reservation-field > label {
    min-height: auto;
    font-weight: 700;
  }
}

/* 약관 동의 체크박스: 구간마다 모양이 달랐다.
   ≤640은 채움형, 641~1024는 규칙이 없어 네이티브 18px, ≥1025는 외곽선+아이콘.
   신청·예약(.reservation-check-row input)과 같은 채움형으로 전 구간 통일한다.
   특이성 (0,3,1)로 pages.css의 ≥1025 규칙과 figma-match의 ≤640 규칙을 모두 이긴다. */
/* 돌봄map PDA: ≥641 규칙이 PC용이라 [430px 사이드바 + 지도] 2단에 헤더를 감추고
   목록은 사이드바 안에서만 스크롤한다. 이 구간을 모바일과 같은 모습으로 맞춘다.
   - 지도 위, 목록 아래로 쌓고 헤더를 다시 띄운다
   - 목록은 안쪽 스크롤을 풀어 페이지째 내려 보게 한다
   - 카드 버튼은 한 줄에 하나씩, 신청·예약이 위

   지도만 모바일과 다르게 둔다. 모바일은 배경을 잘라 쓰고 마커를 px로 못박아서
   (.pin-1 { top: 36px; left: 199px } …) 360px 폭에서만 맞는다. PDA는 ≥641의
   % 좌표를 그대로 쓰되 기준 비율(1475:1080)을 지켜 설계 위치에 찍히게 한다. */
@media (min-width: 641px) and (max-width: 1024px) {
  /* PC는 지도가 화면을 다 쓰므로 헤더를 감췄다. 세로로 쌓으면 자리가 있다. */
  .map-page .site-header {
    display: block;
    position: relative;
    height: var(--header-height);
  }

  .map-page .site-header .container {
    width: calc(100% - 40px);
  }

  .map-page .login-pill,
  .map-page .utility-link {
    display: none;
  }

  .map-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    background: #36780d;
  }

  .map-canvas-large {
    order: 1;
    min-height: 0;
    aspect-ratio: 1475 / 1080;
    border-radius: 0;
  }

  /* 지도 아래로 내려오면서 위 모서리를 둥글리고 32px만큼 지도를 물어 올라간다. */
  .map-sidebar {
    order: 2;
    min-height: 0;
    margin-top: -32px;
    padding: 32px 20px 28px;
    border-radius: 32px 32px 0 0;
  }

  /* 헤더가 다시 보이므로 사이드바 안 로고는 겹친다. */
  .map-logo {
    display: none;
  }

  /* PC는 사이드바 높이가 화면에 묶여 있어 목록만 안에서 스크롤했다.
     세로로 쌓인 뒤에는 페이지가 그대로 늘어나면 되므로 가둘 이유가 없다. */
  .map-page .map-list {
    max-height: none;
  }

  .map-page .map-list-item {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 0;
    padding: 24px;
    border-radius: 28px;
    column-gap: 15px;
  }

  /* 버튼을 한 줄에 하나씩. 주 동작인 신청·예약이 위로 온다(HTML은 상세 정보가 먼저). */
  .map-card-actions {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .map-card-actions .btn-primary {
    order: -1;
  }

  /* ≥641이 height: 56px으로 못박아 두어 min-height만으로는 안 바뀐다.
     56px은 모바일에서 실제로 그려지는 높이다(모바일은 카드가 328px 고정이라
     버튼이 남는 자리만큼 늘어나 56px이 된다. 여기는 카드가 내용 높이라
     늘어날 자리가 없으므로 같은 값을 직접 적는다). */
  .map-card-actions .btn {
    height: auto;
    min-height: 56px;
    border-radius: 10px;
    font-size: 17px;
  }

  /* 칩이 지도 폭을 넘치면 줄바꿈 대신 옆으로 밀어 본다(모바일과 같은 방식). */
  .map-filter-chips {
    top: 20px;
    right: 0;
    left: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 20px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .map-filter-chips::-webkit-scrollbar {
    display: none;
  }

  .map-filter-chips button {
    flex: 0 0 auto;
    min-height: 42px;
    font-size: 15px;
  }

  /* ── 마커를 고른 뒤(body.map-detail-page): 모바일처럼 지도 아래 전체폭 시트 ──
     모바일은 지도를 px로 잘라 쓰고(background-position: -602px -302px, 360 전용)
     남은 마커 하나를 고정 좌표(top:149px, left:212px)에 못박는다. 그 숫자는
     360px 폭에서만 맞으므로 PDA로 가져올 수 없다.
     대신 지도는 목록일 때와 똑같이 두고(비율 1475:1080 + % 좌표) 시트만
     지도 아래로 내린다. 폭이 641~1024 어디든 마커가 설계 자리에 그대로 찍힌다. */
  /* 묶음 목록이 420px 그대로면 마커 옆에 설 자리가 없어 마커 위에 겹쳐 앉고
     (is-covering) 지도를 거의 다 덮는다. 지도 폭에 맞춰 줄이면 PC처럼 마커 옆에
     꼬리를 달고 선다. 자리는 site.js가 마커에서 42px 떨어뜨리고 가장자리 16px을
     남기므로, 지도 절반에서 그 둘을 뺀 만큼이 어느 마커에서든 들어가는 폭이다. */
  .map-cluster-popover {
    width: min(420px, calc(50% - 60px));
  }

  .map-detail-page .map-sidebar {
    display: none;
  }

  /* 시트가 지도 밖으로 나가야 하므로 캔버스의 잘라내기를 푼다. */
  .map-detail-page .map-canvas-large {
    overflow: visible;
  }

  .map-detail-page .map-detail-card {
    top: 100%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: auto;
    max-height: none;
    /* 목록의 사이드바와 같은 크기로 지도를 물고 올라간다. */
    margin: -32px 0 0;
    border-radius: 32px 32px 0 0;
    box-shadow: none;
    /* visible로 두면 각진 썸네일이 시트의 둥근 위 모서리 밖으로 튀어나온다.
       시트는 안쪽 스크롤이 필요 없으므로 잘라내기로 되돌린다. */
    overflow: hidden;
  }

  /* 시트 위 손잡이 표시(모바일과 동일). */
  .map-detail-page .map-detail-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 50%;
    width: 80px;
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #fff;
  }

  /* 지도 위에 뜨는 카드일 때 두르던 초록 테두리. 시트로 내려오면 지도와
     맞닿는 선이 되어 어색하다(모바일도 뺀다). */
  .map-detail-page .map-detail-card.map-detail-panel {
    border: 0;
  }

  /* 닫기 버튼: 마스크 아이콘(::before)과 텍스트 ×가 겹친다. 텍스트만 남긴다. */
  .map-detail-page .map-detail-close {
    font-size: 22px;
    font-weight: 400;
  }

  .map-detail-page .map-detail-close::before {
    display: none;
  }

  /* base의 썸네일이 400×260 고정이라 전체폭 시트에서 왼쪽에만 붙었고,
     폭만 늘리면 768×234로 3.28:1이 되어 모바일(360×260 = 1.385:1)과 어긋난다.
     폭은 시트를 채우고 높이는 모바일 비율을 따라가게 한다. */
  .map-detail-page .map-detail-thumb {
    width: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 360 / 260;
    background:
      radial-gradient(circle at 50% 50%, #e9e9eb 0 40px, transparent 41px),
      linear-gradient(145deg, #c9c9cc 0%, #eeeeef 48%, #f4f4f5 100%);
  }

  .map-detail-page .map-detail-thumb::before {
    width: 80px;
    height: 80px;
    background: #e9e9eb;
  }

  .map-detail-page .map-detail-thumb::after {
    content: "▦";
    position: absolute;
    top: 50%;
    left: 50%;
    color: #c9c9cc;
    font-size: 30px;
    line-height: 1;
  }

  .map-detail-page .map-detail-copy {
    height: auto;
    padding: 32px 32px 40px;
  }

  /* 시트는 절대배치라 자리를 차지하지 않는다. 그만큼 아래를 비워 두지 않으면
     푸터 자리로 넘친다(모바일도 같은 이유로 .map-workspace에 높이를 박아 뒀다).
     시트 = 썸네일 + 본문이고, 썸네일은 폭×260/360, 본문은 641~1024에서 614px로
     일정하다. 지도를 32px 물고 올라가므로 614 - 32 = 582px을 더한다.
     (padding의 %는 제 폭이 아니라 부모 폭 기준인데 .map-main이 화면 전체 폭이라
     캔버스 폭과 같다.) 시트 안 내용이 바뀌면 582px도 같이 고쳐야 한다. */
  .map-detail-page .map-workspace {
    background: #fff;
    padding-bottom: calc(100% * 260 / 360 + 582px);
  }

  /* 목록일 때는 상세 패널이 지도 위에 뜬다. 캔버스 안에 height:802px로
     절대배치돼 있어, 비율로 낮아진 캔버스(458~739px)에서 위쪽이 잘렸다.
     캔버스 높이에 맞춰 위아래를 물리고 넘치는 내용은 내부 스크롤로 본다. */
  .map-list-page:not(.map-detail-page) .map-detail-card {
    top: 20px;
    right: 20px;
    bottom: 20px;
    width: min(400px, calc(100% - 40px));
    height: auto;
    max-height: calc(100% - 40px);
    overflow: auto;
  }
}

/* 마이페이지 태블릿(641~950): 2단(사이드바 220px + gap 32px)을 유지하면
   본문이 334px, 안쪽 패딩 48px×2를 빼면 238px밖에 안 남는다.
   행은 라벨 160px + gap 24px를 먼저 가져가므로 값 칸이 0px로 붕괴해
   "홍길동"이 3줄, "YYYY.MM.DD"가 10줄로 한 글자씩 쪼개졌고
   내 정보 수정은 가로로 27px 넘쳤다. 이 구간은 1단으로 쌓아 본문 폭을 확보한다.

   상한을 767 → 950으로 올렸다. 신청·예약 내역의 .board-table은
   min-width 520px라 그 아래로 안 줄어드는데, 사이드바가 붙어 있는
   768~950에서 표 담는 칸이 363~545px까지 좁아져 상태 열이 통째로
   화면 밖으로 나갔다(768에서 181px 잘림). 767 이하는 이미 1단이라
   본문이 712px로 넓어지는 탓에, 화면이 더 큰 768~900이 767보다 더
   심하게 잘리는 역전이 있었다. 950은 표(520px)가 들어가는 하한이다. */
@media (min-width: 641px) and (max-width: 950px) {
  .mypage .mypage-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .mypage .mypage-side {
    position: static;
    width: 100%;
  }
}

/* 내 정보 수정의 버튼 붙은 행(연락처·기본주소): [라벨 160px | 입력 1fr | 버튼 auto].
   라벨을 윗줄로 빼면 폭은 벌지만 이 행만 라벨 열이 사라져 다른 행과 어긋난다.
   라벨은 160px 열에 두고, 폭이 모자랄 때만 버튼을 아랫줄로 내린다.
   .button-only(비밀번호)는 입력이 없어 애초에 폭이 모자라지 않으므로 제외. */
@media (min-width: 641px) and (max-width: 1024px) {
  .mypage-edit-page .mypage-edit-field.with-button {
    grid-template-columns: 160px minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .mypage-edit-page .mypage-edit-field.with-button > span:first-child {
    grid-column: 1;
    grid-row: 1;
  }
}

/* 사이드바 스택 구간이 641~950으로 넓어지면서 768~868의 본문 폭이
   461 → 615px로 늘었다. 641~1024 전 구간에서 한 줄 여유가 164px 이상
   확보되므로, 버튼을 아랫줄로 내리던 별도 구간은 더 이상 필요 없다. */

/* 운영 프로그램 상세: PDA에서도 이미지가 원본 650:470 비율을 지키도록.
   @media (max-width:1024px) 블록의 height 202px는 360 모바일 기준값이라
   폭이 커질수록 늘어나 1024에서 4.60:1까지 벌어졌다.
   카드 상단 패딩도 이미지 높이를 따라가야 겹치지 않는다.
   72.3077% = 470/650, -17px = 좌우 인셋 40px 보정(-28.9) + 상단 겹침(-20) + 간격 32 */
@media (min-width: 641px) and (max-width: 1024px) {
  .program-detail-mobile-card {
    padding-top: calc(72.3077% - 17px);
  }

  .program-detail-mobile-media {
    height: auto;
    aspect-ratio: 65 / 47;
  }
}

/* 아이디·비밀번호 찾기: PDA에서 이메일 입력칸이 0px으로 눌려 사라지던 문제.
   base의 .find-form-row는 제목 칼럼에 minmax(240px, ...) + gap 100px이라
   641~1024에서 입력 칼럼이 굶는다. 그 안의 .email-inputs는
   `1fr 20px 1fr minmax(0,160px)` + gap 12×3 = 216px가 고정 오버헤드라,
   .find-field의 라벨 140px + gap 28px까지 빼고 나면 남는 폭이 216px에
   못 미쳐 두 개의 1fr 트랙이 0px가 된다(고정 트랙이 fr보다 우선).
   768에서 입력 칼럼 193px < 216px → 입력칸이 아예 안 보이고,
   641에서는 제목 칼럼 최소 240px + gap 100px 때문에 가로 스크롤까지 생겼다.
   ≤640처럼 제목을 위로 쌓아 입력 칼럼에 폭을 넘겨준다. */
@media (min-width: 641px) and (max-width: 1024px) {
  .find-form-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* 아이디·비밀번호 찾기 PC 중간 폭: 이메일 4칸 가로배치가 안 들어간다.
   .email-inputs의 고정 오버헤드(@ 20 + select 180 + gap 12×3 = 236px)를
   빼고 남는 폭을 두 입력칸이 나눠 갖는데, 1920 기준으로 잡힌
   .find-form-row(제목 minmax(240px,1fr) + gap 100px)와 .find-field의
   라벨 140px이 그대로라 1650px 아래에서는 입력칸이 계속 140px 미만이다
   (1300에서 50px까지 눌린다. 1280→1300 급락은 컨테이너 여백이
   100%-48px에서 100%-400px로 바뀌기 때문).
   도메인 select를 다음 줄로 내려 가로 폭을 두 입력칸에 몰아준다.
   상한 1649px은 이미 쓰고 있는 GNB 브레이크포인트와 맞췄다. */
@media (min-width: 1025px) and (max-width: 1649px) {
  .email-inputs {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  }

  .email-inputs select {
    grid-column: 1 / -1;
  }
}

/* 회원가입 약관동의: 약관 내용 박스와 동의 체크박스가 PDA에서 붙어 있던 문제.
   .term-box label의 margin-top이 pages.css의 @media (min-width:1025px)와
   figma-match의 @media (max-width:640px)에만 있어서 641~1024는 어느 쪽에도
   안 걸리고 margin 없는 base로 떨어졌다. PC 값(24px)에 맞춘다. */
@media (min-width: 641px) and (max-width: 1024px) {
  .join-terms-page .term-box label {
    margin-top: 24px;
  }
}

/* 회원가입 회원정보입력(일반·기관): PC에서 폼이 컨테이너를 넘겨 잘리던 문제.
   pages.css의 @media (min-width:1025px)가 1920 실측값을 그대로 박아둬서
   `grid-template-columns: 406.6667px 1013.3333px` + column-gap 100px =
   1520px 고정이다. 컨테이너는 min(1520px, 100% - 400px)로 줄어드는데
   섹션은 안 줄어서 1920 미만 전 구간이 가로로 넘쳤다(1280·1100 모두
   문서 폭 1720px). 같은 비율(406.6667 : 1013.3333 = 61 : 152)의 fr로 환산.
   PDA(≤1024)·모바일(≤640)은 각자 1열 레이아웃이 따로 있어 영향 없다. */
@media (min-width: 1025px) {
  .join-general-page .member-form-section,
  .join-general-page .member-child-section,
  .join-org-page .org-search-panel {
    grid-template-columns: minmax(0, 61fr) minmax(0, 152fr);
  }
}

/* 회원가입 기관정보입력 PDA: 검색 입력창만 PC와 다르다.
   .join-org-page의 인풋 스타일이 pages.css의 @media (min-width:1025px)에만
   있어서 641~1024는 base로 떨어져 components.css의 input 배경(#f7f8fa)과
   .org-search-field의 1.5px 테두리 / radius 16px가 그대로 나온다.
   PC 값(투명 배경, 1px 테두리, radius 13px, height 64px)에 맞춘다.
   패널 레이아웃(1열 카드)은 PDA 원안 유지 — margin-top도 건드리지 않는다. */
@media (min-width: 641px) and (max-width: 1024px) {
  .join-org-page .org-search-field {
    height: 64px;
    border: 1px solid rgba(113, 113, 123, 0.15);
    border-radius: 13px;
  }

  .join-org-page .org-search-field input {
    height: 64px;
    min-height: 64px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    padding-left: 22px;
    font-family: "NPS_font", var(--font-sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: #09090b;
  }

  .join-org-page .org-search-field input::placeholder {
    color: rgba(9, 9, 11, 0.4);
  }

  .join-org-page .org-search-field .icon-button {
    top: 20px;
    right: 24px;
    bottom: 20px;
    width: 24px;
    height: 24px;
    min-height: 0;
    padding: 0;
  }
}

/* 회원가입 계열 PDA: 카드 껍데기가 되살아나고 제목 아이콘이 사라지던 문제.
   패널·제목 스타일이 pages.css의 @media (min-width:1025px)와 이 파일의
   @media (max-width:640px) 두 곳에만 있어서 641~1024가 base로 떨어진다.
   base는 예전 흰 카드 디자인(테두리·그림자·radius 24px)이고 잎사귀 아이콘은
   PC/모바일 규칙에만 있어서, PDA에서만 없던 테두리·그림자가 생기고 있던
   아이콘이 없어졌다. 모바일(≤640) 기준으로 맞춘다.

   레이아웃(그리드 열 수, 폭)은 건드리지 않는다. PDA 원안 그대로 두고
   껍데기와 아이콘만 모바일과 같게 만드는 게 목적이다. */
@media (min-width: 641px) and (max-width: 1024px) {
  /* 약관동의: 약관 상자의 카드 껍데기를 걷고 점선 구분선만 남긴다. */
  .join-page .term-box {
    padding: 0 0 20px;
    border: 0;
    border-bottom: 1.5px dashed #e4e4e4;
    border-radius: 0;
    background: transparent;
  }

  /* 점선은 약관 상자 사이를 나누는 선이다. 마지막 상자 아래에는 나눌 것이
     없어서 "다음" 버튼 위에 선만 하나 뜬다. */
  .join-page .term-box:last-of-type {
    border-bottom: 0;
  }

  .join-page .term-box div {
    border-radius: 24px;
  }

  .member-type-card {
    border-radius: 32px;
  }

  .join-page .terms-panel .form-actions .btn-primary,
  .org-search-panel .btn-primary {
    border-radius: 12px;
  }

  /* 일반 회원정보입력: 폼 패널의 테두리·그림자·흰 배경을 걷는다. */
  .join-general-page .member-form-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .join-general-page .child-add-button {
    border-radius: 10px;
  }

  /* 기관정보입력: 같은 껍데기 제거. */
  .join-org-page .org-search-panel {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* 잎사귀 아이콘 복구. 모바일과 같이 align-items:center로 두므로
     PC(≥1025)에 넣은 margin-top 보정은 여기 필요 없다. */
  .member-type-panel h2,
  .join-page .term-box h2 {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .join-org-page .org-search-panel h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    font-size: 25px;
    line-height: 1.5;
  }

  .join-page .member-type-panel h2::before,
  .join-page .term-box h2::before,
  .join-org-page .org-search-panel h2::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: url("../images/ui/leaf-title-bullet.png") center / contain no-repeat;
  }
}

/* ============================================================
   통합검색 결과 (config/통합검색.html)
   PC 1920 기준 시안: 컨테이너 1520, 카드/메타는 기존 컴포넌트를 그대로 쓴다.
   파일 맨 끝에 두어 뒤에 오는 ≤640 블록이 그대로 이기게 한다.
   ============================================================ */
/* 다른 목록 페이지들과 같이 상하 여백은 .page-main에 맡긴다(비주얼→본문 140,
   본문→푸터 160). 여기에 패딩을 더하면 통합검색만 아래로 처진다. */
.search-page .search-result-section {
  padding-top: 0;
  padding-bottom: 0;
}

.search-result-summary {
  margin-bottom: 40px;
  /* layout.css의 word-break: keep-all이 걸려 있으면 모바일에서 "999,999건의"가
     통째로 다음 줄로 넘어가 시안보다 한 줄 늘어난다. */
  word-break: normal;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
}

/* 검색어와 겹치는 조각만 초록으로. mark의 기본 노란 배경은 지운다. */
.search-page mark {
  background: none;
  color: #6eba2c;
}

.search-result-form-wrap {
  scroll-margin-top: 40px;
  padding: 56px 56px 56px 32px;
  border-radius: 32px;
  background: #6eba2c;
}

.search-result-form {
  position: relative;
}

.search-result-form input {
  width: 100%;
  height: 80px;
  padding: 0 120px 0 32px;
  border: 0;
  border-radius: 40px 24px 24px 24px;
  background: #fff;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 21px;
  font-weight: 400;
}

.search-result-form input::placeholder {
  color: rgba(9, 9, 11, 0.8);
}

/* 브라우저 기본 사각 링은 초록 패널 위에서 튄다. 없애는 대신 라운드를 따라가는
   링을 인풋 안쪽에 둔다. 초록은 패널과 같은 색이라 안 보이므로 버튼과 같은 먹색. */
.search-result-form input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #27272a;
}

.search-result-form button {
  position: absolute;
  top: 50%;
  right: -24px;
  display: grid;
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #27272a;
  place-items: center;
  transform: translateY(-50%);
  cursor: pointer;
}

.search-result-form button .icon-search {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.search-page .search-tabs {
  gap: 16px;
  margin: 64px 0 0;
  flex-wrap: wrap;
}

/* 시안 칩: 높이 56, "전체 (999,999)" 기준 폭 178px → 좌우 24px.
   고르지 않은 칩은 테두리만 초록이고 글자는 본문색이다(고른 칩은 아래에서 초록 배경+흰 글자). */
.search-page .search-tabs button {
  height: 56px;
  min-height: 56px;
  padding: 0 24px;
  border-color: #6eba2c;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
}

.search-page .search-tabs button.is-active {
  border-color: #6eba2c;
  background: #6eba2c;
  color: #fff;
}

.search-group {
  /* 칩으로 이동했을 때 섹션 제목이 화면 맨 위에 딱 붙지 않도록 여유를 둔다. */
  margin-top: 64px;
  scroll-margin-top: 40px;
}

/* ── 결과 0건 ───────────────────────────────────────────── */
.search-empty {
  display: grid;
  justify-items: center;
  gap: 32px;
  padding: 144px 0 100px;
}

/* 아이콘은 148x140 고정 */
.search-empty-icon {
  width: 148px;
  height: 140px;
  flex-shrink: 0;
}

.search-empty p {
  color: #71717b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.search-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 2px solid #09090b;
}

.search-group-head h2 {
  display: flex;
  align-items: center;
  gap: 24px;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
}

/* 제목과 건수 사이 세로 구분선 */
.search-group-head h2 span {
  position: relative;
  padding-left: 24px;
  color: #71717b;
  font-size: 28px;
  font-weight: 400;
}

.search-group-head h2 span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 28px;
  background: rgba(113, 113, 123, 0.3);
  transform: translateY(-50%);
}

/* 분류별 목록 페이지로 가는 + 링크 */
.search-group-more {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.search-group-more::before,
.search-group-more::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #09090b;
  transform: translate(-50%, -50%);
}

.search-group-more::before {
  width: 20px;
  height: 2px;
}

.search-group-more::after {
  width: 2px;
  height: 20px;
}

/* ── 메뉴 결과: 경로만 나열한다 ───────────────────────────── */
.search-menu-list {
  list-style: none;
}

.search-menu-list li {
  border-bottom: 1px solid #e4e4e4;
}

.search-menu-list a {
  display: flex;
  height: 74px;
  align-items: center;
  gap: 16px;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  text-decoration: none;
}

/* 브레드크럼과 같은 ">" 꺾쇠. btn-arrow.png은 알파가 비어 있어 마스크로 쓰면
   아무것도 그려지지 않으므로(브레드크럼 화살표가 안 보이는 것과 같은 원인)
   여기서는 보더로 직접 그린다. */
.search-menu-arrow {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.search-menu-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #09090b;
  border-right: 2px solid #09090b;
  transform: translateY(-50%) rotate(45deg);
}

/* ── 돌봄기관 결과: life-desktop-card 재사용, 액션 열만 뺀다 ── */
.search-facility-list {
  display: grid;
  margin-top: 48px;
  gap: 40px;
}

/* 카드 자체는 돌봄서비스 신청·예약 페이지의 .care-desktop-card를 그대로 쓴다.
   검색 결과에는 신청·예약/상세 정보 버튼이 없어 세 번째 칼럼만 뺀다. */
.search-page .life-desktop-card.search-facility-card {
  grid-template-columns: minmax(0, 400px) minmax(240px, 1fr);
}

.search-facility-card .life-desktop-copy h3 a {
  color: inherit;
  text-decoration: none;
}

.search-facility-card .mobile-title {
  display: none;
}

/* ── 운영 프로그램 · 공연·전시·행사: life-event-card 재사용 ── */
.search-event-grid {
  margin-top: 40px;
}

.search-event-grid .life-event-copy h3 a {
  color: inherit;
  text-decoration: none;
}

/* ── 게시판 결과 ─────────────────────────────────────────── */
.search-board-list {
  list-style: none;
}

.search-board-list li {
  border-bottom: 1px solid #e4e4e4;
}

.search-board-list a {
  display: grid;
  padding: 32px 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 24px;
  text-decoration: none;
}

.search-board-list h3 {
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.search-board-list time {
  color: #71717b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  grid-column: 2;
  grid-row: 1;
}

.search-board-list p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  grid-column: 1 / -1;
  color: #71717b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .search-result-summary {
    font-size: 32px;
  }

  /* 인풋 높이는 PC와 같게 두고 글자만 줄인다. 사이트의 .search-field도 1920→768에서
     높이(56px)는 그대로 두고 폰트만 줄인다. 여기서 96px로 키우면 PC(80px)보다 커진다. */
  .search-result-form input {
    padding-right: 104px;
    font-size: 19px;
  }
}

@media (max-width: 640px) {
  /* 모바일도 .page-main 여백만 쓴다(의료기관·운영 프로그램 목록과 동일한 64px) */
  .search-page .search-result-section {
    padding-top: 0;
    padding-bottom: 0;
  }

  .search-result-summary {
    margin-bottom: 32px;
    font-size: 26px;
  }

  /* 모바일 시안에는 초록 패널이 없다. 인풋이 직접 초록 테두리를 갖고,
     돋보기 버튼은 PC와 같이 인풋 오른쪽에 24px 걸친다(시안 인풋 20~316, 버튼 284~340). */
  .search-result-form-wrap {
    padding: 0 24px 0 0;
    border-radius: 0;
    background: none;
  }

  .search-result-form input {
    height: 64px;
    padding: 0 56px 0 24px;
    border: 2px solid #6eba2c;
    border-radius: 28px 16px 16px 16px;
    font-size: 17px;
  }

  .search-result-form button {
    right: -24px;
  }

  /* 칩은 줄바꿈 없이 가로 스크롤. 시안처럼 화면 오른쪽 끝까지 흘러가도록
     컨테이너 여백(20px)만큼 밖으로 빼고 같은 값을 패딩으로 돌려준다. */
  .search-page .search-tabs {
    margin-top: 64px;
    margin-right: -20px;
    padding-right: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .search-page .search-tabs::-webkit-scrollbar {
    display: none;
  }

  /* 칩 크기는 시안상 PC와 같다(전체 칩 178x56). 폰트를 줄이지 않는다. */
  .search-page .search-tabs button {
    flex: 0 0 auto;
  }

  .search-group {
    margin-top: 64px;
  }

  .search-group-head {
    padding-bottom: 16px;
  }

  .search-group-head h2 {
    gap: 16px;
    font-size: 26px;
  }

  .search-group-head h2 span {
    padding-left: 16px;
    font-size: 22px;
  }

  .search-menu-list a {
    height: 74px;
    font-size: 17px;
  }

  /* 돌봄기관 카드: 썸네일 위, 본문 아래로 쌓는다(카드 간격은 목록의 gap으로 준다) */
  .search-facility-list {
    gap: 40px;
  }

  .search-page .life-desktop-card.search-facility-card {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  /* 시안: 썸네일과 Badge 사이 40px */
  .search-facility-card .life-desktop-copy {
    margin-top: 40px;
  }

  .search-facility-card .life-desktop-thumb {
    width: 100%;
    height: 208px;
  }

  .search-facility-card .life-desktop-thumb button {
    top: 24px;
    right: 24px;
  }

  .search-facility-card .desktop-title {
    display: none;
  }

  .search-facility-card .mobile-title {
    display: block;
  }

  .search-facility-card .life-desktop-copy h3 {
    font-size: 22px;
  }

  /* 메타는 라벨 줄 / 값 줄로 쌓인다 */
  .search-facility-card .life-desktop-copy dl div {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  .search-event-grid {
    margin-top: 32px;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .search-event-grid .life-event-card {
    height: auto;
  }

  /* 시안 카드 551px = 썸네일 230 + 본문. base의 304px를 쓰면 카드가 100px 길어진다. */
  .search-event-grid .life-event-thumb {
    min-height: 230px;
  }

  /* 카드 메타도 라벨 줄 / 값 줄로 쌓아 날짜가 접히지 않게 한다 */
  .search-event-grid .life-event-copy dl div {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  /* 운영 프로그램·공연·전시·행사 카드도 같은 이유로 쌓는다. 라벨 96px + 값 158px로
     나란히 두면 "YYYY.MM.DD - YYYY.MM.DD"가 158px 안에 못 들어가 두 줄로 접혔다.
     통합검색은 위 .search-event-grid 규칙이 이미 같은 일을 하고 있어서 뺐다.
     영문 규칙(html[lang="en"] .life-event-copy dl div = 140px)이 구체성 (0,2,3)로
     더 높아, 함께 적지 않으면 영문 화면에서만 두 칸으로 되돌아간다. */
  .program-list-page .life-event-copy dl div,
  .life-events-page .life-event-copy dl div,
  html[lang="en"] .program-list-page .life-event-copy dl div,
  html[lang="en"] .life-events-page .life-event-copy dl div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* 라벨과 값이 8px로 붙으면서 항목 사이 12px과 차이가 거의 없어졌다.
     항목 간격을 16px로 벌려 세 덩어리가 구분되게 한다. */
  .program-list-page .life-event-copy dl,
  .life-events-page .life-event-copy dl {
    gap: 16px;
  }

  .search-board-list a {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .search-board-list h3 {
    font-size: 18px;
  }

  .search-board-list time {
    grid-column: 1;
    grid-row: 3;
  }

  .search-board-list p {
    grid-row: 2;
  }

  /* 결과 0건: 아이콘 크기(148x140)는 고정, 위아래 여백만 줄인다.
     아래는 .page-main의 64px만 쓰는 게 시안 간격과 맞는다. */
  .search-empty {
    gap: 24px;
    padding: 80px 0 0;
  }

  .search-empty p {
    font-size: 19px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   영문 전용 높이 보정

   시안 치수가 한국어 글자 수에 맞춰 height로 박혀 있어, 같은 뜻이라도 길어지는
   영문에서는 고정 상자를 넘쳐 잘렸다. 한국어 레이아웃은 그대로 두고(선택자에
   html[lang="en"]가 붙어 있어 한국어에는 닿지 않는다) 영문일 때만 height를 풀되,
   한 줄에 나란히 놓이는 형제끼리는 같은 높이를 쓰게 한다.
   min-height에는 한국어 기준 높이를 그대로 넣어 짧은 문구에서는 시안대로 보인다.
   ══════════════════════════════════════════════════════════════════════ */

/* 메인 자주찾는 서비스 카드.
   "Hospital Escort"가 2줄이 되면서 "Book now"가 카드 밖으로 29px 흘렀다.
   .service-grid가 그리드라 height만 풀면 5장이 align-items 기본값(stretch)으로
   가장 큰 카드 높이를 함께 쓴다.

   다만 이건 넘치는 것만 막을 뿐 줄맞춤은 못 잡는다. 두 줄이 되면 카드가 284→313px이
   되는데 .service-grid가 align-items: end라 바닥만 맞고 위가 29px 튀어나온다(사진이
   그만큼 올라가 보인다). 애초에 두 줄이 되지 않게 아래에서 제목 여백을 줄인다. */
html[lang="en"] .service-card {
  height: auto;
  min-height: 284px;
}

/* "Hospital Escort"는 700 21px에서 172px인데 제목 칸은 208 - 테두리 3 - 좌우 18*2
   = 169px뿐이라 3px 차이로 넘쳤다. 워낙 아슬아슬해서 같은 화면을 새로 고쳐도 한 줄이
   됐다 두 줄이 됐다 했다. 좌우를 12px로 줄이면 181px이 되어 9px 남는다(두 번째로 긴
   "Full-day Care"는 149px이라 32px 남는다).
   제목은 가운데 정렬이라 한 줄에 들어가는 문구에는 보이는 변화가 없다. 카드 크기도
   그대로 284px이다. 한국어에는 손대지 않는다(가장 긴 "정기·상시돌봄"이 129px이라
   원래 여유가 있다). */
html[lang="en"] .service-card h3 {
  padding: 0 12px;
}

/* 목록형 이벤트 카드(운영 프로그램·공연 전시 행사·통합검색).
   "Application period" 라벨이 3줄로 접히며 카드 밖으로 9px 넘쳤다.
   .life-event-grid도 그리드라 같은 행의 카드끼리 높이를 공유한다.
   640 이하는 이미 height:auto라 손대지 않는다. */
@media (min-width: 641px) {
  html[lang="en"] .life-event-card {
    height: auto;
    min-height: 590px;
  }
}

/* 라벨 칸 96px는 "신청기간"(4글자, 아이콘 28px 빼면 68px) 기준이다. 영문
   "Application"은 95px라 68px 칸에서 "Applica/tion"으로 잘렸다. 칸을 넓혀 단어가
   통째로 들어가게 하고, 두 단어짜리 라벨은 띄어쓰기에서 접히게 둔다.
   위 .life-desktop-copy dl div(130px)와 같은 처리다. */
html[lang="en"] .life-event-copy dl div {
  grid-template-columns: 140px minmax(0, 1fr);
}

/* 메인 시설 통계.
   PC는 앞서 html[lang="en"] .facility-stats에서 풀었지만, PDA·모바일은 뒤에 오는
   body.home-page 규칙이 height를 다시 고정해 되돌려놨다. 같은 자리에서 다시 푼다.
   grid-auto-rows: 1fr로 네 행이 가장 큰 행 높이를 함께 쓴다. */
@media (min-width: 641px) and (max-width: 1024px) {
  html[lang="en"] body.home-page .facility-stats {
    height: auto;
    min-height: 408px;
    grid-auto-rows: 1fr;
  }
}

@media (max-width: 640px) {
  html[lang="en"] body.home-page .facility-stats {
    height: auto;
    min-height: 632px;
    grid-auto-rows: 1fr;
  }
}

/* 지역아동센터 서비스 4칼럼.
   그리드 트랙은 minmax(0, 1fr)이라 줄어들 수 있는데, 그리드 아이템의 기본
   min-width: auto 때문에 블록이 제 트랙(161px)보다 커져 마지막 칼럼이 화면 밖으로
   21px 나가고 페이지에 가로 스크롤이 생겼다. 트랙 안으로 접어 넣고 긴 단어는
   줄바꿈을 허용한다.
   높이는 subgrid로 공유한다. 제목 알약이 1줄인 칼럼과 2줄인 칼럼이 섞여 회색
   목록 상자의 시작 높이가 서로 어긋나 있었다. */
@media (min-width: 641px) {
  html[lang="en"] .child-service-groups {
    grid-template-rows: auto 1fr;
  }

  html[lang="en"] .child-service-block {
    min-width: 0;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }

  html[lang="en"] .child-service-block h3 {
    min-width: 0;
    /* subgrid 행을 꽉 채워 네 알약이 같은 높이가 된다(기본값 start면 1줄짜리
       "Culture"만 짧아진다). */
    align-self: stretch;
  }

  html[lang="en"] .child-service-block ul {
    min-width: 0;
    /* 트랙보다 긴 단어가 남으면 상자 밖으로 흘리지 말고 끊는다(마지막 수단). */
    overflow-wrap: break-word;
  }

  /* 목록 항목도 ul 그리드의 아이템이라 같은 min-width: auto 문제를 겪는다. */
  html[lang="en"] .child-service-block ul li {
    min-width: 0;
  }
}

/* PDA에서는 칼럼이 161px까지 좁아진다. 좌우 여백을 다 걷어내도 "Performances"
   한 단어(약 125px)가 들어갈 자리가 안 나와, 4칼럼을 유지하면 단어를 중간에서
   끊는 수밖에 없다. 이 구간에서만 2칼럼으로 접어 단어가 통째로 들어가게 한다.
   블록이 두 줄로 놓이므로 각 줄끼리 subgrid로 높이를 공유한다(암시적 행도
   auto라 그대로 동작한다). */
@media (min-width: 641px) and (max-width: 1024px) {
  html[lang="en"] .child-service-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 체험기관 카테고리 탭.
   "Museums, galleries & libraries"가 한 줄에 안 들어가 화면 밖으로 32px 나갔다.
   줄바꿈을 허용하고 높이를 풀되, 두 탭이 같은 최소 높이를 유지해 나란히 보이게 한다. */
@media (max-width: 640px) {
  html[lang="en"] .life-category-tabs {
    height: auto;
    flex-wrap: wrap;
  }

  html[lang="en"] .life-category-tabs a,
  html[lang="en"] .life-category-tabs button {
    height: auto;
    min-height: 48px;
    padding-block: 8px;
  }
}

/* 로그인 Any-ID 안내 버튼.
   .anyid-panel .btn-small은 width/min-width 93px에 padding 0으로 박혀 있다.
   "사용자 등록"(6글자) 기준이라 영문 "Manage users"(99px)가 상자를 8~22px 넘쳤다.
   640 이하는 이미 width:auto라 멀쩡하고, PC·PDA에서만 깨진다.
   폭을 내용에 맡기되 두 버튼이 같은 최소 폭을 써서 나란히 보이게 한다. */
@media (min-width: 641px) {
  html[lang="en"] .anyid-panel .btn-small {
    width: auto;
    /* 긴 쪽("Manage users")이 들어가는 폭. 둘 다 이 값에 걸려 폭이 같아진다. */
    min-width: 135px;
    padding-inline: 12px;
  }
}

/* 페이지 배너 제목: PDA 전용 치수.
   641~1024에는 이 규칙이 없어 PC값 60px이 그대로 내려오고 있었다(letter-spacing도
   .smart-intro-page만 -0.02em이라 페이지마다 달랐다). 44px로 일괄 통일한다.

   .smart-intro-page를 함께 적는 이유는 640 이하 블록과 같다. base의
   `.smart-intro-page .page-visual h1`이 구체성이 더 높아 공통 규칙을 이긴다. */
@media (min-width: 641px) and (max-width: 1024px) {
  .page-visual h1,
  .smart-intro-page .page-visual h1 {
    font-family: "NPS_font", var(--font-sans);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: #ffffff;
  }
}

/* 홈 "경산시 운영 프로그램" 제목 옆 장식(점프 캐릭터 + 점선)의 영문 위치.
   두 장식 모두 `left: calc(100% + ...)`로 제목 <p>에 매여 있는데, 그 <p>가
   width:fit-content라 100%가 곧 제목 글자 폭이다. "경산시"(120.39px)가
   "Gyeongsan"(251.2px)으로 바뀌면서 장식 뭉치가 통째로 130.81px 오른쪽으로
   밀려 점선 고리가 프로그램 카드에 가려졌다.

   영문에서는 100% 항을 빼고 한국어에서 계산되던 값을 그대로 못박는다.
   (캐릭터 120.39 + 200 = 320.39 / 점선 120.39 + 210 + 100.99 + 14 = 445.38)
   이러면 번역 문구가 길어지든 짧아지든 장식은 한국어와 같은 자리에 선다.
   두 장식을 함께 옮겨야 사이 간격 24px이 유지된다. */
@media (min-width: 1025px) {
  html[lang="en"] body.home-page .program-strip .program-heading-graphic {
    left: 320.39px;
  }

  html[lang="en"] body.home-page .program-strip .section-heading > p:first-of-type::after {
    left: 445.38px;
  }
}

/* 날짜 필터의 달력(운영 기간 시작일/종료일).
   입력칸은 readonly라 직접 타이핑하지 않고, 눌러서 이 달력으로만 고른다.
   달력은 body 끝에 하나만 두고 열 때마다 눌린 입력칸 밑으로 옮겨 붙인다.
   필터 패널이 접히거나 overflow로 잘리는 자리가 있어 조상에 매이지 않게
   viewport 기준 fixed로 띄우고, 스크롤·리사이즈 때 다시 잰다. */
.life-desktop-date-fields input,
.life-date-fields input {
  cursor: pointer;
}

.datepicker {
  position: fixed;
  z-index: 60;
  width: 296px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: var(--shadow-md);
  color: var(--color-ink);
}

.datepicker[hidden] {
  display: none;
}

.datepicker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.datepicker-title {
  font-size: 17px;
  font-weight: 700;
}

.datepicker-nav {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.datepicker-nav:hover {
  background: var(--color-soft);
}

.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.datepicker-dow {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--color-muted);
}

.datepicker-dow:first-child {
  color: var(--color-red);
}

.datepicker-day {
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-ink);
  font-size: 15px;
  cursor: pointer;
}

.datepicker-day:hover:not(:disabled) {
  background: var(--color-soft);
}

/* 앞뒤 달에서 넘어온 날짜와, 시작일~종료일 범위를 벗어나 고를 수 없는 날짜 */
.datepicker-day.is-outside {
  color: rgba(9, 9, 11, 0.32);
}

.datepicker-day:disabled {
  color: rgba(9, 9, 11, 0.22);
  cursor: default;
}

.datepicker-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

.datepicker-day.is-selected,
.datepicker-day.is-selected:hover {
  background: var(--color-ink);
  color: #fff;
}

@media (max-width: 640px) {
  .datepicker {
    width: 288px;
    padding: 12px;
  }

  .datepicker-day {
    height: 34px;
  }
}

/* ══ 합친 히어로 반응형 ═════════════════════════════════════════════
   PDA(768)·모바일(360) 원고를 픽셀로 훑어 잰 값이다. 마크업은 PC와 한 벌이고
   여기서 배치만 바꾼다.
   - 자주찾는 서비스: 한 줄 띠 → PDA 두 칸 격자(낱장 카드) → 모바일 한 칸 목록
   - 빠른 예약: 1·2·3 라벨이 빠지고 "빠른 돌봄 예약" 카드 한 장 안에 세로로 쌓인다
   - 원고에 이전·다음 화살표도 도트도 없어 좁은 구간에서는 감춘다
   파일 위쪽 메인 블록(≤1024·≤640)이 아니라 여기에 모아 둔 이유는, 그 블록들이
   따로 놓인 카드였던 옛 히어로 기준이라 섞으면 어느 쪽 값인지 읽기 어려워서다. */
@media (max-width: 1024px) {
  /* ── 헤더는 사진 위에 얹지 않는다 ──
     PC는 히어로 사진이 화면 꼭대기까지 올라와 헤더가 그 위에 반투명으로 얹히지만,
     PDA·모바일 원고에서는 흰 띠가 따로 서고 사진이 그 아래에서 시작한다.
     파일 위쪽 .home-page 반전(투명 바탕·흰 로고·흰 아이콘)을 여기서 되돌린다. */
  body.home-page > .site-header {
    background: #fff;
    border-bottom: 0;
  }

  body.home-page > .site-header .header-inner .gnb-link,
  body.home-page > .site-header .header-inner .utility-link,
  body.home-page > .site-header .header-inner .icon-button {
    color: var(--color-ink);
  }

  body.home-page > .site-header .header-inner .logo-header-white {
    display: none;
  }

  body.home-page > .site-header .header-inner .logo-color {
    display: block;
  }

  body.home-page > .site-header .header-inner .icon-search,
  body.home-page > .site-header .header-inner .icon-menu {
    filter: none;
  }

  body.home-page > .site-header .header-inner .logo-divider {
    background: rgba(9, 9, 11, 0.12);
  }

  /* 헤더 아래에서 시작하니 헤더 높이만큼 끌어올리던 것도 함께 푼다. */
  body.home-page .hero-panel {
    margin-top: 0;
    padding-top: 0;
  }

  /* 원고의 좌우 여백이 40px이다. */
  body.home-page .hero-inner.container {
    width: calc(100% - 80px);
  }

  /* 975px은 PC 값이다. 여기서는 내용이 높이를 정하고 사진이 아래로 조금 남는다. */
  body.home-page .hero-panel {
    min-height: 0;
    align-content: start;
    padding-bottom: 46px;
  }

  /* 제목 그림과 설명은 PC 값(480px / 20px) 그대로다. 원고를 재 보니 좁아진 것은
     좌우 여백과 아래 두 덩어리뿐이고 글머리는 크기가 같다. */
  body.home-page .hero-copy {
    width: 100%;
    padding-top: 72px;
  }

  body.home-page .hero-actions {
    gap: 12px;
    margin-top: 20px;
  }

  /* 원고에 없다. 배너는 저절로만 넘어간다. */
  body.home-page .hero-panel .carousel-controls {
    display: none;
  }

  /* ── 자주찾는 서비스: 두 칸 격자 ──
     띠 하나가 낱장 카드 다섯으로 흩어진다. 띠가 쥐고 있던 배경·모서리·그림자를
     카드 쪽으로 옮기고, ≤1024에서 옆으로 굴리던 규칙(overflow-x)도 푼다. */
  body.home-page .hero-service-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    min-height: 0;
    margin: 52px 0 0;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  body.home-page .hero-service-tab {
    flex: none;
    min-width: 0;
    min-height: 72px;
    padding: 0 16px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
  }

  /* 낱장으로 떨어졌으니 칸 사이 선은 필요 없다. */
  body.home-page .hero-service-tab + .hero-service-tab {
    border-left: 0;
  }

  /* 위에서 흰 바탕을 칸마다 직접 깔았더니 그 규칙이 파일 앞쪽 .hero-service-tab:hover
     보다 특이성이 높아 호버 그라데이션을 덮어 버렸다(배지만 희어지고 띠는 그대로였다).
     같은 자리에서 호버도 다시 적어 준다. ≤640도 이 구간 안이라 함께 받는다. */
  body.home-page .hero-service-tab:hover {
    background: linear-gradient(90deg, #ffd499, #cde8aa);
  }

  /* ── 빠른 예약: 흰 카드 한 장 ──
     PC는 카드 넷(라벨 셋 + 단추)이 나란히 서지만, 여기서는 카드가 한 장이고
     그 안에 셀렉트가 쌓인다. 그래서 label은 상자 노릇을 그만두고 줄만 된다. */
  body.home-page .quick-filter {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 24px;
    padding: 24px 32px;
    border-radius: 32px;
    background: #fff;
    box-shadow: var(--shadow-sm);
  }

  body.home-page .quick-filter-heading {
    display: block;
    /* 격자 간격 12 + 8 = 원고의 20px */
    margin-bottom: 8px;
    font-family: "NPS_font", var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #09090b;
  }

  /* 카드 제목 한 줄이 1·2·3 라벨을 대신한다. */
  body.home-page .quick-filter-title {
    display: none;
  }

  body.home-page .quick-filter label {
    display: block;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* 56px 알약이라 기본 border-radius:32px이 그대로 반지름 28px(=높이 절반)로 눌린다. */
  body.home-page .quick-filter select {
    min-height: 56px;
  }

  body.home-page .quick-select-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body.home-page .quick-submit {
    min-height: 56px;
    flex-direction: row;
    gap: 8px;
    /* 격자 간격 12 + 12 = 원고의 24px */
    margin-top: 12px;
    border-radius: 12px;
    background: #6eba2c;
    font-size: 17px;
  }

  /* 단추가 한 줄로 낮아져 흰 동그라미가 들어갈 자리가 없다. 화살표만 글자 옆에 붙인다. */
  body.home-page .quick-submit i {
    width: auto;
    height: auto;
    background: none;
  }

  body.home-page .quick-submit:not(:disabled):hover i,
  body.home-page .quick-submit:not(:disabled):active i {
    background: none;
  }

  body.home-page .quick-submit-arrow {
    width: 20px;
    height: 20px;
    /* 흰 바탕 동그라미가 없어졌으니 화살표를 흰색으로 뒤집는다. */
    filter: brightness(0) invert(1);
  }
}

@media (max-width: 640px) {
  body.home-page .hero-inner.container {
    width: calc(100% - 40px);
  }

  body.home-page .hero-panel {
    padding-bottom: 40px;
  }

  body.home-page .hero-copy {
    padding-top: 64px;
  }

  body.home-page .hero-title-art img {
    width: 240px;
  }

  body.home-page .hero-lead {
    font-size: 15px;
  }

  /* 알약 둘이 위아래로 선다. 폭은 글자만큼이라 왼쪽에 붙인다. */
  body.home-page .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 24px;
  }

  body.home-page .hero-actions .btn-white {
    min-height: 32px;
    padding: 0 14px;
    font-size: 13px;
  }

  body.home-page .hero-actions .btn-arrow {
    width: 14px;
    height: 14px;
  }

  /* ── 자주찾는 서비스: 칸막이 하나로 이어진 목록 ──
     PDA의 낱장 카드가 다시 한 장으로 합쳐지고, 카드 사이 간격 대신 얇은 줄로 나뉜다. */
  body.home-page .hero-service-tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 72px;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-sm);
  }

  body.home-page .hero-service-tab {
    min-height: 64px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  body.home-page .hero-service-tab + .hero-service-tab {
    border-top: 1px solid #f4f4f5;
  }

  /* ── 빠른 예약: 네 줄로 모두 편다 ── */
  body.home-page .quick-filter {
    margin-top: 20px;
    padding: 16px;
    border-radius: 24px;
  }

  body.home-page .quick-select-row {
    grid-template-columns: minmax(0, 1fr);
  }
}