@charset "UTF-8";
/* ============================================================
   (주)화이트경제정책연구소 — 공통 스타일 v1.1
   메인 시안 v1(wiep-main-draft.html)의 토큰·컴포넌트 확장

   색: 남색 #1c3557 / 녹색 #5f7d3e / 배경 #f5f6f4 / 본문 #1a2230
   준수 목표: KWCAG 2.2(KS X OT0003:2022) + WCAG 2.2 Level AA
   기술 채택 기준: 미지원 시 "효과만 사라지는" 진행적 향상만 도입.
                  폴백 코드가 따로 필요한 기술은 채택하지 않는다.
   금지: 외부 CSS 프레임워크·JS 라이브러리·페이지빌더,
        상태 피드백 외 transition/animation, 4색 외 색 추가.
   주의: 위계 규칙("여백과 서체 크기로만")은 시각 규칙이다.
        커 보인다는 이유로 제목 태그 레벨(h2→h4)을 건너뛰지 말 것.
        크기는 이 파일의 --s1/--s2/--s3 에서만 조정한다.
   ============================================================ */

:root{
  --bg:#f5f6f4;--paper:#fff;--ink:#1a2230;--ink2:#465060;--mute:#626c7d;
  --line:#d8dde3;--line-soft:#e7eae6;
  --navy:#1c3557;--navy-deep:#122540;--navy-soft:#e4ebf4;--navy-line:#b9c7d9;
  --field:#5f7d3e;--field-soft:#eef3e6;
  /* 작은 글자 전용 녹색 — #5f7d3e 는 12~14px 에서 4.1:1(AA 4.5:1 미달, 2026-09-20 axe 실측).
     배경·테두리·도식 선은 --field 를 그대로 쓰고, 글자에만 이 값을 쓴다. */
  --field-ink:#4a6130;
  --grid:rgba(28,53,87,.08);

  /* 흰 글자를 얹는 자리 전용 — 라이트·다크 공통 고정.
     ★ 아래 다크 블록에서 절대 재선언하지 않는다.
     (재선언하면 --navy가 밝아져 흰 글자 대비가 1.93:1로 무너짐) */
  --band-bg:#1c3557;--band-ink:#fff;--band-ink2:#c3d0e2;--band-line:#7d95b6;

  --hh:68px;          /* 헤더 높이 (스티키 기준) */
  --tabs-h:0px;       /* 앵커 탭 높이 — wiep.js가 실측해 주입 */
  --callbar-h:0px;    /* 모바일 전화 고정바 높이 */

  /* 유동 스케일 — 761px 부근 계단 점프 제거.
     본문 16px / 1.75 는 고객 확정 규칙이므로 유동화 대상이 아니다. */
  --s1:clamp(18px, 1.05rem + 0.35vw, 20px);   /* h3 */
  --s2:clamp(21px, 1.15rem + 1vw, 28px);     /* h2 */
  --s3:clamp(24px, 1.2rem + 1.1vw, 36px);    /* 서브페이지 h1 (메인 히어로 40px보다 작게) */
  --sp-sec:clamp(48px, 4vw + 28px, 72px);
  --sp-tight:clamp(36px, 3vw + 20px, 56px);
  --sp-blk:clamp(24px, 2vw + 10px, 32px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12161d;--paper:#1a2029;--ink:#e6e9ee;--ink2:#b3bbc7;--mute:#8d97a6;
    --line:#2b333f;--line-soft:#232a34;
    --navy:#9dbde6;--navy-deep:#0f1c2e;--navy-soft:#1f2c3f;--navy-line:#3b4a60;
    --field:#9dbf76;--field-soft:#243120;--field-ink:#9dbf76;--grid:rgba(157,189,230,.08);
  }
}
:root[data-theme="dark"]{
  --bg:#12161d;--paper:#1a2029;--ink:#e6e9ee;--ink2:#b3bbc7;--mute:#8d97a6;
  --line:#2b333f;--line-soft:#232a34;
  --navy:#9dbde6;--navy-deep:#0f1c2e;--navy-soft:#1f2c3f;--navy-line:#3b4a60;
  --field:#9dbf76;--field-soft:#243120;--field-ink:#9dbf76;--grid:rgba(157,189,230,.08);
}
@media (max-width:760px){:root{--hh:56px;--callbar-h:60px}}

/* ── 네이티브 UI(스크롤바·폼 위젯·select 목록)도 화면 모드를 따르게 ──
   지금까지 color-scheme 을 선언하지 않아, 어두운 화면에서도 스크롤바와
   기본 위젯이 흰색 OS 기본값으로 떴다. 토큰 블록과 같은 조건을 복제한다. */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* ── 폰트 폴백 메트릭 정합 ───────────────────────────────
   웹폰트 도착 전후로 글자 폭이 달라지면, word-break:keep-all 때문에
   어절 줄바꿈 지점이 통째로 바뀌어 문단 높이가 출렁인다(CLS).
   실측: Noto Sans KR / 맑은 고딕 = 92.0%, Noto Serif KR / 바탕 = 96.6%
   local()이 없는 OS(맥 등)에서는 이 페이스가 통째로 건너뛰어지고
   스택의 다음 서체가 그대로 쓰인다 → 폴백 코드 불필요. */
