@charset "utf-8";

/* ─────────────────────────────────────────────
   글꼴

   원본은 한글 11,172자를 모두 담아 한 벌에 750KB 안팎이다. 페이지마다 여러 굵기를
   받으므로 실사용 환경에서 글꼴 교체가 눈에 띄게 늦었다.

   이 사이트가 실제로 쓰는 2,346자만 남긴 서브셋을 먼저 쓴다(한 벌 70~100KB).
   서브셋에 없는 글자(드문 이름·기관명 등)가 나오면 그때만 원본(*Full)을 내려받는다.
   글꼴 스택 순서가 그 역할을 하므로 별도 처리가 필요 없다.

   서브셋 글자는 templates·static·sql·java 전체에서 뽑았다. 다시 만들려면
   같은 방식으로 글자를 모아 pyftsubset 을 돌리면 된다.
   ───────────────────────────────────────────── */

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Medium-subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-SemiBold-subset.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-Bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("../fonts/Pretendard-ExtraBold-subset.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GyeonggiMillenniumTitle";
  src: url("../fonts/Title_Light-subset.woff2") format("woff2");
  font-weight: 100 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GyeonggiMillenniumTitle";
  src: url("../fonts/Title_Medium-subset.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GyeonggiMillenniumTitle";
  src: url("../fonts/Title_Bold-subset.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GyeonggiMillenniumTitle";
  src: url("../fonts/TitleV-subset.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

/* 예비 — 서브셋에 없는 글자가 화면에 나올 때만 내려받는다 */

@font-face {
  font-family: "PretendardFull";
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PretendardFull";
  src: url("../fonts/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PretendardFull";
  src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PretendardFull";
  src: url("../fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PretendardFull";
  src: url("../fonts/Pretendard-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GyeonggiMillenniumTitleFull";
  src: url("../fonts/Title_Light.woff") format("woff");
  font-weight: 100 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GyeonggiMillenniumTitleFull";
  src: url("../fonts/Title_Medium.woff") format("woff");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GyeonggiMillenniumTitleFull";
  src: url("../fonts/Title_Bold.woff") format("woff");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GyeonggiMillenniumTitleFull";
  src: url("../fonts/TitleV.woff") format("woff");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #3f3f3f;
  --primary-dark: #1e1a14;
  --secondary: #5a5a5a;
  --muted: #6b6b6b;
  --accent: #ffc23c;
  --accent-light: #f6be3f;
  --accent-mid: #efa714;
  --accent-pale: #fad581;
  --accent-strong: #b97400;
  --accent-ink: #4a360a;
  --accent-soft: #ffe9b4;
  --point: #ff8a6b;
  --point-strong: #f26a4b;
  --point-ink: #7a2d18;
  /* 글자색으로도 쓰여 크림 배경 위 4.62:1 을 지키는 선에서 채도만 올렸다(23%->30%). */
  --green: #527e44;
  /* 흰 글자·아이콘이 얹히는 면 전용. 글자용보다 채도를 더 올릴 수 있다(52%). */
  --green-vivid: #48932f;
  --green-soft: #dce7d2;
  --bg: #fdfcf9;
  --bg-2: #f7f5f1;
  --surface: #ffffff;
  --surface-warm: #fffdf8;
  --surface-coral: #ffd7c9;
  --surface-pink: #ffeee7;
  --surface-bright: #ffffff;
  --surface-map: #fdfcf9;
  --surface-map-2: #f7e6df;
  --border: #e8e6e1;
  --border-strong: #d9d6d0;

  
  /* 지표 4계열. 네 계열을 서로 확실히 갈라야 해서 브랜드 밖 색 둘을 함께 쓴다.
     앰버 계열로만 묶어 봤으나 계열 구분이 약해져 원래 배색으로 되돌렸다. */
  /* 앰버는 옆 계열과 붙어 보였고, 레드(#d32f2f)는 옆 칸 코랄과 덜 갈렸다.
     색상환에서 코랄(hue 12)과 더 벌어지는 주황(hue 27)으로 잡는다. */
  --chart-provider: #e2660a;
  --chart-child: var(--point-strong);
  --chart-household: var(--green-vivid);
  --chart-caregiver: #2a85c6;

  /* 원형 링에 하드코딩돼 있던 하늘색. 브랜드 앰버 계열로 옮긴다. */
  --ring-accent: var(--accent-mid);

  /* 원형 아이콘 배색 6색. 레퍼런스로 지목된 충북(cbidolbom.co.kr)의 실측 채도
     64~100% 에 맞춰 올렸다. 우리 기존 초록·파랑은 채도가 23% 로 그 3분의 1이라
     색을 늘려도 칙칙해 보였다. 값은 전부 흰 아이콘 대비 3:1 이상이다
     아이콘 svg 는 aria-hidden 인 장식 요소이고 뜻은 원 아래 글자가 지므로
     1.4.11(비텍스트 3:1)의 대상이 아니다. 노랑은 흰 아이콘을 유지하면서
     머스터드로 떨어지지 않는 선(흰 대비 2.05)에서 밝게 잡았다. */
  --ring-1: #f2542d;
  --ring-2: #f2a600;
  --ring-3: #57933f;
  --ring-4: #1a8fd0;
  --ring-5: #c9506f;
  --ring-6: #7a4a9e;
  --page-bg: #f5f2f8;
  --overlay-ink-rgb: 28, 32, 24;
  --white: #ffffff;
  --black: #000000;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --container: 1440px;
  --header-container: 1440px;
  
  --font-title: "GyeonggiMillenniumTitle", "GyeonggiMillenniumTitleFull", sans-serif;
  /* 본문 폴백에 제목용 서체를 두지 않는다. 서브셋에 없는 글자 하나 때문에
     문장 중간이 제목체로 튀어 다른 글꼴처럼 보인다. 제목은 --font-title 이 따로 맡는다. */
  --font-base:  "Pretendard", "PretendardFull", system-ui, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-body:  var(--font-base);
  --font-ui:    var(--font-base);
  --font-mono:  var(--font-base);
}

body {
  color: var(--primary);
  background: var(--white);
  font-family: var(--font-base);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
  letter-spacing: 0;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
}

[data-include] {
  display: contents;
}

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

body.font-size-small {
  font-size: 16px;
  --user-text-size: 18px;
  --user-small-size: 16px;
  --user-note-size: 15px;
  --user-caption-size: 13px;
  /* 토큰이 없는 나머지 글자(제목·뱃지·버튼 등)를 기준값 대비 비율로 움직인다. */
  --user-scale: 0.9;
  --user-meta-size: 18px;
  --user-label-size: 18px;
}

body.font-size-medium {
  font-size: 18px;
  --user-text-size: 20px;
  --user-small-size: 18px;
  --user-note-size: 16px;
  --user-caption-size: 14px;
  /* 토큰이 없는 나머지 글자(제목·뱃지·버튼 등)를 기준값 대비 비율로 움직인다. */
  --user-scale: 1;
  --user-meta-size: 21px;
  --user-label-size: 20px;
}

body.font-size-large {
  font-size: 20px;
  --user-text-size: 22px;
  --user-small-size: 20px;
  --user-note-size: 18px;
  --user-caption-size: 16px;
  /* 토큰이 없는 나머지 글자(제목·뱃지·버튼 등)를 기준값 대비 비율로 움직인다. */
  --user-scale: 1.1;
  --user-meta-size: 23px;
  --user-label-size: 22px;
}

button, input, select, textarea {
  font-family: var(--font-base);
}

/* 드래그 선택 하이라이트. 배경은 포인트 색, 글자는 흰색으로 고정한다. */
::selection {
  color: var(--white);
  background: var(--point);
}

::-moz-selection {
  color: var(--white);
  background: var(--point);
}

a, button {
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(255, 194, 60, 0.55);
  outline-offset: 3px;
}

.inner {
  width: min(calc(100% - 40px), var(--container));
  margin: 0 auto;
}

.header-inner {
  width: min(calc(100% - 40px), var(--header-container));
  margin: 0 auto;
}

.skip-nav {
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
  z-index: 10000;
  padding: 12px 18px;
  color: var(--accent-ink);
  background: var(--accent);
  font-weight: 700;
  
  transform: translateY(-100%);
}

.skip-nav:focus {
  transform: translateY(0);
}

/* 아이브로우 정본. 이 파일 아래쪽과 main.css 에 중복 정의가 있어
   폰트·굵기·자간이 서로 덮이던 것을 여기 한 곳으로 모았다. */
.eyebrow {
  margin-bottom: 15px;
  color: color-mix(in srgb, var(--green) 90%, var(--primary-dark));
  font-family: var(--font-mono);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.78px;
  text-align: center;
  text-transform: uppercase;
}

.section-title {
  font-size: calc(38px * var(--user-scale));
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -1.33px;
}

.section-copy {
  color: var(--secondary);
  font-size: calc(17px * var(--user-scale));
  line-height: 1.55;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 110px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-size: calc(17px * var(--user-scale));
  line-height: 1.35;
  letter-spacing: -0.16px;
  white-space: nowrap;
}

.btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-pale);
  transform: translateY(-2px);
}

.btn-outline {
  color: var(--primary);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.78);
}

.btn-outline:hover {
  border-color: var(--accent);
  background: var(--surface-warm);
}


.site-topbar,
.topbar-links,
.font-size-button,
.gnb-link,
.mega-depth2,
.mega-depth3 a,
.mobile-depth2,
.mobile-depth3 a,
.footer-info,
.footer-nav a,
.footer-bottom,
.loc-item summary,
.loc-item > ul a,
.board-table,
.view-meta,
.notice-date,
.quick-en,
.tag,
.count,
.card-news-desc,
.gallery-card span,
.floating-nav a {
  letter-spacing: 0;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;
}

.site-topbar,
.topbar-links,
.footer-nav a,
.footer-bottom,
.view-meta,
.card-news-desc,
.gallery-card span {
  font-size: max(13px, 0.8125rem);
  font-weight: 500;
}

.quick-en,
.tag,
.count,
.notice-date,
.floating-nav a {
  font-size: max(12px, 0.75rem);
}

.font-size-button {
  font-weight: 700;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-12);
  border: 1px solid rgba(94, 132, 83, 0.16);
  border-radius: var(--radius-pill);
  color: var(--primary-dark);
  background: var(--green-soft);
  font-size: calc(13px * var(--user-scale));
  font-weight: 700;
  line-height: 1;
}

.tag.is-coral {
  border-color: rgba(242, 106, 75, 0.14);
  color: var(--primary-dark);
  background: var(--surface-coral);
}

.tag.is-gold {
  border-color: rgba(185, 116, 0, 0.14);
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media screen and (max-width: 1024px) {
  :root {
    --container: 944px;
    --header-container: 944px;
  }

  .section-title {
    font-size: calc(32px * var(--user-scale));
    line-height: 1.35;
  }
}

@media screen and (max-width: 767px) {
  .inner,
  .header-inner {
    width: 100%;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block;
  }

  .section-title {
    font-size: calc(30px * var(--user-scale));
    line-height: 1.2;
    letter-spacing: -0.8px;
  }

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

body {
  background: var(--white);
  color: var(--primary);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.section-title {
  color: var(--primary);
  font-size: calc(45px * var(--user-scale));
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -1.33px;
}

.section-copy {
  color: var(--secondary);
  line-height: 1.65;
  margin-bottom: 24px;
  word-break: auto-phrase;
  text-align: center;
  font-weight: 600;
}



.btn-secondary {
  border: 1px solid var(--border);
}

.btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--accent-pale);
}

.btn-outline {
  color: var(--primary);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.84);
}

.btn-outline:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--surface-warm);
}


html {
  overflow-x: hidden;
}

html,
body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
}

