: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;
  --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);
}

.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 .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;
}

.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;
}

.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 0 25px;
}

.hero-panel.container {
  width: calc(100% - 80px);
  max-width: 1840px;
  min-height: 775px;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 0 160px;
  border-radius: 200px 80px 80px 80px;
  background-image: url("../images/ui/home-hero.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

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

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

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

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

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

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

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

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

.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 {
  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);
}

.carousel-bar {
  position: relative;
  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, 25%);
  height: 100%;
  background: #ffffff;
}

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

.hero-visual {
  display: none;
}

.quick-filter.container {
  width: calc(100% - 80px);
  max-width: 1840px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 148px;
  gap: 12px;
  margin-top: -77px;
  padding-inline: 160px;
}

.quick-filter label,
.quick-submit {
  min-height: 152px;
  border-radius: 32px 64px 32px 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;
}

.quick-filter label:first-child {
  border-bottom-left-radius: 64px;
}

.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: 999px;
  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: 19px;
  font-weight: 400;
  line-height: 1.5;
}

.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;
}

.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;
}

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

.help-box h2 {
  margin-bottom: 48px;
  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: 12px;
  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;
}

.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%);
}

.section-heading .program-controls .carousel-extra {
  margin-left: 10px;
  background: transparent;
  width: 20px;
  height: 20px;
  padding: 0;
}

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

.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;
}

#homeMapTitle {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.map-title-icon {
  width: 50px;
  height: 50px;
}

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

.service-grid {
  grid-template-columns: repeat(5, minmax(0, 208px));
  gap: 24px;
}

#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 {
  margin-top: 80px;
  padding: 200px 0 88px;
  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;
}

.mini-map {
  position: relative;
  min-height: 658px;
  overflow: visible;
  border-radius: 32px 0 0 32px;
  background: url("../images/ui/home-map.png") center / cover no-repeat;
}

.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;
}

.mini-map .pin {
  display: 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;
}

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

.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 {
  align-items: flex-start;
  gap: 24px;
  min-height: 190px;
  border-radius: 32px 32px 32px 64px;
}

.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;
}

.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 {
  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;
}

.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;
  background: url("../images/ui/popup-banner-bg.png") center center / cover no-repeat;
}

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

html {
  scrollbar-gutter: stable;
}

.search-panel {
  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;
}

.search-panel-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  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;
}

.search-panel .global-search input::-webkit-search-cancel-button,
.search-panel .global-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-panel .global-search input::-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;
}

.search-panel .search-close {
  position: absolute;
  top: 100%;
  left: 50%;
  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-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;
}

.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;
}

.breadcrumbs .breadcrumb-arrow {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: rgba(255, 255, 255, 0.6);
  -webkit-mask: url("../images/ui/btn-arrow.png") no-repeat center / contain;
  mask: url("../images/ui/btn-arrow.png") no-repeat center / contain;
}

.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);
}

.breadcrumbs .breadcrumb-toggle::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  -webkit-mask: url("../images/ui/btn-arrow.png") no-repeat center / contain;
  mask: url("../images/ui/btn-arrow.png") no-repeat center / contain;
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

.breadcrumbs .breadcrumb-toggle[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}

.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: 120px 160px;
}

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

.life-list-page {
  --life-filter-height: 412px;
}

.life-culture-page {
  --life-filter-height: 492px;
}

.life-medical-page {
  --life-filter-height: 572px;
}

.life-events-page {
  --life-filter-height: 652px;
}

.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;
  /* 고정 height였을 때는 폭이 좁아져 칩이 줄바꿈돼도 컨테이너가 커지지 않아,
     4개 행이 정해진 높이 안에서 균등 압축되며(각 62.25px) 칩이 다음 행을 덮었다.
     최소 높이로 바꿔 내용에 따라 늘어나게 한다(내용이 들어맞으면 종전과 동일). */
  min-height: var(--life-filter-height);
  align-content: start;
  padding: 40px 0;
  border-top: 1.5px solid #27272a;
  border-bottom: 1.5px solid #27272A;
}

.life-desktop-filter-main {
  display: grid;
  min-height: 228px;
  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-date-fields {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.life-desktop-date-fields input {
  width: 164px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: #f4f4f5;
  color: #09090b;
  padding: 0 24px;
  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;
}

.life-desktop-card {
  display: grid;
  height: 300px;
  grid-template-columns: 400px minmax(0, 1fr) 144px;
  gap: 64px;
  padding-bottom: 40px;
  border-bottom: 1.5px solid rgba(113, 113, 123, 0.22);
}

.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;
}

.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;
}

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

.life-desktop-copy dl div:nth-child(1) dt::before {
  background-image: url("../images/ui/dt-icon-1.png");
}

.life-desktop-copy dl div:nth-child(2) dt::before {
  background-image: url("../images/ui/dt-icon-2.png");
}

.life-desktop-copy dl div:nth-child(3) dt::before {
  background-image: url("../images/ui/dt-icon-3.png");
}

