/* =========================================================================
   후원 페이지 2판 (2026-10-25) — support.html 전용
   - 흑요석 + 앤티크 골드(상단 메뉴 B안과 같은 톤)
   - 구성: 목차 → 01 후원 안내 → 02 단가표·혜택 → 03 절차 → 04 주의사항·안내 → 05 문의
   - .spx 접두 클래스만 다룬다(다른 페이지·기존 층에 영향 없음)
   - 중국어·일본어 가로 스크롤 방지: keep-all 은 한국어에만, 나머지는 overflow-wrap:anywhere
   되돌리기: 백업 support.html/support.js 복원 + 이 파일 삭제.
   ========================================================================= */
body .spx{--spx-g:#d6b979;--spx-gh:#efd7a3;--spx-gd:#a78d60;--spx-tx:#cfccc3;--spx-tx2:#aaa69c;--spx-sub:#8c8a82;--spx-bg:#111214;--spx-ln:#ffffff14;--spx-lng:#b9a27347}
body .spx-wrap{padding:44px 0 96px;min-width:0}
body .spx-wrap *{box-sizing:border-box;min-width:0}
body .spx-wrap :is(p,li,span,b,h2,h3,h4,td,th,a){overflow-wrap:anywhere;word-break:normal}
html:lang(ko) body .spx-wrap :is(p,li,span,b,h2,h3,h4,td,th,a){word-break:keep-all;overflow-wrap:anywhere}
html:is(:lang(ja),:lang(zh)) body .spx .page-hero-inner :is(h1,p){word-break:normal;overflow-wrap:anywhere}
body .spx svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- 목차 ---- */
body .spx-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 60px;padding:8px;border:1px solid var(--spx-ln);border-radius:4px;background:linear-gradient(180deg,#141417,#0e0f11)}
body .spx-toc a{flex:1 1 150px;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid transparent;border-radius:3px;color:var(--spx-tx);font:500 14.5px/1.4 MSVSans,'Malgun Gothic',sans-serif;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
body .spx-toc a i{flex:none;font:normal 400 15px/1 Georgia,'Times New Roman',serif;color:var(--spx-g);letter-spacing:.02em}
body .spx-toc a:is(:hover,:focus-visible){border-color:var(--spx-lng);background:#b99d640d;color:var(--spx-gh);outline:none}

/* ---- 공통 섹션 머리 ---- */
body .spx-sec{margin:0 0 76px;scroll-margin-top:120px}
body .spx-head{position:relative;display:flex;align-items:flex-end;gap:18px;margin:0 0 24px;padding:0 0 16px;border-bottom:1px solid var(--spx-ln)}
body .spx-head:after{content:'';position:absolute;left:0;bottom:-1px;width:72px;height:1px;background:var(--spx-g)}
body .spx-num{flex:none;font:400 48px/.85 Georgia,'Times New Roman',serif;letter-spacing:-.04em;color:#6f5f43}
body .spx-kicker{margin:0 0 5px;font:600 11px/1.4 MSVSans,sans-serif;letter-spacing:.26em;color:var(--spx-gd)}
body .spx-head h2,body .spx-contact h2{margin:0;font:600 clamp(22px,2.1vw,30px)/1.35 MSVSans,'Malgun Gothic',sans-serif;letter-spacing:-.01em;color:#ecdfc4}
body .spx-lead{max-width:720px;margin:0 0 32px;font-size:16px;line-height:1.85;color:var(--spx-tx2)}
body .spx-subh{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:600 17px/1.5 MSVSans,'Malgun Gothic',sans-serif;color:#ddcfb4}
body .spx-subh:before{content:'';flex:none;width:20px;height:1px;background:var(--spx-g)}

/* ---- 01 후원금 용도 카드 ---- */
body .spx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body .spx-card{position:relative;padding:28px 26px 26px;border:1px solid var(--spx-ln);border-radius:4px;background:linear-gradient(160deg,#17171b,#101113 70%);transition:border-color .2s}
body .spx-card:before{content:'';position:absolute;left:26px;right:26px;top:-1px;height:1px;background:linear-gradient(90deg,var(--spx-g),transparent);opacity:.6}
body .spx-card:hover{border-color:#b9a06d55}
body .spx-ic{display:grid;place-items:center;width:52px;height:52px;margin:0 0 18px;border:1px solid var(--spx-lng);border-radius:50%;background:#b99d640f}
body .spx-ic img{width:28px;height:28px;filter:grayscale(1) sepia(.8) brightness(1.8)}
body .spx-card h4{margin:0 0 8px;font:600 18px/1.5 MSVSans,'Malgun Gothic',sans-serif;color:#e6d5b2}
body .spx-card p{margin:0;font-size:15px;line-height:1.85;color:var(--spx-tx2)}

/* ---- 02 단가표 ---- */
body .spx-rate{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:stretch}
body .spx-rate-main{position:relative;overflow:hidden;isolation:isolate;padding:44px 46px 42px;border:1px solid #ae925955;border-radius:5px;background:linear-gradient(118deg,#1e1c17,#111214 72%);box-shadow:0 20px 45px #0004}
body .spx-rate-main:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#cdb07acc,transparent 75%)}
body .spx-rate-main:after{content:'';position:absolute;z-index:-1;inset:0;background:url('../assets/msv-gold/crest-gold-256.png') right 30px top 26px/150px auto no-repeat;opacity:.08;pointer-events:none}
body .spx-corner{position:absolute;width:14px;height:14px;border:0 solid #cdb27788}
body .spx-corner.tl{left:10px;top:10px;border-left-width:1px;border-top-width:1px}
body .spx-corner.br{right:10px;bottom:10px;border-right-width:1px;border-bottom-width:1px}
body .spx-badge{display:inline-flex;align-items:center;padding:5px 13px;border:1px solid #c9ad7466;border-radius:999px;background:#c9ad7412;font:600 12px/1.4 MSVSans,sans-serif;letter-spacing:.12em;color:var(--spx-gh)}
body .spx-exch{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:24px 0 18px}
body .spx-exch-krw .fx{display:block;font:400 clamp(18px,1.9vw,24px)/1.4 Georgia,'Times New Roman',serif;color:#c9c4b8}
body .spx-exch-to{display:inline-flex;align-items:center;gap:14px;flex-wrap:nowrap}
body .spx-exch-arrow{display:inline-flex;color:var(--spx-gd)}
body .spx-exch-arrow svg{width:28px;height:28px;stroke-width:1.4}
body .spx-exch-cash{display:inline-flex;align-items:baseline;gap:10px}
body .spx-exch-cash b{font:400 clamp(46px,5.2vw,72px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.03em;color:#f2ddab;text-shadow:0 3px 20px #0006;font-variant-numeric:tabular-nums}
body .spx-exch-cash em{font:normal 600 15px/1.3 MSVSans,'Malgun Gothic',sans-serif;letter-spacing:.06em;color:#c6ac7b}
body .spx-rate-note{max-width:560px;margin:0 0 26px;padding:16px 0 0;border-top:1px solid #bfa67124;font-size:13.5px;line-height:1.85;color:#a8a498}
body .spx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border:1px solid #e3c88f;border-radius:3px;background:linear-gradient(180deg,#e8d09a,#c7a762);color:#17140d;font:600 16px/1.3 MSVSans,'Malgun Gothic',sans-serif;text-decoration:none;text-align:center;cursor:pointer;box-shadow:inset 0 1px #fff7,0 8px 22px #0005;transition:filter .2s,transform .2s,box-shadow .2s}
body .spx-btn svg{flex:none;width:18px;height:18px;stroke-width:2}
body .spx-btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:inset 0 1px #fff8,0 12px 26px #0006}
body .spx-btn:focus-visible{outline:2px solid var(--spx-gh);outline-offset:3px}
body .spx-rate-side{display:flex;flex-direction:column;gap:16px}
body .spx-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--spx-ln);border-radius:4px;overflow:hidden;background:var(--spx-bg)}
body .spx-table :is(th,td){padding:16px 20px;border-bottom:1px solid var(--spx-ln);vertical-align:middle}
body .spx-table tr:last-child :is(th,td){border-bottom:0}
body .spx-table th{width:38%;text-align:left;font:500 14px/1.5 MSVSans,'Malgun Gothic',sans-serif;color:var(--spx-sub);background:#ffffff04}
body .spx-table td{text-align:right;font-size:14.5px;line-height:1.6;color:var(--spx-tx)}
body .spx-strong{font:400 22px/1.2 Georgia,'Times New Roman',serif;color:var(--spx-gh);font-variant-numeric:tabular-nums}
body .spx-perk{flex:1;display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border:1px solid #b9a27333;border-radius:4px;background:#b99d640d;color:var(--spx-g)}
body .spx-perk>svg{flex:none;width:26px;height:26px;margin-top:2px}
body .spx-perk b{display:block;font:600 15.5px/1.5 MSVSans,'Malgun Gothic',sans-serif;color:#e6d5b2}
body .spx-perk p{margin:4px 0 0;font-size:14px;line-height:1.8;color:var(--spx-tx2)}

/* ---- 03 절차 ---- */
body .spx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 44px;padding:0;list-style:none}
body .spx-step{position:relative;padding:30px 26px 28px;border:1px solid var(--spx-ln);border-radius:4px;background:var(--spx-bg)}
body .spx-step:before{content:'';position:absolute;left:0;top:-1px;width:100%;height:2px;background:linear-gradient(90deg,var(--spx-g),transparent 80%);opacity:.7}
body .spx-step:not(:last-child):after{content:'';position:absolute;top:52px;right:-19px;width:20px;height:1px;background:var(--spx-g)}
body .spx-step-n{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 0 18px;border:1px solid #c9ad7488;border-radius:50%;background:#c9ad7410;font:400 17px/1 Georgia,'Times New Roman',serif;color:var(--spx-gh)}
body .spx-step-body b{display:block;margin:0 0 8px;font:600 17px/1.5 MSVSans,'Malgun Gothic',sans-serif;color:#e6d5b2}
body .spx-step-body p{margin:0;font-size:14.5px;line-height:1.85;color:var(--spx-tx2)}
body .spx-methods-desc{max-width:820px;margin:0 0 18px;font-size:15px;line-height:1.85;color:var(--spx-tx2)}
body .spx-method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body .spx-method{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border:1px solid var(--spx-ln);border-radius:4px;background:#0f1012;color:var(--spx-g)}
body .spx-method>svg{flex:none;width:30px;height:30px}
body .spx-method b{display:block;margin:0 0 4px;font:600 16px/1.5 MSVSans,'Malgun Gothic',sans-serif;color:#e6d5b2}
body .spx-method p{margin:0;font-size:14px;line-height:1.8;color:var(--spx-tx2)}

/* ---- 04 주의사항 ---- */
body .spx-notice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
body .spx-notice li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid #ac95612c;border-left:2px solid #ac9059;border-radius:2px;background:#b99d640a;color:var(--spx-g)}
body .spx-notice li>svg{flex:none;width:22px;height:22px;margin-top:2px}
body .spx-notice li>span{font-size:15px;line-height:1.75;color:var(--spx-tx)}

/* ---- 05 문의 ---- */
body .spx-contact{margin-bottom:0}
body .spx-contact-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 32px;padding:40px 44px;border:1px solid #ae925955;border-radius:5px;background:radial-gradient(circle at 92% 50%,#c9a9641c,transparent 45%),linear-gradient(120deg,#18171b,#101113 70%)}
body .spx-contact-copy{flex:1 1 380px}
body .spx-contact h2{margin:2px 0 8px}
body .spx-contact-copy>p:last-child{margin:0;font-size:15px;line-height:1.8;color:var(--spx-tx2)}

/* ---- 반응형 ---- */
@media (max-width:1000px){
  body .spx-rate{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  body .spx-steps{grid-template-columns:minmax(0,1fr);gap:14px}
  body .spx-step{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;padding:22px 22px}
  body .spx-step-n{margin:0}
  body .spx-step:not(:last-child):after{top:auto;bottom:-15px;right:auto;left:45px;width:1px;height:16px}
  body .spx-cards{grid-template-columns:minmax(0,1fr);gap:12px}
  body .spx-card{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;padding:22px}
  body .spx-ic{grid-row:1/3;margin:0}
  body .spx-notice,body .spx-method-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  body .spx-wrap{padding:28px 0 64px}
  body .spx-toc{margin-bottom:44px;padding:6px;gap:4px}
  body .spx-toc a{flex:1 1 128px;padding:10px 10px;font-size:13.5px;gap:8px}
  body .spx-sec{margin-bottom:56px}
  body .spx-head{gap:14px}
  body .spx-num{font-size:36px}
  body .spx-lead{font-size:15px;margin-bottom:26px}
  body .spx-rate-main{padding:30px 22px 26px}
  body .spx-rate-main:after{background-size:130px;background-position:right 6px top 18px;opacity:.07}
  body .spx-exch{gap:4px 12px;margin:20px 0 14px}
  body .spx-exch-to{gap:10px}
  body .spx-exch-cash{flex-wrap:wrap;gap:2px 8px}
  body .spx-exch-cash b{font-size:clamp(40px,13vw,56px)}
  body .spx-btn{width:100%;padding:0 18px}
  body .spx-table :is(th,td){padding:13px 14px}
  body .spx-table th{width:1%;white-space:nowrap}
  body .spx-strong{font-size:19px}
  body .spx-card,body .spx-step{padding:20px 18px}
  body .spx-step{column-gap:14px}
  body .spx-step:not(:last-child):after{left:41px}
  body .spx-method{padding:18px}
  body .spx-notice li{padding:16px}
  body .spx-contact-in{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){body .spx :is(.spx-btn,.spx-card,.spx-toc a){transition:none}body .spx-btn:hover{transform:none}}

/* =========================================================================
   2차 다듬기 (2026-10-25 밤) — 글자·여백 체계 통일, 카드 테두리·호버 통일,
   단가 카드 라벨·숫자 정렬, 절차 아이콘, 포커스 표시, 휴대폰 최소 글자 13px
   되돌리기: 이 구역 삭제 + support.html 백업(web_norefund_1025\backup2) 복원
   ========================================================================= */
body .spx{--spx-r:6px;--spx-card:linear-gradient(160deg,#16161a,#101113 72%);--spx-hov:#c9ad7466;--spx-pad:26px}
/* 글자 체계: 제목 30/18/16 · 본문 15 · 보조 14 · 라벨 12 */
body .spx-kicker{font-size:12px;letter-spacing:.22em;color:#b39a6a}
body .spx-lead{font-size:16px;color:#bdb9ae}
body .spx-card p,body .spx-step-body p,body .spx-method p,body .spx-perk p{font-size:15px;line-height:1.8;color:#b3afa4}
body .spx-notice li>span{font-size:15px;line-height:1.75;color:#d4d0c6}
body .spx-rate-note{font-size:14px;color:#b0ac9f}
/* 여백 체계: 섹션 88 · 머리 28 · 카드 안 26 · 카드 사이 16 */
body .spx-sec{margin-bottom:88px}
body .spx-head{margin-bottom:28px}
body .spx-cards,body .spx-steps{gap:16px}
body .spx-method-grid,body .spx-notice{gap:14px}
/* 카드 테두리·호버 통일 */
body :is(.spx-card,.spx-step,.spx-method,.spx-notice li,.spx-perk,.spx-table){border-radius:var(--spx-r)}
body :is(.spx-card,.spx-step,.spx-method){background:var(--spx-card);transition:border-color .2s,background-color .2s,transform .2s}
body :is(.spx-card,.spx-step,.spx-method,.spx-notice li):hover{border-color:var(--spx-hov)}
body .spx-notice li{border-left-width:2px;transition:border-color .2s}
body .spx-rate-main,body .spx-contact-in{border-radius:8px}
/* 목차: 누르기 쉬운 높이 + 분명한 포커스 */
body .spx-toc{border-radius:var(--spx-r)}
body .spx-toc a{min-height:46px}
body .spx-toc a:focus-visible{outline:2px solid var(--spx-gh);outline-offset:2px}
body .spx-wrap a:focus-visible{outline:2px solid var(--spx-gh);outline-offset:3px}
/* 단가 카드: 라벨 + 숫자 정렬 */
body .spx-exch{align-items:flex-end;gap:12px 22px;margin:26px 0 22px}
body .spx-exch-lbl{display:block;margin:0 0 6px;font:500 12.5px/1.4 MSVSans,'Malgun Gothic',sans-serif;letter-spacing:.08em;color:#9d988c}
body .spx-exch-krw{display:flex;flex-direction:column}
body .spx-exch-krw .fx{font-variant-numeric:tabular-nums;color:#d7d1c3}
body .spx-exch-to{align-items:flex-end}
body .spx-exch-arrow{padding-bottom:10px}
body .spx-exch-cash{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:10px}
body .spx-exch-cash .spx-exch-lbl{grid-column:1/-1;color:#b9a273}
body .spx-table td{font-variant-numeric:tabular-nums}
body .spx-table th{font-size:14px;color:#a29e93}
/* 절차: 번호 + 아이콘 머리 줄 */
body .spx-step-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
body .spx-step-top .spx-step-n{margin:0}
body .spx-step-ic{flex:none;width:28px;height:28px;color:var(--spx-gd);opacity:.9}
body .spx-step:hover .spx-step-ic{color:var(--spx-g)}
@media (max-width:860px){
  body .spx-step{grid-template-columns:auto minmax(0,1fr)}
  body .spx-step-top{flex-direction:column;justify-content:flex-start;align-items:center;gap:10px;margin:0;grid-row:1/3}
  body .spx-step-ic{width:22px;height:22px}
}
@media (max-width:600px){
  body .spx-sec{margin-bottom:60px}
  body .spx-head{margin-bottom:22px}
  body .spx-toc a{font-size:14px;min-height:44px}
  body .spx-lead{font-size:15px}
  body .spx-card p,body .spx-step-body p,body .spx-method p,body .spx-perk p,body .spx-notice li>span{font-size:14.5px}
  body .spx-rate-note{font-size:13.5px}
  body .spx-exch{gap:10px 14px}
  body .spx-exch-arrow{padding-bottom:8px}
  body .spx-exch-arrow svg{width:22px;height:22px}
  body .spx-exch-cash{column-gap:8px}
}
@media (max-width:380px){
  body .spx-exch-to{flex-wrap:wrap}
  body .spx-exch-cash b{font-size:clamp(36px,12vw,48px)}
}
@media (prefers-reduced-motion:reduce){body .spx :is(.spx-card,.spx-step,.spx-method,.spx-notice li){transition:none}}
body .spx-kicker,body .spx-badge{font-size:13px}