@charset "utf-8"; /* layout.css — ktc_poc 레이아웃 이식. 검증기관 사이트 : ktc_home 방식 — 상단 GNB(대분류 가로) + 좌측 SNB(중분류) + inner 1320px 배포 관리(제어) : ktc_mng 방식 — 짙은 GNB + 좁은 고정 SNB(160px) + 전폭 콘텐츠 두 모드는 의 mode-home / mode-mng 클래스로 갈린다. */ /* ── 공통 컨테이너 ───────────────────────────────────────── ktc_home theme/css/layout.css 의 .inner 규약을 그대로 따른다 (--inner-max: 1320px). */ .inner{width:100%;max-width:var(--inner-max);margin:0 auto;padding:0 20px} #wrap{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden} /* ── 최상단 바 ── */ /* 레이아웃 제안(plan/req/260821_전체 레이아웃 수정 요청.png) 기준. 제안 이미지의 픽셀을 직접 읽어 확인한 결과: · 최상단 바 · 헤더 · GNB · 좌측메뉴 · 본문 · 푸터가 **모두 같은 폭**(x=494~1670) · 그 바깥은 흰색, 본문 영역만 회색(#f4f6f9) 즉 색 띠를 화면 끝까지 늘리지 않는다. 배경을 바깥 요소가 아니라 .inner 가 갖게 해 폭을 일치시킨다. (처음에 이미지를 눈대중으로 읽고 top-bar 를 전체 폭으로 되돌렸다가 사용자 지적을 받았다 — 이후로는 픽셀을 직접 샘플링해 확인했다.) */ #top-bar{background:transparent;color:#c8d6ee;font-size:12px;line-height:1;flex:none} #top-bar > .inner{background:var(--navy-900)} .tb-inner{display:flex;align-items:center;gap:12px;height:28px} .tb-gov{opacity:.85} .tb-spacer{flex:1} .tb-link{color:#e3ecfb;text-decoration:none;font-weight:600} .tb-link:hover{text-decoration:underline} #tb-alert .hd-badge{margin-left:4px} /* ── 헤더 ── */ #header{background:transparent;flex:none} #header > .inner{background:var(--surface);border-bottom:1px solid var(--border)} .hd-inner{display:flex;align-items:center;gap:14px;height:64px} .hd-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--navy); font-weight:800;font-size:17px;letter-spacing:-.4px;white-space:nowrap} .hd-logo img{width:26px;height:26px} .hd-org{display:flex;align-items:center;gap:7px;padding-left:14px;border-left:1px solid var(--border);min-width:0} .hd-org-name{font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px} .hd-spacer{flex:1} .hd-user{font-size:12.5px;color:var(--text2);white-space:nowrap} .hd-btn{background:var(--surface);border:1px solid var(--border);color:var(--text2);border-radius:7px; padding:5px 11px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap} .hd-btn:hover{border-color:var(--primary);color:var(--primary)} #hd-assessee,#hd-switch{border:1px solid var(--border);border-radius:7px;padding:5px 9px; font-size:12.5px;font-family:inherit;background:var(--surface);color:var(--text);max-width:210px} /* ── GNB (대분류 가로 메뉴) — ktc_home #gnb .depth1 참조 ── */ #gnb{background:transparent;flex:none;position:sticky;top:0;z-index:300} #gnb > .inner{background:var(--navy);padding:0} .gnb-inner{display:flex;align-items:stretch;gap:0} #gnb a{display:flex;align-items:center;padding:0 22px;height:46px;color:#cfdcf3; font-size:14.5px;font-weight:700;text-decoration:none;position:relative;white-space:nowrap} #gnb a:hover{color:#fff;background:rgba(255,255,255,.07)} #gnb a.on{color:#fff} #gnb a.on:after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:3px;background:var(--accent)} /* ── SNB — ktc_home 퍼블리싱 원본 비율 이식 ───────────────── 참고: ktc_home/src/webapp/css/pub/snb.css .wrap-remote{width:280px} / .remote-tit{height:145px;font-size:30px;배경 primary60} .snb > li > a{padding:19px 20px 20px 15px;font-size:18px;border-bottom:1px solid gray30} 색상 정본: --main01 #16408d / --primary60 #1d56bc / --secondary05 #edf1f5 / --gray30 #d8d8d8 예전에는 12.5px 라벨 + 번호 뱃지 + '›' 로 촘촘하게 그렸는데, 참고 사이트와 글자 크기·여백·구분선이 전혀 달라 "스타일시트가 전혀 다르다"는 지적을 받았다. */ #snb{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto} /* 타이틀 배너 — .remote-tit */ /* 높이는 기존의 절반. 상단 GNB(--navy #16408d)와 같은 색이면 두 띠가 한 덩어리로 보여 구분이 안 된다 — 배너는 밝은 파랑(--snb-tit-bg #1d56bc)으로 띄운다. */ /* 배경은 투명도 50% — 흰 바탕 위에서 색 농도가 절반으로 옅어진다. 옅어진 배경에 흰 글씨를 그대로 두면 대비가 무너지므로 글자는 네이비로 바꾼다. */ /* 2026-08-22: 참고 원본(ktc_home .remote-tit)의 배경 이미지 remote_bg.png 를 그대로 가져와 적용. 원본은 145px 이나 좌측 폭(264px)에 맞춰 96px. 이미지 위라 글자는 흰색. */ .snb-title{display:flex;align-items:center;justify-content:center; min-height:96px;padding:12px 14px; background:var(--snb-tit-bg,#1d56bc) url(../images/snb_bg.png) no-repeat center / cover; color:#fff;font-size:20px;font-weight:700;letter-spacing:-.5px;text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.25); line-height:1.25;position:relative;border-bottom:2px solid var(--navy)} .snb-cnt{position:absolute;top:9px;right:12px;background:var(--navy); color:#fff;border-radius:99px;font-size:11px;font-weight:700;padding:2px 9px;letter-spacing:0} .snb-list{display:block} /* 그룹 라벨 — 전체 메뉴 모드에서만 쓰인다 */ .snb-group{display:flex;align-items:center;gap:6px;padding:13px 16px 8px; font-size:13px;font-weight:700;color:var(--text2);background:var(--secondary05,#edf1f5); border-bottom:1px solid var(--gray30,#d8d8d8)} .snb-group.on{color:var(--navy)} .snb-gcnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--text3); background:#fff;border-radius:99px;padding:1px 8px} /* 항목 — .snb > li > a */ .snb-item{display:flex;align-items:center;gap:10px; padding:18px 18px 18px 20px;line-height:1.35;font-size:16.5px;font-weight:500; letter-spacing:-.5px;color:var(--text);text-decoration:none; border-bottom:1px solid var(--gray30,#d8d8d8);transition:color .15s,border-color .15s} .snb-no{display:none} /* 번호 뱃지는 참고 사이트에 없다 */ .snb-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .snb-arrow{font-size:0;width:15px;height:15px;flex:none;position:relative;opacity:0; transition:opacity .15s,transform .2s} .snb-arrow::before{content:'';position:absolute;top:3px;left:3px;width:7px;height:7px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg)} .snb-item:hover{color:var(--navy);border-color:#0f408f;font-weight:600} .snb-item:hover .snb-arrow{opacity:1} .snb-item.on{color:var(--navy);font-weight:700;border-color:#0f408f; background:var(--secondary05,#edf1f5)} .snb-item.on .snb-arrow{opacity:1} #snb .empty{padding:20px;color:var(--text3);font-size:13.5px;line-height:1.7} #snb:empty{border-right:0} /* ── 브레드크럼 + 화면 타이틀 ── */ #breadcrumb{flex:none} /* 레이아웃 제안(plan/req/260821_전체 레이아웃 수정 요청.png) — 네비게이션(브레드크럼)은 본문 우측 끝에 붙인다. 본문 제목과 시선이 겹치지 않고, 지금 위치를 눈이 마지막으로 훑는다. */ .bc-inner{display:flex;align-items:center;justify-content:flex-end;gap:6px; font-size:12px;color:var(--text3);padding:12px 0 0;flex-wrap:wrap} .bc-inner a{color:var(--text3);text-decoration:none} .bc-inner a:hover{color:var(--primary)} .bc-sep{opacity:.5} /* ── 본문 ── */ #content{flex:1;min-width:0} #footer{background:var(--gray-bg);border-top:1px solid var(--border);flex:none;color:var(--text3);font-size:11.5px} .ft-inner{display:flex;align-items:center;gap:14px;height:44px;flex-wrap:wrap} .ft-spacer{flex:1} /* ══════════════════════════════════════════════════════════ mode-home — 검증기관 사이트 (ktc_home 방식) GNB 가로 + SNB 좌측, 본문은 inner(1320px) 안에서 SNB 옆에 놓인다 ══════════════════════════════════════════════════════════ */ .mode-home #snb, .mode-home #breadcrumb, .mode-home #content{width:100%;max-width:var(--inner-max);margin:0 auto} .mode-home .body-row{display:grid;grid-template-columns:var(--snb-w) 1fr;gap:0; width:100%;max-width:var(--inner-max);margin:0 auto;flex:1;min-height:0} .mode-home #snb{border-right:1px solid var(--border);padding-bottom:20px} .mode-home #content{padding:0 20px 30px} .mode-home #breadcrumb .inner{padding:0} /* ══════════════════════════════════════════════════════════ mode-mng — 배포 관리 (ktc_mng 방식) 짙은 GNB + 좁은 고정 SNB(160px) + 전폭 콘텐츠 ══════════════════════════════════════════════════════════ */ .mode-mng #top-bar{background:#0a1a3a} .mode-mng #header{background:linear-gradient(170deg,#e7eef6 0%,#f4f8fc 45%,#e2ebf4 100%);border-bottom:1px solid #c9d6e6} .mode-mng #gnb{background:#1a2a4a} .mode-mng .inner{max-width:none;padding:0 16px} .mode-mng .body-row{display:grid;grid-template-columns:var(--snb-w-mng) 1fr;flex:1;min-height:0} .mode-mng #snb{background:#f4f6f9;border-right:1px solid #d0d8e4} .mode-mng .snb-title{background:#14524f;font-size:12px;font-weight:800;min-height:0; padding:9px 11px;justify-content:flex-start;text-align:left;letter-spacing:0} .mode-mng .snb-cnt{position:static;margin-left:auto} .mode-mng .snb-item{padding:10px 12px;font-size:13px;gap:7px;letter-spacing:0} .mode-mng #content{padding:14px 16px;max-width:none} .mode-mng #breadcrumb .inner{padding:0 16px} /* ── 가로 넘침 방지 (Grid/Flex 자식 min-width:auto 대응) ── */ #wrap > *,.body-row > *{min-width:0} #content{overflow-x:hidden} .obj-t,.ctl-t,.artline,.remneed,.al-main,.hash,.muted{overflow-wrap:anywhere} .card table.tbl{display:block;overflow-x:auto} @media (min-width:821px){.card table.tbl{display:table}} /* ── 모바일 ── */ #menu-toggle{display:none;background:transparent;border:1px solid var(--border); border-radius:7px;padding:7px 8px;flex-direction:column;gap:3px;cursor:pointer} #menu-toggle i{display:block;width:16px;height:2px;background:var(--text2);border-radius:2px} #menu-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40} #menu-scrim.on{display:block} @media (max-width:900px){ #menu-toggle{display:flex} .body-row{display:block !important} #snb{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:50; transform:translateX(-100%);transition:transform .22s;box-shadow:2px 0 14px rgba(0,0,0,.14); overflow-y:auto;border-right:1px solid var(--border)} #snb.open{transform:translateX(0)} #gnb{overflow-x:auto} #gnb a{padding:0 14px;font-size:13.5px} .hd-logo span{display:none} #hd-assessee,#hd-switch{max-width:130px} .tb-gov{display:none} /* 좁은 폭에서 기관 배지(유형·진단·인증)는 줄바꿈되며 헤더(56px) 밖으로 삐져나온다. 실제로 390px 에서 배지 높이가 93px 까지 늘어나 모든 화면에서 헤더가 깨졌다. 정보는 [사용설명서]·[제도 안내]에서 볼 수 있으므로 좁은 폭에서는 감춘다. */ #hd-ptype,#hd-advisory,#hd-certify{display:none} .hd-org{padding-left:10px;gap:0;flex:0 1 auto;min-width:0} .hd-org-name{max-width:112px;font-size:13px} .hd-inner{flex-wrap:nowrap;overflow:hidden} .hd-inner > *{flex-shrink:0} } @media (max-width:560px){ .hd-inner{height:56px;gap:8px} .hd-user{display:none} /* 390px 급에서는 기관명까지 줄여야 [기업선택]·[알림]·[로그아웃]이 들어간다 */ .hd-org{display:none} #hd-assessee,#hd-switch{max-width:118px} .hd-btn{padding:5px 9px} .inner{padding:0 12px} .mode-home #content{padding:0 12px 24px} } /* body-col — 브레드크럼 + 본문을 한 열로. ★ grid 칸을 명시 고정한다 — 자동 배치에 맡기면 SNB 가 숨겨질 때 본문이 1번 칸으로 간다. */ /* 회색 바탕은 본문 컬럼이 갖는다 — body 는 흰색이라 콘텐츠 바깥이 흰색으로 남는다 (제안 이미지의 바깥 흰색 / 본문 회색 구조). */ .body-col{display:flex;flex-direction:column;min-width:0;grid-column:2; background:var(--bg);padding:0 14px 16px} .body-row > #snb{grid-column:1} /* SNB 가 비면 첫 칸을 0 으로 접는다 */ .body-row:has(> #snb:empty){grid-template-columns:0 1fr !important} .mode-home .body-col{padding:0 14px 16px} .mode-mng .body-col{min-width:0} /* ── 알림: 종 버튼 + 드롭다운 + 토스트 ───────────────────── 예전에는 최상단 12px 링크 하나뿐이라 사용자가 알림을 인지하지 못했다. */ .hd-bell-wrap{position:relative;display:inline-flex} .hd-bell{position:relative;width:34px;height:34px;border:1px solid var(--border);background:var(--surface); border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0} .hd-bell svg{width:19px;height:19px;fill:var(--text2)} .hd-bell:hover{border-color:var(--primary)} .hd-bell:hover svg{fill:var(--primary)} .hd-bell.has svg{fill:var(--warn)} .hd-bell.urgent{border-color:var(--danger);background:#FDECEC} .hd-bell.urgent svg{fill:var(--danger);animation:bell-ring 2.2s ease-in-out 3} @keyframes bell-ring{0%,88%,100%{transform:rotate(0)}90%{transform:rotate(11deg)} 93%{transform:rotate(-9deg)}96%{transform:rotate(5deg)}} @media (prefers-reduced-motion:reduce){.hd-bell.urgent svg{animation:none}} .hd-bell-n{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px; border-radius:99px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800; line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface)} .hd-bell.has .hd-bell-n{background:var(--warn)} .np-panel{position:absolute;top:42px;right:0;width:380px;max-width:calc(100vw - 24px); background:var(--surface);border:1px solid var(--border);border-radius:10px; box-shadow:0 14px 40px rgba(16,32,64,.18);z-index:60;overflow:hidden} .np-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border); background:var(--gray-bg)} .np-head b{font-size:13px;color:var(--navy);flex:1;min-width:0} .np-more{border:0;background:none;color:var(--primary);font-size:12px;font-weight:600; cursor:pointer;font-family:inherit;white-space:nowrap} .np-more:hover{text-decoration:underline} .np-body{max-height:64vh;overflow-y:auto} .np-empty{padding:34px 16px;text-align:center;color:var(--text2);font-size:13px} .np-item{padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;border-left:3px solid transparent} .np-item:last-child{border-bottom:0} .np-item:hover{background:var(--primary-weak)} .np-item.bad{border-left-color:var(--danger)} .np-item.warn{border-left-color:var(--warn)} .np-item.info{border-left-color:var(--border)} .np-hd{display:flex;align-items:center;gap:6px;margin-bottom:3px} .np-lv{font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:99px} .np-item.bad .np-lv{background:#FDECEC;color:var(--danger)} .np-item.warn .np-lv{background:#FDF3E3;color:var(--warn)} .np-item.info .np-lv{background:var(--gray-bg);color:var(--text2)} .np-who{font-size:11.5px;color:var(--text2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .np-t{font-size:13px;font-weight:700;color:var(--text);line-height:1.45} .np-d{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.5} .np-a{font-size:12px;color:var(--primary);margin-top:3px;font-weight:600} .toast-host{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:9px; max-width:min(380px,calc(100vw - 36px))} .toast{position:relative;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--primary); border-radius:9px;box-shadow:0 10px 30px rgba(16,32,64,.18);padding:13px 38px 13px 15px; font-size:13px;line-height:1.6;animation:toast-in .26s ease-out} .toast.bad{border-left-color:var(--danger)} .toast.warn{border-left-color:var(--warn)} .toast.out{animation:toast-out .26s ease-in forwards} .toast a{font-weight:600} .toast-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:17px;line-height:1; color:var(--text2);cursor:pointer;font-family:inherit} .toast-x:hover{color:var(--text)} @keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes toast-out{to{opacity:0;transform:translateY(8px)}} @media (prefers-reduced-motion:reduce){.toast{animation:none}.toast.out{animation:none;opacity:0}} .hd-slogan{font-size:11.5px;color:var(--text2);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:190px} .hd-badge.warn{background:var(--warn)} @media (max-width:900px){.hd-slogan{display:none}.np-panel{width:320px}}