/* ============================================================
   program.css — 연구 · 실증 · 핵심개념 · 참여기관 네 갈래가 함께 쓰는 화면 CSS

   homepage.css 다음에 로드한다. 색은 전부 var(--hp-*) 토큰만 쓴다.
   homepage.css / about.css 에 이미 있는 규칙(사이트 크롬, ed-* 홈 전용
   요소, 버튼 클래스, about-facts 표 등)은 이 파일에 다시 두지 않는다.

   이 네 갈래 화면은 blog.css 를 불러오지 않는다. 목록 행 렌더링을
   program_feed.js 가 직접 맡아(.idx-row) blog.css 의 .blog-feed-table·
   .blog-pagination 같은 클래스가 필요 없고, 그래서 이 파일의 클래스와
   blog.css 의 클래스가 한 화면에서 부딪힐 일도 없다.
   ============================================================ */

/* ===== 목차형 행 (연구·실증·소식 목록 공통) — 앞자리는 언제나 소속 기관 =====
 * .idx-row 는 <a> 태그다(program_feed.js). 그리드 열은 소속 → 분류·도메인 →
 * 제목·요약 → 날짜 네 칸을 이 순서 그대로 전제한다. 목업 아트보드는 정적
 * 화면이라 열 너비를 행마다 인라인으로 뒀지만, 실제로는 행마다 새로 계산할
 * 이유가 없어 여기 한 곳에만 둔다. */
.idx-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--hp-rule-strong);
}
.idx-head h2 { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.2em; color: var(--hp-text); }
.idx-head span { font-size: 0.78rem; color: var(--hp-muted); }
.idx-row {
  display: grid; grid-template-columns: 14rem 10rem minmax(0, 1fr) 4rem;
  gap: 1.25rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--hp-border);
  color: inherit; text-decoration: none;
}
.idx-row:hover .idx-title { color: var(--hp-blue); }
.idx-by { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--hp-ink); overflow-wrap: anywhere; }
.idx-taxo { display: flex; align-items: baseline; gap: 0.5rem; }
.idx-cat { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; color: var(--hp-blue); }
/* 제목·요약에 공백 없는 긴 문자열(URL, ~~~ 같은 반복 문자)이 오면 줄바꿈
 * 지점이 없어 minmax(0,1fr) 칸을 뚫고 화면 밖까지 밀려 나간다 — 아무
 * 데서나 끊을 수 있게 허용한다. 소속 칸(.idx-by)도 같은 이유다. */
.idx-main { min-width: 0; overflow-wrap: anywhere; }
.idx-title { font-size: 1rem; font-weight: 700; color: var(--hp-text); }
/* 요약은 2줄에서 자른다 — 목록 행 높이가 요약 길이에 끌려다니지 않게.
 * -webkit- 접두어지만 line-clamp 는 모든 주요 브라우저가 이 표기로 지원한다. */