.life-desktop-copy dl div:nth-child(4) dt::before {
  background-image: url("../images/ui/dt-icon-4.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;
}

.life-medical-page .care-desktop-card .life-desktop-actions {
  margin-left: -40px;
}

.life-medical-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 {
  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열. */
  grid-template-columns: repeat(auto-fit, 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 {
  min-height: 304px;
  padding: 32px;
  background: url("../images/ui/program-placeholder.png") center / cover no-repeat;
}

.life-event-thumb span {
  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;
}

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

.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;
}

.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: center / contain no-repeat;
}

.life-event-copy dl div:nth-child(1) dt::before,
.life-event-copy dl div:nth-child(2) dt::before {
  background-image: url("../images/ui/life-icon-1.png");
}

.life-event-copy dl div:nth-child(3) dt::before {
  background-image: url("../images/ui/life-icon-2.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: 50px;
  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;
}

/* 공통 .life-desktop-filter와 같은 이유로 고정 height는 칩이 줄바꿈될 때
   행끼리 겹치게 만든다(1025에서 794px). 최소 높이로 바꾼다. */
.program-list-page .life-desktop-filter {
  min-height: 652px;
}

.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: 50px;
  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. */
.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 50%;
  border-radius: 48px 120px 48px 48px;
  background: linear-gradient(108deg, #fff7eb 0%, #f4faec 100%);
}

.program-detail-mobile-media,
.program-detail-mobile-main-image {
  background:
    linear-gradient(45deg, rgba(235, 235, 235, 0.72) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.72) 75%),
    linear-gradient(45deg, rgba(235, 235, 235, 0.72) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.72) 75%),
    #fff;
  background-position: 0 0, 32px 32px;
  background-size: 64px 64px;
}

