@charset "utf-8";
/* 기부하기 > 약정 및 납입안내 — 3단계 진행바 + 기부방법 카드 */

/* ---------- 진행 단계 ---------- */
.steps{
  display:flex;justify-content:center;gap:0;margin-bottom:52px;
}
.steps li{display:flex;align-items:center}
.steps li + li::before{
  content:"";width:clamp(28px,6vw,72px);height:2px;margin:0 6px;
  background:var(--line-strong);flex:0 0 auto;
}
.steps a{
  display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;
  color:var(--text-dim);transition:background .18s,color .18s;
}
.steps a:hover{background:var(--bg-alt)}
.steps__num{
  /* 지나온 단계에는 '지나온 단계' 라는 감춘 글자가 들어갑니다(position:absolute).
     기준점을 여기로 잡아 두어야 화면 밖으로 빠져나가지 않습니다. */
  position:relative;
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line-strong);
  font-size:14px;font-weight:800;color:var(--text-dim);flex:0 0 auto;
  transition:background .18s,border-color .18s,color .18s;
}
.steps__label{font-size:14.5px;font-weight:700;white-space:nowrap}
.steps a[aria-current="step"]{color:var(--navy)}
.steps a[aria-current="step"] .steps__num{
  background:linear-gradient(140deg,var(--sky),var(--brand));border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(59,117,192,.3);
}
.steps a.is-done .steps__num{
  background:var(--sky-soft);border-color:var(--sky);color:var(--brand-strong);
}

/* ---------- 기부 방법 카드 ---------- */
.methods{display:flex;flex-direction:column;gap:20px}
.method{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding:32px;border-radius:var(--radius-l);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);
}
/* 1fr 트랙 안의 표(min-width 지정)가 그리드 자체를 밀어내지 않도록 */
.method__body{min-width:0}
.method__icon{
  display:grid;place-items:center;width:56px;height:56px;border-radius:18px;
  background:linear-gradient(140deg,var(--sky-soft),#cfe6f2);color:var(--brand-strong);flex:0 0 auto;
}
.method__title{font-size:19px;font-weight:900;letter-spacing:-.02em}
.method__desc{margin-top:8px;font-size:14.5px;line-height:1.75;color:var(--text-mid);word-break:keep-all}

.method__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.method__btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;font-size:14.5px;font-weight:700;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.method__btn--solid{
  background:linear-gradient(135deg,var(--royal),var(--royal-deep));color:#fff;
  box-shadow:0 8px 20px rgba(59,117,192,.28);
}
.method__btn--solid:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(59,117,192,.36)}
.method__btn--line{
  background:var(--bg-alt);border:1px solid var(--line-strong);color:var(--brand-strong);
}
.method__btn--line:hover{border-color:var(--brand);background:var(--sky-soft)}

.method__info{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.method__info li{
  display:flex;gap:10px;font-size:14px;color:var(--text-mid);
}
.method__info b{flex:0 0 auto;color:var(--text);font-weight:700}
.method__info a{color:var(--brand-strong);font-weight:600}
.method__info a:hover{text-decoration:underline}

/* ---------- 다음 단계 ---------- */
/* ---------- 반응형 ---------- */
@media (max-width:640px){
  .steps{gap:0}
  /* 좁은 화면에서는 단계 이름을 감춥니다. 다만 display:none 으로 지우면
     끝낸 단계는 체크 표시만 남아 링크에 읽을 이름이 하나도 없어집니다.
     화면에서만 감추고 낭독기에는 '기부약정' 처럼 그대로 읽히게 합니다. */
  .steps__label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }
  /* 감춘 글자가 position:absolute 라, 기준점을 여기로 잡아 두지 않으면
     화면 밖으로 빠져나가 가로 스크롤이 생깁니다. */
  .steps a{padding:6px;position:relative}
  .method{grid-template-columns:1fr;padding:26px 22px}
  .method__icon{width:48px;height:48px;border-radius:14px}
}