body {
  letter-spacing: 0;
}

p,
li,
a,
button,
input,
select,
textarea,
small,
span,
address,
time {
  text-rendering: optimizeSpeed;
}

body {
  font-weight: 500;
  letter-spacing: -0.2px;
}

h1, h2, h3, h4, h5, h6,
a,
button {
  font-weight: 700;
}

p, span, li, td, dd, small, address, time {
  font-weight: 500;
}

/* 본문은 실제로 제공하는 Pretendard Medium(500)을 쓴다.
   제목·버튼·메뉴 안의 span 은 부모가 정한 더 강한 위계를 그대로 물려받는다. */
:is(h1, h2, h3, h4, h5, h6, strong, b, summary, label, th, dt, .btn, .eyebrow) span {
  font-weight: inherit;
}

.section-copy {
  font-weight: 500;
}



.page-tools > .inner {
  width: min(calc(100% - 40px), var(--sub-align-width, var(--container)));
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 34px;
}


main + .page-tools {
  margin-top: -68px;
}


.page-tools .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  padding: 0 14px;
  font-size: calc(14px * var(--user-scale));
}

.page-tools .lucide-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 좁은 화면에서는 인쇄를 쓰지 않으므로 도구 모음을 감춘다.
   본문 아래 붙는 음수 여백도 함께 되돌린다. */
