/* 근거 자료 — 소방 기관 사이트·소방 공식 문서(practice.html · practice-agencies.html) — tokens.css·hub.css 위에 배경(오로라·그레인)·색인 히어로·업무 지도·카드·표를 얹는다.
   클래스는 fp-* 로 분리한다. 색은 토큰으로만 쓴다(theme-ratchet 상한 0). 사진 히어로가 아니라 다크 섬이 아니며, 두 테마에서 같은 규칙이 닿는다. */
.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:620px;height:620px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-240px;right:-160px;animation:fpb1 22s ease-in-out infinite alternate}
.blob.b{width:480px;height:480px;background:radial-gradient(circle,var(--glow3),transparent 60%);top:52%;left:-200px;animation:fpb2 26s ease-in-out infinite alternate}
@keyframes fpb1{to{transform:translate(-70px,60px) scale(1.08)}}
@keyframes fpb2{to{transform:translate(60px,-50px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob.a,.blob.b{animation:none}}
/* 스크립트가 켜는 필터 패널·0건 안내, 필터가 가린 카드 — 카드 display 보다 앞서야 한다 */
.fp [hidden],.fp-main [hidden]{display:none!important}

.fp-main{padding-bottom:72px}

/* ── 히어로: 제목·이동·숫자 요약 ── */
.fp-hero{display:block;padding-top:44px;padding-bottom:28px}
.fp-hero-copy{min-width:0}
.fp-eyebrow{margin:0 0 14px;font:600 11px/1.5 "Space Grotesk",var(--font-sans);letter-spacing:.16em;color:var(--ember)}
.fp-hero h1{margin:0;font-size:clamp(38px,5.4vw,68px);font-weight:700;font-family:"Space Grotesk",var(--font-sans);letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
.fp-hero h1 .it{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--amber),var(--ember),var(--crim));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .14em 0 .04em}
.fp-lead{margin:20px 0 0;max-width:600px;color:var(--read);font-size:16px;line-height:1.75;text-wrap:pretty}
.fp-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:26px}
.fp-page-links{display:flex;gap:4px;padding:4px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass)}
.fp-page-links a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 20px;border-radius:8px;color:var(--txt-dim);font-size:14px;font-weight:600}
.fp-page-links a[aria-current=page]{background:var(--ember);color:var(--on-accent)}
.fp-page-links a:not([aria-current]):hover{background:rgba(var(--ember-rgb),.08);color:var(--txt)}
.fp-section-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.fp-section-links a{display:flex;align-items:center;min-height:44px;font-size:13px;color:var(--txt-dim)}
.fp-section-links a:hover{color:var(--ember)}
.fp-nav a:focus-visible,.fp-card a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
/* 숫자 요약 — 이름 위 큰 숫자(지식 그래프 입구와 같은 읽기 순서, 2026-10-25) */
.fp-hero .hero-stats{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:30px;padding-top:20px;border-top:1px solid var(--glass-line)}
.fp-hero .hero-stats div{display:flex;flex-direction:column-reverse;gap:7px}
.fp-hero .hero-stats b{font:600 34px/1 "Space Grotesk",var(--font-sans);letter-spacing:-.02em;color:var(--txt)}
.fp-hero .hero-stats span{font-size:12px;color:var(--txt-dim)}