.idx-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin-top: 0.3rem; font-size: 0.86rem; line-height: 1.6;
  color: var(--hp-text-secondary);
}
.idx-date { font-size: 0.78rem; color: var(--hp-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* 목록이 비었거나 불러오지 못했을 때. program_feed.js 가 직접 그리는
 * .feed-empty/.feed-error 는 blog.css 의 .blog-empty 를 대신한다. */
.feed-empty, .feed-error { padding: 2.4rem 0; text-align: center; font-size: 0.92rem; color: var(--hp-muted); }

/* ===== 페이지 표제부 (서브 화면 공통) ===== */
.page-head { padding: 3.2rem 0 0; }
.page-head__crumb { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; color: var(--hp-muted); }
.page-head h1 {
  margin: 0.9rem 0 0; font-size: 2.9rem; font-weight: 700; line-height: 1.22;
  letter-spacing: -0.03em; color: var(--hp-text);
}
.page-head__lead { margin: 1.25rem 0 0; max-width: 62ch; font-size: 1.06rem; line-height: 1.7; color: var(--hp-text-secondary); }
/* 표제부의 동작 버튼 묶음. 로그인한 사람에게만 나타나므로(hidden 이 기본)
 * 비로그인 방문자에게는 이 여백도 생기지 않는다 — display 를 flex 로 박아
 * 두면 hidden 을 이기므로, hidden 이 아닐 때만 flex 가 되게 한다. */
.page-head__actions { display: flex; gap: 0.75rem; margin-top: 1.6rem; }
.page-head__actions[hidden] { display: none; }
/* 표제부의 글쓰기·내 글 버튼은 본문 진입용 큰 버튼(.btn-hp 기본 0.8rem 2rem)
 * 절반 크기로 줄인다 — 표제부에서는 동작이 주인공이 아니라서다. */
.page-head__actions .btn-hp { padding: 0.4rem 1rem; font-size: 13px; }
/* 참여기관처럼 표제부 바로 뒤에 제원 표(about.css의 .about-facts)가 붙는
 * 화면 전용 간격. about-facts 자체는 위 여백이 없다 — 다른 화면(about.html)
 * 에서는 안 보이는 h1 바로 뒤에 오므로 필요가 없었다. 인접 선택자로 이
 * 조합에서만 준다. */
.page-head + .about-facts { margin-top: 40px; }
/* 핵심 개념처럼 표제부 바로 뒤에 챕터(.chap)가 오는 화면 전용 간격 — 승인
 * 시안은 이 자리의 page-head 에 padding-bottom: 46px 를 인라인으로 줬다.
 * .chap 은 자체로 위 여백이 없다(border-top 바로 안쪽에 padding-top 54px
 * 뿐이라, 표제부와 첫 챕터의 룰러 사이가 시안보다 좁아진다). Task 10 리뷰
 * (Finding 2)에서 이 인라인 스타일을 빠뜨린 것이 드러나 인접 선택자로
 * 옮겼다 — .page-head + .about-facts 와 같은 이유다. */
.page-head + .chap { margin-top: 46px; }
/* 데이터 구축 소개처럼 표제부 바로 뒤에 제원 표(.spec)가 오는 화면 전용 간격.
 * .spec 자체는 위 여백이 없다 — 실증 도메인 화면에서는 리드 문단 뒤에 바로
 * 붙었기 때문이다. 위 두 규칙과 같은 이유로 인접 선택자로 준다. */
.page-head + .spec { margin-top: 40px; }

/* ===== 도판 프레임 — 잉크 1px 액자 ===== */
.figure-frame { border: 1px solid var(--hp-rule-strong); background: var(--hp-card); }
/* svg는 기본이 인라인 요소라 baseline 아래로 글자 한 줄 높이만큼 여백이
 * 생긴다 — 캡션과의 간격이 목업과 달라지므로 block으로 없앤다. 도판마다
 * 인라인 style="display:block"을 반복해 붙이지 않는다. */
.figure-frame svg { display: block; }
/* 사진 도판도 같은 액자에 들어간다. svg 와 달리 img 는 원본 픽셀 크기를 그대로
 * 주장하므로(1600px 짜리는 액자를 넘어간다) 액자 폭에 맞춰 줄인다. block 으로
 * 두는 이유는 위 svg 와 같다 — baseline 아래 여백을 없앤다. */
.figure-frame img { display: block; width: 100%; height: auto; }
.figure-cap { font-size: 0.76rem; letter-spacing: 0.02em; color: var(--hp-muted); margin-top: 0.6rem; }

/* ===== 연구 목록 전용 (필터·검색·결과줄·페이지네이션) ===== */
.filters { border-top: 2px solid var(--hp-rule-strong); border-bottom: 1px solid var(--hp-border); padding: 18px 0; }
.filter-line { display: flex; align-items: center; gap: 14px; }
.filter-line + .filter-line { margin-top: 14px; }
.filter-key { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--hp-muted); width: 4.5rem; flex-shrink: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 6px 14px;
  border: 1px solid var(--hp-border); color: var(--hp-nav-muted); background: transparent;
}
.chip.on { border-color: var(--hp-ink); background: var(--hp-ink); color: var(--hp-bg); }
.sel {
  height: 34px; padding: 0 30px 0 12px; border: 1px solid var(--hp-border); border-radius: 0;
  background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--hp-ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.sel svg { color: var(--hp-muted); }
.search { display: flex; margin-left: auto; }
.search input {
  height: 34px; width: 260px; padding: 0 12px; border: 1px solid var(--hp-border); border-right: none;
  border-radius: 0; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--hp-text);
}
.search button {
  height: 34px; padding: 0 18px; border: 1px solid var(--hp-ink); background: var(--hp-ink);
  color: var(--hp-bg); font-family: inherit; font-size: 13.5px; font-weight: 700; border-radius: 0;
}
.result-line { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 0 6px; }
.result-line .count { font-size: 0.86rem; font-weight: 700; color: var(--hp-ink); }
.result-line .count em { font-style: normal; color: var(--hp-blue); }
.dom {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 8px; border: 1px solid var(--hp-faint); color: var(--hp-muted);
}
.dom--set { border-color: var(--hp-blue); color: var(--hp-blue); }
.pager { display: flex; justify-content: center; gap: 6px; padding: 40px 0 70px; }
/* 페이지 칸은 <button> 이다(program_feed.js) — Tab 으로 닿고 Enter/Space 로
 * 눌리는 진짜 인터랙티브 요소가 필요해서다. 아래 규칙은 브라우저 기본
 * 버튼 크롬(그라디언트·둥근 모서리·자체 배경)을 지우고 목업의 정사각·1px
 * 보더 모양을 그대로 낸다. */
.pager button {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid var(--hp-border);
  border-radius: 0; background: transparent; color: var(--hp-nav-muted); cursor: pointer;
}
.pager button.on { border-color: var(--hp-ink); background: var(--hp-ink); color: var(--hp-bg); }
.pager button:disabled { color: var(--hp-faint); cursor: default; }

/* ===== 실증 도메인 화면 전용 (탭·스펙표·흐름·하위 섹션) ===== */
.dtabs { display: flex; gap: 0; border-bottom: 1px solid var(--hp-rule-strong); margin-top: 26px; }
.dtabs a {
  font-size: 14.5px; font-weight: 600; color: var(--hp-nav-muted);
  padding: 12px 22px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dtabs a.on { color: var(--hp-ink); font-weight: 700; border-bottom-color: var(--hp-ink); }
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--hp-rule-strong); border-bottom: 1px solid var(--hp-border); }
.spec > div { padding: 1rem 1.25rem 1.15rem; border-right: 1px solid var(--hp-border); }
.spec > div:first-child { padding-left: 0; }
.spec > div:last-child { padding-right: 0; border-right: none; }
.spec dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--hp-muted); }
.spec dd { margin: 0.45rem 0 0; font-size: 1.02rem; font-weight: 700; line-height: 1.5; color: var(--hp-text); }
.spec .note { margin-top: 0.25rem; font-size: 0.8rem; font-weight: 400; line-height: 1.55; color: var(--hp-text-secondary); }
/* 연결 성능지표 값 강조 — 승인된 목업은 이 칸에 인라인 style="color:
 * var(--hp-blue)"를 썼다. 화면별 <style>/인라인 색을 금지하는 규칙과
 * 부딪히므로 클래스로 옮겨 여기 한 곳에서 관리한다. */