/* ---------- 계좌 목록 (납입하기: 무통장 입금) ---------- */
.accts{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.acct{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  padding:12px 14px;border-radius:12px;
  border-bottom:1px solid var(--line);
}
.acct:last-child{border-bottom:none}
.acct__bank{flex:0 0 auto;min-width:132px;font-size:14px;font-weight:700;color:var(--text)}
.acct__num{
  flex:1 1 auto;font-size:14.5px;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--brand-strong);
}
.acct__copy{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  background:var(--bg-alt);border:1px solid var(--line-strong);
  font-size:12.5px;font-weight:700;color:var(--text-mid);cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.acct__copy:hover{border-color:var(--brand);color:var(--brand-strong)}
.acct__copy.is-copied{background:var(--sky-soft);border-color:var(--brand);color:var(--brand-strong)}
.acct__copy svg{flex:0 0 auto}

@media (max-width:480px){
  .acct{gap:4px 10px}
  .acct__bank{min-width:100%}
}

/* ---------- 세제혜택 카드 (기부혜택안내) ---------- */
.tax-lead{
  max-width:760px;margin:0 auto 44px;padding:24px 28px;text-align:center;
  border-radius:var(--radius-l);background:var(--sky-soft);
  font-size:16px;line-height:1.8;color:var(--brand-strong);font-weight:700;word-break:keep-all;
}

.subhead{
  display:flex;align-items:center;gap:10px;margin:0 0 20px;
  font-size:clamp(17px,2.2vw,20px);font-weight:900;letter-spacing:-.02em;
}
.subhead svg{flex:0 0 auto;color:var(--brand)}
.panels + .subhead,
.tax-lead + .subhead{margin-top:4px}

.tax-card + .tax-card{margin-top:20px}
.tax-card .method__desc + h3{margin-top:20px}
.tax-card h3{
  font-size:15px;font-weight:800;color:var(--text);
  padding-top:16px;border-top:1px dashed var(--line);margin-top:16px;
}
.tax-card ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tax-card ul li{
  position:relative;padding-left:16px;font-size:14px;line-height:1.7;color:var(--text-mid);word-break:keep-all;
}
.tax-card ul li::before{
  content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--sky);
}

.method__title-sub{font-weight:500;color:var(--text-dim);font-size:14px}
.muted{color:var(--text-dim)}

/* 법인세율 표 */
/* 가로로 스크롤되는 상자에는 position:relative 를 함께 둡니다.
   안에 화면낭독기용 숨김 글자(.sr-only)나 <caption> 이 들어 있는데 그것이
   position:absolute 라, 이 상자가 static 이면 기준이 바깥이 되어 상자에
   갇히지 않고 표 너비만큼 오른쪽에 자리를 잡습니다. 그러면 화면 전체가
   그만큼 밀립니다 (voices.css 의 .vtable 에서 실제로 겪었습니다). */
.rate-table{position:relative;margin-top:18px;overflow-x:auto}
.rate-table table{width:100%;min-width:420px;border-collapse:collapse;font-size:13.5px}
.rate-table caption{text-align:left;font-size:13px;color:var(--text-dim);margin-bottom:10px}
.rate-table th,.rate-table td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
.rate-table thead th{
  background:var(--bg-alt);font-weight:800;color:var(--text-dim);font-size:12.5px;letter-spacing:.02em;
}
.rate-table td:not(:first-child),.rate-table th:not(:first-child){
  text-align:right;font-variant-numeric:tabular-nums;
}
.rate-table__head{font-weight:600;text-align:left}
.rate-table__col--wide{width:35%}

