/* ============================================================
STIS 서브페이지 셸 (sub.css)
브레드크럼 · 2차 탭 · 스크롤 히어로(일반페이지 전용) · 본문 프레임 · 오시는 길
main.css와 같은 층위 — 서브페이지는 main.css 대신 이 파일을 로드
============================================================ */
/* ---------- 상단: 브레드크럼 + 2차 탭 ---------- */
.sub-top {
position: relative;
z-index: 2; /* 히어로 카드(1) 위, 헤더(110) 아래 — 카드가 뒤로 올라오며 글자만 반전 */
padding-top: 72px; /* 헤더 → 브레드크럼 (레퍼런스 여백 비율) */
}
/* 카드가 뒤를 지나는 동안의 반전 — JS가 요소 중심선 기준으로 .is-on-image 토글 */
.breadcrumb, .sub-title, .page-tools__btn { transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; }
/* 등장 모션이 끝난 뒤에는 색 전환만 남긴다 (등장 규칙의 transition이 색 전환을 덮지 않도록) */
html.js .breadcrumb[data-reveal].is-revealed { transition: color 0.25s ease; }
.breadcrumb.is-on-image, .breadcrumb.is-on-image a, .breadcrumb .breadcrumb__toggle:is(.breadcrumb.is-on-image *) { color: #fff; }
.breadcrumb.is-on-image a.breadcrumb__home { color: #fff; }
.breadcrumb.is-on-image .breadcrumb__sep { color: rgba(255, 255, 255, 0.7); }
.breadcrumb.is-on-image .breadcrumb__caret { background: #fff; color: var(--brand-blue); }
.sub-title-row.is-on-image .sub-title { color: #fff; }
.sub-title-row.is-on-image .page-tools__btn { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.sub-title-row.is-on-image .page-tools__btn:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
/* ---------- 페이지 도구 (공유 · URL 복사 · 인쇄) ----------
얇은 라인 원형 44px, 검정 선 아이콘. 공유는 아래로 SNS 목록이 떨어짐 */
.page-tools { display: flex; align-items: center; gap: var(--spacing-8); padding-bottom: 6px; }
.page-tools__share { position: relative; }
.page-tools__btn {
display: inline-grid; place-items: center;
width: 48px; height: 48px; border-radius: 50%;
border: 1px solid var(--border-input);
background: transparent; color: var(--text-1);
}
.page-tools__btn svg { width: 24px; height: 24px; }
.page-tools__btn:hover { border-color: var(--text-1); background: var(--surface-tint); }
.page-tools__btn[aria-expanded="true"] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; } /* 열림 = 블루 필 */
.page-tools__menu {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 6;
display: flex; flex-direction: column; gap: var(--spacing-8);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.page-tools__share.is-open .page-tools__menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* SNS 마크 — 카카오톡(카카오 브랜드 심볼) · 네이버(Simple Icons, CC0). 크기 · 테두리 · 그림자는 둘이 같다 */
.page-tools__sns {
display: grid; place-items: center;
width: 48px; height: 48px; border-radius: 50%;
background: var(--surface-canvas);
border: 1px solid var(--border-hairline);
box-shadow: var(--shadow-overlay);
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.page-tools__sns:hover { border-color: var(--text-1); background: var(--surface-tint); } /* 도구 버튼과 같은 호버 — 이동 없음 */
.page-tools__sns svg { width: 20px; height: 20px; }
.page-tools__sns--blog { color: #03c75a; }
/* 카카오톡 — 브랜드 가이드대로 노란 원(#FEE500) 위 검정 말풍선. 호버 때도 노란 면은 그대로 두고 테두리만 진하게 */
.page-tools__sns--kakao { background: #fee500; color: #000; padding: 0; cursor: pointer; }
.page-tools__sns--kakao:hover { background: #fee500; }
/* 토스트 — URL 복사 알림 */
.toast {
position: fixed; left: 50%; bottom: 40px; z-index: 130;
transform: translate(-50%, 12px);
padding: 12px 22px; border-radius: var(--radius-pill);
background: var(--surface-dark); color: #fff;
font-size: var(--text-label); line-height: var(--leading-label);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s var(--ease-out-soft), visibility 0.22s;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.breadcrumb ol {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-12);
font-size: var(--text-label);
line-height: var(--leading-label);
color: var(--text-3);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--spacing-12); }
/* 구분 꺾쇠 — Phosphor caret-right */
.breadcrumb__sep { color: var(--text-4); }
.breadcrumb__sep svg { width: 13px; height: 13px; display: block; }
.breadcrumb a { color: var(--text-1); font-weight: var(--weight-medium); transition: color var(--transition-fast); } /* 상위 항목 — 500 블랙 */
.breadcrumb a:hover { color: var(--brand-blue); }
.breadcrumb a.breadcrumb__home { display: inline-flex; color: #b8b8b4; } /* Phosphor house(fill) — 그레이 면, 문 자리는 배경이 비쳐 흰 포인트 */
.breadcrumb__home svg { width: 21px; height: 21px; display: block; }
.breadcrumb a.breadcrumb__home:hover { color: var(--text-3); }
.breadcrumb li[aria-current="page"] { color: var(--text-1); font-weight: var(--weight-medium); }
/* 현재 항목 — 클릭하면 형제 2차메뉴가 아래로 떨어지는 드롭다운 (GNB 풀다운과 같은 카드 문법) */
.breadcrumb__current { position: relative; }
.breadcrumb__toggle {
display: inline-flex; align-items: center; gap: var(--spacing-8);
font-size: var(--text-label); line-height: var(--leading-label);
font-weight: var(--weight-medium);
}
.breadcrumb .breadcrumb__toggle { color: var(--brand-blue); }
.breadcrumb__here { color: var(--brand-blue); font-weight: var(--weight-medium); } /* 형제 없는 현재 항목(발간물·혁신인프라맵) — 펼침 없이 글자만 */ /* 현재 항목 — 블루 (aria-current 공통 규칙보다 우선) */
.breadcrumb__caret {
display: inline-grid; place-items: center;
width: 18px; height: 18px; border-radius: 50%;
background: var(--brand-blue); color: #fff;
transition: transform 0.25s var(--ease-out-soft), background var(--transition-fast);
}
.breadcrumb__caret svg { width: 11px; height: 11px; display: block; }
.breadcrumb__toggle:hover .breadcrumb__caret { background: var(--brand-blue-hover); }
.breadcrumb__toggle[aria-expanded="true"] .breadcrumb__caret { transform: rotate(180deg); }
.breadcrumb__menu {
position: absolute; top: calc(100% + 10px); left: 0; z-index: 5;
min-width: max-content;
padding: var(--spacing-12);
background: var(--surface-canvas);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-md);
box-shadow: var(--shadow-overlay);
display: flex; flex-direction: column; gap: 2px;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.breadcrumb__current.is-open .breadcrumb__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.breadcrumb__menu a {
display: block; padding: 8px 18px; border-radius: var(--radius-sm);
font-size: var(--text-label); line-height: var(--leading-label);
font-weight: var(--weight-regular); color: var(--text-3);
transition: color var(--transition-fast), background var(--transition-fast);
}
.breadcrumb__menu a:hover { color: var(--brand-blue); background: var(--brand-blue-tint); font-weight: var(--weight-medium); } /* GNB 풀다운과 동일 */
.breadcrumb__menu a[aria-current="page"] { color: var(--brand-blue); } /* 현재 페이지 — 굵기 변화 없이 블루로만 */
/* 페이지 제목 행 — 좌 대형 메뉴명 / 우 페이지 도구 */
.sub-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-24); margin-top: var(--spacing-40); }
.sub-title {
font-size: 56px; /* 토큰 heading(52)에서 +4 — 1440 폭에서 카드 제목(20)과의 대비를 살린다 */
line-height: 60px;
letter-spacing: var(--tracking-display);
font-weight: var(--weight-bold);
color: var(--text-1);
}
/* 2차 탭 — 개별 알약 버튼. 흐린 그레이 면, 호버 옅은 블루 면, 활성 블루 필. 항목 수(2~5)에 따라 자연스럽게 늘어난다.
히어로가 있으면 히어로 아래(본문 첫 요소), 없으면 브레드크럼 아래 */
.sub-tabs-wrap { margin-bottom: var(--spacing-120); } /* 탭 아래 → 본문 첫 섹션까지 120 */
.sub-tabs__toggle { display: none; } /* 모바일 전용 토글 */
.sub-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--spacing-12);
}
.sub-tabs a {
display: inline-flex; align-items: center;
height: 56px;
padding: 0 var(--spacing-32);
border-radius: var(--radius-pill);
border: 0;
background: var(--surface-tint); /* 선 없이 흐린 그레이 면 */
font-size: var(--text-nav);
line-height: 1;
font-weight: var(--weight-medium);
color: var(--text-3); /* 비활성은 보조 톤 — 호버·활성에서만 진하게 */
white-space: nowrap;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.sub-tabs a:hover { background: var(--brand-blue-tint); color: var(--brand-blue); } /* 호버 = 옅은 블루 면 + 블루 글자 (GNB 풀다운과 동일) */
.sub-tabs a[aria-current="page"] { background: var(--brand-blue); color: #fff; font-weight: var(--weight-bold); }
/* 게시판 대메뉴 5개(사업공고 · 사업통계 · 동향정보 · 발간물 · 성과정보) 서브히어로 — backend/partials/sub-top.php (2026-09-22)
제목 오른쪽에 탭(오른쪽 정렬 · 세로 가운데), 공유 · 복사 · 인쇄 버튼 없음. 1180 이하 · 한 줄에 안 들어갈 때는 탭 묶음이 통째로 제목 아래 왼쪽으로.
탭 모양은 그대로, 크기만 제목 줄(60)에 맞춰 56 → 48 · 좌우 32 → 24 · 탭 사이 12 → 8.
제목 → 다음 내용 64 — 예전 "제목 → 탭" 과 같은 값(구역 사이 64 규칙). 상세(탭 없음)도 같은 64(예전 120) */
.sub-title-row--tabs { align-items: center; flex-wrap: wrap; column-gap: var(--spacing-40); row-gap: var(--spacing-32); }
.sub-title-row--tabs .sub-tabs-wrap { flex: 0 1 auto; min-width: 0; margin-bottom: 0; }
.sub-title-row--tabs .sub-tabs { justify-content: flex-start; gap: var(--spacing-8); }
.sub-title-row--tabs .sub-tabs a { height: 48px; padding: 0 var(--spacing-24); }
.sub-top--board ~ .sub-body--plain,
.sub-top--board ~ .sub-body--post { padding-top: var(--spacing-64); }
/* 1180 이하(769~1180) — 탭 묶음을 늘 제목 아래 왼쪽으로. 화면마다 제목 · 탭 길이가 달라 저절로 접히는 폭이 제각각(사업통계 1131 · 사업공고 906 · 성과정보 종합현황 792 …)이라
같은 메뉴 안에서 탭 자리가 바뀌지 않게 한 기준으로 모았다. 1180 = 가장 긴 사업통계가 한 줄에 들어가는 최소 폭 위의 기존 구간 경계.
1181 이상에서도 한 줄에 못 들어가면(발간물 분류가 늘 때 등) 그대로 저절로 내려간다 */
@media (max-width: 1180px) and (min-width: 769px) {
.sub-title-row--tabs .sub-tabs-wrap { flex-basis: 100%; }
}
/* ---------- 스크롤 히어로 (일반페이지 전용) ----------
기본: 제목 아래 120px, 컨테이너 폭(1440) 라운드 카드 480px.
제목·브레드크럼이 핀된 동안 카드가 그 뒤로 올라오며 폭이 풀블리드(최대 1920)로 자라고 라운드가 풀림(p1).
카드 하단이 출발 자리에 닿으면 핀이 풀려 함께 스크롤. sub.js가 --hero-p1을 갱신. */
.sub-hero__anchor { height: var(--spacing-64); } /* 제목과 카드 사이 — 769~1180 은 64(1181 이상 96 · 768 이하 48, 하위 화면 공통 규칙) · 문서 위치 측정 기준 */
.sub-hero {
--hero-h0: 480px;
--hero-p1: 0;
--hero-w0: min(1440px, calc(100% - var(--container-pad) * 2));
--hero-w1: min(100%, 1920px);
position: relative;
z-index: 1;
width: calc(var(--hero-w0) + (var(--hero-w1) - var(--hero-w0)) * var(--hero-p1));
height: var(--hero-h0);
margin-inline: auto;
border-radius: calc(var(--radius-card-lg) * (1 - var(--hero-p1)));
overflow: hidden;
background: var(--brand-navy-deep);
}
.sub-hero img,
.sub-hero video {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* 상단 비네트 — 카드가 올라갈수록 진해져 헤더 메뉴 화이트 대비 확보 */
.sub-hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(4, 8, 16, 0.6) 0, rgba(4, 8, 16, 0.45) 160px, rgba(4, 8, 16, 0) 360px);
opacity: var(--hero-p1);
pointer-events: none;
}
/* ---------- 헤더 반전 (이미지 위) ----------
히어로 페이지 헤더는 배경 투명. 카드가 헤더 절반을 덮으면 텍스트·로고만 화이트(0.35s). 햄버거(주황)와 로고 노드는 그대로. */
.site-header { transition: background-color 0.35s ease; }
.site-header__gnb { transition: color 0.35s ease, gap 0.36s var(--ease-out-soft); } /* gap도 함께 — 이 줄이 components.css의 gap 전환을 덮어써서 풀다운이 뚝 벌어졌다 */
.site-header.is-hero-page { background-color: transparent; } /* 히어로 페이지는 배경 없음 — 카드가 헤더 뒤로 올라오는 게 그대로 보임 */
.site-header.is-hero-page.is-solid { background-color: var(--surface-canvas); } /* 카드가 다 올라간 뒤 흰 배경 복귀 */
.site-header.is-over-image .stis-logo { --stis-blue: #fff; } /* 심볼 화이트, 주황 마크는 그대로 */
.site-header.is-over-image .stis-wordmark__color { opacity: 0; }
.site-header.is-over-image .stis-wordmark__white { opacity: 1; }
.site-header.is-over-image .site-header__gnb { color: #fff; }
.site-header.is-over-image .gnb__item:hover > a { color: var(--logo-en-reverse); }
/* ---------- 본문 프레임 ---------- */
.sub-body { padding-block: var(--spacing-120) var(--spacing-120); } /* 히어로 아래 120 — 기본 상태에서 탭이 첫 화면 밖에 걸림 */
.sub-section + .sub-section { margin-top: var(--spacing-96); }
.sub-section__head { margin-bottom: var(--spacing-32); }
.sub-section__title {
font-size: var(--text-heading-sm);
line-height: var(--leading-heading-sm);
letter-spacing: var(--tracking-display);
font-weight: var(--weight-bold);
color: var(--text-1);
}
/* 제목 위 영문 레이블 — 포인트 블루 500. 한글 제목과 한 덩어리로 읽히게 간격은 12 */
.sub-section__en {
margin-bottom: var(--spacing-12);
font-family: var(--font-accent);
font-size: var(--text-label); line-height: var(--leading-label);
font-weight: var(--weight-medium); letter-spacing: -0.01em;
color: var(--brand-blue);
}
.sub-section__title--sm {
font-size: var(--text-subheading);
line-height: var(--leading-subheading);
letter-spacing: var(--tracking-title);
}
.sub-section__desc { margin-top: var(--spacing-12); color: var(--text-3); }
/* 그레이 밴드 — 이 구간만 면을 깔아 앞뒤와 끊는다. 안에 놓이는 카드는 흰색이어야 보인다 */
/* 그레이 밴드 — 화면 끝까지 깐다. 컨테이너 밖으로 밀어냈다가 같은 값만큼 안쪽 여백으로 되돌려
글은 다른 섹션과 같은 세로선에 선다. html의 overflow-x: clip이 가로 스크롤을 막아준다 */
.sub-section--band {
margin-inline: calc(50% - 50vw);
padding: var(--spacing-96) calc(50vw - 50%);
background: var(--surface-tint);
}
/* ---------- 오시는 길 ---------- */
/* 지도 — 구글맵 임베드(임시) → 카카오맵 전환 예정. 라운드 카드 안에 꽉 채움 */
.map-box {
position: relative;
height: 520px;
border-radius: var(--radius-card-lg);
overflow: hidden;
background: var(--surface-tint);
}
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 연락처 4열 — 상단 헤어라인, 열 사이 세로선. 영문 레이블 + 주황 라인 아이콘, 값은 아래 (레퍼런스 준용) */
.contact-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border-divider);
}
.contact-grid__cell { padding: var(--spacing-40) var(--spacing-40) var(--spacing-48); }
.contact-grid__cell + .contact-grid__cell { border-left: 1px solid var(--border-hairline); }
.contact-grid dt {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16);
font-family: var(--font-accent); font-weight: var(--weight-medium); font-size: 22px; line-height: 30px;
color: var(--text-1);
}
.contact-grid dt svg { width: 29px; height: 29px; flex: none; color: var(--brand-orange); } /* 같은 세트라 보정 없이 한 크기 (26 → 29, +12%) */
.contact-grid dd { margin-top: var(--spacing-64); color: var(--text-2); }
.contact-grid .num { font-variant-numeric: tabular-nums; } /* 값은 전부 본문 17px Regular로 통일 — 숫자도 Pretendard */
/* 대중교통 — 좌 아이콘+수단 / 우 상세. 행마다 헤어라인 */
.transit {
--transit-pad: 28px; /* 모든 선(긴 선·짧은 선)의 위아래 공통 여백 */
--transit-icon: 90px; /* 아이콘 원 지름 — 행 최소 높이의 기준 */
border-top: 1px solid var(--border-hairline);
}
.transit__row {
display: grid;
grid-template-columns: 400px 1fr;
gap: var(--spacing-40);
align-items: center; /* 좌 아이콘 블록과 우 상세를 세로 중앙 정렬 */
/* 상하 여백은 정류장 블록이 담당(선 위아래 동일) · 행 최소 높이는 아이콘 원 + 공통 여백 */
min-height: calc(var(--transit-icon) + var(--transit-pad) * 2);
padding: 0 var(--spacing-24);
border-bottom: 1px solid var(--border-hairline);
}
.transit__head { display: flex; align-items: center; gap: var(--spacing-24); align-self: center; }
.transit__icon-wrap {
position: relative; flex: none;
width: var(--transit-icon); height: var(--transit-icon); border-radius: 50%;
background: var(--surface-tint); /* 흐린 그레이 원 — 아이콘이 위쪽에 걸쳐 앉음 */
}
.transit__icon {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 원 중앙 정렬 */
width: 48px; height: 48px; color: var(--text-1);
}
.transit__icon-point { fill: var(--brand-orange); } /* 주황 포인트는 아이콘당 1곳(왼쪽 램프) — 원본 서브패스 그대로. 교통 아이콘은 크게 쓰여 Light 웨이트 사용 */
.transit__label { font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-body); font-weight: var(--weight-bold); color: var(--text-1); }
.transit__body { display: flex; flex-direction: column; }
/* 상세는 전부 Pretendard 17px — 서체 혼용 없이 굵기로만 위계 (정류장·역명 700, 나머지 400) */
/* 정류장·역 블록 — 좌 이름(240) / 우 상세, 한 줄에 나란히 */
.transit__stop { display: grid; grid-template-columns: 240px 1fr; column-gap: var(--spacing-40); align-items: center; padding-block: var(--transit-pad); } /* 이름·뱃지·설명 세로 중앙, 모든 선 위아래 동일 */
.transit__stop + .transit__stop { border-top: 1px solid var(--border-hairline); } /* 정류장 사이 헤어라인 */
.transit__station { display: flex; align-items: center; gap: var(--spacing-10, 10px); font-weight: var(--weight-bold); color: var(--text-1); line-height: 24px; }
.transit__desc { color: var(--text-2); line-height: 24px; }
.transit__routes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8) var(--spacing-24); }
.transit__routes li { display: flex; align-items: center; gap: var(--spacing-10, 10px); color: var(--text-2); font-variant-numeric: tabular-nums; line-height: 24px; } /* 뱃지 높이(24)와 같은 행간 — 글자·뱃지 중심선 일치 */
/* 노선 뱃지 — 서울 지하철 7호선(올리브) / 서울 버스 지선(초록)·마을(연두) 공식 색. 글자는 Pretendard */
.line-badge {
display: inline-grid; place-items: center;
width: 24px; height: 24px; border-radius: 50%;
font-size: var(--text-system); line-height: 1; font-weight: var(--weight-bold);
color: #fff;
}
.line-badge--7 { background: #747f00; }
.bus-badge {
display: inline-flex; align-items: center;
height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
font-size: var(--text-system); line-height: 1; font-weight: var(--weight-medium);
color: #fff;
}
.bus-badge--branch { background: #3cb44a; }
.bus-badge--village { background: #6dbd2b; }
/* ---------- 일반 셸 (히어로 없음) ----------
브레드크럼·제목 → 2차 탭 → 바로 본문. 소개 외 대부분의 페이지가 이 구조 */
.sub-body--plain { padding-top: var(--spacing-64); } /* 제목 → 다음 내용 64(1181 이상은 아래에서 96) */
.sub-body--plain .sub-tabs-wrap { margin-bottom: var(--spacing-96); } /* 탭 → 본문 96 (히어로 페이지의 120보다 한 단계 촘촘히) */
/* 하위 화면 서브히어로 아래 여백 — "제목 줄(탭 포함) → 다음 내용" 한 규칙(2026-09-22).
1181 이상 96 · 769~1180 64 · 768 이하 48. 게시판 5개 메뉴 목록 · 상세 · 소개 4개(사진 히어로는 제목 → 사진) · 혁신인프라맵 모두 같다 */
@media (min-width: 1181px) {
.sub-body--plain,
.sub-top--board ~ .sub-body--plain,
.sub-top--board ~ .sub-body--post { padding-top: var(--spacing-96); }
.sub-hero__anchor { height: var(--spacing-96); }
}
/* ---------- 게시판 목록 (1벌) ---------- */
/* 목록 바 — 좌 건수 / 우 검색 */
/* 건수는 검색창 아래쪽 선에 맞춤. 아래 2px 라인을 두고 위아래 여백은 40으로 같게 */
.board-bar {
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-24);
padding-bottom: 60px;
margin-bottom: 60px;
border-bottom: 2px solid var(--text-1);
}
.board-bar__count { padding-bottom: 6px; }
.board-bar__count { font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-3); } /* "건의 게시물" 17 */
.board-bar__count em { font-style: normal; font-family: var(--font-accent); font-weight: var(--weight-bold); font-size: 18px; color: var(--text-1); font-variant-numeric: tabular-nums; } /* 숫자만 Space Grotesk 18 */
/* 검색 — 입력 알약과 원형 버튼을 떼어 놓는다 (레퍼런스 준용) */
.board-search { width: 640px; max-width: 100%; gap: var(--spacing-12); padding: 0; background: none; border: 0; border-radius: 0; } /* 분류 선택 148 + 입력 404 + 버튼 64 — 입력칸은 기존 428보다 살짝 짧게 */
.board-search input {
height: 64px; padding: 0 var(--spacing-32);
border: 1px solid var(--border-input); border-radius: var(--radius-pill);
background: var(--surface-canvas);
transition: border-color var(--transition-fast);
}
.board-search input:focus { border-color: var(--text-1); }
.board-search input::placeholder { color: var(--text-4); }
.board-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.board-search .search-bar__submit { width: 64px; height: 64px; background: var(--surface-dark); color: #fff; } /* 기본 블랙 */
.board-search .search-bar__submit:hover { background: var(--brand-blue); color: #fff; }
.board-search .search-bar__submit svg { width: 23px; height: 23px; }
/* 검색 분류 — 입력칸과 같은 높이의 알약을 앞에 따로 둔다. 항목은 게시판마다 HTML에서 정한다 (값은 hidden field로 전송) */
.board-scope { position: relative; flex: none; width: 148px; }
.board-scope__btn {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8);
width: 100%; height: 64px; padding: 0 var(--spacing-20) 0 var(--spacing-24);
border: 1px solid var(--border-input); border-radius: var(--radius-pill);
background: var(--surface-canvas);
font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--text-1);
white-space: nowrap; cursor: pointer;
transition: border-color var(--transition-fast);
}
.board-scope__btn:hover, .board-scope.is-open .board-scope__btn { border-color: var(--text-1); }
.board-scope__btn svg { width: 14px; height: 14px; flex: none; color: var(--text-3); transition: transform var(--transition-base); }
.board-scope.is-open .board-scope__btn svg { transform: rotate(180deg); }
.board-scope__list {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
min-width: 100%; margin: 0; padding: var(--spacing-8); list-style: none;
background: var(--surface-canvas);
border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
box-shadow: var(--shadow-overlay);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.board-scope.is-open .board-scope__list { opacity: 1; visibility: visible; transform: translateY(0); }
.board-scope__list li {
padding: 10px 16px; border-radius: var(--radius-sm);
font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-2);
white-space: nowrap; cursor: pointer; outline: none;
transition: color var(--transition-fast), background var(--transition-fast);
}
.board-scope__list li:hover, .board-scope__list li:focus-visible { background: var(--surface-tint); color: var(--text-1); }
.board-scope__list li[aria-selected="true"] { color: var(--text-1); font-weight: var(--weight-bold); }
/* 목록 — 상단 진한 선, 행마다 헤어라인. 열: 번호 · 분류 · 제목 · 출처 · 등록일 · 조회 */
.board-list { border-top: 1px solid var(--text-1); }
.board-list__head, .board-list__row {
display: grid;
grid-template-columns: 72px 112px 1fr 200px 112px 72px;
gap: var(--spacing-24);
align-items: center;
padding: 0 var(--spacing-20);
border-bottom: 1px solid var(--border-hairline);
}
.board-list__head {
min-height: 56px;
font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-3);
text-align: center;
border-bottom-color: var(--border-divider);
}
.board-list__head .board-list__title, .board-list__head .board-list__org { display: block; text-align: left; } /* 본문 정렬과 일치 */
.board-list__row { min-height: 68px; padding-block: var(--spacing-16); }
.board-list__no, .board-list__views, .board-list__date { text-align: center; }
.board-list__cat { display: flex; justify-content: center; }
.board-list__no { font-size: var(--text-label); color: var(--text-4); font-variant-numeric: tabular-nums; }
.board-list__title { display: flex; align-items: center; gap: var(--spacing-8); min-width: 0; color: var(--text-1); }
.board-list__text { min-width: 0; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--transition-fast); }
.board-list__title:hover .board-list__text { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } /* 메인 리스트와 동일 */
.board__new { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); } /* 새 글 — 주황 점 1개 */
.board__clip { flex: none; width: 18px; height: 18px; color: var(--text-4); } /* 첨부 — Phosphor paperclip */
.board-list__org { font-size: var(--text-label); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-list__date, .board-list__views { font-size: var(--text-label); line-height: var(--leading-label); color: var(--text-4); font-variant-numeric: tabular-nums; }
.board-list .badge { font-weight: var(--weight-medium); }
/* 기술동향 변형 — 번호 · 출처 · 제목 · 발행일 · PDF 보기 · 다운로드.
자료 자체는 목록에 노출하지 않고, 오른쪽 두 칸에서 바로 보거나 받는다.
표 머리는 목록 바의 2px 라인에 바로 이어 붙인다 — 선이 두 줄로 보이지 않게 */
.board-list--tech { border-top: 0; margin-top: -60px; }
.board-list--tech .board-list__head, .board-list--tech .board-list__row {
/* 열 너비 — No. 80 · 출처 240 · 제목 나머지 · 발행일 128 · 다운로드 96, 사이 간격 24, 양끝 24 */
grid-template-columns: 80px 240px minmax(0, 1fr) 128px 96px;
column-gap: var(--spacing-24);
padding-inline: var(--spacing-24);
}
.board-list--tech .board-list__head {
min-height: 72px;
font-size: 18px; font-weight: var(--weight-medium); color: var(--text-1); /* 머리글은 모두 18/500 블랙 */
border-bottom: 1px solid var(--text-1); /* 머리 아래는 진한 선 */
}
.board-list--tech .board-list__row { min-height: 80px; padding-block: var(--spacing-20); transition: background var(--transition-fast); } /* 높이 80 = 본문 한 줄 28 + 위아래 20씩 + 여유 */
.board-list--tech .board-list__row:hover { background: var(--surface-tint); } /* 행 전체가 옅은 그레이로 */
.board-list--tech .board-list__row:hover .board-act { background: #fff; } /* 그 위의 버튼은 흰 원으로 떠오른다 */
.board-list--tech .board-list__row:hover .board-act:hover { background: var(--brand-blue); color: #fff; }
.board-list--tech .board-list__text { font-size: 18px; line-height: 28px; font-weight: var(--weight-semibold); } /* 목록 제목 18/600 */
.board-list--tech .board-list__org { padding-right: var(--spacing-16); font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-2); text-align: center; } /* 제목 쪽만 여백을 더 준다. 출처·공고기관은 500 — 색은 본문색 그대로, 제목(600 · text-1)과 굵기·색 두 가지로 구분 (2026-09-15) */
.board-list--tech .board-list__no, .board-list--tech .board-list__date { font-family: var(--font-accent); font-size: var(--text-label); line-height: var(--leading-label); color: var(--text-3); } /* 번호·발행일 — 영문 서체 16, 같은 보조색 */
.board-list--tech .board-list__act { display: flex; justify-content: center; }
.board-act {
display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
background: var(--surface-tint); color: var(--text-2);
transition: background var(--transition-fast), color var(--transition-fast);
}
.board-act svg { width: 22px; height: 22px; }
.board-act:hover { background: var(--brand-blue); color: #fff; } /* 카드 버튼과 같은 블루 반전 */
.board-list--tech .board-list__head > * {
display: block; text-align: center;
font-family: var(--font-base); font-size: 18px; font-weight: var(--weight-medium); color: var(--text-1);
} /* 머리글은 칸마다 다른 본문 규칙을 덮어쓴다 — 전부 같은 18/500 블랙, 가운데 */
/* 썸네일 카드 그리드 — 정사각 썸네일 + 제목만. 호버: 이미지 살짝 확대 + 제목 블루 */
.thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-64) var(--spacing-48); } /* PC 4열 × 3행 = 12장/쪽 · 간격은 발간물 목록과 동일 */
.thumb-card__link { display: block; }
.thumb-card__img {
display: block; aspect-ratio: 1 / 1; overflow: hidden;
/* 그레이 면은 이미지가 없거나 비율이 어긋날 때만 비쳐 보인다 — 썸네일이 타일을 꽉 채운다.
되돌릴 때(그레이 여백을 다시 두는 경우): border: 20px solid var(--surface-tint) — 발간물 타일(28)보다 얇게 줘
썸네일이 그때보다 한 단계 크게 보이도록 한다 */
border-radius: var(--radius-card); background: var(--surface-tint);
}
.thumb-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out-soft); } /* 라운드 없이 정사각 */
.thumb-card__link:hover .thumb-card__img img { transform: scale(1.04); }
.thumb-card__title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
margin-top: var(--spacing-32); min-height: 60px; /* 타일 → 제목 간격·2줄 예약 높이 모두 발간물과 동일 */
font-size: 20px; line-height: 30px; letter-spacing: var(--tracking-body); font-weight: var(--weight-semibold); color: var(--text-1); /* 목록 제목 20/600 */
transition: color var(--transition-fast);
}
.thumb-card__link:hover .thumb-card__title { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } /* 목록 행과 같은 호버 — 색 + 밑줄 */
/* 등록일 — 서울시동향 카드 날짜(.link-card__date)와 같은 모양 : 영문 숫자 서체 16/24 · 400 · 보조색. 제목 → 날짜 24(모바일 16)도 같은 값.
제목이 두 줄 자리(60)를 늘 잡아 날짜 줄이 옆 카드와 같은 높이에 선다 */
.thumb-card__date { display: block; margin-top: var(--spacing-24); font-family: var(--font-accent); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; color: var(--text-3); }
/* ---------- 발간물 표지 카드 그리드 ----------
PC 4열 × 2행 = 8권/쪽 (1440 ÷ 4 = 324). 표지를 그대로 324로 키우면 과해서 정사각 그레이 타일(324) 위에
표지를 작게(높이 268 → 폭 190) 얹는다. 책 사이 48 — 썸네일 그리드(32)보다 넓게.
카드 = 타일(표지) + 분류 캡슐 + 제목(한 덩어리, → 상세) / 아래 e-book(검정) · 다운로드(라인) */
.pub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-64) var(--spacing-48); }
.pub-card__link { display: block; }
.pub-card__tile {
display: grid; place-items: center;
aspect-ratio: 1 / 1; padding: 28px;
border-radius: var(--radius-card); background: var(--surface-tint); overflow: hidden;
}
/* 표지 — 원본 비율 그대로(2026-09-30). 타일 높이에 맞춘 A4 틀(.pub-card__cover)은 "최대 크기" 로만 쓰고 틀 자체는 보이지 않게(흰 면 · 그림자 · 선 없음),
이미지가 그 안에서 가로 · 세로 모두 넘지 않게 줄어 가운데 선다. 그림자 · 헤어라인은 이미지에 붙여 세로가 짧은 표지도 실제 크기에 맞게.
min-width · min-height 0 — overflow 를 풀면 틀이 이미지 원래 크기(484 등)만큼 커지려 해서 막는다 */
.pub-card__cover { justify-content: center; height: 100%; width: auto; min-width: 0; min-height: 0; max-width: 100%; background: none; box-shadow: none; outline: 0; overflow: visible; transition: transform 0.5s var(--ease-out-soft); }
.pub-card__cover img { width: auto; height: auto; max-width: 100%; max-height: 100%; outline: 1px solid rgba(9, 9, 9, 0.1); outline-offset: -1px; box-shadow: 2px 3px 8px rgba(9, 9, 9, 0.12); transition: box-shadow 0.5s var(--ease-out-soft); }
/* 호버 — 표지가 살짝 커지며 그림자 한 단계, 제목 블루 (썸네일 카드와 같은 문법) */
.pub-card__link:hover .pub-card__cover { transform: scale(1.04); }
.pub-card__link:hover .pub-card__cover img { box-shadow: 4px 6px 12px rgba(9, 9, 9, 0.22); }
/* 표지 없음(2026-09-30) — 서울 R&D 카드의 이미지 없음(.biz-card__thumb--empty)과 같은 모양 : 같은 크기의 회색 칸 가운데 STIS 기호(칸 폭 48%).
48% 는 칸 바깥 폭 기준이라 안쪽 여백을 0 으로 둔다(border-box 라 칸 크기는 그대로). 표지가 아니라 그림자 · 테두리 · 호버 확대 없음 */
.pub-card__tile.pub-card__tile--empty { padding: 0; } /* 모바일 여백(16) 규칙보다 앞서게 두 클래스로 */
.pub-card__tile--empty img { display: block; width: 48%; height: auto; }
/* 분류 캡슐 — 제목 위, 기본은 그레이 필 16/500. 한 화면에 여덟 장이라 기본부터 파랗게 두면 시선이 분산된다. 호버에서만 블루로 반전.
타일 → 캡슐 32 = 제목 → 버튼 간격(24 + 제목 여유)과 눈으로 비슷하게 */
.pub-card__cat {
display: inline-flex; align-items: center;
margin-top: var(--spacing-32); padding: 8px 14px;
border-radius: var(--radius-pill); background: var(--surface-tint);
font-size: var(--text-label); line-height: 1; font-weight: var(--weight-medium); letter-spacing: 0; color: var(--text-2);
transition: background var(--transition-fast), color var(--transition-fast);
}
.pub-card__link:hover .pub-card__cat { background: var(--brand-blue-tint); color: var(--brand-blue); } /* 호버 — 옅은 블루로만. 제목·버튼이 이미 블루라 진한 필은 과하다 */
.pub-card__title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
margin-top: var(--spacing-12); min-height: 60px; /* 2줄 높이를 항상 확보 — 제목 길이와 상관없이 버튼 라인이 맞는다. 2줄 초과는 말줄임 */
font-size: 20px; line-height: 30px; letter-spacing: var(--tracking-body); font-weight: var(--weight-semibold); color: var(--text-1); /* 목록 제목 20/600 */
transition: color var(--transition-fast);
}
.pub-card__link:hover .pub-card__title { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } /* 목록 행과 같은 호버 — 색 + 밑줄 */
/* 버튼 2개 — 카드 폭을 반씩, 글자 왼쪽 · 아이콘 오른쪽(Phosphor book-open / download-simple).
e-book이 주 동작 → 검정 필, 다운로드는 라인 */
.pub-card__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--spacing-8); margin-top: var(--spacing-24); }
/* 140 = 다운로드 글자(103) + 좌우 여백 — 카드가 그보다 좁아지는 폭(태블릿 3열·모바일 2열)에서는 자동으로 두 줄로 접힌다 */
.pub-card__btn {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8);
height: 48px; padding: 0 var(--spacing-16);
border: 1px solid var(--border-input); border-radius: var(--radius-sm);
font-size: var(--text-label); line-height: 1; font-weight: var(--weight-medium); color: var(--text-1);
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.pub-card__btn svg { flex: none; width: 18px; height: 18px; color: var(--text-2); transition: color var(--transition-fast); }
.pub-card__btn:hover { border-color: var(--brand-blue); background: var(--brand-blue); color: #fff; } /* 호버 — 분류 캡슐과 같은 블루 반전 */
.pub-card__btn:hover svg { color: #fff; }
.pub-card__btn--dark { background: var(--surface-dark); border-color: var(--surface-dark); color: #fff; }
.pub-card__btn--dark svg { color: rgba(255, 255, 255, 0.9); }
.pub-card__btn--dark:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.pub-card__btn--dark:hover svg { color: #fff; }
/* ---------- 외부 링크 카드 (.link-card) ----------
상세 없이 원문 사이트로 바로 나가는 목록에서 쓴다. 서울시 정책뉴스 · 정책동향 · 기술동향 공용.
화살표는 기본부터 우상향 — 터치 기기에는 호버가 없어서 기본 상태로 외부 링크임을 알려야 한다.
전환은 색·배경·이동만 — 레이아웃 속성은 건드리지 않는다 */
.link-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-24); }
.link-card { display: flex; }
.link-card__link {
display: flex; flex-direction: column; width: 100%; min-height: 260px;
padding: var(--spacing-32);
border: 1px solid var(--border-hairline); border-radius: var(--radius-card); background: var(--surface-canvas);
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.link-card__source { font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); color: var(--brand-blue); }
/* 기관명이 비어도 그 줄의 높이는 남겨 둔다 — 옆 카드와 제목 줄이 어긋나지 않게 */
.link-card__source:empty::before { content: "B"; }
.link-card__title {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
margin-top: var(--spacing-12); min-height: 90px; /* 3줄 자리를 늘 비워 둬 카드 높이가 같다 */
font-size: 20px; line-height: 30px; letter-spacing: var(--tracking-body);
font-weight: var(--weight-semibold); color: var(--text-1); word-break: keep-all; /* 목록 제목 20/600 */
}
.link-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); margin-top: auto; padding-top: var(--spacing-24); }
.link-card__date { font-family: var(--font-accent); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; color: var(--text-3); } /* 점 구분 표기 — 2026.09.07, 숫자는 영문 서체 */
/* 화살표 자리는 원형 배경까지 미리 확보 — 호버에 레이아웃이 밀리지 않는다 */
.link-card__go { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--text-3); transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.link-card__go::before {
content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--brand-blue-tint);
opacity: 0; transform: scale(0.8);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.link-card__go svg { position: relative; width: 22px; height: 22px; }
.link-card:hover .link-card__link, .link-card__link:focus-visible, .link-card:focus-within .link-card__link { border-color: var(--brand-blue); background: var(--surface-tint); } /* 면은 그레이로 가라앉히고 */
.link-card:hover .link-card__go, .link-card:focus-within .link-card__go { color: #fff; } /* 화살표만 블루 원으로 — 누를 지점을 또렷하게 */
.link-card:hover .link-card__go::before, .link-card:focus-within .link-card__go::before { opacity: 1; transform: scale(1); background: var(--brand-blue); }
/* ---------- 발간물 상세 ----------
2px 라인 → 히어로(좌 글 · 우 표지 400) → 사양 표(분류·발간일·발행처·키워드·목차) → 목록 버튼.
글자는 본문 17 이상 — 캡슐만 16 */
.pub-detail__hero { display: flex; align-items: flex-start; gap: var(--spacing-96); }
.pub-detail__hero--solo { max-width: none; } /* 표지가 없는 상세(기술동향) — 표와 글이 본문 폭을 그대로 쓴다 */
.pub-detail__info { flex: 1 1 auto; min-width: 0; padding-top: var(--spacing-12); }
.pub-detail__cat { font-size: var(--text-body); padding: 10px 18px; font-weight: var(--weight-medium); } /* 블루 캡슐 17/500 — 안쪽 여백 넉넉히 */
.pub-detail__title { margin-top: var(--spacing-24); font-size: var(--text-heading-sm); line-height: 58px; /* 46 → 58(1.38) — 두세 줄 제목의 줄 사이가 붙어 보였다(2026-09-22). 정책동향 · 기술동향 · 발간물 상세 공통 */ letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--text-1); word-break: keep-all; } /* 상세 주제목 42 */
.pub-detail__summary { margin-top: var(--spacing-24); font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-2); word-break: keep-all; }
.pub-detail__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); margin-top: var(--spacing-40); }
.pub-detail__btn { justify-content: space-between; min-width: 190px; height: 52px; padding: 0 var(--spacing-20); border-radius: var(--radius-sm); font-size: var(--text-body); font-weight: var(--weight-medium); } /* 목록 카드 버튼과 같은 톤 — 사각 모서리, 글자 왼쪽·아이콘 오른쪽 */
.pub-detail__btn svg { width: 20px; height: 20px; flex: none; color: var(--text-2); transition: color var(--transition-fast); }
.pub-detail__btn:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; } /* 목록 카드 버튼과 같은 블루 반전 */
.pub-detail__btn:hover svg { color: #fff; }
.pub-detail__btn.btn--dark svg { color: rgba(255, 255, 255, 0.9); }
.pub-detail__cover { flex: 0 0 400px; width: 400px; aspect-ratio: 210 / 297; } /* 표지 400 × 566 — 목록(324)보다 한 단계 크게 */
/* 상세 표지는 A4 틀 고정 · 꽉 채우기(2026-09-30) — 비율이 달라도 늘려서 채우고, 넘치는 쪽은 가운데 기준으로 잘린다(찌그러지지 않음) */
.pub-detail__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 표지 없음 — A4 틀은 그대로 두고 목록 칸과 같은 회색 면 + STIS 기호(틀 폭 48%). 표지가 아니라 그림자 · 테두리 없음 */
.pub-detail__cover--empty { display: grid; place-items: center; border-radius: var(--radius-card); background: var(--surface-tint); }
.pub-detail__cover--empty img { width: 48%; height: auto; object-fit: contain; }
/* 사양 표 — 버튼 바로 아래(왼쪽 단 안)에 붙는다. 위 1px 진한 선, 행마다 헤어라인 */
.pub-spec__label { margin-top: 80px; font-size: 28px; line-height: 36px; letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--text-1); } /* 표 머리말 28 — 26은 본문 폭 표에 비해 가벼웠다(2026-09-15). 소개 소제목(.cf__label 28)과 같은 급, 주제목 42 아래 */
.pub-spec { margin-top: var(--spacing-24); border-top: 1px solid var(--text-1); } /* 머리말 → 표 24 — 16은 머리말(28)이 표에 붙어 보였다 (2026-09-15, 발간물·기술동향·국가 R&D 공통. 모바일 20) */
.pub-spec__row { display: grid; grid-template-columns: 160px 1fr; gap: var(--spacing-24); padding: var(--spacing-20) var(--spacing-16); border-bottom: 1px solid var(--border-hairline); }
.pub-spec dt { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-bold); color: var(--text-1); }
.pub-spec dd { min-width: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-2); word-break: keep-all; }
.pub-spec dd.num { font-family: var(--font-accent); font-variant-numeric: tabular-nums; }
.pub-spec__kws { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.pub-spec__kw { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-tint); font-size: var(--text-label); line-height: 1.4; color: var(--text-2); } /* 키워드 — 그레이 캡슐, 16 */
.pub-spec__toc { counter-reset: toc; }
.pub-spec__toc li { display: flex; gap: var(--spacing-12); counter-increment: toc; }
.pub-spec__toc li::before { content: counter(toc, upper-roman) "."; flex: none; min-width: 32px; font-family: var(--font-accent); font-weight: var(--weight-medium); color: var(--text-3); }
.pub-spec__toc li + li { margin-top: var(--spacing-8); }
/* 표지가 없는 상세 — 머리말 아래 진한 선을 빼고 첫 행 헤어라인부터 시작한다 */
.pub-spec--flush { border-top: 0; } /* 간격은 .pub-spec 24 그대로 */
.pub-spec--flush .pub-spec__row:first-child { border-top: 1px solid var(--text-1); } /* 첫 줄만 진하게 — 표 머리 역할 */
.pub-detail .post__actions { margin-top: var(--spacing-96); } /* 표 아래 — 목록 버튼 위 여백 넉넉히 */
/* ---------- 정책동향 상세 — 발간물 상세와 같은 두 칸 (2026-09-22) ----------
왼쪽 글(제목 → 등록일 → 원문 보기 → 주요 정보 표) · 오른쪽 카드뉴스 슬라이드(표지 자리). 칸 사이 · 위아래 여백은 발간물 그대로(96, 1280 이하 64).
슬라이드 칸을 먼저 600(1181~1280 은 520) 정사각으로 잡고 글이 남는 폭을 쓴다. 1180 이하는 슬라이드가 위 · 글이 아래 */
.pol-visual { flex: 0 0 auto; width: clamp(520px, 41.67vw, 600px); min-width: 0; } /* 1440 에서 600, 폭이 줄면 함께 줄어 1281 에서 약 534 — 글 칸이 너무 좁아지지 않게 */
.pol-visual .nl-slider { max-width: none; margin: 0; }
.pol-visual__empty { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--radius-card-lg); background: var(--surface-tint); } /* 카드뉴스 없는 글 — 서울 R&D 카드의 이미지 없음과 같은 모양 */
.pol-visual__empty img { width: 48%; height: auto; }
.pub-detail--policy .pub-detail__actions { margin-top: var(--spacing-24); } /* 제목 → 원문 보기 — 발간물 "제목 → 요약" 과 같은 24 · 768 이하 16. 등록일은 주요 정보 표로(2026-09-22) */
/* 주요내용 — 본문 HTML(문단 · 소제목 · 목록)을 표 칸 안에서 본문 크기로 */
.pol-spec__body > * + * { margin-top: var(--spacing-8); }
.pol-spec__body h3, .pol-spec__body h4 { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-bold); color: var(--text-1); }
.pol-spec__body * + h3, .pol-spec__body * + h4 { margin-top: var(--spacing-20); }
.pol-spec__body ul, .pol-spec__body ol { display: grid; gap: 4px; }
.pol-spec__body ul li { position: relative; padding-left: var(--spacing-16); }
.pol-spec__body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-4); }
.pol-spec__body ol { list-style: decimal; padding-left: 1.4em; }
.pol-spec__body strong, .pol-spec__body b { font-weight: var(--weight-bold); color: var(--text-1); }
/* ---------- 상세 (뉴스레터형) ----------
상단 블록(탭 없음) → 2px 라인 → 제목(크게)·작성일(작게) 가운데 → 헤어라인 → 정사각 슬라이드 가운데 → 본문 → 링크 → 이전·다음 → 목록 */
.sub-body--post { padding-top: var(--spacing-120); } /* 제목 → 2px 라인 120 */
/* 2px 라인 — 정책동향(뉴스레터형) 상세 전용. 가운데 제목 디자인에 붙은 요소라 유지한다.
발간물·기술동향·국가 R&D 상세(.pub-detail)는 라인 없이 위 여백 120만 둔다 (2026-09-15) */
.post-rule { height: 2px; border: 0; background: var(--text-1); margin: 0 0 var(--spacing-64); }
.post__head { text-align: center; padding-bottom: var(--spacing-40); border-bottom: 1px solid var(--border-hairline); }
.post__title { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--text-1); } /* 42 → 34 */
.post__date { margin-top: var(--spacing-32); font-family: var(--font-accent); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-4); font-variant-numeric: tabular-nums; } /* 작성일 — Space Grotesk 17px, 날짜만(시간 없음) */
/* 뉴스레터 슬라이드 — 정사각 무대 가운데(최대 720). 트랙은 translateX, 이미지는 비율 유지(contain) */
.nl-slider { max-width: 640px; margin: var(--spacing-64) auto 0; } /* 정사각 무대라 640 x 640 */
.nl-slider__stage { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-card-lg); background: var(--surface-tint); cursor: grab; } /* 정사각 무대 — 세로가 긴 이미지는 안에서 축소되어 담긴다 */
.nl-slider.is-dragging .nl-slider__stage { cursor: grabbing; }
.nl-slider__track { display: flex; height: 100%; transition: transform 0.5s var(--ease-out-soft); will-change: transform; }
.nl-slider.is-dragging .nl-slider__track { transition: none; }
/* grid + auto 행이면 이미지의 height:100%가 순환에 걸려 풀리지 않는다.
flex로 두어 무대 높이(640)를 그대로 물려준다 */
.nl-slider__slide { flex: 0 0 100%; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* 긴 변이 640에 맞고 남는 자리는 무대의 흐린 그레이가 보인다.
max-height:100%는 grid 행이 auto라 풀리지 않아, 무대를 꽉 채운 뒤 object-fit으로 담는다 */
.nl-slider__slide img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.nl-slider__ctrl { display: flex; align-items: center; justify-content: center; gap: var(--spacing-16); margin-top: var(--spacing-24); } /* 무대와 조금 띄운다 (20 -> 24) */
.nl-slider__btn {
display: inline-grid; place-items: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--surface-band); color: var(--text-1);
transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.nl-slider__btn svg { width: 16px; height: 16px; }
.nl-slider__btn:hover { background: var(--brand-blue-tint); color: var(--brand-blue); }
.nl-slider__btn:disabled { opacity: 0.4; pointer-events: none; }
.nl-slider__count { display: flex; align-items: center; gap: 6px; min-width: 80px; justify-content: center; font-family: var(--font-accent); font-size: var(--text-label); color: var(--text-4); font-variant-numeric: tabular-nums; }
.nl-slider__count em { font-style: normal; font-weight: var(--weight-medium); color: var(--text-1); }
.nl-slider__count span { color: var(--border-input); }
/* 에디터 본문 — 기본 태그 조판 */
.post__body { margin-top: var(--spacing-64); color: var(--text-2); }
.post__body > * + * { margin-top: var(--spacing-20); }
.post__body h3 { margin-top: var(--spacing-40); font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-body); font-weight: var(--weight-bold); color: var(--text-1); }
.post__body h4 { margin-top: var(--spacing-32); font-size: var(--text-nav); line-height: var(--leading-nav); font-weight: var(--weight-bold); color: var(--text-1); }
.post__body ul, .post__body ol { padding-left: 22px; }
.post__body li + li { margin-top: var(--spacing-8); }
.post__body ul li { list-style: disc; }
.post__body ol li { list-style: decimal; }
.post__body a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.post__body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-card); }
.post__body blockquote { padding: var(--spacing-20) var(--spacing-24); border-left: 3px solid var(--brand-blue); background: var(--surface-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.post__body table { width: 100%; border-collapse: collapse; font-size: var(--text-label); line-height: var(--leading-label); }
.post__body th, .post__body td { padding: 12px 16px; border-bottom: 1px solid var(--border-hairline); text-align: left; }
.post__body th { background: var(--surface-tint); font-weight: var(--weight-medium); color: var(--text-1); }
/* 각주(*로 시작하던 줄) — 본문보다 한 단계 작고 흐리게, 왼쪽에 옅은 선 */
.post__body .post__note {
padding-left: var(--spacing-16);
border-left: 2px solid var(--border-hairline);
font-size: var(--text-label); line-height: var(--leading-label); color: var(--text-4);
}
/* 링크 — 그레이 면, 레이블·URL·외부 화살표 */
.post__links { display: flex; flex-direction: column; gap: var(--spacing-8); margin-top: var(--spacing-48); }
.post__link {
display: flex; align-items: center; gap: var(--spacing-24);
padding: var(--spacing-24) var(--spacing-32);
border-radius: var(--radius-card); background: var(--surface-tint);
color: var(--text-1);
transition: background var(--transition-fast), color var(--transition-fast);
}
.post__link:hover { background: var(--brand-blue-tint); color: var(--brand-blue); }
.post__link-label { flex: none; font-weight: var(--weight-bold); color: var(--text-1); } /* 라벨 색은 호버에도 그대로 */
.post__link-url { flex: 0 1 auto; min-width: 0; font-family: var(--font-accent); font-size: var(--text-label); font-weight: var(--weight-regular); color: var(--text-3); white-space: nowrap; transition: color var(--transition-fast); } /* 도메인만 노출 — 말줄임이 필요 없다 */
.post__link:hover .post__link-url { font-weight: var(--weight-medium); color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } /* 호버 — 주소가 굵어지고 블루 밑줄 */
.post__link svg { flex: none; width: 20px; height: 20px; }
/* 원문 링크 화살표 — 평소 오른쪽, 호버하면 오른쪽 위로 부드럽게 회전 (Phosphor arrow-right 원본) */
.post__link-arrow { position: relative; display: inline-grid; place-items: center; flex: none; margin-left: auto; width: 40px; height: 40px; color: var(--text-3); transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.post__link-arrow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; /* 블록 배경이 옅은 블루로 바뀌므로 원은 흰색 */ opacity: 0; transform: scale(0.8); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.post__link-arrow svg { position: relative; width: 22px; height: 22px; }
.post__link:hover .post__link-arrow, .post__link:focus-visible .post__link-arrow { color: var(--brand-blue); } /* 회전·이동 없음 — 기본부터 우상향 */
.post__link:hover .post__link-arrow::before, .post__link:focus-visible .post__link-arrow::before { opacity: 1; transform: scale(1); }
/* 이전글 · 다음글 — 상단 블랙 라인 뒤 그레이 필 행 (없는 글은 행을 출력하지 않는다 — 레퍼런스 준용) */
.post-nav { display: flex; flex-direction: column; gap: var(--spacing-12); margin-top: var(--spacing-64); padding-top: var(--spacing-48); border-top: 1px solid var(--text-1); }
.post-nav__item {
display: flex; align-items: center; gap: var(--spacing-24);
min-height: 76px; padding: var(--spacing-20) var(--spacing-32);
border-radius: var(--radius-pill); background: var(--surface-tint);
color: var(--text-2);
transition: background var(--transition-fast);
}
a.post-nav__item:hover { background: var(--brand-blue-tint); }
.post-nav__label { flex: none; display: flex; align-items: center; gap: var(--spacing-8); font-weight: var(--weight-bold); color: var(--text-1); }
.post-nav__label svg { width: 14px; height: 14px; }
.post-nav__title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--transition-fast); }
a.post-nav__item:hover .post-nav__title { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; } /* 목록 행과 같은 호버 — 색 + 밑줄 */
.post__actions { display: flex; justify-content: center; margin-top: var(--spacing-48); }
.post__list-btn { min-width: 280px; height: 64px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-body); font-weight: var(--weight-bold); }
/* 페이지네이션 — 원형 44px, 현재 블루 필, 호버 옅은 블루 면 (도구 버튼·탭과 같은 문법) */
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--spacing-4); margin-top: var(--spacing-64); }
/* 레퍼런스 준용: 화살표는 옅은 그레이 원, 번호는 맨글자, 현재 번호만 블루 필. 번호 최대 10개 */
.pagination a {
display: inline-grid; place-items: center;
width: 44px; height: 44px; border-radius: 50%;
font-size: var(--text-label); line-height: 1; font-weight: var(--weight-medium);
color: var(--text-2);
transition: background var(--transition-fast), color var(--transition-fast);
}
.pagination__num { font-variant-numeric: tabular-nums; }
.pagination__num:hover { color: var(--brand-blue); }
.pagination__num[aria-current="page"] { background: var(--brand-blue); color: #fff; font-weight: var(--weight-bold); }
.pagination__nav { background: var(--surface-band); color: var(--text-1); }
.pagination__nav:hover { background: var(--brand-blue-tint); color: var(--brand-blue); }
.pagination__nav svg { width: 16px; height: 16px; }
.pagination__nav.is-disabled { opacity: 0.4; pointer-events: none; }
.pagination__nav + .pagination__num, .pagination__num + .pagination__nav { margin-left: var(--spacing-12); }
/* ---------- 반응형 ---------- */
@media (max-width: 1280px) {
.transit__row { grid-template-columns: 240px 1fr; }
.contact-grid { grid-template-columns: 1fr 1fr; }
.contact-grid__cell { padding: var(--spacing-32) var(--spacing-24) var(--spacing-40); }
.contact-grid__cell:nth-child(3) { border-left: 0; }
.contact-grid__cell:nth-child(n + 3) { border-top: 1px solid var(--border-hairline); }
.contact-grid dd { margin-top: var(--spacing-32); }
.map-box { height: 420px; }
.board-list__head, .board-list__row { grid-template-columns: 96px 1fr 160px 104px; }
/* 번호 칸을 접는 폭이라 열도 네 개로 다시 짠다 — 다섯 열로 두면 칸이 통째로 한 칸씩 밀린다 */
.board-list--tech .board-list__head, .board-list--tech .board-list__row { grid-template-columns: 180px minmax(0, 1fr) 112px 80px; column-gap: var(--spacing-16); padding-inline: var(--spacing-12); }
.board-list--tech .board-act { width: 40px; height: 40px; }
.board-list__no, .board-list__views { display: none; } /* 번호·조회는 좁은 화면에서 접는다 */
.board-list--tech .board-list__head > .board-list__no { display: none; } /* 머리글 칸 규칙(display:block)보다 뒤·구체적이어야 접힌다 */
.thumb-grid { grid-template-columns: repeat(3, 1fr); }
.link-grid { grid-template-columns: repeat(3, 1fr); }
.pub-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-48) var(--spacing-32); }
.pub-detail__hero { gap: var(--spacing-64); }
.pub-detail__cover { flex-basis: 320px; width: 320px; }
.pol-visual { width: 520px; } /* 정책동향 슬라이드 520(칸 사이 64) — 1181 에서도 글 칸 약 530 이 남는다 */
.pub-spec__row { grid-template-columns: 140px 1fr; }
}
@media (max-width: 768px) {
.sub-top { padding-top: var(--spacing-32); }
.sub-title-row { margin-top: var(--spacing-32); } /* 브레드크럼 → 제목 숨 넉넉히 */
.sub-title { font-size: 38px; line-height: 46px; }
.page-tools { display: none; } /* 모바일은 기기 공유·인쇄 기능이 따로 있어 숨김 */
.sub-hero__anchor { height: var(--spacing-48); }
/* 모바일 2차 탭 — 현재 페이지명 필 버튼, 누르면 아래로 목록이 펼쳐진다 */
.sub-tabs-wrap { position: relative; margin-bottom: var(--spacing-64); }
.sub-tabs__toggle {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16);
width: 100%; height: 56px; padding: 0 var(--spacing-20);
border-radius: var(--radius-pill);
background: var(--surface-band); /* 흰 바탕에서 눈에 띄도록 면을 한 단계만 톤 업 */
font-size: var(--text-body); line-height: 1; font-weight: var(--weight-medium);
color: var(--text-1);
}
.sub-tabs__caret svg { width: 16px; height: 16px; display: block; color: var(--text-3); transition: transform 0.25s var(--ease-out-soft); }
.sub-tabs__toggle[aria-expanded="true"] .sub-tabs__caret svg { transform: rotate(180deg); }
.sub-tabs {
position: absolute; top: calc(100% + var(--spacing-8)); left: 0; right: 0; z-index: 5;
display: block; padding: var(--spacing-8);
background: var(--surface-canvas);
border-radius: var(--radius-card);
box-shadow: var(--shadow-overlay);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.sub-tabs-wrap.is-open .sub-tabs { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-tabs a {
display: block; height: auto; padding: 14px var(--spacing-20);
border-radius: var(--radius-sm);
background: transparent;
font-size: var(--text-body); text-align: left; white-space: normal;
}
.sub-hero { --hero-h0: 260px; }
.sub-body { padding-block: var(--spacing-64) var(--spacing-96); }
.sub-section + .sub-section { margin-top: var(--spacing-64); }
.map-box { height: 300px; }
.contact-grid { grid-template-columns: 1fr; }
.contact-grid__cell { padding: var(--spacing-24) 0; border-left: 0 !important; }
.contact-grid__cell + .contact-grid__cell { border-top: 1px solid var(--border-hairline); }
.contact-grid dd { margin-top: var(--spacing-16); }
/* 좁은 왼쪽 열: 아이콘 아래 수단명(가운데 정렬) / 오른쪽: 상세 */
.transit { --transit-icon: 70px; --transit-pad: 20px; }
.transit__row { grid-template-columns: 92px 1fr; gap: var(--spacing-16); padding: 0; } /* 84 → 92 (+10%) */
.transit__head { flex-direction: column; gap: var(--spacing-8); text-align: center; }
.transit__icon { width: 37px; height: 37px; }
.transit__label { font-size: var(--text-body); line-height: 24px; letter-spacing: 0; }
.transit__stop { grid-template-columns: 1fr; row-gap: var(--spacing-8); }
/* 게시판 — 카드형 행: 1줄 분류·출처·날짜, 2줄 제목 */
.sub-body--plain { padding-top: var(--spacing-48); } /* 하위 화면 공통 — 모바일 제목 줄 → 내용 48 */
.sub-body--plain .sub-tabs-wrap { margin-bottom: var(--spacing-48); }
.board-bar { flex-direction: column; align-items: stretch; gap: var(--spacing-16); padding-bottom: var(--spacing-32); margin-bottom: var(--spacing-32); }
.board-search { width: 100%; gap: var(--spacing-8); }
.board-search input { height: 52px; padding: 0 var(--spacing-20); }
.board-search .search-bar__submit { width: 52px; height: 52px; }
.board-scope { width: 124px; } /* 가장 긴 "내용(요약)" 71px이 들어가는 폭 — 입력칸 안내문은 480 이하에서 JS가 짧게 바꾼다 */
.board-scope__btn { height: 52px; gap: 6px; padding: 0 var(--spacing-12) 0 var(--spacing-16); }
.board-list__head { display: none; }
.board-list__row {
grid-template-columns: auto 1fr auto;
grid-template-areas: "cat org date" "title title title";
row-gap: var(--spacing-8); column-gap: var(--spacing-12);
padding: var(--spacing-20) 0;
}
/* 기술동향 — 좁은 화면에서는 카드형으로 접는다. 위 줄에 출처·발행일, 그 아래 제목, 오른쪽에 버튼 두 개 */
.board-list--tech { margin-top: -32px; }
.board-list--tech .board-list__head, .board-list--tech .board-list__row { padding-inline: 0; } /* 목록 바의 2px 라인·검색창과 같은 기준선 */
.board-list--tech .board-list__row {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "org act" "title act" "date act";
align-items: center;
column-gap: var(--spacing-16);
}
.board-list--tech .board-list__org { padding-right: 0; text-align: left; } /* PC의 가운데 정렬은 표일 때만 — 카드형에서는 제목과 같은 왼쪽 기준 */
.board-list--tech .board-list__text { font-size: 18px; line-height: 28px; } /* 모바일도 PC와 같은 18 — 한 줄에 행 하나라 폭 여유가 있고, 17은 위아래 기관·날짜와 차이가 작았다 (2026-09-15) */
.board-list--tech .board-list__no { display: none; }
.board-list--tech .board-list__org { grid-area: org; }
.board-list--tech .board-list__title { grid-area: title; }
.board-list--tech .board-list__date { grid-area: date; text-align: left; }
.board-list--tech .board-list__act { grid-area: act; align-self: center; } /* 세 줄 전체 높이의 한가운데 — 제목은 버튼 앞에서 미리 줄바꿈된다 */
.board-list__cat { grid-area: cat; }
.board-list__org { grid-area: org; }
.board-list__date { grid-area: date; }
.board-list__title { grid-area: title; }
.board-list__title { display: block; } /* 제목은 줄바꿈, 새 글 점·첨부 아이콘은 글 끝에 인라인으로 */
.board-list__text { display: inline; white-space: normal; }
.board__new, .board__clip { display: inline-block; vertical-align: middle; margin-left: 6px; }
.thumb-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-32) var(--spacing-16); } /* 모바일 2열 · 행 간격은 라인 여백(32)과 같게 */
/* 예약 높이는 줄높이 × 2줄과 정확히 같아야 한다 — 남으면 잘린 셋째 줄이 비쳐 보인다 */
.thumb-card__title { margin-top: var(--spacing-16); min-height: 52px; font-size: var(--text-body); line-height: 26px; } /* 발간물 카드 제목과 같은 크기 — 두 목록의 톤을 맞춘다 */
.thumb-card__date { margin-top: var(--spacing-16); } /* 서울시동향 카드 모바일(제목 → 날짜 16)과 같게 */
.link-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-16); }
.link-card__link { min-height: 0; padding: var(--spacing-20); }
.link-card__title { min-height: 84px; font-size: var(--text-body); line-height: 28px; }
.link-card__foot { padding-top: var(--spacing-16); }
.pub-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-40) var(--spacing-16); } /* 모바일 2열 */
.pub-card__tile { padding: 16px; }
.pub-card__cat { margin-top: var(--spacing-20); padding: 7px 12px; }
.pub-card__title { margin-top: var(--spacing-12); min-height: 52px; font-size: var(--text-body); line-height: 26px; }
.pub-card__actions { gap: 6px; margin-top: var(--spacing-16); }
.pub-card__btn { height: 44px; padding: 0 var(--spacing-12); }
.pub-card__btn svg { width: 16px; height: 16px; }
.pub-detail__hero { flex-direction: column-reverse; align-items: center; gap: var(--spacing-40); } /* 표지 먼저 가운데, 글은 아래 */
.pub-detail__info { padding-top: 0; width: 100%; }
.pub-detail__cover { flex-basis: auto; width: 240px; }
.pub-detail--policy .pub-detail__hero { gap: var(--spacing-40); } /* 발간물 모바일과 같은 간격 */
.pol-visual { max-width: none; }
.pub-detail__title { margin-top: var(--spacing-16); font-size: 30px; line-height: 42px; letter-spacing: var(--tracking-title); } /* 40 → 42(1.4) — PC 와 같은 비율 */ /* 26 → 30 — 페이지 제목 38 아래에서 본문 17과 차이가 작아 가벼웠다 */
.pub-detail__summary { margin-top: var(--spacing-16); }
.pub-detail--policy .pub-detail__actions { margin-top: var(--spacing-16); } /* 제목 → 원문 보기 = 발간물 제목 → 요약(16) */
.pub-detail__actions { margin-top: var(--spacing-32); } /* 요약 → 버튼. 24는 문단 사이 간격과 같아 버튼이 본문에 붙어 보였다 */
.pub-detail__btn { flex: 1 1 0; min-width: 0; height: 50px; padding: 0 var(--spacing-16); }
.pub-spec__label { margin-top: var(--spacing-64); font-size: 24px; line-height: 32px; } /* 크기 24는 모바일 제목 30보다 한 단계 아래 · 버튼 → 발간 정보는 그보다 한 단계 더 벌려 단락을 가른다 */
.pub-detail .post__actions { margin-top: var(--spacing-48); }
.pub-spec { margin-top: var(--spacing-20); } /* 모바일 16 → 20 */
.pub-spec__row { grid-template-columns: 1fr; gap: var(--spacing-8); padding: var(--spacing-16) var(--spacing-4); }
.sub-body--post { padding-top: var(--spacing-48); }
/* 게시판 대메뉴 서브히어로 — 모바일은 원래 탭 방식(버튼 + 펼침 목록) 그대로, 제목 아래 32 · 탭 버튼 → 내용 48(예전과 같은 값) */
.sub-title-row--tabs { flex-direction: column; align-items: stretch; row-gap: var(--spacing-32); }
.sub-title-row--tabs .sub-tabs a { height: auto; padding: 14px var(--spacing-20); }
.sub-top--board ~ .sub-body--plain,
.sub-top--board ~ .sub-body--post { padding-top: var(--spacing-48); }
.post-rule { margin-bottom: var(--spacing-32); }
.post__head { padding-bottom: var(--spacing-24); }
.post__title { font-size: 30px; line-height: 40px; letter-spacing: var(--tracking-title); } /* 상세 제목 — 발간물·기술동향 상세와 같은 30 */
.post__date { margin-top: var(--spacing-16); }
.nl-slider { margin-top: var(--spacing-32); }
.nl-slider__stage { border-radius: var(--radius-card); }
.post__body { margin-top: var(--spacing-40); }
.post__links { margin-top: var(--spacing-32); }
.post__link { justify-content: space-between; padding: var(--spacing-16) var(--spacing-20); border-radius: var(--radius-md); } /* URL을 감추므로 화살표는 오른쪽 끝으로 */
.post__link-url { display: none; }
.post-nav { margin-top: var(--spacing-48); padding-top: var(--spacing-32); gap: var(--spacing-8); }
.post-nav__item { min-height: 56px; padding: var(--spacing-12) var(--spacing-20); gap: var(--spacing-12); border-radius: var(--radius-card); }
.post__actions { margin-top: var(--spacing-32); }
.post__list-btn { min-width: 0; width: 100%; height: 56px; }
.pagination { margin-top: var(--spacing-48); gap: 0; }
.pagination a { width: 40px; height: 40px; }
.pagination__nav + .pagination__num, .pagination__num + .pagination__nav { margin-left: var(--spacing-4); }
.pagination__num.is-wide-only { display: none; } /* 10개는 한 줄에 안 들어간다 — 이 폭에서는 5개씩 */
}
/* ---------- 인쇄 ----------
화면과 같은 모양으로 — 헤더·히어로·탭·본문·푸터 전부 인쇄. 조작 요소(도구·맨 위로·토스트·전체메뉴)만 제외.
스크롤 연동 상태(핀·성장·헤더 반전)와 등장 모션은 기본 상태로 되돌린다. */
@media print {
.page-tools, .to-top, .toast, .megamenu, .hamburger { display: none !important; }
.site-header { position: static !important; background: var(--surface-canvas) !important; }
.site-header.is-over-image { color: var(--text-1); }
.site-header.is-over-image .stis-logo { --stis-blue: var(--brand-blue); }
.site-header.is-over-image .stis-wordmark__color { opacity: 1; }
.site-header.is-over-image .stis-wordmark__white { opacity: 0; }
.site-header.is-over-image .site-header__gnb { color: var(--text-1); }
.sub-top { transform: none !important; }
.breadcrumb.is-on-image, .breadcrumb.is-on-image a, .sub-title-row.is-on-image .sub-title { color: var(--text-1) !important; }
.sub-hero { --hero-p1: 0 !important; break-inside: avoid; }
html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.sub-section, .contact-grid, .transit__row, .board-list__row { break-inside: avoid; }
.board-search, .pagination, .nl-slider__ctrl, .post__actions, .pub-card__actions, .pub-detail__actions { display: none !important; }
/* 아래 여섯 줄은 인쇄용인데 "움직임 줄이기" 구간에 잘못 들어가 있었다 — 그 설정에서 카드뉴스가 세로로 모두 늘어섰다(2026-09-22 옮김).
인쇄에서는 카드뉴스를 모두 세로로 펼쳐 찍는다 */
.nl-slider__stage { aspect-ratio: auto; }
.nl-slider__track { display: block; height: auto; transform: none !important; }
.nl-slider__slide { height: auto; break-inside: avoid; }
.map-box { height: 400px; }
.site-footer { background: var(--surface-footer) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sub-tabs__toggle, .sub-tabs a[aria-current="page"], .line-badge, .bus-badge, .transit__icon-wrap { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* 모션 최소화 — 이동·확대는 빼고 색 전환만 남겨 반응은 알 수 있게 */
@media (prefers-reduced-motion: reduce) {
.link-card__go, .post__link-arrow { transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.link-card:hover .link-card__go, .link-card:focus-within .link-card__go,
.post__link:hover .post__link-arrow, .post__link:focus-visible .post__link-arrow { transform: none; }
.link-card__go::before, .post__link-arrow::before { transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: none; }
.link-card:hover .link-card__go::before, .link-card:focus-within .link-card__go::before,
.post__link:hover .post__link-arrow::before, .post__link:focus-visible .post__link-arrow::before { transform: none; }
.nl-slider__track { transition: none; } /* 카드뉴스는 슬라이드 그대로 — 넘길 때 미끄러지는 움직임만 뺀다 */
}
/* ============ 준비 중 안내 (Coming Soon) ============
콘텐츠가 아직 없는 페이지의 자리표시. 옅은 회색 면에 가운데 정렬 */
.coming-soon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-16);
min-height: 420px;
padding: var(--spacing-64) var(--spacing-24);
border-radius: var(--radius-card-lg);
background: var(--surface-tint);
text-align: center;
}
.coming-soon__title {
font-family: var(--font-accent);
font-size: var(--text-subheading);
line-height: 1.2;
letter-spacing: var(--tracking-title);
font-weight: var(--weight-bold);
color: var(--text-3);
}
.coming-soon__desc {
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--text-4);
}
@media (max-width: 768px) {
.coming-soon { min-height: 280px; padding: var(--spacing-48) var(--spacing-20); }
.coming-soon__title { font-size: 26px; }
.coming-soon__desc { font-size: var(--text-label); }
}
/* ---------- STIS 소개 ---------- */
/* 소개 — 좌 35% 브랜드 블록 / 우 55% 헤드라인 + 본문. 사이 10%는 그리드가 남긴 여백 */
.intro { display: grid; grid-template-columns: 40% 54%; justify-content: space-between; align-items: start; } /* 좌 40 — 영문 정식 명칭 한 줄(20px) 폭 */
/* 약칭 자리의 로고 심볼 — 382.7 : 118.98. 옛 64px 글자(대문자 높이 약 46)보다 크게 */
.intro__acronym { display: block; width: auto; height: 76px; }
.intro__name {
margin-top: var(--spacing-40); /* 심볼 아래 숨 — 한글·영문 사이(12)보다 확실히 크게. 24는 심볼에 딸려 보였다 */
font-size: var(--text-subheading); line-height: var(--leading-subheading);
letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--text-1);
}
/* 영문 정식 명칭 — 대문자 넷(S·T·I·S)만 블루 500으로 세워 약칭의 출처를 보여준다.
science가 소문자인 것은 원문 그대로 (약칭에 들어가지 않는 단어) */
.intro__en {
margin-top: var(--spacing-12);
font-family: var(--font-accent); font-size: 20px; line-height: 28px;
letter-spacing: -0.01em; color: var(--text-4);
}
.intro__en b { font-weight: var(--weight-medium); color: var(--brand-blue); }
/* 헤드라인 윗선을 좌측 STIS 글자 윗선에 맞춘다 — 두 줄 사이 간격이 아니라 글자끼리 맞춘 값 */
.intro__body { padding-top: 4px; }
.intro__body .intro__headline {
text-wrap: balance;
margin-bottom: var(--spacing-32);
font-size: var(--text-subheading); line-height: var(--leading-subheading);
letter-spacing: var(--tracking-title); font-weight: var(--weight-bold);
color: var(--text-1); word-break: keep-all;
}
.intro__body p {
font-size: 20px; line-height: 1.6; letter-spacing: var(--tracking-body);
color: var(--text-2); word-break: keep-all;
}
.intro__body p + p { margin-top: var(--spacing-24); }
/* 본문 강조 — 색만 진하게 올리고 굵기는 한 단계만. 블록 전체가 무거워지지 않게 */
.intro__body p b { font-weight: var(--weight-bold); color: var(--text-1); }
/* 브랜드 마퀴 — 소개와 추진체계 사이를 흐르는 배경 텍스트.
화면 끝까지 깔고(100vw) 좌우 끝은 마스크로 흐려 사라지게 한다.
같은 문장을 두 벌 깔고 -50%까지 밀면 이음매가 생기지 않는다 */
.marquee {
margin-inline: calc(50% - 50vw);
margin-block: var(--spacing-96); /* 다섯 섹션(소개·마퀴·추진체계·주요 역할·마무리) 간격 통일 — 섹션 사이와 같은 96 */
overflow: hidden;
user-select: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.marquee__track {
display: flex; width: max-content;
animation: marqueeFlow 50s linear infinite;
will-change: transform;
}
.marquee__line {
font-family: var(--font-accent);
font-size: 100px; line-height: 1.1;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-none);
white-space: nowrap;
/* 배경 요소 — 읽히기보다 결처럼 깔린다. 본문 텍스트가 아니라 대비 하한을 적용하지 않는다 */
color: var(--surface-band);
}
/* 가운뎃점 — 글꼴의 · 는 기준선 기준이라 대문자 한가운데에 오지 않는다.
원을 직접 그려 대문자 높이의 절반(0.29em)에 맞춘다 */
.marquee__dot {
display: inline-block; vertical-align: 0.29em;
width: 0.12em; height: 0.12em; margin-inline: 0.3em;
border-radius: 50%; background: currentColor;
}
@keyframes marqueeFlow {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------- 추진체계 / Framework ----------
헤어라인 흰 판 안에 세 덩이: 제공 기관 | 화살표 | STIS 허브 | 화살표 | 이용자. 선·점 없음.
좌우는 같은 디자인 — 위에 블루 라운드 박스(구역 이름), 아래 회색 박스 4개를 여백만 두고 쌓는다.
가운데는 브랜드 블루 그라데이션 원 + 흰 심볼 + 한글 명칭, 바깥으로 파형이 퍼진다.
연결은 Phosphor arrow-right 기하(획 16, 둥근 끝)의 자루만 길게 늘인 화살표, 라벨은 그 위에 실제 텍스트 */
.fw {
--fw-side: 300px; /* 양쪽 기관 열 폭 */
--fw-hub: 260px; /* 허브 원 지름 */
display: grid;
grid-template-columns: var(--fw-side) minmax(0, 1fr) var(--fw-hub) minmax(0, 1fr) var(--fw-side); /* 화살표 열이 남는 폭을 반씩 — 기관과 원 사이 정중앙 */
align-items: center;
padding: var(--spacing-64) var(--spacing-48);
border: 1px solid var(--border-hairline); border-radius: var(--radius-card-lg); background: var(--surface-canvas);
color: var(--text-1);
}
/* 구역 이름 — 블루 라운드 박스 */
.fw__label {
margin: 0 0 var(--spacing-12); padding: var(--spacing-16) var(--spacing-16);
border-radius: var(--radius-pill); background: var(--brand-blue); /* 완전한 캡슐 */
text-align: center; font-size: var(--text-nav); line-height: var(--leading-nav); font-weight: var(--weight-bold); color: #fff; /* 19 볼드, 높이 60 — 아래 회색 박스보다 비중 크게 */
}
/* 4개를 흐린 블루 라운드 판(24) 하나에 담고, 각각은 흰 캡슐 */
.fw__list { display: flex; flex-direction: column; gap: var(--spacing-8); list-style: none; margin: 0; padding: var(--spacing-12); border-radius: var(--radius-card-lg); background: var(--brand-blue-tint); }
.fw__node {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 76px; padding: var(--spacing-12) var(--spacing-24);
border-radius: var(--radius-pill); background: var(--surface-canvas);
text-align: center;
}
.fw__node-name { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--brand-blue); word-break: keep-all; } /* 17 미디엄 블루 */
.fw__node-sub { font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-1); word-break: keep-all; } /* 15 검정 */
/* 연결 — 화살표는 원의 가운데 높이, 이름은 그 위. 열 안에서 좌우 24 여백 */
.fw__flow { position: relative; display: flex; justify-content: center; padding-inline: var(--spacing-24); }
/* 파형(44px)이 번지는 원 쪽 여백을 더 두어 화살표를 기관 쪽으로 조금 민다 */
.fw__side + .fw__flow { padding-right: var(--spacing-48); --fw-pr: var(--spacing-48); }
.fw__hub + .fw__flow { padding-left: var(--spacing-48); --fw-pl: var(--spacing-48); }
.fw__flow-name { position: absolute; left: var(--fw-pl, var(--spacing-24)); right: var(--fw-pr, var(--spacing-24)); bottom: calc(100% + var(--spacing-8)); /* 화살표 폭 기준 중앙 */ text-align: center; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--text-1); white-space: nowrap; }
.fw__arrow { display: flex; justify-content: center; color: var(--brand-blue); }
/* 꺾쇠 4개 — 바짝 겹쳐 하나의 ≫ 아이콘처럼. 밝기는 왼→오 계단(0.3·0.5·0.75·1)이 기본, 그 위로 밝은 파가 오른쪽으로 흐른다 */
.fw__chevs { display: flex; align-items: center; }
.fw__chev { display: block; width: 44px; height: 44px; margin-right: -24px; animation: fwChev 1.5s ease-in-out infinite; }
.fw__chev:last-child { margin-right: 0; }
.fw__chev svg { display: block; width: 100%; height: 100%; }
.fw__chev:nth-child(1) { --chev-base: 0.3; animation-delay: 0s; }
.fw__chev:nth-child(2) { --chev-base: 0.5; animation-delay: 0.18s; }
.fw__chev:nth-child(3) { --chev-base: 0.75; animation-delay: 0.36s; }
.fw__chev:nth-child(4) { --chev-base: 1; animation-delay: 0.54s; }
.fw__chev { opacity: var(--chev-base); }
@keyframes fwChev { 0%, 55%, 100% { opacity: var(--chev-base); } 25% { opacity: 1; } 40% { opacity: calc(var(--chev-base) * 0.6); } }
@media (prefers-reduced-motion: reduce) { .fw__chev { animation: none; } }
/* 허브 — 브랜드 블루 그라데이션 원. 파형은 ::before/::after 두 링이 번갈아 커지며 사라진다 */
.fw__hub {
position: relative; isolation: isolate; justify-self: center;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-16);
width: var(--fw-hub); height: var(--fw-hub); border-radius: 50%;
background: linear-gradient(145deg, var(--brand-blue) 0%, var(--brand-blue-hover) 42%, var(--brand-navy-deep) 100%); /* 블루 → 딥 네이비, 어두운 조합 */
color: #fff; text-align: center;
}
.fw__hub-symbol { position: relative; z-index: 1; display: block; width: 150px; height: auto; }
.fw__hub-kr { position: relative; z-index: 1; margin: 0; font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); color: #fff; }
/* 파형 — 얇은 링 대신 원 가장자리에서 면이 번지듯 퍼지는 펄스(box-shadow 확산). 두 개가 번갈아 */
.fw__hub::before, .fw__hub::after {
content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
box-shadow: 0 0 0 0 rgba(0, 87, 243, 0.24);
animation: fwPulse 3.6s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.fw__hub::after { animation-delay: 1.8s; }
@keyframes fwPulse {
0% { box-shadow: 0 0 0 0 rgba(0, 87, 243, 0.24); }
70% { box-shadow: 0 0 0 var(--fw-pulse, 44px) rgba(0, 87, 243, 0); }
100% { box-shadow: 0 0 0 var(--fw-pulse, 44px) rgba(0, 87, 243, 0); }
}
@media (prefers-reduced-motion: reduce) { .fw__hub::before, .fw__hub::after { animation: none; box-shadow: none; } }
/* ---------- 주요 역할 / Core Functions ----------
소제목(22px 볼드) 아래 카드. 분석·가공 3단은 회색 카드(핵심가치 카드와 같은 글 구성: 번호·이름·영문·설명),
순서는 번호(01 · 02 · 03)로만 보인다 — 카드 사이 화살표는 2026-09-22 에 뺐다 */
/* 소제목 — 섹션 제목(34)과 카드 이름(24) 사이 28px. 22는 카드 이름과 붙어 위계가 서지 않았다.
아래 여백 32 = 섹션 제목 아래(.sub-section__head)와 같은 값 — 제목→내용 간격은 한 값으로, 덩어리 사이는 64 */
.cf__label {
margin: 0 0 var(--spacing-32);
font-size: 28px; line-height: 36px; letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--text-1);
}
/* 카드 사이 16 — 같은 모양 카드 묶음(기관 소개 핵심가치 · 전략목표)과 같은 간격. 화살표를 뺀 뒤 64 → 16(2026-09-22).
minmax(0, 1fr) — 글 길이와 관계없이 세 카드 폭을 똑같이 */
.cf__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-16); list-style: none; margin: 0; padding: 0; }
.cf__step {
position: relative;
display: flex; flex-direction: column;
padding: var(--spacing-32); border-radius: var(--radius-card-lg); background: var(--surface-tint);
text-align: left;
}
/* 아이콘 타일 — 핵심가치 카드와 같은 76px 흰 판, 오른쪽 위에 띄운다. 번호는 같은 줄 왼쪽, 타일 세로 중앙 */
.cf__icon {
position: absolute; top: var(--spacing-32); right: var(--spacing-32);
display: grid; place-items: center;
width: 76px; height: 76px; border-radius: var(--radius-card);
background: var(--surface-canvas); color: var(--text-1);
}
/* 번호 — 타일 위쪽 선에 맞춰 위 정렬, 22px로 키워 카드의 시작점이 되게 */
.cf__num { display: block; min-height: 76px; }
.cf__icon .qm-svg { width: 42px; height: 42px; display: block; }
/* 번호는 전략목표 카드와 같은 자리·톤 (text-4 400), 이름 + 영문(블루)은 핵심가치 카드 조합 */
/* 번호 — text-4는 흰 바탕 텍스트 하한(4.5:1)이라 색은 더 빼지 않고 굵기만 400으로 낮춰 한 단계 물러서게 */
.cf__num { font-family: var(--font-accent); font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--weight-regular); letter-spacing: 0.02em; color: var(--text-4); }
.cf__name { margin-top: var(--spacing-8); font-size: 24px; line-height: 32px; letter-spacing: var(--tracking-body); font-weight: var(--weight-bold); color: var(--text-1); word-break: keep-all; }
.cf__en { margin-top: var(--spacing-4); font-family: var(--font-accent); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--brand-blue); }
.cf__desc { margin: var(--spacing-24) 0 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-none); color: var(--text-3); word-break: keep-all; }
/* 환류 4 — 가로로 이어진 캡슐 4개. 이웃끼리 좌우 끝이 캡슐 폭의 12%쯤 겹치고, 겹친 자리 가운데에 +.
캡슐은 헤어라인 아웃라인만(면 없음) — 겹친 곳은 두 선이 렌즈 모양으로 교차한다. 설명은 캡슐 아래 바깥, 캡슐 중심선에 맞춰 중앙 */
/* 주요 역할 안 간격 규칙 — 섹션 제목 → 소제목 40, 소제목 → 내용 32, 내용 덩어리 → 다음 소제목 64. 추진체계 제목 → 판도 같은 40 */
.sub-section__head + .cf__label, .sub-section__head + .fw { margin-top: var(--spacing-40); } /* head의 아래 32와 병합되어 큰 쪽 40이 남는다 */
.cf__label--gap { margin-top: var(--spacing-64); }
.cf__caps {
--cap-h: 128px;
--cap-overlap: 4.2%; /* 컨테이너 기준 — 캡슐 폭(컨테이너의 1/3.55)의 15% */
display: flex; align-items: flex-start;
list-style: none; margin: 0; padding: var(--spacing-48);
border: 1px solid var(--border-hairline); border-radius: var(--radius-card-lg); background: var(--surface-canvas); /* 추진체계 판과 같은 헤어라인 박스 */
}
.cf__cap { position: relative; flex: 1 1 0; min-width: 0; text-align: center; }
.cf__cap + .cf__cap { margin-left: calc(var(--cap-overlap) * -1); }
.cf__cap-pill {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-4);
min-height: var(--cap-h); padding: var(--spacing-20) var(--spacing-40);
border: 3px solid color-mix(in srgb, var(--border-hairline) 60%, #fff); border-radius: var(--radius-pill); /* 헤어라인보다 한 단계 더 흐리게 — 박스 헤어라인(1px)과 구분 */
background: transparent;
}
.cf__cap-ko { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-bold); color: var(--text-1); word-break: keep-all; } /* 수식어 — 17 볼드, 키워드의 받침 역할 */
.cf__cap-en { font-family: var(--font-accent); font-size: 28px; line-height: 34px; letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--brand-blue); }
/* + — 캡슐 오른쪽 끝, 겹침 구간의 한가운데(캡슐 폭의 6%). 흰 원으로 교차선을 살짝 가려 글자가 선에 걸리지 않게 */
.cf__cap-plus {
position: absolute; z-index: 1; top: calc(var(--cap-h) / 2); right: 7.5%; /* 겹침 15%의 한가운데 */
width: 40px; height: 40px;
transform: translate(50%, -50%);
border-radius: 50%; background: var(--surface-canvas);
font-size: 0; color: transparent; /* 글자 대신 아래 두 획으로 그린다 — 가늘고 길게 */
}
.cf__cap-plus::before, .cf__cap-plus::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 20px; height: 2px; margin: -1px 0 0 -10px; /* 26은 길어 보여 20으로, 굵기 2 그대로 */
border-radius: 1px; background: var(--brand-orange);
}
.cf__cap-plus::after { transform: rotate(90deg); }
.cf__cap-desc { margin: var(--spacing-24) 0 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-3); word-break: keep-all; }
/* 마무리 — 미션·비전 배너(.mv__panel) 재사용. 문장 한 덩어리라 3.6:1 비율 대신 글 높이에 맡긴다 */
.mv__panel.cf__banner { margin-top: 0; }
/* 마무리 배너만 — 사진이 밝은 편이라 45% 어두운 오버레이. 제목 없는 한 문장이라 글자도 22 → 26 */
.mv__panel.cf__banner::after { background-image: linear-gradient(rgba(5, 12, 26, 0.45), rgba(5, 12, 26, 0.45)); }
.cf__banner .mv__text { font-size: 26px; line-height: 1.5; font-weight: var(--weight-medium); color: #fff; } /* 독립 섹션이라 간격은 .sub-section + .sub-section(96)이 맡는다. 높이는 미션·비전 배너와 같은 3.6:1. 특이도를 올린 건 .mv__panel이 뒤에 있어서 */
/* 등장 모션 — 핵심가치 카드와 같은 연출 (선 그리기 → 주황 점등 → 1회 숨쉬기) */
.cf__step.is-revealed .ic-anim-draw { animation: qmDraw 0.8s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }
.cf__step.is-revealed .ic-anim-pop { animation: qmPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both; }
.cf__step .qm-accent-stroke { transform-origin: center; }
.cf__step.is-revealed .qm-accent-stroke.ic-anim-draw {
animation: qmDraw 0.8s cubic-bezier(0.45, 0, 0.25, 1) 0.35s both,
qmBreath 0.9s ease-in-out 1.25s 1 both;
}
.cf__step.is-revealed .qm-accent-stroke.ic-anim-pop {
animation: qmPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both,
qmBreath 0.9s ease-in-out 1.15s 1 both;
}
@media (max-width: 1280px) {
.marquee__line { font-size: 72px; }
.intro { grid-template-columns: 42% 54%; }
.intro__acronym { height: 64px; }
.intro__body { padding-top: 8px; }
.fw { --fw-side: 236px; --fw-hub: 220px; padding: var(--spacing-48) var(--spacing-32); }
.fw__flow { padding-inline: var(--spacing-16); }
.fw__side + .fw__flow { padding-right: var(--spacing-32); --fw-pr: var(--spacing-32); }
.fw__hub + .fw__flow { padding-left: var(--spacing-32); --fw-pl: var(--spacing-32); }
.fw__hub-symbol { width: 124px; }
.cf__step { padding: var(--spacing-24); }
.cf__icon { top: var(--spacing-24); right: var(--spacing-24); }
.cf__desc br { display: none; }
}
@media (max-width: 768px) {
.intro { grid-template-columns: 1fr; gap: var(--spacing-32); }
.intro__acronym { height: 48px; }
.intro__name { font-size: 22px; line-height: 30px; }
.intro__en { font-size: var(--text-label); line-height: var(--leading-label); }
.intro__body { padding-top: 0; }
.intro__body .intro__headline {
text-wrap: balance; margin-bottom: var(--spacing-20); font-size: 26px; line-height: 34px; }
.intro__body p { font-size: var(--text-body); line-height: var(--leading-body); }
/* 좁은 화면에서는 고정 줄바꿈 무력화 */
.intro__body p br { display: none; }
/* 세로 흐름: 제공 기관 → 수집 → STIS → 제공 → 이용자. DOM 순서 그대로, 화살표만 아래로 돌린다 */
.fw { --fw-hub: 200px; display: flex; flex-direction: column; align-items: stretch; padding: var(--spacing-32) var(--spacing-16); }
.fw__node { min-height: 0; padding: var(--spacing-12) var(--spacing-20); }
/* 세로 흐름 — 화살표는 아래로(회전), 길이만 짧게. 라벨은 위아래 그대로 */
/* 세로 흐름 — 꺾쇠 옆(오른쪽)에 라벨을 두 줄로: "데이터 / 수집". 라벨은 절대 배치를 풀고 나란히 */
.fw__flow, .fw__side + .fw__flow, .fw__hub + .fw__flow { flex-direction: row; align-items: center; justify-content: center; padding: var(--spacing-16) 0; margin: 0; }
.fw__flow-name { left: auto; right: calc(50% + 36px); bottom: auto; top: 50%; transform: translateY(-50%); width: min-content; text-align: right; white-space: normal; line-height: var(--leading-label); } /* 꺾쇠는 원의 축에 그대로, 라벨은 그 왼쪽에 두 줄·오른쪽 정렬 */
.fw__chevs { flex-direction: column; } /* 세로 흐름 — 꺾쇠가 아래를 본다 */
.fw__chev { margin-right: 0; margin-bottom: -24px; transform: rotate(90deg); }
.fw__chev:last-child { margin-bottom: 0; } /* 세로 120 — 72는 짧고 획이 1px 미만이라 흐렸다 */
.fw__hub { align-self: center; margin-block: var(--spacing-24); --fw-pulse: 24px; } /* 파형 확산 44 → 24, 위아래 여백 24 — 라벨·꺾쇠와 겹치지 않게 */
.fw__hub-symbol { width: 112px; }
/* 3단 → 2단 */
.cf__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf__step:last-child { grid-column: 1 / -1; } /* 3번이 반 칸에 혼자 남지 않게 두 칸 통으로 */
.cf__label { font-size: 24px; line-height: 32px; }
.cf__label--gap { margin-top: var(--spacing-48); }
.cf__caps { --cap-h: 112px; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-32) var(--spacing-16); padding: var(--spacing-32) var(--spacing-16); } /* 2×2 — 겹침·+ 없음 */
.cf__cap + .cf__cap { margin-left: 0; }
.cf__cap-plus { display: none; }
.cf__cap-pill { padding-inline: var(--spacing-24); }
.cf__cap-en { font-size: 26px; line-height: 32px; }
.cf__cap-desc { margin-top: var(--spacing-16); font-size: var(--text-system); line-height: var(--leading-system); }
.cf__banner .mv__text { font-size: 20px; }
.cf__banner .mv__text br { display: none; }
.cf__icon { width: 64px; height: 64px; }
.cf__icon .qm-svg { width: 36px; height: 36px; }
.cf__num { min-height: 64px; }
}
/* ---------- 서울연구개발지원단 소개 ---------- */
/* 상단 소개 — 가운데 정렬, 영문 한 줄이 제목 역할을 한다 */
.srd-lead { text-align: center; }
.srd-lead__en {
font-family: var(--font-accent); font-size: 46px; line-height: 1.15;
letter-spacing: var(--tracking-display); font-weight: var(--weight-bold); color: var(--brand-blue);
}
.srd-lead__text {
margin-top: var(--spacing-24);
font-size: 22px; line-height: 1.65; letter-spacing: var(--tracking-body);
font-weight: var(--weight-medium); color: var(--text-2); word-break: keep-all;
}
/* 미션·비전 — 다크 배너 두 장을 세로로 쌓는다. 영문 레이블 + 짧은 선 + 문장 */
.mv { display: grid; gap: var(--spacing-24); } /* 배너 두 장 사이 16 -> 24 */
.mv__panel {
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-20);
/* 3.6:1 — 레퍼런스 배너 비율. 3:1 원본이 담기므로 위아래 17%만 잘린다 */
aspect-ratio: 18 / 5; min-height: 300px; padding: var(--spacing-64) var(--spacing-40);
border-radius: var(--radius-card-lg); color: #fff; text-align: center;
background: #071a33; /* 사진이 뜨기 전 바탕 */
}
/* 배경 사진 — 3:1 원본이 5:1 배너에 담기므로 세로 가운데만 남는다 */
.mv__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 오버레이 — 사진이 이미 어두워 진하게 덮지 않는다. 블루 방향만 좌우로 갈라 한 쌍으로 만든다 */
.mv__panel::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(80% 130% at 50% 50%, rgba(4, 10, 22, 0.04) 0%, rgba(4, 10, 22, 0.22) 100%),
linear-gradient(rgba(5, 12, 26, 0.08), rgba(5, 12, 26, 0.08));
}
.mv__panel--mission::after { background-image:
radial-gradient(80% 130% at 50% 50%, rgba(4, 10, 22, 0.04) 0%, rgba(4, 10, 22, 0.22) 100%),
linear-gradient(120deg, rgba(0, 87, 243, 0.12) 0%, rgba(5, 12, 26, 0.08) 58%, rgba(5, 12, 26, 0.14) 100%); }
.mv__panel--vision::after { background-image:
radial-gradient(80% 130% at 50% 50%, rgba(4, 10, 22, 0.04) 0%, rgba(4, 10, 22, 0.22) 100%),
linear-gradient(240deg, rgba(0, 87, 243, 0.12) 0%, rgba(5, 12, 26, 0.08) 58%, rgba(5, 12, 26, 0.14) 100%); }
/* 글자는 오버레이 위로 */
/* 오버레이를 얇게 가져가는 대신 글자 뒤에만 넓고 흐린 그림자를 둔다.
윤곽이 지지 않도록 번짐을 크게, 농도는 낮게 */
.mv__label, .mv__text { position: relative; z-index: 1; text-shadow: 0 2px 18px rgba(2, 6, 14, 0.5); }
.mv__label {
font-family: var(--font-accent); font-size: 34px; line-height: 1.2;
letter-spacing: var(--tracking-display); font-weight: var(--weight-bold); color: #fff;
}
.mv__text { text-wrap: balance; max-width: 760px; font-size: 22px; line-height: 1.5; letter-spacing: var(--tracking-body); font-weight: var(--weight-regular); color: rgba(255, 255, 255, 0.9); word-break: keep-all; }
/* 핵심가치 4 — 연한 회색 카드. 아이콘은 오른쪽 위 흰 판, 아래로 한글 이름 / 영문 / 네 줄 설명.
가운데 정렬 페이지지만 카드 안은 왼쪽 정렬이라 네 줄이 가지런히 읽힌다 */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); list-style: none; margin: 0; padding: 0; }
.value {
display: flex; flex-direction: column;
padding: var(--spacing-32); border-radius: var(--radius-card-lg);
background: var(--surface-canvas); text-align: left;
}
.value__icon {
align-self: flex-end; display: grid; place-items: center;
width: 76px; height: 76px; border-radius: var(--radius-card);
background: var(--surface-tint); color: var(--text-1);
}
/* 42px — 28 그리드가 1.5배로 떨어져 1.8px 선이 2.7px가 된다. 메인 퀵메뉴와 같은 크기 */
.value__icon .qm-svg { width: 42px; height: 42px; display: block; }
/* 등장 모션 — 이 카드는 링크가 아니라 호버가 없다. 그래서 메인 퀵메뉴가 호버에 쓰는 연출을
등장에 그대로 옮긴다: 검은 선이 그려지고(0.8s) 끝자락에 주황이 켜진 뒤 한 번 숨 쉬고 멈춘다.
keyframes(qmDraw·qmPop·qmBreath)는 components.css의 것을 그대로 쓴다 */
.value.is-revealed .ic-anim-draw { animation: qmDraw 0.8s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }
.value.is-revealed .ic-anim-pop { animation: qmPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both; }
.value .qm-accent, .value .qm-accent-stroke { transform-origin: center; }
/* 주황은 제 동작을 마친 뒤 이어서 숨쉬기 — 한 선언에 묶어야 뒤 규칙이 앞을 덮지 않는다 */
.value.is-revealed .qm-accent-stroke.ic-anim-draw {
animation: qmDraw 0.8s cubic-bezier(0.45, 0, 0.25, 1) 0.35s both,
qmBreath 0.9s ease-in-out 1.25s 1 both;
}
.value.is-revealed .qm-accent-stroke.ic-anim-pop {
animation: qmPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both,
qmBreath 0.9s ease-in-out 1.15s 1 both;
}
.value__name { margin-top: var(--spacing-24); font-size: 24px; line-height: 32px; letter-spacing: var(--tracking-body); font-weight: var(--weight-bold); color: var(--text-1); }
.value__en { margin-top: var(--spacing-4); font-family: var(--font-accent); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--brand-blue); }
.value__text { margin: var(--spacing-24) 0 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-none); color: var(--text-3); word-break: keep-all; }
/* 전략목표 5 — 윗선 한 줄로 스텝을 끊는다. 번호(블루) / 영문 / 한글 제목 / 설명 */
/* 전략목표 5 — 카드. 이미지가 위쪽에 꽉 차고 아래 글은 전부 왼쪽 정렬 */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-16); list-style: none; margin: 0; padding: 0; }
/* 카드 판도 테두리도 두지 않는다 — 사진 자체가 경계라 선을 더하면 경계가 두 겹이 된다.
다섯 장이 각각의 상자가 아니라 하나의 순서로 읽히게 하는 목적도 있다 */
.step { display: flex; flex-direction: column; text-align: left; }
/* 이미지 — 3:2 라운드. 원본이 720x480이라 잘림 없이 그대로 담긴다 */
.step__thumb {
align-self: stretch; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
display: block; margin-bottom: var(--spacing-24);
border-radius: var(--radius-card-lg); background: var(--surface-tint);
}
/* 번호는 순서 표시로만 물러서고, 제목 + 영문(블루)은 핵심가치 카드와 같은 조합 */
.step__num { font-family: var(--font-accent); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-regular); letter-spacing: 0.02em; color: var(--text-4); }
.step__title { margin-top: var(--spacing-12); font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-body); font-weight: var(--weight-bold); color: var(--text-1); word-break: keep-all; }
.step__en { margin-top: var(--spacing-4); font-family: var(--font-accent); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--brand-blue); }
.step__desc { margin-top: var(--spacing-24); padding-top: 0; font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-none); color: var(--text-3); word-break: keep-all; }
/* 추진근거 — 흐린 회색 판 한 장으로 묶는다.
테두리 + 행 구분선이면 선이 다섯 줄이라 산만해진다. 선을 다 걷고 면으로 덩어리를 만든다.
핵심가치 카드와 같은 회색이라 페이지 안에서 재료가 통일된다 */
.basis {
list-style: none; margin: 0;
padding: var(--spacing-32) var(--spacing-40);
border-radius: var(--radius-card-lg); background: var(--surface-tint);
text-align: left;
}
.basis li { display: flex; gap: var(--spacing-12); color: var(--text-2); word-break: keep-all; }
.basis li + li { margin-top: var(--spacing-16); }
.basis li::before { content: ""; flex: none; width: 4px; height: 4px; margin-top: 11px; border-radius: 50%; background: var(--brand-blue); }
/* 이 페이지는 소개용이라 본문을 가운데로 모은다.
상단 브레드크럼·제목·2차 탭은 다른 서브페이지와 공유하는 틀이라 건드리지 않는다 */
.sub-body--center .sub-section__head { text-align: center; }
.sub-body--center .sub-section__head--left { text-align: left; }
@media (max-width: 1280px) {
.srd-lead__en { font-size: 38px; }
.srd-lead__text { font-size: 20px; }
.mv__label { font-size: 30px; }
.mv__text { font-size: 20px; }
.values { grid-template-columns: repeat(2, 1fr); }
/* 5개를 3 + 2로 접는다 */
.steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.srd-lead__en { font-size: 28px; }
.srd-lead__text { font-size: 18px; }
.srd-lead__text br { display: none; }
.mv { grid-auto-rows: 1fr; } /* 미션·비전 높이 통일 — 글 줄 수가 달라도 긴 쪽에 맞춘다 */
.mv__panel { aspect-ratio: auto; min-height: 0; padding: var(--spacing-48) var(--spacing-24); }
.mv__label { font-size: 26px; }
.mv__text { font-size: 18px; }
.mv__text br { display: none; }
.sub-section--band { padding: var(--spacing-48) calc(50vw - 50%); }
.values { gap: var(--spacing-12); } /* 768은 2×2 유지 — 1단은 카드 왼쪽이 비어 보인다 */
.value { padding: var(--spacing-24); }
.value__icon { width: 64px; height: 64px; }
.value__icon .qm-svg { width: 36px; height: 36px; }
.value__name { margin-top: var(--spacing-24); }
.value__text { margin-top: var(--spacing-16); }
.value__text br { display: none; }
.steps { grid-template-columns: 1fr; row-gap: var(--spacing-32); }
.step__thumb { aspect-ratio: 16 / 9; margin-bottom: var(--spacing-20); }
.step__desc br { display: none; }
.step__title { margin-top: var(--spacing-16); font-size: 24px; line-height: 32px; } /* 모바일은 사진이 꽉 차므로 제목도 데스크톱(22)보다 키운다 */
.basis { padding: var(--spacing-24) var(--spacing-20); }
.basis li { font-size: var(--text-label); line-height: var(--leading-label); }
.basis li + li { margin-top: var(--spacing-12); }
.basis li::before { margin-top: 9px; }
.marquee { margin-block: var(--spacing-64); }
.marquee__line { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.value.is-revealed [class^="ic-anim"], .value.is-revealed [class*=" ic-anim"],
.cf__step.is-revealed [class^="ic-anim"], .cf__step.is-revealed [class*=" ic-anim"] { animation: none; }
.marquee__track { animation: none; }
}
@media (max-width: 480px) {
.link-grid { grid-template-columns: 1fr; }
.cf__steps { grid-template-columns: 1fr; }
.cf__caps { --cap-h: 72px; grid-template-columns: 1fr; gap: var(--spacing-24); } /* 1단 세로 */
/* 세로 나열에서는 수식어와 키워드를 한 줄에 — "신뢰받는 Partner" 식. 설명은 캡슐 아래 자연 줄바꿈 */
.cf__cap-pill { flex-direction: row; align-items: baseline; gap: var(--spacing-8); padding: var(--spacing-16) var(--spacing-24); }
.cf__cap-ko { font-size: var(--text-label); line-height: var(--leading-label); }
.cf__cap-en { font-size: 24px; line-height: 30px; }
.cf__cap-desc { margin-top: var(--spacing-12); padding-inline: var(--spacing-16); }
.cf__cap-desc { text-wrap: balance; }
.cf__cap-desc .nowrap { white-space: nowrap; } /* 가운뎃점(·)에서 끊기지 않게 */ /* 짧은 문장이라 강제 줄바꿈(
) 대신 균형 줄바꿈 */
.cf__cap-desc br { display: none; }
.intro__en { font-size: var(--text-system); line-height: var(--leading-system); letter-spacing: -0.02em; } /* 375에서 영문 정식 명칭 한 줄 */
.values { grid-template-columns: 1fr; }
}
/* ============ 사업공고 목록 (서울·국가 R&D 지원사업) ============
외부 공고 모음 — 상세 없이 카드 전체가 원문(새 창)으로 나간다.
검색 박스(기간 + 검색어) → 상태 탭 → 가로형 카드 목록 → 페이지네이션 */
/* 검색 박스 — 그레이 면에 두 줄. 위: 공고기간 / 아래: 게시판 검색창과 같은 알약 입력(64) + 블랙 원형 버튼(64).
내용 폭은 게시판 검색창에 맞춰 가운데 모은다 — 면 전체로 늘리면 입력칸만 길어져 다른 게시판과 달라 보인다 */
.biz-filter {
display: grid; grid-template-columns: auto minmax(0, 720px); justify-content: center; align-items: center;
column-gap: var(--spacing-32); row-gap: var(--spacing-16);
padding: var(--spacing-40);
border-radius: var(--radius-card); background: var(--surface-tint);
}
.biz-filter__label { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-bold); color: var(--text-1); white-space: nowrap; }
.biz-filter__range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--spacing-12); }
.biz-filter__tilde { color: var(--text-3); }
.biz-filter__input {
width: 100%; min-width: 0; height: 64px; padding: 0 var(--spacing-32);
border: 1px solid var(--border-input); border-radius: var(--radius-pill);
background: var(--surface-canvas);
font-size: var(--text-body); color: var(--text-1);
transition: border-color var(--transition-fast);
}
.biz-filter__input:focus { outline: none; border-color: var(--text-1); } /* 게시판 검색창과 같은 포커스 — 선만 진하게 */
.biz-filter__input:focus-visible { border-color: var(--text-1); }
.biz-filter__input::placeholder { color: var(--text-4); } /* 흰 입력칸 위 4.54:1 */
.biz-filter__input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.biz-filter__date { padding-right: var(--spacing-24); font-family: var(--font-accent); font-variant-numeric: tabular-nums; }
/* 달력 아이콘 — 브라우저 기본 대신 Phosphor calendar-blank(regular). 누르는 자리는 그대로 */
.biz-filter__date::-webkit-calendar-picker-indicator {
width: 20px; height: 20px; margin: 0; cursor: pointer; opacity: 0.6;
background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22%23090909%22%3E%3Cpath d=%22M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.biz-filter__date::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.biz-filter__search { display: flex; gap: var(--spacing-12); }
/* 검색 기준 선택 — 게시판 검색의 .board-scope 를 그대로 쓰되 이 박스의 입력칸 높이·둥근 모서리에 맞춘다 (국가 R&D 공고에만 있음) */
.biz-filter__search .board-scope { width: 148px; }
.biz-filter__search .board-scope__btn { height: 64px; padding: 0 var(--spacing-20) 0 var(--spacing-24); border-radius: var(--radius-pill); background: var(--surface-canvas); font-size: var(--text-body); }
.biz-filter__search .board-scope__list { border-radius: var(--radius-md); }
.biz-filter__keyword { position: relative; flex: 1 1 auto; min-width: 0; }
.biz-filter__keyword .biz-filter__input { padding-right: 72px; } /* 초기화 아이콘 자리 */
/* 초기화 — 입력칸 오른쪽 끝 아이콘. 기간·검색어·상태 탭까지 폼 전체를 되돌린다 */
.biz-filter__reset {
position: absolute; top: 50%; right: var(--spacing-12); transform: translateY(-50%);
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
color: var(--text-3); cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.biz-filter__reset svg { width: 20px; height: 20px; }
.biz-filter__reset:hover { background: var(--surface-tint); color: var(--text-1); }
.biz-filter__submit {
flex: none; display: inline-grid; place-items: center;
width: 64px; height: 64px; border-radius: 50%;
background: var(--surface-dark); color: #fff; cursor: pointer;
transition: background var(--transition-fast);
} /* 게시판 검색 버튼과 동일 — 블랙, 호버 블루 */
.biz-filter__submit:hover { background: var(--brand-blue); }
.biz-filter__submit svg { width: 23px; height: 23px; }
/* 목록 바 — 다른 게시판의 .board-bar(좌 건수 · 아래 2px 라인)를 그대로 쓰고, 우측 검색창 자리에 접수 상태 라디오 */
.biz-bar { align-items: center; margin-top: var(--spacing-64); padding-bottom: var(--spacing-24); margin-bottom: 0; } /* 우측이 64 검색창이 아니라 26 라디오 줄이라 라인까지 여백을 60 → 24로 */
.biz-bar .board-bar__count { padding-bottom: 0; }
/* 접수 상태 라디오 — 원형 22px. 선택은 블루 두꺼운 테(가운데 흰 점처럼 보인다) + 글자 진하게 */
.status-radios { display: flex; flex-wrap: wrap; column-gap: var(--spacing-32); row-gap: var(--spacing-12); min-width: 0; margin: 0; padding: 0; border: 0; }
.status-radios__item { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.status-radios__item input {
flex: none; appearance: none; -webkit-appearance: none; margin: 0;
width: 22px; height: 22px; border-radius: 50%;
border: 1.5px solid var(--border-input); background: var(--surface-canvas);
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.status-radios__item span { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--text-3); white-space: nowrap; transition: color var(--transition-fast); }
.status-radios__item:hover input { border-color: var(--brand-blue); }
.status-radios__item:hover span { color: var(--text-1); }
.status-radios__item input:checked { border: 2px solid var(--brand-blue); background: var(--brand-blue); box-shadow: inset 0 0 0 4px var(--surface-canvas); } /* 블루 외곽선 + 흰 틈 4 + 가운데 블루 점 10 */
.status-radios__item input:checked + span { color: var(--text-1); font-weight: var(--weight-bold); }
.status-radios__item input:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* 상태 라디오는 바꾸는 즉시 검색을 다시 보낸다(sub.js) — 화면에서 줄을 숨기는 규칙은 두지 않는다(2026-09-22).
예전 규칙은 지금 쪽의 줄만 가려 건수 · 쪽 번호가 전체 그대로 남았다 */
/* 썸네일 카드 그리드 — 모바일 카드(정사각 썸네일 → 공고기관 → 제목 → 배지 + 접수기간)를 그대로 넓은 화면에 늘어놓는다.
PC(1181 이상) 4열 × 3줄 = 12장/쪽 · 769~1180 3열(발간물과 같은 열 수) · 768 이하는 아래 모바일 규칙.
카드 사이 간격은 발간물 표지 그리드와 같다(64/48, 1280 이하 48/32). 카드 전체가 공고 링크(새 창) */
.biz-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-64) var(--spacing-48); margin: 60px 0 0; padding: 0; list-style: none; } /* 목록 바 2px 선 → 카드 60(모바일 32) — 발간물 · 정책동향 · 서울시동향 카드 목록과 같다. 표 목록(국가 R&D · 기술동향)만 머리가 선에 붙는다 */
.biz-card { display: flex; min-width: 0; }
.biz-card__link { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.biz-card__link:focus-visible { outline-offset: 6px; border-radius: var(--radius-md); }
/* 썸네일 — 정사각 칸을 꽉 채우고 가운데 기준으로 자른다. 세로형 포스터·가로형 어떤 비율이 와도 칸 크기가 같다.
호버 확대는 칸(overflow: hidden) 안에서만 — 둥근 모서리 밖으로 넘치지 않는다 */
.biz-card__thumb {
display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
border-radius: var(--radius-md); background: var(--surface-tint);
}
.biz-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s var(--ease-out-soft); }
/* 이미지 없음 — 같은 크기의 그레이 칸 가운데 STIS 기호. 칸 크기가 같아 카드 줄이 흔들리지 않는다 */
.biz-card__thumb--empty img { width: 48%; height: auto; object-fit: contain; }
/* 썸네일 → 공고기관 32(발간물 타일 → 분류와 같은 값) · 기관 → 제목 8 · 제목 → 배지 줄 16(모바일도 같다) */
.biz-card__body { display: flex; flex-direction: column; align-items: stretch; min-width: 0; margin-top: var(--spacing-32); }
/* 상태 배지 — 메인 패널의 정사각(52) 배지와 같은 색·라운드(6), 목록은 가로로 긴 라운드 사각 */
.biz-card .badge-sq, .board-list--biz .badge-sq, .biz-detail .badge-sq { width: auto; height: 32px; padding: 0 var(--spacing-12); border-radius: var(--radius-sm); font-weight: var(--weight-semibold); } /* 목록 배지는 600 — 700은 알약에서 무거웠다 */
/* 공고기관 — 한 줄 말줄임. 두 줄로 넘어가면 옆 카드와 제목 · 배지 줄 높이가 어긋난다 */
.biz-card__org { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--brand-blue); }
/* 제목 — 두 줄 자리를 늘 잡아(60) 한 줄 제목 카드도 배지 줄이 옆 카드와 같은 높이에 선다. 넘치면 두 줄 말줄임.
외부 링크 표시는 국가 R&D 목록처럼 제목 끝에 작게 — 말줄임되는 글자 밖 한 자리라 "…" 으로 잘려도 늘 보인다.
한 줄이면 글자 바로 뒤, 두 줄이면 둘째 줄 끝 높이에 붙는다 */
.biz-card__title { min-height: 60px; margin-top: var(--spacing-8); }
.biz-card__name { display: inline-flex; align-items: flex-end; gap: 6px; max-width: 100%; vertical-align: top; }
.biz-card__text {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0;
font-size: 20px; line-height: 30px; letter-spacing: var(--tracking-body); font-weight: var(--weight-semibold); color: var(--text-1); word-break: keep-all;
text-underline-offset: 3px; transition: color var(--transition-fast);
}
.biz-card__ext { display: inline-flex; align-items: center; flex: none; height: 30px; color: var(--text-4); transition: color var(--transition-fast); }
.biz-card__ext svg { width: 17px; height: 17px; }
/* 배지 + 접수기간 — 카드가 좁으면 접수기간만 다음 줄로 */
.biz-card__meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin-top: var(--spacing-16); font-size: var(--text-body); line-height: var(--leading-body); }
.biz-card__meta .badge-sq { flex: none; margin-right: var(--spacing-12); }
.biz-card__dates { white-space: nowrap; font-family: var(--font-accent); font-variant-numeric: tabular-nums; font-weight: var(--weight-regular); color: var(--text-1); }
/* 호버 · 키보드 포커스 — 배경은 바꾸지 않고 썸네일 확대 + 제목 블루 · 밑줄(발간물 · 목록 행과 같은 문법) */
.biz-card__link:hover .biz-card__thumb img, .biz-card__link:focus-visible .biz-card__thumb img { transform: scale(1.04); }
.biz-card__link:hover .biz-card__text, .biz-card__link:focus-visible .biz-card__text { color: var(--brand-blue); text-decoration: underline; }
.biz-card__link:hover .biz-card__ext, .biz-card__link:focus-visible .biz-card__ext { color: var(--brand-blue); }
/* 마감 — 배지 글자로 이미 알리고, 제목·썸네일만 한 톤 가라앉혀 접수 가능한 공고가 먼저 읽히게 */
.biz-card[data-status="closed"] .biz-card__text { color: var(--text-3); }
.biz-card[data-status="closed"] .biz-card__link:hover .biz-card__text, .biz-card[data-status="closed"] .biz-card__link:focus-visible .biz-card__text { color: var(--brand-blue); }
.biz-card[data-status="closed"] .biz-card__thumb img { opacity: 0.55; }
/* ---------- 국가 R&D 목록 — 기술동향 표(.board-list--tech)를 그대로 쓰고 열만 바꾼다 ----------
No. 80 · 공고기관 240 · 배지 64 · 사업명 나머지 · 접수기간 216. 머리글 "사업명"은 배지·사업명 두 칸에 걸친다 */
.board-list--biz { margin-top: 0; } /* 목록 바(.biz-bar)에 아래 여백이 없어 기술동향의 −60 당김이 필요 없다 — 머리가 2px 라인에 바로 붙는다 */
/* No. · 배지 · 사업명 · 부처 · 공고기관 · 접수기간 — 사업명이 남는 폭을 모두 쓰고, 공고기관은 기관명이 길어 부처보다 한 칸 넓다 */
.board-list--biz .board-list__head, .board-list--biz .board-list__row { grid-template-columns: 80px 64px minmax(0, 1fr) 160px 200px 216px; }
.board-list--biz .board-list__head > .board-list__title { grid-column: span 2; } /* 머리에는 배지 칸이 없다 — 사업명이 배지 자리까지 */
.board-list--biz .board-list__status { display: flex; }
/* 기관 두 칸 — 같은 조형(16/500, 가운데). 말줄임 대신 두 줄까지 줄바꿈해 기관명을 온전히 보여 준다 */
/* 행에만 — 머리글은 .board-list--tech .board-list__head > * 의 18/500 블랙을 그대로 쓴다(부처 칸만 작아지지 않게) */
.board-list--biz .board-list__row .board-list__ministry { font-size: var(--text-label); font-weight: var(--weight-medium); text-align: center; }
/* 부처·공고기관 값은 접수기간과 같은 보조색 — 사업명(제목)만 검정으로 남겨 시선을 모은다 */
.board-list--biz .board-list__row .board-list__ministry, .board-list--biz .board-list__row .board-list__org { color: var(--text-3); }
.board-list--biz .board-list__ministry, .board-list--biz .board-list__org {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
/* 칸이 좁아 기관 이름이 한 낱말로 붙어 있는 경우가 많다. keep-all 이면 "(재)" 뒤에서만 줄이 바뀌어
첫 줄이 거의 비고 둘째 줄에서 잘렸다 → 두 줄을 꽉 채우도록 어디서든 끊는다 */
white-space: normal; word-break: break-all; padding-right: 0;
}
.board-list--biz .board-list__text { white-space: normal; word-break: keep-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* 사업명도 한 줄 말줄임 대신 두 줄 */
/* 공고명만 17/30 — 기술동향(18/28)보다 글자는 1 작고 줄 사이는 2 넓다. 두 줄 제목이 많아 줄이 붙어 읽혔다.
행 높이는 min-height 라 두 줄이면 알아서 늘고, 한 줄 행은 지금 높이 그대로다 */
.board-list--biz .board-list__text { font-size: 17px; line-height: 30px; }
/* 아이콘은 말줄임되는 글자 안이 아니라 제목 칸의 한 자리로 둔다 — 제목이 "…"으로 잘려도 늘 보인다.
flex-end 라서 두 줄이면 마지막 줄 끝에, 한 줄이면 글자 바로 뒤에 붙고, 높이를 줄 높이(28)에 맞춰 세로 가운데가 된다 */
.board-list--biz .board-list__ext { height: 30px; } /* 제목 줄 높이와 같게 — 마지막 줄 글자와 세로 가운데 */
.board-list--biz .board-list__title:hover .board-list__ext { color: var(--brand-blue); }
.board-list--biz .board-list__title { align-items: center; } /* 아이콘은 제목 블록의 세로 가운데 — 한 줄이든 두 줄이든 제목 한가운데에 선다 */
.board-list--biz .board-list__row .board-list__title { margin-left: -12px; } /* 배지 → 사업명 간격은 열 간격 24가 아니라 12 */
.board-list--biz .badge-sq { min-width: 64px; height: 30px; } /* 폭 고정 — "마감"·"D-7"·"접수중" 어느 배지가 와도 사업명 시작점이 같다 */
.board-list--biz .board-list__date { white-space: nowrap; }
/* 공고명 뒤 외부 링크 아이콘 — 상세 화면이 없어 누르면 바깥으로 나간다는 표시.
글자 사이 공백 없이 붙여 두어 제목이 두 줄이 되어도 아이콘만 다음 줄로 떨어지지 않는다 */
.board-list__ext { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--text-4); }
.board-list__ext svg { width: 0.85em; height: 0.85em; }
.board-list--biz .board-list__title:hover .board-list__ext { color: var(--brand-blue); }
/* 좁은 화면에서만 쓰는 한 줄 메타(부처 · 공고기관 · 접수기간) */
.board-list__meta { display: none; }
/* 기술동향 상세의 "원문 보기" — 다운로드와 같은 모양·크기에 테두리만 연한 회색.
글자·아이콘 색은 그대로 둬 비활성처럼 보이지 않게 한다.
호버는 다른 버튼과 똑같이 블루로 덮인다(테두리를 따로 정하지 않아야 줄이 보이지 않는다) */
.pub-detail__btn--link { border-color: var(--border-divider); }
.biz-tbd { font-family: var(--font-base); } /* 접수기간 미정 "추후 공지" — 한글이라 본문 서체 */
.board-list--biz .board-list__row[data-status="closed"] .board-list__text { color: var(--text-3); }
.board-list--biz .board-list__row[data-status="closed"] .board-list__title:hover .board-list__text { color: var(--brand-blue); }
/* ---------- 국가 R&D 상세 — 기술동향 상세(.pub-detail · .pub-spec)를 그대로 쓴다 ----------
좌 상태 배지 + 사업명 / 우 바로가기 버튼(제목 마지막 줄 높이에 맞춤) → 공고 정보 표 → 목록 */
.biz-detail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-48); padding-top: var(--spacing-12); }
.biz-detail__heading { min-width: 0; }
.biz-detail .badge-sq { height: 36px; padding: 0 var(--spacing-16); font-size: var(--text-body); }
.biz-detail .pub-detail__title { margin-top: var(--spacing-20); }
.biz-detail__go { flex: none; }
.biz-detail__content > * + * { margin-top: var(--spacing-12); }
.biz-detail__content strong { margin-right: var(--spacing-8); font-weight: var(--weight-semibold); color: var(--text-1); }
.biz-detail__content ul { display: grid; gap: 4px; margin-top: 4px; }
.biz-detail__content li { position: relative; padding-left: var(--spacing-16); }
.biz-detail__content li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-4); } /* 점 — 줄높이 26의 가운데 */
@media (max-width: 1280px) {
.board-list--biz .board-list__head, .board-list--biz .board-list__row { grid-template-columns: 64px minmax(0, 1fr) 140px 170px 190px; }
.board-list--biz .board-list__row .board-list__title { margin-left: -4px; } /* 이 폭의 열 간격은 16 — 배지 → 사업명 12 유지 */ /* 번호 칸을 접는 폭 — 기술동향과 같이 열을 다시 짠다 */
.biz-list { gap: var(--spacing-48) var(--spacing-32); } /* 발간물 그리드와 같은 간격 */
}
/* 769~1180 — 3열(발간물과 같은 열 수) */
@media (max-width: 1180px) {
/* 정책동향 상세 — 슬라이드(최대 640, 가운데)가 위 · 글이 아래로 쌓인다(발간물 모바일과 같은 차례). 이 폭에서는 두 칸이면 슬라이드가 너무 작아진다 */
.pub-detail--policy .pub-detail__hero { flex-direction: column-reverse; align-items: stretch; gap: var(--spacing-64); }
.pub-detail--policy .pub-detail__info { padding-top: 0; }
.pol-visual { width: 100%; max-width: 640px; margin: 0 auto; }
.biz-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
/* 라벨은 입력 위로, 높이는 게시판 모바일 검색창과 같은 52 */
.biz-filter { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-8); padding: var(--spacing-20); }
.biz-filter__range + .biz-filter__label { margin-top: var(--spacing-12); }
.biz-filter__range { gap: var(--spacing-8); }
.biz-filter__input { height: 52px; padding: 0 var(--spacing-20); }
.biz-filter__date { padding: 0 var(--spacing-12) 0 var(--spacing-16); }
.biz-filter__keyword .biz-filter__input { padding-right: 56px; }
.biz-filter__reset { right: 6px; }
.biz-filter__search { gap: var(--spacing-8); flex-wrap: wrap; } /* 좁은 화면에서는 기준 선택이 입력칸 위 한 줄로 */
.biz-filter__search .board-scope { width: 100%; flex: 1 0 100%; }
.biz-filter__search .board-scope__btn { height: 52px; padding: 0 var(--spacing-16); justify-content: space-between; }
.biz-filter__search .biz-filter__keyword { flex: 1 1 0; min-width: 0; }
.biz-filter__search .biz-filter__submit { flex: none; }
.biz-filter__submit { width: 52px; height: 52px; }
.biz-bar { align-items: stretch; margin-top: var(--spacing-40); }
.status-radios { column-gap: var(--spacing-20); }
/* 모바일 — 예전 카드 그대로: 2열(640 이하 1열), 카드 사이 간격 대신 카드마다 아래 헤어라인 + 안쪽 여백 20 · 12 · 24.
카드 안 차례 · 글자 크기 · 간격은 넓은 화면과 같다 */
.biz-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-16); margin-top: var(--spacing-32); } /* 선 → 카드 32 — 모바일 발간물과 같다 */
.biz-card { border-bottom: 1px solid var(--border-hairline); }
.biz-card__link { padding: var(--spacing-20) var(--spacing-12) var(--spacing-24); }
.biz-card__link:focus-visible { outline-offset: -2px; border-radius: 0; } /* 카드 사이 간격이 없어 포커스 테는 안쪽에 */
/* 국가 R&D 표 — 기술동향처럼 카드형으로 접는다. 1줄 배지 + 공고기관 · 2줄 공고명(온전한 폭으로 줄바꿈) · 3줄 접수기간
배지를 공고명 앞에 두면 둘째 줄이 배지 밑으로 파고들어 들쭉날쭉했다 */
/* 부처·공고기관 칸은 이 폭에서 자리가 없어 뭉개지므로, 접수기간 자리에 항목 이름과 함께 한 줄에 하나씩 보여 준다 */
.board-list--biz .board-list__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "title" "date"; }
.board-list--biz .board-list__status { grid-area: status; }
/* 제목 — 아이콘은 넓은 화면과 같이 제목 블록의 세로 가운데 */
.board-list--biz .board-list__title { display: flex; align-items: center; }
.board-list--biz .board-list__ministry, .board-list--biz .board-list__org { display: none; }
/* 부처 · 공고기관 · 접수기간을 한 줄에 하나씩. 이름 칸을 고정 폭으로 두어 세 줄의 값이 같은 자리에서 시작한다 */
.board-list--biz .board-list__date { white-space: normal; font-size: 0; line-height: 0; text-align: left; } /* 넓은 화면용 날짜 글자는 자리까지 없앤다 */
.board-list--biz .board-list__meta { display: block; font-size: var(--text-label); line-height: var(--leading-label); }
.board-list--biz .board-list__meta-row { display: flex; gap: var(--spacing-8); }
.board-list--biz .board-list__meta-key { flex: 0 0 68px; color: var(--text-4); }
.board-list--biz .board-list__meta-val { min-width: 0; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 제목과 그 아래 항목 사이는 배지↔제목과 같은 8 — 한 공고가 한 덩어리로 보인다.
공고와 공고 사이 간격(행 위아래 여백)은 건드리지 않는다 */
.board-list--biz .board-list__row .board-list__title { margin-left: 0; }
.board-list--biz .badge-sq { min-width: 0; height: 26px; padding: 0 10px; }
.biz-detail__head { flex-direction: column; align-items: stretch; gap: var(--spacing-32); padding-top: 0; }
.biz-detail .badge-sq { height: 32px; padding: 0 var(--spacing-12); font-size: var(--text-system); }
.biz-detail .pub-detail__title { margin-top: var(--spacing-16); }
.biz-detail__go { width: 100%; }
}
/* 2열은 641 이상에서만 — 그보다 좁으면 카드 폭이 250 아래로 줄어 날짜가 넘치고 제목이 전부 잘린다 */
@media (max-width: 640px) {
.biz-list { grid-template-columns: minmax(0, 1fr); }
.biz-card__title { min-height: 0; } /* 1열은 옆 카드가 없어 두 줄 자리를 잡아 둘 까닭이 없다 — 예전 모바일처럼 한 줄 제목은 한 줄만 */
}
@media (max-width: 480px) {
/* 라디오 다섯(전체 · 접수예정 · 접수중 · 마감임박 · 마감)이 390 에서 한 줄에 — 글자 한 단계(17 → 16) · 동그라미 22 → 20 · 동그라미 ↔ 글자 4,
남는 폭은 항목 사이에 고르게(최소 4). 375 · 360 은 16 에서도 폭이 모자라 두 줄로 접힌다(2026-09-22) */
.status-radios { column-gap: 4px; justify-content: space-between; }
.status-radios__item { gap: 4px; }
.status-radios__item input { width: 20px; height: 20px; }
.status-radios__item span { font-size: var(--text-label); line-height: var(--leading-label); }
}
@media (max-width: 389px) {
/* 375 · 360 — 다섯이 한 줄에 들어가지 않으므로 3개 + 2개로 칸을 맞춘 두 줄(격자). 글자 · 동그라미는 넓은 화면과 같게(17 · 22),
칸 사이 24(349 이하 12). "마감" 하나만 아래로 떨어지던 문제(2026-09-22) */
.status-radios { display: grid; grid-template-columns: repeat(3, max-content); column-gap: var(--spacing-24); row-gap: var(--spacing-12); justify-content: start; }
.status-radios__item { gap: 10px; }
.status-radios__item input { width: 22px; height: 22px; }
.status-radios__item span { font-size: var(--text-body); line-height: var(--leading-body); }
}
@media (max-width: 349px) {
.status-radios { column-gap: var(--spacing-12); }
}
@media (prefers-reduced-motion: reduce) {
/* 움직임 줄이기 — 썸네일 확대만 뺀다. 제목 블루 · 밑줄은 그대로 */
.biz-card__thumb img { transition: none; }
.biz-card__link:hover .biz-card__thumb img, .biz-card__link:focus-visible .biz-card__thumb img { transform: none; }
}
@media print {
.biz-filter, .status-radios { display: none !important; }
.biz-board .biz-card { display: block !important; break-inside: avoid; } /* 탭 필터와 상관없이 전부 인쇄 */
.biz-board .board-list__row[data-status] { display: grid !important; }
.biz-detail__go { display: none !important; }
.badge-sq { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ============ 성과정보 (논문·특허·기술료·사업화) ============
연도 조회(.biz-filter 재사용) → 성과 카테고리 탭(언더라인형) → 탭 제목 → 차트(ApexCharts, /js/perf.js) → 표 + 주석(헤어라인 박스) */
.perf-filter { grid-template-columns: auto minmax(0, 560px); } /* 입력이 연도 2칸뿐이라 사업공고(720)보다 좁게 */
.perf-filter__range { flex: 1 1 auto; min-width: 0; }
.perf-filter__select {
appearance: none; -webkit-appearance: none; cursor: pointer;
padding-right: 56px;
font-family: var(--font-accent); font-variant-numeric: tabular-nums;
/* Phosphor caret-down(regular) — 텍스트 보조색 */
background: var(--surface-canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235c5c5c'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 24px center / 18px 18px;
}
.perf-filter__select:hover { border-color: var(--text-3); }
/* 성과 카테고리 탭 — 1차 탭(채운 블루 알약)과 조형을 달리한 언더라인형.
기본: 회색 글자만 / 선택: 블루 글자·굵게 + 아래 2px 블루 선 + 옅은 블루 면(터치에서도 선택 영역이 또렷하게). 항목 사이 세로선 없음 */
.perf-tabs { position: relative; margin-top: var(--spacing-64); border-bottom: 1px solid var(--border-hairline); }
/* 탭이 다 들어가면 가운데, 넘치면 왼쪽부터 — safe가 없으면 center로만 동작한다(그 경우 넘침은 스크롤로 해결) */
.perf-tabs__list { display: flex; justify-content: center; justify-content: safe center; gap: var(--spacing-4); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.perf-tabs__list::-webkit-scrollbar { display: none; }
.perf-tab {
position: relative; flex: none;
padding: var(--spacing-16) var(--spacing-24);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: 18px; line-height: 28px; letter-spacing: var(--tracking-body); font-weight: var(--weight-medium);
color: var(--text-3); white-space: nowrap; cursor: pointer;
transition: color var(--transition-fast), background var(--transition-fast);
}
.perf-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; transition: background var(--transition-fast); }
.perf-tab:hover { color: var(--text-1); }
.perf-tab[aria-selected="true"] { color: var(--brand-blue); font-weight: var(--weight-bold); } /* 면 없이 글자색·굵기와 아래 2px 선만으로 — 언더라인형 탭의 조형을 흐리지 않는다 */
.perf-tab[aria-selected="true"]::after { background: var(--brand-blue); }
.perf-tab:focus-visible { outline-offset: -2px; }
/* 앞뒤로 탭이 더 있을 때만 끝에 흰 페이드 — 스크롤할 수 있다는 신호 */
.perf-tabs::before, .perf-tabs::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 56px; pointer-events: none; opacity: 0; transition: opacity var(--transition-fast); }
.perf-tabs::after { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface-canvas) 85%); }
.perf-tabs::before { left: 0; z-index: 1; background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--surface-canvas) 85%); }
.perf-tabs.has-more::after, .perf-tabs.has-prev::before { opacity: 1; }
/* 탭 제목 → 차트(카드) → 통계표(박스 없이 표 윗선 + 주석) */
.perf-panel { margin-top: 72px; } /* 탭 → 제목 — 제목이 탭에 붙어 끼인 글처럼 보이지 않게 넉넉히 */
.perf-panel:focus { outline: none; }
.perf-panel__title { font-size: 40px; line-height: 50px; letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--text-1); } /* 탭 제목 — 페이지 제목(56)과 카드 제목(20) 사이. 탭을 고른 결과이자 아래 차트·표를 묶는 머리라 한 급 키웠다 */
.perf-box { margin-top: var(--spacing-64); } /* 차트 → 통계표. 제목·테두리 없이 단위·엑셀 줄과 표 윗선(검정)이 영역을 연다 */
.perf-box__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-16); padding-bottom: var(--spacing-16); } /* 엑셀 버튼 → 표 16 — 12는 버튼이 표 머리에 붙어 보였다 */
.perf-box__unit { font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-3); } /* 단위 — 15px 허용 자리 */
.perf-excel { flex: none; height: 44px; padding: 0 var(--spacing-16) 0 var(--spacing-20); border: 1px solid var(--text-1); border-radius: var(--radius-sm); font-size: var(--text-label); }
.perf-excel svg { width: 18px; height: 18px; color: var(--text-3); transition: color var(--transition-fast); }
.perf-excel:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; } /* 상세 버튼과 같은 블루 반전 */
.perf-excel:hover svg { color: rgba(255, 255, 255, 0.85); }
.perf-table-wrap { overflow-x: auto; }
.perf-table-wrap:focus-visible { outline-offset: 2px; }
.perf-table { width: 100%; min-width: 640px; border-collapse: collapse; border-top: 1px solid var(--text-1); font-size: var(--text-body); line-height: var(--leading-body); }
.perf-table th, .perf-table td { padding: var(--spacing-20) var(--spacing-24); border-bottom: 1px solid var(--border-hairline); white-space: nowrap; vertical-align: middle; text-align: center; } /* 정렬은 한 규칙 — 모든 칸 가운데(항목명·구분·연도·지표·숫자). 숫자는 tabular-nums로 자릿수 폭을 맞춘다 */
/* 정렬 기준 — 가로: 이름·구분 왼쪽 / 숫자와 단일 지표 연도 헤더 오른쪽 / 두 지표 헤더(연도·지표) 가운데. 세로: 가운데, 세 줄 묶음 항목명만 위(첫 줄과 같은 높이) */
.perf-table thead th { border-bottom-color: var(--text-1); font-weight: var(--weight-semibold); color: var(--text-1); }
/* 왼쪽 항목 열(좌상단 칸·국내·해외 칸·항목명·구분) — 아주 옅은 면(#fafaf9)으로 값 영역과 나눈다. 합계 줄(surface-tint)보다 한 톤 옅어 계·합계와 구분된다 */
.perf-table { --perf-label-bg: #fafaf9; }
.perf-table thead tr:first-child th:first-child, .perf-table thead .perf-table__part, .perf-table tbody th { background: var(--perf-label-bg); }
.perf-table tbody th { min-width: 160px; font-weight: var(--weight-medium); color: var(--text-1); white-space: normal; word-break: keep-all; }
.perf-table:not(.perf-table--dual) thead th:first-child { width: 28%; } /* 지표가 하나인 표 — 항목 열이 표의 절반을 차지하지 않게 폭을 고정(옅은 면이 넓어 보이던 것) */
.perf-table td { font-family: var(--font-accent); font-variant-numeric: tabular-nums; color: var(--text-2); }
.perf-table tfoot > tr > * { background: var(--surface-tint); font-weight: var(--weight-medium); color: var(--text-1); } /* 합계 줄 — 옅은 면이 있어 굵기는 계 줄과 같은 500이면 충분. 600·700은 표 안에서 너무 튀었다 */
/* 참고사항 — 소제목은 박스 바깥 왼쪽 위. 표와는 48로 크게 떼고 박스와는 16으로 붙여, 소제목+박스가 한 묶음으로 읽힌다 */
.perf-foot { margin-top: var(--spacing-48); }
.perf-foot__title { margin-bottom: var(--spacing-16); font-size: 20px; line-height: 28px; letter-spacing: var(--tracking-body); font-weight: var(--weight-bold); color: var(--text-1); } /* 차트 카드 제목과 같은 20/28 — 표·차트·참고사항이 같은 급의 소제목으로 묶인다 */
.perf-notes { padding: var(--spacing-24) var(--spacing-32); border-radius: var(--radius-md); background: var(--surface-tint); }
.perf-notes__list { display: grid; gap: 6px; }
.perf-notes__list li { position: relative; padding-left: var(--spacing-16); font-size: var(--text-label); line-height: var(--leading-label); color: var(--text-2); word-break: keep-all; }
.perf-notes__list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.perf-notes__source { display: flex; flex-wrap: wrap; column-gap: var(--spacing-12); row-gap: 2px; margin-top: var(--spacing-16); padding-top: var(--spacing-16); border-top: 1px solid var(--border-divider); font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-3); }
.perf-notes__label { flex: none; font-weight: var(--weight-medium); color: var(--text-2); } /* 출처 라벨 — 쌍점 대신 굵기 500·한 톤 진하게·간격 12로 구분 */
/* 차트 — 카드마다 제목·단위(좌상단, 가로). 전체 탭은 2개 나란히, 나머지는 1개 */
.perf-panel .stat-cards { margin-top: 56px; } /* 제목 → 카드 → 차트 — 카드 위아래 여백을 같게 */
/* 성과정보 전체 탭 요약 카드 — 카드(요약)와 차트를 따로 읽히게 두 영역 사이를 제목 위 여백만큼 넓게 띄운다.
토글이 있으면 토글부터가 차트 영역이라 그 자리에 여백을 준다(토글 → 차트는 아래 .perf-charts-bar 규칙의 16).
이 두 줄은 아래 .perf-charts-bar 규칙보다 먼저 와야 한다 — 같은 순위라 뒤에 오는 쪽이 이긴다 */
.perf-summary:not([hidden]) ~ .perf-charts-bar { margin-top: 56px; } /* KPI 아래 토글 줄(특허·기술료 전체) — KPI → 차트 카드 간격(56)과 같게, 토글 줄 → 차트는 20 */
.perf-summary:not([hidden]) ~ .perf-charts { margin-top: 56px; }
.perf-summary[hidden] { display: none; }
@media (max-width: 768px) {
.perf-summary:not([hidden]) ~ .perf-charts-bar, .perf-summary:not([hidden]) ~ .perf-charts { margin-top: var(--spacing-32); } /* 컨트롤 줄 뒤 차트는 아래 .perf-charts-bar 규칙(20)이 이긴다 */
}
.perf-charts { display: grid; gap: var(--spacing-24); margin-top: 56px; } /* 제목 → 차트 — 제목 위아래 여백을 비슷하게 둬 제목이 한 덩이로 떠 보이게 */
.perf-charts--bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.perf-chart { min-width: 0; padding: var(--spacing-32) var(--spacing-32) var(--spacing-24); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); }
.perf-chart__head { margin-bottom: var(--spacing-16); }
.perf-chart__title { font-size: 20px; line-height: 28px; letter-spacing: var(--tracking-body); font-weight: var(--weight-bold); color: var(--text-1); }
.perf-chart__sub { margin-top: 2px; font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-3); }
.perf-chart__heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--spacing-8); min-width: 0; }
.perf-chart__unit { font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-3); white-space: nowrap; } /* 제목 옆 괄호 단위 — 표의 (단위: 건)과 같은 표기 */
/* ApexCharts 기본 툴팁을 살리고 글꼴·숫자만 맞춘다 */
/* 종합현황 선 그래프 — 세 번째 계열(특허 등록)만 마름모. ApexCharts에 마름모가 없어 사각형 마커를 45° 돌린다 */
.perf-chart--line .apexcharts-series:nth-of-type(3) .apexcharts-marker,
.perf-chart--line .apexcharts-series:nth-of-type(6) .apexcharts-marker { /* 6번째(세부 탭 꺾은선의 여섯째 선)도 마름모 */
transform-box: fill-box; transform-origin: center; transform: rotate(45deg);
}
/* 범례는 안쪽 도형에 ApexCharts가 인라인 transform을 걸어 둬 바깥 을 돌린다.
돌리면 상자가 대각선만큼 커지며 점이 글자보다 위로 뜨므로 그만큼 내려 글자 가운데에 맞춘다 */
.perf-chart--line .apexcharts-legend-series:nth-of-type(3) .apexcharts-legend-marker,
.perf-chart--line .apexcharts-legend-series:nth-of-type(6) .apexcharts-legend-marker {
position: relative; top: 2.5px; transform-origin: center; transform: rotate(45deg);
}
/* 범례 도형과 글자 사이 — ApexCharts는 도형 상자 바로 뒤에 글자를 붙인다.
도형마다 상자 안에서 차지하는 모양이 달라(원은 가장자리가 물러나고, 45° 돌린 마름모는 상자 밖으로 2px 나온다)
그냥 두면 간격이 제각각으로 보인다 — 도형 상자에 오른쪽 여백을 줘 글자를 밀어낸다(마름모만 2px 더).
글자 쪽 padding으로는 안 된다 — ApexCharts가 글자 자리를 따로 잡아 두어 오히려 도형과 겹친다 */
.perf-chart--line .apexcharts-legend-marker { margin-right: 3px; }
.perf-chart--line .apexcharts-legend-series:nth-of-type(3) .apexcharts-legend-marker,
.perf-chart--line .apexcharts-legend-series:nth-of-type(6) .apexcharts-legend-marker { margin-right: 5px; }
.perf-chart .apexcharts-tooltip { font-family: var(--font-base); }
.perf-chart .apexcharts-tooltip-text-y-value { font-family: var(--font-accent); font-variant-numeric: tabular-nums; }
@media (max-width: 1280px) {
.perf-chart { padding: var(--spacing-24) var(--spacing-24) var(--spacing-16); }
}
@media (max-width: 1024px) {
.perf-charts--bar { grid-template-columns: minmax(0, 1fr); } /* 좁은 화면은 차트를 세로로 쌓는다 */
}
@media (max-width: 768px) {
.perf-filter { grid-template-columns: minmax(0, 1fr); } /* 사업공고 박스처럼 라벨은 위로 */
.perf-filter__select { padding: 0 30px 0 var(--spacing-16); background-position: right 12px center; background-size: 14px 14px; } /* 375에서 칸 폭 약 108 — "2020년"이 잘리지 않게 오른쪽 여백을 줄인다 */
/* 탭은 화면 끝까지 붙여 스크롤 — 거터만큼 밖으로 */
.perf-tabs { margin: var(--spacing-40) calc(var(--container-pad) * -1) 0; }
/* 좁은 화면은 왼쪽 정렬 — 탭이 가로 스크롤되는 폭에서 가운데 정렬은 시작점을 잃는다 */
.perf-tabs__list { justify-content: flex-start; padding-inline: var(--container-pad); scroll-padding-inline: var(--container-pad); }
.perf-tab { padding: 14px var(--spacing-16); font-size: var(--text-body); line-height: 26px; }
.perf-panel { margin-top: var(--spacing-48); }
.perf-panel__title { font-size: 30px; line-height: 40px; }
.perf-box { margin-top: var(--spacing-48); }
.perf-panel .stat-cards, .perf-charts { margin-top: var(--spacing-32); }
.perf-charts { gap: var(--spacing-16); }
.perf-excel { height: 40px; padding: 0 var(--spacing-12) 0 var(--spacing-16); }
/* 표는 가로 스크롤 — 연도 칸 폭을 지키고, 항목 칸은 왼쪽에 고정해 어느 행인지 놓치지 않게 */
.perf-table { min-width: 560px; }
.perf-table th, .perf-table td { padding: var(--spacing-16) var(--spacing-12); }
.perf-table thead tr:first-child th:first-child, .perf-table tbody th, .perf-table tfoot th { position: sticky; left: 0; z-index: 1; min-width: 124px; max-width: 124px; padding-left: var(--spacing-4); background: var(--perf-label-bg); box-shadow: inset -1px 0 0 var(--border-hairline); overflow-wrap: anywhere; } /* 124보다 긴 한 단어(과학기술정보통신부)는 잘리지 않게 글자 단위로 줄바꿈. 헤더는 첫 줄의 첫 칸만 — 두 지표 표의 둘째 줄 첫 칸(출원)이 고정되지 않게 */
/* 2단 분류 표 — 값을 읽을 때 필요한 건 하위 항목명이라 '구분' 칸을 붙잡는다.
상위 묶음(연구기관·산업계)까지 고정하면 두 칸이 200px을 넘어 연도가 한 칸도 안 보인다. 상위는 묶음 표시라 잠깐 가려져도 맥락이 남는다 */
.perf-table tbody .perf-table__part { position: sticky; left: 0; z-index: 2; min-width: 112px; max-width: 112px; background: var(--perf-label-bg); box-shadow: inset -1px 0 0 var(--border-hairline); }
.perf-table tbody th[scope="rowgroup"] { position: static; min-width: 92px; max-width: 92px; box-shadow: none; } /* 상위 칸은 고정 해제 */
.perf-table tbody th[colspan="2"] { position: sticky; left: 0; z-index: 2; max-width: none; } /* 하위가 없는 행(대학·기타)은 합친 칸을 통째로 고정 */
.perf-table tfoot th { background: var(--surface-tint); }
.perf-foot { margin-top: var(--spacing-32); }
.perf-notes { padding: var(--spacing-20); }
.perf-chart { padding: var(--spacing-20) var(--spacing-12) var(--spacing-12); border-radius: var(--radius-md); }
.perf-chart__head { padding-inline: var(--spacing-8); }
}
@media (max-width: 400px) {
.perf-filter .biz-filter__range { gap: 6px; }
.perf-filter__select { padding: 0 24px 0 12px; background-position: right 9px center; } /* 선택지 글자는 JS가 "2020"으로 줄인다 */
}
@media print {
.perf-filter, .perf-tabs, .perf-excel { display: none !important; }
.perf-box, .perf-chart { break-inside: avoid; }
}
/* ---------- 성과정보 세부 탭 — 좌 연도별 총합 / 우 선택 연도 구성 (2026-09-15 재구성) ---------- */
.perf-filter__head { display: flex; align-items: baseline; gap: var(--spacing-8); white-space: nowrap; } /* 라벨 옆 조회 범위 안내 — 따로 줄을 만들지 않는다 */
.perf-filter__hint { font-size: var(--text-system); line-height: var(--leading-system); font-weight: var(--weight-regular); color: var(--text-3); transition: color var(--transition-fast); }
.perf-filter__hint.is-active { color: var(--text-1); } /* 5개년 밖 선택지가 막혀 있을 때 한 톤 진하게 */
.perf-charts--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 차트 카드 높이 — 전체 탭·세부 탭 모두 480으로 고정(탭·지표를 바꿔도 아래 표가 흔들리지 않게).
우 카드 목록은 7줄 남짓 보이고, 넘치면 목록 안에서 세로 스크롤 (2026-09-15 펼침 버튼 대신 스크롤로 결정) */
.perf-charts .perf-chart { display: flex; flex-direction: column; height: 480px; }
.perf-charts .perf-chart__canvas { flex: 1 1 auto; min-height: 0; }
.perf-chart__titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--spacing-16); row-gap: var(--spacing-12); min-height: 36px; } /* 세그먼트(36) 높이에 맞춰 좌우 카드 머리 높이를 같게 */
.perf-chart__canvas.is-clickable .apexcharts-bar-area { cursor: pointer; }
/* 연도 세그먼트 — 옅은 그레이 바탕에 붙은 버튼, 선택만 흰 칸으로 떠오른다. 차트보다 튀지 않게 작고 차분하게 */
.perf-seg { display: inline-flex; gap: 2px; padding: 5px; border-radius: 11px; background: #efefec; } /* 테두리 없이 바탕면만 — 선이 빠진 만큼 바탕을 한 톤 짙게(집계 범위 배지와 같은 회색), 바깥 여백 3 → 5 */
.perf-seg__btn {
min-width: 52px; height: 30px; padding: 0 var(--spacing-8); border-radius: var(--radius-sm);
font-family: var(--font-accent); font-size: var(--text-system); line-height: 1; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums;
color: var(--text-3); cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.perf-seg__btn:hover { color: var(--text-1); }
.perf-seg__btn[aria-checked="true"] { background: var(--surface-canvas); color: var(--text-1); font-weight: var(--weight-bold); box-shadow: 0 1px 3px rgba(9, 9, 9, 0.1); } /* 선택 칸도 테두리 없이 옅은 그림자만 */
.perf-seg__btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
/* 제목과 한 줄에 못 들어가는 폭 — 세그먼트를 아래 줄로 내리고 가로 전체 폭으로 */
/* 제목과 한 줄에 못 들어가면(JS가 .is-wrapped) 세그먼트를 아래 줄 가로 전체 폭으로 */
.perf-chart__titlebar.is-wrapped .perf-seg { width: 100%; }
.perf-chart__titlebar.is-wrapped .perf-seg__btn { flex: 1 1 0; min-width: 0; }
/* 우 카드 가로 막대 — 항목명 | 막대 | 건수 | 비중. 건수·비중은 고정 폭 열이라 세로로 줄이 맞는다 */
.perf-mix {
display: grid; grid-auto-rows: minmax(40px, auto); row-gap: var(--spacing-8); align-content: start; flex: 1 1 auto; min-height: 0; /* 항목 사이 8 — 두 줄 이름이 연달아 붙어 보이지 않게 */
margin: var(--spacing-8) calc(var(--spacing-12) * -1) 0 0; padding: 0 var(--spacing-12) 0 0; list-style: none; /* 스크롤바가 숫자 열을 가리지 않게 오른쪽 12 */
overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-divider) transparent;
}
.perf-mix::-webkit-scrollbar { width: 6px; }
.perf-mix::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--border-divider); }
.perf-mix::-webkit-scrollbar-track { background: transparent; }
.perf-charts__empty, .perf-table__empty { padding: var(--spacing-48) 0; text-align: center !important; font-family: var(--font-base) !important; color: var(--text-4); }
.perf-charts__empty { grid-column: 1 / -1; border: 1px solid var(--border-hairline); border-radius: var(--radius-card); }
.perf-mix__row {
display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) 64px 52px; align-items: center; column-gap: var(--spacing-12);
transition: transform var(--chart-motion); /* 순서가 바뀔 때 새 자리로 미끄러진다 */
}
.perf-mix__name { padding-block: 3px; font-size: var(--text-label); line-height: 18px; color: var(--text-2); word-break: keep-all; overflow-wrap: anywhere; } /* 긴 이름은 말줄임 없이 줄바꿈(2줄 안) */
.perf-mix__track { display: block; height: 24px; }
.perf-mix__bar { display: block; height: 100%; min-width: 2px; border-radius: 0 var(--chart-radius) var(--chart-radius) 0; background: var(--chart-bar); transition: width var(--chart-motion); }
.perf-mix__row.is-etc .perf-mix__bar { background: var(--chart-bar-etc); } /* 기타만 그레이 */
.perf-mix__row.is-zero .perf-mix__bar { min-width: 0; }
/* 늘 강조하는 항목(사업통계 국가 지역별의 '서울') — 나머지가 이미 블루라 진한 네이비와 굵은 이름으로 가른다 */
.perf-mix__row.is-pick .perf-mix__bar { background: var(--chart-bar-deep); }
.perf-mix__row.is-pick .perf-mix__name { font-weight: var(--weight-bold); color: var(--text-1); }
.perf-mix__num, .perf-mix__pct { font-family: var(--chart-label-font); font-size: var(--chart-label-size); line-height: 20px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.perf-mix__num { font-weight: var(--weight-bold); color: var(--text-1); }
.perf-mix__pct { color: var(--text-3); }
.perf-mix__empty { display: grid; place-items: center; height: 100%; min-height: 200px; font-size: var(--text-body); color: var(--text-4); }
/* 표 — 선택 연도 열을 옅은 블루로 */
.perf-table .is-year { background: var(--brand-blue-tint); }
.perf-table thead .is-year { color: var(--brand-blue); }
/* 표에는 호버 효과를 두지 않는다 — 묶인 줄(국내·해외·계)에서 한 줄만 칠해지고 선택 열과 겹쳐 셀 단위로 보였다 */
.perf-table tfoot > tr > .is-year { background: #e3ecfd; } /* 합계 줄의 선택 열 — 옅은 면 위라 한 톤 짙게, 위아래로 끊기지 않게 */
@media (max-width: 1024px) {
.perf-charts--split { grid-template-columns: minmax(0, 1fr); } /* 좌 카드 → 우 카드 순으로 쌓는다 */
.perf-charts .perf-chart { height: 440px; } /* 쌓인 카드도 440 고정 — 우 카드 목록은 넘치면 스크롤 */
}
@media (max-width: 860px) {
/* 좁은 화면 — 차트 · 목록 종류를 가리지 않고 그리는 영역을 한 값(--chart-body-h-narrow)으로 고정한다.
카드 자체에 높이를 주던 것을 그리는 영역으로 옮겼을 뿐, 고정 방식과 제목 · 안팎 여백은 그대로다(카드 높이 = 제목 + 여백 + 이 값).
.dist-rank(자치구 25구 목록)만 예외 — 스크롤 없이 전부 보이게 둔 카드라 여기서도 높이를 주지 않는다 */
.perf-charts .perf-chart { height: auto; }
.perf-charts .perf-chart__canvas,
.perf-charts .perf-mix:not(.dist-rank) { flex: none; height: var(--chart-body-h-narrow); }
}
@media (max-width: 768px) {
.perf-seg__btn { height: 44px; } /* 터치 높이 44 */
.perf-mix { grid-auto-rows: auto; row-gap: var(--spacing-12); }
.perf-mix__row { grid-template-columns: minmax(84px, 32%) minmax(0, 1fr) 64px 50px; column-gap: var(--spacing-8); }
.perf-mix__track { height: 20px; }
}
@media (max-width: 480px), (min-width: 1025px) and (max-width: 1280px) {
/* 좁은 카드 — 항목명을 막대 위 한 줄로 올리고, 막대·건수·비중을 아래 줄에.
480 이하 모바일, 그리고 좌우 카드가 나란히 좁아지는 1025~1280(긴 항목명이 3~4줄로 늘어나던 폭) */
.perf-mix__row { grid-template-columns: minmax(0, 1fr) 64px 50px; grid-template-areas: "name name name" "track num pct"; row-gap: 4px; }
.perf-mix__name { grid-area: name; }
.perf-mix__track { grid-area: track; }
.perf-mix__num { grid-area: num; }
.perf-mix__pct { grid-area: pct; }
}
@media (prefers-reduced-motion: reduce) {
.perf-mix__row, .perf-mix__bar { transition: none; }
}
/* ---------- 성과정보 공통 확장 — 지표 토글 · 집계 범위 · 국내/해외 구분 표 (특허·기술료·사업화) ---------- */
.perf-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--spacing-24); row-gap: var(--spacing-16); text-align: center; }
.perf-panel__heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; column-gap: var(--spacing-16); row-gap: var(--spacing-8); min-width: 0; } /* 제목 오른쪽에 집계 범위 배지 — 배지 아랫변을 제목 글자 아랫선에 맞춘다 */
/* 좁은 화면은 탭과 같이 왼쪽 정렬 */
@media (max-width: 768px) {
.perf-panel__head { justify-content: flex-start; text-align: left; }
.perf-panel__heading { justify-content: flex-start; }
}
.perf-panel__scope { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 5px; } /* 제목 줄높이(41)의 아래 여백만큼 올려 글자 아랫선과 맞춤 */
.perf-panel__scope[hidden] { display: none; }
.perf-panel__badge { display: inline-flex; align-items: center; min-height: 32px; padding: 4px var(--spacing-12); border-radius: var(--radius-sm); background: #efefec; font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-medium); color: var(--text-2); } /* 집계 범위 — 옅은 그레이 면 + 본문색, 테두리 없음, 16px. 제목을 돕는 조건이라 블루(선택·링크 색)보다 조용하게 */
/* 지표 토글 — 연도 세그먼트와 같은 조형, 섹션 단위 컨트롤이라 한 단계 크게 */
.perf-seg--lg { padding: 6px; border-radius: 13px; }
.perf-seg--lg .perf-seg__btn { min-width: 88px; height: 40px; padding: 0 var(--spacing-16); font-family: var(--font-base); font-size: var(--text-label); border-radius: 8px; }
.perf-seg--lg[hidden] { display: none; }
/* 지표 토글 선택 칸 — 검정 면 + 흰 글자. 1차 탭(블루 알약)과 겹치지 않는 사이트 다크 톤(검색·목록 버튼)으로, 흰 선택 칸인 연도 세그먼트보다 한 단계 위로 읽힌다 */
.perf-seg--lg .perf-seg__btn[aria-checked="true"] { background: var(--surface-dark); color: #fff; box-shadow: none; }
.perf-seg--lg .perf-seg__btn[aria-checked="false"]:hover { color: var(--text-1); }
/* 지표 토글 줄 — 섹션 제목 아래 한 줄을 따로 차지하고 오른쪽 끝. 같은 줄에 두면 가운데 정렬한 제목이 왼쪽으로 밀렸다 */
.perf-charts-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: var(--spacing-48); row-gap: var(--spacing-12); margin-top: var(--spacing-32); } /* 위 32 > 아래 20 — 컨트롤이 아래 카드에 딸린 요소로 읽히게 */
.perf-charts-bar[hidden] { display: none; }
.perf-charts-bar:not([hidden]) ~ .perf-charts { margin-top: var(--spacing-20); } /* 토글과 차트는 한 묶음 — 제목·토글 사이(32)보다 좁게 */
/* 연도 탭 — 카드 밖 컨트롤 줄 오른쪽 끝(지표 토글은 왼쪽). 높이만 지표 토글(6 + 40 + 6 = 52)에 맞춘다 — 글자·버튼 너비는 카드 안에 있던 때 그대로 */
/* 지표 토글은 늘 왼쪽 — 연도 탭이 없는 화면(특허·기술료 전체)도 같다. 연도 탭은 오른쪽 */
.perf-charts-bar .perf-seg--lg:not([hidden]) { margin-right: auto; }
.perf-charts-bar .perf-seg:not(.perf-seg--lg) .perf-seg__btn { height: 42px; } /* 바깥 5 + 42 + 5 = 52 */
/* 연도 탭이 있는 전체 탭(사업통계 서울·국가·구별) — 컨트롤 줄이 요약 카드 위로 온다.
섹션 제목 → 컨트롤 줄 32(위 규칙) · 컨트롤 줄 → 요약 카드 20 · 요약 카드 → 차트 카드는 모든 전체 화면 공통 KPI → 차트 간격(56 · 모바일 32) */
.perf-charts-bar:not([hidden]) + .perf-summary { margin-top: var(--spacing-20); }
.perf-charts-bar:not([hidden]) ~ .perf-summary:not([hidden]) ~ .perf-charts { margin-top: 56px; }
@media (max-width: 768px) {
/* 좁은 화면 — 연도 탭은 오른쪽 정렬, 지표 토글은 왼쪽. 둘이 함께면 1줄 지표 토글 · 2줄 연도 탭, 줄 사이는 좁게 */
.perf-charts-bar { flex-direction: column; align-items: flex-end; row-gap: var(--spacing-8); }
.perf-charts-bar .perf-seg, .perf-charts-bar .perf-seg--lg { width: auto; }
.perf-charts-bar .perf-seg--lg:not([hidden]) { margin-right: 0; align-self: flex-start; } /* 1줄 지표 토글은 왼쪽, 2줄 연도 탭은 오른쪽 */
.perf-charts-bar .perf-seg--lg .perf-seg__btn { flex: none; min-width: 88px; } /* 버튼 너비는 넓은 화면과 같게 — 높이 44는 그대로 */
.perf-charts-bar .perf-seg:not(.perf-seg--lg) .perf-seg__btn { height: 46px; } /* 바깥 5 + 46 + 5 = 56 — 지표 토글(6 + 44 + 6)과 같게 */
.perf-charts-bar:not([hidden]) ~ .perf-summary:not([hidden]) ~ .perf-charts { margin-top: var(--spacing-32); } /* 좁은 화면 KPI → 차트 간격(성과정보 전체 탭과 같게) */
}
/* 두 지표 표 — 헤더 2단(연도 / 지표). 세로선 없이 간격으로만 묶는다 — 연도 묶음 사이는 넓게(48), 묶음 안 두 지표는 좁게(24).
묶음 바깥쪽 여백은 좌우 대칭(is-first 왼쪽 48 · is-last 오른쪽 48)이라 연도가 묶음 한가운데 온다. 첫 열 고정 + 가로 스크롤 */
.perf-table--dual { min-width: 980px; }
.perf-table thead th[rowspan] { vertical-align: middle; } /* 두 줄로 묶인 첫 칸은 세로 가운데 */
.perf-table--dual .perf-table__year { padding: 14px var(--spacing-24) var(--spacing-12); border-bottom-color: var(--border-hairline); } /* 연도 줄 — 지표 줄과는 옅은 헤어라인. 진한 선은 헤더·본문 경계 하나만(헤더 안에 진한 선이 둘이면 경계가 흐려진다). 글자는 자기 줄 세로 가운데(위아래 여백 대칭) */
.perf-table--dual .perf-table__metric { padding-top: var(--spacing-12); padding-bottom: 14px; font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--text-1); white-space: nowrap; } /* 지표 이름 — 헤더는 검정, 연도보다 한 단계 가볍게(16·500). 여백은 연도 줄과 대칭 */
.perf-table--dual .perf-table__metric.is-year { color: var(--brand-blue); }
.perf-table--dual .is-first { padding-left: var(--spacing-48); } /* 연도 묶음 경계 — 선 대신 간격 */
.perf-table--dual .is-last { padding-right: var(--spacing-48); }
.perf-table--dual tbody th[scope="row"]:not(.perf-table__part), .perf-table--dual th[scope="rowgroup"], .perf-table--dual thead tr:first-child th:first-child, .perf-table--dual tfoot th {
position: sticky; left: 0; z-index: 1; background: var(--perf-label-bg);
}
.perf-table--dual tfoot th { background: var(--surface-tint); } /* 합계 줄의 고정 첫 칸도 줄과 같은 옅은 면 — tbody 첫 칸 규칙(흰 바탕)이 덮지 않게 tbody로 한정 */
/* 국내·해외·계 — 항목명 칸이 세 줄을 묶는다. 계 줄은 옅은 면, 묶음 사이는 진한 헤어라인 */
.perf-table__group + .perf-table__group > tr:first-child > * { border-top: 1px solid var(--border-divider); }
.perf-table .perf-table__part { width: 1%; min-width: 128px; font-weight: var(--weight-regular); color: var(--text-1); white-space: nowrap; } /* 국내·해외 칸 — 항목명과 같은 행 제목이라 색은 같게(text-1), 위계는 굵기로만(항목명 500 · 구분 400). 내용만큼만 두되 128 아래로는 좁아지지 않게 */
.perf-table thead .perf-table__part { font-weight: var(--weight-semibold); color: var(--text-1); }
.perf-table th[scope="rowgroup"] { vertical-align: middle; } /* 국내·해외(·계) 줄을 묶는 항목명은 묶음 세로 가운데 */
/* 묶음이 긴 표(사업통계 연구원 — 한 묶음 7줄, 구분 값도 '지방자치단체출연'처럼 길다) — 묶음 이름과 구분 칸을 반반으로 나눈다.
성과정보 특허·기술료(국내·해외, 한 묶음 2~3줄)는 구분 값이 짧아 내용만큼만 두는 지금 조형 그대로 */
/* 2단 분류 표 — 머리가 '구분' 한 칸(colspan 2)이라 폭은 본문 칸으로 잡는다.
둘 다 내용만큼만 차지하게 해 남는 폭은 숫자 열로 보낸다. 하위(중분류)는 이름이 길어 한 단계 넓게 */
/* 종합현황 — 사업 구분은 두 값(국가R&D·자체R&D)뿐이라 좁게, 지표는 "기술료 징수건수"가 한 줄로 들어가게 넓게 */
.perf-table--ov th[scope="rowgroup"], .perf-table.perf-table--ov thead th:first-child { width: 1%; min-width: 170px; } /* 위 28% 규칙보다 뒤·같은 무게로 덮어쓴다 */
.perf-table--ov .perf-table__part { width: 1%; min-width: 200px; }
.perf-table--group th[scope="rowgroup"] { width: 1%; min-width: 140px; }
.perf-table--group .perf-table__part { width: 1%; min-width: 190px; }
/* 소계 줄 — 굵기(500)·검정에 아주 옅은 면을 더해 일반 행과 가른다. 맨 아래 합계 줄(--surface-tint)보다 연해 소계 < 합계 위계가 유지된다 */
.perf-table tr.is-subtotal > * { font-weight: var(--weight-medium); color: var(--text-1); background: var(--perf-label-bg); }
.perf-table tr.is-subtotal > .is-year { background: var(--brand-blue-tint); } /* 선택 연도 블루가 끊기지 않게 */
@media (max-width: 768px) {
.perf-panel__head { align-items: stretch; flex-direction: column; row-gap: var(--spacing-12); }
.perf-seg--lg { width: 100%; }
.perf-seg--lg .perf-seg__btn { flex: 1 1 0; min-width: 0; height: 44px; } /* 터치 높이 44 */
.perf-table--dual { min-width: 760px; }
.perf-table--dual .is-first { padding-left: var(--spacing-32); }
.perf-table--dual .is-last { padding-right: var(--spacing-32); }
.perf-table th[scope="rowgroup"] { position: sticky; left: 0; z-index: 1; background: var(--perf-label-bg); }
.perf-table .perf-table__part { min-width: 80px; }
}
/* ============ 사업통계 · 구별 R&D 사업 통계 (/stats/district.html, /js/district.js) ============
조회 기간(.perf-filter) → 섹션 제목 → 연도 줄 → 요약 영역(좌 지도 .dist-map : 우 카드 .dist-cards) · 차트(.perf-chart) · 표(.perf-table) → 참고사항
아래 규칙은 모두 .dist-* 로 이 페이지 안에서만 걸린다 — 다른 사업통계·성과정보 페이지의 모양은 바꾸지 않는다 */
/* 요약 영역 — 좌 지도 : 우 카드 2장, 1:1 (2026-09-23, 자치구 칩 그리드 · 모바일 탭을 대신한다) */
.dist-top { display: grid; grid-template-columns: 6fr 4fr; gap: var(--spacing-32); align-items: stretch; margin-top: 56px; } /* 지도 6 : 카드 4 — 제목 → 요약 56 은 다른 통계 · 성과 화면의 제목 → 요약 카드(.perf-panel .stat-cards)와 같은 값. 지도 · 오른쪽 열이 같은 자리에서 시작한다 */
.dist-side { display: flex; flex-direction: column; justify-content: center; min-width: 0; } /* 연도 탭 · 카드 묶음이 지도 높이 가운데에 선다 */
.dist-side__inner { display: flex; flex-direction: column; }
/* 연도 탭 — 공통 부품(.perf-charts-bar)을 자리만 이 열 안으로. 아래 여백 20 은 다른 통계 화면의 연도 탭 → 카드 간격과 같다 */
.dist-side .perf-charts-bar { margin-top: 0; justify-content: flex-end; max-width: 100%; }
.dist-side .perf-charts-bar .perf-seg { max-width: 100%; }
.dist-side .perf-charts-bar .perf-seg__btn { min-width: 0; padding: 0 var(--spacing-12); } /* 좁은 열에 맞춰 연도 칩 폭만 줄인다(다른 화면은 그대로) */
.dist-cards .stat-cards__list { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-16); } /* 카드 ↔ 카드 16 — 24 는 연도 탭 → 카드(20)와 비슷해 셋이 따로 떠 보인다. 좁은 화면 요약 카드와 같은 한 단계 아래 값 */
/* 카드 안은 세 칸 — 칸마다 작은 제목 + 값, 사이에 세로 구분선(.stat-card__fig 공통 규칙) */
.dist-cards .stat-card__figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dist-cards .stat-card__num .stat-card__ko { font-weight: var(--weight-medium); } /* 구 이름은 옆 칸 숫자와 같은 크기 · 굵기 */
/* 서울시 지도 — 라이브러리 없이 SVG. 경계 자료는 /js/seoul-map.js(원본 docs/seoul_gu_paths.json, 좌표는 고치지 않는다)
면이 넓어 더 옅은 블루 · 흰 경계선(2026-09-23), 마우스를 올리면 한 단계 진하게, 고른 구는 같은 계열의 진한 남색.
구 이름은 진한 남색 500, 고른 구만 600 흰 글자 */
.dist-mapwrap { min-width: 0; align-self: start; } /* 전체 · 구 선택 어느 쪽에서나 같은 자리 · 같은 크기 */
.dist-map { min-width: 0; }
.dist-map__svg { display: block; width: 90%; height: auto; margin-inline: auto; overflow: visible; } /* 열 안에서 가운데, 폭은 열의 90% */
.dist-map__hint { margin: var(--spacing-8) 0 0; font-size: var(--text-system); line-height: 1.6; color: #5f6673; text-align: center; }
.dist-map__gu { cursor: pointer; }
.dist-map__area {
fill: #bfd5fc; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round;
transition: fill var(--transition-fast);
}
.dist-map__gu:hover .dist-map__area { fill: #8fb4fa; }
.dist-map__gu.is-on .dist-map__area { fill: #0d3a86; } /* 같은 계열에서 명도 차이로 구분 */
.dist-map__label {
font-family: var(--font-base); font-size: 11.5px; font-weight: var(--weight-medium); letter-spacing: -0.02em;
fill: #0d3a86; pointer-events: none; user-select: none;
transition: fill var(--transition-fast);
}
.dist-map__gu.is-on .dist-map__label { font-weight: var(--weight-semibold); fill: #fff; }
.dist-map__gu:focus { outline: none; }
.dist-map__gu:focus-visible .dist-map__area { stroke: var(--text-1); stroke-width: 2.2; }
/* 자치구별 세부과제수 — 세부 탭 우 카드 가로 막대 목록의 변형. 25개 구를 스크롤 없이 모두, 비중 열 없이 값만.
상위 5개 구는 기본 블루, 나머지는 옅은 블루(차트 막대 토큰). 줄을 누르면 그 자치구로 이동 */
.perf-charts .perf-chart--rank { height: auto; }
.dist-rank { overflow: visible; }
.dist-rank .perf-mix__row { grid-template-columns: 96px minmax(0, 1fr) 64px 52px; grid-template-areas: none; cursor: pointer; }
.dist-rank .perf-mix__name, .dist-rank .perf-mix__track, .dist-rank .perf-mix__num, .dist-rank .perf-mix__pct { grid-area: auto; }
.dist-rank .perf-mix__row:not(.is-top) .perf-mix__bar { background: var(--chart-bar-soft); }
.dist-rank .perf-mix__row:hover .perf-mix__name { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; }
/* 표 — 전체는 8열이라 항목 열 폭을 줄이고, 모든 폭에서 첫 열을 붙잡아 가로 스크롤 */
.dist-table .is-na { font-family: var(--font-base); color: var(--text-4); } /* 미제공 — 숫자보다 한 톤 흐리게 */
@media (max-width: 860px) {
.dist-top { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-24); } /* 좁은 화면 — 지도 → 안내 문구 → 연도 탭 → 카드 순으로 쌓는다 */
.dist-map__svg { width: 100%; } /* 좁은 화면 — 카드 좌우 여백만 남기고 꽉 차게 */
/* 좁은 화면에서도 PC 처럼 세 칸(값 / 전체 대비 / 전년 대비) — 칸 사이 여백만 줄인다 */
.dist-cards .stat-card__fig:first-child { padding-right: var(--spacing-8); }
.dist-cards .stat-card__fig + .stat-card__fig { padding-left: var(--spacing-8); }
/* 값 숫자만 한 단계 아래(20 → 본문 기준 17) — 칸 제목 · 단위는 그대로, PC 는 20 그대로 */
.dist-cards .stat-card__num { font-size: var(--text-body); line-height: var(--leading-body); }
/* 전년 대비도 옆 칸 값과 같은 17 — 값이 17로 내려간 뒤 18 이 혼자 커 보였다. 줄높이도 같게 맞춰 세 칸 값이 한 기준선에 선다 */
.dist-cards .stat-card__delta { font-size: var(--text-body); line-height: var(--leading-body); }
}
@media (max-width: 768px) {
.dist-top { margin-top: var(--spacing-32); } /* 제목 → 요약 — 좁은 화면 값도 다른 화면(.perf-panel .stat-cards)과 같게 */
.dist-rank .perf-mix__row { grid-template-columns: 64px minmax(0, 1fr) 56px 50px; }
}
@media (max-width: 600px) {
.dist-map__label { font-size: 13.5px; } /* 지도가 작아지는 폭 — 구 이름을 키운다(viewBox 600 기준) */
}
/* ============ 통계표 열 너비 공통 (/js/table-fit.js, 2026-09-17) ============
성과정보 · 사업통계의 모든 표. 표 스타일(선·면·글자·여백)은 그대로, 열 너비만 JS가 정한다(.is-fit)
· 첫 열(구분)은 내용 폭(colgroup), 데이터 열은 나머지를 같은 너비로 — 위의 28% · min-width 규칙보다 우선
· 첫 열과 데이터 열 사이 세로선 없음 — 회색 면으로만 구분
· 가로 스크롤이 생기면(.is-scroll) 첫 열 고정, 오른쪽 끝 페이드 */
.perf-table.is-fit { table-layout: fixed; }
.perf-table.is-fit thead tr:first-child th:first-child,
.perf-table.is-fit tbody th,
.perf-table.is-fit tfoot th { min-width: 0; max-width: none; box-shadow: none; }
/* 항목 이름은 한 줄 — 첫 열 상한을 넘는 긴 이름만 두 줄 */
.perf-table.is-fit tbody th, .perf-table.is-fit tfoot th { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
/* 첫 열 고정 — 두 칸이면 대분류는 왼쪽 끝, 소분류는 대분류 폭만큼 옆 */
.perf-table.is-fit thead tr:first-child th:first-child,
.perf-table.is-fit tbody th:not(.perf-table__part),
.perf-table.is-fit tfoot th { position: sticky; left: 0; z-index: 1; }
.perf-table.is-fit tbody th.perf-table__part { position: sticky; left: var(--fit-col0, 0); z-index: 1; }
.perf-table.is-fit tbody th[colspan="2"] { z-index: 2; }
.perf-table-frame { position: relative; }
.perf-table-frame::after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; pointer-events: none;
background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface-canvas));
opacity: 0; transition: opacity var(--transition-fast);
}
.perf-table-frame.has-more::after { opacity: 1; }
@media print {
.dist-map__hint { display: none !important; }
}
/* ============ 개인정보처리방침 (/about/privacy.html) ============
장식 없이 흐린 선과 그레이 면만으로 구분한다. 머리말은 그레이 면 + 흰 원 아이콘,
조항은 왼쪽 번호·제목 / 오른쪽 내용 2열 — 조 사이는 hairline 하나 */
.sub-body--privacy { padding-top: var(--spacing-64); }
@media (min-width: 1181px) { .sub-body--privacy { padding-top: var(--spacing-96); } } /* 하위 화면 서브히어로 아래 96 통일(2026-09-22) */
.privacy-head {
display: flex; align-items: flex-start; gap: var(--spacing-32);
padding: var(--spacing-40) var(--spacing-48);
border-radius: var(--radius-card-lg);
background: var(--surface-tint);
}
.privacy-head__icon {
flex: none; display: grid; place-items: center;
width: 88px; height: 88px; border-radius: 50%;
background: var(--surface-canvas); color: var(--text-1);
}
.privacy-head__icon .qm-svg { width: 40px; height: 40px; display: block; }
/* 등장 시 선이 그려지고 주황 손잡이가 한 번 숨 쉰다 — 소개 페이지(cf__step)와 같은 연출 */
.privacy-head.is-revealed .ic-anim-draw { animation: qmDraw 0.8s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }
.privacy-head .qm-accent-stroke { transform-origin: center; }
.privacy-head.is-revealed .qm-accent-stroke.ic-anim-draw {
animation: qmDraw 0.8s cubic-bezier(0.45, 0, 0.25, 1) 0.35s both,
qmBreath 0.9s ease-in-out 1.25s 1 both;
}
.privacy-head__text { min-width: 0; padding-top: var(--spacing-8); }
.privacy-head__title {
font-size: var(--text-title); line-height: var(--leading-title);
letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--text-1);
}
.privacy-head__desc { margin-top: var(--spacing-16); font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-2); }
.privacy-head__date { margin-top: var(--spacing-20); font-size: var(--text-system); line-height: var(--leading-system); color: var(--text-4); }
.privacy-head__date .num { margin-left: var(--spacing-4); font-family: var(--font-accent); font-weight: var(--weight-medium); color: var(--text-3); font-variant-numeric: tabular-nums; }
.privacy-body { margin-top: var(--spacing-64); border-top: 1px solid var(--border-divider); }
.privacy-article {
display: grid; grid-template-columns: 320px minmax(0, 1fr); column-gap: var(--spacing-64);
padding: var(--spacing-40) 0;
border-bottom: 1px solid var(--border-hairline);
}
/* 조 번호 · 제목 — 번호가 윗줄, 제목이 아랫줄인 한 덩어리. 제목 크기는 이 페이지에서만 쓰는 값(22와 34 사이) */
.privacy-article__title {
display: flex; flex-direction: column; gap: 5px;
font-size: 26px; line-height: 34px;
letter-spacing: var(--tracking-title); font-weight: var(--weight-bold); color: var(--text-1);
word-break: keep-all; /* 조 제목은 단어 단위로만 줄을 바꾼다 (이 페이지 한정) */
}
.privacy-article__no {
font-size: var(--text-nav); line-height: var(--leading-nav);
font-weight: var(--weight-bold); letter-spacing: var(--tracking-none); color: var(--brand-blue);
}
.privacy-article__body { max-width: 880px; padding-top: 3px; font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-2); }
/* 문단 사이 24, 문단 → 상자 16 — 모든 조에서 같다 */
.privacy-article__body > * + * { margin-top: var(--spacing-24); }
.privacy-article__body > * + .privacy-list { margin-top: var(--spacing-16); }
.privacy-article__body a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.privacy-article__body b { font-weight: var(--weight-medium); color: var(--text-1); }
.privacy-article__body b::after { content: ' · '; color: var(--border-input); font-weight: var(--weight-regular); }
/* ①②③ 항 — 번호는 왼쪽에 걸고 본문은 들여쓴다 */
.privacy-clauses > li { display: grid; grid-template-columns: 30px minmax(0, 1fr); }
.privacy-clauses > li + li { margin-top: var(--spacing-24); }
.privacy-clauses__no { color: var(--text-3); }
.privacy-clauses__body > * + * { margin-top: var(--spacing-24); }
.privacy-clauses__body > * + .privacy-list, .privacy-clauses__body > .privacy-list:first-child { margin-top: var(--spacing-16); }
/* 항목 묶음 — 흐린 선 상자, 점은 그레이 */
.privacy-list {
padding: var(--spacing-20) var(--spacing-24);
border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
font-size: var(--text-label); line-height: var(--leading-body);
}
.privacy-list li { position: relative; padding-left: var(--spacing-16); }
.privacy-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--border-input); }
.privacy-list li + li { margin-top: var(--spacing-12); }
@media (max-width: 1024px) {
.privacy-article { grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--spacing-40); }
.privacy-article__title { font-size: var(--text-title); line-height: var(--leading-title); }
.privacy-article__no { font-size: var(--text-label); line-height: var(--leading-label); }
.privacy-article__body { padding-top: 2px; }
}
@media (max-width: 768px) {
.sub-body--privacy { padding-top: var(--spacing-48); } /* 하위 화면 공통 — 모바일 48 */
.privacy-head { flex-direction: column; gap: var(--spacing-20); padding: var(--spacing-24) var(--spacing-20); border-radius: var(--radius-card); }
.privacy-head__icon { width: 64px; height: 64px; }
.privacy-head__icon .qm-svg { width: 30px; height: 30px; }
.privacy-head__text { padding-top: 0; }
.privacy-body { margin-top: var(--spacing-40); }
.privacy-article { grid-template-columns: 1fr; row-gap: var(--spacing-16); padding: var(--spacing-32) 0; }
.privacy-article__body { padding-top: 0; }
.privacy-list { padding: var(--spacing-16); }
}
@media print {
.privacy-head { background: none; border: 1px solid var(--border-hairline); }
.privacy-article { break-inside: avoid; }
}
/* 비공개 미리보기 — 관리자가 로그인한 상태에서만 보이는 띠 (방문자에게는 404) */
.post__preview {
display: inline-block; margin-bottom: var(--spacing-16);
padding: var(--spacing-8) var(--spacing-16); border-radius: var(--radius-pill);
background: var(--brand-orange); color: #fff;
font-size: var(--text-system); line-height: var(--leading-system); font-weight: var(--weight-bold);
}
/* 목록 결과 없음 */
.board-empty {
padding: var(--spacing-64) 0; text-align: center;
font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-3);
}