/* 카드와 같은 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;
  background: url("../images/ui/program-art.jpg") center / cover no-repeat;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
}

.program-detail-mobile-media::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  background: url("../images/ui/favorite-icon.png") center / contain no-repeat;
}

.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: center / contain no-repeat;
}

.program-detail-mobile-meta div:nth-child(1) dt::before {
  background-image: url("../images/ui/dt-icon-1.png");
}

.program-detail-mobile-meta div:nth-child(2) dt::before {
  background-image: url("../images/ui/dt-icon-2.png");
}

.program-detail-mobile-meta div:nth-child(3) dt {
  align-self: start;
}

.program-detail-mobile-meta div:nth-child(3) dt::before {
  background-image: url("../images/ui/dt-icon-3.png");
}

.program-detail-mobile-meta div:nth-child(4) dt::before {
  background-image: url("../images/ui/dt-icon-4.png");
}

.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;
}

.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;
}

.program-detail-mobile-copy > .program-detail-mobile-carousel::after {
  content: "";
  margin-left: 8px;
  height: 1px;
  background: rgba(113, 113, 123, 0.15);
}

.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;
}

.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;
}

.program-detail-mobile-carousel .carousel-arrow-prev {
  background-color: rgba(9, 9, 11, 0.13);
  transform: rotate(180deg);
}

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

.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);
}

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

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

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

.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;
}

.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;
}

.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;
}

.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 input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.join-radio-dot {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1.5px solid rgba(113, 113, 123, 0.22);
  border-radius: 999px;
  background: #fff;
}

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

.join-radio-option.is-selected .join-radio-dot,
.join-radio-option:has(input:checked) .join-radio-dot {
  border-color: #6eba2c;
  background: #6eba2c;
}

.join-radio-option.is-selected .join-radio-dot::after,
.join-radio-option:has(input:checked) .join-radio-dot::after {
  background: #fff;
}

.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;
  font-size: 17px;
  font-weight: 700;
}

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

.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;
}

.find-section-title {
  display: flex;
  gap: 12px;
  align-items: center;
}

.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;
}

.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: 50px;
  line-height: 1.32;
}

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

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

.board-list-head .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;
}

.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;
}

.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;
}

.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;
}

/* 신청·예약 내역 리스트 – 채용소식(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;
}

.mypage-reservation-page .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;
}

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

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

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

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

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

@media (min-width: 641px) {
  .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;
  }

  .mypage-reservation-page .content-toolbar .search-field .icon-button {
    position: absolute;
    top: 50%;
    right: 4px;
    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: 50px;
  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;
}

.map-search {
  margin-bottom: 32px;
}

.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;
  max-height: calc(100vh - 176px);
  padding-right: 0;
}

.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);
}

.map-page .map-list-item span {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #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;
}

.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: block;
}

.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 {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 46px;
  height: 56px;
  padding: 0 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #292929;
  font-family: "NPS_font", var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  isolation: isolate;
}

.map-page .map-canvas-large .map-pin::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -18px;
  width: 82px;
  height: 92px;
  background: var(--pin-image) center / 100% 100% no-repeat;
  z-index: -1;
}

.map-page .map-canvas-large .map-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;
}

.map-page .map-canvas-large .map-pin.is-active::after {
  display: block;
}

.map-page .map-canvas-large.has-selection .map-pin:not(.is-active) {
  display: none;
}

/* 마커 좌표는 기준 화면(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-orange.svg"); }
.map-page .pin-2 { top: 38.5185%; left: 43.5254%; --pin-image: url("../images/ui/map-marker-rose.svg"); }
.map-page .pin-3 { top: 28.9352%; left: 61.1525%; --pin-image: url("../images/ui/map-marker-blue.svg"); }
.map-page .pin-4 { top: 40.1852%; left: 41.3559%; --pin-image: url("../images/ui/map-marker-teal.svg"); }
.map-page .pin-5 { top: 50%; left: 56.2034%; --pin-image: url("../images/ui/map-marker-blue.svg"); }
.map-page .pin-6 { top: 56.3889%; left: 62.7119%; --pin-image: url("../images/ui/map-marker-orange.svg"); }
.map-page .pin-7 { top: 57.5926%; left: 34.4407%; --pin-image: url("../images/ui/map-marker-teal.svg"); }
.map-page .pin-8 { top: 60.6481%; left: 32.1356%; --pin-image: url("../images/ui/map-marker-rose.svg"); }
.map-page .pin-9 { top: 44.4444%; left: 26.9831%; --pin-image: url("../images/ui/map-marker-orange.svg"); }
.map-page .pin-10 { top: 25%; left: 29.2542%; --pin-image: url("../images/ui/map-marker-blue.svg"); }

.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;
  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;
  height: 802px;
  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;
}

.map-detail-copy .category-chip {
  display: inline-flex;
  width: fit-content;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  margin-bottom: 20px;
  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 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;
}

.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: center / contain no-repeat;
}

.map-detail-copy dl div:nth-child(1) dt::before {
  background-image: url("../images/ui/dt-icon-1.png");
}

.map-detail-copy dl div:nth-child(2) dt::before {
  background-image: url("../images/ui/dt-icon-2.png");
}

.map-detail-copy dl div:nth-child(3) dt::before {
  background-image: url("../images/ui/dt-icon-3.png");
}

.map-detail-copy dl div:nth-child(4) dt::before {
  background-image: url("../images/ui/dt-icon-4.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;
}

.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 64px;
  background-image: repeating-linear-gradient(to right, rgba(113, 113, 123, 0.3) 0, rgba(113, 113, 123, 0.3) 6px, transparent 6px, transparent 14px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}

.facility-detail-page .detail-modal-body section:last-child {
  margin-bottom: 40px;
}

.detail-modal-body h3 {
  margin-bottom: 28px;
  color: #09090b;
  font-family: "NPS_font", var(--font-sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.5;
}

.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 {
  --life-filter-height: 572px;
}

.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;
}

.care-desktop-card .life-desktop-thumb .life-desktop-favorite {
  display: inline-flex;
  top: 22px;
  right: 22px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  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-thumb .life-desktop-favorite img {
  display: block;
  width: 32px;
  height: 32px;
}

.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;
}

.life-kids-page .care-desktop-card .life-desktop-copy dl div:nth-child(1) dt::before,
.life-culture-page .care-desktop-card .life-desktop-copy dl div:nth-child(1) dt::before,
.life-medical-page .care-desktop-card .life-desktop-copy dl div:nth-child(1) dt::before {
  background-image: url("../images/ui/dt-icon-3.png");
}

.life-kids-page .care-desktop-card .life-desktop-copy dl div:nth-child(2) dt::before,
.life-culture-page .care-desktop-card .life-desktop-copy dl div:nth-child(2) dt::before,
.life-medical-page .care-desktop-card .life-desktop-copy dl div:nth-child(2) dt::before {
  background-image: url("../images/ui/dt-icon-4.png");
}

.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;
}

.facility-service-copy > .facility-service-carousel::after {
  content: "";
  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: center / contain no-repeat;
}

.facility-service-facts div:nth-child(1) dt::before {
  background-image: url("../images/ui/dt-icon-1.png");
}

.facility-service-facts div:nth-child(2) dt::before {
  background-image: url("../images/ui/dt-icon-2.png");
}

.facility-service-facts div:nth-child(3) dt {
  align-self: start;
}

.facility-service-facts div:nth-child(3) dt::before {
  background-image: url("../images/ui/dt-icon-3.png");
}

.facility-service-facts div:nth-child(4) dt::before {
  background-image: url("../images/ui/dt-icon-4.png");
}

.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;
  background: url("../images/ui/program-placeholder.png") center / cover no-repeat;
}

.facility-service-image::after {
  content: "";
  position: absolute;
  top: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  background: url("../images/ui/favorite-icon.png") center / contain no-repeat;
}

.facility-service-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;
}

.facility-service-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 {
  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;
}

.facility-service-carousel .carousel-arrow-prev {
  background-color: rgba(9, 9, 11, 0.13);
  transform: rotate(180deg);
}

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

.facility-service-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 {
  font-weight: 700;
  color: #09090B;
}

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

.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.png") center / contain no-repeat;
  mask: url("../images/ui/carousel-next.png") 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;
}

.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;
  background-image: url("../images/ui/child-center-card.png");
  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: 50px;
  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 {
  /* 폼 컨트롤은 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 {
  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 {
  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;
}

.reservation-search-control .icon-search {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 24px;
  height: 24px;
}

.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 input {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  margin: 0;
  border: 1.5px solid rgba(113, 113, 123, 0.22);
  border-radius: 8px;
  /* 체크 아이콘을 기본 배경에 깔아두면 항상 체크된 모양이라, 눌러도 변화가 없어
     클릭이 안 되는 것처럼 보인다(실제로는 토글되고 있었다).
     기본은 빈 상자, :checked면 상자를 채우고 흰 체크를 얹는다. */
  position: relative;
  background: #ffffff;
  cursor: pointer;
}

