/* common.css — 디자인 토큰 + 리셋. 색상은 여기서만 정의하고 컴포넌트에 하드코딩하지 않는다. */
:root{
  /* ── 색상 — ktc_poc theme/css/common.css 팔레트 이식 ── */
  --navy:#16408d; --navy-900:#0e2b5e; --primary:#246beb; --primary-weak:#eff5ff;
  --accent:#5089ef;
  --bg:#f4f6f9; --gray-bg:#f8f8f8; --surface:#ffffff; --border:#dbe2ec;
  --text:#1a1a1a; --text2:#555b66; --text3:#8a93a3;
  --success:#1e7e34; --warn:#fb8c00; --danger:#e03131; --info:#0000cd;
  --l1:#0891b2; --l2:#246beb; --l3:#7c3aed;
  --radius:8px; --shadow:0 1px 4px rgba(16,40,90,.07);
  /* ── 레이아웃 치수 — ktc 기준 ── */
  --inner-max:1320px;      /* ktc_home theme/css/layout.css --inner-max */
  --snb-w:264px;           /* 검증기관 사이트 좌측메뉴 (ktc_home .wrap-remote 280px 기준) */
  --snb-tit-bg:#1d56bc;    /* ktc_home --primary60 (.remote-tit 배경) */
  --snb-tit-bg-50:rgba(29,86,188,.5);  /* 위 색의 농도 절반(투명도 50%) */
  --secondary05:#edf1f5;   /* ktc_home 2depth 배경 */
  --gray30:#d8d8d8;        /* ktc_home 구분선 */
  --snb-w-mng:160px;       /* 배포 관리 좌측메뉴 (ktc_mng #snb width) */
  --font:-apple-system,BlinkMacSystemFont,'Malgun Gothic','맑은 고딕','Noto Sans KR',
         AppleGothic,'Segoe UI Symbol','Noto Sans Symbols 2','Apple Symbols',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
/* 제안 이미지: 콘텐츠 바깥은 흰색, 본문 영역만 회색(--bg). 그래서 body 는 흰색이고
   회색은 본문 컬럼이 갖는다(layout.css 의 .body-col). */
body{font-family:var(--font);background:#fff;color:var(--text);font-size:14px;line-height:1.55}
a{color:var(--primary);text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer}
table{border-collapse:collapse;width:100%}
.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);
     border-radius:8px;padding:7px 14px;font-weight:600}
.btn:hover{border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
      padding:18px;box-shadow:var(--shadow)}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700}
.tag-l1{background:#E0F5FA;color:var(--l1)} .tag-l2{background:var(--primary-weak);color:var(--l2)}
.tag-l3{background:#F1E9FE;color:var(--l3)}
.tag-navy{background:#E8EEF9;color:var(--navy)}
.tag-ok{background:#E6F6EC;color:var(--success)} .tag-warn{background:#FDF3E3;color:var(--warn)}
.tag-bad{background:#FDECEC;color:var(--danger)}
.muted{color:var(--text3);font-size:12.5px}
.page-title{font-size:19px;font-weight:800;color:var(--navy);margin:0 0 4px}
.page-desc{color:var(--text2);font-size:13px;margin:0 0 18px}
.notice{border-left:3px solid var(--info);background:#F0FAFC;padding:10px 14px;
        border-radius:0 8px 8px 0;font-size:12.5px;color:var(--text2);margin:14px 0}
.notice-warn{border-left-color:var(--warn);background:#FDF8EF}