@media screen and (max-width: 767px) {
  .page-tools {
    display: none;
  }

  main + .page-tools {
    margin-top: 0;
  }
}

@media print {
  .site-topbar,
  .site-header,
  .all-menu-modal,
  .mobile-nav,
  .mobile-nav-backdrop,
  .location-bar,
  .site-footer,
  .floating-nav,
  .chatbot,
  .scroll-top-btn,
  .skip-nav,
  .page-tools,
  .board-search,
  .pagination,
  .share-tools,
  .lightbox {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .sub-content {
    padding: 0;
  }

  
  @page {
    margin: 12mm;
  }

  body {
    width: 1280px;
    zoom: 0.58;
  }

  .inner {
    width: 100%;
  }

  
  html.print-as-mobile body {
    width: 420px;
    zoom: 1;
  }

  html.print-as-tablet body {
    width: 944px;
    zoom: 0.78;
  }

  
  html.print-as-mobile .board-table colgroup,
  html.print-as-mobile .board-table thead {
    display: none;
  }

  html.print-as-mobile .board-table,
  html.print-as-mobile .board-table tbody,
  html.print-as-mobile .board-table tr,
  html.print-as-mobile .board-table td {
    display: block;
    width: 100%;
  }

  html.print-as-mobile .board-table tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
  }

  html.print-as-mobile .board-table td {
    padding: 4px 0;
    border-bottom: 0;
    text-align: left;
  }

  html.print-as-mobile .info-grid,
  html.print-as-mobile .gallery-grid,
  html.print-as-mobile .sitemap-grid,
  html.print-as-mobile .sns-channel-grid,
  html.print-as-mobile .form-grid {
    grid-template-columns: 1fr;
  }

  html.print-as-mobile .view-title {
    font-size: calc(22px * var(--user-scale));
  }

  
  .sub-visual {
    background: none !important;
    color: #000;
    padding: 0 0 12px;
  }

  .sub-visual::before,
  .sub-visual::after {
    display: none !important;
  }

  .sub-title,
  .sub-desc {
    color: #000 !important;
    text-shadow: none !important;
  }

  
  .view-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: calc(11px * var(--user-scale));
  }

  a {
    text-decoration: underline;
  }
}