/* 체크 표시는 이미지 대신 테두리로 그린다. checkbox-icon.png은 어두운 체크라
   채워진 상자 위에서는 보이지 않는다(.join-page .term-box와 같은 방식). */
.reservation-check-row input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 0;
}

.reservation-check-row input:checked {
  border-color: #6eba2c;
  background: #6eba2c;
}

.reservation-check-row input:checked::after {
  opacity: 1;
}

.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 .home-hero {
    padding: 0 0 25px;
  }

  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;
  }

  :root {
    --header-height: 74px;
  }

  .site-header .container,
  .mega-inner.container,
  .hero-panel.container,
  .quick-filter.container,
  .page-visual-inner.container {
    width: calc(100% - 40px);
  }

  .home-hero {
    padding: 0 0 64px;
  }

  .hero-panel.container {
    min-height: 620px;
    padding: 72px 48px 150px;
    border-radius: 80px 36px 44px 44px;
    background-position: 58% center;
  }

  .hero-copy h1 {
    font-size: 48px;
  }

  .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 {
    --header-height: 60px;
  }

  .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-visual {
    padding: 0 20px 32px;
  }

  .life-list-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .life-list-page .breadcrumbs {
    display: none;
  }

  .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;
    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: 32px;
    line-height: 1.5;
  }

  .life-list-page form.search-field {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .life-list-page form.search-field {
    width: 100%;
  }

  .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;
  }

  .life-mobile-filters {
    display: grid;
    gap: 40px;
    height: 1348px;
    margin-top: 64px;
    padding-top: 40px;
    border-top: 2px solid rgba(9, 9, 11, 0.34);
  }

  /* 아코디언 접힘 시 내용 높이에 맞춤 (운영프로그램 참고) */
  .life-list-page .life-mobile-filters {
    height: auto;
    min-height: 0;
  }

  .life-filter-group {
    min-height: 116px;
    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-filter-group.date-filter {
    /* min-height: 212px; */
  }

  .life-date-fields {
    display: grid;
    gap: 8px;
    margin-top: 24px;
  }

  .life-date-fields input {
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    color: rgba(9, 9, 11, 0.55);
    font-size: 15px;
  }

  .life-filter-group.age-filter {
    /* min-height: 328px; */
  }

  .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;
  }

  .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 {
    height: 237px;
    border-radius: 24px 24px 0 0;
    background:
      linear-gradient(45deg, rgba(235, 235, 235, 0.55) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.55) 75%),
      linear-gradient(45deg, rgba(235, 235, 235, 0.55) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.55) 75%),
      #fff;
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
  }

  .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: 32px;
    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 {
    --header-height: 60px;
  }

  .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-form-page .page-visual {
    padding: 0 20px 32px;
  }

  .reservation-form-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .reservation-form-page .breadcrumbs {
    display: none;
  }

  .reservation-form-page .page-visual h1 {
    max-width: 250px;
    margin-inline: auto;
    font-size: 32px;
    line-height: 1.5;
  }

  .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-check-row input {
    width: 24px;
    min-height: 24px;
    flex-basis: 24px;
  }

  .reservation-form-actions {
    flex-direction: column;
  }

  .reservation-form-actions .btn,
  .reservation-form-actions .btn-ghost,
  .reservation-form-actions .btn-primary {
    width: 100%;
  }

  .program-list-page {
    --header-height: 60px;
  }

  .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-visual {
    padding: 0 20px 32px;
  }

  .program-list-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .program-list-page .breadcrumbs {
    display: none;
  }

  .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;
    min-height: 0;
    gap: 24px;
    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 + 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;
  }

  .program-list-page .content-toolbar .search-field {
    display: block;
    width: 100%;
    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: 4px;
    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 {
    height: 237px;
    border-radius: 24px 24px 0 0;
    background: url("../images/ui/program-placeholder.png") center / cover no-repeat;
  }

  .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 {
    --header-height: 60px;
  }

  .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-visual {
    padding: 0 20px 32px;
  }

  .program-detail-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 32px;
  }

  .program-detail-page .breadcrumbs {
    display: none;
  }

  .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;
    min-height: 0;
    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;
    align-items: flex-start;
    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-media,
  .program-detail-mobile-main-image {
    background:
      linear-gradient(45deg, rgba(235, 235, 235, 0.72) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.72) 75%),
      linear-gradient(45deg, rgba(235, 235, 235, 0.72) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.72) 75%),
      #fff;
    background-position: 0 0, 16px 16px;
    background-size: 32px 32px;
  }

  .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: url("../images/ui/program-art.jpg") center / cover no-repeat;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
  }

  .program-detail-mobile-media::after {
    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;
  }

  .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;
  }

  .care-reservation-page .care-search-toolbar {
    width: 100%;
  }

  .care-reservation-page .page-visual h1 {
    max-width: 250px;
    margin-inline: auto;
  }

  .care-reservation-page .care-mobile-filters {
    height: auto;
    padding-bottom: 40px;
  }

  /* 연령대 그룹의 공통 328px 고정 높이를 접힘 기준(다른 그룹과 동일)으로 낮춘다. */
  .care-reservation-page .care-mobile-filters .life-filter-group.age-filter {
    min-height: 116px;
  }

  /* 운영프로그램: 모바일 필터 컨테이너 고정 높이 해제 + 그룹 높이를 접힘 기준으로 */
  .program-list-page .life-mobile-filters {
    height: auto;
    min-height: 0;
  }

  .program-list-page .life-mobile-filters .life-filter-group.age-filter,
  .program-list-page .life-mobile-filters .life-filter-group.date-filter {
    min-height: 116px;
  }

  /* 필터 초기화의 ↻ 글자 → 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.png (회색 원 유지, 아래 방향).
     .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.png") center / contain no-repeat;
    mask: url("../images/ui/carousel-next.png") 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: 74px 110px;
  }

  .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: 32px;
    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%;
  }

  /* 의료기관: 데스크톱 정렬용 margin-left(-40px)·고정폭(172px)을 모바일에서 리셋 → 좌측 넘침 방지 */
  .life-medical-page .care-desktop-card .life-desktop-actions {
    margin-left: 0;
  }

  .life-medical-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 {
    width: 16px;
    height: 16px;
  }

  .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 {
    padding: 0 20px 32px;
  }

  .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::after {
    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: 74px 70px;
  }

  .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;
  }

  .reservation-form-page .reservation-form-actions {
    flex-direction: row;
    gap: 12px;
    margin-top: 73px;
  }

  .reservation-form-page .reservation-form-actions .btn {
    min-height: 64px;
  }

  .reservation-form-page .reservation-form-actions .btn-ghost {
    width: 122px;
  }

  .reservation-form-page .reservation-form-actions .btn-primary {
    flex: 1 1 auto;
    width: auto;
  }

  .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: 36px;
  }

  .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 {
    --header-height: 60px;
  }

  .join-page .site-header {
    height: var(--header-height);
  }

  .join-page .header-inner {
    min-height: var(--header-height);
  }

  .join-page .page-visual {
    padding: 0 20px;
  }

  .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: 96px 58px;
  }

  .join-terms-page .page-main {
    padding-bottom: 0;
  }

  .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-terms-page .join-layout::before {
    content: "회원가입!";
  }

  .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 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;
    margin-left: -20px;
    color: #09090b;
    font-size: 14px;
    line-height: 1.45;
  }

  .join-page .term-box input {
    appearance: none;
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border: 1.5px solid #dfe3e8;
    border-radius: 5px;
    background: #fff;
    padding: 0;
  }

  /* 약관/폼 라벨 모바일 패딩 */
  .auth-panel label,
  .form-panel label,
  .terms-panel label {
    display: grid;
    gap: 10px;
    color: var(--color-ink-soft);
    font-weight: 900;
  }

  .join-page .term-box input::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 8px;
    width: 6px;
    height: 11px;
    border: solid #cfd4da;
    border-width: 0 2px 2px 0;
    opacity: 0.75;
    transform: rotate(45deg);
  }

  .join-page .term-box input:checked {
    border-color: #6eba2c;
    background: #6eba2c;
  }

  .join-page .term-box input:checked::after {
    border-color: #fff;
    opacity: 1;
  }

  .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-visual {
    padding: 0 20px 32px;
  }

  .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-visual {
    padding: 0 20px 32px;
  }

  .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;
  }

  .join-general-page .join-field input,
  .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-radio-dot {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .join-general-page .join-radio-option input {
    width: auto;
    min-height: 0;
    padding: 0;
  }

  .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-visual {
    padding: 0 20px 32px;
  }

  .join-complete-page .page-main {
    padding: 20px 0 64px;
  }

  .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;
  }

  .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 {
    --header-height: 60px;
  }

  .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 {
    padding: 0 20px 32px;
  }

  .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 {
    --header-height: 60px;
  }

  .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 {
    padding: 0 20px 32px;
  }

  .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;
  }

  .mypage-edit-field .radio-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
  }

  .radio-row label::before {
    content: "";
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(113, 113, 123, 0.22);
    border-radius: 999px;
    background:
      radial-gradient(circle at center, rgba(113, 113, 123, 0.22) 0 6px, transparent 6px),
      #fff;
  }

  .radio-row label:has(input:checked)::before {
    border-color: #6eba2c;
    background:
      radial-gradient(circle at center, #fff 0 6px, transparent 6px),
      #6eba2c;
  }

  .mypage-child-add {
    position: relative;
    margin-bottom: 64px;
    border: 1px solid #6eba2c;
    border-radius: 12px;
    background: #fff;
    color: #6eba2c;
  }

  .mypage-edit-page .mypage-child-add::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 64px);
    height: 1.5px;
    background-image: repeating-linear-gradient(
      to right,
      #e4e4e4 0,
      #e4e4e4 6px,
      transparent 6px,
      transparent 14px
    );
  }

  .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);
  }

  .mypage-reservation-page .mypage-reservation-heading {
    display: grid;
    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;
  }

  .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%;
  }

  .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;
    width: 32px;
    height: 32px;
  }

  .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 {
    --header-height: 60px;
  }

  .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 {
    padding: 0 20px 32px;
  }

  .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;
  }

  .life-list-page form.search-field {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .life-list-page form.search-field {
    width: 100%;
  }

  .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;
  }

  .life-mobile-filters {
    display: grid;
    gap: 40px;
    height: 1348px;
    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);
  }

  /* 아코디언 접힘 시 내용 높이에 맞춤 (운영프로그램 참고) */
  .life-list-page .life-mobile-filters {
    height: auto;
    min-height: 0;
  }

  .life-filter-group {
    min-height: 116px;
    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-filter-group.date-filter {
    /* min-height: 212px; */
  }

  .life-date-fields {
    display: grid;
    gap: 8px;
    margin-top: 24px;
  }

  .life-date-fields input {
    min-height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f4f4f5;
    color: rgba(9, 9, 11, 0.55);
    font-size: 15px;
  }

  .life-filter-group.age-filter {
    /* min-height: 328px; */
  }

  .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 {
    height: 237px;
    border-radius: 24px 24px 0 0;
    background:
      linear-gradient(45deg, rgba(235, 235, 235, 0.55) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.55) 75%),
      linear-gradient(45deg, rgba(235, 235, 235, 0.55) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.55) 75%),
      #fff;
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
  }

  .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;
  }

  .program-list-page .life-mobile-filters {
    height: auto;
    min-height: 0;
  }

  .program-list-page .life-mobile-filters .life-filter-group.age-filter,
  .program-list-page .life-mobile-filters .life-filter-group.date-filter {
    min-height: 116px;
  }

  /* 접힘 상태에서는 칩/날짜 필드를 숨기고, 펼침(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 {
    --header-height: 60px;
  }

  .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 {
    padding: 0 20px 32px;
  }

  .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;
  }

  .program-list-page .content-toolbar .search-field {
    display: block;
    width: 100%;
    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;
  }

  /* 돌출 아이콘(-24px)을 내부로 → 화면 넘침 방지, 아이콘 유지 */
  .program-list-page .content-toolbar .search-field .icon-button {
    top: 50%;
    right: 4px;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
  }

  .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;
  }

  .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 {
    height: 237px;
    border-radius: 24px 24px 0 0;
    background: url("../images/ui/program-placeholder.png") center / cover no-repeat;
  }

  .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 {
    --header-height: 60px;
  }

  .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 {
    padding: 0 20px 32px;
  }

  .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-media,
  .program-detail-mobile-main-image {
    background:
      linear-gradient(45deg, rgba(235, 235, 235, 0.72) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.72) 75%),
      linear-gradient(45deg, rgba(235, 235, 235, 0.72) 25%, transparent 25% 75%, rgba(235, 235, 235, 0.72) 75%),
      #fff;
    background-position: 0 0, 16px 16px;
    background-size: 32px 32px;
  }

  .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: url("../images/ui/program-art.jpg") center / cover no-repeat;
    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;
  }

  .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-body p:last-of-type {
    /* min-height: 572px; */
  }

  .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 {
    --header-height: 60px;
  }

  .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 {
    padding: 0 20px 32px;
  }

  .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: 20px 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 {
    --header-height: 60px;
  }

  .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 {
    padding: 0 20px;
  }

  .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: 52px 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;
  }
}

