/* =====================================================================
   base.css — 공통 레이아웃 (헤더/푸터/GNB/버튼) · KRDS 톤
   ===================================================================== */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }   /* 1rem = 10px */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  word-break: keep-all;
}
h1,h2,h3,h4,p,ul,ol,figure { margin: 0; }
ul,ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img,svg { vertical-align: middle; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-primary-50); outline-offset: 2px; }

/* 사이트별 강조색 */
body { --c-accent: var(--c-primary-50); --c-accent-strong: var(--c-primary-60); }
body[data-site="saebit"] { --c-accent: #0a7e76; --c-accent-strong: #075f59; } /* 새빛시 CI(청록) */
body[data-site="council"] { --c-accent: #8a1f2d; --c-accent-strong: #6b1622; } /* 새빛시의회(버건디) */
body[data-site="facility"] { --c-accent: #1f7a3a; --c-accent-strong: #155f2c; } /* 시설관리공단(그린) */
body[data-site="health"] { --c-accent: #0a6cb4; --c-accent-strong: #075590; } /* 보건소(메디컬블루) */

.inner { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--sp-20); }

/* ---- 랩 경고 배너 (의도적 취약 고지) ---- */
.lab-warning {
  background: repeating-linear-gradient(45deg,#3a0a0a,#3a0a0a 12px,#4a0d0d 12px,#4a0d0d 24px);
  color: #ffd9d4;
  font-size: var(--fs-body-xs);
  text-align: center;
  padding: var(--sp-6) var(--sp-12);
  letter-spacing: .02em;
}
.lab-warning strong { color: #fff; }

/* ---- skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--c-primary-60); color: #fff; padding: var(--sp-8) var(--sp-16);
}
.skip-link:focus { left: 0; }

/* ---- 공식배너 (Masthead) ---- */
.masthead { background: var(--c-gray-5); border-bottom: 1px solid var(--c-gray-10); }
.masthead .inner { display: flex; align-items: center; gap: var(--sp-6); height: 3.2rem; }
.masthead__txt { font-size: var(--fs-body-xs); color: var(--c-gray-60); }
.masthead__flag { width: 1.6rem; height: 1.1rem; border-radius: 1px; }
.masthead__btn { margin-left: var(--sp-6); font-size: var(--fs-body-xs); color: var(--c-gray-50); background: none; border: 0; }

/* ---- 헤더 ---- */
.gov-header { background: #fff; border-bottom: 1px solid var(--c-gray-10); }
.util-bar { border-bottom: 1px solid var(--c-gray-5); }
.util-bar .inner { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-4); height: 3.6rem; }
.util-bar a, .util-bar button {
  font-size: var(--fs-body-xs); color: var(--c-gray-60);
  background: none; border: 0; padding: 0 var(--sp-10); height: 2.0rem;
  display: inline-flex; align-items: center; gap: var(--sp-4);
  border-left: 1px solid var(--c-gray-10);
}
.util-bar > *:first-child { border-left: 0; }
.util-bar .util-strong { color: var(--c-accent-strong); font-weight: 700; }
.util-bar .util-fontsize { display: inline-flex; align-items: center; gap: 4px; border-left: 1px solid var(--c-gray-10); padding: 0 var(--sp-10); font-size: var(--fs-body-xs); color: var(--c-gray-60); }
.util-bar .util-fontsize button { border: 1px solid var(--c-gray-30); border-radius: 3px; width: 2rem; height: 2rem; line-height: 1; background: #fff; padding: 0; color: var(--c-gray-70); font-weight: 700; }
.util-bar .util-fontsize button:hover { border-color: var(--c-accent); color: var(--c-accent); }

.header-main .inner { display: flex; align-items: center; gap: var(--sp-32); height: 8.0rem; }

/* 브랜드 (엠블럼 + 기관명) */
.brand { display: flex; align-items: center; gap: var(--sp-12); }
.brand__emblem { width: 4.4rem; height: 4.4rem; flex: none; }
.brand__name { font-size: 2.2rem; font-weight: 800; color: var(--c-gray-90); letter-spacing: -.01em; }
.brand__name b { color: var(--c-accent); }
.brand__slogan { display: block; font-size: var(--fs-body-xs); color: var(--c-gray-50); font-weight: 500; margin-top: 2px; }

/* 통합검색 */
.header-search { margin-left: auto; display: flex; align-items: center; }
.header-search input {
  width: 26rem; height: 4.4rem; border: 2px solid var(--c-accent); border-right: 0;
  border-radius: var(--radius-s) 0 0 var(--radius-s); padding: 0 var(--sp-16); font-size: var(--fs-body-s);
}
.header-search button {
  height: 4.4rem; padding: 0 var(--sp-16); border: 0; background: var(--c-accent); color: #fff;
  border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: var(--fs-body-s); font-weight: 600;
}

/* GNB */
.gnb { border-top: 1px solid var(--c-gray-10); background: #fff; }
.gnb__list { display: flex; gap: var(--sp-8); }
.gnb__list > li > a {
  display: block; padding: 0 var(--sp-24); height: 5.6rem; line-height: 5.6rem;
  font-size: 1.8rem; font-weight: 700; color: var(--c-gray-80);
}
.gnb__list > li > a:hover { color: var(--c-accent); text-decoration: none; box-shadow: inset 0 -3px 0 var(--c-accent); }

/* ---- 버튼 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-6);
  height: 4.8rem; padding: 0 var(--sp-24); border-radius: var(--radius-s);
  font-size: var(--fs-body-m); font-weight: 600; border: 1px solid transparent; background: #fff;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--c-accent); color: #fff; }
.btn-primary:hover { background: var(--c-accent-strong); }
.btn-line { background: #fff; border-color: var(--c-gray-30); color: var(--c-gray-80); }
.btn-line:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn-block { width: 100%; }
.btn-lg { height: 5.6rem; font-size: var(--fs-body-l); }

/* ---- 푸터 ---- */
.gov-footer { margin-top: var(--sp-80); background: var(--c-gray-80); color: var(--c-gray-20); }
.footer-family { border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-family .inner { display: flex; gap: var(--sp-12); align-items: center; height: 5.6rem; }
.footer-family select {
  height: 4.0rem; min-width: 22rem; background: #2a2d33; color: var(--c-gray-10);
  border: 1px solid #41454c; border-radius: var(--radius-s); padding: 0 var(--sp-12); font-size: var(--fs-body-s);
}
.footer-body .inner { padding: var(--sp-32) var(--sp-20) var(--sp-48); }
.footer-policy { display: flex; flex-wrap: wrap; gap: var(--sp-20); margin-bottom: var(--sp-20); }
.footer-policy a { font-size: var(--fs-body-s); color: var(--c-gray-10); }
.footer-policy a.is-strong { font-weight: 800; color: #fff; }
.footer-info { display: flex; gap: var(--sp-32); align-items: flex-start; }
.footer-info__logo { font-size: 1.8rem; font-weight: 800; color: #fff; white-space: nowrap; }
.footer-info__addr { font-size: var(--fs-body-xs); color: var(--c-gray-30); line-height: 1.7; }
.footer-copy { margin-top: var(--sp-16); font-size: var(--fs-body-xs); color: var(--c-gray-40); }
.footer-marks { display: flex; gap: var(--sp-12); margin-top: var(--sp-20); }
.footer-mark {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  border: 1px solid #4a4e55; border-radius: var(--radius-s); padding: var(--sp-6) var(--sp-12);
  font-size: var(--fs-body-xs); color: var(--c-gray-20);
}
.footer-mark b { color: #fff; }

/* ---- 페이지 공통 ---- */
.page { min-height: 40vh; }
.breadcrumb { display: flex; gap: var(--sp-8); align-items: center; color: var(--c-gray-50); font-size: var(--fs-body-xs); padding: var(--sp-16) 0; }
.page-title { font-size: var(--fs-heading-l); font-weight: 800; color: var(--c-gray-90); }

/* 반응형(간이) */
@media (max-width: 960px){
  .header-main .inner { height: auto; flex-wrap: wrap; padding-top: var(--sp-12); padding-bottom: var(--sp-12); gap: var(--sp-12); }
  .header-search { order: 3; width: 100%; }
  .header-search input { flex: 1; width: auto; }
  .gnb__list { overflow-x: auto; }
  .footer-info { flex-direction: column; gap: var(--sp-12); }
}