@font-face{font-family:"KRSans Fallback";src:local("Malgun Gothic");size-adjust:92%}
@font-face{font-family:"KRSerif Fallback";src:local("Batang");size-adjust:96.6%}

*{box-sizing:border-box}
html{scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hh) + var(--tabs-h) + 16px);
  scroll-padding-bottom:calc(var(--callbar-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans KR","KRSans Fallback","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-size:16px;line-height:1.75;word-break:keep-all;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%}
[hidden]{display:none!important}
mark{background:var(--field-soft);color:var(--ink)}

/* ── 검색어 형광 표시 (CSS Custom Highlight API) ────────────────
   Range 에 색만 입힌다. 표를 다시 그려도 강조가 깨지지 않고
   innerHTML 문자열 조립이 없어 안전하다.
   미지원 시 CSS.highlights 가 없어 JS가 즉시 빠져나가고 강조만 사라진다. */
::highlight(wiep-find){background-color:var(--navy-soft);color:var(--navy-deep);
  text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:2px}
@media (forced-colors:active){::highlight(wiep-find){background-color:Highlight;color:HighlightText}}

/* 건너뛰기 링크 / 화면에는 없고 보조기기에만 있는 텍스트 */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:0;top:0;z-index:60;background:var(--band-bg);color:var(--band-ink);
  padding:10px 16px;outline:3px solid var(--field);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:"Noto Serif KR","KRSerif Fallback","Batang",serif;
  letter-spacing:-.01em;line-height:1.35;margin:0;font-weight:700;text-wrap:balance}
h2{font-size:var(--s2);margin-bottom:8px}
h3{font-size:var(--s1);margin-bottom:10px}
h4{font-size:17px;margin-bottom:8px}
p{margin:0 0 14px}
p,.sub,.steps4 span,ul.dash li{text-wrap:pretty}
.sub{color:var(--ink2);margin:0 0 var(--sp-blk);max-width:660px}
.sec-head{margin-bottom:var(--sp-blk)}
.sec-head .sub{margin-bottom:0}
section{padding:var(--sp-sec) 0}
section.tight{padding:var(--sp-tight) 0}
.paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.note{font-size:13px;color:var(--mute);margin-top:12px}
.hr{height:1px;background:var(--line);border:0;margin:0}
.grid-bg{background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px}
/* 식별자(사업자등록번호·공고번호·계약번호)에만 — .code 는 404 대형 표시가 선점 */
.mono{font-family:"Consolas","D2Coding","Menlo",monospace;font-size:.92em;
  font-variant-numeric:tabular-nums;letter-spacing:0}
/* 숫자 자릿수 정렬 — 표를 단정하게 보이게 하는 가장 값싼 수단 */
table,.tl-year,.result-line b,.direct dd,.mono,.pager{font-variant-numeric:tabular-nums}

/* ── 버튼 ───────────────────────────────────────────── */
.btn{display:inline-block;padding:12px 22px;border:1.5px solid var(--navy);color:var(--navy);
  font-weight:500;border-radius:3px;background:transparent;font:inherit;font-size:15px;cursor:pointer;line-height:1.5}
.btn:hover{background:var(--navy-soft)}
.btn.primary{background:var(--band-bg);border-color:var(--band-bg);color:var(--band-ink)}
.btn.primary:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn.sm{padding:8px 15px;font-size:14px;border-width:1px}
.btn.wide{width:100%;text-align:center}
.btn.invert{background:#fff;border-color:#fff;color:#1c3557}
.btn[aria-disabled="true"],.btn:disabled{border-color:var(--line);color:var(--mute);background:var(--bg);cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--field);outline-offset:2px;
  scroll-margin-top:calc(var(--hh) + var(--tabs-h) + 12px);
  scroll-margin-bottom:calc(var(--callbar-h) + 12px)}

/* ── 헤더 / GNB ─────────────────────────────────────── */
header.site{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--hh)}
/* ── 로고 ──────────────────────────────────────────────────
   전체 로고는 13:1 로 가로가 길다. 좁은 화면에서 그대로 두면
   햄버거·검색·화면모드 버튼을 밀어내므로 심벌 + 이름으로 바꾼다. */
.logo{display:flex;align-items:center;gap:9px;font-family:"Noto Serif KR","KRSerif Fallback",serif;
  font-weight:700;font-size:18px;color:var(--ink);text-decoration:none}
