/*
 * ============================================================
 * 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 .5rem; font-weight:700; line-height:1.25; }
p{ margin:0 0 1rem; }
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:1rem 0; opacity:1; }
small,.small{ font-size:.875em; }
:focus-visible{ outline:3px solid #4A91FF; outline-offset:2px; }

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

/* ── 그리드 ── */
.row{ display:flex; flex-wrap:wrap; margin-right:-.75rem; margin-left:-.75rem; }
.row>*{ box-sizing:border-box; padding-right:.75rem; padding-left:.75rem; }
.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:-.25rem}.g-1>*{padding:.25rem}
.g-2{margin:-.5rem}.g-2>*{padding:.5rem}
.g-3{margin:-.75rem}.g-3>*{padding:.75rem}
.g-4{margin:-1rem}.g-4>*{padding:1rem}
.g-5{margin:-1.5rem}.g-5>*{padding:1.5rem}

/* ── 디스플레이 / 플렉스 ── */
.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:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}
.text-nowrap{white-space:nowrap!important}

/* ── 간격(여백) 0~5: .25/.5/1/1.5/3rem ── */
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-auto{margin-left:auto!important}
.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-auto{margin-right:auto!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}
.pt-3{padding-top:1rem!important}.pb-3{padding-bottom:1rem!important}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!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:2.25rem!important}.fs-2{font-size:1.875rem!important}.fs-3{font-size:1.5rem!important}.fs-4{font-size:1.25rem!important}.fs-5{font-size:1.125rem!important}.fs-6{font-size:1rem!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:1rem; line-height:1.5; text-align:center;
  padding:.5rem 1rem; 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:1.5rem; padding-left:1.6em; margin-bottom:.3rem; }
.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:.5rem .75rem; 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:.25rem; font-size:.875rem; 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:.85rem 1rem; margin-bottom:1rem;
  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.1rem; 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:1rem; list-style:none;
  background:var(--k-g5); border:1px solid var(--k-g10); border-radius:var(--k-radius); font-size:.9rem; }
.breadcrumb-item{ display:flex; align-items:center; color:var(--k-g60); }
.breadcrumb-item+.breadcrumb-item::before{ content:"/"; padding:0 .5rem; 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:2rem; height:2rem;
  padding:0 .5rem; font-size:.9rem; 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:.5rem 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:.5rem .9rem; color:inherit; text-decoration:none; background:none; border:0; cursor:pointer; }
.navbar-toggler{ display:none; padding:.4rem .6rem; 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:10rem; padding:.4rem;
  margin-top:.25rem; 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:.5rem .85rem; 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:.4rem 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%; }
}