/* 공공 AX 페이지(public-tools.html)의 마지막 절 '공공 AI 도입 사례'(#ai-cases) — tokens.css·hub.css·public-repositories.css 위에 절 머리·안내 문단·분야 바로가기·카드를 얹는다.
   배경(오로라·그레인)과 히어로는 공공 AX 쪽 CSS가 그린다 — 여기서 .blob·.phead 를 다시 정의하지 않는다. 클래스는 case-*·ai-cases* 로 분리한다. */
/* 스크립트가 켜는 필터 패널·0건 안내, 필터가 가린 카드 — 카드 display:flex 보다 앞서야 한다 */
.cases [hidden]{display:none!important}

/* 절 머리 — 위의 '공공 AX가 뭔가요?'(.axintro)와 같은 글씨 */
.ai-cases{scroll-margin-top:100px;margin-top:56px;padding-top:40px;padding-bottom:24px;border-top:1px solid var(--glass-line)}
.ai-cases > h2{margin:0;font-family:"Space Grotesk",var(--font-sans);font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--txt)}
.ai-cases-lead{margin:12px 0 24px;max-width:760px;color:var(--read);font-size:15px;line-height:1.8}
.cases{display:grid;gap:28px;min-width:0}
.case-notice{margin:0;padding:14px 18px;border:1px solid var(--glass-line);border-radius:14px;background:rgba(var(--amber-rgb),.05);backdrop-filter:blur(14px);font-size:14px;line-height:1.7;color:var(--read)}

/* 분야별 바로가기 */
.case-fields{scroll-margin-top:100px}
.case-fields h3,.case-catalog h3{font-size:22px;font-weight:600;margin:0 0 12px}
/* 분야별로 보기 = 사례 시간선(빌더 renderCaseTimeline). 점 자리는 left %, 쌓인 높이는 --lv, 줄 높이는 --levels. */
.ctl-note{margin:0 0 8px;color:var(--txt-dim);font-size:13px;line-height:1.65}
.ctl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;font-size:12.5px;color:var(--txt-dim)}
.ctl-legend span{display:inline-flex;align-items:center;gap:6px}
.ctl{list-style:none;margin:0;padding:12px 16px 6px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px)}
.ctl-lane,.ctl-axis{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:14px}
.ctl-lane{padding:6px 0;border-bottom:1px dashed var(--glass-line)}
.ctl-lane-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 12px;border:1px solid var(--glass-line);border-radius:10px;color:var(--txt)}
.ctl-lane-head:hover,.ctl-lane-head:focus-visible{border-color:var(--amber)}
.ctl-lane-head b{font-weight:600}
.ctl-lane-head span{color:var(--txt-dim);font-size:12.5px}
.ctl-track{position:relative;height:calc(var(--levels,1) * 16px + 10px)}
.ctl-axis .ctl-track{height:20px}
.ctl-axis .ctl-track span{position:absolute;left:calc(var(--x,0) * 1%);top:2px;transform:translateX(-50%);font:500 11.5px "Space Grotesk",var(--font-sans);color:var(--txt-dim)}

/* 상태는 카드 배지처럼 중립색 하나로만 — 채운 정도가 보도자료에 적힌 단계다(추진 계획 → 개발 → 시범·실증 → 운영, 우열이 아니다). 미확인은 점선. */
.ctl-dot{position:absolute;left:calc(var(--x,0) * 1%);top:calc(5px + var(--lv,0) * 16px);width:12px;height:12px;margin-left:-6px}
.ctl-dot:hover,.ctl-dot:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.ctl-key{display:inline-block;width:11px;height:11px}
.ctl-dot,.ctl-key{border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--read);background:transparent}
.ctl-developing{background:conic-gradient(var(--read) 0 50%,transparent 50% 100%)}
.ctl-pilot{background:conic-gradient(var(--read) 0 75%,transparent 75% 100%)}
.ctl-operating{background:var(--read)}
.ctl-unknown{box-shadow:none;border:1.5px dashed var(--txt-dim)}
.ctl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 좁은 화면(820px 이하) — 분야 이름을 줄 위에 두고 점 줄이 폭 전체를 쓴다. 점은 좁은 화면용 쌓기 높이(--lvm, 빌더 TIMELINE_GAP_NARROW)로 —
 * 넓은 화면 간격(%)으로는 12px 점이 겹친다. 경계 820px 은 넓은 화면 간격 2.4% 가 14px 이상이 되는 축 폭(583px)에서 왔다. */