/* ── 소방 공식 문서 히어로 오른쪽: 업무 분야 패널(BUILD:PRACTICEMAP) — fp-wfp-* 는 기관 분야 지도(.fp-map·.fp-wf-tile)와 따로 ── */
.fp-hero-panel{min-width:0}
.fp-wfp{scroll-margin-top:96px;padding:18px 14px 14px;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card)}
.fp-wfp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 12px;padding:0 8px 12px;border-bottom:1px solid var(--glass-line)}
.fp-wfp-head h2{margin:0;font:600 12px/1.4 "Space Grotesk",var(--font-sans);letter-spacing:.14em;color:var(--txt-dim)}
.fp-wfp-key{display:flex;gap:14px;margin:0;font-size:11.5px;color:var(--txt-dim)}
.fp-wfp-key span{display:inline-flex;align-items:center;gap:6px}
.fp-wfp-key span::before{content:"";width:12px;height:6px;border-radius:2px}
.fp-wfp-key .is-cur::before,.fp-wfp-bar .is-cur{background:var(--ember)}
.fp-wfp-key .is-arc::before,.fp-wfp-bar .is-arc{background:rgba(var(--ember-rgb),.3)}
.fp-wfp-list{list-style:none;margin:6px 0 0;padding:0;display:grid}
.fp-wfp-row{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(56px,104px) 66px;align-items:center;gap:12px;min-height:54px;padding:8px;border-radius:10px;color:var(--txt);transition:background .2s,box-shadow .2s}
.fp-wfp-row:hover{background:rgba(var(--ember-rgb),.07)}
.fp-wfp-row:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.fp-wfp-row[aria-current="true"]{background:rgba(var(--ember-rgb),.12);box-shadow:inset 3px 0 0 var(--ember)}
.fp-wfp-n{font:600 11.5px/1 "Space Grotesk",var(--font-sans);color:var(--ember);letter-spacing:.06em}
.fp-wfp-text{min-width:0;display:grid;gap:3px}
.fp-wfp-text b{font-size:14.5px;font-weight:700;line-height:1.3}
.fp-wfp-topics{font-size:11.5px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-wfp-bar{display:flex;height:6px;border-radius:999px;background:var(--glass-line);overflow:hidden}
.fp-wfp-bar i{display:block;flex:none;width:var(--w);height:100%}
.fp-wfp-c{display:grid;gap:4px;text-align:right}
.fp-wfp-c b{font:600 22px/1 "Space Grotesk",var(--font-sans);color:var(--txt)}
.fp-wfp-c span{font-size:10.5px;color:var(--txt-dim);white-space:nowrap}
.fp-wfp-note{margin:12px 8px 0;font-size:12px;line-height:1.6;color:var(--txt-dim)}
@media (prefers-reduced-motion:reduce){.fp-wfp-row{transition:none}}

/* ── 공통 절 ── */
.fp-body{margin-top:12px}
.fp{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.fp-section{scroll-margin-top:96px}
.fp-head{margin:0 0 16px;max-width:760px}
.fp-head p{margin:0;font-size:14px;line-height:1.7;color:var(--txt-dim)}
.fp a:not(.fp-wf-tile):not(.fp-title-link){color:var(--link)}
.fp a:not(.fp-wf-tile):not(.fp-title-link):hover{color:var(--ember)}

/* ── 업무 지도 ── */
.fp-wf-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fp-wf-tile{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 16px 14px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(14px);color:var(--txt);transition:border-color .2s,transform .2s,box-shadow .2s}
.fp-wf-tile:hover,.fp-wf-tile:focus-visible{border-color:rgba(var(--ember-rgb),.6);transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.fp-wf-tile[aria-current="true"]{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember)}
.fp-wf-n{font:600 12px/1 "Space Grotesk",var(--font-sans);color:var(--ember);letter-spacing:.08em}
.fp-wf-tile b{font-size:16px;font-weight:700;line-height:1.35}
.fp-wf-topics{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.fp-wf-topics span{padding:1px 7px;border-radius:6px;background:rgba(var(--ember-rgb),.07);font-size:11.5px;color:var(--txt-dim)}
.fp-wf-c{margin-top:auto;padding-top:8px;font:600 12.5px/1.4 "Space Grotesk",var(--font-sans);color:var(--txt-dim)}

/* ── 필터 ── */
.fp-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);backdrop-filter:blur(14px)}
.fp-controls label{display:grid;gap:4px;font-size:12px;color:var(--txt-dim);min-width:0}
.fp-controls input[type=search],.fp-controls select{min-height:40px;max-width:100%;padding:6px 10px;border:1px solid var(--glass-line);border-radius:8px;background:transparent;color:var(--txt);font:inherit;font-size:14px}
.fp-controls select option{background:var(--bg-2);color:var(--txt)}
.fp-controls :is(input,select):focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.fp-field-search{flex:1 1 240px}
.fp-reset,#fp-site-clear{min-height:40px;padding:0 14px;border:1px solid var(--glass-line);border-radius:999px;background:transparent;color:var(--txt);font:inherit;font-size:13px;cursor:pointer}
.fp-reset:disabled{opacity:.45;cursor:default}
.fp-site-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;padding:10px 14px;border:1px solid rgba(var(--ember-rgb),.4);border-radius:10px;background:rgba(var(--ember-rgb),.06);font-size:13.5px}
.fp-site-filter span{color:var(--txt)}
#fp-site-clear{min-height:32px}
.fp-count{margin:0 0 10px;color:var(--txt-dim);font-size:13px}
.fp-empty{margin:16px 0 0;padding:14px 16px;border:1px dashed var(--glass-line);border-radius:12px;color:var(--read);font-size:14px}

