/* ============================================================================
   portal-base.css — 사용자 포털 전용 기반 스타일
   ----------------------------------------------------------------------------
   2026-08-09 발주처 지시로 **관리자와 사용자 포털의 CSS 를 완전히 분리**했다.
   전에는 두 화면이 같은 파일을 공유해서, 한쪽을 고치면 다른 쪽이 조용히 따라 바뀌었다.

   이 파일은 다음을 순서대로 병합한 것이다(원본은 삭제했다 — 두 벌을 두면 어느 쪽이
   진짜인지 알 수 없게 된다):
     krds-compat.css
     krds-compat-debc.css
     krds.css
     common.css
     debc-tokens.css

   **사용자 포털 화면에만 로드된다.** 반대쪽에 영향을 주지 않으므로 마음껏 고쳐도 된다.
   다만 같은 수정이 반대쪽에도 필요하면 **양쪽 파일을 모두 고쳐야 한다** — 이것이
   분리의 대가다. 공통으로 되돌리고 싶어지면 그때 다시 합치면 된다.

   벤더 원본(`/krds/resources/css/token/krds_tokens.css`)만은 양쪽이 함께 링크한다.
   KRDS 공식 배포본이라 우리가 고칠 일이 없고, 복제하면 배포본 갱신 때 두 곳을 손대야 한다.
   ========================================================================== */

/* ============================================================================
   rem 기준 = KRDS 표준 62.5% (1rem = 10px) — 2026-08-19 통일
   ----------------------------------------------------------------------------
   퍼블(KRDS) CSS 는 `html{font-size:62.5%}` 를 깔고 그 위에 모든 값을 rem 으로 쓴다.
   우리 1차 CSS 는 브라우저 기본 16px 을 전제로 쓰였다. 두 전제가 한 화면(pb-sub)에서
   만나면서 **우리 규칙만 62.5% 로 줄어 있었다** — 실측 2026-08-19:
     .rnw-note 8.2px · .rnw-tbl td 9.5px · 본문 p 12.5px  (서브 화면 본문이 전부 이렇다)
   기준이 두 개면 같은 `.9rem` 이 화면마다 다른 크기가 된다. 그래서 루트를 62.5% 로
   **통일하고, 16px 기준으로 쓰여 있던 rem 값을 전부 ×1.6 했다**(2,199건).
   → 계산된 px 는 관리자·메인에서 종전과 같고, 서브 화면만 의도한 크기로 돌아온다.

   ※ 앞으로 이 파일(과 css/admin/*, css/portal/*)에 값을 쓸 때는 **1rem = 10px** 이다.
     본문 크기는 1.7rem, 작은 글씨 1.5rem — KRDS 토큰과 같은 눈금을 쓴다.
   ※ 미디어쿼리의 rem 은 root 가 아니라 «초기값 16px» 기준이다. 여기서는 px 만 쓴다.
   ========================================================================== */
html { font-size: 62.5%; }


/* ─────────── krds-compat.css ─────────── */
/*
 * ============================================================
 * krds-compat.css — Bootstrap 제거에 따른 호환/구조 레이어
 * 디지털정부 표준 디자인시스템(KRDS) 토큰 기반.
 * ------------------------------------------------------------
 * 목적: bootstrap.min.css / bootstrap.bundle.min.js 를 제거하고
 *   공식 krds.min.css(디자인 시스템) + 이 파일(레이아웃/유틸/컴포넌트 구조)
 *   로 동작하도록, 템플릿이 사용하는 Bootstrap 클래스명을 KRDS 톤으로 재구현한다.
 * 로드 순서: krds.min.css(공식) → common.css → (이 파일) → krds.css(스킨 미세조정)
 * JS 동작(드롭다운/모바일메뉴/알림닫기)은 krds-compat.js 가 담당.
 * Pretendard GOV @font-face 포함(공식 패키지 폰트, /krds/resources/fonts).
 * ============================================================ */

/* ── Pretendard GOV (KRDS 표준 서체) ── */
@font-face { font-family:"Pretendard GOV"; font-weight:400; font-display:optional;
  src:url("/krds/resources/fonts/PretendardGOV-Regular.subset.woff2") format("woff2"),
      url("/krds/resources/fonts/PretendardGOV-Regular.subset.woff") format("woff"); }
@font-face { font-family:"Pretendard GOV"; font-weight:500; font-display:optional;
  src:url("/krds/resources/fonts/PretendardGOV-Medium.subset.woff2") format("woff2"),
      url("/krds/resources/fonts/PretendardGOV-Medium.subset.woff") format("woff"); }
@font-face { font-family:"Pretendard GOV"; font-weight:600; font-display:optional;
  src:url("/krds/resources/fonts/PretendardGOV-Bold.subset.woff2") format("woff2"),
      url("/krds/resources/fonts/PretendardGOV-Bold.subset.woff") format("woff"); }
@font-face { font-family:"Pretendard GOV"; font-weight:700; font-display:optional;
  src:url("/krds/resources/fonts/PretendardGOV-Bold.subset.woff2") format("woff2"),
      url("/krds/resources/fonts/PretendardGOV-Bold.subset.woff") format("woff"); }

/* ── KRDS 컬러/형상 토큰(로컬 별칭) ── */
:root{
  --k-primary:#256EF4; --k-primary-hover:#0B50D0; --k-primary-active:#0A47B5;
  --k-primary-light:#E8F0FE; --k-primary-bg:#F0F6FF;
  --k-g0:#FFF; --k-g5:#F4F5F6; --k-g10:#E7E8EA; --k-g20:#CDD1D5; --k-g40:#9EA4AA;
  --k-g60:#58616A; --k-g80:#33363D; --k-g90:#1E2124;
  --k-success:#228738; --k-danger:#DE3412; --k-warning:#FF9000; --k-info:#256EF4;
  --k-radius:6px; --k-radius-lg:12px;
  --k-font:"Pretendard GOV","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic","맑은 고딕",sans-serif;
}

/* ── 기본 박스모델/타이포 ── */
*,*::before,*::after{ box-sizing:border-box; }
body{ font-family:var(--k-font); color:var(--k-g90); line-height:1.6; margin:0; }
h1,h2,h3,h4,h5,h6{ margin:0 0 0.8rem; font-weight:700; line-height:1.25; }
p{ margin:0 0 1.6rem; }
ul,ol{ margin:0; padding:0; }
a{ color:var(--k-primary); text-decoration:none; }
a:hover{ color:var(--k-primary-hover); text-decoration:underline; }
img{ max-width:100%; height:auto; vertical-align:middle; }
hr{ border:0; border-top:1px solid var(--k-g10); margin:1.6rem 0; opacity:1; }
small,.small{ font-size:.875em; }
:focus-visible{ outline:3px solid #4A91FF; outline-offset:2px; }

/* ── 컨테이너 ── */
.container,.container-fluid{ width:100%; padding-right:1.2rem; padding-left:1.2rem; margin-right:auto; margin-left:auto; }
.container{ max-width:1140px; }

/* ── 그리드 ── */
.row{ display:flex; flex-wrap:wrap; margin-right:-1.2rem; margin-left:-1.2rem; }
.row>*{ box-sizing:border-box; padding-right:1.2rem; padding-left:1.2rem; }
.col{ flex:1 0 0%; }
.col-auto{ flex:0 0 auto; width:auto; }
.col-1{flex:0 0 auto;width:8.3333%}.col-2{flex:0 0 auto;width:16.6667%}.col-3{flex:0 0 auto;width:25%}
.col-4{flex:0 0 auto;width:33.3333%}.col-5{flex:0 0 auto;width:41.6667%}.col-6{flex:0 0 auto;width:50%}
.col-7{flex:0 0 auto;width:58.3333%}.col-8{flex:0 0 auto;width:66.6667%}.col-9{flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.3333%}.col-11{flex:0 0 auto;width:91.6667%}.col-12{flex:0 0 auto;width:100%}
/* 거터 */
.g-0{margin:0}.g-0>*{padding:0}
.g-1{margin:-0.4rem}.g-1>*{padding:0.4rem}
.g-2{margin:-0.8rem}.g-2>*{padding:0.8rem}
.g-3{margin:-1.2rem}.g-3>*{padding:1.2rem}
.g-4{margin:-1.6rem}.g-4>*{padding:1.6rem}
.g-5{margin:-2.4rem}.g-5>*{padding:2.4rem}

/* ── 디스플레이 / 플렉스 ── */
.d-none{display:none!important}.d-block{display:block!important}.d-inline{display:inline!important}
.d-inline-block{display:inline-block!important}.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}.d-grid{display:grid!important}
.flex-column{flex-direction:column!important}.flex-row{flex-direction:row!important}
.flex-wrap{flex-wrap:wrap!important}.flex-fill{flex:1 1 auto!important}.flex-grow-1{flex-grow:1!important}
.align-items-center{align-items:center!important}.align-items-start{align-items:flex-start!important}
.align-items-end{align-items:flex-end!important}.align-self-center{align-self:center!important}
.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}
.justify-content-end{justify-content:flex-end!important}.justify-content-start{justify-content:flex-start!important}
.justify-content-around{justify-content:space-around!important}
.gap-1{gap:0.4rem!important}.gap-2{gap:0.8rem!important}.gap-3{gap:1.6rem!important}.gap-4{gap:2.4rem!important}
.text-nowrap{white-space:nowrap!important}