.spec__accent { color: var(--hp-blue); }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--hp-rule-strong); }
.flow > div { padding: 26px 30px 30px 0; border-right: 1px solid var(--hp-border); }
.flow > div + div { padding-left: 30px; }
.flow > div:last-child { border-right: none; padding-right: 0; }
.flow h4 { margin: 10px 0 8px; font-size: 18px; font-weight: 700; color: var(--hp-ink); }
.flow p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--hp-text-secondary); }
.flow .who { margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--hp-muted); }
.sect2 { padding-top: 46px; padding-bottom: 70px; border-top: 1px solid var(--hp-rule-strong); margin-top: 50px; }
.sect2-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.sect2-head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--hp-ink); }
.sect2-head span { font-size: 0.8rem; color: var(--hp-muted); }

/* 리드 문단 바로 아래 놓이는 도판 두 개 — 목업은 인라인 style로 이 값을
 * 줬지만(공중 도판·개관 킨텍스 개념도), 안쪽 패딩이 목업에서부터 2px
 * 다르므로 하나로 합치지 않고 화면별 변형 클래스로 옮긴다. 위 여백
 * (40px)은 둘이 같다. */
.figure-frame--op { padding: 28px 30px 20px; margin-top: 40px; }
.figure-frame--overview { padding: 26px 30px 20px; margin-top: 40px; }

/* 실증 영상 — 액자(테두리·안여백)는 두르지 않는다. 대신 영상이 액자가
 * 차지하던 바깥 크기를 그대로 물려받아, 아래 도판 액자와 좌우 끝이 맞는다.
 * 위아래 여백은 도판 액자와 같은 40px 로 둔다. 아래 여백은 형제의 위 여백과
 * 겹쳐 접히므로(margin collapsing), 뒤에 도판 액자(위 40px)가 오는 개관
 * 화면에서도 80px 로 벌어지지 않고 40px 그대로다.
 * 첫 프레임이 오기 전에도 자리를 지켜야 하므로 바탕에 잉크색을 깔아 둔다. */
.demo-film { margin-top: 40px; margin-bottom: 40px; }