/* ── 카드 ── */
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.fp-card{position:relative;scroll-margin-top:96px;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;transition:border-color .2s}
.fp-card:hover{border-color:rgba(var(--ember-rgb),.35)}
.fp-card:target,.fp-card.is-current{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.fp-card :is(h3,h4){margin:2px 0 0;font-size:15.5px;line-height:1.4;font-weight:700}
.fp-title-link{color:var(--txt);text-decoration:none}
.fp-title-link::after{content:"↗";margin-left:6px;font-size:12px;color:var(--txt-dim)}
.fp-title-link:hover{color:var(--ember);text-decoration:underline;text-underline-offset:4px}
.fp-sum{margin:0;font-size:13px;line-height:1.65;color:var(--read)}
.fp-meta{margin:0;font-size:12.5px;line-height:1.6;color:var(--txt-dim)}
.fp-tag{display:inline-block;padding:1px 8px;border:1px solid rgba(var(--amber-rgb),.5);border-radius:999px;background:rgba(var(--amber-rgb),.08);color:var(--read);font-size:12px;font-weight:600}
.fp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:auto 0 0;padding-top:8px;border-top:1px solid var(--glass-line);font-size:13px}
/* 소방 공식 문서: 카드마다 반복되는 제공 기관 링크는 흐린 글자(주황 반복을 줄인다) */
.fp[data-fp-page="practice"] .fp-foot a{color:var(--txt-dim)}
.fp[data-fp-page="practice"] .fp-foot a:hover{color:var(--ember)}

/* ── 기관 분야 묶음: 번호 · 이름 · 수 · (좁은 화면) 접기 · 분야 목록으로 ── */
.fp-group{margin-top:26px;scroll-margin-top:96px}
/* 묶음 제목·목록 앵커(#…-title·#…-list)로 들어와도 떠 있는 내비 아래에 멈춘다 — 브라우저가 불러온 뒤 조각 주소로 다시 스크롤한다 */
.fp-group :is([id$="-title"],[id$="-list"]){scroll-margin-top:96px}
.fp-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 12px;padding:4px 0 10px;border-bottom:1px solid var(--glass-line)}
.fp-group-n{font:600 12px/1 "Space Grotesk",var(--font-sans);color:var(--ember);letter-spacing:.08em}
/* 분야 이름 — 소방 공식 문서의 기록 자료 절도 같은 머리(이름<span>수</span>)를 쓴다. 기관 사이트는 머리 줄(.fp-group-head) 안에서 덮는다 */
.fp-group-title{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-size:17px;font-weight:600}
.fp-group-title span{font:600 12.5px/1 "Space Grotesk",var(--font-sans);color:var(--txt-dim)}
/* 소방 공식 문서의 문서 목록 묶음 — 제목 안의 번호(기관 사이트는 머리 줄 .fp-group-head 의 번호) */
.fp-group-title .fp-group-n{font-size:12px;color:var(--ember);letter-spacing:.06em}
.fp-catalog .fp-group-title{margin-bottom:12px}