/* ── 간격(여백) 0~5: .25/.5/1/1.5/3rem ── */
.m-0{margin:0!important}.m-1{margin:0.4rem!important}.m-2{margin:0.8rem!important}.m-3{margin:1.6rem!important}.m-4{margin:2.4rem!important}.m-5{margin:4.8rem!important}.m-auto{margin:auto!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:0.4rem!important}.mt-2{margin-top:0.8rem!important}.mt-3{margin-top:1.6rem!important}.mt-4{margin-top:2.4rem!important}.mt-5{margin-top:4.8rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:0.4rem!important}.mb-2{margin-bottom:0.8rem!important}.mb-3{margin-bottom:1.6rem!important}.mb-4{margin-bottom:2.4rem!important}.mb-5{margin-bottom:4.8rem!important}
.ms-0{margin-left:0!important}.ms-1{margin-left:0.4rem!important}.ms-2{margin-left:0.8rem!important}.ms-3{margin-left:1.6rem!important}.ms-auto{margin-left:auto!important}
.me-0{margin-right:0!important}.me-1{margin-right:0.4rem!important}.me-2{margin-right:0.8rem!important}.me-3{margin-right:1.6rem!important}.me-auto{margin-right:auto!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-2{margin-top:0.8rem!important;margin-bottom:0.8rem!important}.my-3{margin-top:1.6rem!important;margin-bottom:1.6rem!important}.my-4{margin-top:2.4rem!important;margin-bottom:2.4rem!important}
.p-0{padding:0!important}.p-1{padding:0.4rem!important}.p-2{padding:0.8rem!important}.p-3{padding:1.6rem!important}.p-4{padding:2.4rem!important}
.pt-3{padding-top:1.6rem!important}.pb-3{padding-bottom:1.6rem!important}
.py-1{padding-top:0.4rem!important;padding-bottom:0.4rem!important}.py-2{padding-top:0.8rem!important;padding-bottom:0.8rem!important}.py-3{padding-top:1.6rem!important;padding-bottom:1.6rem!important}.py-4{padding-top:2.4rem!important;padding-bottom:2.4rem!important}.py-5{padding-top:4.8rem!important;padding-bottom:4.8rem!important}
.px-2{padding-left:0.8rem!important;padding-right:0.8rem!important}.px-3{padding-left:1.6rem!important;padding-right:1.6rem!important}.px-4{padding-left:2.4rem!important;padding-right:2.4rem!important}

/* ── 텍스트/색/사이즈 유틸 ── */
.text-center{text-align:center!important}.text-end{text-align:right!important}.text-start{text-align:left!important}
.text-muted{color:var(--k-g60)!important}.text-dark{color:var(--k-g90)!important}.text-white{color:#fff!important}
.text-primary{color:var(--k-primary)!important}.text-success{color:var(--k-success)!important}.text-danger{color:var(--k-danger)!important}
.text-decoration-none{text-decoration:none!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-bold{font-weight:700!important}.fw-semibold{font-weight:600!important}.fw-normal{font-weight:400!important}
.fs-1{font-size:3.6rem!important}.fs-2{font-size:3rem!important}.fs-3{font-size:2.4rem!important}.fs-4{font-size:2rem!important}.fs-5{font-size:1.8rem!important}.fs-6{font-size:1.6rem!important}
.lh-1{line-height:1!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}
.w-100{width:100%!important}.h-100{height:100%!important}.mw-100{max-width:100%!important}
.bg-white{background-color:#fff!important}.bg-light{background-color:var(--k-g5)!important}
.bg-dark{background-color:var(--k-g90)!important}.bg-primary{background-color:var(--k-primary)!important}
.border{border:1px solid var(--k-g10)!important}.border-0{border:0!important}.border-bottom{border-bottom:1px solid var(--k-g10)!important}.border-top{border-top:1px solid var(--k-g10)!important}
.rounded{border-radius:var(--k-radius)!important}.rounded-circle{border-radius:50%!important}.rounded-3{border-radius:var(--k-radius-lg)!important}
.shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.08)!important}.shadow{box-shadow:0 6px 20px rgba(0,0,0,.12)!important}
.position-relative{position:relative!important}.position-absolute{position:absolute!important}
.list-unstyled{list-style:none;padding-left:0}.overflow-hidden{overflow:hidden!important}

/* ── 버튼 ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-family:inherit; font-weight:600; font-size:1.6rem; line-height:1.5; text-align:center;
  padding:0.8rem 1.6rem; border:1px solid transparent; border-radius:var(--k-radius);
  cursor:pointer; text-decoration:none; transition:background .15s,border-color .15s,color .15s; }
.btn:hover{ text-decoration:none; }
.btn:disabled,.btn.disabled{ opacity:.5; pointer-events:none; }
.btn-primary{ background:var(--k-primary); border-color:var(--k-primary); color:#fff; }
.btn-primary:hover,.btn-primary:focus{ background:var(--k-primary-hover); border-color:var(--k-primary-hover); color:#fff; }
/* NOTE: secondary/outline/link 등 그 외 버튼 변형과 .card·.table·.badge 컴포넌트는
   KRDS 네이티브(krds-btn / krds-panel / table.tbl / krds-badge)로 전면 대체되어 제거함.
   (.btn/.btn-primary 는 error.html·랜딩 등 잔여 사용처가 있어 유지) */

/* ── 폼 보조(KRDS 폼과 병행): 라디오 form-check / 로그인 input-group / JS검증 is-invalid ── */
.form-check{ display:block; min-height:2.4rem; padding-left:1.6em; margin-bottom:0.48rem; }
.form-check-input{ margin-left:-1.6em; }
.input-group{ display:flex; flex-wrap:wrap; align-items:stretch; width:100%; }
.input-group>.krds-input,.input-group>.form-control,.input-group>.form-select{ flex:1 1 auto; width:1%; min-width:0; }
.input-group-text{ display:flex; align-items:center; padding:0.8rem 1.2rem; background:var(--k-g5);
  border:1px solid var(--k-g20); }
.input-group>:not(:first-child){ margin-left:-1px; border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group>:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }
.invalid-feedback{ display:none; width:100%; margin-top:0.4rem; font-size:1.4rem; color:var(--k-danger); }
.was-validated :invalid~.invalid-feedback,.is-invalid~.invalid-feedback{ display:block; }
.krds-input.is-invalid,.form-control.is-invalid{ border-color:var(--k-danger); }

/* ── 알림 ── */
.alert{ position:relative; display:flex; align-items:center; padding:1.36rem 1.6rem; margin-bottom:1.6rem;
  border:1px solid transparent; border-radius:var(--k-radius); }
.alert-primary{ background:var(--k-primary-bg); border-color:var(--k-primary-light); color:var(--k-primary-active); }
.alert-success{ background:#E7F6EA; border-color:#BCE3C4; color:#176B2C; }
.alert-danger{ background:#FCEBE8; border-color:#F5C4BA; color:#B22A0E; }
.alert-warning{ background:#FFF3E0; border-color:#FFD9A8; color:#8a5200; }
.alert-info{ background:var(--k-primary-bg); border-color:var(--k-primary-light); color:var(--k-primary-active); }
.btn-close{ margin-left:auto; width:1em; height:1em; padding:.25em; border:0; background:transparent; cursor:pointer;
  font-size:1.76rem; line-height:1; color:inherit; opacity:.6; }
.btn-close::before{ content:"\00d7"; } .btn-close:hover{ opacity:1; }

/* ── 브레드크럼 ── */
.breadcrumb{ display:flex; flex-wrap:wrap; padding:10px 16px; margin-bottom:1.6rem; list-style:none;
  background:var(--k-g5); border:1px solid var(--k-g10); border-radius:var(--k-radius); font-size:1.44rem; }
.breadcrumb-item{ display:flex; align-items:center; color:var(--k-g60); }
.breadcrumb-item+.breadcrumb-item::before{ content:"/"; padding:0 0.8rem; color:var(--k-g40); }
.breadcrumb-item a{ color:var(--k-g60); text-decoration:none; }
.breadcrumb-item a:hover{ color:var(--k-primary); text-decoration:underline; }
.breadcrumb-item.active{ color:var(--k-g90); font-weight:600; }

/* ── 페이지네이션 (밸런스: 컴팩트) ── */
.pagination{ display:flex; flex-wrap:wrap; gap:4px; list-style:none; padding:0; justify-content:center; }
.page-link{ display:flex; align-items:center; justify-content:center; min-width:3.2rem; height:3.2rem;
  padding:0 0.8rem; font-size:1.44rem; color:var(--k-g60); background:#fff;
  border:1px solid var(--k-g10); border-radius:var(--k-radius); text-decoration:none; }
.page-link:hover{ background:var(--k-primary-light); color:var(--k-primary-hover); }
.page-item.active .page-link{ background:var(--k-primary); border-color:var(--k-primary); color:#fff; }
.page-item.disabled .page-link{ opacity:.5; pointer-events:none; }

/* ── 내비게이션 / 드롭다운 / 콜랩스 (krds-compat.js 와 연동) ── */
.navbar{ display:flex; align-items:center; padding:0.8rem 0; }
.navbar-nav{ display:flex; flex-direction:row; align-items:center; list-style:none; margin:0; padding:0; }
.nav-item{ position:relative; }
.nav-link{ display:block; padding:0.8rem 1.44rem; color:inherit; text-decoration:none; background:none; border:0; cursor:pointer; }
.navbar-toggler{ display:none; padding:0.64rem 0.96rem; background:none; border:1px solid rgba(255,255,255,.5); border-radius:var(--k-radius); cursor:pointer; }
.navbar-toggler-icon{ display:inline-block; width:1.4em; height:1.4em;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:center; }
.dropdown-toggle::after{ content:""; display:inline-block; margin-left:.4em; vertical-align:.15em;
  border-top:.3em solid; border-right:.3em solid transparent; border-left:.3em solid transparent; }
.dropdown-menu{ position:absolute; top:100%; left:0; z-index:1000; display:none; min-width:16rem; padding:0.64rem;
  margin-top:0.4rem; background:#fff; border:1px solid var(--k-g10); border-radius:var(--k-radius);
  box-shadow:0 6px 20px rgba(0,0,0,.12); list-style:none; }
.dropdown-menu.show{ display:block; }
.dropdown-item{ display:block; width:100%; padding:0.8rem 1.36rem; color:var(--k-g80); text-decoration:none;
  border-radius:var(--k-radius); background:none; border:0; text-align:left; cursor:pointer; }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--k-primary-light); color:var(--k-primary-hover); }
.dropdown-divider{ height:0; margin:0.64rem 0; border-top:1px solid var(--k-g10); }
/* 일반 .collapse 규칙은 두지 않는다 — KRDS 아코디언(.accordion-collapse.collapse)을 가리지 않도록.
   모바일 메뉴(.navbar-collapse)는 아래 .navbar-expand-lg 반응형 규칙이 처리한다. */

/* ── 반응형(md=768, lg=992) ── */
@media (min-width:768px){
  .col-md-1{flex:0 0 auto;width:8.3333%}.col-md-2{flex:0 0 auto;width:16.6667%}.col-md-3{flex:0 0 auto;width:25%}
  .col-md-4{flex:0 0 auto;width:33.3333%}.col-md-5{flex:0 0 auto;width:41.6667%}.col-md-6{flex:0 0 auto;width:50%}
  .col-md-7{flex:0 0 auto;width:58.3333%}.col-md-8{flex:0 0 auto;width:66.6667%}.col-md-9{flex:0 0 auto;width:75%}
  .col-md-10{flex:0 0 auto;width:83.3333%}.col-md-12{flex:0 0 auto;width:100%}
  .d-md-block{display:block!important}.d-md-none{display:none!important}.d-md-flex{display:flex!important}
  .text-md-end{text-align:right!important}
}
@media (min-width:992px){
  .col-lg-2{flex:0 0 auto;width:16.6667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333%}
  .col-lg-6{flex:0 0 auto;width:50%}.col-lg-8{flex:0 0 auto;width:66.6667%}.col-lg-12{flex:0 0 auto;width:100%}
  .navbar-expand-lg .navbar-toggler{ display:none; }
  .navbar-expand-lg .navbar-collapse{ display:flex!important; flex-basis:auto; }
}
@media (max-width:991.98px){
  .navbar-expand-lg .navbar-toggler{ display:inline-block; }
  .navbar-expand-lg .navbar-collapse{ flex-basis:100%; }
  .navbar-expand-lg .navbar-collapse:not(.show){ display:none; }
  .navbar-expand-lg .navbar-nav{ flex-direction:column; align-items:flex-start; width:100%; }
}


/* ─────────── krds-compat-debc.css ─────────── */
/* =====================================================================
   krds-compat-debc.css — DEBC 전용 KRDS 호환 보강 레이어 (ROADMAP R6)
   ---------------------------------------------------------------------
   왜 별도 파일인가
    · `krds-compat.css` 는 선례 프로젝트(cms-admin-boot)에서 그대로 가져온 원본이다.
      나중에 선례가 갱신될 때 diff 로 대조할 수 있도록 **원본을 손대지 않고** 이 파일에서 보강한다.
    · 선례는 템플릿을 KRDS 네이티브 마크업(krds-btn·tbl·krds-panel)으로 이미 전환했기 때문에
      `.table`·`.card`·`.badge`·`.btn-outline-*` 같은 부트스트랩 컴포넌트 정의를 **삭제**했다.
      DEBC 는 아직 전환 전(템플릿의 KRDS 네이티브 클래스 사용 0건)이라 그 자리를 이 파일이 채운다.

   로드 순서(레이아웃 head)
     krds_tokens.css(공식 토큰) → krds-compat.css → **이 파일** → krds.css
     → common.css → debc.css → renewal.css → (관리자) admin.css
   즉 이 파일은 "구조/컴포넌트 기본형"만 담당하고, DEBC 고유 스킨은 뒤의 파일이 덮어쓴다.

   값의 출처
    · 색: KRDS 공식 토큰(`--krds-color-light-*`)에서 파생한 `--k-*` 별칭만 쓴다(하드코딩 금지).
    · 형태(패딩·라운드·행높이): 기존 172개 템플릿이 부트스트랩 기하에 맞춰 작성돼 있어
      **레이아웃이 깨지지 않을 만큼의 기하**는 유지한다(= 회귀 0 이 R6 의 완료조건).
   ===================================================================== */

/* ── 1. KRDS 공식 토큰 → 호환 레이어 별칭 재바인딩 ─────────────────────
   krds-compat.css 의 `--k-*` 는 hex 하드코딩이다. 공식 토큰 파일을 로드하므로
   여기서 토큰 참조로 다시 묶는다(값은 동일 — KRDS primary-50 = #256EF4).
   이렇게 해야 KRDS 토큰이 갱신될 때 호환 레이어도 함께 따라간다.
   토큰 파일이 어떤 이유로든 로드되지 않아도 화면이 무너지지 않도록 **fallback 에 같은 값의 hex**
   를 둔다(var() 가 미정의면 선언 전체가 무효가 되어 버튼 배경이 사라진다). */
:root{
  --k-primary:        var(--krds-color-light-primary-50, #256EF4);
  --k-primary-hover:  var(--krds-color-light-primary-60, #0B50D0);
  --k-primary-active: var(--krds-color-light-primary-70, #083891);
  --k-primary-light:  var(--krds-color-light-primary-10, #D8E5FD);
  --k-primary-bg:     var(--krds-color-light-primary-5,  #ECF2FE);
  --k-g0:  var(--krds-color-light-gray-0,  #FFFFFF);
  --k-g5:  var(--krds-color-light-gray-5,  #F4F5F6);
  --k-g10: var(--krds-color-light-gray-10, #E6E8EA);
  --k-g20: var(--krds-color-light-gray-20, #CDD1D5);
  --k-g40: var(--krds-color-light-gray-40, #8A949E);
  --k-g60: var(--krds-color-light-gray-60, #58616A);
  --k-g80: var(--krds-color-light-gray-80, #33363D);
  --k-g90: var(--krds-color-light-gray-90, #1E2124);
  --k-success: var(--krds-color-light-success-50, #228738);
  --k-danger:  var(--krds-color-light-danger-50,  #DE3412);
  --k-warning: var(--krds-color-light-warning-40, #C78500);
  --k-info:    var(--krds-color-light-information-50, #0B78CB);

  /* 보조(서브틀) 색 — 배지·알림 배경용 */
  --k-success-bg: var(--krds-color-light-success-5, #EAF6EC);
  --k-danger-bg:  var(--krds-color-light-danger-5,  #FDEFEC);
  --k-warning-bg: var(--krds-color-light-warning-5, #FFF3DB);
  --k-info-bg:    var(--krds-color-light-information-5, #E7F4FE);
  --k-secondary:  var(--krds-color-light-gray-60, #58616A);

  --k-radius-sm: var(--krds-radius-xsmall1, 0.32rem);

  /* 서체: R6 은 "Bootstrap 제거"가 범위다. KRDS 표준서체(Pretendard GOV)로 바꾸면 전 화면의
     글자 폭·줄바꿈이 함께 바뀌어 프레임워크 교체로 인한 회귀와 구분할 수 없다.
     krds-compat.css 의 기본값("Pretendard GOV" 우선)을 기존 DEBC 스택으로 고정한다.
     — 특히 팝업 5종은 debc.css 를 로드하지 않아 이 값이 그대로 body 서체가 된다
       (고정하지 않으면 팝업만 다른 서체가 되고 폰트 파일도 불필요하게 내려간다).
     전환 시에는 이 한 줄만 원래대로 되돌리면 된다(폰트는 /krds/resources/fonts 에 로컬 동봉). */
  --k-font:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',system-ui,-apple-system,sans-serif;
}

/* ── 2. 리부트 패리티 ────────────────────────────────────────────────
   krds-compat.css 의 기본 리셋에는 부트스트랩 reboot 중 아래 항목이 빠져 있다.
   빠지면 "클래스가 안 붙은" 요소(폼 컨트롤·표·목록)가 브라우저 기본형으로 돌아가
   글꼴이 13px Arial 이 되거나 표 테두리가 벌어진다. 시각적 회귀의 주범이라 복원한다. */
/* 기본 행간: KRDS 공식 값은 **1.5** 다
   (`krds/resources/css/common/common.css` 의 `--krds-line-height-base: 1.5`).
   krds-compat 은 1.6 이라 전 화면의 세로 리듬이 2~3% 늘어난다 — 공식 값으로 되돌린다. */
body{ line-height:1.5; }
button,input,optgroup,select,textarea{ margin:0; font-family:inherit; font-size:inherit; line-height:inherit; }
button,[type="button"],[type="reset"],[type="submit"]{ -webkit-appearance:button; }
button:not(:disabled),[type="button"]:not(:disabled),[type="submit"]:not(:disabled){ cursor:pointer; }
textarea{ resize:vertical; }
label{ display:inline-block; }
fieldset{ min-width:0; padding:0; margin:0; border:0; }
legend{ float:left; width:100%; padding:0; margin-bottom:0.8rem; line-height:inherit; }
table{ caption-side:bottom; border-collapse:collapse; }
th{ text-align:inherit; }
caption{ padding:0.8rem 0; color:var(--k-g60); text-align:left; }
/* 목록 들여쓰기: krds-compat 은 `ul,ol{margin:0;padding:0}` 로 눌러 버린다.
   본문(게시글·CMS)의 글머리표가 사라지므로 문서 기본형을 되돌린다.
   컴포넌트(rnw-*·adm-*·list-group)는 각자 list-style:none 을 선언하므로 영향 없다. */
ul,ol{ margin-top:0; margin-bottom:1.6rem; padding-left:3.2rem; }
/* 링크 밑줄: KRDS·KWCAG 모두 본문 링크의 밑줄을 요구한다(색상만으로 구분 금지).
   컴포넌트 링크는 뒤 파일에서 text-decoration:none 을 선언한다. */
a{ text-decoration:underline; }

/* ── 3. 타이포 스케일 ────────────────────────────────────────────────
   krds-compat 은 h1~h6 의 크기를 정의하지 않아 브라우저 기본(h5=0.83em)으로 쪼그라든다.
   레거시 화면이 `<h1 class="h4">` 처럼 크기 클래스를 쓰므로 요소/유틸 양쪽을 정의한다.
   h1~h4 는 좁은 화면에서 단계적으로 줄어드는 반응형 스케일을 쓴다 —
   KRDS 도 PC/모바일 폰트 크기를 분리(`--krds-pc-font-size-*` / `--krds-mobile-font-size-*`)한다.
   (고정값으로 두면 760px 메인 히어로 제목이 28px→32px 로 커져 기존 시안과 어긋난다.) */
h1,.h1{ font-size:calc(2.2rem + 1.5vw); }
h2,.h2{ font-size:calc(2.12rem + .9vw); }
h3,.h3{ font-size:calc(2.08rem + .6vw); }
h4,.h4{ font-size:calc(2.04rem + .3vw); }
h5,.h5{ font-size:2rem; }
h6,.h6{ font-size:1.6rem; }
@media (min-width:1200px){
  h1,.h1{ font-size:4rem; }
  h2,.h2{ font-size:3.2rem; }
  h3,.h3{ font-size:2.8rem; }
  h4,.h4{ font-size:2.4rem; }
}
.h1,.h2,.h3,.h4,.h5,.h6{ margin-top:0; margin-bottom:0.8rem; font-weight:700; line-height:1.25; }

/* ── 4. 컨테이너 반응형 폭 ───────────────────────────────────────────
   krds-compat 은 `.container{max-width:1140px}` 고정이라 576~1199px 구간이 기존과 달라진다.
   (renewal.css 가 1400px↑ 를 1600px 로 다시 덮으므로 그 위는 그대로다.) */
@media (min-width: 576px){ .container{ max-width:540px; } }
@media (min-width: 768px){ .container{ max-width:720px; } }
@media (min-width: 992px){ .container{ max-width:960px; } }
@media (min-width:1200px){ .container{ max-width:1140px; } }
@media (min-width:1400px){ .container{ max-width:1320px; } }

/* ── 4-1. 열의 기본 폭 (모바일 회귀 방지 — 실측으로 발견) ────────────
   부트스트랩은 `.row > *` 에 `width:100%` 를 깔아 두어, `col-md-4` 같은 열이
   **브레이크포인트 아래에서는 전폭**이 된다. krds-compat 에는 이 규칙이 없어
   760px 화면에서 메인 "자주 찾는 서비스" 패널이 내용 폭(263px)으로 쪼그라들었다.
   `:where()` 로 특정도 0 을 만들어 뒤따르는 `.col-*` 폭 지정이 항상 이기게 한다
   (그냥 `.row>*` 로 쓰면 krds-compat 의 `.col-4` 등을 덮어써 데스크톱이 깨진다). */
:where(.row) > *{ flex-shrink:0; width:100%; max-width:100%; }

/* ── 5. 그리드 거터 정정 ─────────────────────────────────────────────
   krds-compat 의 `.g-*` 는 4방향 음수마진이라 행 위·아래로도 여백을 먹어
   앞뒤 요소와 겹친다. 가로=열 간격 / 세로=행 간격 의미로 되돌린다. */
.g-0{ margin-right:0; margin-left:0; margin-top:0; }
.g-0>*{ padding-right:0; padding-left:0; margin-top:0; }
.g-1{ margin-right:-0.2rem; margin-left:-0.2rem; margin-top:-0.4rem; margin-bottom:0; }
.g-1>*{ padding-right:0.2rem; padding-left:0.2rem; padding-top:0; padding-bottom:0; margin-top:0.4rem; }
.g-2{ margin-right:-0.4rem; margin-left:-0.4rem; margin-top:-0.8rem; margin-bottom:0; }
.g-2>*{ padding-right:0.4rem; padding-left:0.4rem; padding-top:0; padding-bottom:0; margin-top:0.8rem; }
.g-3{ margin-right:-0.8rem; margin-left:-0.8rem; margin-top:-1.6rem; margin-bottom:0; }
.g-3>*{ padding-right:0.8rem; padding-left:0.8rem; padding-top:0; padding-bottom:0; margin-top:1.6rem; }
.g-4{ margin-right:-1.2rem; margin-left:-1.2rem; margin-top:-2.4rem; margin-bottom:0; }
.g-4>*{ padding-right:1.2rem; padding-left:1.2rem; padding-top:0; padding-bottom:0; margin-top:2.4rem; }
.g-5{ margin-right:-2.4rem; margin-left:-2.4rem; margin-top:-4.8rem; margin-bottom:0; }
.g-5>*{ padding-right:2.4rem; padding-left:2.4rem; padding-top:0; padding-bottom:0; margin-top:4.8rem; }
.row-cols-2>*{ flex:0 0 auto; width:50%; }

/* ── 6. 표 ───────────────────────────────────────────────────────────
   `.table` 58건 · `.table-light` 103건 · `.table-hover` 26건 · `.table-bordered` 15건. */
.table{ width:100%; margin-bottom:1.6rem; vertical-align:top; color:inherit; border-color:var(--k-g10); }
.table > :not(caption) > * > *{ padding:0.8rem; border-bottom:1px solid var(--k-g10); }
.table > thead{ vertical-align:bottom; }
.table > tbody{ vertical-align:inherit; }
.table-sm > :not(caption) > * > *{ padding:0.4rem; }
/* 헤더/라벨 셀 강조 — KRDS gray-5 배경 */
.table-light,
.table > .table-light > tr > *,
.table th.table-light,
.table td.table-light{ background-color:var(--k-g5); color:var(--k-g90); }
.table-hover > tbody > tr:hover > *{ background-color:var(--k-primary-bg); }
.table-bordered > :not(caption) > *{ border-width:1px 0; }
.table-bordered > :not(caption) > * > *{ border:1px solid var(--k-g10); }
.align-middle{ vertical-align:middle !important; }

/* ── 7. 카드 ─────────────────────────────────────────────────────────
   `.card` 46건 · `.card-body` 44건. debc.css 가 보더/라운드를 다시 지정하므로
   여기서는 구조(세로 플렉스·패딩)만 잡는다. */
.card{ position:relative; display:flex; flex-direction:column; min-width:0; word-wrap:break-word;
  background-color:var(--k-g0); background-clip:border-box;
  border:1px solid var(--k-g10); border-radius:var(--k-radius); }
.card-body{ flex:1 1 auto; padding:1.6rem; }
.card-header{ padding:1.2rem 1.6rem; margin-bottom:0; background-color:var(--k-g5); border-bottom:1px solid var(--k-g10); }
.card-footer{ padding:1.2rem 1.6rem; background-color:var(--k-g5); border-top:1px solid var(--k-g10); }
.card-title{ margin-bottom:0.8rem; }
.card-text:last-child{ margin-bottom:0; }
.card > .list-group{ border-top:inherit; border-bottom:inherit; }

/* ── 8. 버튼 변형 ────────────────────────────────────────────────────
   기본형(.btn/.btn-primary)은 krds-compat 에 있다. 나머지 변형만 KRDS 톤으로 정의한다.
   `.btn-outline-secondary` 100건(목록·취소 버튼) · `.btn-sm` 93건. */
.btn-secondary{ background:var(--k-g60); border-color:var(--k-g60); color:#fff; }
.btn-secondary:hover,.btn-secondary:focus{ background:var(--k-g80); border-color:var(--k-g80); color:#fff; }
.btn-success{ background:var(--k-success); border-color:var(--k-success); color:#fff; }
.btn-success:hover,.btn-success:focus{ background:var(--krds-color-light-success-60); border-color:var(--krds-color-light-success-60); color:#fff; }
.btn-danger{ background:var(--k-danger); border-color:var(--k-danger); color:#fff; }
.btn-danger:hover,.btn-danger:focus{ background:var(--krds-color-light-danger-60); border-color:var(--krds-color-light-danger-60); color:#fff; }
.btn-warning{ background:var(--k-warning); border-color:var(--k-warning); color:#fff; }
.btn-warning:hover,.btn-warning:focus{ background:var(--krds-color-light-warning-50); border-color:var(--krds-color-light-warning-50); color:#fff; }
.btn-info{ background:var(--k-info); border-color:var(--k-info); color:#fff; }
.btn-info:hover,.btn-info:focus{ background:var(--krds-color-light-information-60); border-color:var(--krds-color-light-information-60); color:#fff; }
.btn-light{ background:var(--k-g5); border-color:var(--k-g10); color:var(--k-g90); }
.btn-light:hover{ background:var(--k-g10); color:var(--k-g90); }
.btn-link{ background:none; border-color:transparent; color:var(--k-primary); text-decoration:underline; }

.btn-outline-primary{ background:transparent; border-color:var(--k-primary); color:var(--k-primary); }
.btn-outline-primary:hover,.btn-outline-primary:focus{ background:var(--k-primary); border-color:var(--k-primary); color:#fff; }
.btn-outline-secondary{ background:transparent; border-color:var(--k-g20); color:var(--k-g80); }
.btn-outline-secondary:hover,.btn-outline-secondary:focus{ background:var(--k-g5); border-color:var(--k-g40); color:var(--k-g90); }
.btn-outline-success{ background:transparent; border-color:var(--k-success); color:var(--k-success); }
.btn-outline-success:hover,.btn-outline-success:focus{ background:var(--k-success); border-color:var(--k-success); color:#fff; }
.btn-outline-danger{ background:transparent; border-color:var(--k-danger); color:var(--k-danger); }
.btn-outline-danger:hover,.btn-outline-danger:focus{ background:var(--k-danger); border-color:var(--k-danger); color:#fff; }
.btn-outline-info{ background:transparent; border-color:var(--k-info); color:var(--k-info); }
.btn-outline-info:hover,.btn-outline-info:focus{ background:var(--k-info); border-color:var(--k-info); color:#fff; }
.btn-outline-warning{ background:transparent; border-color:var(--k-warning); color:var(--k-warning); }
.btn-outline-warning:hover,.btn-outline-warning:focus{ background:var(--k-warning); border-color:var(--k-warning); color:#fff; }
.btn-outline-dark{ background:transparent; border-color:var(--k-g80); color:var(--k-g80); }
.btn-outline-dark:hover,.btn-outline-dark:focus{ background:var(--k-g80); border-color:var(--k-g80); color:#fff; }

.btn-sm{ padding:0.4rem 0.8rem; font-size:1.4rem; border-radius:var(--k-radius-sm); }
.btn-lg{ padding:0.8rem 1.6rem; font-size:2rem; border-radius:var(--k-radius-lg); }

/* ── 9. 폼 컨트롤 ────────────────────────────────────────────────────
   `.form-control` 245건 · `.form-select` 58건 — 기본형이 없으면 전 입력폼이 브라우저 기본으로 돌아간다. */
.form-control{ display:block; width:100%; padding:0.8rem 1.2rem; font-family:inherit; font-size:1.6rem;
  font-weight:400; line-height:1.5; color:var(--k-g90); background-color:var(--k-g0); background-clip:padding-box;
  border:1px solid var(--k-g20); border-radius:var(--k-radius); appearance:none;
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.form-control:focus{ border-color:var(--k-primary); outline:0; box-shadow:0 0 0 3px var(--k-primary-light); }
.form-control::placeholder{ color:var(--k-g40); opacity:1; }
/* readonly 는 배경을 바꾸지 않는다 — 기존 화면(게시판 마스터의 "템플릿 정보" 등)이
   readonly 입력을 흰 배경으로 노출해 왔고, disabled 와 시각적으로 구분되어야 한다. */
.form-control:disabled{ background-color:var(--k-g5); }
textarea.form-control{ min-height:calc(1.5em + 1.2rem + 2px); }

/* 화살표는 인라인 data-uri(외부 요청 0 — 폐쇄망 원칙). stroke 색 = KRDS gray-80 #33363d */
.form-select{ display:block; width:100%; padding:0.8rem 3.6rem 0.8rem 1.2rem; font-family:inherit;
  font-size:1.6rem; font-weight:400; line-height:1.5; color:var(--k-g90);
  background-color:var(--k-g0);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2333363d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 1.2rem center; background-size:16px 12px;
  border:1px solid var(--k-g20); border-radius:var(--k-radius); appearance:none; }
.form-select:focus{ border-color:var(--k-primary); outline:0; box-shadow:0 0 0 3px var(--k-primary-light); }
.form-select:disabled{ background-color:var(--k-g5); }

.form-control-sm{ padding:0.4rem 0.8rem; font-size:1.4rem; border-radius:var(--k-radius-sm); }
.form-select-sm{ padding:0.4rem 3.2rem 0.4rem 0.8rem; font-size:1.4rem; border-radius:var(--k-radius-sm); }
.form-control-plaintext{ display:block; width:100%; padding:0.6rem 0; margin-bottom:0; line-height:1.5;
  color:var(--k-g90); background-color:transparent; border:solid transparent; border-width:1px 0; }
.form-label{ margin-bottom:0.8rem; }
.col-form-label{ padding-top:calc(0.6rem + 1px); padding-bottom:calc(0.6rem + 1px); margin-bottom:0;
  font-size:inherit; line-height:1.5; }
.form-text{ margin-top:0.4rem; font-size:.875em; color:var(--k-g60); }

/* 체크박스·라디오 — krds-compat 은 배치(padding-left)만 잡는다. 모양을 KRDS 톤으로 정의한다. */
.form-check-input{ flex-shrink:0; width:1em; height:1em; margin-top:.25em; vertical-align:top;
  appearance:none; background-color:var(--k-g0); background-repeat:no-repeat; background-position:center;
  background-size:contain; border:1px solid var(--k-g40); print-color-adjust:exact; }
.form-check-input[type="checkbox"]{ border-radius:.25em; }
.form-check-input[type="radio"]{ border-radius:50%; }
.form-check-input:checked{ background-color:var(--k-primary); border-color:var(--k-primary); }
.form-check-input[type="checkbox"]:checked{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input[type="radio"]:checked{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }
.form-check-input:focus{ border-color:var(--k-primary); outline:0; box-shadow:0 0 0 3px var(--k-primary-light); }
.form-check-input:disabled{ opacity:.5; }
.form-check-label{ cursor:pointer; }
.form-check-inline{ display:inline-block; margin-right:1.6rem; }

/* ── 10. 배지 ────────────────────────────────────────────────────────
   `.badge` 24건 — 사용여부(사용/미사용)·상태 표시에 쓰인다. */
.badge{ display:inline-block; padding:.35em .65em; font-size:.75em; font-weight:700; line-height:1;
  color:#fff; text-align:center; white-space:nowrap; vertical-align:baseline; border-radius:var(--k-radius-sm); }
.badge:empty{ display:none; }
.bg-secondary{ background-color:var(--k-secondary) !important; color:#fff; }
.bg-success{ background-color:var(--k-success) !important; color:#fff; }
.bg-danger{ background-color:var(--k-danger) !important; color:#fff; }
.bg-warning{ background-color:var(--k-warning) !important; color:#fff; }
.bg-info{ background-color:var(--k-info) !important; color:#fff; }
.text-bg-light{ background-color:var(--k-g5) !important; color:var(--k-g90) !important; }

/* ── 11. 알림 보강 ───────────────────────────────────────────────────*/
.alert-secondary{ background:var(--k-g5); border-color:var(--k-g10); color:var(--k-g80); }
.alert-light{ background:var(--k-g0); border-color:var(--k-g10); color:var(--k-g80); }
.alert-link{ font-weight:700; color:inherit; }

/* ── 12. 리스트 그룹 ─────────────────────────────────────────────────
   `.list-group-item` 39건(행정달력 휴일목록·설문 좌측메뉴 등). */
.list-group{ display:flex; flex-direction:column; padding-left:0; margin-bottom:0; border-radius:var(--k-radius); }
.list-group-item{ position:relative; display:block; padding:0.8rem 1.6rem; color:var(--k-g90);
  text-decoration:none; background-color:var(--k-g0); border:1px solid var(--k-g10); }
.list-group-item:first-child{ border-top-left-radius:inherit; border-top-right-radius:inherit; }
.list-group-item:last-child{ border-bottom-left-radius:inherit; border-bottom-right-radius:inherit; }
.list-group-item + .list-group-item{ border-top-width:0; }
.list-group-item.active{ z-index:2; color:#fff; background-color:var(--k-primary); border-color:var(--k-primary); }
.list-group-item.disabled,.list-group-item:disabled{ color:var(--k-g40); background-color:var(--k-g0); pointer-events:none; }
.list-group-item-action{ width:100%; color:var(--k-g80); text-align:inherit; }
.list-group-item-action:hover,.list-group-item-action:focus{ z-index:1; color:var(--k-g90);
  text-decoration:none; background-color:var(--k-g5); }
.list-group-flush{ border-radius:0; }
.list-group-flush > .list-group-item{ border-width:0 0 1px; }
.list-group-flush > .list-group-item:last-child{ border-bottom-width:0; }

/* ── 12-1. 브레드크럼(레거시 화면 136곳) ─────────────────────────────
   krds-compat 은 회색 박스형(배경+보더)이다. 기존 DEBC 화면은 부트스트랩5 기본형인
   **평문 + 구분자**였고, 관리자/사용자 신규 화면(.adm-crumb·.rnw-crumbbar)도 평문이다.
   박스형으로 바뀌면 레거시 화면만 톤이 튀므로 평문으로 되돌린다(KRDS 브레드크럼도 평문형). */
.breadcrumb{ padding:0; background:transparent; border:0; border-radius:0; }

/* ── 13. 유틸리티 보강 ───────────────────────────────────────────────*/
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within){
  position:absolute !important; width:1px !important; height:1px !important; padding:0 !important;
  margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important;
  white-space:nowrap !important; border:0 !important; }
.vstack{ display:flex; flex:1 1 auto; flex-direction:column; align-self:stretch; }
.hstack{ display:flex; flex-direction:row; align-items:center; align-self:stretch; }
.img-fluid{ max-width:100% !important; height:auto !important; }
.border-danger{ border-color:var(--k-danger) !important; }
.fw-bolder{ font-weight:800 !important; }
.text-body{ color:var(--k-g90) !important; }
.text-secondary{ color:var(--k-g60) !important; }
.p-5{ padding:4.8rem !important; }

@media (min-width:992px){
  .col-lg-9{ flex:0 0 auto; width:75%; }
  .row-cols-lg-4>*{ flex:0 0 auto; width:25%; }
  .d-lg-block{ display:block !important; }
  .d-lg-none{ display:none !important; }
  .d-lg-flex{ display:flex !important; }
}

/* ── 14. 후속 과제(R6 범위 밖 — 기록) ────────────────────────────────
   ① KRDS 표준 서체(Pretendard GOV) 전환 — 위 `--k-font` 참조.
   ② 아이콘: 템플릿 340곳이 Bootstrap Icons(`bi bi-*`)를 쓴다. 아이콘 폰트는 프레임워크와
      별개라 R6 에서 유지했다(선례 프로젝트도 동일). KRDS svg 아이콘 대체는 별도 과제.
   ③ KRDS 네이티브 마크업 전환(krds-btn·tbl·krds-panel·krds-pagination) — 이 호환 레이어를
      걷어내는 작업. 공식 컴포넌트 CSS 는 `/krds/resources/vendor/krds.min.css` 에 이미 동봉돼 있다. */


/* ─────────── krds.css ─────────── */
/*
 * krds.css — 공통 스킨(전역 타이포 + 표/카드/알림/폼 포커스 미세조정)
 *
 * 2026-08-08 (ROADMAP R6) 정리:
 *  · 공식 KRDS 배포본은 `static/krds/` 로 이식했고, 토큰은 `krds/resources/css/token/krds_tokens.css`,
 *    구조/컴포넌트는 `krds-compat.css` + `krds-compat-debc.css` 가 담당한다.
 *    이 파일은 그 위에 얹는 **DEBC 공통 스킨**만 남긴다(로드 순서상 compat 다음, common/debc/renewal 이전).
 *  · 실제 DOM 에 존재하지 않아 죽어 있던 규칙을 제거했다 —
 *    `.egov-nav`(0곳) · `.pagination`/`.page-link`/`.page-item`(0곳 — 페이저는 .rnw-paging/.adm-paging)
 *    · `.egov-header`(레이아웃에서 th:replace 로 통째 교체되어 클래스가 렌더되지 않음).
 *  · 오류 페이지(error/*.html)는 레이아웃 없이 이 파일 + renewal.css + debc.css 만 로드하므로
 *    body 타이포·배경 규칙은 반드시 남겨 둔다.
 */

/* ── 정부 공통 컬러 팔레트 ── */
:root {
    /* 주요 색상 */
    --krds-blue: #0054A6;
    --krds-blue-dark: #003D7A;
    --krds-blue-light: #E8F0FB;

    /* 텍스트 */
    --krds-text-primary: #1A1A1A;
    --krds-text-secondary: #555555;
    --krds-text-muted: #888888;

    /* 배경 */
    --krds-bg-white: #FFFFFF;
    --krds-bg-gray: #F5F6F8;

    /* 보더 */
    --krds-border: #DDDDDD;
    --krds-border-focus: #0054A6;

    /* 상태 */
    --krds-success: #0EA800;
    --krds-danger: #E2000F;
    --krds-warning: #F5A200;
    --krds-info: #0077C8;
}

/* ── 기본 타이포그래피 ── */
body {
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    font-size: 14px;
    color: var(--krds-text-primary);
    background-color: var(--krds-bg-gray);
    -webkit-font-smoothing: antialiased;
}

/* ── 버튼 오버라이드 ── */
.btn-primary {
    background-color: var(--krds-blue);
    border-color: var(--krds-blue);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--krds-blue-dark);
    border-color: var(--krds-blue-dark);
}

/* ── 테이블 ── */
.table thead th {
    background-color: #EEF3FA;
    border-bottom: 2px solid var(--krds-blue);
    color: var(--krds-text-primary);
    font-weight: 600;
    font-size: 13px;
}

/* ── 폼 컨트롤 ── */
.form-control:focus, .form-select:focus {
    border-color: var(--krds-blue);
    box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.15);
}

/* ── 카드 ── */
.card {
    border: 1px solid var(--krds-border);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.card-header {
    background-color: #F5F7FB;
    border-bottom: 1px solid var(--krds-border);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 20px;
}

/* ── 알림창 ── */
.alert {
    border-radius: 6px;
    font-size: 14px;
}


/* ─────────── common.css ─────────── */
/* ============================================================
   eGovFrame 5.0 공통 CSS (KRDS 기반)
   KRDS CDN: https://uiux.egovframe.go.kr
   Bootstrap 5 기반 — KRDS 파일 적용 시 아래 변수값 교체
   ============================================================ */

/* KRDS 컬러 변수 */
:root {
    --egov-primary: #0054A6;       /* 정부 대표 파란색 */
    --egov-primary-dark: #003D7A;
    --egov-secondary: #00A0E9;
    --egov-success: #28A745;
    --egov-danger: #DC3545;
    --egov-warning: #FFC107;
    --egov-light: #F5F7FA;
    --egov-border: #DEE2E6;
    --egov-text: #212529;
    --egov-text-muted: #6C757D;
}

/* 접근성: 본문 바로가기 */
.skip-nav {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--egov-primary);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}
.skip-nav:focus {
    top: 0;
}

/* 헤더 */
.egov-header {
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* 네비게이션 */
.egov-nav {
    background-color: var(--egov-primary) !important;
}
.egov-nav .nav-link {
    color: rgba(255,255,255,0.9) !important;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s;
}
.egov-nav .nav-link:hover,
.egov-nav .nav-link.active {
    color: #fff !important;
    border-bottom-color: #fff;
}

/* 본문 */
.egov-content {
    min-height: calc(100vh - 200px);
    background-color: var(--egov-light);
}

/* 카드 */
.egov-card {
    border: 1px solid var(--egov-border);
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* 페이지 타이틀 영역 */
.page-title-bar {
    background-color: #fff;
    border-bottom: 1px solid var(--egov-border);
    padding: 16px 0 12px;
    margin-bottom: 24px;
}
.page-title-bar h1, .page-title-bar h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--egov-text);
    margin-bottom: 4px;
}
.breadcrumb {
    font-size: 13px;
    margin-bottom: 0;
}

/* 테이블 */
.egov-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.egov-table thead th {
    background-color: #F0F4F9;
    border: 1px solid var(--egov-border);
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    color: var(--egov-text);
    white-space: nowrap;
}
.egov-table tbody td {
    border: 1px solid var(--egov-border);
    padding: 9px 12px;
    vertical-align: middle;
    color: var(--egov-text);
}
.egov-table tbody tr:hover {
    background-color: #F8F9FA;
}
.egov-table .text-center { text-align: center; }
.egov-table .text-end { text-align: right; }

/* 검색 영역 */
.search-bar {
    background: #fff;
    border: 1px solid var(--egov-border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

/* 버튼 */
.btn-egov {
    background-color: var(--egov-primary);
    border-color: var(--egov-primary);
    color: #fff;
    font-size: 14px;
    padding: 6px 16px;
    border-radius: 4px;
    transition: background-color 0.15s;
}
.btn-egov:hover {
    background-color: var(--egov-primary-dark);
    border-color: var(--egov-primary-dark);
    color: #fff;
}

/* 폼 */
.form-label { font-size: 14px; font-weight: 500; }
.form-control, .form-select {
    font-size: 14px;
    border-color: var(--egov-border);
}
.form-control:focus, .form-select:focus {
    border-color: var(--egov-primary);
    box-shadow: 0 0 0 2px rgba(0,84,166,0.15);
}

/* 로그인 페이지 */
.egov-login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #EAF1FB 0%, #F5F7FA 100%);
}
.login-card {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    padding: 40px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,84,166,0.10);
}
.login-logo {
    text-align: center;
    margin-bottom: 32px;
}
.login-logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--egov-primary);
    margin-top: 12px;
}

/* 게시판 */
.bbs-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--egov-text);
    min-height: 200px;
    padding: 20px;
    border: 1px solid var(--egov-border);
    border-radius: 4px;
    background: #fafafa;
}

/* 알림/배지 */
.badge-new {
    display: inline-block;
    background: var(--egov-danger);
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
}

/* 반응형 */
@media (max-width: 768px) {
    .egov-content { padding: 12px !important; }
    .page-title-bar h1, .page-title-bar h2 { font-size: 18px; }
    .login-card { padding: 24px; }
}


/* ─────────── debc-tokens.css ─────────── */
/* ============================================================================
   debc-tokens.css — DEBC 브랜드 토큰 (관리자·사용자 공통)
   ----------------------------------------------------------------------------
   2026-08-09 분리. 원래 renewal.css(사용자단) 의 :root 에 있었는데
   admin.css 가 이 토큰 10종을 참조하고 있었다 — 즉 **관리자 화면이 사용자단
   스타일시트에 색을 의존**하는 구조였다. 그 상태로는 둘을 떼어낼 수 없다.

   토큰만 여기로 올려 양쪽이 공통으로 쓰고, 실제 컴포넌트 규칙은
   사용자단(renewal.css)·관리자(admin.css) 로 완전히 갈랐다.

   값을 바꾸면 양쪽 화면이 함께 바뀐다. 한쪽만 바꿔야 하면 이 파일이 아니라
   각자의 스타일시트에서 덮어써라.
   ========================================================================== */

:root {
  --debc-primary: #4A75E5;      /* 로열블루 — 서브 전 화면 실측(2026-08-07 정정, 구 #2E5BE0) */
  --debc-primary-deep: #1D50C8;
  --debc-navy: #16337E;         /* 진남색 — 메가메뉴 pill·신고 버튼·TOP */
  --debc-bg: #F1F4F9;           /* 섹션 연회청 배경 */
  --debc-bg-2: #EAEEF5;
  --debc-line: #DDE3EC;
  --debc-text: #1A1A1A;
  --debc-text-sub: #666F7B;
  --debc-muted: #B0B6C0;        /* 페이지네이션 비활성 숫자 */
  --debc-green: #3FA45B;
  --debc-orange: #F05A22;
  --debc-radius: 10px;          /* 카드 라운드 8~12px */

  /* S3 시각 컴포넌트 토큰 (2026-08-09 시안 원본 픽셀 실측 — 기존 토큰으로 대체할 수 없는 색만 신설)
     · --debc-dark   #434343 : 강조 박스(.rnw-note--head) 다크 헤더. 회색 계열 토큰 중 가장 어두운
                               --debc-text-sub(#666F7B)는 흰 글씨 대비가 4.5:1 에 못 미쳐 쓸 수 없다.
     · --debc-ci-*           : 장애인기업 인증마크(CI) 3색. 브랜드 CI 고유색이라
                               --debc-green(#3FA45B)·--debc-orange 로 대체하면 CI 가 아니게 된다. */
  --debc-dark: #434343;         /* 강조 박스 헤더 (시안 실측) */
  --debc-ci-blue: var(--debc-primary);  /* REFLECT — 실측 #4A75E5 = primary 와 동일 */
  --debc-ci-green: #049E3E;     /* POWER  (시안 실측) */
  --debc-ci-pink: #D6016D;      /* WELL   (시안 실측) */

  /* S4 토큰 (2026-08-10 시안 원본 픽셀 실측)
     · --debc-line-strong #A8A8A8 : 4뎁스 박스탭 그리드선. --debc-line(#DDE3EC)은 푸른끼가 도는
       연한 선이라 박스탭 격자에 쓰면 실측(#A8A8A8)보다 두 단계 밝아 격자가 보이지 않는다.
       같은 값이 형제 메뉴 탭(.rnw-tabs) 하단선에 이미 하드코딩돼 있다 — 같은 선이므로 토큰으로 묶는다.
     · --debc-halo #EAF2FD : 630 전략목표·미션 원형 배지 둘레의 연블루 링(실측).
     · --debc-halo-2 #BFD6F6 : 그 아래 ▼ 화살표(실측). halo 보다 두 단계 진하다.
     · --debc-panel #F7F8FD : "2028 경영목표" 풀블리드 띠 + 전략과제 박스 면(실측, 같은 값).
       --debc-bg(#F1F4F9)보다 밝고 푸른끼가 적다 — 나란히 놓으면 구분된다.
     · --debc-navy-mid #3F66CD : 630 원형 배지 4단 그라데이션의 3번째 단계.
       1·2·4 단계는 각각 --debc-navy(#0F429D 실측) · --debc-primary-deep(#0E4FC3 실측) ·
       --debc-primary(#4A75E5 실측) 로 덮이는데 3단계만 남는다. 이 하나 때문에
       배지 색을 콘텐츠에 인라인으로 쓰게 하지 않는다. */
  --debc-line-strong: #A8A8A8;
  --debc-halo: #EAF2FD;
  --debc-halo-2: #BFD6F6;
  --debc-panel: #F7F8FD;
  --debc-navy-mid: #3F66CD;

  /* 메인 히어로 토큰 (2026-08-11 시안 픽셀 실측 — DESIGN §3-1)
     · --debc-hero-panel rgb(243,246,251) : "자주 찾는 서비스" 패널 면.
       기존 토큰으로 대체하지 않은 이유 — --debc-bg(#F1F4F9)는 두 단계 진해 흰 아이콘 원이 덜 떠 보이고,
       --debc-panel(#F7F8FD)은 반대로 밝아 흰 배너 영역과 경계가 사라진다. 실측값이 정확히 그 사이다.
       **관리자(css/admin/base.css)에는 미러하지 않는다** — 히어로는 사용자 포털에만 있는 화면이다. */
  --debc-hero-panel: #F3F6FB;
}