/* 실증 네 화면의 소개 문구는 조금 더 넓게 쓴다. 기본값 62ch(701px)에서는
 * 첫 문장이 한 줄에 못 들어가 문장 가운데서 접혔고, 그러면 <br> 로 잡아 둔
 * 문장 단위 줄바꿈이 무의미해진다. 가장 긴 것이 실내 화면의 첫 문장(789px)
 * 이라 72ch(814px)로 잡는다 — 네 화면의 첫 문장이 모두 한 줄에 들어간다.
 * 다른 화면(구축·SDK·소식 등)의 읽기 좋은 줄길이는 그대로 두려고
 * .demo-page 안으로 범위를 좁힌다. */
.demo-page .page-head__lead { max-width: 72ch; }
.demo-film__media {
    display: block;
    width: 100%;
    height: auto;
    background: var(--hp-ink);
}
/* 핵심 개념 챕터의 도판 세 개 — 안쪽 패딩값은 --op 와 같지만 위 여백이 없다
 * (.chap-head 가 이미 margin-bottom 26px 를 지고 있어 별도 margin-top 을
 * 얹으면 목업보다 벌어진다). 그래서 값이 겹쳐도 하나로 합치지 않는다. */
.figure-frame--chap { padding: 28px 30px 20px; }

/* 도메인 3단 요약 하단의 작은 메타 줄(예: "김포공항 V3 ↔ 고양킨텍스 V5").
 * 승인된 목업의 홈 아트보드 ⑤에서 왔고 .flow .who 와 같은 크기·굵기를
 * 쓴다. 실증 개관(demo/index.html)이 .ed-cols 안에서 쓴다. */
.tech-meta { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--hp-muted); }
/* .ed-cols 는 홈 화면도 함께 쓰는 공용 블록이라 위 여백을 그 클래스에
 * 바로 넣지 않는다 — 실증 개관에서 도판 바로 아래 놓일 때만 이 변형을
 * 얹는다. */
.ed-cols--demo { margin-top: 40px; }

/* ===== 데이터 수급 경과 — 실증 개관 전용 세로 목록 =====
 * about.css 의 .about-timeline 은 원형 마커(border-radius: 50%)라 이
 * 갈래의 각진 모서리 규칙과 맞지 않고, 애초에 이 화면은 about.css 를
 * 불러오지 않는다. 같은 역할을 각진 표 형태로 다시 짠다. */
/* 아래 여백(56px)은 뒤에 오는 .filters 몫이다 — .filters 자체는
 * research/news/demo 세 갈래 화면이 완전히 같은 모습이어야 하므로 거기에
 * 여백을 얹지 않고(그러면 화면마다 앞에 뭐가 오느냐에 따라 간격이
 * 갈린다), 앞에 놓이는 이 목록이 자기 몫의 간격을 진다. */
.timeline { list-style: none; margin: 40px 0 56px; padding: 0; border-top: 1px solid var(--hp-rule-strong); }
.timeline li {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 10rem;
  gap: 1.25rem; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--hp-border);
}
.timeline-step { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--hp-blue); }
.timeline-desc { font-size: 0.95rem; font-weight: 600; color: var(--hp-text); }
.timeline-date { font-size: 0.8rem; color: var(--hp-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ===== 절차 목록 — 번호 매긴 세로 룰러 목록 =====
 * 데이터 구축 소개의 "사용 방법" 다섯 단계가 쓴다. 바로 위 .timeline 은
 * 날짜 칸이 붙박이라 날짜 없는 절차에 쓰면 빈 칸이 남고, .chap-head 는
 * 챕터 표제부라 격이 다르다. 칸 너비(4.5rem)와 간격(1.5rem)은
 * .chap-head·.org-row 와 맞춰 갈래 전체가 같은 리듬을 쓰게 한다. */
.steps { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--hp-rule-strong); }
.steps li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.5rem; align-items: baseline;
  padding: 1.05rem 0; border-bottom: 1px solid var(--hp-border);
}
.steps-no { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em; color: var(--hp-blue); }
.steps h4 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; color: var(--hp-text); }
.steps p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--hp-text-secondary); }
/* 본문 안에서 화면 이름(예: "데이터 조회" 탭)을 가리키는 강조. 기울임 대신
 * 잉크색 굵은 글자를 쓴다 — 페이퍼로지에 이탤릭 자족이 없다. */
.steps em { font-style: normal; font-weight: 700; color: var(--hp-ink); }

