@charset "utf-8";
/* 기금안내 > 모금 및 사용현황 — 2x2 대시보드(총액 카드 · 막대 차트 · 도넛 차트 2종) */

:root{
  /* 값이 큰 항목일수록 진한 단계 (명도 단조증가, 전 단계 트랙 대비 3:1 이상) */
  /* 모금액 계열 — 전북대 블루(#0074b0)를 기준으로 만든 명도 램프 */
  --fund-1:var(--brand-strong); --fund-2:var(--brand); --fund-3:#1e93c8; --fund-4:#58b4dd;
  --fund-5:#8ecbe9;   /* 항목을 다섯 개까지 넣을 수 있게 한 칸 더 (관리 화면의 색 5번) */
  --use-1:#075c55;  --use-2:#0a7268;  --use-3:#0d887c;  --use-4:#109c8f; --use-5:#8fd6ca;
  --chart-track:#eaf2f7;
}

/* ---------- 대시보드 그리드 ---------- */
.dash{
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,auto);
  gap:22px;align-items:stretch;
}

/* ---------- 카드 공통 ---------- */
.dcard{
  position:relative;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-l);padding:30px 34px 26px;box-shadow:var(--shadow-s);
}
.dcard__badge{
  display:inline-block;margin-bottom:20px;padding:8px 18px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;
  word-break:keep-all;
}

/* ---------- 01 총 기부금 현황 (큰 숫자 카드) ---------- */
.dcard--figure{display:flex;flex-direction:column;justify-content:center}
.dcard--figure .dcard__badge{margin-bottom:24px}
.dcard__figure{
  font-size:clamp(48px,7vw,78px);font-weight:900;
  line-height:1;letter-spacing:-.05em;color:var(--fund-1);
}
.dcard__figure span{
  margin-left:8px;font-size:.32em;font-weight:800;letter-spacing:-.02em;color:var(--text-mid);
}
.dcard__note{margin-top:16px;font-size:14px;color:var(--text-mid);word-break:keep-all}

/* ---------- 02 그룹별 모금 참여율 (가로 막대 + 축) ---------- */
.axis{
  display:grid;align-items:end;gap:0 14px;
  grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;
  padding:0 12px;margin-bottom:8px;
}
.axis__spacer{visibility:hidden}
.axis__track{position:relative;height:16px}
.axis__track i{
  position:absolute;left:calc(var(--x) * 1%);bottom:0;transform:translateX(-50%);
  font-style:normal;font-size:11px;font-weight:700;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

.bars{display:flex;flex-direction:column;gap:2px}
.bar{
  display:grid;align-items:center;gap:0 14px;
  grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;
  padding:10px 12px;border-radius:12px;transition:background .18s;
}
.bar:hover{background:var(--bg-alt)}
.bar__label{display:flex;align-items:center;gap:10px;min-width:0}
.bar__icon{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--text-dim)}
.bar__name{font-size:15px;font-weight:700;line-height:1.4;word-break:keep-all}

/* 막대 길이 = 축 최댓값(50) 대비 비율. 축 쪽은 각지고 데이터 끝만 둥글다 */
.bar__track{height:18px;border-radius:0 4px 4px 0;background:var(--chart-track)}
.bar__fill{
  height:100%;width:0;border-radius:0 4px 4px 0;background:var(--fund-2);
  transition:width .9s cubic-bezier(.2,.7,.3,1);
}
.dcard.is-in .bar__fill{width:var(--w)}
.bar:nth-child(1) .bar__fill{background:var(--fund-1)}
.bar:nth-child(2) .bar__fill{background:var(--fund-4)}
.bar:nth-child(3) .bar__fill{background:var(--fund-2)}
.bar:nth-child(4) .bar__fill{background:var(--fund-3)}