@media (max-width:820px){
  .ctl{padding:10px 12px 4px}
  .ctl-lane,.ctl-axis{grid-template-columns:minmax(0,1fr);gap:6px}
  .ctl-axis>span:first-child{display:none}
  .ctl-lane-head{padding:6px 10px}
  .ctl-lane .ctl-track{height:calc(var(--levels-m,1) * 16px + 10px)}
  .ctl-dot{top:calc(5px + var(--lvm,0) * 16px)}
}

/* 목록·필터 */
.case-catalog{scroll-margin-top:100px;min-width:0}
.case-controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin:0 0 12px;padding:14px 16px;border:1px solid var(--glass-line);border-radius:12px;background:var(--panel)}
.case-controls label{display:grid;gap:4px;font-size:12px;color:var(--txt-dim);min-width:0}
.case-controls input[type=search],.case-controls select{min-height:36px;max-width:100%;padding:6px 10px;border:1px solid var(--glass-line);border-radius:8px;background:transparent;color:var(--txt);font-size:14px}
.case-controls select option{background:var(--bg-2);color:var(--txt)}
.case-field-search{flex:1 1 220px}
#case-reset{min-height:36px;padding:0 14px;border:1px solid var(--glass-line);border-radius:999px;background:transparent;color:var(--txt);font:inherit;font-size:13px;cursor:pointer}
#case-reset:disabled{opacity:.45;cursor:default}
#case-count{color:var(--txt-dim);font-size:13px;margin:0 0 10px}
#case-empty{margin:16px 0 0;padding:14px 16px;border:1px dashed var(--glass-line);border-radius:12px;color:var(--read);font-size:14px}
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}

/* 카드 */
.case{position:relative;scroll-margin-top:100px;display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px 18px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);cursor:pointer;overflow-wrap:anywhere}
.case:target,.case.is-current{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.case-tags{display:flex;flex-wrap:wrap;gap:6px}
.case-tags span{padding:2px 8px;border:1px solid var(--glass-line);border-radius:999px;font-size:11.5px;color:var(--txt-dim)}
/* 상태 배지는 모두 중립색 — '운영'을 우열로 읽지 않게 한다. 미확인만 점선. */
.case-tags .case-status-unknown{border-style:dashed}
.case-tags .case-asof{border-color:transparent;padding-left:2px}
.case-agency{margin:0;font-size:12.5px;color:var(--amber)}
.case h4{font-size:15.5px;line-height:1.45;margin:0;color:var(--txt)}
.case-state{margin:0;font-size:12.5px;line-height:1.6;color:var(--txt-dim)}
.case-state span{display:inline-block;margin-left:4px}
.case-summary{margin:0;font-size:13.5px;line-height:1.65;color:var(--read)}
.case-point{font-size:13.5px;line-height:1.6;padding:8px 10px;border-radius:8px;background:rgba(var(--ember-rgb),.06)}
.case-point b{margin-right:6px;color:var(--amber)}
.case-related{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0;font-size:12.5px}
.case-related b{font-weight:500;color:var(--txt-dim)}
.case-related a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.case-related span{margin-right:4px;color:var(--txt-dim)}
.case-related-more{display:block}
.case-related-more summary{width:max-content;cursor:pointer;color:var(--txt-dim)}
.case-related-more summary:hover{color:var(--amber)}
.case-related-more p{display:flex;flex-wrap:wrap;gap:6px 12px;margin:6px 0 0}
.case-sources{list-style:none;margin:auto 0 0;padding:8px 0 0;border-top:1px solid var(--glass-line);font-size:12px;line-height:1.6;color:var(--txt-dim)}
.case-sources li+li{margin-top:4px}
.case-sources a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}

@media (max-width:560px){
  .case-grid{grid-template-columns:minmax(0,1fr)}
  .case-controls label:not(.case-field-search){flex:1 1 calc(50% - 7px)}
  .case-controls select{width:100%}
}
@media print{
  .card-pick,.case-controls{display:none!important}
  .case-grid{display:block}
  .case{margin:0 0 8px;break-inside:avoid}
}