/* ===== 핵심 개념 전용 (챕터·정의·특징 카드) ===== */
.chap { padding-top: 54px; padding-bottom: 56px; border-top: 1px solid var(--hp-rule-strong); }
.chap-head { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; margin-bottom: 26px; }
.chap-no { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em; color: var(--hp-blue); }
.chap-head h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--hp-ink); }
.chap-def {
  margin: 0.8rem 0 0; font-size: 1.06rem; line-height: 1.8; color: var(--hp-text-secondary);
  max-width: 68ch; border-left: 2px solid var(--hp-blue); padding-left: 1.1rem;
}
.feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hp-border); margin-top: 36px; }
.feat > div { padding: 22px 26px 0 0; border-right: 1px solid var(--hp-border); }
.feat > div + div { padding-left: 26px; }
.feat > div:last-child { border-right: none; padding-right: 0; }
.feat h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--hp-ink); }
.feat p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--hp-text-secondary); }
.feat--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 칸이 넉 줄을 넘겨 두 줄로 접히는 경우(데이터 구축 소개의 지원 형식 8종).
 * 원본 .feat 는 한 줄만 전제해 마지막 칸의 세로 룰만 지우므로, 그대로 두면
 * 넷째 칸에 룰이 남고 다섯째 칸이 26px 밀려 위아래 칸이 어긋난다. 줄바꿈
 * 지점을 4의 배수로 짚어 바로잡고, 둘째 줄에는 제 몫의 가로 룰을 준다. */
.feat--rows > div:nth-child(4n) { border-right: none; padding-right: 0; }
.feat--rows > div:nth-child(4n+1) { padding-left: 0; }
.feat--rows > div:nth-child(n+5) { margin-top: 22px; border-top: 1px solid var(--hp-border); }

/* ===== 참여기관 전용 (기관 목록·담당 업무·협력체) ===== */
.grp { padding-top: 44px; }
.grp-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.7rem; border-bottom: 1px solid var(--hp-rule-strong); }
.grp-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--hp-ink); }
.grp-head h2 em { font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: var(--hp-blue); display: block; margin-bottom: 7px; }
.grp-head span { font-size: 0.8rem; color: var(--hp-muted); }
/* 목업은 이름·과제·글 수·화살표 네 칸이지만, 글 수는 기관별로 집계해 주는
 * API가 아직 없어 화면에 내지 않는다(하드코딩한 숫자는 날짜가 찍힌 거짓말이
 * 된다) — 그래서 그리드도 세 칸이다. 집계 API가 생기면 그때 칸과
 * .org-count 규칙을 함께 되살린다. */
.org-row {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr) 1.4rem;
  gap: 1.5rem; align-items: baseline; padding: 1.05rem 0; border-bottom: 1px solid var(--hp-border);
}
.org-name { font-size: 1.05rem; font-weight: 700; color: var(--hp-text); }
.org-name em { display: block; margin-top: 0.28rem; font-style: normal; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; color: var(--hp-blue); }
.org-task { font-size: 0.9rem; line-height: 1.65; color: var(--hp-text-secondary); }
.org-task strong { display: block; font-size: 0.95rem; font-weight: 700; color: var(--hp-text); margin-bottom: 0.2rem; }
.org-row i { font-size: 0.9rem; color: var(--hp-faint); font-style: normal; }
.partner { margin-top: 56px; padding: 26px 30px 28px; background: var(--hp-paper-tint); border: 1px solid var(--hp-border); }
.partner h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--hp-ink); }
.partner p { margin: 0 0 14px; font-size: 13px; line-height: 1.7; color: var(--hp-text-secondary); }
.partner ul { display: flex; flex-wrap: wrap; gap: 8px 0; list-style: none; margin: 0; padding: 0; }
.partner li { font-size: 0.92rem; font-weight: 600; color: var(--hp-text); }
.partner li::after { content: ' · '; color: var(--hp-faint); font-weight: 400; }
.partner li:last-child::after { content: ''; }

/* 실증 네 화면 — 본문과 바닥글(검은 띠) 사이 여백.
 *
 * 이 여백은 main 이 아니라 마지막 블록이 이미 갖고 있는 안쪽 아래 여백에서
 * 나온다. 그런데 개관은 마지막 블록이 `.ed-cols--demo`(40px)이고 나머지 셋은
 * `.flow`(30px)라, 실제로 보이는 간격이 49px 과 33px 로 갈려 있었다.
 *
 * 그래서 더할 값을 화면마다 달리 준다 — 곱을 맞추면 네 화면의 바닥이 서로
 * 어긋나고, 탭으로 오갈 때 바닥이 들썩인다. 최종 간격을 147px 하나로 모아
 * 개관 기준 3배가 되게 하고, 나머지 셋도 같은 자리에 서게 한다. */
.demo-page main.site-container { padding-bottom: 114px; }
.demo-page--overview main.site-container { padding-bottom: 98px; }