/* 게시판(공지·채용 목록/상세)은 PDA에서도 PC 표가 아니라 모바일 카드형 유지 → ≤1024로 확장 */
@media (max-width: 1024px) {
  .board-page {
    --header-height: 60px;
  }

  .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-page .page-visual-inner.container {
    width: 100%;
    min-height: 200px;
    border-radius: 24px;
  }

  .board-list-page .page-main {
    padding-block: 96px 64px;
  }

  .board-list-head {
    display: block;
    margin-bottom: 64px;
  }

  .board-list-head h2 {
    font-size: 32px;
    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;
    gap: 20px 14px;
    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;
  }

  .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: 96px 41px;
  }

  .board-section-title {
    margin-bottom: 64px;
    font-size: 30px;
    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 {
    --header-height: 60px;
  }

  .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;
    padding-right: 20px; /* 돌출 버튼(right:-20px) 공간 확보 → 화면 넘침 방지 */
  }

  /* 고정 336px(인라인) 대신 남은 폭을 채우도록 유동폭 처리 */
  .map-keyword {
    min-height: 56px;
    width: auto !important;
  }

  .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;
    padding-right: 0;
  }

  .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: 16px;
  }

  .map-page .map-canvas-large .map-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;
  }

  /* 팝업 초록 테두리 제거 */
  .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;
  }

  .map-detail-page .map-detail-card {
    position: absolute;
    top: 448px;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 32px 32px 0 0;
    box-shadow: none;
  }

  .map-detail-page .map-workspace {
    min-height: 1292px;
    background: #fff;
  }

  .map-detail-page .map-sidebar {
    display: none;
  }

  .map-detail-page .map-canvas-large {
    min-height: 1292px;
    background-position: -602px -302px;
    background-size: 1599px 921px;
  }

  .map-detail-page .map-canvas-large .map-pin:not(.pin-1) {
    display: none;
  }

  .map-detail-page .map-canvas-large .pin-1 {
    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;
  }

  .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%);
  }

  .map-detail-page .map-detail-thumb::before {
    width: 80px;
    height: 80px;
    background: #e9e9eb;
  }

  .map-detail-page .map-detail-thumb::after {
    content: "▦";
    position: absolute;
    top: 126px;
    left: 50%;
    transform: translateX(-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: 40px;
  }

  .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;
  }

  .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%;
  }

  .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;
  }

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

  .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;
  }

  .page-visual {
    padding: 0;
  }

  /* 모바일 배너 공통. 배너 원본(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,
  .document-page .page-visual,
  .sitemap-page .page-visual {
    padding: 0 20px 32px;
  }

  .auth-page .page-visual-inner.container,
  .document-page .page-visual-inner.container,
  .sitemap-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 {
    max-width: 280px;
    line-height: 1.5;
  }

  /* 로그인: 데스크톱 page-main 패딩(120/160)이 모바일에서 과함 → 축소 */
  .login-page .page-main {
    padding-block: 64px 64px;
  }

  /* 문서 페이지(개인정보처리방침·이메일무단수집거부·rss): 동일하게 축소 */
  .document-page .page-main {
    padding-block: 64px 64px;
  }

  /* 사이트맵 모바일 */
  .sitemap-page .page-main {
    padding-block: 64px;
  }

  .sitemap-title {
    margin-bottom: 24px;
  }

  .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;
  }

  .care-reservation-page .page-visual h1,
  .reservation-form-page .page-visual h1 {
    max-width: 250px;
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  body.home-page {
    --header-height: 80px;
  }

  body.home-page .site-header {
    height: var(--header-height);
  }

  body.home-page .site-header .container,
  body.home-page .hero-panel.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% - 80px);
  }

  body.home-page .top-button {
    display: none;
  }

  body.home-page .home-hero {
    padding: 0 0 32px;
  }

  body.home-page .hero-panel.container {
    min-height: 912px;
    align-items: stretch;
    padding: 32px;
    border-radius: 130px 50px 50px 50px;
    background: #bfd4ed;
  }

  body.home-page .hero-panel.container::before {
    display: block;
    inset: auto;
    left: -167.76%;
    top: -57.74%;
    width: 277.77%;
    height: 130.64%;
    background-image: url("../images/ui/home-hero-pad.jpg");
    background-position: center;
    background-size: 100% 100%;
  }

  body.home-page .hero-panel.container::after {
    display: block;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%),
      linear-gradient(180deg, rgba(191, 212, 237, 0) 0%, rgba(191, 212, 237, 0) 55%, #bfd4ed 65%, #bfd4ed 100%);
  }

  body.home-page .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 24px;
    z-index: 1;
    width: 100%;
    padding: 0;
  }

  body.home-page .hero-copy h1 {
    font-size: 32px;
    line-height: 1.5;
  }

  body.home-page .hero-service-word {
    display: block;
  }

  body.home-page .hero-actions,
  body.home-page .carousel-controls {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
  }

  body.home-page .hero-actions {
    gap: 12px;
  }

  body.home-page .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;
  }

  body.home-page .card-media {
    height: 160px;
  }

  body.home-page .map-preview-band {
    margin-top: 80px;
    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;
  }

  body.home-page .mini-map {
    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;
  }

  body.home-page .home-map-search {
    position: relative;
    display: block;
    width: 449px;
    margin: 24px 32px 0;
  }

  body.home-page .home-map-search input {
    width: 449px;
    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);
  }

  body.home-page .compact-list {
    display: grid;
    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 .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 .program-strip .program-heading-vector {
    display: none;
  }

  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-banner {
    width: auto;
    height: 417px;
    min-height: 417px;
    border-radius: 40px;
  }

  body.home-page .site-footer {
    min-height: 557px;
  }
}

