<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 470" fill="none" role="img" aria-label="5office 급여명세서 화면 예시">
  <defs>
    <linearGradient id="pyPurple" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#6f66f2"/>
      <stop offset="1" stop-color="#4f46e5"/>
    </linearGradient>
    <filter id="pySoft" x="-15%" y="-15%" width="130%" height="130%">
      <feDropShadow dx="0" dy="16" stdDeviation="20" flood-color="#3b34b8" flood-opacity="0.18"/>
    </filter>
  </defs>

  <!-- 배경 장식 -->
  <circle cx="300" cy="235" r="210" fill="#eef0ff"/>
  <circle cx="486" cy="70" r="11" fill="#ffd15c" opacity="0.9"/>
  <circle cx="70" cy="112" r="9" fill="#ff8aa0" opacity="0.7"/>

  <!-- 명세서 카드 -->
  <g filter="url(#pySoft)">
    <rect x="70" y="46" width="420" height="378" rx="16" fill="#ffffff"/>
  </g>
  <rect x="70" y="46" width="420" height="7" rx="3.5" fill="url(#pyPurple)"/>
  <rect x="86" y="53" width="388" height="0" />
  <text x="280" y="86" font-family="Arial, sans-serif" font-size="15" font-weight="700" fill="#5b52e0" text-anchor="middle">DEMO TEST</text>

  <!-- 사원 정보 -->
  <rect x="94" y="104" width="372" height="60" rx="10" fill="#f6f7fb"/>
  <g fill="#c7c9f7">
    <rect x="112" y="120" width="30" height="8" rx="4"/>
    <rect x="286" y="120" width="30" height="8" rx="4"/>
    <rect x="112" y="142" width="30" height="8" rx="4"/>
    <rect x="286" y="142" width="30" height="8" rx="4"/>
  </g>
  <g fill="#5a5c72">
    <rect x="160" y="120" width="70" height="8" rx="4"/>
    <rect x="334" y="120" width="86" height="8" rx="4"/>
    <rect x="160" y="142" width="54" height="8" rx="4"/>
    <rect x="334" y="142" width="72" height="8" rx="4"/>
  </g>

  <!-- 지급 / 공제 헤더 -->
  <rect x="94" y="180" width="180" height="30" rx="8" fill="#e8eefc"/>
  <text x="112" y="200" font-family="Arial, sans-serif" font-size="12" font-weight="700" fill="#3b5bdb">지급 항목</text>
  <rect x="286" y="180" width="180" height="30" rx="8" fill="#fdeef0"/>
  <text x="304" y="200" font-family="Arial, sans-serif" font-size="12" font-weight="700" fill="#e5484d">공제 항목</text>

  <!-- 지급 항목 행 -->
  <g>
    <rect x="112" y="224" width="60" height="8" rx="4" fill="#8a8ca0"/><rect x="196" y="224" width="60" height="8" rx="4" fill="#5a5c72"/>
    <rect x="112" y="246" width="72" height="8" rx="4" fill="#8a8ca0"/><rect x="206" y="246" width="50" height="8" rx="4" fill="#5a5c72"/>
    <rect x="112" y="268" width="66" height="8" rx="4" fill="#8a8ca0"/><rect x="214" y="268" width="42" height="8" rx="4" fill="#5a5c72"/>
    <rect x="112" y="290" width="54" height="8" rx="4" fill="#8a8ca0"/><rect x="206" y="290" width="50" height="8" rx="4" fill="#5a5c72"/>
    <line x1="112" y1="312" x2="256" y2="312" stroke="#e7e8f2" stroke-width="1.5"/>
    <rect x="112" y="320" width="46" height="9" rx="4.5" fill="#26244d"/><rect x="196" y="320" width="60" height="9" rx="4.5" fill="#26244d"/>
  </g>
  <!-- 공제 항목 행 -->
  <g>
    <rect x="304" y="224" width="54" height="8" rx="4" fill="#8a8ca0"/><rect x="404" y="224" width="44" height="8" rx="4" fill="#5a5c72"/>
    <rect x="304" y="246" width="60" height="8" rx="4" fill="#8a8ca0"/><rect x="404" y="246" width="44" height="8" rx="4" fill="#5a5c72"/>
    <rect x="304" y="268" width="66" height="8" rx="4" fill="#8a8ca0"/><rect x="410" y="268" width="38" height="8" rx="4" fill="#5a5c72"/>
    <rect x="304" y="290" width="50" height="8" rx="4" fill="#8a8ca0"/><rect x="410" y="290" width="38" height="8" rx="4" fill="#5a5c72"/>
    <line x1="304" y1="312" x2="448" y2="312" stroke="#f0dce0" stroke-width="1.5"/>
    <rect x="304" y="320" width="46" height="9" rx="4.5" fill="#26244d"/><rect x="404" y="320" width="44" height="9" rx="4.5" fill="#e5484d"/>
  </g>

  <!-- 실지급액 박스 -->
  <rect x="94" y="348" width="372" height="60" rx="12" fill="#eef0ff" stroke="#d9dcfb"/>
  <rect x="112" y="366" width="70" height="9" rx="4.5" fill="#8f8bf0"/>
  <text x="448" y="392" font-family="Arial, sans-serif" font-size="24" font-weight="800" fill="#4f46e5" text-anchor="end">2,887,380<tspan font-size="13" fill="#8f8bf0"> 원</tspan></text>

  <!-- 하단 근무 요약 칩 -->
  <g>
    <rect x="70" y="424" width="66" height="34" rx="9" fill="#ffffff" stroke="#e7e8f2"/>
    <rect x="82" y="432" width="30" height="6" rx="3" fill="#c7c9f7"/><rect x="82" y="444" width="24" height="8" rx="4" fill="#26244d"/>
    <rect x="142" y="424" width="66" height="34" rx="9" fill="#ffffff" stroke="#e7e8f2"/>
    <rect x="154" y="432" width="30" height="6" rx="3" fill="#c7c9f7"/><rect x="154" y="444" width="36" height="8" rx="4" fill="#26244d"/>
    <rect x="214" y="424" width="66" height="34" rx="9" fill="#ffffff" stroke="#e7e8f2"/>
    <rect x="226" y="432" width="30" height="6" rx="3" fill="#c7c9f7"/><rect x="226" y="444" width="30" height="8" rx="4" fill="#f59e0b"/>
    <rect x="286" y="424" width="66" height="34" rx="9" fill="#ffffff" stroke="#e7e8f2"/>
    <rect x="298" y="432" width="30" height="6" rx="3" fill="#c7c9f7"/><rect x="298" y="444" width="30" height="8" rx="4" fill="#06b6d4"/>
    <rect x="358" y="424" width="66" height="34" rx="9" fill="#ffffff" stroke="#e7e8f2"/>
    <rect x="370" y="432" width="30" height="6" rx="3" fill="#c7c9f7"/><rect x="370" y="444" width="30" height="8" rx="4" fill="#26244d"/>
    <rect x="430" y="424" width="60" height="34" rx="9" fill="#ffffff" stroke="#e7e8f2"/>
    <rect x="442" y="432" width="30" height="6" rx="3" fill="#c7c9f7"/><rect x="442" y="444" width="28" height="8" rx="4" fill="#10b981"/>
  </g>
</svg>