.logo img{display:block;width:auto;height:22px}
.logo .lg-mark{display:none;height:21px}
.logo .lg-txt{display:none}
@media (max-width:900px){
  .logo .lg-full{display:none}
  .logo .lg-mark{display:block}
  .logo .lg-txt{display:inline;font-size:16px;letter-spacing:-.02em}
}
/* 원본 파랑(#0E6EB2)은 어두운 배경에서 3.4:1 로 흐려진다.
   로고는 흰 실루엣으로 반전한다 — 반전본 파일을 따로 두지 않는다. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo img,
  :root:not([data-theme="light"]) .f-logo{filter:brightness(0) invert(1)}
}
:root[data-theme="dark"] .logo img,
:root[data-theme="dark"] .f-logo{filter:brightness(0) invert(1)}
:root[data-theme="light"] .logo img,
:root[data-theme="light"] .f-logo{filter:none}
/* 고대비 모드에서는 필터가 오히려 해가 된다 */
@media (forced-colors:active){.logo img,.f-logo{filter:none}}

/* 375px 기준 로고 오른쪽이 검색 버튼에 닿는다. 아주 좁을 때만 한 단계 줄인다. */
@media (max-width:420px){
  .logo{gap:6px}
  .logo .lg-mark{height:18px}
  .logo .lg-txt{font-size:14px;letter-spacing:-.04em}
}
/* 320px 급 소형 단말에서는 글자를 빼고 심벌만 남긴다.
   회사명은 히어로·푸터·문서 제목에 있어 정보가 사라지지 않는다. */
@media (max-width:360px){
  .logo .lg-txt{display:none}
  .logo .lg-mark{height:21px}
}

/* 푸터 로고 */
/* 13:1 이라 높이 24px 이면 폭 312px. 좁은 화면에서 폭에 맞춰 같이 줄인다. */
.f-logo{display:block;width:auto;height:auto;max-height:24px;max-width:100%;margin:0 0 10px}
.menu{display:flex;gap:30px;align-items:center;font-size:15px;font-weight:500}
.menu a{padding:10px 0;border-bottom:2px solid transparent}
.menu a:hover{border-bottom-color:var(--navy-line)}
.menu a[aria-current="page"]{border-bottom-color:var(--navy);color:var(--navy)}
.menu a.cta{background:var(--band-bg);color:var(--band-ink);padding:8px 16px;border-radius:3px;border:0}
.menu a.cta:hover{background:var(--navy-deep)}
.burger{display:none;background:none;border:1px solid var(--line);padding:8px 12px;border-radius:3px;color:var(--ink);font-size:17px;cursor:pointer;line-height:1.4}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mnav.open{display:block}
.mnav a{display:block;padding:13px 24px;border-bottom:1px solid var(--line-soft);font-size:15px;font-weight:500}
.mnav a:last-child{border-bottom:0;color:var(--navy)}
@media (max-width:760px){
  .menu{display:none}.burger{display:block}.logo{font-size:16px}
}

/* ── 서브 페이지 제목 영역 (공통) ───────────────────── */
.phead{padding:clamp(26px, 2.4vw + 14px, 44px) 0 clamp(24px, 2.2vw + 13px, 40px);border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--mute);margin-bottom:16px}
/* 타깃 크기 24×24 확보. 한 글자 링크(‘홈’)도 폭 24px을 넘도록 좌우 패딩을
   주고, 같은 크기의 음수 마진으로 원래 위치를 유지한다(시각 변화 0). */
.crumb a{display:inline-block;padding:4px 7px;margin:0 -7px}
.crumb a:hover{text-decoration:underline}
.crumb b{color:var(--ink2);font-weight:400}
.crumb span{margin:0 7px;color:var(--navy-line)}
.phead h1{font-size:var(--s3)}
.phead p{margin:12px 0 0;color:var(--ink2);max-width:660px}

/* ── 앵커 탭 ───────────────────────────────────────── */
.tabs{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:var(--hh);z-index:20}
.tabs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.tabs li+li{border-left:1px solid var(--line-soft)}
.tabs a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;
  padding:10px 8px;font-size:15px;font-weight:500;color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--navy)}
.tabs a.on{color:var(--navy);border-bottom-color:var(--navy)}
.tabs .off{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  padding:10px 8px;font-size:15px;font-weight:500;color:var(--mute)}
@media (max-width:760px){
  .tabs ul{grid-template-columns:1fr 1fr}
  .tabs li:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .tabs li:nth-child(odd){border-left:0}
  .tabs a{padding:8px 6px;font-size:14px}
}
/* 브라우저 200% 확대 등 세로가 짧을 때 고정 요소가 화면을 잠식하지 않게 */
@media (max-height:480px){.tabs{position:static}}

/* ── 표 ────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;background:var(--paper);font-size:15px}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{font-weight:500;color:var(--ink2);border-bottom:2px solid var(--navy);font-size:14px;white-space:nowrap}
td.y,td.num{color:var(--mute);white-space:nowrap}
td.name a,td.name .has-detail{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
tbody tr:hover{background:var(--bg)}
/* 정의형 표 (회사 개요) */
table.def th{width:150px;font-weight:400;color:var(--mute);background:transparent;border-bottom:1px solid var(--line);white-space:nowrap}
table.def td{color:var(--ink)}
/* ── 가로 스크롤 표 ────────────────────────────────────────────
   스크롤되는 영역은 키보드로도 스크롤할 수 있어야 한다(WCAG 2.1.1).
   초점 부여는 wiep.js 가 '실제로 넘칠 때만' 한다 — 탭 순서 오염 방지. */