@media (max-width: 640px) {
  body.home-page {
    --header-height: 60px;
  }

  body.home-page .site-header .container,
  body.home-page .hero-panel.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% - 40px);
  }

  body.home-page .carousel-progress {
    gap: 4px;
  }

  body.home-page .carousel-bar {
    width: auto;
    height: auto;
    background: none;
  }

  body.home-page .carousel-bar::before {
    content: "/";
    position: static;
    width: auto;
    background: none;
    color: rgba(255, 255, 255, 0.6);
  }

  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;
  }

  body.home-page .home-hero {
    padding: 0 0 32px;
  }

  body.home-page .hero-panel.container {
    min-height: 548px;
    align-items: stretch;
    padding: 24px;
    border-radius: 100px 40px 40px 40px;
    background: #bfd4ed;
  }

  body.home-page .hero-panel.container::before {
    left: -241.6%;
    top: -65.39%;
    width: 376.46%;
    height: 133.38%;
    background-image: url("../images/ui/home-hero-mobile.jpg");
  }

  body.home-page .hero-panel.container::after {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%),
      linear-gradient(180deg, rgba(191, 212, 237, 0) 0%, rgba(191, 212, 237, 0) 30%, #bfd4ed 40%, #bfd4ed 100%);
  }

  body.home-page .hero-copy {
    width: 100%;
  }

  body.home-page .hero-copy h1 {
    font-size: 32px;
    line-height: 1.5;
  }

  body.home-page .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  body.home-page .btn-white {
    min-height: 40px;
    padding: 0 12px;
    font-size: 15px;
  }

  body.home-page .carousel-controls {
    flex-direction: row;
    gap: 12px;
    font-size: 17px;
  }

  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 {
    gap: 80px;
    margin-bottom: 80px;
  }

  body.home-page .help-box {
    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;
  }

  body.home-page .service-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.home-page .service-card {
    min-height: 284px;
  }

  body.home-page .service-card:nth-child(6) {
    display: none;
  }

  body.home-page .card-media {
    height: 160px;
  }

  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;
  }

  body.home-page .map-title-icon {
    position: absolute;
    right: 20px;
    bottom: calc(100% + 20px);
    width: 40px;
    height: 40px;
  }

  body.home-page #homeMapTitle {
    margin-bottom: 34px;
  }

  body.home-page .mini-map {
    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);
  }

  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와 동일하게 기준을 섹션으로 넘긴다. program-heading-vector는 여기서도 display:none. */
  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-banner {
    height: auto;
    min-height: 194px;
    margin-bottom: 100px;
    border-radius: 24px;
  }

  body.home-page .popup-banner strong {
    font-size: 54px;
  }

  body.home-page .site-footer {
    min-height: 572px;
  }
}