.join-steps {
  display: flex;
  gap: 8px;
  margin: 0 0 28px;
  list-style: none;
}

.join-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--muted);
  background: var(--white);
  font-weight: 700;
}

.join-steps .step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border);
  color: var(--primary);
  font-size: calc(13px * var(--user-scale));
}

.join-steps li.is-current {
  border-color: var(--accent);
  color: var(--primary);
  background: var(--surface-warm);
}

.join-steps li.is-current .step-no {
  background: var(--accent);
}

.join-steps li.is-done {
  color: var(--accent-ink);
}

.join-steps li.is-done .step-no {
  background: var(--green-soft);
  color: var(--accent-ink);
}

.join-block {
  margin-bottom: 26px;
  padding: 0;
  border: 0;
}

.join-block > legend {
  margin-bottom: 12px;
  color: var(--primary);
  font-size: calc(17px * var(--user-scale));
  font-weight: 700;
}

.req {
  color: var(--primary-dark);
}

.type-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.type-choice label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  cursor: pointer;
}

.type-choice label:has(input:checked) {
  border-color: var(--accent-strong);
  background: var(--surface-warm);
  font-weight: 700;
}

.agree-all {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 4px;
}


.pw-strength {
  display: flex;
  gap: 4px;
  margin: 8px 0 4px;
}