.tbl-scroll{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:16px;
  scrollbar-color:var(--navy-line) var(--line-soft)}
.tbl-scroll[tabindex]:focus-visible{outline:3px solid var(--field);outline-offset:2px}
/* 더 볼 것이 남은 쪽만 흐린다. 컨테이너는 자신을 스타일할 수 없어 안쪽 표에 건다. */
@supports (container-type:scroll-state){
  .tbl-scroll{container-type:scroll-state}
  .tbl-scroll>table{--edge-s:0px;--edge-e:0px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--edge-s),#000 calc(100% - var(--edge-e)),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 var(--edge-s),#000 calc(100% - var(--edge-e)),transparent 100%)}
  @container scroll-state(scrollable:left){.tbl-scroll>table{--edge-s:36px}}
  @container scroll-state(scrollable:right){.tbl-scroll>table{--edge-e:36px}}
  @media (forced-colors:active){.tbl-scroll>table{-webkit-mask-image:none;mask-image:none}}
  @media print{.tbl-scroll>table{-webkit-mask-image:none;mask-image:none}}
}
@media (forced-colors:active){.tbl-scroll{scrollbar-color:auto}}
.chip{display:inline-block;font-size:12px;line-height:1.7;padding:0 8px;border:1px solid var(--navy-line);color:var(--navy);border-radius:2px;white-space:nowrap}
.chip.f{border-color:var(--field);color:var(--field-ink)}
/* 진행중 표시 — 완료가 기본이라 진행중만 눈에 띄게 한다 */
/* ── 기둥 페이지 → 자료실 목록 ──────────────────────────── */
.more-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.more-list a{display:block;background:var(--paper);padding:18px 20px;text-decoration:none;height:100%}
.more-list a:hover{background:var(--navy-soft)}
.more-list b{display:block;font-size:16px;line-height:1.5;color:var(--ink);margin-bottom:6px}
.more-list span{display:block;font-size:13.5px;line-height:1.7;color:var(--ink2)}
@media (max-width:760px){.more-list{grid-template-columns:1fr}}
@media (forced-colors:active){.more-list a{border:1px solid ButtonText}}

/* ── 자주 묻는 질문 ────────────────────────────────────────
   구조화 데이터(FAQPage)와 **같은 내용**을 화면에도 그린다.
   마크업만 있고 화면에 없으면 검색엔진이 '오도하는 구조화 데이터'로 본다.
   빌드가 마크업에서 이 블록을 만들므로 두 벌이 어긋날 수 없다. */
.ins-faq{max-width:820px}
.ins-faq details{border:1px solid var(--line);background:var(--paper);margin-bottom:8px}
.ins-faq summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:15.5px;
  line-height:1.55;list-style:none;position:relative;padding-right:46px}
.ins-faq summary::-webkit-details-marker{display:none}
.ins-faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:19px;
  font-weight:400;color:var(--navy);line-height:1.2}
.ins-faq details[open] summary::after{content:"\2212"}
.ins-faq summary:hover{background:var(--navy-soft)}
.ins-faq summary:focus-visible{outline:3px solid var(--field);outline-offset:-3px}
.ins-faq .ans{padding:0 18px 16px;color:var(--ink2);font-size:15px;line-height:1.8;margin:0}
@media (forced-colors:active){.ins-faq details{border:1px solid ButtonText}}

.chip.on{border-color:var(--field);background:var(--field-soft);color:var(--field-ink);font-weight:500;margin-left:6px;vertical-align:1px}