@media (max-width: 1024px) {
  .board-list-head {
    display: grid;
    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: 64px 64px;
  }

  /* 시설 소개 카드: 지역아동센터와 달리 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).
     문의를 버튼 줄 위로 분리한다. */
  .facility-service-actions {
    grid-template-columns: 118px minmax(0, 1fr) minmax(0, 164px);
  }

  .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;
  }

  .mypage-facility-list-page .mypage-content {
    justify-items: stretch;
    padding: 32px;
  }

  .mypage-facility-list-page .mypage-facility-heading {
    display: grid;
    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;
  }

  .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;
  }

  /* 기준을 섹션으로 넘기기 위해 해제. PDA에서 이 <p>의 relative는
     program-heading-vector가 display:none이라 쓰이지 않는다. */
  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 183px;
  }

  .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;
  }

  body.home-page .home-map-search {
    position: relative;
    display: block;
    width: 449px;
    margin: 24px 32px 0;
  }

  body.home-page .home-map-search input {
    width: 449px;
    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);
  }

  body.home-page .compact-list {
    display: grid;
    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%);
  }

  body.home-page .program-strip .program-heading-vector {
    position: absolute;
    top: calc(50% + 90px);
    left: calc(100% + 200px + 100.99px + 14px);
    width: 665px;
    max-width: none;
    height: 139px;
    transform: translateY(-50%);
  }

  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;
    transition: font-weight 0.15s ease, opacity 0.15s ease;
  }

  .footer-links a:hover,
  .footer-links a:focus {
    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:hover,
  .footer-links a:focus {
    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:hover,
  .footer-links a:focus {
    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: 80px 96px;
  }

  .mypage .mypage-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
  }

  .mypage .mypage-side {
    width: 220px;
    top: 88px;
  }

  /* 신청·예약 내역: 제목+툴바 세로 스택, 표는 가로 스크롤 */
  .mypage-reservation-page .mypage-reservation-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .mypage-reservation-page .content-toolbar {
    flex-basis: auto;
    width: 100%;
  }

  .mypage-reservation-page .table-wrap {
    overflow-x: auto;
  }

  .mypage-reservation-page .board-table {
    min-width: 520px;
  }

  /* 시설 상세 프로세스: 데스크톱 가로 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);
  }

  /* 돌봄서비스 신청·예약: 검색버튼 오버행(-24px)이 태블릿에서 넘침 → 안쪽으로 */
  .care-reservation-page .care-search-toolbar .icon-button {
    right: 4px;
  }

  /* 프로그램·행사 결과 카드 그리드: 2열 고정은 641~800에서 카드가 273px까지 눌려
     메타 값이 4줄로 깨졌다. 기본 규칙의 auto-fit(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 {
    display: grid;
    gap: 24px;
  }

  /* 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 규칙을 모두 이긴다. */
.join-terms-page .term-box input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  margin: 0;
  border: 1.5px solid rgba(113, 113, 123, 0.22);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.join-terms-page .term-box input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  opacity: 0;
}