/* ── 기록 자료: 두 단의 가벼운 목록 줄(문서 목록의 카드와 구분) ── */
.fp-archive{padding-top:36px;border-top:1px solid var(--glass-line)}
.fp-archive .fp-group-title{font-size:15px}
.fp-archive .fp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.fp-card.is-row{gap:3px;padding:12px 4px 11px;border:0;border-bottom:1px solid var(--glass-line);border-radius:0;background:none;backdrop-filter:none}
.fp-card.is-row:hover{background:rgba(var(--ember-rgb),.04)}
.fp-card.is-row:target,.fp-card.is-row.is-current{box-shadow:inset 3px 0 0 var(--amber)}
.fp-card.is-row h4{font-size:14px;font-weight:600;line-height:1.45}
.fp-card.is-row .fp-sum{font-size:12.5px;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-card.is-row .fp-meta{font-size:11.5px}
.fp-card.is-row .fp-foot{display:none}
@media (max-width:760px){.fp-archive .fp-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.fp-wfp-row{grid-template-columns:22px minmax(0,1fr) 60px}.fp-wfp-bar{display:none}}
.fp-group-head .fp-group-title{display:block;margin:0;font-weight:700}
.fp-group-c{font-size:13px;color:var(--txt-dim)}
.fp .fp-group-head a.fp-group-top{margin-left:auto;font-size:12px;color:var(--txt-faint)}
.fp .fp-group-head a.fp-group-top:hover{color:var(--ember)}
.fp-fold{margin-left:auto;min-height:36px;padding:0 14px;border:1px solid var(--glass-line);border-radius:999px;background:transparent;color:var(--txt);font:inherit;font-size:12.5px;cursor:pointer}
.fp-group.is-folded .fp-group-head{margin-bottom:0}
.fp-group.is-folded .fp-grid{display:none}
.fp-fold:focus-visible,.fp-group-top:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ── 히어로 두 칸: 글 | 연결 그림(기관 사이트만) ── */
.fp-hero.fp-hero-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px 48px;align-items:center}
.fp-hero-split h1{font-size:clamp(38px,4.6vw,60px)}
.fp-hero-fig{min-width:0}
.fp-flow{margin:0;padding:18px 18px 14px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px)}
.fp-flow-svg{display:block;width:100%;height:auto;font:500 11.5px/1 var(--font-sans)}
.fp-flow-svg text{fill:var(--txt-dim)}
.fp-flow-svg .fp-flow-axis{fill:var(--txt-faint);font-size:10.5px;letter-spacing:.04em}
.fp-flow-svg .fp-flow-n{fill:var(--txt-faint);font:600 10.5px "Space Grotesk",var(--font-sans)}
.fp-flow-link{fill:none;stroke:rgba(var(--ember-rgb),.3);transition:stroke .15s}
.fp-flow-bar{fill:rgba(var(--ink-rgb),.14)}
.fp-flow-fill{fill:var(--ember)}
.fp-flow-wf{fill:var(--green)}
.fp-flow-node{cursor:pointer}
.fp-flow-node.is-none text{fill:var(--txt-faint)}
.fp-flow-node:hover text{fill:var(--txt)}
.fp-flow.is-hl .fp-flow-link{stroke:rgba(var(--ink-rgb),.08)}
.fp-flow.is-hl .fp-flow-link.on{stroke:rgba(var(--ember-rgb),.75)}
.fp-flow figcaption{margin-top:10px;font-size:12px;line-height:1.65;color:var(--txt-dim)}
.fp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* 표(table)에는 width·overflow 가 듣지 않아 숨은 표가 내용 폭(1,200px 남짓)으로 그려져 데스크톱에 가로 넘침을 냈다(2026-10-25) —
   그림 상자를 기준 상자로 두고 그 안에서 잘라 낸다. 화면 낭독은 그대로다 */
