/* 프로젝트 목록과 조사 상세. 공통 색·간격 토큰을 따릅니다.
   틀(목차·번호 칸·숫자 타일·Fig. 그림틀·접힌 자세히)은 공통 부품 docs-kit.css 가 담당합니다. */
.projects-shell [data-l="en"] { display: none; }
html[data-lang="en"] .projects-shell [data-l="ko"] { display: none; }
html[data-lang="en"] .projects-shell [data-l="en"] { display: inline; }
.projects-shell { color: var(--pagu-fg); padding-bottom: 24px; }
.projects-shell p { max-width: none; }
.projects-shell .page-title { margin-bottom: 12px; }
.projects-shell .page-title h1 { font-size: 22px; }
.projects-article > .docs-section:first-child { border-top: 0; }
.projects-shell [hidden] { display: none !important; }
.project-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Docs 틀 안에서 이 페이지 부품의 모양을 지킵니다. docs-kit.css 의 본문 규칙
   (.docs-section > p / ul / li, 특이성 0,1,1)이 목록·개수 줄에도 들여쓰기와
   큰 글자를 입히므로 앞에 .projects-article 을 붙여(0,2,0) 되돌립니다. */
.projects-article .project-result-count { color: var(--pagu-muted); font-size: var(--pagu-text-sm); }
.projects-article .project-card h2 { scroll-margin-top: 0; }
.projects-article :is(.project-link-list, .project-timeline) { padding-left: 0; }
.projects-article :is(.project-link-list, .project-timeline) li { margin-bottom: 0; }
/* 목록 필터 — 넓은 화면에서는 헤더 아래에 붙고, 좁은 화면에서는 칩 열 목차만 붙습니다. */
.projects-filters {
  position: sticky; top: var(--projects-header-height, 52px); z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 8px 0; background: var(--pagu-bg);
  border-bottom: 1px solid var(--pagu-line);
}
.projects-categories { display: flex; flex-wrap: wrap; gap: var(--pagu-space-2); flex: 1 1 auto; }
.project-filter {
  min-height: var(--pagu-control-height); padding: 4px 8px;
  border: 1px solid var(--pagu-line); border-radius: var(--pagu-radius-sm);
  color: var(--pagu-muted); background: var(--pagu-panel); font: inherit; cursor: pointer;
  transition: background var(--pagu-duration) var(--pagu-ease), border-color var(--pagu-duration) var(--pagu-ease);
}
.project-filter[aria-pressed="true"] { color: var(--pagu-accent); background: var(--pagu-bg-subtle); border-color: var(--pagu-accent); }
.projects-search { flex: 0 1 300px; min-width: 0; }
.projects-search input {
  width: 100%; min-height: var(--pagu-control-height); box-sizing: border-box;
  padding: 4px 8px; border: 1px solid var(--pagu-line-strong);
  border-radius: var(--pagu-radius-md); background: var(--pagu-panel); color: var(--pagu-fg); font: inherit;
}
.projects-search input::placeholder { color: var(--pagu-muted); }
.projects-shell :is(a, button, input):focus-visible { outline: 2px solid var(--pagu-focus); outline-offset: 4px; }
.projects-article .project-result-count { margin: 8px 0; }
/* 핵심 줄은 대표 화면과 같은 중성 경계로 구분합니다. */
.project-key {
  margin: 8px 0; padding: 8px 0; border-block: 1px solid var(--pagu-line);
  color: var(--pagu-fg); font-size: 13px; font-weight: 600; line-height: 1.5;
}
/* 처음 나오는 용어 옆 짧은 풀이 */
.project-jargon { margin: 4px 0 8px; color: var(--pagu-muted); font-size: 12px; line-height: 1.5; }
/* 상세 리드 — 제품·토큰 현황을 다루는 페이지라는 한 문장 */
.project-hero-lead { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pagu-muted); font-weight: 400; }
/* 분류별 막대 (Fig. 1) — 칸 전체가 아래 목록의 필터 버튼 역할을 합니다. */
.projects-cat { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.projects-cat-row {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: center; column-gap: var(--pagu-space-3);
  min-height: var(--pagu-control-height); padding: 4px 8px;
  border: 1px solid transparent; border-radius: var(--pagu-radius-sm);
  background: transparent; color: var(--pagu-fg); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--pagu-duration) var(--pagu-ease), border-color var(--pagu-duration) var(--pagu-ease);
}
.projects-cat-row:hover { background: var(--pagu-bg-subtle); }
.projects-cat-row[aria-pressed="true"] { border-color: var(--pagu-accent); background: var(--pagu-bg-subtle); }
.projects-cat-name { font-size: 13px; font-weight: 600; }
.projects-cat-bar { display: block; height: 8px; border-radius: var(--pagu-radius-sm); background: var(--pagu-bg-subtle); border: 1px solid var(--pagu-line); overflow: hidden; }
.projects-cat-bar i { display: block; height: 100%; width: var(--w, 0%); background: var(--pagu-muted); }
.projects-cat-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--pagu-muted); font-size: var(--pagu-text-sm); white-space: nowrap; }
.projects-cat-u { font-size: var(--pagu-text-xs); }
/* 막대는 그림이 한 번 보일 때 왼쪽에서 채워집니다. JS가 .motion-on/.is-seen 을 붙이지 못해도 끝 모양이 먼저 보입니다. */
.docs-fig.motion-on .projects-cat-bar i { clip-path: inset(0 100% 0 0); }
.docs-fig.motion-on.is-seen .projects-cat-bar i { clip-path: inset(0 0 0 0); transition: clip-path 700ms var(--pagu-ease); transition-delay: calc(var(--i, 0) * 80ms); }
.projects-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; border: 1px solid var(--pagu-line); border-radius: var(--pagu-radius-md); background: var(--pagu-line); }
.projects-grid:not(:has(.project-card:not([hidden]))) { border: 0; }
/* 필터로 마지막 줄에 카드 한 장만 남으면 줄 전체로 펼친다 (JS가 붙인다) */
.projects-grid .project-card--span { grid-column: 1 / -1; }
.projects-grid:not(:has(> .project-card:not([hidden]) ~ .project-card:not([hidden]))) > .project-card:not([hidden]) { grid-column: 1 / -1; }
.project-card {
  position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0;
  min-width: 0; padding: 12px; border: 0; border-radius: 0; background: var(--pagu-panel);
}
.project-card:hover { background: var(--pagu-bg-subtle); }
.project-card:focus-within { outline: 2px solid var(--pagu-focus); outline-offset: -2px; }
.project-card-top { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.project-card-heading { min-width: 0; flex: 1; }
.project-monogram {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px;
  border-radius: var(--pagu-radius-md); font-size: var(--pagu-text-lg); font-weight: 750;
  background: var(--pagu-bg-subtle); color: var(--pagu-muted);
}
/* 원본 로고는 32px 상자로 유지합니다. */
.project-logo {
  flex: 0 0 32px; width: 32px; height: 32px; object-fit: cover;
  border: 1px solid var(--pagu-line-strong); border-radius: var(--pagu-radius-md);
  background: var(--pagu-bg-subtle);
}
/* 분류·단계·체인은 긴 문구도 줄바꿈해 모두 보여 줍니다. */
.project-card .project-chip, .project-hero .project-chip { max-width: 100%; white-space: normal; }
/* X 링크와 이름 링크의 터치 영역을 겹치지 않게 나란히 둡니다. */
.project-x-link {
  position: relative; z-index: 2; flex: 0 0 auto;
  width: var(--pagu-control-height); height: var(--pagu-control-height); margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--pagu-muted); text-decoration: none;
  transition: color var(--pagu-duration) var(--pagu-ease);
}
.project-x-link:hover, .project-x-link:focus-visible { color: var(--pagu-accent); }
.project-x-icon { width: 20px; height: 20px; fill: currentColor; }
.project-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.project-chip {
  display: inline-block; padding: 2px 4px;
  color: var(--pagu-muted); background: var(--pagu-neutral-weak); border-radius: var(--pagu-radius-sm);
  font-size: var(--pagu-text-xs); line-height: 1.5; overflow-wrap: anywhere;
}
.projects-article .project-card h2 { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.4; display: flex; align-items: center; flex-wrap: wrap; }
.project-name-link { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: var(--pagu-control-height); min-width: 0; max-width: 100%; color: var(--pagu-fg); text-decoration: none; overflow-wrap: anywhere; }
.project-name-link:hover { color: var(--pagu-accent); }
.project-icon { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; margin-left: var(--pagu-space-1); }
.project-card .project-icon { width: 16px; height: 16px; }
/* 소개는 자르지 않고 같은 줄 카드와 높이를 공유합니다. */
.project-card .project-tagline { color: var(--pagu-muted); margin: 0 0 8px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
/* 카드 사실표 — 값은 소유자 확인 대상이므로 자르지 않고 필요하면 두 줄로 넘깁니다. */
.project-card-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 8px; border-top: 1px solid var(--pagu-line); }
.project-fact { min-width: 0; }
.project-fact dt { font-size: 12px; color: var(--pagu-muted); margin-bottom: 4px; }
.project-fact dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 650; }
.project-card-facts :is(dt, dd) { text-align: left; }
.project-card-facts .project-fact--number :is(dt, dd) { text-align: right; }
.project-card-facts dd { font-size: var(--pagu-text-sm); overflow-wrap: break-word; word-break: keep-all; }
.project-detail-link { color: var(--pagu-muted); display: flex; align-items: center; justify-content: flex-end; min-height: 28px; text-decoration: none; }
.project-detail-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.project-detail-link:focus-visible::after { outline: 2px solid var(--pagu-focus); outline-offset: 4px; }
.project-card-cta { font-size: var(--pagu-text-lg); line-height: 1; color: var(--pagu-muted); }
.project-card:hover .project-card-cta, .project-card:focus-within .project-card-cta { color: var(--pagu-accent); }
.projects-empty { padding: var(--pagu-space-8) var(--pagu-space-5); text-align: center; color: var(--pagu-muted); }
.projects-empty img { display: block; margin: 0 auto var(--pagu-space-4); }
.project-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--pagu-muted); font-size: 12px; margin: 0 0 8px; }
.project-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--pagu-control-height); color: var(--pagu-muted); }
.project-hero { padding-bottom: 12px; }
.project-hero-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.project-hero h1 { margin: 0; font-size: 22px; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.project-hero-tagline { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--pagu-muted); }
.project-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* 상세 핵심 수치 타일 — 투자·토큰·단계·체인 4칸, 공개 지표는 다음 줄에서 자동 배분. */
.projects-article .project-fact-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.projects-article .project-fact-stats .docs-stat-v { font-size: 15px; overflow-wrap: anywhere; }
.projects-article .project-metric-stats { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.projects-article .project-metric-stats:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.projects-article .docs-stats { gap: 1px; background: var(--pagu-line); }
.projects-article .docs-stat + .docs-stat { border-left: 0; }
.projects-article .docs-stat { min-width: 0; background: var(--pagu-panel); }
.projects-article .docs-stat-v { margin: 0; font-size: 20px; }
.projects-article .docs-stat-l { margin: 4px 0 0; }
.projects-article .docs-stat-s { margin: 4px 0 0; color: var(--pagu-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.projects-article .docs-stat-s a { color: var(--pagu-muted); }
.project-chain-list { display: flex; flex-wrap: wrap; gap: 0 var(--pagu-space-2); }
.project-chain-list .project-chip { max-width: 100%; white-space: normal; font-weight: 600; }
/* 번호 칸의 한 줄 사실 — 라벨 회색·값 굵게 (팀과 투자·토큰과 포인트의 보이는 요약). */
.projects-article .project-line-fact { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.project-line-label { color: var(--pagu-muted); margin-right: var(--pagu-space-1); }
.project-section p, .project-prose-list { line-height: 1.5; color: var(--pagu-muted); margin-top: 0; }
.projects-article .project-prose-list { padding-left: var(--pagu-space-5); }
.project-prose-list li + li { margin-top: 4px; }
/* 확인할 점 — 위험 문장은 전부 보이게, 주의 상자 안의 촘촘한 목록으로. */
.projects-article .project-risks .project-prose-list { margin: 0; color: var(--pagu-fg); line-height: 1.5; }
.projects-article .project-risks .project-prose-list li + li { margin-top: var(--pagu-space-2); }
.project-rounds { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 19px; table-layout: fixed; }
.project-detail-shell .project-rounds :is(th, td) { height: 36px; padding: 8px; vertical-align: top; border-bottom: 1px solid var(--pagu-line); text-align: left; overflow-wrap: anywhere; }
.project-rounds th { color: var(--pagu-muted); font-weight: 500; }
.project-rounds th:nth-child(1) { width: 11%; }
.project-rounds th:nth-child(2) { width: 18%; }
.project-rounds th:nth-child(3) { width: 12%; }
.project-rounds th:nth-child(4) { width: 20%; }
.project-rounds th:nth-child(5) { width: 31%; }
.project-rounds th:nth-child(6) { width: 8%; }
.project-detail-shell .project-rounds .project-number { text-align: right; font-variant-numeric: tabular-nums; }
.project-rounds a { padding-block: 8px; margin-block: -8px; }
.project-mobile-label { display: none; }
.project-timeline { list-style: none; padding: 0; margin: 0; }
.project-timeline li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--pagu-line); font-size: 13px; line-height: 1.5; }
.project-timeline time { color: var(--pagu-muted); font-variant-numeric: tabular-nums; }
/* 일정 Fig. 안 마지막 줄의 이중 테두리를 정리합니다. */
.project-timeline-fig .project-timeline li:last-child { border-bottom: 0; padding-bottom: 0; }
.project-timeline-fig .project-timeline li:first-child { padding-top: var(--pagu-space-2); }
.project-link-list { display: flex; flex-wrap: wrap; list-style: none; gap: 4px 16px; padding: 0; margin: 0; }
.project-link-list a, .project-sources a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--pagu-control-height); overflow-wrap: anywhere; }
.project-link-list .project-icon { margin-left: 0; }
.project-sources { padding-left: var(--pagu-space-5); }
.project-sources small, .project-research-date { color: var(--pagu-muted); font-size: var(--pagu-text-sm); }
/* 목록으로·이전·다음 이동 — 번호 칸 리듬에 맞춰 위에 헤어라인을 둡니다. */
.project-pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--pagu-line); }
.project-pagination a { display: flex; flex-direction: column; justify-content: center; min-height: var(--pagu-control-height); padding: 4px 0; overflow-wrap: anywhere; }
.project-pagination a:last-child { text-align: right; }
.project-pagination small { color: var(--pagu-muted); margin-bottom: 4px; font-size: 12px; }
/* 폰 1열, 태블릿 2열, 데스크톱 3열. 내용은 열 너비 안에서 줄바꿈합니다. */
@media (min-width: 640px) { .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .projects-article .docs-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: baseline; gap: 0 8px; padding-block: 6px; }
  .projects-article .docs-stat-l { grid-column: 1; grid-row: 1; margin: 0; text-align: left; }
  .projects-article .docs-stat-v { grid-column: 2; grid-row: 1; }
  .projects-article .docs-stat-s { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .projects-shell .docs-toc { padding-top: 0; }
}
@media (max-width: 1023.98px) {
  .projects-filters { position: static; }
  .project-hero-lead { flex-basis: 100%; }
}
@media (max-width: 860px) {
  .projects-article .project-fact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .projects-search { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .project-rounds, .project-rounds tbody, .project-rounds tr, .project-rounds td { display: block; width: 100%; }
  .project-rounds thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .project-rounds tr { margin: 0; padding: 12px; border: 1px solid var(--pagu-line); border-radius: 0; box-sizing: border-box; }
  .project-rounds tr + tr { border-top: 0; }
  .project-detail-shell .project-rounds td { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: baseline; gap: 12px; height: auto; padding: 8px 0; box-sizing: border-box; }
  .project-rounds td:last-child { border-bottom: 0; }
  .project-rounds .project-round-value { grid-column: 2; min-width: 0; text-align: right; }
  .project-mobile-label { display: block; color: var(--pagu-muted); text-align: left; }
  .project-timeline li { grid-template-columns: 86px minmax(0, 1fr); gap: var(--pagu-space-3); }
  .project-pagination { font-size: var(--pagu-text-sm); gap: var(--pagu-space-2); }
}
@media (max-width: 767px), (pointer: coarse) {
  .project-filter, .projects-search input, .projects-cat-row, .project-name-link,
  .project-breadcrumb a, .project-link-list a, .project-sources a, .project-pagination a { min-height: 44px; }
  .project-x-link { width: 44px; height: 44px; }
  .project-rounds a { display: inline-flex; min-height: 44px; align-items: center; padding: 0; margin: 0; }
}
@media (hover: none) { .project-card-cta { color: var(--pagu-accent); } }
@media (prefers-reduced-motion: reduce) {
  .project-card, .project-filter, .projects-cat-row { transition: none; animation: none; }
  .project-card:hover { transform: none; }
}