.join-terms-page .term-box input[type="checkbox"]:checked {
  border-color: #6eba2c;
  background: #6eba2c;
}

.join-terms-page .term-box input[type="checkbox"]:checked::after {
  opacity: 1;
}

/* 돌봄map PDA: .map-workspace가 [430px 사이드바 + 나머지] 고정이라
   지도가 641에서 196px, 768에서 323px까지 눌려 세로로 길게 왜곡됐다.
   모바일처럼 세로로 쌓되, 지도는 크롭(≤640) 대신 기준 비율(1475:1080)을
   유지해 %로 바꾼 마커 좌표가 설계 위치 그대로 찍히게 한다. */
@media (min-width: 641px) and (max-width: 1024px) {
  .map-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }

  .map-canvas-large {
    order: 1;
    min-height: 0;
    aspect-ratio: 1475 / 1080;
    border-radius: 0;
  }

  .map-sidebar {
    order: 2;
    min-height: 0;
  }

  /* 선택 상세 패널은 캔버스 안에 height:802px로 절대배치돼 있어, 비율로 낮아진
     캔버스(458~739px)에서 위쪽이 103~384px 잘리고 닫기 버튼까지 가려졌다.
     캔버스 높이에 맞춰 위아래를 물리고 넘치는 내용은 내부 스크롤로 본다. */
  .map-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;
  }
}