/* 모바일: 실적/게시판 표 → 리스트형 변환 */
@media (max-width:760px){
  /* 정의형 표는 항목명/값을 위아래로 */
  table.def tr{display:block;border-bottom:1px solid var(--line)}
  table.def th,table.def td{display:block;border:0;padding:0}
  table.def th{width:auto;padding:14px 0 2px;font-size:13px}
  table.def td{padding:0 0 14px}
  table.rows{font-size:15px}
  table.rows thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  table.rows tr{display:flex;flex-wrap:wrap;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
  table.rows td{display:block;border:0;padding:0;width:100%}
  table.rows td.y,table.rows td.cat,table.rows td.date,table.rows td.hit{width:auto;font-size:13px;color:var(--mute);order:1}
  table.rows td.cat::before,table.rows td.hit::before{content:"·";margin:0 6px;color:var(--navy-line)}
  table.rows td.cat{order:2}
  table.rows td.date{order:1}
  table.rows td.hit{order:2}
  /* 번호 열은 화면에서만 감춘다 — display:none 이면 보조기기에서도 사라진다 */
  table.rows td.num{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  table.rows td.org{order:3;width:100%;font-weight:700;margin-top:4px}
  table.rows td.name{order:4;width:100%;color:var(--ink2);font-size:15px;margin-top:2px}
  table.rows td.title{order:0;width:100%;font-weight:500;margin-bottom:4px}
  table.rows tr:hover{background:transparent}
}

/* ── 폼 ────────────────────────────────────────────── */
form.panel{background:var(--paper);border:1px solid var(--line);padding:28px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
label{display:block;font-size:14px;color:var(--ink2);margin:0 0 16px}
.field{margin:0 0 16px}
.lb{display:block;margin-bottom:6px;font-weight:500;color:var(--ink);font-size:14px}
label>span.lb{margin-bottom:6px}
.req{color:var(--navy);font-weight:700;margin-left:2px}
.opt{color:var(--mute);font-weight:400;margin-left:4px;font-size:13px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px}
input::placeholder,textarea::placeholder{color:var(--mute)}
input:focus,select:focus,textarea:focus{border-color:var(--navy)}
textarea{min-height:150px;max-height:420px;resize:vertical;line-height:1.7;field-sizing:content}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.help{display:block;font-size:13px;color:var(--mute);margin-top:6px}
/* 실제 <input type=file> — 가짜 컨트롤은 키보드로 도달할 수 없어 폐기 */
input[type=file]{padding:0;border:0;background:transparent;font-size:14px;color:var(--mute)}
input[type=file]::file-selector-button{padding:9px 16px;margin-right:12px;border:1px solid var(--navy);
  color:var(--navy);background:var(--paper);border-radius:3px;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--navy-soft)}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:4px 0 20px;color:var(--ink2);border-top:1px solid var(--line-soft);padding-top:18px}
.agree input{width:24px;height:24px;margin-top:3px;flex:none;accent-color:var(--navy)}
.agree a{text-decoration:underline;text-underline-offset:3px;color:var(--navy)}
/* 스팸 방지 허니팟 — display:none 이면 봇이 걸러내므로 화면 밖으로만 보낸다 */
.hp{position:absolute;left:-9999px;top:0}
/* 오류 상태 — 4색 안에서 처리 (남색 강조 + ! 아이콘 + 고칠 방법을 담은 문장) */
.errmsg{display:none;position:relative;margin-top:7px;padding-left:20px;font-size:13px;font-weight:500;color:var(--navy-deep)}
.errmsg::before{content:"!";position:absolute;left:0;top:3px;width:15px;height:15px;line-height:13px;text-align:center;
  border:1.5px solid var(--navy-deep);border-radius:50%;font-size:11px;font-weight:700}
.field.err :is(input,select,textarea){border:1.5px solid var(--navy-deep);background:var(--navy-soft)}
.field.err .errmsg{display:block}                               /* 서버 렌더 경로 */
.field:has(:is(input,select,textarea):user-invalid) :is(input,select,textarea){
  border:1.5px solid var(--navy-deep);background:var(--navy-soft)}
.field:has(:user-invalid) .errmsg{display:block}                 /* 진행적 향상 */
/* 반대쪽 — 제대로 채운 항목에도 표시를 남긴다. 색이 아니라 글자(✓)로 알린다. */
.field:has(:is(input,select,textarea):user-valid) .lb::after{
  content:"✓" / "";margin-left:6px;color:var(--field-ink);font-weight:700}
.field:has(:is(input,textarea):user-valid) :is(input,textarea){
  border-color:color-mix(in oklab,var(--field) 55%,var(--line))}
/* 동의 체크박스는 안내문이 .field 바깥에 오므로 인접 선택자로 처리 */
.field.err+.errmsg,.field:has(:user-invalid)+.errmsg{display:block}
@media (max-width:760px){.f2{grid-template-columns:1fr}form.panel{padding:20px 18px}}
/* 격자·플렉스 자식은 기본이 min-width:auto 라 좁은 화면에서 컨테이너를 밀어낸다 */
form.panel,.direct,.doc-body,.post-body{min-width:0}

/* ── 직접 연락 박스 ─────────────────────────────────── */
.direct{background:var(--navy-deep);color:#e9eef5;padding:28px 24px}
.direct h3{color:#fff;font-size:19px;margin-bottom:18px}
.direct dt{font-size:13px;color:#9fb2cc;margin-bottom:2px}
.direct dd{margin:0 0 16px;color:#fff;font-family:"Noto Serif KR","KRSerif Fallback",serif;font-weight:600;font-size:21px;line-height:1.3}
.direct dd.sm{font-size:16px;font-family:inherit;font-weight:400;line-height:1.7;color:#c8d2e0}
.direct dd.mail{word-break:break-all}
.direct .tel{display:inline-block;background:#fff;color:#122540;padding:10px 18px;border-radius:3px;font-weight:700;font-size:15px}
.direct .ln{display:inline-block;color:#c8d2e0;font-size:14px;text-decoration:underline;text-underline-offset:3px;margin-top:4px;padding:4px 0}

/* ── 하단 문의 유도 (공통) ──────────────────────────── */
.cta-band{background:var(--band-bg);color:var(--band-ink);padding:40px 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.cta-band h2{color:var(--band-ink);font-size:clamp(19px, 1rem + 0.7vw, 23px);margin:0}
.cta-band p{color:var(--band-ink2);margin:6px 0 0;font-size:15px}
.cta-band .acts{display:flex;gap:10px;flex-wrap:wrap}
.cta-band .btn{border-color:var(--band-line);color:var(--band-ink)}
.cta-band .btn:hover{background:var(--navy-deep)}
.cta-band .btn.invert{background:#fff;border-color:#fff;color:#1c3557}
.cta-band .btn.invert:hover{background:#e4ebf4;color:#1c3557}
@media (max-width:760px){.cta-band{padding:32px 0}}

/* ── 푸터 ──────────────────────────────────────────── */
footer.site{background:var(--paper);border-top:1px solid var(--line);padding:36px 0;font-size:13.5px;color:var(--ink2)}
footer.site .cols{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.site b{color:var(--ink);font-weight:500}
.nb{white-space:nowrap}
footer.site .links a{display:inline-block;padding:6px 0;margin-left:20px}
footer.site .links a.pp{font-weight:700;color:var(--ink)}   /* 처리방침은 굵게 — 작성지침 권고 */
footer.site .links a:hover{text-decoration:underline}
footer.site small{display:block;margin-top:14px;color:var(--mute)}
@media (max-width:760px){footer.site .links a{margin:0 20px 0 0}}

/* ── 모바일 전화 걸기 고정 버튼 ─────────────────────── */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--band-bg);color:var(--band-ink);text-align:center;
  padding:15px 12px calc(15px + env(safe-area-inset-bottom,0px));
  font-weight:700;font-size:16px;border-top:1px solid var(--navy-deep)}
.callbar svg{vertical-align:-3px;margin-right:6px}
@media (max-width:760px){
  .callbar{display:block}
  body{padding-bottom:calc(var(--callbar-h) + env(safe-area-inset-bottom,0px))}
}

/* ── 시안 표시 리본 (납품 시 제거) ──────────────────── */
/* 어두운 화면에서 --field 가 밝아지면 흰 글자가 약 2.1:1 로 무너진다.
   앞 줄이 폴백(#fff 고정), 뒷 줄이 지원 브라우저의 자동 반전. */
.ribbon{background:var(--field);color:#fff;color:contrast-color(var(--field));
  font-size:13px;text-align:center;padding:6px 12px;line-height:1.5}
.ribbon b{font-weight:700}

/* ── 페이지네이션 ───────────────────────────────────── */
.pager{display:flex;justify-content:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.pager a,.pager span{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--paper);font-size:14px;color:var(--ink2);padding:0 10px}
.pager a:hover{border-color:var(--navy);color:var(--navy)}
.pager .on{background:var(--band-bg);border-color:var(--band-bg);color:var(--band-ink);font-weight:500}
.pager .pg-off{color:var(--mute);background:var(--bg);border-color:var(--line-soft)}

/* ── 필터 바 ───────────────────────────────────────── */
.filters{display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:10px;background:var(--paper);border:1px solid var(--line);padding:16px}
.filters .field{margin:0}
.filters .lb{font-size:13px;color:var(--ink2);font-weight:400}
.filters input,.filters select{background:var(--paper)}
.filters .f-btn{padding:11px 26px;align-self:end}
.result-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:26px 0 10px;font-size:14px;color:var(--ink2)}
.result-line b{font-family:"Noto Serif KR","KRSerif Fallback",serif;font-weight:600;color:var(--navy);font-size:17px}
.result-line .upd{font-size:13px;color:var(--mute)}
@media (max-width:760px){
  .filters{grid-template-columns:1fr 1fr;padding:14px}
  .filters .f-q,.filters .f-btn{grid-column:1/-1}
  .filters .f-btn{width:100%}
}

/* ── 연혁 타임라인 ─────────────────────────────────── */
.tl-row{display:grid;grid-template-columns:110px 1fr}
.tl-year{font-family:"Noto Serif KR","KRSerif Fallback",serif;font-weight:600;font-size:23px;color:var(--navy);padding-top:20px;line-height:1.2}
.tl-body{border-left:1px solid var(--line);padding:20px 0 20px 30px;position:relative}
.tl-body::before{content:"";position:absolute;left:-4.5px;top:29px;width:8px;height:8px;border-radius:50%;background:var(--navy)}
.tl-row.mark .tl-body::before{background:var(--field)}
.tl-row:last-child .tl-body{padding-bottom:0}
.tl-item{display:grid;grid-template-columns:42px 1fr;gap:14px;margin-bottom:6px;font-size:15px}
.tl-item i{font-style:normal;color:var(--mute);font-size:14px;padding-top:1px}
@media (max-width:760px){
  .tl-row{grid-template-columns:64px 1fr}
  .tl-year{font-size:19px;padding-top:16px}
  .tl-body{padding:16px 0 16px 20px}
  .tl-body::before{top:24px}
  .tl-item{grid-template-columns:36px 1fr;gap:10px;font-size:15px}
}

/* ── 도식 박스 (아이콘/다이어그램) ──────────────────── */
.dia{border:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;padding:20px}
.dia svg{width:100%;height:auto;max-width:210px}
.ico{stroke:var(--navy);stroke-width:1.5;fill:none;stroke-linecap:square;stroke-linejoin:miter}
.ico .g{stroke:var(--field)}
.ico .thin{stroke:var(--navy-line)}
.ico text{fill:var(--ink2);stroke:none;font-family:"Noto Sans KR",sans-serif;font-size:11px}

/* ── 수행 절차 (선형 4단계) ─────────────────────────── */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--navy);counter-reset:s}
.steps4 div{padding:14px 16px 0 0}
.steps4 div::before{counter-increment:s;content:counter(s);font-family:"Noto Serif KR","KRSerif Fallback",serif;font-weight:700;
  color:var(--navy);font-size:18px;display:block;line-height:1.2;margin-bottom:2px}
.steps4 b{display:block;font-size:15px;font-weight:500}
.steps4 span{font-size:13.5px;color:var(--mute);display:block;line-height:1.6}
@media (max-width:560px){.steps4{grid-template-columns:1fr 1fr}.steps4 div{padding-bottom:10px}}

/* ── 리스트 유틸 ───────────────────────────────────── */
ul.dash{list-style:none;margin:0;padding:0;font-size:15px}
ul.dash li{position:relative;padding-left:14px;margin-bottom:6px;color:var(--ink2)}
ul.dash li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--navy-line)}
ul.dash li b{color:var(--ink);font-weight:500}
ul.dash li a{display:inline-block;padding:2px 0}
ul.links{list-style:none;margin:0;padding:0;font-size:15px}
ul.links li{border-top:1px solid var(--line-soft);padding:9px 0}
ul.links li:first-child{border-top:0}
ul.links a{display:inline-flex;align-items:center;min-height:24px;padding:2px 0}  /* 2.5.8 조작 대상 24px */
ul.links a:hover{text-decoration:underline;text-underline-offset:3px}
ul.links .y{color:var(--mute);font-size:13.5px;margin-right:10px}

/* ── 시스템 설정 존중 ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Windows 고대비 모드 — select 화살표가 그라데이션이라 사라지는 문제 포함 */
@media (forced-colors:active){
  select{appearance:auto;background-image:none;padding-right:12px}
  .grid-bg{background-image:none}
  .btn{border:2px solid ButtonText}
  .chip{border:1px solid ButtonText}
  .errmsg::before{border-color:CanvasText}
  a:focus-visible,button:focus-visible,input:focus-visible,
  select:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:3px solid Highlight;outline-offset:2px}
}
/* 인쇄 — 담당자가 결재 서류에 첨부하는 실무 경로 */
@media print{
  header.site,.mnav,.tabs,.callbar,.cta-band,.ribbon,.pager,.filters,.tool,.skip,.acts,.post-acts{display:none!important}
  body{padding-bottom:0;background:#fff;color:#000;font-size:11pt;line-height:1.6}
  .wrap{max-width:none;padding:0 12mm}
  .grid-bg{background-image:none;background-color:#fff}
  section,section.tight{padding:12pt 0}
  .paper{border:0;background:#fff}
  .phead{border-bottom:1pt solid #000;padding:0 0 8pt}
  h1,h2,h3{page-break-after:avoid}
  table{font-size:9.5pt}
  thead{display:table-header-group}
  tr{page-break-inside:avoid}
  th,td{padding:5pt 6pt}
  /* 좁은 폭 인쇄에서 모바일 리스트 변환이 새는 것 방지 */
  table.rows tr{display:table-row}
  table.rows td{display:table-cell;width:auto}
  table.rows thead{position:static;width:auto;height:auto;clip:auto;clip-path:none}
  table.rows td.cat::before,table.rows td.hit::before{content:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}
  a[href^="#"]::after,a[href^="tel"]::after{content:none}
}

/* ════════════════════════════════════════════════════════
   2026 기능 트렌드 — 규칙(4색·무장식) 안에서 구현
   모두 미지원 시 기능만 사라지고 레이아웃은 그대로다.
   ════════════════════════════════════════════════════════ */

/* ── 페이지 전환 (View Transitions) ─────────────────────
   흰 화면 깜빡임 제거. 동작 줄이기 설정에서는 자동 해제. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation-duration:.16s}
  ::view-transition-new(root){animation-duration:.16s}
  header.site{view-transition-name:site-header}
  .callbar{view-transition-name:site-callbar}
}

/* ── 읽기 진행률 (스크롤 연동, JS 없음) ────────────────── */
.readbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:50;
  background:var(--field);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .readbar{animation:readgrow linear;animation-timeline:scroll(root block)}
}
@keyframes readgrow{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.readbar{display:none}}
@media print{.readbar{display:none}}

/* ── 도구 막대 (정렬·내려받기·인쇄·공유) ───────────────── */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.toolbar .tb{display:inline-flex;align-items:center;gap:6px;min-height:32px;
  padding:5px 12px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink2);font:inherit;font-size:13.5px;border-radius:3px;cursor:pointer}
.toolbar .tb:hover{border-color:var(--navy);color:var(--navy)}
.toolbar .tb svg{flex:none}
.toolbar .sep{flex:1}
@media print{.toolbar{display:none}}

/* ── 표 정렬 머리글 ───────────────────────────────────── */
th.sortable{padding:0}
th.sortable button{display:flex;align-items:center;gap:5px;width:100%;min-height:44px;
  padding:12px 14px;border:0;background:none;font:inherit;font-size:14px;font-weight:500;
  color:var(--ink2);cursor:pointer;text-align:left}
th.sortable button:hover{color:var(--navy)}
th.sortable .arw{opacity:.32;font-size:11px;line-height:1}
th[aria-sort] button{color:var(--navy)}
th[aria-sort] .arw{opacity:1}

/* ── 통합 검색 팔레트 ─────────────────────────────────── */
.kbd-hint{display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  border:1px solid var(--line);border-radius:3px;padding:0 5px;
  font-size:11px;color:var(--mute);font-family:"Consolas",monospace}
dialog.palette{width:min(620px,calc(100vw - 32px));max-height:70vh;padding:0;border:1px solid var(--line);
  border-radius:4px;background:var(--paper);color:var(--ink);margin:12vh auto auto;overflow:hidden}
dialog.palette::backdrop{background:rgba(18,37,64,.44)}
.palette form{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.palette input{border:0;background:transparent;padding:4px 0;font-size:17px}
.palette input:focus{outline:0}
.palette .pclose{border:1px solid var(--line);background:var(--bg);color:var(--ink2);
  font:inherit;font-size:12px;padding:4px 9px;border-radius:3px;cursor:pointer;white-space:nowrap}
.palette ul{list-style:none;margin:0;padding:6px;overflow-y:auto;max-height:calc(70vh - 62px)}
.palette li a{display:block;padding:10px 12px;border-radius:3px}
.palette li a:hover,.palette li a.cur{background:var(--navy-soft)}
.palette .pt{display:block;font-weight:500;font-size:15px}
.palette .ps{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.palette .pg{font-size:12px;color:var(--field-ink);font-weight:500}
.palette .none{padding:26px 16px;text-align:center;color:var(--mute);font-size:14px}
.palette mark{background:var(--field-soft);color:var(--ink);font-weight:700}

/* ── 용어 툴팁 (popover + anchor positioning) ──────────── */
.term{border-bottom:1px dotted var(--navy-line);cursor:help;background:none;border-left:0;border-right:0;
  border-top:0;padding:0;font:inherit;color:inherit}
.term:hover{border-bottom-color:var(--navy)}
[popover].tip{margin:0;border:1px solid var(--navy);background:var(--paper);color:var(--ink);
  padding:12px 14px;max-width:300px;font-size:13.5px;line-height:1.65;border-radius:3px;
  box-shadow:0 2px 10px rgba(18,37,64,.12)}
@supports (anchor-name:--x){
  [popover].tip{position-anchor:var(--anchor);position-area:block-end;position-try-fallbacks:flip-block;margin-top:6px}
}
[popover].tip b{display:block;color:var(--navy);margin-bottom:3px}

/* ── 헤더 도구 (검색·화면모드) ─────────────────────────── */
.navtools{display:flex;align-items:center;gap:8px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:3px;cursor:pointer;flex:none}
.iconbtn:hover{border-color:var(--navy);color:var(--navy)}
@media (max-width:760px){.navtools{margin-left:auto;margin-right:8px}}
@media print{.navtools{display:none}}

/* ── 화면 모드 토글 ───────────────────────────────────── */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:3px;cursor:pointer;flex:none}
.themebtn:hover{border-color:var(--navy);color:var(--navy)}
.themebtn .i-dark{display:none}
:root[data-theme="dark"] .themebtn .i-dark{display:block}
:root[data-theme="dark"] .themebtn .i-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .themebtn .i-dark{display:block}
  :root:not([data-theme="light"]) .themebtn .i-light{display:none}
}
@media print{.themebtn{display:none}}

/* ── 임시 저장 알림 ───────────────────────────────────── */
.draft{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--navy-line);
  background:var(--navy-soft);padding:10px 14px;margin:0 0 18px;font-size:13.5px;color:var(--ink2)}
.draft button{border:1px solid var(--navy);background:var(--paper);color:var(--navy);
  font:inherit;font-size:13px;padding:4px 11px;border-radius:3px;cursor:pointer;min-height:28px}
.savedtag{font-size:12.5px;color:var(--mute);margin-left:8px}

/* ── 빈 결과 행 ───────────────────────────────────────── */
.empty-row td{padding:36px 14px;text-align:center;color:var(--mute)}