@charset "utf-8";
/* ============================================================
nowcast_head.css (2026 개선)
Nowcast 지표 화면 전용 - 새 상단/사이트맵 스타일.
구 화면(common.css / Newmain.css ...)과 섞여도 서로 안 건드리도록
전역 선택자를 전부 제거하고 상단 영역 안으로 가뒀다.
배포 위치 : {contextPath}/assets/bigmain/css/nowcast_head.css
부르는 곳 : newTopNowcast.jsp 첫 줄의 하나. JSP 는 건드리지 않는다.
------------------------------------------------------------
sub_style.css 와의 차이
- reset.css : 쓰지 않는다. 전역 리셋이라 본문을 부순다.
필요한 부분만 아래 "스코프 리셋"으로 다시 넣었다.
- krds.css : 토큰(:root)과 상단이 쓰는 것만 가져왔다.
html / body / h1~h6 / p / a 같은 전역 타이포는 전부
상단 영역 안으로 옮겼다.
- layout.css : 전부 .kb- 로 시작하므로 그대로 import.
- images.css : 전부 .ico / .img- 이고 구 화면이 안 쓰므로 그대로 import.
- sub.css/sub_cont.css : 본문(게시판)용이라 지표에는 필요 없다.
------------------------------------------------------------
★ :where() 를 쓴 이유 - 건드리지 말 것
스코프를 그냥 ".kb-header *" 로 쓰면 우선순위가 (0,1,0) 이 되어
layout.css 의 .kb-xxx 규칙까지 이겨버린다(상단이 깨진다).
:where() 는 우선순위를 0 으로 만들어서
common.css 의 전역 *(0,0,0) 과 "동점" -> 이 파일이 나중에 로드되므로 이김
layout.css 의 .kb- 규칙보다 "낮음" -> 상단 디자인이 이김
이 두 가지가 동시에 성립한다.
그래서 이 는 반드시 구 CSS 들보다 뒤에 와야 한다.
(newTopNowcast.jsp 가 body 안에서 부르므로 자동으로 뒤가 된다)
※ 단, 우선순위 0 은 "태그 선택자(0,0,1)" 한테도 진다.
나우캐스트는 jqgrid/base.css 의
pre,div,ul,ol,dl,p,td,th,input,textarea,select { font-size:13px }
을 타서 상단 글자가 눌렸다. (생활인구는 base.css 를 안 타서 멀쩡)
이건 아래 "3-1. 태그 선택자 대응" 에서 같은 (0,0,1) 로 맞춰 처리한다.
전체 스코프를 (0,1,0) 으로 올리면 layout.css 와 동점이 되어
상단 전체가 로드 순서에 휘둘리므로 그렇게 하지 말 것.
============================================================ */
@import url("layout.css");
@import url("images.css");
/* ------------------------------------------------------------
1. 웹폰트
------------------------------------------------------------ */
@font-face {
font-family: 'Pretendard GOV';
font-weight: 400; font-style: normal; font-display: swap;
src: url('../fonts/PretendardGOV-Regular.woff2') format('font-woff2'),
url('../fonts/PretendardGOV-Regular.woff') format('woff');
}
@font-face {
font-family: 'Pretendard GOV';
font-weight: 500; font-style: normal; font-display: swap;
src: url('../fonts/PretendardGOV-Medium.woff2') format('font-woff2'),
url('../fonts/PretendardGOV-Medium.woff') format('woff');
}
@font-face {
font-family: 'Pretendard GOV';
font-weight: 600; font-style: normal; font-display: swap;
src: url('../fonts/PretendardGOV-SemiBold.woff2') format('font-woff2'),
url('../fonts/PretendardGOV-SemiBold.woff') format('woff');
}
@font-face {
font-family: 'Pretendard GOV';
font-weight: 700; font-style: normal; font-display: swap;
src: url('../fonts/PretendardGOV-Bold.woff2') format('font-woff2'),
url('../fonts/PretendardGOV-Bold.woff') format('woff');
}
/* ------------------------------------------------------------
2. 디자인 토큰
커스텀 속성만 정의하므로 이것만으로는 어떤 요소도 바뀌지 않는다.
단, --header-h 등은 rem 이 아니라 px 로 두어 구 화면의
html{font-size} 와 무관하게 동작하도록 했다.
------------------------------------------------------------ */
:root {
--krds-primary: #256EF4;
--krds-primary-hover: #0B50D0;
--krds-primary-active: #083AA0;
--krds-primary-light: #E8F0FE;
--krds-primary-bg: #F0F6FF;
--krds-primary-dark: #0B2F7A;
--krds-secondary: #003675;
--krds-secondary-light:#D1E1FF;
--krds-point: #17C1CC;
--krds-point-light: #6FE3E8;
--krds-gray-0: #FFFFFF;
--krds-gray-5: #F7F8FA;
--krds-gray-10: #EFF1F5;
--krds-gray-20: #E4E7EC;
--krds-gray-30: #D0D4DB;
--krds-gray-40: #B1B8C0;
--krds-gray-50: #8A9099;
--krds-gray-60: #646C78;
--krds-gray-70: #58616A;
--krds-gray-80: #33363D;
--krds-gray-90: #1E2124;
--krds-gray-95: #14161A;
--krds-info: #256EF4;
--krds-success: #228738;
--krds-warning: #FF9000;
--krds-danger: #DE3412;
--krds-danger-text: #C6290F;
--krds-info-bg: #E8F0FE;
--krds-success-bg: #E8F5EB;
--krds-warning-bg: #FFF4E5;
--krds-danger-bg: #FCEAE7;
--krds-text: var(--krds-gray-90);
--krds-text-weak: var(--krds-gray-70);
--krds-text-weaker: var(--krds-gray-60);
--krds-text-disabled: var(--krds-gray-40);
--krds-text-invert: #FFFFFF;
--krds-bg: #FFFFFF;
--krds-bg-sub: var(--krds-gray-5);
--krds-border: var(--krds-gray-20);
--krds-border-strong: var(--krds-gray-40);
--krds-font: 'Pretendard GOV', 'Pretendard', -apple-system, BlinkMacSystemFont,
'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕',
'Noto Sans KR', 'Noto Sans CJK KR', 'Nanum Gothic',
system-ui, sans-serif;
/* ※ 구 화면은 html{font-size} 를 따로 건드릴 수 있으므로
rem 이 아니라 px 로 고정한다. (원본 krds.css 와 계산값은 동일) */
--fs-display: 64px;
--fs-h1: 44px;
--fs-h2: 36px;
--fs-h3: 28px;
--fs-h4: 22px;
--fs-title-l: 20px;
--fs-title-m: 18px;
--fs-body: 17px;
--fs-detail: 15px;
--fs-caption: 15px;
--lh-tight: 1.35;
--lh-base: 1.6;
--lh-loose: 1.75;
--krds-radius-xs: 2px;
--krds-radius-sm: 4px;
--krds-radius: 6px;
--krds-radius-md: 8px;
--krds-radius-lg: 12px;
--krds-radius-xl: 16px;
--krds-radius-2xl:24px;
--krds-radius-pill: 999px;
--krds-bw: 1px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
--sp-9: 48px; --sp-10:64px; --sp-11:80px; --sp-12:100px;
--krds-elv-1: 0 1px 2px rgba(30, 33, 36, .06);
--krds-elv-2: 0 2px 8px rgba(30, 33, 36, .08);
--krds-elv-3: 0 6px 20px rgba(30, 33, 36, .10);
--krds-elv-4: 0 12px 32px rgba(30, 33, 36, .14);
--layout-max: 1440px;
--layout-pad: 40px;
--header-h: 88px;
--ease: cubic-bezier(.22, .61, .36, 1);
--dur-fast: .18s;
--dur: .28s;
--dur-slow: .5s;
}
@media (max-width: 1024px) {
:root {
--fs-display: 44px; --fs-h1: 32px; --fs-h2: 28px; --fs-h3: 24px;
--layout-pad: 24px; --header-h: 64px;
}
}
@media (max-width: 600px) {
:root {
--fs-display: 30px; --fs-h1: 24px; --fs-h2: 22px; --fs-h3: 20px; --fs-h4: 18px;
--layout-pad: 16px; --header-h: 56px;
}
}
@media (max-width: 359px) {
:root { --layout-pad: 12px; }
}
@media (prefers-contrast: more) {
:root {
--krds-text-weak: var(--krds-gray-90);
--krds-text-weaker: var(--krds-gray-80);
--krds-border: var(--krds-gray-50);
}
}
/* ============================================================
3. 스코프 리셋 + 기본 타이포
reset.css / krds.css 의 전역 규칙을 상단 영역 안으로 옮긴 것.
전부 :where() 로 감싸 우선순위 0 을 유지한다.
============================================================ */
/* box-sizing */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer),
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) *,
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) *::before,
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) *::after {
box-sizing: border-box;
}
/* 상단 영역 기준값 - 여기서만 값을 정하고 아래는 전부 상속받는다 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) {
font-family: var(--krds-font);
font-size: var(--fs-body);
font-weight: 400;
font-style: normal;
line-height: var(--lh-base);
color: var(--krds-text);
letter-spacing: normal;
word-break: keep-all;
overflow-wrap: break-word;
text-align: left;
}
/* common.css 의 * 규칙이 요소마다 직접 박아둔 값을 상속으로 되돌린다 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) * {
margin: 0;
padding: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
text-align: inherit;
}
/* common.css 의 *::before/*::after { position:absolute } 되돌리기 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) *::before,
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) *::after {
display: revert;
position: revert;
}
/* 제목 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) :is(h1,h2,h3,h4,h5,h6) {
font-weight: 700;
line-height: var(--lh-tight);
color: var(--krds-gray-90);
letter-spacing: -.02em;
}
:where(.kb-header, .kb-sitemap, .kb-mosite, .kb-relsite, .kb-footer) h1 { font-size: var(--fs-h1); }
:where(.kb-header, .kb-sitemap, .kb-mosite, .kb-relsite, .kb-footer) h2 { font-size: var(--fs-h2); }
:where(.kb-header, .kb-sitemap, .kb-mosite, .kb-relsite, .kb-footer) h3 { font-size: var(--fs-h3); }
:where(.kb-header, .kb-sitemap, .kb-mosite, .kb-relsite, .kb-footer) h4 { font-size: var(--fs-h4); }
:where(.kb-header, .kb-sitemap, .kb-mosite, .kb-relsite, .kb-footer) h5 { font-size: var(--fs-title-l); }
:where(.kb-header, .kb-sitemap, .kb-mosite, .kb-relsite, .kb-footer) h6 { font-size: var(--fs-title-m); }
/* 목록 - common.css 의 display:inline-block 되돌리기 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) :is(ul,ol,li,dl,dd,dt) {
display: revert;
}
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) :is(ul,ol) {
list-style: none;
}
/* 링크 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) a {
color: inherit;
text-decoration: none;
background-color: transparent;
}
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) a:hover,
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) a:focus {
text-decoration: underline;
}
/* 버튼 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) button {
cursor: pointer;
border: 0;
background: none;
font: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
}
/* 이미지 · 강조 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) :is(img,svg,video) {
max-width: 100%;
border: 0;
vertical-align: middle;
}
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) :is(strong,b) {
font-weight: 700;
}
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer) :is(em,i,cite,address) {
font-style: normal;
}
/* 포커스 링 - 상단 영역 안에서만 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer)
:is(a, button, [tabindex]):focus-visible {
outline: 3px solid var(--krds-primary);
outline-offset: 2px;
border-radius: var(--krds-radius-sm);
}
/* ------------------------------------------------------------
3-1. 구 CSS 의 "태그 선택자" 대응
jqgrid/base.css 6줄 :
pre, div, ul, ol, dl, p, td, th, input, textarea, select {
font-family: 'NotoSansKR','malgun gothic','sans-serif','dotum';
font-size: 13px;
}
우선순위 (0,0,1). 위 스코프 리셋은 :where() 라 (0,0,0) 이어서 진다.
그 결과 상단 글자가 13px / 다른 글꼴로 눌린다.
(나우캐스트만 base.css 를 탄다. 생활인구는 해당 없음)
여기서 같은 (0,0,1) 로 맞춰 동점을 만들고, 이 파일이 나중에 로드되므로 이긴다.
layout.css 의 .kb- 규칙(0,1,0)에는 여전히 지므로 상단 디자인은 그대로다.
※ 스코프를 :is() 로 올려서 해결하려 하지 말 것 - 상단 전체가 흔들린다.
※ 로드 순서가 전제다. 본문 중간의 include(예: ModalMainPopF.jsp)가
bootstrap.css 를 뒤늦게 끌고 오면 동점에서 진다.
newFootNowcast.jsp 에서 이 파일을 한 번 더 하면 순서와 무관해진다.
아래는 (a) 루트용 / (b) 자손용 두 덩어리다. 둘 다 있어야 한다.
------------------------------------------------------------ */
/* (a) 스코프 "루트 자신"
.kb-gov-banner 는 div, .kb-header 는 header, .kb-totop 은 button 이다.
아래 (b)는 자손만 잡으므로 루트가 base.css 의 div{font-family} 를 그대로
맞고, 자손들은 font-family:inherit 로 그 잘못된 글꼴을 물려받는다.
(생활인구 배너 글꼴이 안 바뀌던 원인)
뒤에 태그를 붙여 (0,0,1) 로 맞춘다. layout.css(0,1,0)에는 여전히 진다. */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer):is(div, header, footer, nav, section, aside, button, p) {
font-family: var(--krds-font);
font-size: var(--fs-body);
margin: 0;
padding: 0;
}
/* (b) 스코프 자손 */
:where(.krds-skip, .kb-gov-banner, .kb-header, .kb-dim,
.kb-sitemap, .kb-mosite, .kb-totop, .kb-relsite, .kb-footer)
:is(pre, div, ul, ol, dl, p, td, th, input, textarea, select, span, a, button, h1, h2, h3, h4, h5, h6, li, dd, dt, strong, em, i, label) {
font-family: inherit;
font-size: inherit;
margin: 0;
padding: 0;
}
/* ============================================================
4. 상단이 쓰는 krds.css 유틸리티
(구 화면이 쓰지 않는 클래스명이라 그대로 둔다)
============================================================ */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.krds-skip { position: relative; z-index: 9999; }
.krds-skip a {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 0;
overflow: hidden;
text-align: center;
font-size: var(--fs-detail);
font-weight: 700;
line-height: 40px;
color: #fff;
background: var(--krds-gray-90);
}
.krds-skip a:focus,
.krds-skip a:active { height: 40px; text-decoration: underline; }
.krds-container {
width: 100%;
max-width: calc(var(--layout-max) + var(--layout-pad) * 2);
margin-inline: auto;
padding-inline: var(--layout-pad);
}
/* 인쇄 */
@media print {
.krds-skip, .kb-header, .kb-footer, .kb-gnb, .kb-sitemap,
.kb-mosite, .kb-totop, .kb-relsite { display: none !important; }
}
/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
.kb-header *, .kb-sitemap *, .kb-mosite *, .kb-totop, .kb-dim {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}
/* ============================================================
5. 지표 화면 보정
============================================================ */
/* 시안(special_nowcast.css)과 동일 - 컨테이너를 전체 폭으로 */
.krds-container,
.kb-gov-banner_inner {
max-width: 100% !important;
padding-left: 55px !important;
padding-right: 55px !important;
}
/* 헤더가 sticky 라 구 화면의 높은 z-index 요소(로딩/팝업)에 가려질 수 있다.
상단은 팝업보다 아래, 본문보다 위가 되도록 정리한다. */
.kb-header { z-index: 500; }
.kb-sitemap { z-index: 900; }
.kb-mosite { z-index: 950; }
/* 구 화면 팝업(#notice_layer* , #popup_layer)은 z-index 10000 이라 그대로 위에 뜬다 */
/* ------------------------------------------------------------
5-1. 구 NewResponsive.css 의 "header" 태그 규칙 대응
NewResponsive.css 95줄 / 1120줄 :
@media (max-width:1280px) { header { height:3.75rem; ... } }
@media (max-width: 520px) { header { height:3.125rem; } }
우선순위 (0,0,1). 새 상단은