/* 값은 데이터 색이 아니라 본문 색을 쓴다 */
.bar__val{font-size:15px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.bar__val span{margin-left:8px;font-size:13.5px;font-weight:700;color:var(--text-mid)}

/* ---------- 03·04 도넛 차트 + 범례 (마우스오버 시 조각 강조 · 범례 연동) ---------- */
.donutrow{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.donut{position:relative;flex:none;width:172px;height:172px}

.donut__ring{width:100%;height:100%;display:block;transform:rotate(-90deg);overflow:visible}
.donut__seg{
  fill:none;stroke:var(--c);stroke-width:26;cursor:pointer;
  transition:stroke-width .18s ease,opacity .18s ease,filter .18s ease;
}
.donut__seg:hover,.donut__seg:focus-visible,.donut__seg.is-active{
  stroke-width:31;filter:brightness(1.08);outline:none;
}
.donut.is-hover .donut__seg:not(.is-active){opacity:.4}

.donut__hole{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;padding:0 14px;
}
.donut__hole b{font-size:13px;font-weight:800;color:var(--text-dim);letter-spacing:.02em;word-break:keep-all}
.donut__hole span{margin-top:4px;font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--text);word-break:keep-all}

.legend{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.legend li{
  display:flex;align-items:center;gap:10px;font-size:14px;
  padding:5px 8px;margin:0 -8px;border-radius:10px;cursor:pointer;
  transition:background .15s ease;
}
.legend li:hover,.legend li:focus-visible,.legend li.is-active{background:var(--bg-alt);outline:none}
.legend i{
  flex:none;width:11px;height:11px;border-radius:4px;background:var(--c);
  transition:transform .15s ease;
}
.legend li.is-active i{transform:scale(1.25)}
.legend__name{flex:1;min-width:0;font-weight:700;color:var(--text);word-break:keep-all}
.legend b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.legend em{
  font-style:normal;min-width:52px;text-align:right;font-weight:700;color:var(--text-mid);
  font-variant-numeric:tabular-nums;
}

/* ---------- 표로 보기 ---------- */
.tableview{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.tableview summary{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:13.5px;font-weight:700;color:var(--brand-strong);
}
.tableview summary::-webkit-details-marker{display:none}
.tableview summary svg{transition:transform .2s}
.tableview[open] summary svg{transform:rotate(180deg)}
/* 가로로 스크롤되는 상자에는 position:relative 를 함께 둡니다.
   안에 화면낭독기용 숨김 글자(.sr-only)나 <caption> 이 들어 있는데 그것이
   position:absolute 라, 이 상자가 static 이면 기준이 바깥이 되어 상자에
   갇히지 않고 표 너비만큼 오른쪽에 자리를 잡습니다. 그러면 화면 전체가
   그만큼 밀립니다 (voices.css 의 .vtable 에서 실제로 겪었습니다). */
.tableview__scroll{position:relative;overflow-x:auto}
.tableview table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px;min-width:380px}
.tableview th,.tableview td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.tableview thead th{
  font-size:12.5px;font-weight:800;color:var(--text-dim);
  letter-spacing:.03em;border-bottom-width:2px;
}
.tableview td.num,.tableview th.num{text-align:right;font-variant-numeric:tabular-nums}
.tableview tfoot td{font-weight:800;border-bottom:none}

/* ---------- 연도별 탭 ---------- */
.tabs{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tabs a{
  padding:16px 12px;text-align:center;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  font-size:15px;font-weight:700;color:var(--text-mid);word-break:keep-all;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.tabs a:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.tabs a[aria-current="page"]{
  background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 8px 20px rgba(59,117,192,.26);
}
.tabs a[aria-current="page"]:hover{transform:none}

.note{margin-top:18px;font-size:13px;color:var(--text-dim);text-align:center;word-break:keep-all}

/* ---------- 연도별 아카이브(과거 모금·사용현황) ---------- */
.yearlist{display:flex;flex-direction:column;gap:12px}
.yearrow{
  border-radius:var(--radius-m);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-s);overflow:hidden;
}
.yearrow summary{
  display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:18px 22px;
}
.yearrow summary::-webkit-details-marker{display:none}
.yearrow__year{
  font-size:17px;font-weight:900;letter-spacing:-.02em;color:var(--text);white-space:nowrap;
}
.yearrow__total{
  margin-left:auto;font-size:13.5px;color:var(--text-dim);white-space:nowrap;
}
.yearrow__total b{margin-left:6px;font-size:16px;font-weight:900;color:var(--brand-strong)}
.yearrow__chev{flex:none;color:var(--text-dim);transition:transform .2s}
.yearrow[open] .yearrow__chev{transform:rotate(180deg)}
.yearrow[open] summary{border-bottom:1px solid var(--line)}

.yearrow__body{padding:6px 22px 18px}
.yearrow__body table{width:100%;border-collapse:collapse;font-size:14px}
.yearrow__body th,.yearrow__body td{padding:9px 4px;border-bottom:1px solid var(--line);text-align:left}
.yearrow__body thead th{
  font-size:12px;font-weight:800;color:var(--text-dim);letter-spacing:.03em;border-bottom-width:2px;
}
.yearrow__body td.num,.yearrow__body th.num{text-align:right;font-variant-numeric:tabular-nums}
.yearrow__body tfoot td{font-weight:800;border-bottom:none;color:var(--brand-strong)}

/* ---------- 반응형 ---------- */
@media (max-width:900px){
  .dash{grid-template-columns:1fr}
}
@media (max-width:560px){
  .yearrow summary{padding:15px 16px;gap:10px;flex-wrap:wrap}
  .yearrow__total{margin-left:0;order:3;flex-basis:100%}
  .yearrow__body{padding:4px 16px 16px}
}
@media (max-width:760px){
  .dcard{padding:26px 18px 22px;border-radius:22px}

  .axis{display:none}   /* 축 눈금은 막대가 두 줄로 접히는 폭에서는 생략 */
  .bar{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px 6px}
  .bar__label{grid-column:1/-1;grid-row:1}
  .bar__val{grid-column:2;grid-row:2}
  .bar__track{grid-column:1;grid-row:2}

  .donutrow{flex-direction:column;align-items:stretch;gap:24px}
  .donut{margin:0 auto}
  .legend{width:100%}

  .tabs{grid-template-columns:1fr}
}

/* 모션을 줄이도록 설정한 사용자는 막대를 즉시 표시 */
@media (prefers-reduced-motion:reduce){
  .bar__fill{transition:none}
}