.pw-strength span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: #e6e0d4;
  transition: background 0.2s ease;
}


.login-notice {
  position: fixed;
  top: var(--space-20);
  right: var(--space-20);
  z-index: 2050;
  display: grid;
  grid-template-columns: var(--space-32) minmax(0, 1fr) 44px;
  align-items: flex-start;
  gap: var(--space-12);
  width: min(90vw, 420px);
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-12);
  /* 흰 배경 위에 뜨는 요소라 왼쪽 강조선만으로는 경계가 보이지 않았다.
     그림자 없이 네 면을 두르고, 왼쪽만 강조색을 유지한다. */
  border: 1px solid var(--border-strong);
  border-left-color: var(--accent-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-bright);
  color: var(--primary);
  font-size: calc(15px * var(--user-scale));
  line-height: 1.5;
  opacity: 1;
  transform: translateY(0);
  animation: login-notice-in 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.login-notice.is-out {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

@keyframes login-notice-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-pill);
  background: var(--surface-warm);
  color: var(--accent-strong);
  font-weight: 700;
}

.login-notice-body {
  min-width: 0;
}

.login-notice-title {
  display: block;
  margin-bottom: var(--space-8);
  color: var(--primary-dark);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
}

.login-notice-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.login-notice-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  min-width: 0;
}

.login-notice-item dt {
  flex: 0 0 auto;
  color: var(--secondary);
  font-weight: 500;
}

.login-notice-item dd {
  min-width: 0;
  margin: 0;
  color: var(--primary);
}

.login-notice-item b {
  font-weight: 700;
}

.login-notice-warning {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border);
  color: var(--primary-dark);
  font-weight: 700;
}

.login-notice-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--secondary);
  cursor: pointer;
  font-size: calc(16px * var(--user-scale));
  line-height: 1;
}

.login-notice-close:hover {
  background: var(--surface-warm);
  color: var(--primary);
}