.fp-flow{position:relative;overflow:hidden}
.fp-flow .fp-sr{left:0;top:0}
@media (prefers-reduced-motion:reduce){.fp-flow-link{transition:none}}


/* 기관 분야 지도 — 업무 지도 부품에 기관 이름 미리 보기 */
.fp-field-grid .fp-wf-tile b{font-size:15px}
.fp-field-names{font-size:12px;line-height:1.55;color:var(--txt-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:1100px){
  .fp-wf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fp-wf-grid.fp-field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fp-hero.fp-hero-split{grid-template-columns:minmax(0,1fr)}
  .fp-hero-fig{max-width:760px}
}
@media (max-width:860px){
  .fp-wf-grid.fp-field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fp .fp-group-head a.fp-group-top{display:none}
  /* 이름·수는 왼쪽 두 줄, 접기 단추는 오른쪽 — 긴 분야 이름에서도 단추가 따로 한 줄을 차지하지 않는다 */
  .fp-group-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 10px}
  .fp-group-n{grid-column:1;grid-row:1}
  .fp-group-title{grid-column:2;grid-row:1}
  .fp-group-c{grid-column:2;grid-row:2}
  .fp-fold{grid-column:3;grid-row:1/span 2;margin-left:0}
}
@media (max-width:600px){
  .fp-hero-fig{display:none}
  .fp-wf-grid.fp-field-grid{display:flex;flex-wrap:wrap;gap:6px}
  .fp-field-grid .fp-wf-tile{flex-direction:row;align-items:baseline;gap:6px;height:auto;padding:8px 12px;border-radius:999px}
  .fp-field-grid .fp-wf-n,.fp-field-names,.fp-field-docs{display:none}
  .fp-field-grid .fp-wf-tile b{font-size:13.5px;font-weight:600}
  .fp-field-grid .fp-wf-c{margin:0;padding:0;font-size:12px}
}
@media (max-width:900px){
  .fp-hero{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:44px}
}
@media (max-width:560px){
  .fp-hero.wrap,.fp-body.wrap{padding-left:16px;padding-right:16px}
  .fp-wf-grid,.fp-grid{grid-template-columns:minmax(0,1fr)}
  .fp-controls label:not(.fp-field-search){flex:1 1 calc(50% - 7px)}
  .fp-controls select{width:100%}
}
@media print{
  .fp-controls,.fp-fold{display:none!important}
  .fp-group.is-folded .fp-grid{display:block}
  .fp-grid{display:block}
  .fp-card{margin:0 0 8px;break-inside:avoid}
}

/* 기관 카드: 그림 칸 72×44 고정(가로로 긴 로고 31개가 알아볼 크기로 남는다) | 이름 · 설명 · 링크 한 줄 */
.fp-card.fp-org{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start}
.fp-org-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.fp-org h4{margin:0;font-size:15.5px;line-height:1.4;font-weight:700}
.fp-emblem{width:72px;height:44px;padding:5px;display:grid;place-items:center;border:1px solid var(--glass-line);border-radius:10px;background:rgb(var(--white-rgb));overflow:hidden}
.fp-emblem img{display:block;width:auto;height:auto;max-width:62px;max-height:32px;object-fit:contain}
.fp-emblem.is-fallback{background:transparent;border-style:dashed;color:var(--txt-faint)}
.fp-emblem.is-flag img{max-width:54px;max-height:30px;box-shadow:0 0 0 1px rgba(var(--black-rgb),.18)}
.fp-org .fp-sum{font-size:13.5px;line-height:1.6}
.fp-org .fp-foot{margin:2px 0 0;padding-top:0;border-top:0;font-weight:600}