/* ---------- 예우표 ---------- */
.honor{position:relative;margin-top:8px;overflow-x:auto;border-radius:var(--radius-l);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.honor table{width:100%;min-width:840px;border-collapse:collapse;font-size:13.5px;background:var(--surface)}
.honor caption{
  text-align:left;padding:16px 20px 0;font-size:13px;color:var(--text-dim);word-break:keep-all;
}
.honor th,.honor td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.honor thead th{
  background:var(--bg-alt);font-weight:800;color:var(--text);font-size:13px;
}
.honor thead th:first-child{background:var(--surface)}
.honor tbody th{
  position:sticky;left:0;z-index:1;
  text-align:left;white-space:normal;min-width:180px;
  background:var(--bg-alt);font-weight:700;font-size:13.5px;color:var(--text);
}
.honor tbody th small{color:var(--text-dim);font-weight:500}
.honor tbody tr:last-child th,.honor tbody tr:last-child td{border-bottom:none}
.honor td.txt{color:var(--text-mid);font-weight:600}
.honor td.wide{text-align:left;white-space:normal;color:var(--text-mid);font-weight:500}
.honor__check{
  display:inline-flex;width:22px;height:22px;border-radius:50%;
  background:var(--sky-soft);color:var(--brand-strong);align-items:center;justify-content:center;
}

.honor-note{margin-top:6px;padding:16px 20px;border-radius:var(--radius-m);background:var(--bg-alt)}
.honor-note li{
  display:flex;gap:8px;font-size:13px;line-height:1.7;color:var(--text-mid);word-break:keep-all;
}
.honor-note li + li{margin-top:4px}
.honor-note b{flex:0 0 auto;color:var(--text-dim);font-weight:700}

@media (max-width:640px){
  .tax-lead{padding:20px 22px;font-size:14.5px}
}

/* ---------- 예우안내 (donate-honor.php) ---------- */
/* 예우 프로그램 하나하나를 카드로 세웁니다. 세제혜택 화면의 .method 를
   그대로 쓰고, 예우안내에만 필요한 것들만 여기에 덧붙입니다. */
.honors{display:flex;flex-direction:column;gap:18px;margin-top:4px}

/* '자동' · '신청 시' 처럼 언제 받으실 수 있는지 한눈에 보이는 작은 표 */
.honorcard__when{
  display:inline-block;vertical-align:middle;margin-left:6px;
  padding:3px 10px;border-radius:999px;
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  background:var(--sky-soft);color:var(--brand-strong);
}
/* 따로 신청하지 않아도 되는 것은 초록으로 구분합니다.
   색만으로 알려 주지 않도록 글자('자동')도 함께 넣었습니다. */
.honorcard__when--auto{background:#e7f4ec;color:#1b6b45}

.honorcard__subhead{
  margin-top:18px;font-size:14.5px;font-weight:800;color:var(--text);
  word-break:keep-all;
}
.honorcard__note{
  margin-top:10px;font-size:13.5px;line-height:1.75;color:var(--text-dim);
  word-break:keep-all;
}
.honorcard__steps{
  list-style:none;counter-reset:hstep;margin:10px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.honorcard__steps li{
  counter-increment:hstep;position:relative;padding-left:30px;
  font-size:14.5px;line-height:1.75;color:var(--text-mid);word-break:keep-all;
}
.honorcard__steps li::before{
  content:counter(hstep);
  position:absolute;left:0;top:3px;
  display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  background:var(--sky-soft);color:var(--brand-strong);
  font-size:12px;font-weight:800;
}

/* 맨 아래 두 칸 — 적용 기준과 문의처 */
.honor-apply{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;
  margin-top:22px;
}
.honor-apply__box{
  padding:26px 28px;border-radius:var(--radius-l);
  background:var(--bg-alt);border:1px solid var(--line);
}
.honor-apply__box h3{
  font-size:16.5px;font-weight:900;letter-spacing:-.02em;word-break:keep-all;
}
.honor-apply__box p{
  margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--text-mid);
  word-break:keep-all;
}
.honor-apply__box .method__info{margin-top:14px}

/* ── 예우안내에서 마우스를 올렸을 때 ──────────────────────────────
   예우표는 칸이 여덟 줄이나 되고 가로로 넘겨 봐야 해서, 한 줄을 끝까지
   따라가다 옆줄로 새기 쉽습니다. 마우스가 놓인 줄만 옅게 칠하고 왼쪽
   이름 칸에 파란 띠를 세워, 지금 읽는 줄을 붙잡아 줍니다.
   왼쪽 이름 칸은 가로로 넘겨도 늘 붙어 있는 자리(sticky)라 띠가 항상
   보입니다. 글자색은 그대로라 읽기 쉬움은 달라지지 않습니다.        */
.honor tbody th,
.honor tbody td{transition:background-color .18s, box-shadow .18s}
.honor tbody tr:hover th,
.honor tbody tr:hover td{background-color:var(--sky-soft)}
.honor tbody tr:hover th{box-shadow:inset 4px 0 0 var(--brand)}
/* 동그란 체크 표시도 같이 진해져, 어느 구간까지 받으시는지 눈에 띕니다 */
.honor__check{transition:background .18s, transform .18s}
.honor tbody tr:hover .honor__check{
	background:var(--brand); color:#fff; transform:scale(1.12);
}

/* 예우 프로그램 카드 — 카드가 3px 떠오르고 테두리가 파래집니다.
   아이콘도 한 톤 진해집니다. */
.honorcard{
	transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.honorcard .method__icon{transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s}
.honorcard:hover{
	transform:translateY(-3px);
	border-color:var(--brand);
	box-shadow:0 14px 26px rgba(15,45,80,.16),
	           0 0 0 3px rgba(0,116,176,.12);
}
.honorcard:hover .method__icon{
	transform:scale(1.08);
	box-shadow:0 6px 14px rgba(0,116,176,.28);
}

/* 맨 아래 적용 기준 · 문의처 칸도 같은 방식으로 */
.honor-apply__box{
	transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.honor-apply__box:hover{
	transform:translateY(-3px);
	border-color:var(--brand);
	box-shadow:0 14px 26px rgba(15,45,80,.16);
}

/* 화면이 움직이면 어지러우신 분들께는 띄우거나 키우지 않고
   색과 테두리만 바꿔 알려 드립니다. */
@media (prefers-reduced-motion:reduce){
	.honorcard:hover,
	.honor-apply__box:hover{transform:none}
	.honorcard:hover .method__icon{transform:none}
	.honor tbody tr:hover .honor__check{transform:none}
}

@media (max-width:640px){
  .honorcard__when{display:inline-block;margin-left:0;margin-top:6px}
  .honor-apply__box{padding:22px 20px}
}