.login-notice-close:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media screen and (max-width: 767px) {
  .login-notice {
    top: var(--space-12);
    right: var(--space-12);
    left: var(--space-12);
    grid-template-columns: var(--space-32) minmax(0, 1fr) 44px;
    width: auto;
  }

  .login-notice-item {
    display: grid;
    gap: 0;
  }

  .join-steps {
    gap: 4px;
  }

  .join-steps li {
    flex-direction: column;
    gap: 4px;
    padding: 10px 6px;
    font-size: calc(13px * var(--user-scale));
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-notice {
    animation: none;
    transition: none;
  }
}

.join-step-title {
  margin: 26px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: calc(17px * var(--user-scale));
  font-weight: 700;
}

.join-step-title:first-child {
  margin-top: 0;
}

.join-hint {
  margin-top: 8px;
  color: var(--secondary);
  font-size: calc(14px * var(--user-scale));
}

.join-fields {
  display: grid;
  gap: 14px;
}

.join-field {
  display: grid;
  grid-template-columns: 130px minmax(0, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 18px;
}

.join-field > label {
  padding-top: 13px;
  font-weight: 700;
}

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


.join-input.has-button {
  display: flex;
  gap: 8px;
}

.join-input.has-button input {
  flex: 1;
}

.join-input.has-button .btn {
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  white-space: nowrap;
}


.join-note {
  padding-top: 13px;
  color: var(--muted);
  font-size: calc(14px * var(--user-scale));
  line-height: 1.5;
}

.join-note .pw-strength {
  margin: 4px 0 6px;
  max-width: 220px;
}

.join-note p {
  color: inherit;
}

@media screen and (max-width: 900px) {
  
  .join-field {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .join-field > label,
  .join-note {
    padding-top: 0;
  }
}


.ui-toasts {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ui-toast {
  min-width: 220px;
  max-width: min(90vw, 420px);
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: calc(15px * var(--user-scale));
  font-weight: 700;
  line-height: 1.5;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ui-toast.is-success { background: var(--green-vivid); }
.ui-toast.is-info    { background: #4a4a4a; }

.ui-toast.is-out {
  opacity: 0;
  transform: translateY(-6px);
}

.ui-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ui-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.ui-modal-panel {
  position: relative;
  width: min(100%, 420px);
  padding: 28px 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
}

.ui-modal-msg {
  margin-bottom: 20px;
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  line-height: 1.6;
  white-space: pre-line;
}

.ui-modal-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.ui-modal-actions .btn {
  min-width: 96px;
  min-height: 42px;
  padding: 0 20px;
}

@media print {
  .ui-toasts,
  .login-notice,
  .ui-modal {
    display: none !important;
  }
}



body :is(h1, h2,
         .section-title,
         .hero-title,
         .sub-title,
         .content-title,
         .greeting-title,
         .purpose-title,
         .purpose-section-title,
         .stats-title,
         .view-title,
         .prep-notice-title) {
  font-family: var(--font-title);
}

/* .quick-title 은 경기도체를 쓴다. 이 규칙이 특정도 (0,1,1) 로
   .quick-title 단일 클래스 지정을 이겨 Pretendard 로 되돌리고 있었다. */
body :is(.gnb-link,
         .mega-title,
         .mobile-depth1 > a,
         .floating-nav a) {
  font-family: var(--font-base);
  font-weight: 700;
}


body .sub-content :is(h1, h2, h3, h4, h5, h6,
                      strong,
                      .page-lead-text,
                      .purpose-statement p) {
  font-family: var(--font-title);
}


body :is(.footer-nav a, .policy-links a, .footer-bottom, .footer-info) {
  font-weight: 400;
}


body :is(.form-row, .join-input, .board-search, .search-box, .ds-field) select,
body select.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

body :is(.form-row, .join-input, .board-search, .search-box) select::-ms-expand {
  display: none;
}

body .family-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* 연도·기간을 고르는 독립 필터 선택 상자.
   메인 통계(.front-stats-range)와 수급 입력의 제출 현황이 역할이 같으므로 한 규칙을 공유한다.
   각 화면에서 따로 정의하던 탓에 모서리(알약/8px)·테두리색·화살표 유무가 서로 달랐다. */
.front-stats-range,
.si-status > summary select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 36px;
  padding: 0 34px 0 var(--space-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--white);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  color: var(--secondary);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125em;
  font-weight: 600;
  text-overflow: ellipsis;
}

.front-stats-range::-ms-expand,
.si-status > summary select::-ms-expand { display: none; }

body select option {
  font-family: var(--font-base);
  color: var(--primary);
}
.form-error,
.form-success,
.form-help,
.join-note,
.join-hint,
.field-message {
  margin-top: var(--space-8);
  color: var(--muted);
  font-size: calc(15px * var(--user-scale));
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
}

.form-error,
.form-help.is-error,
.join-note.is-error,
.field-message.is-error {
  color: var(--primary-dark);
  font-weight: 700;
}

.form-success,
.form-help.is-success,
.join-note.is-success,
.field-message.is-success {
  color: var(--accent-ink);
  font-weight: 700;
}

.form-help.is-warning,
.join-note.is-warning,
.field-message.is-warning {
  color: var(--accent-strong);
  font-weight: 700;
}

.req {
  margin-left: 4px;
  color: var(--primary-dark);
  font-weight: 700;
}

.join-fields {
  gap: var(--space-24);
}

.join-field {
  gap: var(--space-8) var(--space-16);
}

.join-field > label {
  padding-top: var(--space-12);
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 700;
  line-height: 1.45;
}

.join-input {
  min-width: 0;
}

.join-input input,
.join-input select,
.join-input textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--primary);
  font-size: calc(16px * var(--user-scale));
  font-weight: 500;
  line-height: 1.45;
}

.join-input textarea {
  min-height: 132px;
  padding-top: var(--space-12);
  line-height: 1.6;
}

.join-input input::placeholder,
.join-input textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.join-input input:focus,
.join-input select:focus,
.join-input textarea:focus {
  border-color: var(--accent-strong);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.join-note {
  grid-column: 2 / -1;
  padding-top: 0;
  margin-top: 0;
}

.join-note .pw-strength {
  margin: 0 0 var(--space-8);
  max-width: 224px;
}

.pw-strength span {
  background: var(--border-strong);
}

.pw-strength span.is-level-1 {
  background: var(--point-strong);
}

.pw-strength span.is-level-2 {
  background: var(--point);
}

.pw-strength span.is-level-3 {
  background: var(--accent-strong);
}

.pw-strength span.is-level-4 {
  background: var(--green-vivid);
}

@media screen and (max-width: 900px) {
  .join-note {
    grid-column: 1;
  }
}

/* 「아이돌봄서비스 신청방식」 카드(.service-apply-card)의 톤을 재사용한다.
   위쪽 8px 색 띠 + 큰 라운드가 그 톤의 핵심이고, 띠 색은 원형 배색(--ring-*)과
   같은 순번을 따라가 한 벌로 읽히게 한다.

   카드 컴포넌트가 화면마다 달라(.program-card / .feature-item / .app-qr-card /
   .intro-card) 구조를 열거하면 새 카드가 나올 때마다 선택자를 늘려야 한다.
   컨테이너에 is-banded 를 붙이고 그 직계 자식을 잡는다.

   띠와 라운드에 !important 를 쓰는 이유: 이 파일은 sub.css·main.css 보다 먼저
   로드되는데, 그쪽에 `.purpose-legal .feature-list.is-business .feature-item`
   처럼 클래스 넷짜리 규칙이 있어 특이도로는 이길 수 없다. 실제로 옮긴 직후
   8px 띠가 1px 회색으로 죽었다. padding 은 제외한다 — 좁은 화면에서 카드 여백을
   줄이는 반응형 규칙이 있어 여기서 못박으면 모바일이 망가진다. */
.is-banded > [class] {
  padding: var(--space-32);
  border-top: var(--space-8) solid var(--ring-1) !important;
  border-radius: var(--radius-xl) !important;
}

.is-banded > [class]:nth-child(6n + 2) { border-top-color: var(--ring-2) !important; }
.is-banded > [class]:nth-child(6n + 3) { border-top-color: var(--ring-3) !important; }
.is-banded > [class]:nth-child(6n + 4) { border-top-color: var(--ring-4) !important; }
.is-banded > [class]:nth-child(6n + 5) { border-top-color: var(--ring-5) !important; }
.is-banded > [class]:nth-child(6n + 6) { border-top-color: var(--ring-6) !important; }

/* 카드 안 아이콘 원도 띠와 같은 색으로 묶는다. */
.is-banded > [class] .program-card-icon { background: var(--ring-1) !important; }
.is-banded > [class]:nth-child(6n + 2) .program-card-icon { background: var(--ring-2) !important; }
.is-banded > [class]:nth-child(6n + 3) .program-card-icon { background: var(--ring-3) !important; }
.is-banded > [class]:nth-child(6n + 4) .program-card-icon { background: var(--ring-4) !important; }
.is-banded > [class]:nth-child(6n + 5) .program-card-icon { background: var(--ring-5) !important; }
.is-banded > [class]:nth-child(6n + 6) .program-card-icon { background: var(--ring-6) !important; }