/* ============================================================ 타이포그래피 단일 소스 (Type System) 하동복합 LNG 직배관 사업 대시보드 · POSCO INTERNATIONAL ============================================================ ▶ 이 파일이 대시보드의 "글꼴·글자크기" 유일한 권한입니다. - style.css / dashboard.css 에는 font-size · font-family 를 두지 않습니다. - 본 파일은 에서 **마지막**에 로드되어 레거시 규칙을 덮습니다. (style.css 는 원본 광양 대시보드에서 계승한 파일이라 이 사업에 없는 탭들의 글자크기가 261곳에 흩어져 있었고, 그 중 일부가 실제 탭에도 새어 들어와 탭마다 글자가 달라 보이는 원인이었습니다.) ▶ 글꼴 — Pretendard (본문·숫자 공통) 1종. 원본 대시보드(대시보드 - Teams 연동)와 동일한 woff2 를 번들해 오프라인·사내망에서도 동일하게 렌더링됩니다. ▶ 크기 — 8단계로 고정. 이 토큰 밖의 px 값을 쓰지 마십시오. display 34 · h1 25 · h2 19 · h3 17 · body 15 · sm 14 · xs 13 · 2xs 12 (이전에는 11 / 11.5 / 11.8 / 12 / 12.3 / 12.5 / 12.8 / 13 / 13.3 / 13.5 / 14 / 14.5 / 15 / 15.5 px 이 뒤섞여 있었습니다.) ▶ 2026-07-30 전체 확대 — 8단계를 **동일 비율(약 1.13배)** 로 함께 올렸습니다. 한 단계만 키우면 단계 간 대비가 무너져 디자인이 깨지므로, 스케일 전체를 평행이동해 위계는 그대로 두고 가독성만 올립니다. 30→34 (1.133) 22→25 (1.136) 17→19 (1.118) 15→17 (1.133) 13.5→15 (1.111) 12.5→14 (1.120) 11.5→13 (1.130) 10.5→12 (1.143) 확대에 맞춰 사이드바 폭(226→252px)과 간트 라벨열 폭(268→304px)도 같은 비율로 넓혀 줄바꿈·잘림이 생기지 않게 했습니다. ============================================================ */ /* ── 글꼴 ─────────────────────────────────────────────── */ @font-face { font-family:'Pretendard'; font-weight:400; font-display:swap; src:url('../fonts/Pretendard-Regular.woff2') format('woff2'); } @font-face { font-family:'Pretendard'; font-weight:500; font-display:swap; src:url('../fonts/Pretendard-Medium.woff2') format('woff2'); } @font-face { font-family:'Pretendard'; font-weight:600; font-display:swap; src:url('../fonts/Pretendard-SemiBold.woff2') format('woff2'); } @font-face { font-family:'Pretendard'; font-weight:700; font-display:swap; src:url('../fonts/Pretendard-Bold.woff2') format('woff2'); } @font-face { font-family:'Pretendard'; font-weight:800; font-display:swap; src:url('../fonts/Pretendard-ExtraBold.woff2') format('woff2'); } :root { --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', 'Malgun Gothic', sans-serif; --font-round: var(--font-sans); /* 경로·코드 표기도 같은 글꼴로 통일합니다. 별도 고정폭 글꼴을 섞으면 Pretendard 가 못 뜨는 환경에서 그 부분만 다른 글꼴로 남아 통일이 깨집니다. 자릿수 정렬은 font-variant-numeric: tabular-nums 로 이미 확보됩니다. */ --font-mono: var(--font-sans); /* ── 크기 8단계 ── */ --fs-display: 34px; /* KPI 큰 숫자 · Hero 값 */ --fs-h1: 25px; /* 패널 페이지 타이틀 */ --fs-h2: 19px; /* 카드 제목 */ --fs-h3: 17px; /* 카드 내 소제목 · 강조 항목명 */ --fs-body: 15px; /* 본문 · 표 셀 */ --fs-sm: 14px; /* 보조정보 · 메타 · 라벨 */ --fs-xs: 13px; /* 캡션 · 배지 · 축 라벨 */ --fs-2xs: 12px; /* 간트 월 눈금 등 최소 단위 */ /* 하위호환 — 기존 코드가 참조하던 이름을 새 스케일로 연결 */ --fs-body-sm: var(--fs-sm); --fs-caption: var(--fs-xs); --fs-mono-sm: var(--fs-sm); /* ── 굵기 4단계 ── */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800; /* ── 행간 3단계 ── */ --lh-tight: 1.25; --lh-base: 1.5; --lh-loose: 1.65; } /* ── 전역 기준 ────────────────────────────────────────── */ html, body, button, input, select, textarea, table, th, td, /* code/kbd/pre 는 브라우저 기본 스타일이 monospace 라 명시하지 않으면 이 부분만 다른 글꼴로 튄다 (실측 회귀 테스트에서 잡힌 항목) */ code, kbd, samp, pre { font-family: var(--font-sans); } body { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-base); letter-spacing: 0; /* 숫자 폭 고정 — 표·KPI 의 자릿수가 흔들리지 않게 */ font-feature-settings: 'tnum' 1, 'ss01' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 원본에서 계승된 탭별 zoom(0.95~1.12) 은 "탭마다 글자 크기가 다르다"의 직접 원인이었습니다. 전 패널 동일 배율로 고정합니다. */ .panel { zoom: 1 !important; max-width: 1860px; } .ms-wrap > .panel-head { zoom: 1 !important; } /* ============================================================ 1. 셸 (타이틀바 · 사이드바 · 상태바) ============================================================ */ .titlebar .title { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: var(--lh-tight); } .titlebar .subtitle { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-tight); } .titlebar .subtitle b { font-weight: var(--fw-bold); } .titlebar .nav-toggle { font-size: var(--fs-h2); } .menu-group { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.02em; } .menu-group .mg-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.03em; } .menu-group .mg-caret { font-size: var(--fs-xs); font-weight: var(--fw-regular); } .menu-item { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-tight); } .menu-item.active { font-weight: var(--fw-bold); } .tab { font-size: var(--fs-body); font-weight: var(--fw-medium); } .tab.active { font-weight: var(--fw-semi); } .statusbar { font-size: var(--fs-sm); font-weight: var(--fw-medium); } /* ============================================================ 2. 페이지 · 섹션 제목 ============================================================ */ .panel-head__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: var(--lh-tight); } .panel-head__meta { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-tight); } .sec-bar__t { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: -0.005em; line-height: var(--lh-tight); } .sec-bar__m { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .card h3 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: var(--lh-tight); } .card-sub { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .sub-note { font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-loose); } .empty-note { font-size: var(--fs-body); line-height: var(--lh-loose); } .empty-note code { font-size: var(--fs-sm); font-family: var(--font-mono); } .info-banner { font-size: var(--fs-body); line-height: var(--lh-base); } .info-banner--warn { font-weight: var(--fw-medium); } .cost-basis { font-size: var(--fs-sm); } /* ============================================================ 3. KPI · Hero ============================================================ */ .kpi .v { font-size: var(--fs-display); font-weight: var(--fw-heavy); letter-spacing: -0.025em; line-height: 1.1; } .kpi .u { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .kpi .l { font-size: var(--fs-body); font-weight: var(--fw-semi); letter-spacing: 0; } .kpi .s { font-size: var(--fs-xs); font-weight: var(--fw-medium); } /* Hero 값은 h2 단계. h1(=패널 제목)과 같은 크기로 두면 1600px 폭에서 5개 항목이 한 줄에 못 들어가 줄바꿈된다. 본문(15px)보다 충분히 커서 위계는 유지된다. */ .ov-hero-l { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0; } .ov-hero-v { font-size: var(--fs-h2); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: var(--lh-tight); } .ov-hero-sub { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ov-hero-s { font-size: var(--fs-h2); font-weight: var(--fw-heavy); letter-spacing: -0.02em; } .ov-hero-tail { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-base); } .ov-hero-tail span { font-size: var(--fs-sm); font-weight: var(--fw-medium); } /* ============================================================ 4. 표 (공통 · kv · 비교표) ============================================================ */ table { font-size: var(--fs-body); font-variant-numeric: tabular-nums; } table th { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.01em; text-transform: none; } table td { font-size: var(--fs-body); line-height: var(--lh-base); } table.kv th { font-size: var(--fs-sm); font-weight: var(--fw-bold); } table.kv td { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-base); } table.cmp th, table.cmp td { font-size: var(--fs-body); line-height: var(--lh-base); } table.cmp thead th { font-size: var(--fs-h3); font-weight: var(--fw-bold); } table.cmp tbody th { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .cmp-badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); } tr.row-total td strong, tr.row-pick td strong { font-weight: var(--fw-bold); } .neg { font-weight: var(--fw-bold); } /* ============================================================ 5. 태그 · 배지 · 칩 ============================================================ */ .tag { font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.45; } .badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.01em; text-transform: none; } .cls-chip { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .cls-chip--sm { font-size: var(--fs-2xs); } .cat-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .rr { font-size: var(--fs-sm); line-height: 1.45; } .rr--main { font-weight: var(--fw-bold); } .rr--sub { font-weight: var(--fw-medium); } /* ============================================================ 6. 공정 (Gantt) ------------------------------------------------------------ 공정 탭은 원래 간트 안에서만 통하는 작은 글씨(10.5~12.5px)를 따로 쓰고 있어 다른 탭보다 확연히 작아 보였습니다. 이제 공정명·연월 같은 "읽는 글자"는 본문(--fs-body)·캡션(--fs-xs) 단계에 맞추고, 막대 안에 들어가는 기간 라벨과 CP 태그만 최소 단계(--fs-2xs)를 유지합니다. ============================================================ */ .gt-lab { font-size: var(--fs-body); font-weight: var(--fw-semi); } .gt-tname { font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: var(--lh-tight); } .gt-tsub { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.25; } .gt-cp { font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: 0.03em; } .gt-gdot { font-size: 0; } .gt-y { font-size: var(--fs-body); font-weight: var(--fw-bold); } .gt-m { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .gt-row--grp .gt-lab { font-size: var(--fs-body); font-weight: var(--fw-bold); } .gt-dur { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .gt-dur--in { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: -0.01em; } .gt-ms span { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .gt-lab--ms { font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: 0.01em; } .gt-flag-t { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .gt-flag--key .gt-flag-t { font-weight: var(--fw-heavy); } .gt-lg { font-size: var(--fs-sm); font-weight: var(--fw-semi); } /* ============================================================ 7. 노선 프로파일 · 인라인 막대 ============================================================ */ .rs-seg-l { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .rs-pin span{ font-size: var(--fs-xs); font-weight: var(--fw-bold); } .rs-tick { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .rs-lg { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .rs-lg-note { font-size: var(--fs-xs); font-weight: var(--fw-regular); } .mb-l { font-size: var(--fs-sm); font-weight: var(--fw-semi); } .mb-v { font-size: var(--fs-sm); font-weight: var(--fw-bold); } /* ============================================================ 8. 카드형 컴포넌트 ============================================================ */ /* 사업 마스터 레일 */ .rail-v { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.01em; } .rail-l { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .rail-s { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-tight); } /* Baseline 비교 */ .bl-k { font-size: var(--fs-h3); font-weight: var(--fw-heavy); } .bl-v { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .bl-g span{ font-size: var(--fs-xs); font-weight: var(--fw-semi); } .bl-g b { font-size: var(--fs-body); font-weight: var(--fw-bold); } .bl-n { font-size: var(--fs-xs); line-height: var(--lh-base); } /* 사업 단계 카드 */ .ph-name { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .ph-period { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ph-vendor { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .ph-scope { font-size: var(--fs-sm); line-height: var(--lh-base); } .pbar-txt { font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* 마일스톤 카드 · 타임라인 */ .ms-date { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ms-disc { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ms-title { font-size: var(--fs-body); font-weight: var(--fw-medium); } .tl-date { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .tl-disc { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .tl-title { font-size: var(--fs-body); font-weight: var(--fw-semi); } .tl-todo .tl-title { font-weight: var(--fw-medium); } /* 절차 플로우 · Critical Path 논리 */ .flow-n { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .flow-t { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .flow-o { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .flow-d li { font-size: var(--fs-sm); line-height: var(--lh-loose); } .flow-arr { font-size: var(--fs-h2); } .cp-n { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .cp-t { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .cp-d li { font-size: var(--fs-sm); line-height: var(--lh-loose); } /* 특수구간 */ .sp-n { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .sp-seg { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .sp-len { font-size: var(--fs-body); font-weight: var(--fw-bold); } .sp-note { font-size: var(--fs-sm); line-height: var(--lh-base); } .sp-dur { font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* 시공절차 · 과업범위 · 조직도 · 관리소 */ .proc-i { font-size: var(--fs-sm); font-weight: var(--fw-semi); } .proc-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .scope-i { font-size: var(--fs-sm); line-height: var(--lh-base); } .org-f { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .org-p { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .org-m { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .st-chain { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .st-pros-h { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .st-pro { font-size: var(--fs-sm); line-height: var(--lh-base); } /* 향후 검토사항 목록 */ .ov-act-sh { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ov-act-cnt { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ov-act-item { font-size: var(--fs-sm); line-height: var(--lh-base); } .ov-ms-empty { font-size: var(--fs-body); } /* ============================================================ 9. 리스크 (재구조화) ============================================================ */ .rk-seg { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .rk-t { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .rk-d { font-size: var(--fs-sm); line-height: var(--lh-loose); } .rk-a { font-size: var(--fs-sm); line-height: var(--lh-base); } .rk-no { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .rkm-h { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .rkm-lv { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .rkm-c { font-size: var(--fs-body); font-weight: var(--fw-bold); } .rkm-n { font-size: var(--fs-2xs); font-weight: var(--fw-semi); } .rkg-h { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .rkg-d { font-size: var(--fs-sm); font-weight: var(--fw-regular); } .rkg-cnt { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ov-act-item b { font-weight: var(--fw-bold); } .fx-caret { font-size: var(--fs-xs); } /* ============================================================ 10. 산출물 · 자료실 (파일 탐색기) ============================================================ */ .fx-toolbar { font-size: var(--fs-sm); } .fx-search { font-size: var(--fs-body); font-family: var(--font-sans); } .fx-count { font-size: var(--fs-sm); font-weight: var(--fw-semi); } .fx-grp-h { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .fx-grp-meta { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .fx-sub-h { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .fx-name { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-tight); } .fx-meta { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .fx-ext { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.03em; } .fx-empty { font-size: var(--fs-body); } .fx-note { font-size: var(--fs-sm); line-height: var(--lh-base); } .fx-kpi-v { font-size: var(--fs-h1); font-weight: var(--fw-heavy); letter-spacing: -0.02em; } .fx-kpi-l { font-size: var(--fs-sm); font-weight: var(--fw-semi); } /* 문서 카탈로그 (레거시 요약 목록) */ .doc-group-h { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .doc-name { font-size: var(--fs-body); font-weight: var(--fw-semi); } .doc-meta { font-size: var(--fs-xs); font-weight: var(--fw-regular); } .doc-ic { font-size: var(--fs-h3); } /* 공유 폴더 링크 카드 */ .lc-label { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .lc-desc { font-size: var(--fs-sm); font-weight: var(--fw-regular); } .lc-path { font-size: var(--fs-xs); font-family: var(--font-mono); } .lc-warn { font-size: var(--fs-xs); font-weight: var(--fw-medium); } /* 아이콘도 스케일 안에서 고른다 — 22px 단일 예외가 남아 있었다 */ .link-card .lc-ic { font-size: var(--fs-h1); } /* ============================================================ 12. 인허가 추진현황 (매트릭스 화면) ------------------------------------------------------------ 원본 광양 대시보드의 「인허가 추진사항」 양식을 옮겨 온 화면입니다. 컴포넌트가 많아 크기가 흩어지기 쉬우므로, 다른 화면과 같은 역할에는 같은 단계를 씁니다 — 큰 수치=h1, 카드 소제목=h3, 본문=body, 라벨·메타=sm, 배지·캡션=xs. ============================================================ */ /* KPI 스트립 */ .pm-kpi-l { font-size: var(--fs-sm); font-weight: var(--fw-semi); } .pm-kpi b { font-size: var(--fs-h1); font-weight: var(--fw-heavy); } .pm-kpi-u { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .pm-pill { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .pm-lead { font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-base); } .pm-note { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-base); } /* 5단계 시퀀스 카드 */ .pm-step-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .pm-step-t { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .pm-step-s { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-tight); } .pm-step-v { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .pm-step-v b { font-size: var(--fs-h1); font-weight: var(--fw-heavy); } .pm-step-f { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .pm-step-sep { font-size: var(--fs-h3); font-weight: var(--fw-regular); } /* 게이지 · 선행절차 체인 */ .pm-g-l { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .pm-g-c { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .pm-g-p { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .pm-chain-hd b { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .pm-chain-l { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .pm-chain-t { font-size: var(--fs-xs); font-weight: var(--fw-medium); } /* 착공 前 핵심 카드 */ .pm-hero b { font-size: var(--fs-h2); font-weight: var(--fw-heavy); } .pm-hero { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .pm-list li { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-base); } .pm-list-d { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .pm-star { font-size: var(--fs-xs); } /* 도넛 안 퍼센트 (SVG text) */ .pm-donut-t { font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* 시설 × 단계 매트릭스 */ .pm-mx thead th { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .pm-mx-sn { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.03em; } .pm-mx-ss { font-size: var(--fs-xs); font-weight: var(--fw-regular); } .pm-mx-row b { font-size: var(--fs-body); font-weight: var(--fw-bold); } .pm-mx-rs { font-size: var(--fs-xs); font-weight: var(--fw-regular); } .pm-mx-frac { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .pm-node-n { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .pm-node-t { font-size: var(--fs-xs); font-weight: var(--fw-medium); } /* 기관 × 단계 매트릭스 · 기관 카드 */ .pm-ag thead th { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .pm-ag-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .pm-ag tbody th { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .pm-ag-c b { font-size: var(--fs-body); font-weight: var(--fw-bold); } .pm-ag-c i { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .pm-ag-0 { font-size: var(--fs-sm); } .pm-ag-sum { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .pm-agc-h b { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .pm-agc-h span { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .pm-agc-m { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .pm-agc-s { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .pm-agc-k { font-size: var(--fs-xs); font-weight: var(--fw-semi); } /* 등록부 표 보조 */ .pm-memo { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-base); } .pm-sbadge { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .pm-src { font-size: var(--fs-xs); font-weight: var(--fw-semi); } /* ============================================================ 13. Value Engineering (방산탑 → Flare 연계) ============================================================ */ .ve-vd-l { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-vd-v { font-size: var(--fs-h1); font-weight: var(--fw-heavy); } .ve-vd-t { font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-base); } .ve-rf-h { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .ve-rf-b { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-rf-t { font-size: var(--fs-body); line-height: var(--lh-base); } .ve-rf-v { font-size: var(--fs-h2); font-weight: var(--fw-heavy); } .ve-rf-i { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-rf-s { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-rf-m { font-size: var(--fs-sm); line-height: var(--lh-base); } .ve-rf-im, .ve-rf-ac { font-size: var(--fs-sm); line-height: var(--lh-base); } .ve-rf-hi { font-size: var(--fs-xs); line-height: var(--lh-base); } .ve-gain { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ve-q { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-rv { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-code { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ve-quote { font-size: var(--fs-sm); line-height: var(--lh-base); } .ve-ul li { font-size: var(--fs-sm); line-height: var(--lh-base); } .ve-cn { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-ev { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ve-seg-h b { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .ve-seg-len { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-seg-g span { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-seg-g b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-seg-p { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-seg-f { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ve-gate-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-gate-t { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .ve-gate-o, .ve-gate-s { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ve-gate-c { font-size: var(--fs-sm); line-height: var(--lh-base); } .ve-gate-e { font-size: var(--fs-xs); line-height: var(--lh-base); } /* 개편 — 판정 밴드 · 요약 행 · 접기 묶음 */ .ve-cond-k { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-cond-t { font-size: var(--fs-sm); line-height: var(--lh-base); } .ve-rf-cv { font-size: var(--fs-h2); font-weight: var(--fw-heavy); } .ve-rf-ci { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-rf-cs { font-size: var(--fs-xs); line-height: var(--lh-base); } .ve-crit-i b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-crit-i i { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-rl-h b { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .ve-gt-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-gt-h b { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .ve-gt-x { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ve-gt-c { font-size: var(--fs-xs); line-height: var(--lh-base); } .fx-meta { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-mail-d { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-mail-p { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-mail-s { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-mail-b { font-size: var(--fs-sm); line-height: var(--lh-base); } .ve-src-t { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-src-h b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-src-m { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-src-d { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-src-u { font-size: var(--fs-xs); line-height: var(--lh-base); } .ve-src-more-h { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-srcf-n { font-size: var(--fs-sm); font-weight: var(--fw-medium); } .ve-srcf-m { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-rec li { font-size: var(--fs-sm); line-height: var(--lh-loose); } /* 계산 상세 — 식·대입식은 본문(body) 단계로 두어 손으로 따라 읽을 수 있게 한다. 더 작게 두면 첨자·괄호가 뭉개져 검증용으로 못 쓴다. */ .ve-st-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-st-t { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .ve-st-f { font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-base); } .ve-st-in th { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-st-in td { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-base); } .ve-st-sub { font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-base); } .ve-st-r { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-base); } .ve-fb-f { font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: var(--lh-base); } .ve-fb-src { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .ve-fb-rev-h { font-size: var(--fs-sm); font-weight: var(--fw-bold); } /* ============================================================ 14. 개편 컴포넌트 (refine.css) ------------------------------------------------------------ 스펙 그리드 · 지표 밴드 · 구성 막대 · 순위 막대 · 칩 · 콜아웃 · 시추주상도 — 전부 기존 8단계 안에서만 고른다. 라벨/캡션 = xs · 본문 = sm~body · 수치 강조 = h3~h2 ============================================================ */ /* 스펙 그리드 */ .sg-l { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .sg-v { font-size: var(--fs-body); font-weight: var(--fw-semi); line-height: var(--lh-tight); } .sg-i--key .sg-v { font-weight: var(--fw-bold); } /* 지표 밴드 */ .sb-l { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .sb-v { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: var(--lh-tight); } .sb-u { font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* 구성 막대 */ .stk-l { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .stk-lg-i { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .stk-lg-v { font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* 순위 막대 */ .rb-l { font-size: var(--fs-sm); font-weight: var(--fw-semi); } .rb-l i { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .rb-v { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .rb-v i { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .rb-foot { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-base); } /* 계획 대비 실적 막대 (개선패키지) */ .pl-lg { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .pl-lg-act b { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .pl-l { font-size: var(--fs-sm); font-weight: var(--fw-semi); } .pl-l i { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .pl-v { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: var(--lh-tight); } .pl-v em { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .pl-gap { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .pl-foot { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-base); } /* 카드 세트 (개선패키지) */ .cs-t { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .cs-e { font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-base); } .cs-m { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .cs-n { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-base); } /* 표 안 막대 셀 */ .bc-v { font-size: var(--fs-sm); font-weight: var(--fw-bold); } /* 접어 둔 상세 */ .fx-more > summary { font-size: var(--fs-sm); font-weight: var(--fw-semi); } /* 칩 · 번호 목록 */ .cl-i { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-base); } .cl-i b { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .nl-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .nl-t { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-base); } /* 콜아웃 */ .co { font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-base); } .co-k { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .co b { font-weight: var(--fw-bold); } /* 시추주상도 */ .blg-id { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .blg-loc { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .blg-tick { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .blg-lay span { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .blg-m { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .blg-m b { font-weight: var(--fw-bold); } /* 특수구간 카드 */ .sp2-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .sp2-t { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .sp2-len { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .sp2-note { font-size: var(--fs-sm); line-height: var(--lh-base); } .sp2-dur { font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* ============================================================ 15. 통합 개편 컴포넌트 ('26.08) ------------------------------------------------------------ 패널 안 가로 탭 · 도해 · 종합현황 한 화면 · 노선안 비교. 여기서도 8단계 밖의 px 는 쓰지 않는다. 라벨/캡션 = 2xs~xs · 본문 = sm~body · 수치 강조 = h3~display ============================================================ */ /* 패널 안 가로 탭 */ .stx-t { font-size: var(--fs-sm); font-weight: var(--fw-semi); } .stx-t.active { font-weight: var(--fw-bold); } .stx-m { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .stx-note { font-size: var(--fs-xs); font-weight: var(--fw-medium); } /* 도해 */ .fig-c b { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .fig-c span { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-base); } .fig-s { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } /* 종합현황 — 상태 스트립 */ .ovs-l { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ovs-v { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .ovs-big { font-size: var(--fs-display); font-weight: var(--fw-heavy); } .ovs-u { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .ovs-s { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ovs-d { font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* 종합현황 — 마일스톤 목록 */ .ovm-d { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ovm-disc { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ovm-t { font-size: var(--fs-sm); font-weight: var(--fw-semi); } /* 종합현황 — 인허가 · 리스크 3칸 */ .ovg-l { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ovg-v { font-size: var(--fs-h1); font-weight: var(--fw-heavy); } .ovg-v i { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ovg-s { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } /* 종합현황 — 게이지 요약 3칸 · 단계별 계획대비 (압축판) */ .ovgz-k span { font-size: var(--fs-2xs); font-weight: var(--fw-semi); } .ovgz-k b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ovpl-l { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ovpl-v { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ovpl-v em { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .ovpl-g { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } /* 종합현황 — 상태 비율 한 줄 */ .ovrt-h > span:first-child { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ovrt-lg { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .ovrt-lg b { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ovrt-b > span { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } /* 종합현황 — 공정 갭 */ .ovgap-l b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ovgap-l span { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .ovgap-v { font-size: var(--fs-display); font-weight: var(--fw-heavy); } .ovgap-u { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .ovgb-l { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ovgb-v { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ovgb-f { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } /* 종합현황 — 특이사항 (등급 3분할) */ .ovf-c { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .ovf-a { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ovf-t { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .ovf-e { font-size: var(--fs-2xs); font-weight: var(--fw-regular); } .ovf-f { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } /* 개요 — 추진 단계 행 · 배관경 대비 카드 */ .phl-n { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .phl-p { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .phl-v { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .phl-s { font-size: var(--fs-xs); font-weight: var(--fw-regular); } .pcm-h b { font-size: var(--fs-h3); font-weight: var(--fw-bold); } /* 공급관리소 — TYPE 대조 */ .stc { font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-base); } .stc--win { font-weight: var(--fw-semi); } /* VE 게이트 3열 */ .ve-gc .ve-gt-n { font-size: var(--fs-xs); font-weight: var(--fw-bold); } .ve-gc .ve-gt-h b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-gc .ve-gate-o { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .ve-gc .ve-gt-c { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-base); } .ve-gc .ve-gt-x { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } /* VE 3열 — 규정 판단 · Tie-in · 미수령 자료 */ .ve-fn-h b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-fn-v { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .ve-fn-n { font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: var(--lh-base); } .ve-gap-n { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ve-gap-i b { font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: var(--lh-tight); } .ve-gap-s { font-size: var(--fs-xs); font-weight: var(--fw-medium); } /* 종합현황 — 노선 카드 */ .ovr-k span { font-size: var(--fs-2xs); font-weight: var(--fw-semi); } .ovr-k b { font-size: var(--fs-h3); font-weight: var(--fw-heavy); } .ovr-k i { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } /* 노선안 비교 */ .ropt-h b { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .ropt-t { font-size: var(--fs-h3); font-weight: var(--fw-heavy); } .ropt-bar i { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ropt-n span { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-base); } .ropt-n b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } /* ── 구획 바로가기 (.jn) ─────────────────────────────────── */ .jn-l { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .jn-t { font-size: var(--fs-sm); font-weight: var(--fw-semi); } .jn-i.here .jn-t { font-weight: var(--fw-bold); } .jn-m { font-size: var(--fs-xs); font-weight: var(--fw-medium); } .jn-note { font-size: var(--fs-xs); font-weight: var(--fw-medium); } /* ============================================================ 10-B. 종합현황 — 밀도는 글자가 아니라 여백으로 ('26.09.02) ------------------------------------------------------------ 한때 이 탭만 스케일을 한 칸 내려 두었으나, 탭을 옮겨 다닐 때 글자 크기가 달라 보여 되돌렸다. **글꼴·크기는 전 탭이 같은 8단계를 쓴다.** 종합현황을 한 화면에 담는 일은 글자를 줄이는 대신 행 간격·여백을 좁혀서 푼다 (refine.css 의 「22. 종합현황」 절). ============================================================ */ /* 종합현황 — 특이사항 (등급 3분할, 재설계) */ .ovf-n { font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: var(--lh-base); } .ovf-k { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ovf-mo { font-size: var(--fs-2xs); font-weight: var(--fw-semi); } /* 개요·기준 — 새 도표 4종 (타임라인 · 압력 프로파일 · 여유 막대 · 충족도 미터) */ .ptl-n b { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); } .ptl-n i { font-size: var(--fs-2xs); font-weight: var(--fw-medium); line-height: var(--lh-tight); } .ptl-bl { font-size: var(--fs-2xs); font-weight: var(--fw-semi); } .ptl-yl { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .ptl-nowl { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ptl-pin b { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .ptl-p { font-size: var(--fs-2xs); font-weight: var(--fw-semi); } .prp-h b { font-size: var(--fs-h3); font-weight: var(--fw-bold); } .prp-m { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .prp-av { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .prp-k { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .prp-f { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .mgb-l { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .mgb-l i { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .mgb-v { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .mgb-g { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .mgb-f { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } .lmt-h b { font-size: var(--fs-sm); font-weight: var(--fw-bold); } .lmt-r { font-size: var(--fs-h3); font-weight: var(--fw-heavy); } .lmt-k { font-size: var(--fs-xs); font-weight: var(--fw-semi); } .lmt-n { font-size: var(--fs-2xs); font-weight: var(--fw-medium); } /* ============================================================ 11. 모바일 — 스케일은 유지하고 최소 크기만 보정 ============================================================ */ @media (max-width: 900px) { :root { --fs-display: 30px; --fs-h1: 22px; --fs-h2: 18px; --fs-h3: 16px; } table, table td { font-size: var(--fs-sm) !important; } }